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

{% block title %}Hotel Daily Summary{% endblock %}

{% block content %}
<div class="container-fluid my-4">
  <h2 class="h5">Hotel Daily Summary – {{ 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">
      <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>

      <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>

      <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>

      <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>

  <!-- KPI Cards -->
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2 mb-3">
    {% for label, value in kpis.items %}
    <div class="col">
      <div class="border rounded p-2 h-100">
        <div class="small text-muted">{{ label }}</div>
        <div class="fw-bold">{{ value|floatformat:2 }}</div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Bank Reconciliation -->
  <h5 class="mt-3">Bank Reconciliation</h5>
  <div class="table-responsive">
    <table class="table table-sm table-bordered align-middle">
      <thead class="table-light">
        <tr>
          <th>Bank</th>
          <th class="text-end">Opening</th>
          <th class="text-end">Inflows</th>
          <th class="text-end">Outflows</th>
          <th class="text-end">Net</th>
          <th class="text-end">Expected Closing</th>
          <th class="text-end">Ledger Closing</th>
          <th class="text-end">Diff</th>
        </tr>
      </thead>
      <tbody>
          {% for r in bank_rows %}
          <tr class="{% if r.diff|floatformat:2 != '0.00' %}table-warning{% endif %}">
          <td>{{ r.name }}</td>
          <td class="text-end">{{ r.opening|floatformat:2 }}</td>
          <td class="text-end">{{ r.inflows|floatformat:2 }}</td>
          <td class="text-end">{{ r.outflows|floatformat:2 }}</td>
          <td class="text-end">{{ r.net|floatformat:2 }}</td>
          <td class="text-end">{{ r.expected|floatformat:2 }}</td>
          <td class="text-end">{{ r.ledger|floatformat:2 }}</td>
          <td class="text-end fw-bold">{{ r.diff|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Details (collapsible) -->
  <div class="mt-4">
    <!-- Advances -->
    <h6 class="d-flex justify-content-between align-items-center">
      Advances
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('advBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="advBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Booking/Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in advances_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No advances</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Checkouts -->
    <h6 class="d-flex justify-content-between align-items-center">
      Checkouts
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('coBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="coBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr>
            <th>Invoice</th><th>Rooms</th>
            <th class="text-end">Total</th>
            <th class="text-end">Cash</th><th class="text-end">Online</th><th class="text-end">Card</th>
            <th>Refund Bank</th>
            <th class="text-end">Refund</th>

          </tr></thead>
          <tbody>
            {% for r in checkout_details %}
            <tr>
              <td>{{ r.invoice }}</td>
              <td>{{ r.rooms }}</td>
              <td class="text-end">{{ r.total|floatformat:2 }}</td>
              <td class="text-end">{{ r.cash|floatformat:2 }}</td>
              <td class="text-end">{{ r.online|floatformat:2 }}</td>
              <td class="text-end">{{ r.card|floatformat:2 }}</td>
              <td>{{ r.refund_bank|default:"-" }}</td>
              <td class="text-end">{{ r.refund|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="8" class="text-center">No checkouts</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Restaurant Sales -->
    <h6 class="d-flex justify-content-between align-items-center">
      Restaurant Sales
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('rsBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>

    <div id="rsBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead>
            <tr>
              <th>Date</th>
              <th>Order #</th>
              <th>Customer</th>
              <th>Bank</th>
              <th class="text-end">Amount</th>
            </tr>
          </thead>

          <tbody>
            {% for r in restaurant_list %}
              <tr>
                <td>{{ r.date }}</td>
                <td>#{{ r.ref }}</td>
                <td>{{ r.customer|default:"Restaurant Sale" }}</td>
                <td>{{ r.bank }}</td>
                <td class="text-end">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="text-center">No restaurant sales</td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="4">Total Restaurant Sales</th>
              <th class="text-end">{{ restaurant_list_total|floatformat:2 }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <!-- Normal POS Sales -->
<h6 class="d-flex justify-content-between align-items-center">
  Sales

  <button
    type="button"
    class="btn btn-sm btn-outline-primary"
    onclick="
      document
        .getElementById('salesBox')
        .classList
        .toggle('d-none')
    "
  >
    <i class="fa fa-list"></i>
    Toggle
  </button>
</h6>

<div id="salesBox" class="d-none">
  <div class="table-responsive mb-3">

    <table class="table table-sm table-bordered align-middle">

      <thead>
        <tr>
          <th>Date</th>
          <th>Invoice</th>
          <th>Customer</th>
          <th>Type</th>
          <th>Items</th>
          <th>Bank</th>

          <th class="text-end">
            Sale Total
          </th>

          <th class="text-end">
            Received
          </th>
        </tr>
      </thead>

      <tbody>
        {% for r in sales_list %}
          <tr>
            <td>
              {{ r.date }}
            </td>

            <td>
              #{{ r.invoice }}
            </td>

            <td>
              {{ r.customer }}
            </td>

            <td>
              {{ r.sale_type }}
            </td>

            <td>
              {{ r.items }}
            </td>

            <td>
              {{ r.bank }}
            </td>

            <td class="text-end">
              {{ r.sale_total|floatformat:2 }}
            </td>

            <td class="text-end">
              {{ r.received|floatformat:2 }}
            </td>
          </tr>

        {% empty %}
          <tr>
            <td
              colspan="8"
              class="text-center"
            >
              No sales
            </td>
          </tr>
        {% endfor %}
      </tbody>

      <tfoot>
        <tr>
          <th colspan="6">
            Total
          </th>

          <th class="text-end">
            {{ sales_list_total|floatformat:2 }}
          </th>

          <th class="text-end">
            {{ sales_received_total|floatformat:2 }}
          </th>
        </tr>
      </tfoot>

    </table>

  </div>
</div>

    <!-- Customer Cash Received -->
    <h6 class="d-flex justify-content-between align-items-center">
      Customer Cash Received
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('ccBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="ccBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in custcash_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No customer cash received</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Vendor Payments -->
    <h6 class="d-flex justify-content-between align-items-center">
      Vendor Payments
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('vpBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="vpBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in vendor_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No vendor payments</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Staff Payments -->
    <h6 class="d-flex justify-content-between align-items-center">
      Staff Payments
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('spBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="spBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in staff_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No staff payments</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Expenses -->
    <h6 class="d-flex justify-content-between align-items-center">
      Expenses
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('exBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="exBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in expense_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No expenses</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Refunds -->
    <h6 class="d-flex justify-content-between align-items-center">
      Refunds
      <button class="btn btn-sm btn-outline-primary" onclick="document.getElementById('rfBox').classList.toggle('d-none')">
        <i class="fa fa-list"></i> Toggle
      </button>
    </h6>
    <div id="rfBox" class="d-none">
      <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
          <thead><tr><th>Date</th><th>Ref</th><th>Bank</th><th class="text-end">Amount</th></tr></thead>
          <tbody>
            {% for r in refunds_list %}
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ r.ref }}</td>
              <td>{{ r.bank }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center">No refunds</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>
{% endblock %}