{% extends 'base.html' %}

{% block title %}Payment - Politory{% endblock %}

{% block content %}

<!-- Bootstrap 5 -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
>

<!-- FontAwesome -->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
>

<style>
    .payment-wrapper {
        background-color: #f4f6f9;
        padding: 20px 0;
        min-height: 80vh;
    }

    .navbar-custom {
        background-color: #1e293b;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
    }

    .payment-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .form-label {
        font-weight: 600;
        color: #4b5563;
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .table-responsive {
        max-height: 500px;
    }

    .unpaid-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        white-space: nowrap;
    }

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

    .purchase-selected-box {
        display: none;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 15px;
    }

    .amount-summary {
        font-size: 0.82rem;
        color: #64748b;
    }

    .highlight-row {
        animation: highlightPaymentCard 2s ease;
    }

    @keyframes highlightPaymentCard {
        0% {
            background-color: #fff3cd;
            transform: scale(1.005);
        }

        100% {
            background-color: #ffffff;
            transform: scale(1);
        }
    }

    .modal-content {
        border-radius: 14px;
        overflow: hidden;
    }

    .remaining-badge {
        min-width: 90px;
        display: inline-block;
    }

    @media (max-width: 767px) {
        .payment-wrapper {
            padding-top: 10px;
        }

        .navbar-custom {
            border-radius: 8px;
        }

        .navbar-custom .navbar-brand span {
            font-size: 0.95rem;
        }

        .navbar-custom .btn {
            font-size: 0.72rem;
            padding: 7px 9px !important;
        }

        .unpaid-table {
            font-size: 0.78rem;
        }
    }
</style>


<div class="payment-wrapper">

    <div class="container-fluid px-3">


        <!-- ========================= -->
        <!-- DJANGO MESSAGES -->
        <!-- ========================= -->

        {% if messages %}

            {% for message in messages %}

                <div
                    class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show shadow-sm"
                    role="alert"
                >

                    {{ message }}

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="alert"
                        aria-label="Close"
                    ></button>

                </div>

            {% endfor %}

        {% endif %}



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

        <nav class="navbar navbar-dark navbar-custom p-3 mb-4">

            <div
                class="container-fluid d-flex justify-content-between align-items-center flex-nowrap px-0"
            >

                <a
                    class="navbar-brand fw-bold d-flex align-items-center mb-0"
                    href="#"
                >

                    <i class="fa-solid fa-wallet text-warning me-2 fs-4"></i>

                    <span>Payment Gate</span>

                </a>


                <!-- UNPAID BUTTON -->

                <button
                    type="button"
                    class="btn btn-warning fw-bold position-relative shadow-sm d-flex align-items-center"
                    data-bs-toggle="modal"
                    data-bs-target="#unpaidPurchasesModal"
                >

                    <i class="fa-solid fa-bell text-danger me-2"></i>

                    <span>Unpaid Records</span>


                    <span
                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-white"
                    >

                        {{ unpaid_purchases|length }}

                    </span>

                </button>

            </div>

        </nav>



        <!-- ========================= -->
        <!-- PAYMENT CARD -->
        <!-- ========================= -->

        <div
            class="card payment-card p-3 p-md-4 mb-4"
            id="paymentCard"
        >


            <!-- CARD HEADER -->

            <div
                class="border-bottom pb-2 mb-3 d-flex justify-content-between align-items-center flex-wrap gap-2"
            >

                <h5 class="fw-bold text-dark mb-0">

                    <i
                        class="fa-solid fa-circle-dollar-to-slot text-primary me-2"
                    ></i>

                    Record Purchase Payment

                </h5>


                <span class="badge bg-success py-2 px-3">

                    <i class="fa-solid fa-circle-check me-1"></i>

                    Active Session

                </span>

            </div>



            <!-- ========================= -->
            <!-- SELECTED PURCHASE INFO -->
            <!-- ========================= -->

            <div
                class="purchase-selected-box"
                id="selectedPurchaseBox"
            >

                <div
                    class="d-flex justify-content-between align-items-center flex-wrap gap-2"
                >

                    <div>

                        <span class="text-muted small">
                            Selected Purchase
                        </span>

                        <div class="fw-bold text-primary">

                            <i class="fa-solid fa-receipt me-1"></i>

                            <span id="selectedPurchaseNumber"></span>

                        </div>

                    </div>


                    <div class="text-end">

                        <div class="amount-summary">

                            Total:
                            <strong id="selectedTotal">0</strong>

                            &nbsp; | &nbsp;

                            Paid:
                            <strong id="selectedPaid">0</strong>

                        </div>


                        <div>

                            Remaining:

                            <span
                                class="badge bg-danger"
                                id="selectedRemaining"
                            >
                                0
                            </span>

                        </div>

                    </div>

                </div>

            </div>



            <!-- ========================= -->
            <!-- PAYMENT FORM -->
            <!-- ========================= -->

            <form
                action="{% url 'payment' %}"
                method="POST"
                id="paymentForm"
            >

                {% csrf_token %}


                <!-- PURCHASE NUMBER -->

                <input
                    type="hidden"
                    name="purchase_number"
                    id="hidden_purchase_number"
                    value=""
                >



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


                    <!-- PARTY -->

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

                        <label
                            for="party_select"
                            class="form-label"
                        >

                            Party / Vendor

                        </label>


                        <select
                            class="form-select form-select-sm"
                            id="party_select"
                            name="party_name"
                            required
                        >

                            <option
                                value=""
                                selected
                                disabled
                            >
                                Choose Party...
                            </option>


                            {% for party in parties %}

                                <option
                                    value="{{ party.company_name|default:party.owner_name }}"
                                >

                                    {{ party.company_name|default:party.owner_name }}

                                    {% if party.party_type %}
                                        [{{ party.party_type }}]
                                    {% endif %}

                                </option>

                            {% endfor %}

                        </select>

                    </div>



                    <!-- DATE -->

                    <div class="col-12 col-sm-6 col-lg-2">

                        <label
                            for="payment_date"
                            class="form-label"
                        >
                            Payment Date
                        </label>


                        <input
                            type="date"
                            class="form-control form-control-sm"
                            id="payment_date"
                            name="payment_date"
                            required
                        >

                    </div>



                    <!-- AMOUNT -->

                    <div class="col-12 col-sm-6 col-lg-2">

                        <label
                            for="paying_amount"
                            class="form-label"
                        >
                            Payment Amount
                        </label>


                        <div class="input-group input-group-sm">

                            <span class="input-group-text bg-light">

                                <i class="fa-solid fa-money-bill-wave"></i>

                            </span>


                            <input
                                type="number"
                                class="form-control"
                                id="paying_amount"
                                name="paying_amount"
                                placeholder="0"
                                min="1"
                                step="1"
                                required
                            >

                        </div>


                        <div
                            class="text-danger small mt-1 d-none"
                            id="amountError"
                        >
                            Amount cannot exceed remaining amount.
                        </div>

                    </div>



                    <!-- PAYMENT MODE -->

                    <div class="col-12 col-sm-6 col-lg-2">

                        <label
                            for="payment_mode"
                            class="form-label"
                        >
                            Payment Mode
                        </label>


                        <select
                            class="form-select form-select-sm"
                            id="payment_mode"
                            name="payment_mode"
                            required
                        >

                            <option value="Cash">
                                Cash
                            </option>

                            <option value="Bank Transfer">
                                Bank Transfer
                            </option>

                            <option value="Cheque">
                                Cheque
                            </option>

                            <option value="Online">
                                Online Wallet
                            </option>

                        </select>

                    </div>



                    <!-- REMARKS -->

                    <div class="col-12 col-lg">

                        <label
                            for="remarks"
                            class="form-label"
                        >
                            Remarks
                        </label>


                        <input
                            type="text"
                            class="form-control form-control-sm"
                            id="remarks"
                            name="remarks"
                            maxlength="50"
                            placeholder="Payment notes..."
                        >

                    </div>



                    <!-- SAVE -->

                    <div class="col-12 col-lg-auto d-grid">

                        <button
                            type="submit"
                            class="btn btn-primary btn-sm px-4 py-2 fw-bold"
                            id="savePaymentButton"
                        >

                            <i class="fa-solid fa-paper-plane me-1"></i>

                            Save Payment

                        </button>

                    </div>


                </div>

            </form>

        </div>


    </div>

</div>



<!-- ================================================= -->
<!-- UNPAID PURCHASE MODAL -->
<!-- ================================================= -->

<div
    class="modal fade"
    id="unpaidPurchasesModal"
    tabindex="-1"
    aria-labelledby="unpaidPurchasesModalLabel"
    aria-hidden="true"
>

    <div
        class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"
    >

        <div class="modal-content shadow-lg border-0">


            <!-- MODAL HEADER -->

            <div class="modal-header bg-dark text-white p-3">

                <div>

                    <h5
                        class="modal-title fw-bold mb-0"
                        id="unpaidPurchasesModalLabel"
                    >

                        <i
                            class="fa-solid fa-receipt text-warning me-2"
                        ></i>

                        Pending / Unpaid Purchases

                    </h5>


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

                        Only purchases with remaining balance are shown.

                    </small>

                </div>


                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>

            </div>



            <!-- MODAL BODY -->

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


                {% if unpaid_purchases %}


                    <!-- SEARCH -->

                    <div class="row mb-3">

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

                            <div class="input-group input-group-sm">

                                <span class="input-group-text">

                                    <i class="fa-solid fa-magnifying-glass"></i>

                                </span>


                                <input
                                    type="text"
                                    class="form-control"
                                    id="purchaseSearch"
                                    placeholder="Search purchase, vendor or vehicle..."
                                >

                            </div>

                        </div>

                    </div>



                    <div class="table-responsive">

                        <table
                            class="table table-bordered table-striped table-hover unpaid-table text-center mb-0"
                            id="unpaidPurchaseTable"
                        >

                            <thead class="table-dark">

                                <tr>

                                    <th>Purchase #</th>

                                    <th>Vendor</th>

                                    <th>Vehicle #</th>

                                    <th>Total Amount</th>

                                    <th>Paid Amount</th>

                                    <th>Remaining</th>

                                    <th>Status</th>

                                    <th>Action</th>

                                </tr>

                            </thead>


                            <tbody>


                                {% for item in unpaid_purchases %}

                                    <tr>


                                        <!-- PURCHASE NUMBER -->

                                        <td>

                                            <span
                                                class="badge bg-light text-dark border p-2 fw-bold"
                                            >

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

                                            </span>

                                        </td>



                                        <!-- VENDOR -->

                                        <td
                                            class="fw-semibold text-start"
                                        >

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

                                        </td>



                                        <!-- VEHICLE -->

                                        <td>

                                            <span
                                                class="badge bg-secondary"
                                            >

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

                                            </span>

                                        </td>



                                        <!-- TOTAL AMOUNT -->

                                        <td class="fw-bold">

                                            {{ item.amount|default:"0" }}

                                        </td>



                                        <!-- PAID AMOUNT -->

                                        <td>

                                            <span
                                                class="badge bg-info text-dark"
                                            >

                                                {{ item.calculated_paid|default:"0" }}

                                            </span>

                                        </td>



                                        <!-- REMAINING -->

                                        <td>

                                            <span
                                                class="badge bg-danger remaining-badge"
                                            >

                                                {{ item.remaining_amount|default:"0" }}

                                            </span>

                                        </td>



                                        <!-- STATUS -->

                                        <td>

                                            {% if item.status == 'Partial' %}

                                                <span
                                                    class="badge bg-primary"
                                                >
                                                    Partial
                                                </span>

                                            {% else %}

                                                <span
                                                    class="badge bg-warning text-dark"
                                                >

                                                    {{ item.status|default:"Pending" }}

                                                </span>

                                            {% endif %}

                                        </td>



                                        <!-- PROCEED -->

                                        <td>

                                            <button
                                                type="button"
                                                class="btn btn-success btn-sm proceed-btn fw-bold"

                                                data-purchase="{{ item.purchase_number|default:'' }}"
                                                data-vendor="{{ item.vendor_name|default:'' }}"
                                                data-total="{{ item.amount|default:'0' }}"
                                                data-paid="{{ item.calculated_paid|default:'0' }}"
                                                data-remaining="{{ item.remaining_amount|default:'0' }}"

                                                data-bs-dismiss="modal"
                                            >

                                                <i
                                                    class="fa-solid fa-arrow-right me-1"
                                                ></i>

                                                Proceed

                                            </button>

                                        </td>


                                    </tr>

                                {% endfor %}


                                <!-- SEARCH EMPTY MESSAGE -->

                                <tr
                                    id="noSearchResults"
                                    style="display:none;"
                                >

                                    <td
                                        colspan="8"
                                        class="py-4 text-muted"
                                    >

                                        <i
                                            class="fa-solid fa-magnifying-glass me-2"
                                        ></i>

                                        No matching purchase found.

                                    </td>

                                </tr>


                            </tbody>

                        </table>

                    </div>


                {% else %}


                    <!-- NO UNPAID RECORDS -->

                    <div
                        class="alert alert-success border-0 shadow-sm d-flex align-items-center p-4 mb-0"
                    >

                        <i
                            class="fa-solid fa-circle-check fs-2 text-success me-3"
                        ></i>


                        <div>

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

                                All Purchases Paid

                            </h6>

                            <p class="mb-0 small">

                                There are currently no purchases with a remaining balance.

                            </p>

                        </div>

                    </div>


                {% endif %}


            </div>



            <!-- MODAL FOOTER -->

            <div class="modal-footer bg-light">

                <span class="me-auto small text-muted">

                    <i class="fa-solid fa-circle-info me-1"></i>

                    Select Proceed to record payment against a purchase.

                </span>


                <button
                    type="button"
                    class="btn btn-secondary btn-sm px-4"
                    data-bs-dismiss="modal"
                >

                    Close

                </button>

            </div>


        </div>

    </div>

</div>



<!-- Bootstrap JS -->
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
></script>



<script>
document.addEventListener('DOMContentLoaded', function () {

    // =====================================================
    // ELEMENTS
    // =====================================================

    const paymentForm =
        document.getElementById('paymentForm');

    const purchaseNumberField =
        document.getElementById('hidden_purchase_number');

    const partySelect =
        document.getElementById('party_select');

    const paymentDate =
        document.getElementById('payment_date');

    const amountInput =
        document.getElementById('paying_amount');

    const remarksInput =
        document.getElementById('remarks');

    const amountError =
        document.getElementById('amountError');

    const saveButton =
        document.getElementById('savePaymentButton');

    const paymentCard =
        document.getElementById('paymentCard');


    // =====================================================
    // CURRENT DATE
    // Local date use ki hai taake timezone issue na aaye
    // =====================================================

    const now = new Date();

    const today =
        now.getFullYear()
        + '-'
        + String(now.getMonth() + 1).padStart(2, '0')
        + '-'
        + String(now.getDate()).padStart(2, '0');

    if (paymentDate && !paymentDate.value) {
        paymentDate.value = today;
    }


    // =====================================================
    // PROCEED BUTTON
    // =====================================================

    const proceedButtons =
        document.querySelectorAll('.proceed-btn');


    proceedButtons.forEach(function (button) {

        button.addEventListener('click', function () {

            const purchaseNumber =
                this.dataset.purchase || '';

            const vendorName =
                this.dataset.vendor || '';

            const totalAmount =
                this.dataset.total || '0';

            const paidAmount =
                this.dataset.paid || '0';

            const remainingAmount =
                this.dataset.remaining || '0';


            // ---------------------------------------------
            // PURCHASE NUMBER AUTO FILL
            // ---------------------------------------------

            purchaseNumberField.value =
                purchaseNumber;


            // ---------------------------------------------
            // AMOUNT = REMAINING AMOUNT
            // ---------------------------------------------

            amountInput.value =
                remainingAmount;

            amountInput.max =
                remainingAmount;


            // ---------------------------------------------
            // DATE
            // ---------------------------------------------

            paymentDate.value =
                today;


            // ---------------------------------------------
            // REMARKS
            // PurchasePayments remarks max_length = 50
            // ---------------------------------------------

            let remarks = ""


            remarksInput.value =
                remarks.substring(0, 50);


            // ---------------------------------------------
            // SELECT PURCHASE DISPLAY
            // ---------------------------------------------

            const selectedBox =
                document.getElementById(
                    'selectedPurchaseBox'
                );

            document.getElementById(
                'selectedPurchaseNumber'
            ).textContent = purchaseNumber;

            document.getElementById(
                'selectedTotal'
            ).textContent = totalAmount;

            document.getElementById(
                'selectedPaid'
            ).textContent = paidAmount;

            document.getElementById(
                'selectedRemaining'
            ).textContent = remainingAmount;

            selectedBox.style.display =
                'block';


            // ---------------------------------------------
            // PARTY / VENDOR AUTO SELECT
            // ---------------------------------------------

            let partyFound = false;

            const vendorNormalized =
                vendorName.trim().toLowerCase();


            for (
                let i = 0;
                i < partySelect.options.length;
                i++
            ) {

                const optionValue =
                    partySelect.options[i]
                        .value
                        .trim()
                        .toLowerCase();


                if (
                    vendorNormalized !== ''
                    &&
                    optionValue === vendorNormalized
                ) {

                    partySelect.selectedIndex = i;

                    partyFound = true;

                    break;
                }
            }


            // Vendor Parties table mein na mile
            // to temporary dropdown option bana do

            if (!partyFound && vendorName) {

                const temporaryOption =
                    new Option(
                        vendorName + ' [Purchase]',
                        vendorName,
                        true,
                        true
                    );

                temporaryOption.dataset.temporary = 'true';

                partySelect.add(
                    temporaryOption
                );
            }


            // ---------------------------------------------
            // REMOVE VALIDATION ERROR
            // ---------------------------------------------

            amountError.classList.add(
                'd-none'
            );

            amountInput.classList.remove(
                'is-invalid'
            );


            // ---------------------------------------------
            // SCROLL TO FORM
            // ---------------------------------------------

            setTimeout(function () {

                paymentCard.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });

                paymentCard.classList.add(
                    'highlight-row'
                );

            }, 300);


            setTimeout(function () {

                paymentCard.classList.remove(
                    'highlight-row'
                );

            }, 2300);


            // ---------------------------------------------
            // FOCUS AMOUNT
            // ---------------------------------------------

            setTimeout(function () {

                amountInput.focus();

                amountInput.select();

            }, 650);

        });

    });



    // =====================================================
    // CLIENT SIDE AMOUNT VALIDATION
    // Backend validation bhi required hai.
    // =====================================================

    function validatePaymentAmount() {

        const amount =
            parseFloat(amountInput.value || 0);

        const maximum =
            parseFloat(amountInput.max || 0);


        if (amount <= 0) {

            amountInput.classList.add(
                'is-invalid'
            );

            amountError.textContent =
                'Payment amount must be greater than 0.';

            amountError.classList.remove(
                'd-none'
            );

            return false;
        }


        if (
            maximum > 0
            &&
            amount > maximum
        ) {

            amountInput.classList.add(
                'is-invalid'
            );

            amountError.textContent =
                'Maximum allowed payment is '
                + maximum
                + '.';

            amountError.classList.remove(
                'd-none'
            );

            return false;
        }


        amountInput.classList.remove(
            'is-invalid'
        );

        amountError.classList.add(
            'd-none'
        );

        return true;
    }


    amountInput.addEventListener(
        'input',
        validatePaymentAmount
    );



    // =====================================================
    // FORM SUBMIT VALIDATION
    // =====================================================

    paymentForm.addEventListener(
        'submit',
        function (event) {

            // Purchase must be selected from modal

            if (!purchaseNumberField.value.trim()) {

                event.preventDefault();

                alert(
                    'Please select a purchase from Unpaid Records first.'
                );

                return;
            }


            // Amount validation

            if (!validatePaymentAmount()) {

                event.preventDefault();

                amountInput.focus();

                return;
            }


            // Prevent double click

            saveButton.disabled = true;

            saveButton.innerHTML =
                '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';

        }
    );



    // =====================================================
    // MODAL SEARCH
    // =====================================================

    const searchInput =
        document.getElementById(
            'purchaseSearch'
        );


    if (searchInput) {

        searchInput.addEventListener(
            'input',
            function () {

                const searchValue =
                    this.value
                        .trim()
                        .toLowerCase();


                const rows =
                    document.querySelectorAll(
                        '#unpaidPurchaseTable tbody tr:not(#noSearchResults)'
                    );


                let visibleRows = 0;


                rows.forEach(function (row) {

                    const rowText =
                        row.textContent
                            .toLowerCase();


                    if (
                        rowText.includes(
                            searchValue
                        )
                    ) {

                        row.style.display = '';

                        visibleRows++;

                    } else {

                        row.style.display =
                            'none';

                    }

                });


                const noResults =
                    document.getElementById(
                        'noSearchResults'
                    );


                if (noResults) {

                    noResults.style.display =
                        visibleRows === 0
                        ? ''
                        : 'none';

                }

            }
        );

    }

});
</script>

{% endblock %}