{% extends 'scm/base.html' %}

{% block content %}

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h3>Edit Purchase Request</h3>

        <a href="{% url 'pr' %}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i>
            Back
        </a>

    </div>


    <div class="card petrogl-form-container">

        <div class="card-body">

            <form method="POST">

                {% csrf_token %}


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

                <div class="row g-3">

                    <!-- PR NO -->

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

                        <label class="form-label">
                            PR No
                        </label>

                        <input type="text" name="pr_no" class="form-control" value="{{ pr.pr_no }}" required>

                    </div>


                    <!-- PR DATE -->

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

                        <label class="form-label">
                            PR Date
                        </label>

                        <input type="date" name="pr_date" class="form-control" value="{{ pr.pr_date|date:'Y-m-d' }}"
                            required>

                    </div>


                    <!-- PR TITLE -->

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

                        <label class="form-label">
                            PR Title
                        </label>

                        <input type="text" name="pr_title" class="form-control" value="{{ pr.pr_title }}" required>

                    </div>


                    <!-- REQUESTER -->

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

                        <label class="form-label">
                            Requester
                        </label>

                        <input type="text" name="requester" class="form-control" value="{{ pr.requester }}" required>

                    </div>


                    <!-- DEPARTMENT -->

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

                        <label class="form-label">
                            Department
                        </label>

                        <select name="department" class="form-select" required>

                            <option value="">
                                Select Department
                            </option>

                            {% for item in department_items %}

                            <option value="{{ item.dept_name }}" {% if item.dept_name == pr.department %}selected{% endif %}>
                                {{ item.dept_name }}
                            </option>

                            {% endfor %}

                        </select>

                    </div>


                    <!-- COST CENTER -->

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

                        <label class="form-label">
                            Cost Center
                        </label>

                        <select name="cost_center" class="form-select" required>

                            <option value="">
                                Select Cost Center
                            </option>

                            {% for item in cc_items %}

                            <option value="{{ item.cc_no }}" {% if item.cc_no == pr.cost_center %} selected {% endif %}>
                                {{ item.cc_no }} - {{ item.cc_name }}
                            </option>

                            {% endfor %}

                        </select>

                    </div>


                    <!-- SOURCE OF FUND -->

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

                        <label class="form-label">
                            Source of Fund
                        </label>

                        <select name="source_of_fund" class="form-select" required>

                            <option value="WP&B" {% if pr.source_of_fund == "WP&B" %} selected {% endif %}>
                                WP&B
                            </option>

                            <option value="AFE" {% if pr.source_of_fund == "AFE" %} selected {% endif %}>
                                AFE
                            </option>

                        </select>

                    </div>


                    <!-- CURRENCY -->

                    <div class="col-md-4">
                        <label class="form-label">Currency</label>
                        <select name="currency" class="form-select" required>
                            <option value="USD" {% if pr.currency|default:"USD" == "USD" %}selected{% endif %}>USD</option>
                            <option value="IDR" {% if pr.currency == "IDR" %}selected{% endif %}>IDR</option>
                        </select>
                    </div>

                    

                    <!-- PRIORITY -->

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

                        <label class="form-label">
                            Priority
                        </label>

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

                            <option value="Normal" {% if pr.priority == "Normal" %} selected {% endif %}>
                                Normal
                            </option>

                            <option value="Urgent" {% if pr.priority == "Urgent" %} selected {% endif %}>
                                Urgent
                            </option>

                            <option value="High" {% if pr.priority == "High" %} selected {% endif %}>
                                High
                            </option>

                        </select>

                    </div>

                    <!-- REQUIRED DATE -->

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

                        <label class="form-label">
                            Required Date
                        </label>

                        <input type="date" name="required_date" class="form-control"
                            value="{{ pr.required_date|date:'Y-m-d' }}" required readonly>

                    </div>

                    <!-- PURPOSE -->

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

                        <label class="form-label">
                            Purpose
                        </label>

                        <textarea name="purpose" class="form-control" rows="3">{{ pr.purpose }}</textarea>

                    </div>


                    <!-- REMARKS -->

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

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

                        <textarea name="remarks" class="form-control" rows="3">{{ pr.remarks }}</textarea>

                    </div>

                </div>


                <!-- =========================================
                     PR ITEMS
                     ========================================= -->

                <div class="mt-4">

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

                        <h5 class="mb-0">
                            PR Items
                        </h5>

                        <button type="button" class="btn btn-secondary btn-sm" onclick="addItem()">
                            <i class="bi bi-plus-lg"></i>
                            Add Item
                        </button>

                    </div>


                    <!-- KIMAP OPTIONS -->

                    <select id="kimapOptionsTemplate" style="display:none;">

                        <option value="">
                            Select KIMAP
                        </option>

                        {% for item in kimap_items %}

                        <option value="{{ item.id }}" data-kimap="{{ item.kimap|escape }}"
                            data-name="{{ item.name|escape }}" data-acct-no="{{ item.acct_no|escape }}"
                            data-uom="{{ item.uom|escape }}" data-location="{{ item.location|escape }}"
                            data-priceusd="{{ item.priceusd }}">
                            {{ item.kimap }} - {{ item.name }}
                            {% if item.location %}
                            ({{ item.location }})
                            {% endif %}
                        </option>

                        {% endfor %}

                    </select>


                    <div class="table-responsive">

                        <table class="table align-middle" id="itemsTable">

                            <thead>

                                <tr>

                                    <th>KIMAP</th>

                                    <th>Description</th>

                                    <th>Account No</th>

                                    <th>Qty</th>

                                    <th>UOM</th>

                                    <th>Est. Unit Price</th>

                                    <th>Est. Amount</th>

                                    <th>Available Budget</th>

                                    <th>Budget Status</th>
<th>Location</th>

                                    <th>Remarks</th>

                                    <th></th>

                                </tr>

                            </thead>


                            <tbody id="itemsBody">

                                {% for detail in details %}

                                <tr id="item_row_{{ forloop.counter0 }}">

                                    <!-- KIMAP -->

                                    <td>

                                        <select name="kimap_id_{{ forloop.counter0 }}"
                                            class="form-select form-select-sm"
                                            data-existing-kimap="{{ detail.kimap|escape }}"
                                            onchange="loadKimap({{ forloop.counter0 }})" required>

                                            <option value="">
                                                Select KIMAP
                                            </option>

                                            {% for item in kimap_items %}

                                            <option value="{{ item.id }}" data-kimap="{{ item.kimap|escape }}"
                                                data-name="{{ item.name|escape }}"
                                                data-acct-no="{{ item.acct_no|escape }}"
                                                data-uom="{{ item.uom|escape }}"
                                                data-location="{{ item.location|escape }}"
                                                data-priceusd="{{ item.priceusd }}">

                                                {{ item.kimap }} - {{ item.name }}

                                                {% if item.location %}
                                                ({{ item.location }})
                                                {% endif %}

                                            </option>

                                            {% endfor %}

                                        </select>

                                    </td>


                                    <!-- DESCRIPTION -->

                                    <td>

                                        <input type="text" id="description_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="{{ detail.description }}"
                                            readonly>

                                    </td>


                                    <!-- ACCOUNT -->

                                    <td>

                                        <input type="text" id="acct_no_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="{{ detail.acct_no }}" readonly>

                                    </td>


                                    <!-- QTY -->

                                    <td>

                                        <input type="number" name="quantity_{{ forloop.counter0 }}"
                                            id="quantity_{{ forloop.counter0 }}" class="form-control form-control-sm"
                                            min="0" step="1" value="{{ detail.quantity }}"
                                            oninput="calculateAmount({{ forloop.counter0 }})" required>

                                    </td>


                                    <!-- UOM -->

                                    <td>

                                        <input type="text" id="uom_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="{{ detail.uom }}" readonly>

                                    </td>


                                    <!-- EST UNIT PRICE -->

                                    <td>

                                        <input type="text" name="estimated_unit_price_{{ forloop.counter0 }}"
                                            id="estimated_unit_price_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm price-input" inputmode="decimal"
                                            value="{{ detail.estimated_unit_price|default_if_none:'' }}"
                                            oninput="calculateAmount({{ forloop.counter0 }})"
                                            onfocus="unformatPrice(this)"
                                            onblur="formatPrice(this, {{ forloop.counter0 }})">

                                    </td>


                                    <!-- EST AMOUNT -->

                                    <td>

                                        <input type="text" id="estimated_amount_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm"
                                            value="{{ detail.estimated_amount|floatformat:2 }}" readonly>

                                    </td>


                                    <!-- AVAILABLE BUDGET -->

                                    <td>

                                        <input type="text" id="available_budget_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="-" readonly tabindex="-1">

                                    </td>


                                    <!-- BUDGET STATUS -->

                                    <td>

                                        <input type="text" id="budget_status_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="-" readonly tabindex="-1">

                                    </td>
<!-- LOCATION -->

                                    <td>

                                        <input type="text" name="location_{{ forloop.counter0 }}"
                                            id="location_{{ forloop.counter0 }}" class="form-control form-control-sm"
                                            value="{{ detail.location }}">

                                    </td>


                                    <!-- REMARKS -->

                                    <td>

                                        <input type="text" name="item_remarks_{{ forloop.counter0 }}"
                                            class="form-control form-control-sm" value="{{ detail.remarks }}">

                                    </td>


                                    <!-- DELETE -->

                                    <td class="text-center">

                                        <button type="button" class="btn btn-danger btn-sm item-action-btn"
                                            onclick="removeItem({{ forloop.counter0 }})" title="Remove Item">
                                            <i class="bi bi-trash"></i>
                                        </button>

                                    </td>

                                </tr>

                                {% endfor %}

                            </tbody>

                        </table>

                    </div>

                </div>


                <input type="hidden" name="item_count" id="item_count" value="{{ details|length }}">


                <!-- =========================================
                     BUTTONS
                     ========================================= -->

                <div class="mt-4">

                    <button type="submit" class="btn btn-secondary">
                        <i class="bi bi-check-lg"></i>
                        Update PR
                    </button>

                    <a href="{% url 'pr' %}" class="btn btn-secondary">
                        <i class="bi bi-x-lg"></i>
                        Cancel
                    </a>

                </div>

            </form>

        </div>

    </div>

</div>


<style>
    /* =========================================
   PETROGL FORM STANDARD
   ========================================= */

    .petrogl-form-container {
        background-color: #dee2e6;
        border: none !important;
        border-radius: 0.375rem;
    }

    .petrogl-form-container .card-body {
        padding: 20px;
    }


    /* =========================================
   INPUT / SELECT / TEXTAREA
   ========================================= */

    .petrogl-form-container .form-control,
    .petrogl-form-container .form-select {
        background-color: #ffffff;
        border: none !important;
        box-shadow: none !important;
    }

    .petrogl-form-container .form-control:focus,
    .petrogl-form-container .form-select:focus {
        border: none !important;
        box-shadow: 0 0 0 0.15rem rgba(108, 117, 125, 0.20);
    }


    /* =========================================
   PR ITEMS TABLE
   ========================================= */

    #itemsTable {
        width: 100%;
        min-width: 1150px;
        background-color: #fff;
        border: none !important;
        border-collapse: collapse !important;
    }

    #itemsTable th,
    #itemsTable td {
        border-top: none !important;
        border-right: none !important;
        border-bottom: 1px solid #eef0f2 !important;
        border-left: 1px solid #eef0f2 !important;
        vertical-align: middle;
    }

    #itemsTable th:first-child,
    #itemsTable td:first-child {
        border-left: none !important;
    }

    #itemsTable thead,
    #itemsTable thead th {
        background-color: #56636f !important;
        color: #fff !important;
        font-weight: 600;
        border: none !important;
    }

    #itemsTable tbody tr:last-child td {
        border-bottom: none !important;
    }

    #itemsTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    #itemsTable .form-control,
    #itemsTable .form-select {
        background-color: #fff;
        border: none !important;
        box-shadow: none !important;
        width: 100%;
    }

    /* Description: give the item name more room */
    #itemsTable th:nth-child(2),
    #itemsTable td:nth-child(2) {
        min-width: 260px;
        width: 260px;
    }

    /* Qty */
    #itemsTable th:nth-child(4),
    #itemsTable td:nth-child(4) {
        min-width: 100px;
        width: 100px;
    }

    #itemsTable td:nth-child(4) input {
        width: 100%;
        min-width: 85px;
        text-align: right;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Unit Price */
    #itemsTable th:nth-child(6),
    #itemsTable td:nth-child(6) {
        min-width: 105px;
        width: 105px;
    }

    /* Estimated Amount */
    #itemsTable th:nth-child(7),
    #itemsTable td:nth-child(7) {
        min-width: 110px;
        width: 110px;
    }

    /* Available Budget */
    #itemsTable th:nth-child(8),
    #itemsTable td:nth-child(8) {
        min-width: 110px;
        width: 110px;
    }

    /* Budget Status */
    #itemsTable th:nth-child(9),
    #itemsTable td:nth-child(9) {
        min-width: 105px;
        width: 105px;
    }

    #itemsTable th:nth-child(6),
    #itemsTable th:nth-child(7),
    #itemsTable th:nth-child(8),
    #itemsTable th:nth-child(9) {
        white-space: normal;
        line-height: 1.15;
    }

    #itemsTable td:nth-child(6),
    #itemsTable td:nth-child(7),
    #itemsTable td:nth-child(8),
    #itemsTable td:nth-child(9) {
        white-space: nowrap;
    }

    #itemsTable td:nth-child(6) input,
    #itemsTable td:nth-child(7) input,
    #itemsTable td:nth-child(8) input {
        text-align: right;
        padding-left: 4px;
        padding-right: 4px;
    }


    /* =========================================
   PRICE / AMOUNT
   ========================================= */

    .price-input {
        text-align: right;
    }

    #itemsTable input[id^="estimated_amount_"] {
        text-align: right;
    }


    /* =========================================
   ACTION BUTTON
   ========================================= */

    .item-action-btn {
        width: 34px;
        height: 32px;
        padding: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .item-action-btn i {
        font-size: 15px;
    }
</style>


<script>

    let itemCount = {{ details| length }};


    /* =========================================
       INITIALIZE EXISTING ITEMS
       ========================================= */

    document.addEventListener(
        "DOMContentLoaded",
        function () {
            const prDateInput = document.querySelector('input[name="pr_date"]');
            const priorityInput = document.querySelector('select[name="priority"]');
            if (prDateInput) prDateInput.addEventListener("change", updateRequiredDate);
            if (priorityInput) priorityInput.addEventListener("change", updateRequiredDate);
            updateRequiredDate();

            document
                .querySelectorAll(
                    'select[data-existing-kimap]'
                )
                .forEach(function (select) {

                    const existingKimap =
                        select.dataset.existingKimap;

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

                        const option =
                            select.options[i];

                        if (
                            option.dataset.kimap ===
                            existingKimap
                        ) {

                            select.selectedIndex = i;

                            break;
                        }
                    }
                });


            for (
                let i = 0;
                i < itemCount;
                i++
            ) {

                const priceInput =
                    document.getElementById(
                        `estimated_unit_price_${i}`
                    );

                /*
                 * Item existing:
                 * gunakan harga yang tersimpan di PR.
                 * Harga KIMAP hanya dipakai jika harga PR kosong.
                 */
                if (
                    priceInput &&
                    (!priceInput.value ||
                        priceInput.value.trim() === "")
                ) {
                    applyKimapPrice(i);
                }


                calculateAmount(i);

                checkBudget(i);
            }
        }
    );



    function updateRequiredDate() {
        const prDateInput = document.querySelector('input[name="pr_date"]');
        const priorityInput = document.querySelector('select[name="priority"]');
        const requiredDateInput = document.querySelector('input[name="required_date"]');
        if (!prDateInput || !requiredDateInput) return;
        const base = new Date(prDateInput.value + "T00:00:00");
        if (Number.isNaN(base.getTime())) return;
        if (priorityInput && priorityInput.value.toLowerCase() === "urgent") {
            base.setDate(base.getDate() + 7);
        } else {
            const originalDay = base.getDate();
            base.setDate(1);
            base.setMonth(base.getMonth() + 1);
            const lastDay = new Date(base.getFullYear(), base.getMonth() + 1, 0).getDate();
            base.setDate(Math.min(originalDay, lastDay));
        }
        requiredDateInput.value = `${base.getFullYear()}-${String(base.getMonth()+1).padStart(2,"0")}-${String(base.getDate()).padStart(2,"0")}`;
        for (let i = 0; i < itemCount; i++) checkBudget(i);
    }

    /* =========================================
       ADD ITEM
       ========================================= */

    function addItem() {

        const tbody =
            document.getElementById(
                "itemsBody"
            );

        const template =
            document.getElementById(
                "kimapOptionsTemplate"
            );

        const row =
            document.createElement("tr");

        row.id =
            `item_row_${itemCount}`;

        const options =
            template.innerHTML;

        row.innerHTML = `

        <td>

            <select
                name="kimap_id_${itemCount}"
                class="form-select form-select-sm"
                onchange="loadKimap(${itemCount})"
                required
            >
                ${options}
            </select>

        </td>


        <td>

            <input
                type="text"
                id="description_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="text"
                id="acct_no_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="number"
                name="quantity_${itemCount}"
                id="quantity_${itemCount}"
                class="form-control form-control-sm"
                min="0"
                step="1"
                value="1"
                oninput="calculateAmount(${itemCount})"
                required
            >

        </td>


        <td>

            <input
                type="text"
                id="uom_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="number"
                name="estimated_unit_price_${itemCount}"
                id="estimated_unit_price_${itemCount}"
                class="form-control form-control-sm price-input"
                min="0"
                step="1"
                oninput="calculateAmount(${itemCount})"
            >

        </td>


        <td>

            <input
                type="text"
                id="estimated_amount_${itemCount}"
                class="form-control form-control-sm"
                value="0.00"
                readonly
            >

        </td>


        <td>

            <input
                type="text"
                id="available_budget_${itemCount}"
                class="form-control form-control-sm"
                value="-"
                readonly
                tabindex="-1"
            >

        </td>


        <td>

            <input
                type="text"
                id="budget_status_${itemCount}"
                class="form-control form-control-sm"
                value="-"
                readonly
                tabindex="-1"
            >

        </td>
<td>

            <input
                type="text"
                name="location_${itemCount}"
                id="location_${itemCount}"
                class="form-control form-control-sm"
            >

        </td>


        <td>

            <input
                type="text"
                name="item_remarks_${itemCount}"
                class="form-control form-control-sm"
            >

        </td>


        <td class="text-center">

            <button
                type="button"
                class="btn btn-danger btn-sm item-action-btn"
                onclick="removeItem(${itemCount})"
                title="Remove Item"
            >
                <i class="bi bi-trash"></i>
            </button>

        </td>

    `;

        tbody.appendChild(row);

        itemCount++;

        document.getElementById(
            "item_count"
        ).value = itemCount;
        calculateAmount(itemCount - 1);
        checkBudget(itemCount - 1);
    }


    /* =========================================
       LOAD KIMAP
       ========================================= */

    function loadKimap(index) {

        const select =
            document.querySelector(
                `select[name="kimap_id_${index}"]`
            );

        if (!select) {
            return;
        }

        const selectedOption =
            select.options[
            select.selectedIndex
            ];

        if (
            !selectedOption ||
            !selectedOption.value
        ) {

            document.getElementById(
                `description_${index}`
            ).value = "";

            document.getElementById(
                `acct_no_${index}`
            ).value = "";

            document.getElementById(
                `uom_${index}`
            ).value = "";

            document.getElementById(
                `location_${index}`
            ).value = "";

            document.getElementById(
                `estimated_unit_price_${index}`
            ).value = "";

            document.getElementById(
                `estimated_amount_${index}`
            ).value = "0.00";

            const availableInput = document.getElementById(`available_budget_${index}`);
            const statusInput = document.getElementById(`budget_status_${index}`);
            if (availableInput) availableInput.value = "-";
            if (statusInput) {
                statusInput.value = "-";
                statusInput.classList.remove("text-danger", "text-success");
            }

            document.getElementById(
                `estimated_unit_price_${index}`
            ).readOnly = false;

            return;
        }


        document.getElementById(
            `description_${index}`
        ).value =
            selectedOption.dataset.name || "";


        document.getElementById(
            `acct_no_${index}`
        ).value =
            selectedOption.dataset.acctNo || "";


        document.getElementById(
            `uom_${index}`
        ).value =
            selectedOption.dataset.uom || "";


        const location =
            document.getElementById(
                `location_${index}`
            );

        if (!location.value) {

            location.value =
                selectedOption.dataset.location || "";
        }


        applyKimapPrice(index);

        calculateAmount(index);
    }


    /* =========================================
       APPLY KIMAP PRICE
       ========================================= */

    function applyKimapPrice(index) {

        const select =
            document.querySelector(
                `select[name="kimap_id_${index}"]`
            );

        if (!select) {
            return;
        }

        const option =
            select.options[
            select.selectedIndex
            ];

        const priceInput =
            document.getElementById(
                `estimated_unit_price_${index}`
            );

        if (!priceInput) {
            return;
        }

        const kimapPrice =
            parseFloat(
                option?.dataset.priceusd || "0"
            );


        if (kimapPrice > 0) {

            priceInput.value =
                kimapPrice.toFixed(2);

            priceInput.readOnly = false;

        } else {

            /*
             * Tidak ada harga di KIMAP.
             * User boleh mengisi harga estimasi.
             */

            priceInput.readOnly = false;

        }
    }


    function formatPrice(input, index) {

        const value = parseFloat(
            (input.value || "").replace(/,/g, "")
        );

        if (isNaN(value)) {
            input.value = "";
            calculateAmount(index);
            return;
        }

        input.value = value.toLocaleString(
            "en-US",
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );

        calculateAmount(index);
    }


    function unformatPrice(input) {

        input.value =
            (input.value || "").replace(/,/g, "");
    }


    /* =========================================
       CALCULATE ESTIMATED AMOUNT
       ========================================= */

    function calculateAmount(index) {

        const quantityInput =
            document.getElementById(
                `quantity_${index}`
            );

        const priceInput =
            document.getElementById(
                `estimated_unit_price_${index}`
            );

        const amountInput =
            document.getElementById(
                `estimated_amount_${index}`
            );

        if (
            !quantityInput ||
            !priceInput ||
            !amountInput
        ) {
            return;
        }

        const quantity =
            parseFloat(
                quantityInput.value || "0"
            );

        // Harga bisa sedang tampil dengan pemisah ribuan setelah input kehilangan fokus.
        // Hapus koma terlebih dahulu agar nilai seperti 110,000,000.00
        // dibaca sebagai 110000000, bukan 110.
        const price =
            parseFloat(
                (priceInput.value || "0").toString().replace(/,/g, "")
            ) || 0;

        const amount =
            quantity * price;

        amountInput.value =
            amount.toLocaleString(
                "en-US",
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );

        checkBudget(index);
    }


    /* =========================================
       CHECK BUDGET
       ========================================= */

    function checkBudget(index) {

        const acctNo =
            document.getElementById(`acct_no_${index}`)?.value;

        const requiredDate =
            document.querySelector('input[name="required_date"]')?.value;

        const amountInput =
            document.getElementById(`estimated_amount_${index}`);

        const availableInput =
            document.getElementById(`available_budget_${index}`);

        const statusInput =
            document.getElementById(`budget_status_${index}`);

        if (!availableInput || !statusInput) {
            return;
        }

        const amount = parseFloat(
            (amountInput?.value || "0").replace(/,/g, "")
        ) || 0;

        if (!acctNo || !requiredDate) {

            availableInput.value = "-";
            statusInput.value = "-";

            statusInput.classList.remove(
                "text-danger",
                "text-success"
            );

            return;
        }

        fetch(
            `{% url 'check_pr_budget' %}` +
            `?acct_no=${encodeURIComponent(acctNo)}` +
            `&required_date=${encodeURIComponent(requiredDate)}` +
            `&amount=${amount}`
        )
            .then(response => response.json())
            .then(data => {

                if (!data.success) {

                    availableInput.value = "-";
                    statusInput.value = "-";

                    statusInput.classList.remove(
                        "text-danger",
                        "text-success"
                    );

                    return;
                }

                const availableBudget =
                    Number(data.available_budget || 0);

                availableInput.value =
                    availableBudget.toLocaleString(
                        "en-US",
                        {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }
                    );

                const status =
                    data.budget_status || "NO BUDGET";

                statusInput.value = status;

                statusInput.classList.remove(
                    "text-danger",
                    "text-success"
                );

                if (status === "AVAILABLE") {

                    statusInput.classList.add(
                        "text-success"
                    );

                } else if (
                    status === "EXCEED" ||
                    status === "NO BUDGET"
                ) {

                    statusInput.classList.add(
                        "text-danger"
                    );
                }
            })
            .catch(() => {

                availableInput.value = "-";
                statusInput.value = "-";

                statusInput.classList.remove(
                    "text-danger",
                    "text-success"
                );
            });
    }


    /* =========================================
       REMOVE ITEM
       ========================================= */

    function removeItem(index) {

        const row =
            document.getElementById(
                `item_row_${index}`
            );

        if (row) {

            row.remove();
        }
    }

</script>

{% endblock %}