{% extends 'base.html' %}
{% block title %}Sells Report - Politory{% endblock %}

{% block content %}

<style>
    .report-page { background:#f4f6f9; min-height:85vh; padding:16px 10px; }
    .report-header { background:linear-gradient(135deg,#1e293b,#334155); color:#fff; border-radius:12px; padding:16px 20px; }
    .report-card { border:0; border-radius:12px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.06); }
    .form-label { font-size:.78rem; font-weight:700; color:#475569; margin-bottom:4px; }
    .form-control,.form-select { min-height:38px; font-size:.85rem; }
    .summary { padding:13px 15px; border-radius:10px; color:#fff; height:100%; }
    .summary small { display:block; font-size:.7rem; opacity:.8; font-weight:600; }
    .summary strong { display:block; font-size:1.15rem; }
    .s1 { background:linear-gradient(135deg,#667eea,#764ba2); }
    .s2 { background:linear-gradient(135deg,#11998e,#38ef7d); }
    .s3 { background:linear-gradient(135deg,#2193b0,#6dd5ed); }
    .s4 { background:linear-gradient(135deg,#f85032,#e73827); }
    .report-table { font-size:.8rem; }
    .report-table th { background:#1e293b; color:#fff; white-space:nowrap; padding:10px 8px; }
    .report-table td { white-space:nowrap; vertical-align:middle; }
    .sell-no { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; padding:4px 9px; border-radius:20px; font-weight:700; }
    .purchase-no { background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe; padding:4px 9px; border-radius:20px; font-weight:700; }
    .total-row td { background:#e2e8f0!important; border-top:2px solid #334155; font-weight:800; }

    @media(max-width:767px) {
        .report-page { padding:8px 3px; }
        .report-header { padding:13px; }
        .report-header h4 { font-size:1.05rem; }
        .report-table { font-size:.7rem; }
        .summary strong { font-size:.95rem; }
        .btn-print { width:100%; }
    }
</style>

<div class="report-page">
<div class="container-fluid">

    <div class="report-header mb-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-1"><i class="bi bi-graph-up-arrow me-2"></i>Sells Report</h4>
            <small class="text-white-50">Sales Invoice Report</small>
        </div>

        <a href="{% url 'sells_report_print' %}?party_name={{ selected_party|urlencode }}&from_date={{ from_date }}&to_date={{ to_date }}"
           target="_blank" class="btn btn-warning fw-bold btn-print">
            <i class="bi bi-printer-fill me-1"></i>Print Report
        </a>
    </div>

    <div class="card report-card mb-3">
        <div class="card-body p-3">
            <form method="GET">
                <div class="row g-2 align-items-end">

                    <div class="col-12 col-md-4">
                        <label class="form-label">Customer / Trader</label>
                        <select name="party_name" class="form-select">
                            <option value="">All Customers / Traders</option>
                            {% for party in parties %}
                            <option value="{{ party.company_name }}" {% if selected_party == party.company_name %}selected{% endif %}>
                                {{ party.company_name }} {% if party.party_type %}[{{ party.party_type }}]{% endif %}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-6 col-md-2">
                        <label class="form-label">From Date</label>
                        <input type="date" name="from_date" value="{{ from_date }}" class="form-control">
                    </div>

                    <div class="col-6 col-md-2">
                        <label class="form-label">To Date</label>
                        <input type="date" name="to_date" value="{{ to_date }}" class="form-control">
                    </div>

                    <div class="col-6 col-md-2 d-grid">
                        <button class="btn btn-primary">
                            <i class="bi bi-funnel-fill me-1"></i>Filter
                        </button>
                    </div>

                    <div class="col-6 col-md-2 d-grid">
                        <a href="{% url 'sells_report' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                        </a>
                    </div>

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

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="summary s1">
                <small>TOTAL WEIGHT</small>
                <strong>{{ total_weight|floatformat:2 }} kg</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary s2">
                <small>TOTAL AMOUNT</small>
                <strong>Rs. {{ total_amount|floatformat:2 }}</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary s3">
                <small>RECEIVED AMOUNT</small>
                <strong>Rs. {{ total_received|floatformat:2 }}</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary s4">
                <small>REMAINING AMOUNT</small>
                <strong>Rs. {{ total_remaining|floatformat:2 }}</strong>
            </div>
        </div>
    </div>

    <div class="card report-card">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0"><i class="bi bi-table me-1"></i>Sells Records</h6>
            <span class="badge bg-primary">{{ records|length }} Records</span>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped report-table mb-0">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Sell #</th>
                            <th>Purchase #</th>
                            <th>Date</th>
                            <th>Customer / Trader</th>
                            <th>Vehicle</th>
                            <th>Weight</th>
                            <th>Rate</th>
                            <th>Amount</th>
                            <th>Received</th>
                            <th>Remaining</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for row in records %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td><span class="sell-no">{{ row.sells_no|default:"-" }}</span></td>
                            <td><span class="purchase-no">{{ row.purchase_number|default:"-" }}</span></td>
                            <td>{{ row.entry_date|date:"d-m-Y" }}</td>
                            <td class="fw-bold">{{ row.customer_name|default:"-" }}</td>
                            <td>{{ row.vehicle_no|default:"-" }}</td>
                            <td>{{ row.weight|default:"0" }} kg</td>
                            <td>Rs. {{ row.rate|default:"0" }}</td>
                            <td class="fw-bold">Rs. {{ row.amount|default:"0" }}</td>
                            <td class="fw-bold text-success">Rs. {{ row.received_amount|default:"0" }}</td>
                            <td class="fw-bold text-danger">Rs. {{ row.remaining_amount|default:"0" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="11" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                No sells records found for selected filters.
                            </td>
                        </tr>
                        {% endfor %}

                        {% if records %}
                        <tr class="total-row">
                            <td colspan="6" class="text-end">GRAND TOTAL</td>
                            <td>{{ total_weight|floatformat:2 }} kg</td>
                            <td></td>
                            <td>Rs. {{ total_amount|floatformat:2 }}</td>
                            <td class="text-success">Rs. {{ total_received|floatformat:2 }}</td>
                            <td class="text-danger">Rs. {{ total_remaining|floatformat:2 }}</td>
                        </tr>
                        {% endif %}
                    </tbody>

                </table>
            </div>
        </div>
    </div>

</div>
</div>

{% endblock %}