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

{% block title %}Multi-Branch Business Closing{% endblock %}

{% block stylesheets %}
<style>
  /* ── General ───────────────────────────────────── */
  .section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 .6rem;
    padding-bottom: .3rem;
    border-bottom: 3px solid #0d6efd;
    color: #111827;
  }
  .grand-row td, .grand-row th {
    background: #e2e8f0 !important;
    font-weight: 700;
  }
  .total-row td {
    background: #f1f5f9 !important;
    font-weight: 600;
  }
  @media print { .no-print { display: none !important; } }

  /* ── Sticky first column ───────────────────────── */
  .tbl-parallel thead th:first-child,
  .tbl-parallel tbody td:first-child,
  .tbl-parallel tfoot td:first-child,
  .tbl-parallel tfoot th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  .tbl-parallel thead th:first-child {
    z-index: 3;
  }

  /* ── Branch separator (thick left border) ──────── */
  .br-sep { border-left: 2.5px solid #94a3b8 !important; }

  /* ── Grand-total column ────────────────────────── */
  .gt-col { background: rgba(22, 163, 74, .04) !important; }

  /* ── Summary cards ─────────────────────────────── */
  .summary-card {
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    height: 100%;
  }
  .summary-card .card-top {
    padding: .55rem .75rem;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .summary-card .card-body-custom {
    padding: .5rem .75rem;
    background: #fff;
  }
  .summary-card .metric {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    padding: .15rem 0;
  }
  .summary-card .metric .lbl { color: #6B7280; }
  .summary-card .metric .val { font-weight: 600; color: #111827; }

  /* ── Responsive scroll hint ────────────────────── */
  .scroll-hint {
    display: none;
    text-align: center;
    color: #94a3b8;
    font-size: .78rem;
    padding: .25rem 0;
  }
  @media (max-width: 992px) {
    .scroll-hint { display: block; }
  }
</style>
{% endblock %}

{% block heading %}Multi-Branch Business Closing{% endblock %}

{% block content %}
<div class="container-fluid my-3">
<!-- 
{# ═══════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════ #} -->
<form method="get" class="mb-4 no-print">
  <div class="row g-2 align-items-end">
    <div class="col-auto">
      <label class="small fw-semibold mb-1">From</label>
      <input type="date" name="start_date" value="{{ start_date|date:'Y-m-d' }}"
             class="form-control form-control-sm">
    </div>
    <div class="col-auto">
      <label class="small fw-semibold mb-1">To</label>
      <input type="date" name="end_date" value="{{ end_date|date:'Y-m-d' }}"
             class="form-control form-control-sm">
    </div>
    <div class="col">
      <label class="small fw-semibold mb-1">Branches</label>
      <div class="d-flex flex-wrap gap-3">
        {% for b in branches %}
        <div class="form-check">
          <input class="form-check-input" type="checkbox"
                 name="branches" value="{{ b.id }}" id="br_{{ b.id }}"
                 {% if b.id|stringformat:"s" in selected_branches %}checked{% endif %}>
          <label class="form-check-label small" for="br_{{ b.id }}">{{ b.label }}</label>
        </div>
        {% endfor %}
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fa fa-filter"></i> Filter
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()">
        <i class="fa fa-print"></i> Print
      </button>
    </div>
  </div>
</form>

<h5 class="text-center mb-3">
  Multi-Branch Business Closing &mdash;
  {{ start_date }}{% if start_date != end_date %} to {{ end_date }}{% endif %}
</h5>

<!-- {# ═══════════════════════════════════════════════════════════
   SUMMARY CARDS (one per branch + combined)
   ═══════════════════════════════════════════════════════════ #} -->
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3 mb-4">
  {% for t in tenant_data %}
  <div class="col">
    <div class="summary-card">
      <div class="card-top" style="background:{{ t.color_dk }};">{{ t.name }}</div>
      <div class="card-body-custom">
        <div class="metric">
          <span class="lbl">Grand Sale</span>
          <span class="val">{{ t.sale.grand_sale|floatformat:2 }}</span>
        </div>
        <div class="metric">
          <span class="lbl">Total Cash</span>
          <span class="val">{{ t.cash.total|floatformat:2 }}</span>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

  {# Combined card #}
  {% if tenant_data|length > 1 %}
  <div class="col">
    <div class="summary-card">
      <div class="card-top" style="background:#16a34a;">Combined</div>
      <div class="card-body-custom">
        <div class="metric">
          <span class="lbl">Grand Sale</span>
          <span class="val">{{ grand_sale.grand_sale|floatformat:2 }}</span>
        </div>
        <div class="metric">
          <span class="lbl">Total Cash</span>
          <span class="val">{{ grand_cash.total|floatformat:2 }}</span>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<!-- {# ═══════════════════════════════════════════════════════════
   SECTION 1 — SALE (parallel per branch)
   ═══════════════════════════════════════════════════════════ #} -->
<div class="section-title">1. Sale Section</div>
<p class="scroll-hint"><i class="fa fa-arrows-alt-h"></i> Scroll horizontally to see all branches</p>
<div class="table-responsive mb-4">
  <table class="table table-sm table-bordered tbl-parallel mb-0">
    <thead>
      {# Row 1: Branch names #}
      <tr>
        <th rowspan="2" class="align-middle text-center" style="min-width:90px; background:#f8fafc;">
          Head
        </th>
        {% for t in tenant_data %}
        <th colspan="2" class="text-center br-sep"
            style="background:{{ t.color_dk }}; color:#fff; font-size:.85rem;">
          {{ t.name }}
        </th>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <th colspan="2" class="text-center br-sep"
            style="background:#16a34a; color:#fff; font-size:.85rem;">
          Grand Total
        </th>
        {% endif %}
      </tr>
      {# Row 2: Sale / Return sub-headers #}
      <tr>
        {% for t in tenant_data %}
        <th class="text-end br-sep" style="background:{{ t.color_lt }}; font-size:.8rem;">Sale</th>
        <th class="text-end" style="background:{{ t.color_lt }}; font-size:.8rem;">Return</th>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <th class="text-end br-sep" style="background:#dcfce7; font-size:.8rem;">Sale</th>
        <th class="text-end" style="background:#dcfce7; font-size:.8rem;">Return</th>
        {% endif %}
      </tr>
    </thead>

    <tbody>
      {# ── Cash ── #}
      <tr>
        <td class="fw-semibold">Cash</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.sale.cash_sale|floatformat:2 }}</td>
        <td class="text-end">{{ t.sale.cash_return|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_sale.cash_sale|floatformat:2 }}</td>
        <td class="text-end fw-bold gt-col">{{ grand_sale.cash_return|floatformat:2 }}</td>
        {% endif %}
      </tr>

      {# ── Credit ── #}
      <tr>
        <td class="fw-semibold">Credit</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.sale.credit_sale|floatformat:2 }}</td>
        <td class="text-end">{{ t.sale.credit_return|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_sale.credit_sale|floatformat:2 }}</td>
        <td class="text-end fw-bold gt-col">{{ grand_sale.credit_return|floatformat:2 }}</td>
        {% endif %}
      </tr>

      {# ── Vendor ── #}
      <tr>
        <td class="fw-semibold">Vendor</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.sale.vendor_sale|floatformat:2 }}</td>
        <td class="text-end">{{ t.sale.vendor_return|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_sale.vendor_sale|floatformat:2 }}</td>
        <td class="text-end fw-bold gt-col">{{ grand_sale.vendor_return|floatformat:2 }}</td>
        {% endif %}
      </tr>
    </tbody>

    <tfoot>
      {# ── Total ── #}
      <tr class="total-row">
        <td class="fw-bold">Total</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.sale.total_sale|floatformat:2 }}</td>
        <td class="text-end">{{ t.sale.total_return|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_sale.total_sale|floatformat:2 }}</td>
        <td class="text-end fw-bold gt-col">{{ grand_sale.total_return|floatformat:2 }}</td>
        {% endif %}
      </tr>

      {# ── Grand Sale (Sale − Return) ── #}
      <tr class="grand-row">
        <td class="fw-bold">Grand&nbsp;Sale</td>
        {% for t in tenant_data %}
        <td colspan="2" class="text-end br-sep" style="font-size:.95rem;">
          {{ t.sale.grand_sale|floatformat:2 }}
        </td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td colspan="2" class="text-end br-sep gt-col" style="font-size:.95rem;">
          {{ grand_sale.grand_sale|floatformat:2 }}
        </td>
        {% endif %}
      </tr>
    </tfoot>
  </table>
</div>

<!-- {# ═══════════════════════════════════════════════════════════
   SECTION 2 — CASH (parallel per branch)
   ═══════════════════════════════════════════════════════════ #} -->
<div class="section-title">2. Cash Section</div>
<p class="scroll-hint"><i class="fa fa-arrows-alt-h"></i> Scroll horizontally to see all branches</p>
<div class="table-responsive mb-4">
  <table class="table table-sm table-bordered tbl-parallel mb-0">
    <thead>
      <tr>
        <th class="align-middle" style="min-width:220px; background:#f8fafc;">Head</th>
        {% for t in tenant_data %}
        <th class="text-end br-sep"
            style="background:{{ t.color_dk }}; color:#fff; font-size:.85rem; min-width:120px;">
          {{ t.name }}
        </th>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <th class="text-end br-sep"
            style="background:#16a34a; color:#fff; font-size:.85rem; min-width:120px;">
          Grand Total
        </th>
        {% endif %}
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Cash From Cash (Sale − Return)</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.cash_sr|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.cash_sr|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Cash From Credit (Sale − Return)</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.credit_sr|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.credit_sr|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Cash From Vendor (Sale − Return)</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.vendor_sr|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.vendor_sr|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Credit Received / Recovery</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.recovery|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.recovery|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Vendor Payments</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.vendor_pay|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.vendor_pay|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Expense</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.expense|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.expense|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Salary</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.salary|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.salary|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Debitor</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.debitor|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.debitor|floatformat:2 }}</td>
        {% endif %}
      </tr>

      <tr>
        <td>Investor In-Out</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep">{{ t.cash.investor|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end fw-bold br-sep gt-col">{{ grand_cash.investor|floatformat:2 }}</td>
        {% endif %}
      </tr>
    </tbody>

    <tfoot>
      <tr class="grand-row">
        <td class="fw-bold text-end">Total Cash</td>
        {% for t in tenant_data %}
        <td class="text-end br-sep" style="font-size:.95rem;">{{ t.cash.total|floatformat:2 }}</td>
        {% endfor %}
        {% if tenant_data|length > 1 %}
        <td class="text-end br-sep gt-col" style="font-size:.95rem;">{{ grand_cash.total|floatformat:2 }}</td>
        {% endif %}
      </tr>
    </tfoot>
  </table>
</div>

{% if not tenant_data %}
<div class="alert alert-info text-center my-5">
  <i class="fa fa-info-circle me-1"></i>
  No branches selected or no connected branches found. Please select at least one branch above.
</div>
{% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  // "Select All / None" toggle for branch checkboxes
  var cbs = document.querySelectorAll('input[name="branches"]');
  if (cbs.length > 2) {
    var wrap = cbs[0].closest('.d-flex');
    if (wrap) {
      var toggleDiv = document.createElement('div');
      toggleDiv.className = 'form-check';
      toggleDiv.innerHTML =
        '<input class="form-check-input" type="checkbox" id="br_all" checked>' +
        '<label class="form-check-label small fw-semibold" for="br_all">All</label>';
      wrap.insertBefore(toggleDiv, wrap.firstChild);

      var allCb = document.getElementById('br_all');
      // sync initial state
      allCb.checked = Array.from(cbs).every(function(c){ return c.checked; });

      allCb.addEventListener('change', function(){
        cbs.forEach(function(c){ c.checked = allCb.checked; });
      });
      cbs.forEach(function(c){
        c.addEventListener('change', function(){
          allCb.checked = Array.from(cbs).every(function(cb){ return cb.checked; });
        });
      });
    }
  }
});
</script>
{% endblock %}