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

{% block title %}{{ branch_name }} — Daily Closing{% endblock %}

{% block stylesheets %}
<style>
  :root {
    --cl-dark:    #1F2937;
    --cl-muted:   #6B7280;
    --cl-border:  #E5E7EB;
    --cl-bg:      #F9FAFB;
    --cl-accent:  #374151;
    --cl-total:   #EAECEF;
    --cl-green:   #16A34A;
    --cl-red:     #DC2626;
    --cl-final:   #1F2937;
  }

  .report-wrap { max-width: 1400px; margin: 0 auto; }

  /* ── Section headers ─────────────────────────────── */
  .sec-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cl-dark);
    margin: 1rem 0 .35rem;
    padding: .25rem .5rem;
    background: var(--cl-bg);
    border-left: 3px solid var(--cl-accent);
    letter-spacing: .02em;
  }
  .sec-title:first-child { margin-top: 0; }

  /* ── Tables ──────────────────────────────────────── */
  .tbl-compact {
    font-size: .8rem;
    margin-bottom: .4rem;
  }
  .tbl-compact th {
    background: var(--cl-bg);
    color: var(--cl-dark);
    font-weight: 600;
    font-size: .75rem;
    border-color: var(--cl-border);
    padding: .25rem .45rem;
    white-space: nowrap;
  }
  .tbl-compact td {
    padding: .22rem .45rem;
    border-color: var(--cl-border);
    color: var(--cl-dark);
    vertical-align: middle;
  }
  .tbl-compact .total-row td {
    background: var(--cl-total);
    font-weight: 700;
    border-top: 1.5px solid var(--cl-accent);
  }
  .tbl-compact tbody tr:nth-child(even) { background: #FAFAFA; }

  /* ── Amount coloring ─────────────────────────────── */
  .amt-pos { color: var(--cl-green); font-weight: 600; }
  .amt-neg { color: var(--cl-red);   font-weight: 600; }

  /* ── Adjustment label ────────────────────────────── */
  .adj-label { font-size: .78rem; color: var(--cl-dark); }
  .adj-disc  { font-size: .72rem; color: var(--cl-muted); font-style: italic; }

  /* ── Final Total box ─────────────────────────────── */
  .final-total-box {
    background: var(--cl-final);
    color: #fff;
    border-radius: .375rem;
    padding: .6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .75rem;
  }
  .final-total-box .ft-label {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
  }
  .final-total-box .ft-value {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .final-total-box.ft-negative { background: #7F1D1D; }

  /* ── Bank cards ──────────────────────────────────── */
  .bank-card {
    border: 1px solid var(--cl-border);
    border-radius: .375rem;
    overflow: hidden;
  }
  .bank-card-hdr {
    background: var(--cl-accent);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    padding: .3rem .6rem;
    text-align: center;
  }
  .bank-card table { margin-bottom: 0; }
  .bank-card .row-open td { background: var(--cl-bg); font-weight: 600; }
  .bank-card .row-close td {
    background: var(--cl-total);
    font-weight: 700;
    border-top: 1.5px solid var(--cl-accent);
  }

  /* ── Column divider ──────────────────────────────── */
  .col-divider {
    border-right: 1px dashed var(--cl-border);
  }

  /* ── Sub-section badge ───────────────────────────── */
  .badge-in  { background:#D1FAE5; color:#065F46; font-size:.65rem;
               padding:.1rem .35rem; border-radius:.2rem; }
  .badge-out { background:#FEE2E2; color:#991B1B; font-size:.65rem;
               padding:.1rem .35rem; border-radius:.2rem; }

  .text-sm { font-size: .72rem; color: var(--cl-muted); }

  /* ── No-data notice ──────────────────────────────── */
  .no-data { font-size:.78rem; color:var(--cl-muted);
             padding:.3rem .5rem; font-style:italic; }

  /* ── Print ───────────────────────────────────────── */
  @media print {
    .no-print { display: none !important; }
    .sec-title { break-after: avoid; }
    .bank-card  { break-inside: avoid; }
    .final-total-box { break-inside: avoid; }
    body { font-size: 11px; }
    .col-divider { border-right: none; }
  }

  /* ── Mobile ──────────────────────────────────────── */
  @media (max-width: 991.98px) {
    .col-divider { border-right: none;
                   border-bottom: 1px dashed var(--cl-border);
                   margin-bottom: 1rem; padding-bottom: .5rem; }
  }
</style>
{% endblock %}

{% block heading %}{{ branch_name }} — Daily Closing{% endblock %}

{% block content %}
<div class="report-wrap my-3">

<!-- ═══════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════ -->
<form method="get" class="mb-3 no-print">
  <div class="row g-2 align-items-end flex-wrap">
    <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" id="id_start_date">
    </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" id="id_end_date">
    </div>
    <div class="col-auto d-flex gap-2 flex-wrap">
      <button type="submit" class="btn btn-dark btn-sm">
        <i class="fa fa-filter"></i> Filter
      </button>
      <button type="button" class="btn btn-outline-dark btn-sm" id="btnPdfToggle">
        <i class="fa fa-file-pdf-o"></i> PDF <i class="fa fa-caret-down ms-1"></i>
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()">
        <i class="fa fa-print"></i> Print
      </button>
    </div>
  </div>

  <!-- PDF Section Picker -->
  <div id="pdfSectionPicker" class="mt-2 p-2 border rounded"
       style="display:none; background:#f9fafb; max-width:380px;">
    <div class="small fw-semibold mb-2">Select sections to include in PDF:</div>
    <div class="d-flex flex-wrap gap-3 mb-2">
      <div class="form-check">
        <input class="form-check-input pdf-sec-cb" type="checkbox"
               value="cashflow" id="sec_cashflow" checked>
        <label class="form-check-label small" for="sec_cashflow">
          Cash Flow
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input pdf-sec-cb" type="checkbox"
               value="transfers" id="sec_transfers" checked>
        <label class="form-check-label small" for="sec_transfers">
          Stock Transfers
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input pdf-sec-cb" type="checkbox"
               value="bank" id="sec_bank" checked>
        <label class="form-check-label small" for="sec_bank">
          Bank Flow
        </label>
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="#" id="btnGeneratePdf" class="btn btn-dark btn-sm" target="_blank">
        <i class="fa fa-download"></i> Generate PDF
      </a>
      <button type="button" class="btn btn-outline-secondary btn-sm" id="btnPdfCancel">
        Cancel
      </button>
    </div>
  </div>
</form>

<h6 class="text-center mb-3" style="color:var(--cl-muted); font-size:.85rem;">
  {{ branch_name }} &mdash;
  {{ start_date }}{% if start_date != end_date %} to {{ end_date }}{% endif %}
</h6>

<!-- ═══════════════════════════════════════════════
   TWO-COLUMN MAIN LAYOUT
   ═══════════════════════════════════════════════ -->
<div class="row g-3">

  <!-- ╔══════════════════════════════════════╗
       ║  LEFT — CASH FLOW  (60%)            ║
       ╚══════════════════════════════════════╝ -->
  <div class="col-12 col-lg-7 col-divider">

    <!-- ── CASH SALE ─────────────────────────────── -->
    <div class="sec-title">Cash Sale</div>
    {% if cash_sale_items %}
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-1">
        <thead>
          <tr>
            <th style="min-width:120px;">Item Name</th>
            <th class="text-end" style="min-width:55px;">Qty</th>
            <th class="text-end" style="min-width:90px;">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for r in cash_sale_items %}
          <tr>
            <td>{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:0 }}</td>
            <td class="text-end">{{ r.amount|floatformat:2 }}</td>
          </tr>
          {% endfor %}
          {% if cs_disc > 0 %}
          <tr>
            <td class="adj-disc" colspan="2">Flat Discount</td>
            <td class="text-end amt-neg">(−{{ cs_disc|floatformat:2 }})</td>
          </tr>
          {% endif %}
          {% if cs_charges > 0 %}
          <tr>
            <td class="adj-disc" colspan="2">Other Charges</td>
            <td class="text-end amt-pos">+{{ cs_charges|floatformat:2 }}</td>
          </tr>
          {% endif %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">Total</td>
            <td class="text-end">{{ cs_totals.qty|floatformat:0 }}</td>
            <td class="text-end">{{ cash_sale_grand|floatformat:2 }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% else %}
    <p class="no-data"><i class="fa fa-info-circle"></i> No cash sales for this period.</p>
    {% endif %}

    <!-- ── CASH RETURNS ───────────────────────────── -->
    {% if cash_return_items %}
    <div class="sec-title">Cash Returns</div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-1">
        <thead>
          <tr>
            <th style="min-width:120px;">Item Name</th>
            <th class="text-end" style="min-width:55px;">Qty</th>
            <th class="text-end" style="min-width:90px;">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for r in cash_return_items %}
          <tr>
            <td>{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:0 }}</td>
            <td class="text-end amt-neg">(−{{ r.amount|floatformat:2 }})</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">Total Returns</td>
            <td class="text-end">{{ cr_totals.qty|floatformat:0 }}</td>
            <td class="text-end amt-neg">(−{{ cr_totals.amount|floatformat:2 }})</td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    <!-- ── CREDIT SALE ────────────────────────────── -->
    {% if credit_sale_items %}
    <div class="sec-title">Credit Sale</div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-1">
        <thead>
          <tr>
            <th style="min-width:120px;">Item Name</th>
            <th class="text-end" style="min-width:50px;">Qty</th>
            <th class="text-end" style="min-width:85px;">Amount</th>
            <th class="text-end" style="min-width:85px;">Received</th>
          </tr>
        </thead>
        <tbody>
          {% for r in credit_sale_items %}
          <tr>
            <td>{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:0 }}</td>
            <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            <td class="text-end {% if r.received > 0 %}amt-pos{% endif %}">
              {{ r.received|floatformat:2 }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">Total</td>
            <td class="text-end">{{ crs_totals.qty|floatformat:0 }}</td>
            <td class="text-end">{{ crs_totals.amount|floatformat:2 }}</td>
            <td class="text-end">{{ crs_totals.received|floatformat:2 }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    <!-- ── CREDIT RETURNS ─────────────────────────── -->
    {% if credit_return_items %}
    <div class="sec-title">Credit Returns</div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-1">
        <thead>
          <tr>
            <th style="min-width:120px;">Item Name</th>
            <th class="text-end" style="min-width:50px;">Qty</th>
            <th class="text-end" style="min-width:85px;">Amount</th>
            <th class="text-end" style="min-width:85px;">Received</th>
          </tr>
        </thead>
        <tbody>
          {% for r in credit_return_items %}
          <tr>
            <td>{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:0 }}</td>
            <td class="text-end amt-neg">(−{{ r.amount|floatformat:2 }})</td>
            <td class="text-end amt-neg">(−{{ r.received|floatformat:2 }})</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">Total Returns</td>
            <td class="text-end">{{ crr_totals.qty|floatformat:0 }}</td>
            <td class="text-end amt-neg">(−{{ crr_totals.amount|floatformat:2 }})</td>
            <td class="text-end amt-neg">(−{{ crr_totals.received|floatformat:2 }})</td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    <!-- ── CASH ADJUSTMENTS ───────────────────────── -->
    {% if adjustments %}
    <div class="sec-title">Cash Adjustments</div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-1">
        <thead>
          <tr>
            <th style="min-width:180px;">Description</th>
            <th class="text-end" style="min-width:100px;">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for adj in adjustments %}
          <tr>
            <td class="adj-label">{{ adj.label }}</td>
            <td class="text-end {% if adj.amount >= 0 %}amt-pos{% else %}amt-neg{% endif %}">
              {% if adj.amount >= 0 %}
                +{{ adj.amount|floatformat:2 }}
              {% else %}
                {{ adj.amount|floatformat:2 }}
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold text-end">Net Adjustments</td>
            <td class="text-end {% if adj_cash_total >= 0 %}amt-pos{% else %}amt-neg{% endif %}">
              {% if adj_cash_total >= 0 %}
                +{{ adj_cash_total|floatformat:2 }}
              {% else %}
                {{ adj_cash_total|floatformat:2 }}
              {% endif %}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    <!-- ── FINAL TOTAL ────────────────────────────── -->
    <div class="final-total-box {% if final_cash_total < 0 %}ft-negative{% endif %}">
      <span class="ft-label">Final Cash Total</span>
      <span class="ft-value">{{ final_cash_total|floatformat:2 }} /-</span>
    </div>

  </div><!-- /LEFT -->

  <!-- ╔══════════════════════════════════════╗
       ║  RIGHT — STOCK TRANSFERS  (40%)     ║
       ╚══════════════════════════════════════╝ -->
  <div class="col-12 col-lg-5">

    {% if stock_in_rows %}
    <div class="sec-title">
      <i class="fa fa-arrow-circle-down" style="color:#065F46;"></i>
      Stock In
      <span class="badge-in ms-1">Received</span>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-2">
        <thead>
          <tr>
            <th style="min-width:110px;">Product</th>
            <th class="text-end" style="min-width:55px;">Qty</th>
            <th style="min-width:120px;">Received From</th>
          </tr>
        </thead>
        <tbody>
          {% for r in stock_in_rows %}
          <tr>
            <td class="fw-semibold">{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:2 }}</td>
            <td class="text-sm">{{ r.from_detail }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">TOTAL</td>
            <td class="text-end">{{ stock_in_total|floatformat:2 }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    {% if stock_out_rows %}
    <div class="sec-title">
      <i class="fa fa-arrow-circle-up" style="color:#991B1B;"></i>
      Stock Out
      <span class="badge-out ms-1">Dispatched</span>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-bordered tbl-compact mb-2">
        <thead>
          <tr>
            <th style="min-width:110px;">Product</th>
            <th class="text-end" style="min-width:55px;">Qty</th>
            <th style="min-width:120px;">Sent To</th>
          </tr>
        </thead>
        <tbody>
          {% for r in stock_out_rows %}
          <tr>
            <td class="fw-semibold">{{ r.name }}</td>
            <td class="text-end">{{ r.qty|floatformat:2 }}</td>
            <td class="text-sm">{{ r.to_detail }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td class="fw-bold">TOTAL</td>
            <td class="text-end">{{ stock_out_total|floatformat:2 }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

    {% if not stock_in_rows and not stock_out_rows %}
    <div class="sec-title">Stock Transfers</div>
    <p class="no-data">
      <i class="fa fa-info-circle"></i> No stock transfers for this period.
    </p>
    {% endif %}

  </div><!-- /RIGHT -->

</div><!-- /row -->

<!-- ═══════════════════════════════════════════════
   BANK FLOW  (full width, below both columns)
   ═══════════════════════════════════════════════ -->
{% if bank_cards %}
<hr class="my-3" style="border-color:var(--cl-border);">
<div class="sec-title" style="margin-top:0;">Bank Flow</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-3">
  {% for card in bank_cards %}
  <div class="col">
    <div class="bank-card h-100">
      <div class="bank-card-hdr">{{ card.name|title }}</div>
      <table class="table table-sm table-borderless tbl-compact mb-0">
        <tbody>
          <tr class="row-open">
            <td>Opening Balance</td>
            <td class="text-end">{{ 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 class="row-close">
            <td class="fw-bold">Closing Balance</td>
            <td class="text-end fw-bold">{{ card.closing|floatformat:2 }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

</div><!-- /report-wrap -->
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  var picker    = document.getElementById('pdfSectionPicker');
  var btnToggle = document.getElementById('btnPdfToggle');
  var btnCancel = document.getElementById('btnPdfCancel');
  var btnGen    = document.getElementById('btnGeneratePdf');
  var baseUrl   = "{% url 'reports:sub_tenant_daily_closing_pdf' %}";

  btnToggle.addEventListener('click', function () {
    picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
  });
  btnCancel.addEventListener('click', function () {
    picker.style.display = 'none';
  });
  btnGen.addEventListener('click', function (e) {
    e.preventDefault();
    var d1  = document.getElementById('id_start_date').value;
    var d2  = document.getElementById('id_end_date').value;
    var cbs = document.querySelectorAll('.pdf-sec-cb:checked');
    var params = 'start_date=' + d1 + '&end_date=' + d2;
    cbs.forEach(function (cb) { params += '&sections=' + cb.value; });
    window.open(baseUrl + '?' + params, '_blank');
    picker.style.display = 'none';
  });
});
</script>
{% endblock %}