{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }

    #invoiceForm .row {
        margin-top: 0.5rem;
    }

    #invoiceForm .form-check {
        margin-bottom: 0.3rem;
    }

    .modal-xl .modal-body {
        max-height: 90vh;
        overflow-y: auto;
    }

    .invoice-action-btn {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
        color: white !important;
    }

    .invoice-action-btn:hover,
    .invoice-action-btn:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: white !important;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Invoice Register - Taxation</h2>
    <form method="get" action="{% url 'invoice_processor' %}" class="m-0">
        <input type="text" name="search" id="searchInput" value="{{ search_query }}" class="form-control"
            placeholder="Search Invoice No..." style="max-width: 300px; margin-right: 1rem;" autocomplete="off">
    </form>
    <div>
        <a href="{% url 'generate_pdf_invoice' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_invoice' %}" class="btn btn-secondary">Export to Excel</a>
    </div>

</div>

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 my-3">
    <div class="text-muted small">
        Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}
        of {{ paginator.count }}
    </div>

    <div class="d-flex align-items-center gap-1 flex-wrap">
        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_previous %}disabled{% endif %}"
            href="{% if page_obj.has_previous %}?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            First
        </a>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_previous %}disabled{% endif %}"
            href="{% if page_obj.has_previous %}?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Previous
        </a>

        <span class="btn btn-sm btn-secondary">
            {{ page_obj.number }} / {{ paginator.num_pages }}
        </span>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_next %}disabled{% endif %}"
            href="{% if page_obj.has_next %}?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Next
        </a>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_next %}disabled{% endif %}"
            href="{% if page_obj.has_next %}?page={{ paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">Go to Page</span>

        <form method="get" class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden" name="search" value="{{ search_query }}">
            {% endif %}
            <input type="number" name="page" min="1" max="{{ paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;">
            <button type="submit" class="btn btn-sm btn-secondary">Go</button>
        </form>
    </div>
</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="invoiceTable">
        <thead class="table-dark">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    flatpickr("#tglfaktur", {
                        dateFormat: "d-m-Y",
                        allowInput: true
                    });
                });
            </script>
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor Code</th>
                <th scope="col" class="align-middle">Name</th>
                <th scope="col" class="align-middle">Invoice Code</th>
                <th scope="col" class="align-middle">Invoice No</th>
                <th scope="col" class="align-middle">Invoice Date</th>
                <th scope="col" class="align-middle">Description</th>
                <th scope="col" class="align-middle">Contract No/Ref. No</th>
                <th scope="col" class="align-middle">Currency</th>
                <th scope="col" class="align-middle">Invoice Amount</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if invoice %}
            {% for invno in invoice %}
            <tr data-id="{{ invno.id }}" data-vendorcode="{{ invno.vendorcode.vendorcode }}"
                data-vendorname="{{ invno.vendorcode.vendorname }}" data-kodeinv="{{ invno.kodeinv }}"
                data-invdate="{{ invno.invdate|date:'Y-m-d' }}" data-invno="{{ invno.invno }}"
                data-logdate="{{ invno.logdate|date:'Y-m-d' }}" data-duedate="{{ invno.duedate|date:'Y-m-d' }}"
                data-description="{{ invno.description }}" data-cnc="{{ invno.cnc }}"
                data-contractno="{{ invno.contractno|default:'' }}" data-srvperiod="{{ invno.srvperiod }}"
                data-currsign="{{ invno.currsign.currsign|default_if_none:'' }}" data-amount="{{ invno.amount }}"
                data-dpp="{{ invno.dpp }}" data-vat="{{ invno.vat }}" data-totalamount="{{ invno.totalamount }}"
                data-taxinvo="{{ invno.taxinvo|default_if_none:'' }}"
                data-tglfaktur="{{ invno.tglfaktur|date:'d-m-Y' }}"
                data-ratekmk="{{ invno.ratekmk|default_if_none:'' }}"
                data-vatcode="{{ invno.vatcode.vatcode|default_if_none:'' }}" data-whtcode="{{ invno.whtcode }}"
                data-govwht="{{ invno.govwht|default_if_none:'' }}" data-whtbaseamt="{{ invno.whtbaseamt }}"
                data-whtamount="{{ invno.whtamount }}">


                <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                <td>
                    {{ invno.vendorcode.vendorcode }}
                </td>
                <td>
                    {{ invno.vendorcode.vendorname }}
                </td>
                <td>{{ invno.kodeinv }}</td>
                <td>{{ invno.invno }}</td>
                <td>{{ invno.invdate|date:"d-m-Y" }}</td>
                <td>{{ invno.description }}</td>
                <td>{{ invno.contractno }}</td>
                <td>{{ invno.currsign.currsign }}</td>
                <td>{{ invno.amount|format_currency_dynamic:invno.currsign.currsign }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm invoice-action-btn"
                            onclick="editinvoice('{{ invno.id }}')">
                            Tax
                        </button>

                        <!-- Tombol print -->
                        <a href="{% url 'print_invoice' invno.id %}" target="_blank"
                            class="btn btn-sm invoice-action-btn">
                            <i class="bi bi-printer"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Invoice No. found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 my-3">
    <div class="text-muted small">
        Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}
        of {{ paginator.count }}
    </div>

    <div class="d-flex align-items-center gap-1 flex-wrap">
        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_previous %}disabled{% endif %}"
            href="{% if page_obj.has_previous %}?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            First
        </a>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_previous %}disabled{% endif %}"
            href="{% if page_obj.has_previous %}?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Previous
        </a>

        <span class="btn btn-sm btn-secondary">
            {{ page_obj.number }} / {{ paginator.num_pages }}
        </span>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_next %}disabled{% endif %}"
            href="{% if page_obj.has_next %}?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Next
        </a>

        <a class="btn btn-sm btn-outline-secondary {% if not page_obj.has_next %}disabled{% endif %}"
            href="{% if page_obj.has_next %}?page={{ paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}{% else %}#{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">Go to Page</span>

        <form method="get" class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden" name="search" value="{{ search_query }}">
            {% endif %}
            <input type="number" name="page" min="1" max="{{ paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;">
            <button type="submit" class="btn btn-sm btn-secondary">Go</button>
        </form>
    </div>
</div>

<!-- invoice Modal -->
<div class="modal fade" id="invoiceModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl"> <!-- atau modal-lg -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="invoiceModalLabel">Input Tax</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="invoiceForm" method="POST" action="{% url 'save_invoice_processor' %}">
                    {% csrf_token %}
                    <input type="hidden" name="invoice_id" id="invoice_id">

                    <div class="row">
                        <!-- KIRI -->
                        <div class="col-md-6">
                            <label for="vendorcode" class="form-label">Vendor</label>
                            <select class="form-control bg-light" id="vendorcode" name="vendorcode" disabled
                                style="font-weight:bold;">
                                <option value="">-- Select Vendor Code --</option>
                                {% for v in vendor %}
                                <option value="{{ v.vendorcode }}">{{ v.vendorcode }} - {{ v.vendorname }}</option>
                                {% endfor %}
                            </select>

                            <!-- hidden untuk kirim ke backend -->
                            <input type="hidden" name="vendorcode" id="vendorcode_hidden">

                            <div class="mb-3">
                                <label for="invno" class="form-label">Invoice No</label>
                                <input type="text" class="form-control bg-light" id="invno" name="invno" disabled
                                    style="font-weight:bold;">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <input type="text" class="form-control bg-light" id="description" name="description"
                                    disabled>
                            </div>
                            <div class="mb-3">
                                <label for="contractno" class="form-label">Contract No/Ref. No</label>
                                <select class="form-control bg-light" id="contractno" name="contractno" disabled>
                                    <option value="">-- Select Contract --</option>
                                    {% for kontrak in contracts %}
                                    <option value="{{ kontrak.contractno }}"
                                        data-vendor="{{ kontrak.vendorcode.vendorcode }}">
                                        {{ kontrak.contractno }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="currsign" class="form-label">Currency</label>
                                        <select class="form-control bg-light" id="currsign" name="currsign" disabled>
                                            <option value="">-- Select Currency --</option>
                                            {% for curr in matauangs %}
                                            <option value="{{ curr.currsign }}">
                                                {{ curr.currsign }} - {{ curr.currname }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="amount" class="form-label">Invoice Amount</label>
                                        <input type="text" class="form-control currency-input bg-light" id="amount"
                                            name="amount" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="dpp" class="form-label">DPP/Tax Base</label>
                                        <input type="text" class="form-control currency-input bg-light" id="dpp"
                                            name="dpp" disabled>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="vat" class="form-label">VAT/PB1</label>
                                        <input type="text" class="form-control currency-input bg-light" id="vat"
                                            name="vat" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="totalamount" class="form-label">Total Amount</label>
                                <input type="text" class="form-control currency-input fw-bold" id="totalamount"
                                    name="totalamount" disabled>
                            </div>
                        </div>

                        <!-- KANAN -->
                        <div class="col-md-6">
                            <p style="color: green;" class="small mt-2">Please complete the following Tax Information:</p>

                            <div class="mb-3">
                                <label for="taxinvo" class="form-label">Tax Invoice No.</label>
                                <input type="text" class="form-control" id="taxinvo" name="taxinvo" required>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="tglfaktur" class="form-label">Tax Invoice Date</label>
                                    <input type="text" class="form-control" id="tglfaktur" name="tglfaktur"
                                        placeholder="DD-MM-YYYY" required>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="ratekmk" class="form-label">Rate KMK</label>
                                    <input type="text" class="form-control currency-input" id="ratekmk" name="ratekmk"
                                    optional>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="vatcode" class="form-label">VAT Code</label>
                                <select class="form-control" id="vatcode" name="vatcode" required>
                                    <option value="">-- Select VAT Code --</option>
                                    {% for vatc in vats %}
                                    <option value="{{ vatc.vatcode }}">{{ vatc.vatcode }} - {{ vatc.descript }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="govwht" class="form-label">WHT Code</label>
                                <select class="form-control" id="govwht" name="govwht" required>
                                    <option value="">-- Select Gov WHT --</option>
                                    {% for wht in whts %}
                                    <option value="{{ wht.govwht }}" data-whtcode="{{ wht.whtcode }}"
                                        data-whtpctg="{{ wht.whtpctg }}">
                                        {{ wht.whtcode }} - {{ wht.govwht }} - {{ wht.descript }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- hidden input untuk simpan whtcode -->
                            <input type="hidden" name="whtcode" id="whtcode">

                            <div class="mb-3">
                                <label for="whtbaseamt" class="form-label">WHT Base Amount</label>
                                <input type="text" class="form-control currency-input" id="whtbaseamt" name="whtbaseamt">
                            </div>
                            <div class="mb-3">
                                <label for="whtamount" class="form-label">WHT Amount</label>
                                <input type="text" class="form-control currency-input" id="whtamount" name="whtamount"
                                    readonly>

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

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
                <script>
                    function toggleGoodsDesc() {
                        const checkbox = document.getElementById('goods16');
                        const desc = document.getElementById('goodslist1');
                        desc.readOnly = !checkbox.checked;
                    }

                    function toggleSoDesc() {
                        const checkbox = document.getElementById('so16');
                        const desc = document.getElementById('solist1');
                        desc.readOnly = !checkbox.checked;
                    }
                </script>

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

<script>
    document.getElementById("govwht").addEventListener("change", function () {
        const opt = this.selectedOptions[0];
        if (opt) {
            document.getElementById("whtcode").value = opt.dataset.whtcode || "";
        } else {
            document.getElementById("whtcode").value = "";
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const tglfakturInput = document.getElementById("tglfaktur");
        const currsignInput = document.getElementById("currsign");
        const ratekmkInput = document.getElementById("ratekmk");

        function loadKmkRate() {
            if (!tglfakturInput || !currsignInput || !ratekmkInput) return;

            const currency = (currsignInput.value || "").toUpperCase();
            const tglfaktur = tglfakturInput.value || "";

            if (currency !== "USD" || !tglfaktur) {
                ratekmkInput.value = "";
                return;
            }

            fetch("{% url 'get_kmk_rate' %}?tglfaktur=" + encodeURIComponent(tglfaktur) +
                  "&currsign=" + encodeURIComponent(currency))
                .then(response => response.json())
                .then(data => {
                    if (data.rate !== null && data.rate !== undefined) {
                        ratekmkInput.value = data.rate;
                    } else {
                        ratekmkInput.value = "";
                    }
                })
                .catch(() => {
                    ratekmkInput.value = "";
                });
        }

        if (tglfakturInput) {
            tglfakturInput.addEventListener("change", loadKmkRate);
        }

        if (currsignInput) {
            currsignInput.addEventListener("change", loadKmkRate);
        }

        window.loadKmkRate = loadKmkRate;
    });

    document.addEventListener("DOMContentLoaded", function () {
        const govwhtSelect = document.getElementById("govwht");
        const whtbaseamtInput = document.getElementById("whtbaseamt");
        const whtamountInput = document.getElementById("whtamount");
        const whtcodeInput = document.getElementById("whtcode");

        function parseNumber(val, currency) {
            if (val === null || val === undefined || val === '') return 0;

            let s = String(val).trim();

            if (currency === 'IDR') {
                // IDR: 150.000.000
                s = s.replace(/\./g, '');
            } else {
                // USD: 150,000.00
                s = s.replace(/,/g, '');
            }

            const n = parseFloat(s);
            return isNaN(n) ? 0 : n;
        }

        function formatCurrencyValue(value, currency) {
            if (!value) return '';

            const amount = parseFloat(String(value).replace(/,/g, ''));
            if (isNaN(amount)) return '';

            if (currency === 'IDR') {
                return amount.toLocaleString('en-US', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).replace(/,/g, '.');
            }

            return amount.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function getSelectedPctg() {
            const opt = govwhtSelect && govwhtSelect.selectedOptions && govwhtSelect.selectedOptions[0];
            if (!opt) return 0;
            const pctg = parseFloat(opt.dataset.whtpctg || "0");
            return isNaN(pctg) ? 0 : pctg;
        }

        // hitung dan tampilkan (format dengan koma untuk readability)
        window.calculateWhtAmount = function () {
            if (!whtbaseamtInput || !whtamountInput) return;

            const pctg = getSelectedPctg();
            const currency = document.getElementById('currsign').value || '';
            const base = parseNumber(whtbaseamtInput.value, currency);

            if (base <= 0 || pctg <= 0) {
                whtamountInput.value = '';
                return;
            }

            // WHT Amount = WHT Base Amount x WHT Percentage / 100
            const amount = (base * pctg) / 100;
            whtamountInput.value = formatCurrencyValue(amount, currency);
        };

        // saat user ganti govwht -> isi whtcode dan hitung ulang
        if (govwhtSelect) {
            govwhtSelect.addEventListener("change", function () {
                const opt = govwhtSelect.selectedOptions && govwhtSelect.selectedOptions[0];
                const code = opt ? (opt.dataset.whtcode || "") : "";

                whtcodeInput.value = code;

                if (code === "NN") {
                    whtbaseamtInput.value = "";
                    whtbaseamtInput.required = false;
                    whtbaseamtInput.disabled = true;
                    whtamountInput.value = "";
                } else {
                    whtbaseamtInput.disabled = false;
                    whtbaseamtInput.required = true;
                    window.calculateWhtAmount();
                }
            });
        }

        if (whtbaseamtInput) {
            // input mungkin berformat ribuan (koma) — parseNumber menangani itu
            whtbaseamtInput.addEventListener("input", window.calculateWhtAmount);
        }

        // MODAL EDIT FUNCTION: isi field, lalu hitung ulang
        window.editinvoice = function (invoiceId) {
            const row = document.querySelector(`tr[data-id="${invoiceId}"]`);
            if (!row) return;

            const selectedVendorCode = row.dataset.vendorcode || '';

            document.getElementById('invoiceModalLabel').innerText = 'Input Tax';
            document.getElementById('invoiceForm').action = "{% url 'save_invoice_processor' %}";
            document.getElementById('invoice_id').value = invoiceId;

            document.getElementById('vendorcode').value = selectedVendorCode;
            document.getElementById('vendorcode_hidden').value = selectedVendorCode;

            // isi field lain (pastikan id-id ini ada di HTML)
            document.getElementById('invno').value = row.dataset.invno || '';
            document.getElementById('description').value = row.dataset.description || '';
            document.getElementById('contractno').value = row.dataset.contractno || '';
            document.getElementById('currsign').value = row.dataset.currsign || '';
            const currency = row.dataset.currsign || '';
            document.getElementById('amount').value = formatCurrencyValue(row.dataset.amount, currency);
            document.getElementById('dpp').value = formatCurrencyValue(row.dataset.dpp, currency);
            document.getElementById('vat').value = formatCurrencyValue(row.dataset.vat, currency);
            document.getElementById('totalamount').value = formatCurrencyValue(row.dataset.totalamount, currency);
            document.getElementById('taxinvo').value = row.dataset.taxinvo || '';
            document.getElementById('tglfaktur').value = row.dataset.tglfaktur || '';
            document.getElementById('ratekmk').value = formatCurrencyValue(row.dataset.ratekmk, currency);
            document.getElementById('vatcode').value = row.dataset.vatcode || '';

            // --- BAGIAN YANG PERLU DITAMBAHKAN/DIUBAH START ---

            // Set vendor code (vendorcode disabled diisi di sini)
            document.getElementById('vendorcode').value = selectedVendorCode;

            // Filter opsi kontrak berdasarkan vendorcode yang baru disetel
            const selectedContract = row.dataset.contractno || '';

            if (selectedContract.startsWith('NC-')) {
                let ncOption = Array.from(document.getElementById('contractno').options)
                    .find(option => option.value === selectedContract);

                if (!ncOption) {
                    ncOption = new Option(selectedContract, selectedContract);
                    ncOption.dataset.nonCommitment = "true";
                    document.getElementById('contractno').add(ncOption);
                }

                document.getElementById('contractno').value = selectedContract;
            } else {
                window.filterContractOptions(selectedVendorCode, selectedContract);
            }
            // --- BAGIAN YANG PERLU DITAMBAHKAN/DIUBAH END ---

            document.getElementById('whtcode').value = row.dataset.whtcode || "";
            if (row.dataset.govwht) {
                document.getElementById('govwht').value = row.dataset.govwht;
            }

            // set govwht (value) first, so selectedOptions[] punya dataset yg benar
            if (row.dataset.govwht) {
                govwhtSelect.value = row.dataset.govwht;
                // jika option punya data-whtcode, gunakan itu; fallback pakai data di row
                const selectedOpt = govwhtSelect.selectedOptions && govwhtSelect.selectedOptions[0];
                whtcodeInput.value = (selectedOpt && selectedOpt.dataset.whtcode) ? selectedOpt.dataset.whtcode : (row.dataset.whtcode || "");
            } else {
                govwhtSelect.value = "";
                whtcodeInput.value = row.dataset.whtcode || "";
            }

            // isi base & biarkan calculate men-format whtamount
            whtbaseamtInput.value = formatCurrencyValue(row.dataset.whtbaseamt, currency);

            if (whtcodeInput.value === "NN") {
                whtbaseamtInput.value = "";
                whtbaseamtInput.required = false;
                whtbaseamtInput.disabled = true;
                whtamountInput.value = "";
            } else {
                whtbaseamtInput.disabled = false;
                whtbaseamtInput.required = true;
                window.calculateWhtAmount();
            }

            new bootstrap.Modal(document.getElementById('invoiceModal')).show();
        };
    });
</script>


<script>
    // Format ribuan saat user mengetik
    function formatNumber(num) {
        return num.replace(/\D/g, '')
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function formatCurrencyInput(input) {
        let value = input.value.replace(/,/g, '');
        if (!isNaN(value) && value !== "") {
            input.value = parseFloat(value).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }
    }

    // Apply formatting as user types
    document.querySelectorAll('.currency-input').forEach(input => {
        input.addEventListener('input', () => {
            let val = input.value.replace(/[^0-9.]/g, '');
            input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
    });

    // Sebelum submit: buang koma biar bisa disimpan sebagai angka
    document.getElementById('invoiceForm').addEventListener('submit', function () {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const vendorSelect = document.getElementById('vendorcode');
        const contractSelect = document.getElementById('contractno');

        function filterContractOptions(selectedVendor, selectedContract = '') {
            const options = contractSelect.querySelectorAll('option');
            let matchFound = false;

            options.forEach(option => {
                if (option.value === "") {
                    option.hidden = false;
                    return;
                }

                const belongsToVendor = option.getAttribute('data-vendor') === selectedVendor;
                option.hidden = !belongsToVendor;

                if (belongsToVendor && option.value === selectedContract) {
                    matchFound = true;
                }
            });

            if (selectedContract && matchFound) {
                contractSelect.value = selectedContract;
            } else {
                contractSelect.value = "";
            }
        }

        vendorSelect.addEventListener('change', function () {
            filterContractOptions(this.value);
        });

        window.filterContractOptions = filterContractOptions; // expose globally for edit
    });
</script>

<script>

    document.addEventListener("DOMContentLoaded", function () {
        const contractSelect = document.getElementById("contractno");
        if (contractSelect) {
            contractSelect.addEventListener("change", function () {
                fetchContractInfo(this.value);
            });
        }
    });


</script>

{% endblock %}