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

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

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

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

    .modal-dialog.modal-wide {
        max-width: 95vw;
        margin: 1.5rem auto;
    }

    .lock-action-btn {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .lock-action-btn:disabled {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .lock-action-btn:hover,
    .lock-action-btn:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }

    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-page-btn:disabled {
        background-color: #ffffff !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        opacity: 0.65;
    }

    .pagination-current {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }
</style>

<div class="d-flex justify-content-between align-items-center p-3">
    <h2 class="mb-0" style="font-size: 3rem; font-weight: 500;">Payment Voucher</h2>
    <div class="d-flex gap-2">
        <form method="GET" class="m-0">
            <input type="text" name="search" class="form-control" placeholder="Search ......"
                value="{{ search_query }}" style="width:200px;">
        </form>
        <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#pvModal" onclick="resetForm()">
            Add Payment Voucher
        </button>
        <!-- <a href="{% url 'generate_pdf_payment_voucher' %}" class="btn btn-secondary">PDF</a> -->
        <a href="{% url 'export_payment_voucher_excel' %}" class="btn btn-secondary">Excel</a>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

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

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

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

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% 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="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;"
                   required>
            <button type="submit" class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>

<div class="table-container">
    <table class="table table-striped table-hover" id="pvTable">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Req No</th>
                <th>Date</th>
                <th>Vendor</th>
                <th>Currency</th>
                <th>Rate</th>
                <th>Payment</th>
                <th>Bank</th>
                <th>Journal</th>
                <th>Ref No</th>
                <th>Vcr Date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for pv in vouchers %}
            <tr data-id="{{ pv.id }}" data-journal-status="{{ pv.journal_status }}" data-reqno="{{ pv.reqno }}"
                data-reqno-fmt="{{ pv.reqno|format_ref_no }}" data-reqdate="{{ pv.reqdate|date:'Y-m-d' }}"
                data-vendor="{{ pv.vendor.vendorcode }}" data-vendorname="{{ pv.vendorname }}"
                data-curr="{{ pv.currsign }}" data-rate="{{ pv.rate }}" data-cheque="{{ pv.cheque }}"
                data-transfer="{{ pv.transfer }}" data-bg="{{ pv.bg }}" data-bank="{{ pv.bankcode }}"
                data-bankname="{{ pv.bankname }}" data-account="{{ pv.accountno }}"
                data-due="{{ pv.due_date|date:'Y-m-d' }}" data-ref="{{ pv.ref_no }}"
                data-ref-fmt="{{ pv.ref_no|format_ref_no }}" data-vcrdate="{{ pv.vcrdate|date:'Y-m-d' }}">
                <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                <td>{{ pv.reqno|format_ref_no }}</td>
                <td>{{ pv.reqdate|date:"d-m-Y" }}</td>
                <td>
                    {% if pv.vendor %}
                    {{ pv.vendor.vendorcode }} - {{ pv.vendorname }}
                    {% endif %}
                </td>
                <td>{{ pv.currsign }}</td>
                <td>{{ pv.rate }}</td>
                <td>
                    {% if pv.cheque %}Cheque {% endif %}
                    {% if pv.transfer %}Transfer {% endif %}
                    {% if pv.bg %}BG {% endif %}
                </td>
                <td>
                    {{ pv.bankcode }}{% if pv.bankname %} - {{ pv.bankname }}{% endif %}
                </td>
                <td>
                    {% if pv.journal_status == "NOT_POSTED" %}
                    <span class="badge bg-secondary">Not Posted</span>
                    {% elif pv.journal_status == "VOID" %}
                    <span class="badge bg-danger">VOID</span>
                    {% elif pv.journal_status == "APPROVED" %}
                    <span class="badge bg-success">Approved</span>
                    {% else %}
                    <span class="badge bg-warning text-dark">Un Posted</span>
                    {% endif %}
                </td>

                <td>
                    {% if pv.ref_no %}
                    <span class="text-monospace">
                        {{ pv.ref_no|format_ref_no }}
                    </span>
                    {% endif %}
                </td>

                <td>
                    {% if pv.vcrdate %}
                    {{ pv.vcrdate|date:"d-m-Y" }}
                    {% endif %}
                </td>

                <td class="d-flex gap-1">

                    {% if pv.journal_status == "UN_POSTED" or pv.journal_status == "NOT_POSTED" %}
                    <!-- BOLEH EDIT & DELETE -->
                    <button class="btn btn-sm btn-secondary" onclick="editPV('{{ pv.id }}')">
                        <i class="bi bi-pencil"></i>
                    </button>

                    <form method="POST" action="{% url 'delete_payment_voucher' pv.id %}">
                        {% csrf_token %}
                        <button class="btn btn-sm btn-danger" onclick="return confirm('Delete voucher?')">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                    {% else %}
                    <!-- SUDAH APPROVED / VOID → LOCK -->
                    <button class="btn btn-sm lock-action-btn" disabled title="Journal locked">
                        <i class="bi bi-lock"></i>
                    </button>
                    {% endif %}

                    <!-- PRINT SELALU BOLEH -->
                    <a href="{% url 'print_payment_voucher' pv.id %}" target="_blank" class="btn btn-sm btn-secondary">
                        <i class="bi bi-printer"></i>
                    </a>

                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="9" class="text-center">No Data</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

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

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

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

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% 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="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;"
                   required>
            <button type="submit" class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>

<!-- ================= MODAL ================= -->
<div class="modal fade" id="pvModal">
    <div class="modal-dialog modal-wide">
        <div class="modal-content">

            <div class="modal-header">
                <h5 id="pvModalLabel">Add Payment Voucher</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form method="POST" action="{% url 'save_payment_voucher' %}" id="pvForm">
                    {% csrf_token %}
                    <input type="hidden" name="pv_id" id="pv_id">

                    <div class="row g-3">

                        <!-- ===== COL 1 : REQUEST ===== -->
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Request No</label>
                                <input type="text" id="reqno" name="reqno" class="form-control" disabled>
                            </div>

                            <div class="row g-2 mb-3">
                                <div class="col-md-7 col-12">
                                    <label class="form-label">Request Date</label>
                                    <input type="date" id="reqdate" name="reqdate" class="form-control">
                                </div>

                                <div class="col-md-5 col-12">
                                    <label class="form-label">Due Date</label>
                                    <input type="date" id="due_date" name="due_date" class="form-control">
                                </div>
                            </div>
                            <div class="row g-2 mb-3">
                                <div class="col-md-7 col-12">
                                    <label class="form-label">Currency</label>
                                    <select id="currsign" name="currsign" class="form-select">
                                        <option value="">-- Select Currency --</option>
                                        {% for c in currencies %}
                                        <option value="{{ c.currsign }}">
                                            {{ c.currsign }} - {{ c.currname }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-5 col-12">
                                    <label class="form-label">Rate</label>
                                    <input type="text" id="rate" name="rate" class="form-control" readonly>
                                </div>
                            </div>

                        </div>

                        <!-- ===== COL 2 : CURRENCY & PAYMENT ===== -->
                        <div class="col-md-4" style="width:450px;">

                            <div class="border rounded p-3">
                                <label class="form-label fw-semibold mb-3">Payment Method</label>

                                <!-- Cheque -->
                                <div class="d-flex align-items-center mb-2">
                                    <div class="d-flex align-items-center" style="width:130px;">
                                        <input class="form-check-input me-2" type="checkbox" id="cheque" name="cheque">
                                        <label class="mb-0">Cheque</label>
                                    </div>

                                    <label class="me-2 mb-0">No:</label>
                                    <input type="text" class="form-control form-control-sm" id="cekno" name="cekno"
                                        style="width:150px;" disabled>
                                </div>

                                <!-- BG -->
                                <div class="d-flex align-items-center mb-2">
                                    <div class="d-flex align-items-center" style="width:130px;">
                                        <input class="form-check-input me-2" type="checkbox" id="bg" name="bg">
                                        <label class="mb-0">BG</label>
                                    </div>

                                    <label class="me-2 mb-0">No:</label>
                                    <input type="text" class="form-control form-control-sm" id="bgno" name="bgno"
                                        style="width:150px;" disabled>
                                </div>

                                <!-- Transfer -->
                                <div class="d-flex align-items-center">
                                    <div class="d-flex align-items-center" style="width:130px;">
                                        <input class="form-check-input me-2" type="checkbox" id="transfer"
                                            name="transfer">
                                        <label class="mb-0">Transfer</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Vendor</label>
                                <select id="vendorcode" name="vendorcode" class="form-select">
                                    <option value="">-- Select Vendor --</option>
                                    {% for v in vendors %}
                                    <option value="{{ v.vendorcode }}" title="{{ v.vendorname }}">
                                        {{ v.vendorcode }} - {{ v.vendorname }}
                                    </option>

                                    {% endfor %}
                                </select>
                            </div>

                        </div>

                        <!-- ===== COL 3 : BANK ===== -->
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Vendor's Bank Account No</label>
                                <input type="text" id="accountno" name="accountno" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Account Chargeable</label>
                                <input type="text" id="acct_no" name="acct_no" class="form-control">
                            </div>
                            <div class="mb-3">
                                <input type="text" id="bank_display" class="form-control" readonly>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row align-items-end g-2 mb-3 justify-content-end">

                        <!-- Add Detail -->
                        <div class="col-md-2">
                            <button type="button" class="btn btn-secondary w-100" onclick="addDetailRow()">
                                + Add Detail
                            </button>
                        </div>

                    </div>
                    <hr>
                    <h5>Payment Detail</h5>

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered" id="detailTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>No</th>
                                    <th>Invoice No</th>
                                    <th>Contract No</th>
                                    <th>Description of Invoice</th>
                                    <th class="text-end">Amount Ori</th>
                                    <th class="text-end">Amount USD</th>
                                    <th>Description for Journal Payment</th>
                                    <th>AP Acct</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="modal-footer mt-3">
                        <div class="modal-footer mt-3">
                            <button type="submit" class="btn btn-primary" id="btnSavePV">
                                Save
                            </button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>

                    <h5>Create Journal Voucher</h5>
                    <hr>

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

                        <!-- Journal Payment No -->
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text">JV No</span>
                                <input type="text" id="ref_no" name="ref_no" class="form-control" disabled>
                            </div>
                        </div>

                        <!-- Voucher Date -->
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">JV Date</span>
                                <input type="date" id="vcrdate" name="vcrdate" class="form-control">
                            </div>
                        </div>

                        <!-- Create Journal dan Update-->
                        <div class="col-md-5">
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary flex-fill"
                                    onclick="createJournalPayment()">
                                    Create JV
                                </button>

                                <button type="button" class="btn btn-secondary flex-fill"
                                    onclick="updateJournalPayment()">
                                    Update JV
                                </button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>

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

<script>
    const cheque = document.getElementById("cheque");
    const bg = document.getElementById("bg");
    const transfer = document.getElementById("transfer");

    const cekno = document.getElementById("cekno");
    const bgno = document.getElementById("bgno");

    function resetAll() {
        cheque.checked = false;
        bg.checked = false;
        transfer.checked = false;

        cekno.disabled = true;
        bgno.disabled = true;
        cekno.value = "";
        bgno.value = "";
    }

    cheque.addEventListener("change", function () {
        if (this.checked) {
            resetAll();
            this.checked = true;
            cekno.disabled = false;
        } else {
            cekno.disabled = true;
            cekno.value = "";
        }
    });

    bg.addEventListener("change", function () {
        if (this.checked) {
            resetAll();
            this.checked = true;
            bgno.disabled = false;
        } else {
            bgno.disabled = true;
            bgno.value = "";
        }
    });

    transfer.addEventListener("change", function () {
        if (this.checked) {
            resetAll();
            this.checked = true;
        }
    });
</script>


<script>
    const checkboxes = document.querySelectorAll(
        '#cheque, #bg, #transfer'
    );

    checkboxes.forEach(box => {
        box.addEventListener('change', function () {
            if (this.checked) {
                checkboxes.forEach(other => {
                    if (other !== this) {
                        other.checked = false;
                    }
                });
            }
        });
    });
</script>

<script>
    function createJournalPayment() {

        // 0️⃣ cek sudah ada JV atau belum
        const refNo = document.getElementById('ref_no').value;
        if (refNo) {
            alert('Journal Payment already created.\nJika ada perbaikan, silakan klik Update JV.');
            return;
        }

        // 1️⃣ cek detail table
        const detailRows = document.querySelectorAll('#detailTable tbody tr');
        if (detailRows.length === 0) {
            alert('Tidak dapat create journal payment voucher karena tidak ada isi detail');
            return;
        }

        // 2️⃣ cek voucher date
        const vcrDate = document.getElementById('vcrdate').value;
        if (!vcrDate) {
            alert('Tanggal Journal tidak boleh kosong');
            return;
        }

        // 3️⃣ lolos validasi
        console.log('Create Journal Payment OK');

        // nanti:
        // submit form / ajax create JV
    }
</script>

<script>
    function toggleJVButtons() {
        const refNo = document.getElementById('ref_no').value;
        const btnCreate = document.querySelector('[onclick="createJournalPayment()"]');
        const btnUpdate = document.querySelector('[onclick="updateJournalPayment()"]');

        if (refNo) {
            btnCreate.disabled = true;
            btnUpdate.disabled = false;
        } else {
            btnCreate.disabled = false;
            btnUpdate.disabled = true;
        }
    }
</script>

<script>
    function resetForm() {
        document.getElementById("pvForm").action =
            "{% url 'save_payment_voucher' %}";

        document.getElementById("pv_id").value = "";
        document.getElementById("pvModalLabel").innerText = "Add Payment Voucher";
        document.querySelector("#detailTable tbody").innerHTML = "";

        toggleSaveButton(); // 🔥 reset Save jadi disabled
        toggleJVButtons();

    }

    function editPV(id) {
        const row = document.querySelector(`tr[data-id="${id}"]`);

        const vendorSelect = document.getElementById("vendorcode");
        if (vendorSelect) {
            vendorSelect.value = row.dataset.vendor || "";
        }

        document.getElementById("pv_id").value = id;
        document.getElementById("reqno").value =
            row.dataset.reqnoFmt || row.dataset.reqno;
        document.getElementById("reqdate").value = row.dataset.reqdate;

        document.getElementById("currsign").value = row.dataset.curr || "";

        const rateInput = document.getElementById("rate");
        rateInput.value = row.dataset.rate || "";

        document.getElementById("cheque").checked = row.dataset.cheque === "True";
        document.getElementById("transfer").checked = row.dataset.transfer === "True";
        document.getElementById("bg").checked = row.dataset.bg === "True";

        document.getElementById("accountno").value = row.dataset.account || "";
        document.getElementById("due_date").value = row.dataset.due || "";
        const refInput = document.getElementById("ref_no");
        if (refInput) {
            refInput.value =
                row.dataset.refFmt || row.dataset.ref || "";
        }
        toggleJVButtons();

        document.getElementById("vcrdate").value = row.dataset.vcrdate || "";

        document.getElementById("bank_display").value =
            row.dataset.bank + (row.dataset.bankname ? " - " + row.dataset.bankname : "");

        document.getElementById("pvModalLabel").innerText = "Edit Payment Voucher";

        new bootstrap.Modal(document.getElementById("pvModal")).show();

        setTimeout(fetchRate, 0);

        // load request2 detail
        fetch(
            "{% url 'get_request_detail' 'REQNO_REPLACE' %}"
                .replace("REQNO_REPLACE", row.dataset.reqno)
        )
            .then(res => res.json())
            .then(data => {
                const tbody = document.querySelector("#detailTable tbody");
                tbody.innerHTML = "";

                data.forEach((d, i) => {
                    tbody.innerHTML += `
<tr>
    <td>${i + 1}</td>

    <td>
        <select name="invno[]" class="form-select form-select-sm invno-select">
    <option value="${d.invno}" selected>${d.invno}</option>
</select>

    </td>

    <td>
        <input type="text" name="contractno[]" class="form-control form-control-sm"
               value="${d.contractno || ""}">
    </td>

    <td>
        <input type="text" name="remarks1[]" class="form-control form-control-sm"
               value="${d.remarks1 || ""}">
    </td>

<td class="text-end">
    ${formatIDR(d.pmtamtori)}
</td>

<td class="text-end">
    ${formatUSD(d.pmtamtusd)}
</td>

    <td>
        <input type="text" name="remarks2[]" class="form-control form-control-sm"
               value="${d.remarks2 || ""}">
    </td>

<td>
    <input type="text"
           class="form-control form-control-sm"
           value="${formatAcctNo(d.acct_ap)}"
           oninput="this.dataset.raw = this.value.replace(/\D/g,'')"
           onblur="this.value = formatAcctNo(this.dataset.raw)">
</td>

    <td>
        <button type="button" class="btn btn-sm btn-danger"
                onclick="this.closest('tr').remove()">✕</button>
    </td>
</tr>            `;
                });
                // 🔥 WAJIB ADA
                toggleSaveButton();
            });

        if (row.dataset.journalStatus === "APPROVED" || row.dataset.journalStatus === "VOID") {
            document.querySelectorAll("#detailTable input, #detailTable select")
                .forEach(el => el.disabled = true);
        }

    }
    function addDetailRow() {
        const tbody = document.querySelector("#detailTable tbody");
        const idx = tbody.children.length + 1;

        const row = document.createElement("tr");
        row.innerHTML = `
        <td>${idx}</td>

        <td>
            <select name="invno[]" class="form-select form-select-sm invno-select">
                <option value="">-- Select Invoice --</option>
            </select>
        </td>

        <td><input name="contractno[]" class="form-control form-control-sm"></td>
        <td><input name="remarks1[]" class="form-control form-control-sm"></td>

        <td><input name="pmtamtori[]" type="number" step="0.01"
                   class="form-control form-control-sm text-end"></td>

        <td><input name="pmtamtusd[]" type="number" step="0.01"
                   class="form-control form-control-sm text-end"></td>

        <td><input name="remarks2[]" class="form-control form-control-sm"></td>
        <td><input name="acct_ap[]" class="form-control form-control-sm"></td>

        <td>
            <button type="button" class="btn btn-sm btn-danger"
                onclick="this.closest('tr').remove(); toggleSaveButton();">
                ✕
            </button>
        </td>
    `;

        tbody.appendChild(row);
        loadInvoiceOptions(row.querySelector(".invno-select"));

        // 🔥 INI PENTING
        toggleSaveButton();
    }


    function formatRate(val, curr) {
        if (!val) return "";

        // USD selalu 1, TANPA desimal
        if (curr === "USD") {
            return "1";
        }

        // selain USD → 5 digit desimal
        return Number(val).toLocaleString("id-ID", {
            minimumFractionDigits: 5,
            maximumFractionDigits: 5
        });
    }


</script>

<script>
    const currSelect = document.getElementById("currsign");
    const dateInput = document.getElementById("reqdate");
    const rateInput = document.getElementById("rate");


    function fetchRate() {
        const curr = currSelect.value;
        const reqdate = dateInput.value;

        if (!curr) return;

        // Jika USD → rate = 1
        if (curr === "USD") {
            rateInput.value = "1";
            if (typeof bindAutoUSDAll === "function") bindAutoUSDAll();
            return;
        }

        if (!reqdate) {
            alert("Please select Date first.");
            currSelect.value = "";
            return;
        }

        fetch(`/paymentap/get-rate/?curr=${curr}&date=${reqdate}`)
            .then(res => res.json())
            .then(data => {
                if (data.rate > 0) {
                    rateInput.value = formatRate(data.rate, curr);
                    ;
                } else {
                    rateInput.value = "";
                    alert("Rate tidak ditemukan!");
                }

                if (typeof bindAutoUSDAll === "function") bindAutoUSDAll();
            });
    }

    currSelect.addEventListener("change", fetchRate);
    dateInput.addEventListener("change", fetchRate);
</script>



<script>
    function loadInvoiceOptions(selectEl) {
        const vendor = document.getElementById("vendorcode").value;
        if (!vendor) {
            alert("Please select Vendor first");
            return;
        }

        fetch(`/paymentap/invoice-by-vendor/?vendorcode=${vendor}`)
            .then(res => res.json())
            .then(data => {
                selectEl.innerHTML = `<option value="">-- Select Invoice --</option>`;

                data.forEach(inv => {
                    selectEl.innerHTML += `
        <option value="${inv.invno}"
            data-contract="${inv.contractno_id || ''}"
            data-remark="${inv.description || ''}"
            data-amount="${inv.saldo || 0}">
            ${inv.invno} (Saldo: ${inv.saldo})
        </option>
    `;
                });
            });
    }
</script>

<script>
    document.addEventListener("change", function (e) {
        if (e.target.classList.contains("invno-select")) {
            const opt = e.target.selectedOptions[0];
            const row = e.target.closest("tr");

            row.querySelector('input[name="contractno[]"]').value =
                opt.dataset.contract || "";

            row.querySelector('input[name="remarks1[]"]').value =
                opt.dataset.remark || "";

            row.querySelector('input[name="pmtamtori[]"]').value =
                opt.dataset.amount || 0;
        }
    });
</script>
<script>
    function toggleSaveButton() {
        const btnSave = document.getElementById("btnSavePV");
        const detailCount = document.querySelectorAll("#detailTable tbody tr").length;

        // Save hanya aktif kalau ada detail
        btnSave.disabled = detailCount === 0;
    }

    // Default: Save mati saat modal dibuka
    document.addEventListener("DOMContentLoaded", function () {
        toggleSaveButton();
        toggleJVButtons();
    });
</script>
<script>
    function formatIDR(val) {
        return Number(val || 0).toLocaleString("id-ID");
    }

    function formatUSD(val) {
        return Number(val || 0).toLocaleString("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
    function formatAcctNo(acct) {
        if (!acct || acct.length !== 25) return acct || "";

        return acct.substring(0, 4) + " " +
            acct.substring(4, 15) + " " +
            acct.substring(15, 16) + " " +
            acct.substring(16, 19) + " " +
            acct.substring(19, 21) + " " +
            acct.substring(21, 22) + " " +
            acct.substring(22, 25);
    }
</script>

<script>
    document.getElementById("pvForm").addEventListener("submit", function () {

        // 🔥 Bersihkan AP Acct → kirim RAW ke backend
        document.querySelectorAll('input[name="acct_ap[]"]').forEach(i => {
            i.value = i.value.replace(/\D/g, '');
        });

    });
</script>


{% endblock %}