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

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

{% block stylesheets %}
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root {
    --purple:     #6d28d9;
    --purple-lt:  #f5f3ff;
    --purple-bd:  #c4b5fd;
    --navy:       #0f2b46;
    --green:      #16a34a;
    --red:        #dc2626;
    --border:     #e2e6ed;
    --muted:      #7a8599;
  }

  body { font-family: 'DM Sans', sans-serif; }

  /* ── Method badge ── */
  .method-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--purple-lt); border: 1px solid var(--purple-bd);
    color: var(--purple); font-size: .7rem; font-weight: 700;
    padding: 3px 9px; border-radius: 20px; letter-spacing: .3px;
  }
  .method-badge .dot {
    width: 5px; height: 5px; background: var(--purple);
    border-radius: 50%; animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ── Info banner ── */
  .reverse-info {
    background: var(--purple-lt); border: 1px solid var(--purple-bd);
    border-radius: 8px; padding: 10px 16px; margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .79rem; color: var(--purple);
  }
  .reverse-info strong { color: #4c1d95; }

  /* ── Section titles ── */
  .section-title {
    font-size: 1.05rem; font-weight: 700;
    margin: 1.4rem 0 .5rem; padding-bottom: .3rem;
    border-bottom: 3px solid var(--purple);
    color: #111827; display: flex; align-items: center; gap: 8px;
  }

  /* ── Grand / total rows ── */
  .grand-row td, .grand-row th {
    background: #e2e8f0 !important; font-weight: 700;
  }

  /* ── Parallel table ── */
  .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; }
  .br-sep { border-left: 2.5px solid #94a3b8 !important; }
  .gt-col  { background: rgba(109, 40, 217, .04) !important; }

  /* ── Expandable rows ── */
  .expandable-row td:first-child { cursor: pointer; user-select: none; }
  .expandable-row:hover { background: #f8fafc; }

  /* ── 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; font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
  .summary-card .metric.growth-metric .val { font-weight: 700; }

  /* ── Detail sub-tables ── */
  .detail-table { background: #f8f9fb; }
  .detail-table th { background: #ede9fe !important; font-size: .78rem; }
  .detail-table td { font-size: .8rem; }

  /* ── Delta colors ── */
  .delta-pos { color: var(--green); font-weight: 600; }
  .delta-neg { color: var(--red);   font-weight: 600; }

  /* ── Scroll hint ── */
  .scroll-hint { display:none; text-align:center; color:#94a3b8; font-size:.76rem; padding:.2rem 0; }
  @media (max-width:992px) { .scroll-hint { display:block; } }

  /* ── Switch button ── */
  .btn-switch {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); padding: 5px 12px; border-radius: 6px;
    font-size: .78rem; font-weight: 600; text-decoration: none;
    transition: all .15s;
  }
  .btn-switch:hover { border-color: var(--purple); color: var(--purple); text-decoration: none; }

  .table-responsive { padding-bottom: 12px; }

  @media print {
    .no-print { display: none !important; }
    body * { font-family: 'DM Sans', sans-serif; }
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid my-3">

  <!-- ══ Page Header ══ -->
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3 no-print">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <h5 class="mb-0 fw-bold" style="color:var(--navy);">Multi-Branch Business Worth</h5>
    </div>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.print()">
        <i class="bi bi-printer"></i> Print
      </button>
    </div>
  </div>

  <!-- ══ 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">As of Date</label>
        <input type="date" name="date" value="{{ as_of_date|date:'Y-m-d' }}"
               class="form-control form-control-sm">
      </div>
      <div class="col-auto" id="compare-toggle-col">
        <a href="#" id="toggle-compare" class="small" style="color:var(--purple);">
          <i class="bi bi-plus-circle me-1"></i>Compare another date…
        </a>
      </div>
      <div class="col-auto d-none" id="compare-section">
        <label class="small fw-semibold mb-1">Compare to</label>
        <input type="date" name="compare_date"
               value="{% if compare_date %}{{ compare_date|date:'Y-m-d' }}{% endif %}"
               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 branch-cb" 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-sm" style="background:var(--purple);color:#fff;font-weight:600;">
          <i class="bi bi-search"></i> Run Report
        </button>
      </div>
    </div>
  </form>

  <h5 class="text-center mb-3" style="color:var(--navy);">
    Multi-Branch Business Worth &mdash; {{ as_of_date }}
  </h5>

  <!-- ══ 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">Assets</span>
            <span class="val">{{ t.total_assets|floatformat:0 }}</span>
          </div>
          <div class="metric">
            <span class="lbl">Liabilities</span>
            <span class="val">{{ t.total_liabilities|floatformat:0 }}</span>
          </div>
          <hr class="my-1">
          <div class="metric growth-metric">
            <span class="lbl">Growth</span>
            <span class="val {% if t.growth >= 0 %}delta-pos{% else %}delta-neg{% endif %}">
              {{ t.growth|floatformat:0 }}
            </span>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}

    {% if tenant_data|length > 1 %}
    <div class="col">
      <div class="summary-card">
        <div class="card-top" style="background:var(--purple);">Combined</div>
        <div class="card-body-custom">
          <div class="metric">
            <span class="lbl">Assets</span>
            <span class="val">{{ grand_total_assets|floatformat:0 }}</span>
          </div>
          <div class="metric">
            <span class="lbl">Liabilities</span>
            <span class="val">{{ grand_total_liabilities|floatformat:0 }}</span>
          </div>
          <hr class="my-1">
          <div class="metric growth-metric">
            <span class="lbl">Growth</span>
            <span class="val {% if grand_growth >= 0 %}delta-pos{% else %}delta-neg{% endif %}">
              {{ grand_growth|floatformat:0 }}
            </span>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- ══ SECTION 1 — ASSETS ══ -->
  <div class="section-title">
    1. Assets
    <span class="method-badge" style="font-size:.62rem;">
      <span class="dot"></span>Inventory = Reverse FIFO
    </span>
  </div>
  <p class="scroll-hint"><i class="bi bi-arrows"></i> Scroll horizontally for all branches</p>
  <div class="table-responsive mb-4">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; 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:130px;">
            {{ t.name }}
          </th>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <th class="text-end br-sep"
              style="background:var(--purple); color:#fff; font-size:.85rem; min-width:130px;">
            Grand Total
          </th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in asset_rows %}
        <tr class="expandable-row" data-target-id="asset_detail_{{ forloop.counter }}">
          <td>
            <i class="bi bi-chevron-right me-1 toggle-icon" style="font-size:.68rem; color:#94a3b8;"></i>
            {{ row.key }}
          </td>
          {% for cell in row.cells %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {{ cell|floatformat:0 }}
          </td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {{ row.grand_total|floatformat:0 }}
          </td>
          {% endif %}
        </tr>
        <tr class="d-none" id="asset_detail_{{ forloop.counter }}">
          <td colspan="{{ detail_colspan }}" class="p-0">
            <table class="table table-sm mb-0 detail-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th class="text-end">Amount</th>
                  <th>Branch</th>
                </tr>
              </thead>
              <tbody>
                {% for item in row.items %}
                <tr>
                  <td>{{ item.label }}</td>
                  <td class="text-end" style="font-family:'JetBrains Mono',monospace;">{{ item.amount|floatformat:2 }}</td>
                  <td><span class="badge bg-secondary bg-opacity-25 text-dark">{{ item.branch }}</span></td>
                </tr>
                {% empty %}
                <tr><td colspan="3" class="text-center text-muted py-2">No details</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="grand-row">
          <td class="fw-bold">Total Assets</td>
          {% for t in tenant_data %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace;">{{ t.total_assets|floatformat:0 }}</td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end br-sep gt-col" style="font-family:'JetBrains Mono',monospace;">{{ grand_total_assets|floatformat:0 }}</td>
          {% endif %}
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- ══ SECTION 2 — LIABILITIES ══ -->
  <div class="section-title">2. Liabilities</div>
  <p class="scroll-hint"><i class="bi bi-arrows"></i> Scroll horizontally for all branches</p>
  <div class="table-responsive mb-4">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; 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:130px;">
            {{ t.name }}
          </th>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <th class="text-end br-sep"
              style="background:var(--purple); color:#fff; font-size:.85rem; min-width:130px;">
            Grand Total
          </th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in liability_rows %}
        <tr class="expandable-row" data-target-id="liab_detail_{{ forloop.counter }}">
          <td>
            <i class="bi bi-chevron-right me-1 toggle-icon" style="font-size:.68rem; color:#94a3b8;"></i>
            {{ row.key }}
          </td>
          {% for cell in row.cells %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ cell|floatformat:0 }}</td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ row.grand_total|floatformat:0 }}</td>
          {% endif %}
        </tr>
        <tr class="d-none" id="liab_detail_{{ forloop.counter }}">
          <td colspan="{{ detail_colspan }}" class="p-0">
            <table class="table table-sm mb-0 detail-table">
              <thead>
                <tr><th>Name</th><th class="text-end">Amount</th><th>Branch</th></tr>
              </thead>
              <tbody>
                {% for item in row.items %}
                <tr>
                  <td>{{ item.label }}</td>
                  <td class="text-end" style="font-family:'JetBrains Mono',monospace;">{{ item.amount|floatformat:2 }}</td>
                  <td><span class="badge bg-secondary bg-opacity-25 text-dark">{{ item.branch }}</span></td>
                </tr>
                {% empty %}
                <tr><td colspan="3" class="text-center text-muted py-2">No details</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="grand-row">
          <td class="fw-bold">Total Liabilities</td>
          {% for t in tenant_data %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace;">{{ t.total_liabilities|floatformat:0 }}</td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end br-sep gt-col" style="font-family:'JetBrains Mono',monospace;">{{ grand_total_liabilities|floatformat:0 }}</td>
          {% endif %}
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- ══ SECTION 3 — GROWTH ══ -->
  <div class="section-title">3. Growth Summary</div>
  <div class="table-responsive mb-4">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; background:#f8fafc;">Metric</th>
          {% for t in tenant_data %}
          <th class="text-end br-sep" style="background:{{ t.color_dk }}; color:#fff; font-size:.85rem; min-width:130px;">{{ t.name }}</th>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <th class="text-end br-sep" style="background:var(--purple); color:#fff; font-size:.85rem; min-width:130px;">Grand Total</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="fw-semibold">Total Assets</td>
          {% for t in tenant_data %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ t.total_assets|floatformat:0 }}</td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ grand_total_assets|floatformat:0 }}</td>
          {% endif %}
        </tr>
        <tr>
          <td class="fw-semibold">Total Liabilities</td>
          {% for t in tenant_data %}
          <td class="text-end br-sep" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ t.total_liabilities|floatformat:0 }}</td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col" style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">{{ grand_total_liabilities|floatformat:0 }}</td>
          {% endif %}
        </tr>
      </tbody>
      <tfoot>
        <tr class="grand-row">
          <td class="fw-bold">Growth (Assets − Liabilities)</td>
          {% for t in tenant_data %}
          <td class="text-end br-sep {% if t.growth >= 0 %}delta-pos{% else %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.92rem;">
            {{ t.growth|floatformat:0 }}
          </td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end br-sep gt-col {% if grand_growth >= 0 %}delta-pos{% else %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.92rem;">
            {{ grand_growth|floatformat:0 }}
          </td>
          {% endif %}
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- ══ SECTION 4 — COMPARISON ══ -->
  {% if has_comparison %}
  <div class="section-title">4. Change: {{ compare_date }} → {{ as_of_date }}</div>

  <h6 class="mt-3 mb-2 fw-bold text-secondary">Change in Assets</h6>
  <div class="table-responsive mb-3">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; 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:var(--purple); color:#fff; font-size:.85rem; min-width:120px;">Grand Δ</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in cmp_asset_rows %}
        <tr>
          <td>{{ row.key }}</td>
          {% for cell in row.cells %}
          <td class="text-end br-sep {% if cell > 0 %}delta-pos{% elif cell < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if cell > 0 %}+{% endif %}{{ cell|floatformat:0 }}
          </td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col {% if row.grand_delta > 0 %}delta-pos{% elif row.grand_delta < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if row.grand_delta > 0 %}+{% endif %}{{ row.grand_delta|floatformat:0 }}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <h6 class="mt-3 mb-2 fw-bold text-secondary">Change in Liabilities</h6>
  <div class="table-responsive mb-3">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; 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:var(--purple); color:#fff; font-size:.85rem; min-width:120px;">Grand Δ</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in cmp_liability_rows %}
        <tr>
          <td>{{ row.key }}</td>
          {% for cell in row.cells %}
          <td class="text-end br-sep {% if cell > 0 %}delta-pos{% elif cell < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if cell > 0 %}+{% endif %}{{ cell|floatformat:0 }}
          </td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col {% if row.grand_delta > 0 %}delta-pos{% elif row.grand_delta < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if row.grand_delta > 0 %}+{% endif %}{{ row.grand_delta|floatformat:0 }}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <h6 class="mt-3 mb-2 fw-bold text-secondary">Growth Change Summary</h6>
  <div class="table-responsive mb-4">
    <table class="table table-sm table-bordered tbl-parallel mb-0">
      <thead>
        <tr>
          <th style="min-width:160px; background:#f8fafc;">Metric</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:var(--purple); color:#fff; font-size:.85rem; min-width:120px;">Combined</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in cmp_growth_rows %}
        <tr {% if row.is_total %}class="grand-row"{% endif %}>
          <td class="fw-{% if row.is_total %}bold{% else %}semibold{% endif %}">{{ row.label }}</td>
          {% for cell in row.cells %}
          <td class="text-end br-sep {% if cell > 0 %}delta-pos{% elif cell < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if cell > 0 %}+{% endif %}{{ cell|floatformat:0 }}
          </td>
          {% endfor %}
          {% if tenant_data|length > 1 %}
          <td class="text-end fw-bold br-sep gt-col {% if row.grand > 0 %}delta-pos{% elif row.grand < 0 %}delta-neg{% endif %}"
              style="font-family:'JetBrains Mono',monospace; font-size:.82rem;">
            {% if row.grand > 0 %}+{% endif %}{{ row.grand|floatformat:0 }}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="rounded p-3 mb-4 d-flex justify-content-around flex-wrap gap-3"
       style="background:var(--navy); color:#fff;">
    <div class="text-center">
      <div style="font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; opacity:.6;">Δ Assets</div>
      <div style="font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:700;">
        {% if grand_cmp.delta_assets > 0 %}+{% endif %}{{ grand_cmp.delta_assets|floatformat:0 }}
      </div>
    </div>
    <div class="text-center">
      <div style="font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; opacity:.6;">Δ Liabilities</div>
      <div style="font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:700;">
        {% if grand_cmp.delta_liabilities > 0 %}+{% endif %}{{ grand_cmp.delta_liabilities|floatformat:0 }}
      </div>
    </div>
    <div class="text-center">
      <div style="font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; opacity:.6;">Δ Growth</div>
      <div style="font-family:'JetBrains Mono',monospace; font-size:1.2rem; font-weight:700;
                  color:{% if grand_cmp.delta_growth >= 0 %}#4ade80{% else %}#f87171{% endif %};">
        {% if grand_cmp.delta_growth > 0 %}+{% endif %}{{ grand_cmp.delta_growth|floatformat:0 }}
      </div>
    </div>
  </div>
  {% endif %}

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

</div>
{% endblock %}

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

  // ── Expandable rows ──────────────────────────────────────────────────────
  document.querySelectorAll('.expandable-row').forEach(function (row) {
    row.addEventListener('click', function () {
      var target = document.getElementById(row.getAttribute('data-target-id'));
      if (!target) return;
      var icon = row.querySelector('.toggle-icon');
      if (target.classList.contains('d-none')) {
        target.classList.remove('d-none');
        if (icon) { icon.classList.remove('bi-chevron-right'); icon.classList.add('bi-chevron-down'); }
      } else {
        target.classList.add('d-none');
        if (icon) { icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-right'); }
      }
    });
  });

  // ── Compare date toggle ──────────────────────────────────────────────────
  var toggleLink = document.getElementById('toggle-compare');
  var cmpSection = document.getElementById('compare-section');
  if (toggleLink && cmpSection) {
    {% if compare_date %}cmpSection.classList.remove('d-none');{% endif %}
    toggleLink.addEventListener('click', function (e) {
      e.preventDefault();
      cmpSection.classList.toggle('d-none');
    });
  }

  // ── Select-all for branches ──────────────────────────────────────────────
  var cbs = document.querySelectorAll('.branch-cb');
  if (cbs.length > 2) {
    var wrap = cbs[0].closest('.d-flex');
    if (wrap) {
      var div = document.createElement('div');
      div.className = 'form-check';
      div.innerHTML =
        '<input class="form-check-input" type="checkbox" id="br_all">' +
        '<label class="form-check-label small fw-semibold" for="br_all">All</label>';
      wrap.insertBefore(div, wrap.firstChild);

      var allCb = document.getElementById('br_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; });
        });
      });
    }
  }
});
</script>
{% endblock %}