{% extends 'base.html' %}

{% block title %}Purchase Report - Politory{% endblock %}

{% block content %}


<style>

    .report-wrapper {
        background: #f4f6f9;
        min-height: 85vh;
        padding: 18px 10px;
    }

    .report-header {
        background:
            linear-gradient(
                135deg,
                #1e293b,
                #334155
            );

        color: white;
        border-radius: 12px;
        padding: 18px 20px;
        box-shadow:
            0 5px 15px rgba(0,0,0,.1);
    }

    .filter-card {
        border: 0;
        border-radius: 12px;
        box-shadow:
            0 4px 15px rgba(0,0,0,.06);
    }

    .report-card {
        border: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow:
            0 4px 15px 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-card {
        border-radius: 10px;
        padding: 13px 15px;
        height: 100%;
        color: white;
    }

    .summary-title {
        font-size: .72rem;
        opacity: .8;
    }

    .summary-value {
        font-size: 1.2rem;
        font-weight: 800;
    }

    .summary-weight {
        background:
            linear-gradient(
                135deg,
                #667eea,
                #764ba2
            );
    }

    .summary-amount {
        background:
            linear-gradient(
                135deg,
                #11998e,
                #38ef7d
            );
    }

    .summary-paid {
        background:
            linear-gradient(
                135deg,
                #2193b0,
                #6dd5ed
            );
    }

    .summary-remaining {
        background:
            linear-gradient(
                135deg,
                #f85032,
                #e73827
            );
    }

    .report-table {
        font-size: .82rem;
    }

    .report-table th {
        white-space: nowrap;
        background: #1e293b;
        color: white;
        vertical-align: middle;
        padding: 10px 8px;
    }

    .report-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    .purchase-number {
        display: inline-block;
        background: #eef2ff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        border-radius: 20px;
        padding: 4px 9px;
        font-weight: 700;
    }

    .money {
        font-weight: 700;
    }

    .total-row td {
        background: #e2e8f0 !important;
        font-weight: 800;
        border-top: 2px solid #334155;
    }

    @media(max-width: 767px) {

        .report-wrapper {
            padding: 8px 3px;
        }

        .report-header {
            padding: 14px;
        }

        .report-header h4 {
            font-size: 1.1rem;
        }

        .report-table {
            font-size: .72rem;
        }

        .summary-value {
            font-size: 1rem;
        }

    }

</style>



<div class="report-wrapper">

    <div class="container-fluid">


        <!-- ============================================= -->
        <!-- HEADER -->
        <!-- ============================================= -->

        <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-file-earmark-bar-graph me-2"
                    ></i>

                    Purchase Report

                </h4>

                <small class="text-white-50">

                    Purchase Receiving View Report

                </small>

            </div>


            <!-- PRINT -->

            <a
                href="{% url 'purchase_report_print' %}?party_name={{ selected_party|urlencode }}&from_date={{ from_date }}&to_date={{ to_date }}"
                target="_blank"
                class="btn btn-warning fw-bold"
            >

                <i class="bi bi-printer-fill me-1"></i>

                Print Report

            </a>

        </div>



        <!-- ============================================= -->
        <!-- FILTER -->
        <!-- ============================================= -->

        <div class="card filter-card mb-3">

            <div class="card-body p-3">


                <form
                    method="GET"
                    action="{% url 'purchase_report' %}"
                >

                    <div class="row g-2 align-items-end">


                        <!-- PARTY -->

                        <div class="col-12 col-md-4">

                            <label class="form-label">

                                Vendor / Trader

                            </label>


                            <select
                                name="party_name"
                                class="form-select"
                            >

                                <option value="">

                                    All Vendors / 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>



                        <!-- FROM DATE -->

                        <div class="col-6 col-md-2">

                            <label class="form-label">

                                From Date

                            </label>

                            <input
                                type="date"
                                name="from_date"
                                class="form-control"
                                value="{{ from_date }}"
                            >

                        </div>



                        <!-- TO DATE -->

                        <div class="col-6 col-md-2">

                            <label class="form-label">

                                To Date

                            </label>

                            <input
                                type="date"
                                name="to_date"
                                class="form-control"
                                value="{{ to_date }}"
                            >

                        </div>



                        <!-- FILTER -->

                        <div class="col-6 col-md-2 d-grid">

                            <button
                                type="submit"
                                class="btn btn-primary"
                            >

                                <i
                                    class="bi bi-funnel-fill me-1"
                                ></i>

                                Filter

                            </button>

                        </div>



                        <!-- RESET -->

                        <div class="col-6 col-md-2 d-grid">

                            <a
                                href="{% url 'purchase_report' %}"
                                class="btn btn-outline-secondary"
                            >

                                <i
                                    class="bi bi-arrow-counterclockwise me-1"
                                ></i>

                                Reset

                            </a>

                        </div>


                    </div>

                </form>


            </div>

        </div>



        <!-- ============================================= -->
        <!-- SUMMARY -->
        <!-- ============================================= -->

        <div class="row g-2 mb-3">


            <div class="col-6 col-lg-3">

                <div class="summary-card summary-weight">

                    <div class="summary-title">

                        TOTAL WEIGHT

                    </div>

                    <div class="summary-value">

                        {{ total_weight|floatformat:0 }} kg

                    </div>

                </div>

            </div>



            <div class="col-6 col-lg-3">

                <div class="summary-card summary-amount">

                    <div class="summary-title">

                        TOTAL AMOUNT

                    </div>

                    <div class="summary-value">

                        Rs. {{ total_amount|floatformat:0 }}

                    </div>

                </div>

            </div>



            <div class="col-6 col-lg-3">

                <div class="summary-card summary-paid">

                    <div class="summary-title">

                        PAID AMOUNT

                    </div>

                    <div class="summary-value">

                        Rs. {{ total_paid|floatformat:0 }}

                    </div>

                </div>

            </div>



            <div class="col-6 col-lg-3">

                <div class="summary-card summary-remaining">

                    <div class="summary-title">

                        REMAINING AMOUNT

                    </div>

                    <div class="summary-value">

                        Rs. {{ total_remaining|floatformat:0 }}

                    </div>

                </div>

            </div>


        </div>



        <!-- ============================================= -->
        <!-- TABLE -->
        <!-- ============================================= -->

        <div class="card report-card">


            <div
                class="card-header bg-white d-flex justify-content-between align-items-center py-3"
            >

                <h6 class="mb-0 fw-bold">

                    <i
                        class="bi bi-table me-1"
                    ></i>

                    Purchase 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>Purchase #</th>

                                <th>Date</th>

                                <th>Vendor / Trader</th>

                                <th>Vehicle</th>

                                <th>Weight</th>

                                <th>Vendor Rate</th>

                                <th>Market Rate</th>

                                <th>Amount</th>

                                <th>Paid</th>

                                <th>Remaining</th>


                            </tr>

                        </thead>



                        <tbody>


                            {% for row in records %}

                                <tr>


                                    <td>

                                        {{ forloop.counter }}

                                    </td>


                                    <td>

                                        <span
                                            class="purchase-number"
                                        >

                                            {{ row.purchase_number|default:"-" }}

                                        </span>

                                    </td>


                                    <td>

                                        {{ row.date|date:"d-m-Y" }}

                                    </td>


                                    <td class="fw-bold">

                                        {{ row.vendor_name|default:"-" }}

                                    </td>


                                    <td>

                                        {{ row.vehicle_number|default:"-" }}

                                    </td>


                                    <td>

                                        {{ row.weight|default:"0" }} kg

                                    </td>


                                    <td>

                                        Rs. {{ row.vendor_rate|default:"0" }}

                                    </td>


                                    <td>

                                        Rs. {{ row.market_rate|default:"0" }}

                                    </td>


                                    <td class="money">

                                        Rs. {{ row.amount|default:"0" }}

                                    </td>


                                    <td class="money text-success">

                                        Rs. {{ row.payed_amount|default:"0" }}

                                    </td>


                                    <td class="money text-danger">

                                        Rs. {{ row.remaining_amount|default:"0" }}

                                    </td>
                                </tr>


                            {% empty %}


                                <tr>

                                    <td
                                        colspan="12"
                                        class="text-center py-5 text-muted"
                                    >

                                        <i
                                            class="bi bi-inbox fs-2 d-block mb-2"
                                        ></i>

                                        No purchase records found
                                        for selected filters.

                                    </td>

                                </tr>


                            {% endfor %}



                            {% if records %}

                                <!-- TOTAL -->

                                <tr class="total-row">

                                    <td></td>

                                    <td></td>

                                    <td></td>

                                    <td>

                                        GRAND TOTAL

                                    </td>

                                    <td></td>


                                    <td>

                                        {{ total_weight|floatformat:0 }} kg

                                    </td>


                                    <td></td>

                                    <td></td>


                                    <td>

                                        Rs.
                                        {{ total_amount|floatformat:0 }}

                                    </td>


                                    <td class="text-success">

                                        Rs.
                                        {{ total_paid|floatformat:0 }}

                                    </td>


                                    <td class="text-danger">

                                        Rs.
                                        {{ total_remaining|floatformat:0 }}

                                    </td>


                                    <td></td>

                                </tr>

                            {% endif %}


                        </tbody>


                    </table>


                </div>


            </div>


        </div>


    </div>

</div>


{% endblock %}