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

{% block title %}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:     #0d9f6e;
    --green-bg:  #ecfdf3;
    --red:       #d63031;
    --red-bg:    #fef2f2;
    --border:    #e2e6ed;
    --muted:     #7a8599;
    --card:      #ffffff;
    --radius:    10px;
    --shadow:    0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
  }
  #delta-container {
    font-family: 'DM Sans', sans-serif;
    color: #1e2a3a;
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ── Header ── */
  .delta-header {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 18px;
  }
  .delta-header h4 { font-weight: 700; font-size: 1.25rem; color: var(--navy); margin: 0; }

  /* ── 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;
  }
  .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} }

  /* ── Switch link ── */
  .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; }

  /* ── Filter card ── */
  .filter-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
    margin-bottom: 22px; box-shadow: var(--shadow);
  }
  .filter-card label {
    font-size: .7rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
  }
  .filter-card .form-control-sm,
  .filter-card .form-select-sm {
    font-size: .82rem; border-radius: 6px; border-color: var(--border);
  }
  .filter-card .form-control-sm:focus,
  .filter-card .form-select-sm:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-lt);
  }
  .btn-run {
    background: var(--purple); border: none; color: #fff;
    font-weight: 600; font-size: .8rem; padding: 6px 18px;
    border-radius: 6px; transition: all .15s;
  }
  .btn-run:hover { background: #5b21b6; color: #fff; }

  /* ── Period pills ── */
  .period-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .period-pill {
    padding: 4px 14px; border-radius: 20px; font-size: .76rem;
    font-weight: 600; border: 1px solid var(--border);
    background: #fff; color: var(--muted); cursor: pointer;
    transition: all .12s; text-decoration: none; display: inline-block;
  }
  .period-pill:hover  { border-color: var(--purple); color: var(--purple); text-decoration: none; }
  .period-pill.active { background: var(--purple); color: #fff; border-color: var(--purple); }

  /* ── Overall summary strip ── */
  .overall-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 24px;
  }
  .os-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
    box-shadow: var(--shadow); position: relative; overflow: hidden;
    text-align: center;
  }
  .os-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  }
  .os-card.oc-assets::before  { background: var(--green); }
  .os-card.oc-liab::before    { background: var(--red); }
  .os-card.oc-growth::before  { background: var(--purple); }
  .os-card .os-label {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; color: var(--muted); margin-bottom: 4px;
  }
  .os-card .os-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem; font-weight: 700;
  }
  .os-card .os-sub {
    font-size: .7rem; color: var(--muted); margin-top: 2px;
  }
  .pos { color: var(--green); }
  .neg { color: var(--red); }
  .neu { color: var(--navy); }

  /* ── Branch delta cards ── */
  .branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px; margin-bottom: 24px;
  }
  .branch-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
  }
  .branch-card-header {
    padding: 10px 16px; font-weight: 700; font-size: .88rem;
    color: #fff; display: flex; align-items: center;
    justify-content: space-between;
  }
  .branch-card-body { padding: 14px 16px; }
  .bc-metric {
    display: flex; justify-content: space-between;
    align-items: center; padding: 6px 0;
    border-bottom: 1px solid #f0f2f5;
  }
  .bc-metric:last-child { border-bottom: none; }
  .bc-metric .bc-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
  .bc-metric .bc-values { display: flex; align-items: center; gap: 10px; }
  .bc-metric .bc-arrow {
    font-size: .72rem; color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
  }
  .bc-metric .bc-delta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem; font-weight: 700;
    padding: 1px 8px; border-radius: 10px;
  }
  .bc-metric .bc-delta.pos { background: var(--green-bg); color: var(--green); }
  .bc-metric .bc-delta.neg { background: var(--red-bg);   color: var(--red); }
  .bc-metric .bc-delta.neu { background: #f1f5f9;         color: var(--navy); }
  .bc-growth-row {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: 10px;
    padding: 8px 12px; border-radius: 8px;
    background: var(--purple-lt);
  }
  .bc-growth-row .bc-glabel { font-size: .78rem; font-weight: 700; color: var(--purple); }
  .bc-growth-row .bc-gvalue {
    font-family: 'JetBrains Mono', monospace;
    font-size: .92rem; font-weight: 700;
  }

  /* ── Table fallback ── */
  .delta-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
  .delta-table thead th {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); padding: 10px 16px;
    border-bottom: 2px solid var(--border); background: #fafbfc;
  }
  .delta-table tbody td { padding: 11px 16px; border-bottom: 1px solid #f0f2f5; }
  .delta-table .text-end { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
  .delta-table .total-row td { background: #f1f5f9; font-weight: 700; }
  .delta-table .total-row td:first-child { border-left: 3px solid var(--purple); }

  /* ── Date range badge ── */
  .date-range-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f1f5f9; border: 1px solid var(--border);
    padding: 4px 12px; border-radius: 20px;
    font-size: .76rem; color: var(--navy); font-weight: 600;
  }
  .date-range-badge i { color: var(--muted); }

  /* ── Custom date section ── */
  .custom-date { display: none; }

  /* ── Branches panel ── */
  .branches-panel {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 12px;
    background: #fafbfc;
  }
  .branches-panel .form-check-label { font-size: .82rem; }

  @media print {
    .no-print { display: none !important; }
    .branch-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 576px) {
    .overall-strip { grid-template-columns: 1fr; }
    .branch-grid   { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}


{% block content %}
<div id="delta-container">

  <!-- ══ Header ══ -->
  <div class="delta-header">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <h4>Business Worth Δ</h4>
      <span class="date-range-badge">
        <i class="bi bi-calendar-range"></i>
        {{ from_date }} → {{ to_date }}
      </span>
    </div>
    <div class="d-flex gap-2 no-print">
      <button onclick="window.print()" class="btn-switch">
        <i class="bi bi-printer"></i>
      </button>
    </div>
  </div>

  <!-- ══ Filters ══ -->
  <form method="get" class="filter-card no-print">
    <div class="row g-3 align-items-start">

      <!-- Period pills -->
      <div class="col-12 col-md-auto">
        <label>Period</label>
        <div class="period-pills">
          {% for p, lbl in period_choices %}
          <a href="?period={{ p }}{% for b in selected_branches %}&branches={{ b }}{% endfor %}"
             class="period-pill {% if period == p %}active{% endif %}">{{ lbl }}</a>
          {% empty %}
          <a href="?period=1d{% for b in selected_branches %}&branches={{ b }}{% endfor %}"
             class="period-pill {% if period == '1d' %}active{% endif %}">1 Day</a>
          <a href="?period=1w{% for b in selected_branches %}&branches={{ b }}{% endfor %}"
             class="period-pill {% if period == '1w' %}active{% endif %}">1 Week</a>
          <a href="?period=1m{% for b in selected_branches %}&branches={{ b }}{% endfor %}"
             class="period-pill {% if period == '1m' %}active{% endif %}">1 Month</a>
          <a href="?period=custom{% for b in selected_branches %}&branches={{ b }}{% endfor %}"
             class="period-pill {% if period == 'custom' %}active{% endif %}">Custom</a>
          {% endfor %}
        </div>
      </div>

      <!-- Custom date fields -->
      <div class="col-auto custom-date" id="customFrom">
        <label for="from_date">From</label>
        <input type="date" id="from_date" name="from_date"
               value="{{ from_date }}" class="form-control form-control-sm">
      </div>
      <div class="col-auto custom-date" id="customTo">
        <label for="to_date">To</label>
        <input type="date" id="to_date" name="to_date"
               value="{{ to_date }}" class="form-control form-control-sm">
      </div>

      <!-- Hidden period for custom submit -->
      <input type="hidden" name="period" id="periodHidden" value="{{ period }}">

      <!-- Branches -->
      <div class="col-12 col-md">
        <label>Branches</label>
        <div class="branches-panel">
          <div class="form-check mb-1">
            <input class="form-check-input" type="checkbox" id="select_all">
            <label class="form-check-label fw-bold" for="select_all" style="font-size:.8rem;">Select All</label>
          </div>
          {% for br in branches %}
          <div class="form-check">
            <input class="form-check-input branch-checkbox" type="checkbox"
                   name="branches" value="{{ br.id }}" id="branch_{{ br.id }}"
                   {% if br.id|stringformat:"s" in selected_branches %}checked{% endif %}>
            <label class="form-check-label" for="branch_{{ br.id }}">{{ br.label }}</label>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Run -->
      <div class="col-auto d-flex align-items-end" style="padding-bottom:2px;">
        <button type="submit" class="btn-run">Run Report</button>
      </div>

    </div>
  </form>

  <!-- ══ Overall Summary ══ -->
  <div class="overall-strip">
    <div class="os-card oc-assets">
      <div class="os-label">Δ Total Assets</div>
      <div class="os-value {% if overall.assets > 0 %}pos{% elif overall.assets < 0 %}neg{% else %}neu{% endif %}">
        {% if overall.assets > 0 %}+{% endif %}{{ overall.assets|floatformat:0 }}
      </div>
      <div class="os-sub">across {{ deltas|length }} branch{{ deltas|length|pluralize:"es" }}</div>
    </div>
    <div class="os-card oc-liab">
      <div class="os-label">Δ Total Liabilities</div>
      <div class="os-value {% if overall.liabilities > 0 %}pos{% elif overall.liabilities < 0 %}neg{% else %}neu{% endif %}">
        {% if overall.liabilities > 0 %}+{% endif %}{{ overall.liabilities|floatformat:0 }}
      </div>
      <div class="os-sub">{{ from_date }} → {{ to_date }}</div>
    </div>
    <div class="os-card oc-growth">
      <div class="os-label">Δ Net Growth</div>
      <div class="os-value {% if overall.growth > 0 %}pos{% elif overall.growth < 0 %}neg{% else %}neu{% endif %}"
           style="color: {% if overall.growth >= 0 %}var(--purple){% else %}var(--red){% endif %};">
        {% if overall.growth > 0 %}+{% endif %}{{ overall.growth|floatformat:0 }}
      </div>
      <div class="os-sub">Assets − Liabilities change</div>
    </div>
  </div>

  <!-- ══ Per-branch Cards ══ -->
  {% if deltas %}
  <div class="branch-grid">
    {% for d in deltas %}
    {% with idx=forloop.counter %}
    <div class="branch-card">
      <div class="branch-card-header"
           style="background: {% cycle '#0B60D1' '#6C3FC5' '#D14E0B' '#0B8A5E' '#B8860B' '#C5223F' %};">
        <span>{{ d.tenant }}</span>
        <span class="method-badge" style="background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; font-size:.62rem;">
          FIFO Rev
        </span>
      </div>
      <div class="branch-card-body">

        <!-- Assets row -->
        <div class="bc-metric">
          <span class="bc-label">Assets</span>
          <div class="bc-values">
            <span class="bc-arrow">{{ d.assets_start|floatformat:0 }} → {{ d.assets_end|floatformat:0 }}</span>
            <span class="bc-delta {% if d.delta_assets > 0 %}pos{% elif d.delta_assets < 0 %}neg{% else %}neu{% endif %}">
              {% if d.delta_assets > 0 %}+{% endif %}{{ d.delta_assets|floatformat:0 }}
            </span>
          </div>
        </div>

        <!-- Liabilities row -->
        <div class="bc-metric">
          <span class="bc-label">Liabilities</span>
          <div class="bc-values">
            <span class="bc-arrow">{{ d.liab_start|floatformat:0 }} → {{ d.liab_end|floatformat:0 }}</span>
            <span class="bc-delta {% if d.delta_liabilities > 0 %}pos{% elif d.delta_liabilities < 0 %}neg{% else %}neu{% endif %}">
              {% if d.delta_liabilities > 0 %}+{% endif %}{{ d.delta_liabilities|floatformat:0 }}
            </span>
          </div>
        </div>

        <!-- Growth delta -->
        <div class="bc-growth-row">
          <span class="bc-glabel">Δ Growth</span>
          <span class="bc-gvalue {% if d.delta_growth > 0 %}pos{% elif d.delta_growth < 0 %}neg{% else %}neu{% endif %}">
            {% if d.delta_growth > 0 %}+{% endif %}{{ d.delta_growth|floatformat:0 }}
          </span>
        </div>

      </div>
    </div>
    {% endwith %}
    {% endfor %}
  </div>
  {% endif %}

  <!-- ══ Summary Table ══ -->
  <div style="background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);">
    <table class="delta-table">
      <thead>
        <tr>
          <th>Branch</th>
          <th class="text-end">Δ Assets</th>
          <th class="text-end">Δ Liabilities</th>
          <th class="text-end">Δ Growth</th>
        </tr>
      </thead>
      <tbody>
        {% for d in deltas %}
        <tr>
          <td>{{ d.tenant }}</td>
          <td class="text-end {% if d.delta_assets > 0 %}pos{% elif d.delta_assets < 0 %}neg{% endif %}">
            {% if d.delta_assets > 0 %}+{% endif %}{{ d.delta_assets|floatformat:2 }}
          </td>
          <td class="text-end {% if d.delta_liabilities > 0 %}pos{% elif d.delta_liabilities < 0 %}neg{% endif %}">
            {% if d.delta_liabilities > 0 %}+{% endif %}{{ d.delta_liabilities|floatformat:2 }}
          </td>
          <td class="text-end {% if d.delta_growth > 0 %}pos{% elif d.delta_growth < 0 %}neg{% endif %}">
            {% if d.delta_growth > 0 %}+{% endif %}{{ d.delta_growth|floatformat:2 }}
          </td>
        </tr>
        {% endfor %}
        <tr class="total-row">
          <td>Combined Total</td>
          <td class="text-end {% if overall.assets > 0 %}pos{% elif overall.assets < 0 %}neg{% endif %}">
            {% if overall.assets > 0 %}+{% endif %}{{ overall.assets|floatformat:2 }}
          </td>
          <td class="text-end {% if overall.liabilities > 0 %}pos{% elif overall.liabilities < 0 %}neg{% endif %}">
            {% if overall.liabilities > 0 %}+{% endif %}{{ overall.liabilities|floatformat:2 }}
          </td>
          <td class="text-end {% if overall.growth > 0 %}pos{% elif overall.growth < 0 %}neg{% endif %}">
            {% if overall.growth > 0 %}+{% endif %}{{ overall.growth|floatformat:2 }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
{% endblock %}


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

  var period = '{{ period }}';

  // ── Custom date fields show/hide ────────────────────────────────────────
  function toggleCustom(p) {
    var show = (p === 'custom');
    document.getElementById('customFrom').style.display = show ? 'block' : 'none';
    document.getElementById('customTo').style.display   = show ? 'block' : 'none';
  }
  toggleCustom(period);

  // Period pills click — for custom, show form fields; for others, navigate immediately
  document.querySelectorAll('.period-pill').forEach(function (pill) {
    pill.addEventListener('click', function (e) {
      var p = new URL(pill.href).searchParams.get('period');
      if (p === 'custom') {
        e.preventDefault();
        document.getElementById('periodHidden').value = 'custom';
        toggleCustom('custom');
        // highlight pill
        document.querySelectorAll('.period-pill').forEach(function (x) { x.classList.remove('active'); });
        pill.classList.add('active');
      }
      // otherwise let href navigate normally
    });
  });

  // ── Select All branches ─────────────────────────────────────────────────
  var selectAll = document.getElementById('select_all');
  var cbs       = document.querySelectorAll('.branch-checkbox');

  if (selectAll && cbs.length) {
    selectAll.checked = Array.from(cbs).every(function (c) { return c.checked; });
    selectAll.addEventListener('change', function () {
      cbs.forEach(function (c) { c.checked = selectAll.checked; });
    });
    cbs.forEach(function (c) {
      c.addEventListener('change', function () {
        selectAll.checked = Array.from(cbs).every(function (x) { return x.checked; });
      });
    });
  }

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