{% extends "pos/base.html" %}
{% load static %}
{% block title %}Sale Charges Summary{% endblock %}

{% block stylesheets %}
<style>
.cs-filter-card { border: 1px solid #e3e6ec; border-radius: 12px; }
.cs-filter-body { padding: 18px 20px 16px; }
.cs-check-group {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid #e8eaee; border-radius: 10px;
  padding: 8px 14px; height: 100%; background: #fbfcfd;
}
.cs-check-group .form-check { margin: 0; }
.cs-check-group .form-check-label {
  font-weight: 600; font-size: .82rem; color: #444; cursor: pointer;
}
.cs-label {
  font-size: .7rem; font-weight: 700; color: #5c6470;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: block;
}
.cs-apply-btn {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5f8a 100%);
  border: none; font-weight: 600; letter-spacing: .3px;
}
.cs-apply-btn:hover { opacity: .9; color: #fff; }
.cs-export-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-summary-badge {
  background: #eef3f9; color: #1a2f4a; font-weight: 700;
  border-radius: 8px; padding: 6px 14px; font-size: .82rem;
}
#csTable thead th {
  background: #1a2f4a; color: #fff; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
  vertical-align: middle;
}
#csTable tbody td { font-size: .85rem; vertical-align: middle; }
#csTable tbody tr:nth-child(even) { background: #f8f9fb; }
#csTable tfoot td {
  background: #e8edf3; font-weight: 700; border-top: 2px solid #1a2f4a;
  font-size: .85rem;
}
.cs-num { text-align: right; white-space: nowrap; }
.cs-empty { padding: 40px; text-align: center; color: #aaa; }
</style>
{% endblock %}

{% block heading %}Sale Charges Summary{% endblock %}

{% block content %}

<!-- ─────────────────────────────  FILTER BAR  ────────────────────────────── -->
<div class="card shadow-sm cs-filter-card mb-3">
  <div class="cs-filter-body">
    <form method="get" id="csFilterForm">
      <div class="row g-3 align-items-end">

        <div class="col-12 col-md-3">
          <label class="cs-label">Date From</label>
          <input type="date" name="date_from" value="{{ date_from }}" class="form-control">
        </div>
        <div class="col-12 col-md-3">
          <label class="cs-label">Date To</label>
          <input type="date" name="date_to" value="{{ date_to }}" class="form-control">
        </div>

        <div class="col-12 col-md-4">
          <label class="cs-label">Sale Type</label>
          <div class="cs-check-group">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="cash" value="1" id="csCash" {% if show_cash %}checked{% endif %}>
              <label class="form-check-label" for="csCash">Cash</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="credit" value="1" id="csCredit" {% if show_credit %}checked{% endif %}>
              <label class="form-check-label" for="csCredit">Credit</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="vendor" value="1" id="csVendor" {% if show_vendor %}checked{% endif %}>
              <label class="form-check-label" for="csVendor">Vendor</label>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-2">
          <button type="submit" class="btn btn-primary btn-sm w-100 cs-apply-btn">
            <i class="fas fa-search me-1"></i> Apply
          </button>
        </div>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between mt-3 pt-3" style="border-top: 1px dashed #e8eaee;">
        <span class="cs-summary-badge">
          <i class="fas fa-file-invoice me-1"></i> {{ row_count }} invoice{{ row_count|pluralize }} found
        </span>
        <div class="cs-export-bar">
          <a href="{% url 'reports:charges_summary_pdf' %}?{{ request.GET.urlencode }}"
             target="_blank" rel="noopener" class="btn btn-outline-danger btn-sm">
            <i class="far fa-file-pdf me-1"></i> Export PDF
          </a>
          <a href="{% url 'reports:charges_summary_excel' %}?{{ request.GET.urlencode }}"
             class="btn btn-outline-success btn-sm">
            <i class="far fa-file-excel me-1"></i> Export Excel
          </a>
          <a href="{% url 'reports:charges_summary' %}" class="btn btn-light btn-sm border">
            Reset
          </a>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- ─────────────────────────────  TABLE  ────────────────────────────── -->
<div class="card shadow-sm mb-4">
  <div class="card-body">
    {% if rows %}
    <div class="table-responsive">
      <table class="table table-bordered table-hover mb-0" id="csTable">
        <thead>
          <tr>
            <th>Invoice #</th>
            <th>Date</th>
            <th>Customer / Vendor</th>
            <th>Type</th>
            <th class="cs-num">Sub Total</th>
            <th class="cs-num">Discount</th>
            <th class="cs-num">Transport</th>
            <th class="cs-num">Other Chgs</th>
            <th class="cs-num">Tax %</th>
            <th class="cs-num">Adv Tax</th>
            <th class="cs-num">Grand Total</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.invoice_no }}</td>
            <td>{{ r.date }}</td>
            <td>{{ r.customer }}</td>
            <td>
              {% if r.sale_type == "Cash" %}<span class="badge badge-success">Cash</span>
              {% elif r.sale_type == "Credit" %}<span class="badge badge-info">Credit</span>
              {% else %}<span class="badge badge-secondary">{{ r.sale_type }}</span>{% endif %}
            </td>
            <td class="cs-num">{{ r.sub_total|floatformat:2 }}</td>
            <td class="cs-num">{{ r.discount|floatformat:2 }}</td>
            <td class="cs-num">{{ r.transport|floatformat:2 }}</td>
            <td class="cs-num">{{ r.other|floatformat:2 }}</td>
            <td class="cs-num">{{ r.tax_pct|floatformat:2 }}%</td>
            <td class="cs-num">{{ r.tax_amount|floatformat:2 }}</td>
            <td class="cs-num"><strong>{{ r.grand_total|floatformat:2 }}</strong></td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" class="text-right">TOTAL</td>
            <td class="cs-num">{{ totals.sub_total|floatformat:2 }}</td>
            <td class="cs-num">{{ totals.discount|floatformat:2 }}</td>
            <td class="cs-num">{{ totals.transport|floatformat:2 }}</td>
            <td class="cs-num">{{ totals.other|floatformat:2 }}</td>
            <td class="cs-num">—</td>
            <td class="cs-num">{{ totals.tax_amount|floatformat:2 }}</td>
            <td class="cs-num">{{ totals.grand_total|floatformat:2 }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% else %}
    <div class="cs-empty">
      <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
      Selected filters ke liye koi invoice nahi mili.
    </div>
    {% endif %}
  </div>
</div>

<p class="text-muted small">
  <i class="fas fa-info-circle me-1"></i>
  Sub Total aur Adv Tax (amount) invoice ke grand total aur stored tax % se derive kiye gaye hain
  (payments table sirf tax % store karta hai, amount nahi).
</p>

{% endblock %}