{# reports/templates/reports/cash_book.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Cash Book{% endblock %}

{% block stylesheets %}

<style>
  @media print {
    body * { visibility: hidden; }
    #report-container, #report-container * { visibility: visible; }
    #report-container { position: absolute; top:0; left:0; width:100%; }
  }
  tr[data-bs-toggle] { cursor: pointer; }
  .table-responsive { overflow-x: auto; }
</style>
{% endblock %}

{% block heading %}Cash Book{% endblock %}

{% block content %}
<div id="report-container" class="container my-4">

  {# Filter Form #}
  <form method="get" class="row g-2 align-items-end mb-4">
    <div class="col-auto">
      <label>Banks:</label>
      <select name="bank_ids" multiple class="form-select form-select-sm">
        {% for b in banks %}
          <option value="{{ b.t_id }}"
            {% if b.t_id|stringformat:"s" in bank_ids %}selected{% endif %}>
            {{ b.name }}
          </option>
        {% empty %}
          <option disabled>No banks found</option>
        {% endfor %}
      </select>
    </div>

    <div class="col-auto">
      <label>From:</label>
      <input type="date" name="start_date" value="{{ start_date }}" class="form-control form-control-sm">
    </div>
    <div class="col-auto">
      <label>To:</label>
      <input type="date" name="end_date"   value="{{ end_date }}"   class="form-control form-control-sm">
    </div>
    <div class="col-auto form-check">
      <input type="checkbox" name="compare" value="1" id="compare" class="form-check-input" {% if compare %}checked{% endif %}>
      <label for="compare" class="form-check-label">Compare prior period</label>
    </div>
    <div class="col-auto">
      <button class="btn btn-primary btn-sm">Run</button>
      <a href="{% url 'reports:cash_book_csv' %}?{{ request.GET.urlencode }}" class="btn btn-outline-secondary btn-sm">Export CSV</a>

      <button type="button" class="btn btn-secondary btn-sm" onclick="window.print()">Print</button>
    </div>
  </form>

  {# KPI Cards #}
  <div class="row mb-4 text-center">
    <div class="col-md-3 mb-2">
      <div class="card border-info">
        <div class="card-body">
          <h6>Total Cash In</h6>
          <strong>{{ total_in|floatformat:2 }}</strong>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-2">
      <div class="card border-warning">
        <div class="card-body">
          <h6>Total Cash Out</h6>
          <strong>{{ total_out|floatformat:2 }}</strong>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-2">
      <div class="card border-success">
        <div class="card-body">
          <h6>Net Change</h6>
          <strong>{{ net_change|floatformat:2 }}</strong>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-2">
      <div class="card border-secondary">
        <div class="card-body">
          <h6>Avg Daily Flow</h6>
          <strong>{{ avg_daily|floatformat:2 }}</strong>
        </div>
      </div>
    </div>
  </div>


  {# Trend Chart #}
<!--   <canvas id="trendChart" height="100"></canvas> -->

  {# Opening/Closing #}
  <div class="row my-4">
    <div class="col-md-6">
      <div class="card bg-light mb-2">
        <div class="card-body text-center">
          <h6>Opening Balance</h6>
          <strong>{{ opening }}</strong>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card bg-light mb-2">
        <div class="card-body text-center">
          <h6>Closing Balance</h6>
          <strong>{{ closing }}</strong>
        </div>
      </div>
    </div>
  </div>

{# Summary + Details #}
<div class="table-responsive mb-4">
  <table class="table table-sm table-bordered">
    <thead class="table-light">
      <tr>
        <th>Category</th>
        <th class="text-end">Bill Total</th>
        <th class="text-end">Cash Total</th>
        <th style="width:1em"></th>
      </tr>
    </thead>
    <tbody>
      {% for entry in entries %}
        <tr data-bs-toggle="collapse" data-bs-target="#det-{{ forloop.counter }}">
          <td>{{ entry.label }}</td>
          <td class="text-end">
            {% if entry.bill_total %}{{ entry.bill_total|floatformat:2 }}
            {% else %}&mdash;{% endif %}
          </td>
          <td class="text-end">{{ entry.cash_total|floatformat:2 }}</td>
          <td><i class="bi bi-chevron-right"></i></td>
        </tr>
        <tr class="collapse" id="det-{{ forloop.counter }}">
          <td colspan="4" class="p-0">
            <div class="table-responsive">
              <table class="table table-sm mb-0 table-striped table-secondary">
                <thead>
                  <tr>
                    <th>Date</th>
                    <th>Invoice No</th>
                    <th>Party</th>
                    {% if entry.bill_total %}<th class="text-end">Bill Amt</th>{% endif %}
                    <th class="text-end">Cash Amt</th>
                    <th class="text-end">Running Bal</th>
                  </tr>
                </thead>
                <tbody>
                  {% for r in entry.rows %}
                  <tr>
                    <td>{{ r.date }}</td>
                    <td>{{ r.invoice_no }}</td>
                    <td>{{ r.party_name }}</td>
                    {% if r.bill_amount is defined %}
                      <td class="text-end">{{ r.bill_amount|floatformat:2 }}</td>
                    {% endif %}
                    <td class="text-end">{{ r.cash_amount|floatformat:2 }}</td>
                    <td class="text-end">{{ r.running_balance|floatformat:2 }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>


  {# Comparison Section #}
  {% if compare %}
    <h5>Previous Period ({{ prev_start }} → {{ prev_end }})</h5>
    <div class="row">
      {% for label, vals in cmp_summary.items %}
        {% if vals.cash_total %}
        <div class="col-md-4 mb-2">
          <div class="card">
            <div class="card-body">
              <h6>{{ label }}</h6>
              <p class="mb-1">Bill: {{ vals.bill_total }}</p>
              <p>Cash: {{ vals.cash_total }}</p>
            </div>
          </div>
        </div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}

<script>
  // toggle chevrons
  document.querySelectorAll('tr[data-bs-toggle]').forEach(r=>{
    r.addEventListener('click',()=>{
      let i=r.querySelector('i.bi');
      i.classList.toggle('bi-chevron-right');
      i.classList.toggle('bi-chevron-down');
    });
  });

  // render trend chart
  const ctx = document.getElementById('trendChart').getContext('2d');
  const data = {
    labels:  {{ trend_dates|safe }},
    datasets: [{
      label: 'Net Cash',
      data: {{ trend_values|safe }},
      fill: false,
      tension: 0.3
    }]
  };
  new Chart(ctx, {
    type: 'line',
    data,
    options: {
      scales: { y: { beginAtZero:true } }
    }
  });
</script>
{% endblock %}