{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="page-intro mb-4">
  <span class="eyebrow">Business setup</span>
  <h1 class="section-title">Brand your MoMo reports</h1>
  <p class="muted-copy">Set your business name, upload a logo, and define your opening wallet balances. These details appear across the dashboard and report exports.</p>
</section>
<div class="row g-4">
  <div class="col-lg-7">
    <article class="content-card">
      <form method="post" enctype="multipart/form-data" class="momo-form" novalidate>
        {% csrf_token %}
        <div class="row g-3">
          {% for field in form %}
          <div class="col-12 {% if field.name != 'logo' %}col-md-6{% endif %}">
            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% if field.help_text %}<div class="form-help">{{ field.help_text }}</div>{% endif %}
            {% for error in field.errors %}<div class="form-error">{{ error }}</div>{% endfor %}
          </div>
          {% endfor %}
        </div>
        {% for error in form.non_field_errors %}<div class="form-error mt-3">{{ error }}</div>{% endfor %}
        <button class="btn btn-momo-primary btn-lg mt-4" type="submit">Save business profile</button>
      </form>
    </article>
  </div>
  <div class="col-lg-5">
    <article class="content-card h-100">
      <p class="card-kicker mb-1">Report preview</p>
      <h2 class="section-title mb-3">How your business appears</h2>
      <div class="report-preview-card">
        <div class="report-preview-header">
          {% if profile.logo %}
          <img src="{{ profile.logo.url }}" alt="{{ profile.business_name|default:'Business' }} logo" class="logo-thumb">
          {% else %}
          <div class="logo-placeholder">Logo</div>
          {% endif %}
          <div>
            <strong>{{ profile.business_name|default:'Business name will appear here' }}</strong>
            <span>{{ profile.owner_label }}</span>
            <span>{{ request.user.email|default:'Email not set yet' }}</span>
          </div>
        </div>
        <div class="preview-metrics">
          <div><span>Opening e-cash</span><strong>{{ profile.opening_ecash }}</strong></div>
          <div><span>Opening physical cash</span><strong>{{ profile.opening_physical_cash }}</strong></div>
          <div><span>Current e-cash</span><strong>{{ profile.current_ecash }}</strong></div>
          <div><span>Current physical cash</span><strong>{{ profile.current_physical_cash }}</strong></div>
        </div>
      </div>
      <p class="form-help mt-3 mb-0">If you have not posted any transactions yet, saving this form also sets your starting current balances.</p>
    </article>
  </div>
</div>
{% endblock %}