{% extends "base.html" %}

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

{% block content %}
<section class="page-intro mb-4 d-flex flex-wrap justify-content-between align-items-end gap-3">
  <div>
    <span class="eyebrow">Report centre</span>
    <h1 class="section-title">Daily, weekly, monthly, and yearly reports</h1>
    <p class="muted-copy">Filter your period, print the page, or download a branded PDF that includes your business name, logo, and user details.</p>
  </div>
  <div class="d-flex flex-wrap gap-2">
    <button class="btn btn-momo-ghost" onclick="window.print()">Print report</button>
    <a class="btn btn-momo-primary" href="{% url 'report_pdf' %}?period={{ form.cleaned_data.period|default:request.GET.period|default:'daily' }}{% if request.GET.start_date %}&start_date={{ request.GET.start_date }}{% endif %}{% if request.GET.end_date %}&end_date={{ request.GET.end_date }}{% endif %}">Download PDF</a>
  </div>
</section>
<div class="row g-4 mb-4">
  <div class="col-lg-4">
    <article class="content-card h-100">
      <form method="get" class="momo-form" novalidate>
        <div class="d-grid gap-3">
          {% for field in form %}
          <div>
            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% for error in field.errors %}<div class="form-error">{{ error }}</div>{% endfor %}
          </div>
          {% endfor %}
          {% for error in form.non_field_errors %}<div class="form-error">{{ error }}</div>{% endfor %}
        </div>
        <button class="btn btn-momo-primary mt-4" type="submit">Refresh report</button>
      </form>
    </article>
  </div>
  <div class="col-lg-8">
    <article class="content-card report-sheet">
      <div class="report-sheet-header">
        <div class="report-brand d-flex gap-3 align-items-center">
          {% if profile.logo %}
          <img src="{{ profile.logo.url }}" alt="{{ profile.business_name }} logo" class="logo-thumb">
          {% else %}
          <div class="logo-placeholder">Logo</div>
          {% endif %}
          <div>
            <h2 class="section-title mb-1">{{ profile.business_name|default:'MoMoLedger Business' }}</h2>
            <p class="muted-copy mb-0">{{ profile.owner_label }} · {{ request.user.username }} · {{ request.user.email|default:'Email not set' }}</p>
          </div>
        </div>
        <div class="report-window text-lg-end">
          <span class="eyebrow">Report window</span>
          <strong>{{ start_date }} to {{ end_date }}</strong>
        </div>
      </div>
      <div class="row g-3 my-1">
        <div class="col-md-3"><div class="mini-stat"><span>Transactions</span><strong>{{ total_count }}</strong></div></div>
        <div class="col-md-3"><div class="mini-stat"><span>Gross amount</span><strong>{{ total_amount }}</strong></div></div>
        <div class="col-md-3"><div class="mini-stat"><span>Service fees</span><strong>{{ total_fees }}</strong></div></div>
        <div class="col-md-3"><div class="mini-stat"><span>Closing cash</span><strong>{{ closing_physical }}</strong></div></div>
      </div>
      <div class="preview-metrics two-up mb-4">
        <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>Closing e-cash</span><strong>{{ closing_ecash }}</strong></div>
        <div><span>Closing physical cash</span><strong>{{ closing_physical }}</strong></div>
      </div>
      <div class="table-responsive mb-4">
        <table class="table align-middle momo-table">
          <thead>
            <tr>
              <th>Type</th>
              <th>Count</th>
              <th>Amount</th>
              <th>Fees</th>
            </tr>
          </thead>
          <tbody>
            {% for row in summary %}
            <tr>
              <td>{{ row.label }}</td>
              <td>{{ row.count }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.fees }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="table-responsive">
        <table class="table align-middle momo-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Client</th>
              <th>Type</th>
              <th>Amount</th>
              <th>Fee</th>
              <th>Balances after</th>
            </tr>
          </thead>
          <tbody>
            {% for transaction in entries %}
            <tr>
              <td>{{ transaction.created_at|date:"M d, Y H:i" }}</td>
              <td>{{ transaction.client_name }}</td>
              <td>{{ transaction.get_transaction_type_display }}</td>
              <td>{{ transaction.amount }}</td>
              <td>{{ transaction.service_charge }}</td>
              <td>E {{ transaction.ecash_after }} · P {{ transaction.physical_after }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="6">
                <div class="empty-state py-4">
                  <h3>No entries in this period</h3>
                  <p>Try another range or add a new transaction to populate the report.</p>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </article>
  </div>
</div>
{% endblock %}