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

{% block title %}Goods Transport Daily Summary{% endblock %}

{% block content %}
<style>
  .gtr-wrap {
    padding: 18px 14px;
  }

  .gtr-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
  }

  .gtr-filter,
  .gtr-card,
  .gtr-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .gtr-filter {
    padding: 14px;
    margin-bottom: 14px;
  }

  .gtr-card {
    padding: 12px;
    min-height: 72px;
  }

  .gtr-card-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 5px;
  }

  .gtr-card-value {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
  }

  .gtr-section {
    margin-top: 14px;
    overflow: hidden;
  }

  .gtr-head {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gtr-head h6 {
    margin: 0;
    font-weight: 800;
    color: #111827;
  }

  .gtr-toggle {
    border: 1px solid #2563eb;
    color: #2563eb;
    background: #ffffff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
  }

  .gtr-table {
    margin-bottom: 0;
  }

  .gtr-table th {
    background: #f3f4f6;
    color: #111827;
    font-size: 13px;
    white-space: nowrap;
  }

  .gtr-table td {
    font-size: 13px;
    vertical-align: middle;
  }

  .gtr-money {
    text-align: right;
    font-weight: 700;
  }

  .gtr-red-row {
    background: #fee2e2 !important;
  }

  .gtr-red-row td {
    color: #991b1b;
    font-weight: 700;
  }

  .gtr-muted {
    color: #6b7280;
  }

  .gtr-print-btn {
    border: 1px solid #9ca3af;
    background: #ffffff;
    color: #374151;
  }

  .gtr-small-note {
    font-size: 12px;
    color: #6b7280;
  }

  @media print {
    .navbar,
    .sidebar,
    .gtr-no-print,
    .btn,
    button {
      display: none !important;
    }

    .gtr-wrap {
      padding: 0;
    }

    .gtr-section,
    .gtr-card,
    .gtr-filter {
      box-shadow: none;
      border: 1px solid #d1d5db;
    }

    .gtr-body {
      display: block !important;
    }
  }
</style>

<div class="container-fluid gtr-wrap">

  <div class="gtr-title">
    Goods Transport Daily Summary
    <span class="gtr-muted">
      — {{ start_date|date:"M d, Y" }} to {{ end_date|date:"M d, Y" }}
    </span>
  </div>

  <div class="gtr-filter gtr-no-print">
    <form method="get">
      <div class="row align-items-end">

        <div class="col-md-3 mb-2">
          <label><strong>Date From</strong></label>
          <input
            type="date"
            name="start_date"
            value="{{ start_date|date:'Y-m-d' }}"
            class="form-control"
          >
        </div>

        <div class="col-md-3 mb-2">
          <label><strong>Date To</strong></label>
          <input
            type="date"
            name="end_date"
            value="{{ end_date|date:'Y-m-d' }}"
            class="form-control"
          >
        </div>

        <div class="col-md-3 mb-2">
          <label><strong>Bank / Cash</strong></label>
          <select name="bank_id" class="form-control">
            <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 class="col-md-3 mb-2">
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-filter"></i> Filter
          </button>

          <button type="button" class="btn gtr-print-btn" onclick="window.print();">
            <i class="fa fa-print"></i> Print
          </button>
        </div>

      </div>
    </form>
  </div>

  <div class="row">
    {% for label,value in kpis.items %}
      <div class="col-md-3 mb-3">
        <div class="gtr-card">
          <div class="gtr-card-label">{{ label }}</div>
          <div class="gtr-card-value">{{ value|floatformat:2 }}</div>
        </div>
      </div>
    {% endfor %}

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Bookings</div>
        <div class="gtr-card-value">{{ status_cards.booking_count }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Challans</div>
        <div class="gtr-card-value">{{ status_cards.challan_count }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Delivery Runs</div>
        <div class="gtr-card-value">{{ status_cards.delivery_run_count }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Delivered Proofs</div>
        <div class="gtr-card-value">{{ status_cards.delivery_count }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Ready for Delivery</div>
        <div class="gtr-card-value text-warning">{{ status_cards.pending_ready_delivery }}</div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="gtr-card">
        <div class="gtr-card-label">Out for Delivery</div>
        <div class="gtr-card-value text-primary">{{ status_cards.out_for_delivery }}</div>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <div>
        <h6>Bank Reconciliation</h6>
        <div class="gtr-small-note">
          Opening + Inflows - Outflows = Expected Closing. Agar Diff red ho to ledger mismatch trace karna hoga.
        </div>
      </div>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#bankReconBox">Toggle</button>
    </div>

    <div class="gtr-body" id="bankReconBox">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Bank</th>
              <th class="text-right">Opening</th>
              <th class="text-right">Inflows</th>
              <th class="text-right">Outflows</th>
              <th class="text-right">Net</th>
              <th class="text-right">Expected Closing</th>
              <th class="text-right">Ledger Closing</th>
              <th class="text-right">Current Bank Balance</th>
              <th class="text-right">Diff</th>
            </tr>
          </thead>

          <tbody>
            {% for row in bank_rows %}
              <tr class="{% if row.has_diff %}gtr-red-row{% endif %}">
                <td>{{ row.name }}</td>
                <td class="gtr-money">{{ row.opening|floatformat:2 }}</td>
                <td class="gtr-money text-success">{{ row.inflows|floatformat:2 }}</td>
                <td class="gtr-money text-danger">{{ row.outflows|floatformat:2 }}</td>
                <td class="gtr-money">{{ row.net|floatformat:2 }}</td>
                <td class="gtr-money">{{ row.expected|floatformat:2 }}</td>
                <td class="gtr-money">{{ row.ledger|floatformat:2 }}</td>
                <td class="gtr-money">{{ row.current_bank_balance|floatformat:2 }}</td>
                <td class="gtr-money">{{ row.diff|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="9" class="text-center gtr-muted">No bank reconciliation data.</td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th>Total</th>
              <th></th>
              <th class="gtr-money text-success">{{ total_inflows|floatformat:2 }}</th>
              <th class="gtr-money text-danger">{{ total_outflows|floatformat:2 }}</th>
              <th colspan="4"></th>
              <th class="gtr-money">{{ total_diff|floatformat:2 }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Goods Transport Receives</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#gtReceiveBox">Toggle</button>
    </div>

    <div class="gtr-body" id="gtReceiveBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in gt_receive_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Customer Cash Received</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#customerCashBox">Toggle</button>
    </div>

    <div class="gtr-body" id="customerCashBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in customer_cash_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Cash In</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#cashInBox">Toggle</button>
    </div>

    <div class="gtr-body" id="cashInBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in cash_in_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Expenses</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#expensesBox">Toggle</button>
    </div>

    <div class="gtr-body" id="expensesBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in expenses_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Vendor Payments</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#vendorBox">Toggle</button>
    </div>

    <div class="gtr-body" id="vendorBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in vendor_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Staff Payments</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#staffBox">Toggle</button>
    </div>

    <div class="gtr-body" id="staffBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in staff_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section">
    <div class="gtr-head">
      <h6>Cash Out</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#cashOutBox">Toggle</button>
    </div>

    <div class="gtr-body" id="cashOutBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in cash_out_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="gtr-section mb-4">
    <div class="gtr-head">
      <h6>Other / Unclassified Bank Movements</h6>
      <button type="button" class="gtr-toggle gtr-no-print" data-target="#unknownBox">Toggle</button>
    </div>

    <div class="gtr-body" id="unknownBox" style="display:none;">
      <div class="table-responsive">
        <table class="table table-sm table-bordered gtr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Ref</th>
              <th>Bank</th>
              <th>Description</th>
              <th>Builty</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in unknown_list %}
              <tr>
                <td>{{ r.date|date:"d-m-Y" }}</td>
                <td>{{ r.ref|default:"-" }}</td>
                <td>{{ r.bank|default:"-" }}</td>
                <td>{{ r.description|default:"-" }}</td>
                <td>{{ r.builty_no|default:"-" }}</td>
                <td class="gtr-money">{{ r.amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center gtr-muted">No records.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  $(".gtr-toggle").on("click", function () {
    var target = $(this).data("target");
    $(target).toggle();
  });
})();
</script>
{% endblock %}