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

{% block title %}Multi Sub-Tenant 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 ──────────────────────────── */
  .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; }

  /* ── Bank flow cards ───────────────────────────── */
  .bc-card        { border:1px solid #dee2e6; border-radius:.375rem; }
  .bc-card-header { padding:.5rem .75rem; font-weight:600; border-bottom:1px solid #dee2e6; text-align:center; color:#fff; }
  .bc-card-body   { padding:.5rem .75rem; }

  .st-flow-header {
    font-size: 1rem;
    font-weight: 700;
    padding: .4rem .75rem;
    border-radius: .375rem;
    margin-bottom: .5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .st-flow-header:hover { opacity: .9; }

  /* ── 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 Sub-Tenant 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">Sub-Tenants</label>
      <div class="d-flex flex-wrap gap-3">
        {% for st in sub_tenants %}
        <div class="form-check">
          <input class="form-check-input st-cb" type="checkbox"
                 name="sub_tenants" value="{{ st.id }}" id="st_{{ st.id }}"
                 {% if st.id|stringformat:"s" in selected_sub_tenants %}checked{% endif %}>
          <label class="form-check-label small" for="st_{{ st.id }}">{{ st.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 Sub-Tenant Business Closing &mdash;
  {{ start_date }}{% if start_date != end_date %} to {{ end_date }}{% endif %}
</h5>

{% if not tenant_data %}
<div class="alert alert-info text-center my-5">
  <i class="fa fa-info-circle me-1"></i>
  No active sub-tenants found. Please create sub-tenants first or select at least one above.
</div>
{% else %}

<!-- {# ═══════════════════════════════════════════════════════════
   SUMMARY CARDS
   ═══════════════════════════════════════════════════════════ #} -->
<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 %}

  {% 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 sub-tenant)
   ═══════════════════════════════════════════════════════════ #} -->
<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 sub-tenants</p>
<div class="table-responsive mb-4">
  <table class="table table-sm table-bordered tbl-parallel mb-0">
    <thead>
      <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>
      <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>
      <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>

      <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>

      <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>
      <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>

      <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 sub-tenant)
   ═══════════════════════════════════════════════════════════ #} -->
<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 sub-tenants</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>
<!-- 
{# ═══════════════════════════════════════════════════════════
   SECTION 3 — BANK FLOW (per sub-tenant, collapsible)
   ═══════════════════════════════════════════════════════════ #} -->
<div class="section-title">3. Payments Flow (Per Sub-Tenant)</div>
{% for flow in bank_flow_data %}
<div class="mb-3">
  {# Sub-tenant header (collapsible) #}
  <div class="st-flow-header"
       style="background:{{ flow.color_lt }}; color:{{ flow.color_dk }}; border:1px solid {{ flow.color_dk }}33;"
       data-flow-target="flow_{{ forloop.counter }}">
    <span><i class="fa fa-university me-1"></i> {{ flow.sub_tenant_name }}</span>
    <span>
      <span class="badge" style="background:{{ flow.color_dk }};">
        {{ flow.bank_cards|length }} bank{{ flow.bank_cards|length|pluralize }}
      </span>
      <i class="fa fa-chevron-down ms-1 flow-chevron"></i>
    </span>
  </div>

  {# Bank cards grid #}
  <div id="flow_{{ forloop.counter }}">
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-2">
      {% for card in flow.bank_cards %}
      <div class="col">
        <div class="bc-card h-100">
          <div class="bc-card-header" style="background:{{ flow.color_dk }};">
            {{ card.name|title }}
          </div>
          <div class="bc-card-body">
            <table class="table table-sm table-borderless mb-0">
              <tbody>
                <tr style="background:#e8f0fe;">
                  <td class="fw-bold">Opening Amount</td>
                  <td class="text-end fw-bold">{{ card.opening|floatformat:2 }}</td>
                </tr>
                {% for h in card.heads %}
                <tr>
                  <td>{{ h.label }}</td>
                  <td class="text-end">{{ h.amount|floatformat:2 }}</td>
                </tr>
                {% endfor %}
                <tr style="background:#d1fae5;">
                  <td class="fw-bold">Closing Amount</td>
                  <td class="text-end fw-bold">{{ card.closing|floatformat:2 }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% empty %}
      <div class="col-12">
        <p class="text-muted ps-2"><i class="fa fa-info-circle me-1"></i>No banks found for this sub-tenant.</p>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% empty %}
<p class="text-muted">No bank flow data available.</p>
{% endfor %}

{% endif %} {# end if tenant_data #}

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){

  // ── "Select All / None" toggle for sub-tenant checkboxes ──
  var cbs = document.querySelectorAll('.st-cb');
  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="st_all" checked>' +
        '<label class="form-check-label small fw-semibold" for="st_all">All</label>';
      wrap.insertBefore(toggleDiv, wrap.firstChild);

      var allCb = document.getElementById('st_all');
      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; });
        });
      });
    }
  }

  // ── Collapsible bank-flow sections ──
  document.querySelectorAll('.st-flow-header').forEach(function(el){
    el.addEventListener('click', function(){
      var targetId = el.getAttribute('data-flow-target');
      var target = document.getElementById(targetId);
      if(!target) return;
      var icon = el.querySelector('.flow-chevron');
      if(target.style.display === 'none'){
        target.style.display = '';
        if(icon){
          icon.classList.remove('fa-chevron-right');
          icon.classList.add('fa-chevron-down');
        }
      } else {
        target.style.display = 'none';
        if(icon){
          icon.classList.remove('fa-chevron-down');
          icon.classList.add('fa-chevron-right');
        }
      }
    });
  });

});
</script>
{% endblock %}