{% extends "pos/base.html" %}
{% load static %}

{% block stylesheets %}
<style>
.report-card { border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.07); }
.mode-badge {
  padding:.25rem .65rem; border-radius:20px; font-size:.78rem; font-weight:600;
}
.mode-Easypaisa { background:#e0f2fe; color:#0369a1; }
.mode-UBL       { background:#fce7f3; color:#9d174d; }
.mode-Meezan    { background:#dcfce7; color:#166534; }
.mode-Others    { background:#f3f4f6; color:#374151; }

.stat-box {
  text-align:center; padding:.85rem 1rem;
  border-radius:10px; border:1px solid #e2e8f0;
}
.stat-box .num { font-size:1.6rem; font-weight:700; color:#1e40af; }
.stat-box .lbl { font-size:.72rem; text-transform:uppercase; color:#6b7280; letter-spacing:.04em; }

.report-table thead th {
  background:#f8fafc; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#374151;
  padding:.55rem .75rem; white-space:nowrap;
}
.report-table td { padding:.5rem .75rem; font-size:.86rem; vertical-align:middle; }
.branch-cell { font-weight:600; color:#1e40af; font-size:.85rem; }
.sub-cell    { font-size:.75rem; color:#6b7280; }
.amount-cell { font-weight:700; color:#166534; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h3 class="mb-0"><i class="fas fa-chart-bar text-info mr-2"></i>Branch Payments Report</h3>
      <small class="text-muted">Audit of all subscription payments collected</small>
    </div>
    <a href="{% url 'authentication:branch_subscription_manage' %}" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left mr-1"></i>Subscription Manager
    </a>
  </div>

  <!-- Filters -->
  <div class="card report-card mb-3">
    <div class="card-body py-2">
      <form method="get" class="form-inline flex-wrap" style="gap:.5rem;">
        <div class="form-group mb-1">
          <label class="mr-1 small font-weight-bold">From</label>
          <input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from }}">
        </div>
        <div class="form-group mb-1">
          <label class="mr-1 small font-weight-bold">To</label>
          <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to }}">
        </div>
        <div class="form-group mb-1">
          <select name="payment_mode" class="form-control form-control-sm">
            <option value="">All Modes</option>
            {% for mode in PAYMENT_MODES %}
            <option value="{{ mode }}" {% if mode == filter_mode %}selected{% endif %}>{{ mode }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group mb-1">
          <select name="branch_id" class="form-control form-control-sm">
            <option value="">All Branches</option>
            {% for b in branches_for_filter %}
            <option value="{{ b.id }}" {% if b.id|stringformat:"s" == filter_bid %}selected{% endif %}>
              {{ b.company_name }} / {{ b.branch_name }}
            </option>
            {% endfor %}
          </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm mb-1">
          <i class="fas fa-filter mr-1"></i>Filter
        </button>
        <a href="{% url 'authentication:branch_payments_report' %}" class="btn btn-outline-secondary btn-sm mb-1">Reset</a>
      </form>
    </div>
  </div>

  <!-- Summary Stats -->
  <div class="row mb-3" style="row-gap:.75rem;">
    <div class="col-6 col-md-3">
      <div class="stat-box">
        <div class="num">{{ payments|length }}</div>
        <div class="lbl">Payments</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-box">
        <div class="num text-success">{{ total_amount|floatformat:0 }}</div>
        <div class="lbl">Total Amount</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-box">
        <div class="num text-info">{{ branch_totals|length }}</div>
        <div class="lbl">Branches</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-box">
        <div class="num text-warning">{{ date_from }}</div>
        <div class="lbl">Date From</div>
      </div>
    </div>
  </div>

  <div class="row mb-4" style="row-gap:.75rem;">

    <!-- Mode-wise -->
    <div class="col-md-4">
      <div class="card report-card h-100">
        <div class="card-header font-weight-bold small">
          <i class="fas fa-credit-card mr-1 text-primary"></i>Payment Mode Breakdown
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <thead class="bg-light">
              <tr>
                <th>Mode</th>
                <th class="text-right">Count</th>
                <th class="text-right">Amount</th>
              </tr>
            </thead>
            <tbody>
              {% for row in totals_by_mode %}
              <tr>
                <td><span class="mode-badge mode-{{ row.payment_mode }}">{{ row.payment_mode }}</span></td>
                <td class="text-right">{{ row.count }}</td>
                <td class="text-right font-weight-bold text-success">{{ row.total|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="3" class="text-center text-muted py-3">No data</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Branch-wise -->
    <div class="col-md-8">
      <div class="card report-card h-100">
        <div class="card-header font-weight-bold small">
          <i class="fas fa-building mr-1 text-info"></i>Branch-wise Summary
        </div>
        <div class="card-body p-0" style="max-height:250px; overflow-y:auto;">
          <table class="table table-sm mb-0">
            <thead class="bg-light sticky-top">
              <tr>
                <th>Branch</th>
                <th class="text-right">Payments</th>
                <th class="text-right">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for row in branch_totals %}
              <tr>
                <td>
                  <div class="branch-cell">{{ row.branch__company_name }}</div>
                  <div class="sub-cell">{{ row.branch__branch_name }}</div>
                </td>
                <td class="text-right">{{ row.count }}</td>
                <td class="text-right font-weight-bold text-success">{{ row.total|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="3" class="text-center text-muted py-3">No data</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <!-- Detailed Payments Table -->
  <div class="card report-card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span class="font-weight-bold small">
        <i class="fas fa-list text-success mr-1"></i>All Payments
      </span>
      <span class="badge badge-primary">{{ payments|length }}</span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table report-table table-hover mb-0">
          <thead>
            <tr>
              <th>#</th>
              <th>Date</th>
              <th>Branch</th>
              <th>Mode</th>
              <th class="text-right">Amount</th>
              <th>Months</th>
              <th>Old Expiry</th>
              <th>New Expiry</th>
              <th>By</th>
            </tr>
          </thead>
          <tbody>
            {% for p in payments %}
            <tr>
              <td class="text-muted">{{ forloop.counter }}</td>
              <td>{{ p.payment_date|date:"d M Y" }}</td>
              <td>
                <div class="branch-cell">{{ p.branch.company_name }}</div>
                <div class="sub-cell">{{ p.branch.branch_name }}</div>
              </td>
              <td><span class="mode-badge mode-{{ p.payment_mode }}">{{ p.payment_mode }}</span></td>
              <td class="text-right amount-cell">{{ p.amount|floatformat:0 }}</td>
              <td class="text-center">
                {% if p.months_extended %}
                <span class="badge badge-info">+{{ p.months_extended }}m</span>
                {% else %}<span class="text-muted">—</span>{% endif %}
              </td>
              <td class="text-muted">{{ p.old_expiry_date|date:"d M Y"|default:"—" }}</td>
              <td>
                {% if p.new_expiry_date %}
                <span class="badge badge-success">{{ p.new_expiry_date|date:"d M Y" }}</span>
                {% else %}<span class="text-muted">—</span>{% endif %}
              </td>
              <td class="text-muted small">{{ p.created_by.username|default:"—" }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="9" class="text-center py-4 text-muted">
                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                No payments found for selected filters.
              </td>
            </tr>
            {% endfor %}
          </tbody>
          {% if payments %}
          <tfoot class="bg-light">
            <tr>
              <td colspan="4" class="font-weight-bold text-right">Total</td>
              <td class="text-right font-weight-bold text-success">{{ total_amount|floatformat:0 }}</td>
              <td colspan="4"></td>
            </tr>
          </tfoot>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}