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

{% block title %}Sales Tax Report{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
/* ═══════ Report Styles ═══════ */
.rpt-filter {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 16px 20px; margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rpt-filter label {
    font-size: .78rem; font-weight: 600; color: #4a5568; margin-bottom: 3px;
}
.rpt-filter .form-control { height: 34px; font-size: .82rem; border-radius: 6px; }
.btn-search {
    background: #1170c6; color: #fff; border: none; font-weight: 600;
    font-size: .82rem; padding: 6px 20px; border-radius: 6px; transition: .2s;
}
.btn-search:hover { background: #0d5aa7; color: #fff; }
.btn-export {
    padding: 6px 14px; font-size: .78rem; font-weight: 600; border-radius: 6px;
    transition: .2s; border: 1px solid;
}
.btn-excel { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-excel:hover { background: #15803d; color: #fff; }
.btn-pdf { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-pdf:hover { background: #dc2626; color: #fff; }

/* Summary Cards */
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 16px; }
.sum-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sum-card .sc-label { font-size: .72rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.sum-card .sc-value { font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-top: 2px; }
.sum-card.green  .sc-value { color: #16a34a; }
.sum-card.red    .sc-value { color: #ef4444; }
.sum-card.blue   .sc-value { color: #1170c6; }
.sum-card.purple .sc-value { color: #7c3aed; }

/* Table */
.rpt-table { font-size: .82rem; }
.rpt-table thead th {
    background: #1170c6 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .76rem; text-transform: uppercase; letter-spacing: .3px;
    border: none; padding: 8px 10px; white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}
.rpt-table tbody td { padding: 6px 10px; border-color: #f1f5f9; vertical-align: middle; }
.rpt-table tbody tr:nth-child(even) { background: #f7fafd; }
.rpt-table tbody tr:hover { background: #edf2f7; }
.rpt-table tfoot th { background: #e8f0fe; font-size: .82rem; padding: 8px 10px; }

/* Badges */
.badge-filer     { background: #dcfce7; color: #16a34a; font-weight: 700; font-size: .72rem; padding: 3px 10px; border-radius: 12px; }
.badge-nonfiler  { background: #fef2f2; color: #ef4444; font-weight: 700; font-size: .72rem; padding: 3px 10px; border-radius: 12px; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
.empty-state i { font-size: 3rem; margin-bottom: 12px; display: block; }

/* Sticky header */
.table-responsive { max-height: 70vh; overflow-y: auto; }

@media (max-width: 768px) {
    .sum-cards { grid-template-columns: repeat(2, 1fr); }
}
</style>
{% endblock %}

{% block heading %}
<span><i class="fas fa-file-invoice-dollar mr-2"></i>Sales Tax Report</span>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- ═══════ FILTER BAR ═══════ -->
    <form method="get" id="report-form" class="rpt-filter">
        <div class="row align-items-end">
            <div class="col-lg-2 col-md-3 col-sm-6 mb-2">
                <label>Date From</label>
                <input type="date" name="date_from" class="form-control"
                       value="{{ date_from }}">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-6 mb-2">
                <label>Date To</label>
                <input type="date" name="date_to" class="form-control"
                       value="{{ date_to }}">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-6 mb-2">
                <label>Sale Area</label>
                <select name="area_id" class="form-control">
                    <option value="">— All Areas —</option>
                    {% for a in sale_areas %}
                        <option value="{{ a.t_id }}"
                            {% if area_id == a.t_id|stringformat:"s" %}selected{% endif %}>
                            {{ a.area_name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-6 mb-2">
                <label>Order Booker</label>
                <select name="booker_id" class="form-control">
                    <option value="">— All Bookers —</option>
                    {% for ob in order_bookers %}
                        <option value="{{ ob.t_id }}"
                            {% if booker_id == ob.t_id|stringformat:"s" %}selected{% endif %}>
                            {{ ob.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-4 col-md-12 mb-2">
                <div class="d-flex gap-2" style="gap:8px;">
                    <button type="submit" class="btn btn-search">
                        <i class="fas fa-search mr-1"></i>Search
                    </button>
                    <a href="#" id="btn-excel" class="btn btn-export btn-excel">
                        <i class="fas fa-file-excel mr-1"></i>Excel
                    </a>
                    <a href="#" id="btn-pdf" class="btn btn-export btn-pdf">
                        <i class="fas fa-file-pdf mr-1"></i>PDF
                    </a>
                </div>
            </div>
        </div>
    </form>

    <!-- ═══════ SUMMARY CARDS ═══════ -->
    <div class="sum-cards">
        <div class="sum-card blue">
            <div class="sc-label">Total Customers</div>
            <div class="sc-value">{{ total_customers }}</div>
        </div>
        <div class="sum-card purple">
            <div class="sc-label">Total Invoices</div>
            <div class="sc-value">{{ total_invoice_count }}</div>
        </div>
        <div class="sum-card">
            <div class="sc-label">Total Sales</div>
            <div class="sc-value">{{ grand_total_sales|floatformat:2 }}</div>
        </div>
        <div class="sum-card red">
            <div class="sc-label">Total Tax</div>
            <div class="sc-value">{{ grand_total_tax|floatformat:2 }}</div>
        </div>
        <div class="sum-card green">
            <div class="sc-label">Filer ({{ filer_count }})</div>
            <div class="sc-value">{{ filer_total_sales|floatformat:2 }}</div>
        </div>
        <div class="sum-card red">
            <div class="sc-label">Non-Filer ({{ non_filer_count }})</div>
            <div class="sc-value">{{ non_filer_total_sales|floatformat:2 }}</div>
        </div>
    </div>

    <!-- ═══════ RATE INFO ═══════ -->
    <div class="mb-3 d-flex align-items-center" style="gap:16px;">
        <small class="text-muted">
            <span class="badge-filer mr-1">Filer Tax: {{ filer_tax_rate }}%</span>
            <span class="badge-nonfiler">Non-Filer Tax: {{ non_filer_tax_rate }}%</span>
        </small>
        {% if filtered_area_name %}
            <small class="text-muted">| Area: <b>{{ filtered_area_name }}</b></small>
        {% endif %}
        {% if filtered_booker_name %}
            <small class="text-muted">| Booker: <b>{{ filtered_booker_name }}</b></small>
        {% endif %}
    </div>

    <!-- ═══════ DATA TABLE ═══════ -->
    {% if report_data %}
    <div class="table-responsive">
        <table class="table table-bordered rpt-table" id="tax-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>ID</th>
                    <th>Customer Name</th>
                    <th>STR #</th>
                    <th>NTN</th>
                    <th>CNIC</th>
                    <th>Status</th>
                    <th>Area</th>
                    <th>Invoices</th>
                    <th class="text-right">Total Sales</th>
                    <th class="text-center">Tax %</th>
                    <th class="text-right">Tax Amount</th>
                </tr>
            </thead>
            <tbody>
                {% for r in report_data %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ r.t_id }}</td>
                    <td>{{ r.name|title }}</td>
                    <td>{{ r.str_no }}</td>
                    <td>{{ r.ntn_num }}</td>
                    <td>{{ r.cnic }}</td>
                    <td class="text-center">
                        {% if r.is_filer %}
                            <span class="badge-filer">Filer</span>
                        {% else %}
                            <span class="badge-nonfiler">Non-Filer</span>
                        {% endif %}
                    </td>
                    <td>{{ r.area }}</td>
                    <td class="text-center">{{ r.invoice_count }}</td>
                    <td class="text-right">{{ r.total_sales|floatformat:2 }}</td>
                    <td class="text-center">{{ r.tax_rate }}%</td>
                    <td class="text-right">{{ r.tax_amount|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="8" class="text-right">GRAND TOTAL</th>
                    <th class="text-center">{{ total_invoice_count }}</th>
                    <th class="text-right">{{ grand_total_sales|floatformat:2 }}</th>
                    <th></th>
                    <th class="text-right">{{ grand_total_tax|floatformat:2 }}</th>
                </tr>
                <tr style="background:#dcfce7;">
                    <th colspan="8" class="text-right" style="color:#16a34a;">
                        Filer ({{ filer_count }} customers)
                    </th>
                    <th></th>
                    <th class="text-right" style="color:#16a34a;">{{ filer_total_sales|floatformat:2 }}</th>
                    <th class="text-center" style="color:#16a34a;">{{ filer_tax_rate }}%</th>
                    <th class="text-right" style="color:#16a34a;">{{ filer_total_tax|floatformat:2 }}</th>
                </tr>
                <tr style="background:#fef2f2;">
                    <th colspan="8" class="text-right" style="color:#ef4444;">
                        Non-Filer ({{ non_filer_count }} customers)
                    </th>
                    <th></th>
                    <th class="text-right" style="color:#ef4444;">{{ non_filer_total_sales|floatformat:2 }}</th>
                    <th class="text-center" style="color:#ef4444;">{{ non_filer_tax_rate }}%</th>
                    <th class="text-right" style="color:#ef4444;">{{ non_filer_total_tax|floatformat:2 }}</th>
                </tr>
            </tfoot>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-search"></i>
        <h5>No Data Found</h5>
        <p>Select a date range and click Search to generate the report.</p>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Build export URLs with current filter params
    function getExportUrl(baseUrl) {
        const form = document.getElementById('report-form');
        const params = new URLSearchParams(new FormData(form));
        return baseUrl + '?' + params.toString();
    }

    document.getElementById('btn-excel').addEventListener('click', function (e) {
        e.preventDefault();
        window.location.href = getExportUrl("{% url 'reports:sales_tax_report_excel' %}");
    });

    document.getElementById('btn-pdf').addEventListener('click', function (e) {
        e.preventDefault();
        window.location.href = getExportUrl("{% url 'reports:sales_tax_report_pdf' %}");
    });

    // Keyboard: Ctrl+P → PDF
    document.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'p') {
            e.preventDefault();
            document.getElementById('btn-pdf').click();
        }
    });
});
</script>
{% endblock %}