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

{% block title %}Daily Closing Report{% endblock %}

{% block content %}
<div class="container-fluid my-4">
  <h2 class="h5">Daily Closing – {{ start_date }}{% if end_date != start_date %} to {{ end_date }}{% endif %}</h2>
{# Filters #}
<div class="mb-4 border-bottom pb-2">
  <form method="get" class="row gx-2 gy-2">
    <!-- 1st line: From Date -->
    <div class="col-12 col-sm-auto">
      <div class="input-group input-group-sm w-100">
        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        <input
          type="date"
          name="start_date"
          value="{{ start_date }}"
          class="form-control"
          placeholder="From"
        >
      </div>
    </div>

    <!-- 2nd line: To Date -->
    <div class="col-12 col-sm-auto">
      <div class="input-group input-group-sm w-100">
        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        <input
          type="date"
          name="end_date"
          value="{{ end_date }}"
          class="form-control"
          placeholder="To"
        >
      </div>
    </div>

    <!-- 3rd line: Bank Selector -->
    <div class="col-12 col-sm-auto">
      <div class="input-group input-group-sm w-100">
        <span class="input-group-text"><i class="fa fa-university"></i></span>
        <select name="bank_id" class="form-select">
          <option value="all" {% if selected_bank == "all" %}selected{% endif %}>All Banks</option>
          {% for b in banks %}
            <option
              value="{{ b.t_id }}"
              {% if selected_bank == b.t_id|stringformat:"s" %}selected{% endif %}
            >
              {{ b.name }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>

    <!-- 4th line: Buttons -->
    <div class="col-12 col-sm-auto">
      <button type="submit" class="btn btn-primary btn-sm me-1">
        <i class="fa fa-filter"></i> Filter
      </button>
      <button
        type="button"
        class="btn btn-outline-secondary btn-sm"
        onclick="window.print()"
      >
        <i class="fa fa-print"></i> Print
      </button>
    </div>
  </form>
</div>

  {# Bills Summary #}
  <div class="row gy-4">
    <div class="col-12 col-md-6">
      <h5 class="d-flex justify-content-between align-items-center">
        Cash Bills
        <button class="btn btn-sm btn-outline-primary" onclick="$('#cashBody').toggleClass('d-none')">
          <i id="cashToggleIcon" class="fa fa-sort"></i>
        </button>
      </h5>
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead><tr>
            <th>Invoice</th><th class="text-end">Billed</th><th class="text-end">Received</th>
          </tr></thead>
          <tbody id="cashBody" class="d-none">
            {% for r in cash_bill_list %}
            <tr>
              <td>{{ r.invoice }}</td>
              <td class="text-end">{{ r.billed|floatformat:2 }}</td>
              <td class="text-end">{{ r.received|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="3" class="text-center">No cash bills</td></tr>
            {% endfor %}
          </tbody>
          <tfoot class="table-secondary">
            <tr class="fw-bold">
              <td>Total</td>
              <td class="text-end">{{ cash_bills_totals.total_billed|floatformat:2 }}</td>
              <td class="text-end">{{ cash_bills_totals.total_received|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="col-12 col-md-6">
      <h5 class="d-flex justify-content-between align-items-center">
        Credit Bills
        <button class="btn btn-sm btn-outline-primary" onclick="$('#creditBody').toggleClass('d-none')">
          <i id="cashToggleIcon" class="fa fa-sort"></i>
        </button>
      </h5>
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead><tr>
            <th>Invoice</th><th class="text-end">Billed</th><th class="text-end">Received</th><th class="text-end">Pending</th>
          </tr></thead>
          <tbody id="creditBody" class="d-none">
            {% for r in credit_bill_list %}
            <tr>
              <td>{{ r.invoice }}</td>
              <td class="text-end">{{ r.billed|floatformat:2 }}</td>
              <td class="text-end">{{ r.received|floatformat:2 }}</td>
              <td class="text-end">{{ r.pending|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No credit bills</td></tr>
            {% endfor %}
          </tbody>
          <tfoot class="table-secondary">
            <tr class="fw-bold">
              <td>Total</td>
              <td class="text-end">{{ credit_bills_totals.total_billed|floatformat:2 }}</td>
              <td class="text-end">{{ credit_bills_totals.total_received|floatformat:2 }}</td>
              <td class="text-end">{{ credit_bills_totals.total_pending|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  {# Other Cash Movements #}
  <h5 class="mt-4">Other Cash Movements</h5>
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-6 g-2 text-center">
    {% for label, value in other_cash_movements %}
      <div class="col">
        <div class="border rounded py-2">
          <strong>{{ label }}</strong>
          <div>{{ value|floatformat:2 }}</div>
        </div>
      </div>
    {% endfor %}
  </div>


  {# Bank Balances #}
  <h5 class="mt-4">Bank Balances</h5>
  <div class="table-responsive">
    <table class="table table-sm table-bordered mb-4">
      <thead><tr>
        <th>Bank</th><th class="text-end">Opening</th><th class="text-end">Net</th><th class="text-end">Closing</th>
      </tr></thead>
      <tbody>
        {% for row in closing_rows %}
        <tr>
          <td>{{ row.bank.name }}</td>
          <td class="text-end">{{ row.opening|floatformat:2 }}</td>
          <td class="text-end">{{ row.net_today|floatformat:2 }}</td>
          <td class="text-end">{{ row.closing|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# Stock Summary #}
  <h5>Stock Summary</h5>
  <div class="table-responsive">
    <table class="table table-sm table-bordered mb-4">
      <thead><tr>
        <th>Product</th><th class="text-end">Opening</th><th class="text-end">Purchased</th>
        <th class="text-end">Sold</th><th class="text-end">Manufactured</th>
        <th class="text-end">Processed</th><th class="text-end">Closing</th>
      </tr></thead>
      <tbody>
        {% for s in stock_entries %}
        <tr>
          <td>{{ s.product }}</td>
          <td class="text-end">{{ s.opening|floatformat:2 }}</td>
          <td class="text-end">{{ s.purchased|floatformat:2 }}</td>
          <td class="text-end">{{ s.sold|floatformat:2 }}</td>
          <td class="text-end">{{ s.manufactured|floatformat:2 }}</td>
          <td class="text-end">{{ s.used_in_manuf|floatformat:2 }}</td>
          <td class="text-end">{{ s.closing|floatformat:2 }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center">No stock movements</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# Movement Details #}
  <h5>Movement Details</h5>
  {% for label, items in move_details.items %}
    {% if items %}
      <h6>{{ label }}</h6>
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr>
            <th>Invoice</th><th>Party</th><th class="text-end">Amount</th>
          </tr></thead>
          <tbody>
            {% for it in items %}
            <tr>
              <td>{{ it.invoice }}</td>
              <td>{{ it.party }}</td>
              <td class="text-end">{{ it.amount|floatformat:2 }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  {% endfor %}

</div>
{% endblock %}