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

{% block title %}Business Closing{% endblock %}

{% block stylesheets %}
<style>
  .bc-card        { border:1px solid #dee2e6; border-radius:.375rem; }
  .bc-card-header { background:#f8f9fa; padding:.5rem .75rem; font-weight:600; border-bottom:1px solid #dee2e6; }
  .bc-card-body   { padding:.5rem .75rem; }
  .section-title  { font-size:1.1rem; font-weight:600; margin:1.25rem 0 .5rem; border-bottom:2px solid #0d6efd; padding-bottom:.25rem; }
  .grand-row td, .grand-row th { background:#e9ecef !important; font-weight:700; }
  .summary-toggle { cursor:pointer; }
  .summary-toggle:hover { background:#f0f0f0; }
  @media print {
    .no-print { display:none !important; }
  }
</style>
{% endblock %}

{% block heading %}Business Closing{% endblock %}

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

<!-- {# ═══════════ HEADER / FILTERS ═══════════ #} -->
<form method="get" class="mb-4 no-print">
  <div class="row g-2 align-items-end">
    <div class="col-auto">
      <label class="small 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 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-auto">
      <label class="small mb-1">Bank</label>
      <select name="bank_id" class="form-select form-select-sm" style="min-width:180px">
        <option value="all" {% if bank_id == "all" %}selected{% endif %}>All Banks</option>
        {% for b in banks %}
        <option value="{{ b.t_id }}" {% if bank_id == b.t_id|stringformat:"s" %}selected{% endif %}>{{ b.name }}</option>
        {% endfor %}
      </select>
    </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-danger btn-sm" id="btnPdfModal"><i class="fa fa-file-pdf"></i> PDF</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-4">
  Business Closing &mdash; {{ start_date }}{% if start_date != end_date %} to {{ end_date }}{% endif %}
</h5>

<!-- {# ═══════════ SECTION 1 — SALE ═══════════ #} -->
<div class="section-title">1. Sale Section</div>
<div class="table-responsive">
  <table class="table table-sm table-bordered mb-4">
    <thead class="table-light">
      <tr>
        <th style="width:30%"></th>
        <th class="text-end" style="width:35%">Sale</th>
        <th class="text-end" style="width:35%">Return</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cash</td>
        <td class="text-end">{{ sale.cash_sale|floatformat:2 }}</td>
        <td class="text-end">{{ sale.cash_return|floatformat:2 }}</td>
      </tr>
      {% if sale.restaurant_sale %}
      <tr>
        <td class="ps-4 text-muted small">↳ incl. Restaurant</td>
        <td class="text-end text-muted small">{{ sale.restaurant_sale|floatformat:2 }}</td>
        <td class="text-end">—</td>
      </tr>
      {% endif %}
      <tr>
        <td>Credit</td>
        <td class="text-end">{{ sale.credit_sale|floatformat:2 }}</td>
        <td class="text-end">{{ sale.credit_return|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Vendor</td>
        <td class="text-end">{{ sale.vendor_sale|floatformat:2 }}</td>
        <td class="text-end">{{ sale.vendor_return|floatformat:2 }}</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="table-secondary fw-bold">
        <td>Total</td>
        <td class="text-end">{{ sale.total_sale|floatformat:2 }}</td>
        <td class="text-end">{{ sale.total_return|floatformat:2 }}</td>
      </tr>
      <tr class="grand-row">
        <td colspan="2" class="text-end">Grand Sale (Sale − Return)</td>
        <td class="text-end">{{ sale.grand_sale|floatformat:2 }}</td>
      </tr>
    </tfoot>
  </table>
</div>


<!-- {# ═══════════ SECTION 2 — CASH ═══════════ #} -->
<div class="section-title">2. Cash Section</div>
<div class="table-responsive">
  <table class="table table-sm table-bordered mb-4">
    <thead class="table-light">
      <tr><th>Head</th><th class="text-end">Amount</th></tr>
    </thead>
    <tbody>
      {% for h in cash_heads %}
      <tr>
        <td>{{ h.label }}</td>
        <td class="text-end">{{ h.amount|floatformat:2 }}</td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr class="grand-row">
        <td class="text-end fw-bold">Total Cash</td>
        <td class="text-end fw-bold">{{ cash.total|floatformat:2 }}</td>
      </tr>
    </tfoot>
  </table>
</div>


<!-- {# ═══════════ SECTION 3 — PAYMENT FLOW (PER BANK) ═══════════ #} -->
<div class="section-title">3. Payments Flow</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
  {% for card in bank_cards %}
  <div class="col">
    <div class="bc-card h-100">
      <div class="bc-card-header text-center">{{ card.name|title  }}</div>
      <div class="bc-card-body">
        <table class="table table-sm table-borderless mb-0">
          <tbody>
            <tr class="table-primary">
              <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 class="table-success">
              <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">No banks found.</p></div>
  {% endfor %}
</div>

{# ═══════════ SECTION 4 — TRANSACTION SUMMARIES ═══════════ #}
<div class="section-title">4. Transaction Summaries</div>
{% for s in summaries %}
<div class="card mb-3">
  <div class="card-header py-2 summary-toggle d-flex justify-content-between align-items-center"
       style="cursor:pointer;" data-target-id="summ_{{ forloop.counter }}">
    <strong>{{ s.label }}</strong>
    <span>
      <span style="background:#0d6efd;color:#fff;padding:3px 8px;border-radius:4px;font-size:.8rem;margin-right:4px;">Total: {{ s.total_amount|floatformat:2 }}</span>
      <span style="background:#0d6efd;color:#fff;padding:3px 8px;border-radius:4px;font-size:.8rem;">Paid: {{ s.amount_transaction|floatformat:2 }}</span>
      <i class="fa fa-chevron-down ms-2" style="margin-left:6px;"></i>
    </span>
  </div>
  <div class="d-none" id="summ_{{ forloop.counter }}">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>Invoice #</th>
              <th>Bank</th>
              <th>Date</th>
              <th>Party</th>
              <th>Remarks</th>
              <th class="text-end">Total Amount</th>
              <th class="text-end">Amount Paid</th>
            </tr>
          </thead>
          <tbody>
            {% for r in s.rows %}
            <tr>
              <td>{{ r.invoice_no }}</td>
              <td>{{ r.bank }}</td>
              <td>{{ r.date }}</td>
              <td>{{ r.party }}</td>
              <td>{{ r.remarks }}</td>
              <td class="text-end">{{ r.total_amount|floatformat:2 }}</td>
              <td class="text-end">{{ r.amount_transaction|floatformat:2 }}</td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="table-secondary fw-bold">
            <tr>
              <td colspan="5" class="text-end">Total</td>
              <td class="text-end">{{ s.total_amount|floatformat:2 }}</td>
              <td class="text-end">{{ s.amount_transaction|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
{% empty %}
<p class="text-muted">No transactions found for the selected period.</p>
{% endfor %}

{# ═══════════ PDF EXPORT MODAL ═══════════ #}
<div id="pdfModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
  <div style="background:#fff; border-radius:8px; max-width:420px; margin:12% auto; padding:0; box-shadow:0 8px 30px rgba(0,0,0,0.25);">
    <div style="background:#0B60D1; color:#fff; padding:12px 20px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center;">
      <strong style="font-size:1rem;">Export PDF — Select Sections</strong>
      <span id="pdfModalClose" style="cursor:pointer; font-size:1.3rem; line-height:1;">&times;</span>
    </div>
    <div style="padding:20px;">
      <div style="margin-bottom:12px;">
        <label style="display:block; padding:8px 12px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; margin-bottom:8px; cursor:pointer;">
          <input type="checkbox" class="pdf-sec-cb" value="sale" checked style="margin-right:8px;">
          <strong>1. Sale Section</strong>
          <small style="color:#6B7280; display:block; margin-left:24px;">Cash / Credit / Vendor Sales &amp; Returns</small>
        </label>
        <label style="display:block; padding:8px 12px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; margin-bottom:8px; cursor:pointer;">
          <input type="checkbox" class="pdf-sec-cb" value="cash" checked style="margin-right:8px;">
          <strong>2. Cash Section</strong>
          <small style="color:#6B7280; display:block; margin-left:24px;">Collected cash from various heads</small>
        </label>
        <label style="display:block; padding:8px 12px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; margin-bottom:8px; cursor:pointer;">
          <input type="checkbox" class="pdf-sec-cb" value="flow" checked style="margin-right:8px;">
          <strong>3. Payments Flow</strong>
          <small style="color:#6B7280; display:block; margin-left:24px;">Per-bank opening, heads &amp; closing</small>
        </label>
        <label style="display:block; padding:8px 12px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; margin-bottom:8px; cursor:pointer;">
          <input type="checkbox" class="pdf-sec-cb" value="summaries" style="margin-right:8px;">
          <strong>4. Transaction Summaries</strong>
          <small style="color:#6B7280; display:block; margin-left:24px;">Detailed invoices per head</small>
        </label>
      </div>
      <div style="display:flex; justify-content:flex-end; gap:8px;">
        <button type="button" id="pdfModalCancel" style="padding:6px 16px; border:1px solid #dee2e6; background:#fff; border-radius:4px; cursor:pointer;">Cancel</button>
        <button type="button" id="pdfModalGenerate" style="padding:6px 16px; background:#0B60D1; color:#fff; border:none; border-radius:4px; cursor:pointer; font-weight:600;">
          <i class="fa fa-file-pdf" style="margin-right:4px;"></i> Generate PDF
        </button>
      </div>
    </div>
  </div>
</div>

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  // Custom collapse toggle for Section 4
  document.querySelectorAll('.summary-toggle').forEach(function(el){
    el.addEventListener('click', function(){
      var targetId = el.getAttribute('data-target-id');
      var target = document.getElementById(targetId);
      if(!target) return;
      var icon = el.querySelector('i.fa');
      if(target.classList.contains('d-none')){
        target.classList.remove('d-none');
        if(icon){
          icon.classList.remove('fa-chevron-down');
          icon.classList.add('fa-chevron-up');
        }
      } else {
        target.classList.add('d-none');
        if(icon){
          icon.classList.remove('fa-chevron-up');
          icon.classList.add('fa-chevron-down');
        }
      }
    });
  });

  // ── PDF Export Modal ──
  var modal      = document.getElementById('pdfModal');
  var btnOpen    = document.getElementById('btnPdfModal');
  var btnClose   = document.getElementById('pdfModalClose');
  var btnCancel  = document.getElementById('pdfModalCancel');
  var btnGen     = document.getElementById('pdfModalGenerate');

  function showModal(){ modal.style.display = 'block'; }
  function hideModal(){ modal.style.display = 'none'; }

  btnOpen.addEventListener('click', showModal);
  btnClose.addEventListener('click', hideModal);
  btnCancel.addEventListener('click', hideModal);
  modal.addEventListener('click', function(e){
    if(e.target === modal) hideModal();
  });

  btnGen.addEventListener('click', function(){
    var checked = document.querySelectorAll('.pdf-sec-cb:checked');
    if(checked.length === 0){
      alert('Please select at least one section.');
      return;
    }
    // Build URL with current filters + selected sections
    var params = new URLSearchParams();
    params.set('start_date', '{{ start_date|date:"Y-m-d" }}');
    params.set('end_date',   '{{ end_date|date:"Y-m-d" }}');
    params.set('bank_id',    '{{ bank_id }}');
    checked.forEach(function(cb){
      params.append('sections', cb.value);
    });
    var url = "{% url 'reports:business_closing_export_pdf' %}?" + params.toString();
    window.open(url, '_blank');
    hideModal();
  });
});
</script>
{% endblock %}