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

{% block content %}
<style>
    /* (sama seperti style Anda sebelumnya, disingkat) */
    .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;
    }

    .small-input {
        padding: .35rem .5rem;
        font-size: .9rem;
    }

    .journal-modal {
        max-width: 95% !important;
        width: 95% !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;">Journal Entry</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Journal Voucher..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#journalModal"
            onclick="resetForm()">
            Add Journal Entry
        </button>
        <a href="{% url 'generate_pdf_journal' %}" class="btn btn-secondary">Generate PDF Report</a>
        <a href="{% url 'export_to_excel_journal' %}" class="btn btn-success">Export to Excel</a>
    </div>
</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="journalTable">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>JV Code</th>
                <th>JV No</th>
                <th>Ref No</th>
                <th>Date</th>
                <th>Currency</th>
                <th>Rate</th>
                <th>Reverse</th>
                <th>Account</th>
                <th>Description</th>
                <th>Vendor</th>
                <th>Contract No</th>
                <th>Invoice No</th>
                <th>Employee No</th>
                <th>Org Amount</th>
                <th>USD Amount</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for j in journal %}
            <tr data-id="{{ j.id }}" data-jvcode="{{ j.jvcode }}" data-jvno="{{ j.jvno }}" data-ref_no="{{ j.ref_no }}"
                data-date="{{ j.date|date:'Y-m-d' }}" data-currsign="{{ j.currsign|default_if_none:'' }}"
                data-rate="{{ j.rate }}" data-reverse="{{ j.reverse }}"
                data-acct_no="{{ j.acct_no|default_if_none:'' }}" data-descript="{{ j.descript|default_if_none:'' }}"
                data-vendorcode="{{ j.vendorcode|default_if_none:'' }}"
                data-contractno="{{ j.contractno|default_if_none:'' }}" data-invno="{{ j.invno|default_if_none:'' }}"
                data-empno="{{ j.empno|default_if_none:'' }}" data-orgamt="{{ j.oriamt }}" data-usdamt="{{ j.usdamt }}">

                <td>{{ forloop.counter }}</td>
                <td>{{ j.jvcode }}</td>
                <td>{{ j.jvno }}</td>
                <td>{{ j.ref_no|format_ref_no }}</td>
                <td>{{ j.date|date:"d-m-Y" }}</td>
                <td>{{ j.currsign }}</td>
                <td class="text-end">{{ j.rate|format_currency_dynamic:j.currsign }}</td>

                <td><input type="checkbox" disabled {% if j.reverse %}checked{% endif %}></td>

                <td>
                    {{ j.acct_no|format_acct_no }}
                    {% for acc in account %}
                    {% if acc.acct_no == j.acct_no %}
                    - {{ acc.acct_name }}
                    {% endif %}
                    {% endfor %}
                </td>

                <td>{{ j.descript }}</td>

                <td>
                    {{ j.vendorcode }}
                    {% for v in vendor %}
                    {% if v.vendorcode == j.vendorcode %}
                    - {{ v.vendorname }}
                    {% endif %}
                    {% endfor %}
                </td>

                <td>{{ j.contractno }}</td>
                <td>{{ j.invno }}</td>
                <td>{{ j.empno }}</td>

                <td>{{ j.orgamt|format_currency_dynamic:j.currsign }}</td>
                <td>{{ j.usdamt|format_currency_dynamic:'USD' }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="editJournal('{{ j.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_journal' j.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Journal Voucher?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>

            </tr>
            {% empty %}
            <tr>
                <td colspan="17" class="text-center">No Journal entries found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#journalTable tbody tr');
        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
</script>

<!-- ================= Journal Modal (form utama + detail table) ================= -->
<div class="modal fade" id="journalModal" tabindex="-1" aria-labelledby="journalModalLabel" aria-hidden="true">
    <div class="modal-dialog journal-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="journalModalLabel">Add Journal Entry</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

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

                    <div class="row mb-2">

                        <div class="col-md-4">
                            <label>JV Code</label>
                            <select class="form-control" name="jvcode" id="jvcode" required>
                                <option value="">-- Select JV Code --</option>
                                {% for jv in jvcodes %}
                                <option value="{{ jv.jvcode }}">{{ jv.jvcode }} - {{ jv.jvname }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>Date</label>
                            <input type="date" class="form-control" name="date" id="date" required>
                        </div>

                        <div class="col-md-3">
                            <label>Currency</label>
                            <select class="form-control" id="currsign" name="currsign" required>
                                <option value="">-- Select Currency --</option>
                                {% for c in matauangs %}
                                <option value="{{ c.currsign }}">{{ c.currsign }} - {{ c.currname }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-auto" style="max-width: 130px;">
                            <label>Rate</label>
                            <input type="text" class="form-control format-rate" name="rate" id="rate" required>
                        </div>

                        <div class="col-md-1 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="reverse" name="reverse">
                                <label class="form-check-label" for="reverse">Reverse</label>
                            </div>
                        </div>

                    </div>

                    <div class="row mt-4 mb-2">
                        <div class="col-md-12 text-end">
                            <button type="button" class="btn btn-secondary" onclick="addEmptyRow()">
                                + Add Detail
                            </button>
                        </div>
                    </div>

                    <!-- Detail table: rows created by selecting from browse modals -->
                    <div class="table-responsive mb-2">
                        <table class="table table-bordered w-100" id="detailTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>Account</th>
                                    <th style="width: 28%;">Description</th>
                                    <th>Vendor</th>
                                    <th>Contract</th>
                                    <th>Invoice</th>
                                    <th class="text-end">Org Amount</th>
                                    <th class="text-end">USD Amount</th>
                                    <th style="width: 80px;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="detailBody">
                                <!-- rows appended here by JS -->
                            </tbody>
                        </table>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">Pilih beberapa record di Browse, lalu klik "Add Selected" untuk
                            menambahkan ke detail.</small>
                    </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>
            </div>
        </div>
    </div>
</div>

<!-- ================= Browse Account Modal ================= -->
<div class="modal fade" id="browseAccountModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Browse Account</h5><button type="button" class="btn-close"
                    data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input class="form-control mb-2" id="searchAccount" placeholder="Search account...">
                <div style="max-height:400px; overflow:auto;">
                    <table class="table table-hover table-sm">
                        <thead class="table-dark">
                            <tr>
                                <th></th>
                                <th>Account No</th>
                                <th>Account Name</th>
                                <th>Type</th>
                            </tr>
                        </thead>
                        <tbody id="accountTableBody">
                            {% for acc in account %}
                            <tr>
                                <td><input type="checkbox" class="account-check" data-acct="{{ acc.acct_no }}"
                                        data-acctname="{{ acc.acct_name }}"></td>
                                <td>{{ acc.acct_no }}</td>
                                <td>{{ acc.acct_name }}</td>
                                <td>{{ acc.type }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="addAccountSelected">Add Selected</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- ================= Browse Vendor Modal ================= -->
<div class="modal fade" id="browseVendorModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Browse Vendor</h5><button type="button" class="btn-close"
                    data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input class="form-control mb-2" id="searchVendor" placeholder="Search vendor...">
                <div style="max-height:400px; overflow:auto;">
                    <table class="table table-hover table-sm">
                        <thead class="table-dark">
                            <tr>
                                <th></th>
                                <th>Vendor Code</th>
                                <th>Vendor Name</th>
                            </tr>
                        </thead>
                        <tbody id="vendorTableBody">
                            {% for v in vendor %}
                            <tr>
                                <td><input type="checkbox" class="vendor-check" data-vendor="{{ v.vendorcode }}"
                                        data-vendorname="{{ v.vendorname }}"></td>
                                <td>{{ v.vendorcode }}</td>
                                <td>{{ v.vendorname }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="addVendorSelected">Add Selected</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- ================= Browse Contract Modal ================= -->
<div class="modal fade" id="browseContractModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Browse Contract</h5><button type="button" class="btn-close"
                    data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input class="form-control mb-2" id="searchContract" placeholder="Search contract...">
                <div style="max-height:400px; overflow:auto;">
                    <table class="table table-hover table-sm">
                        <thead class="table-dark">
                            <tr>
                                <th></th>
                                <th>Contract No</th>
                                <th>Vendor</th>
                            </tr>
                        </thead>
                        <tbody id="contractTableBody">
                            {% for c in contracts %}
                            <tr>
                                <td><input type="checkbox" class="contract-check" data-contract="{{ c.contractno }}"
                                        data-vendor="{{ c.vendorcode.vendorcode }}"></td>

                                <td>{{ c.contractno }}</td>
                                <td>{{ c.vendorcode.vendorcode }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="addContractSelected">Add Selected</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- ================= Browse Invoice Modal ================= -->
<div class="modal fade" id="browseInvoiceModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Browse Invoice</h5><button type="button" class="btn-close"
                    data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input class="form-control mb-2" id="searchInvoice" placeholder="Search invoice...">
                <div style="max-height:400px; overflow:auto;">
                    <table class="table table-hover table-sm">
                        <thead class="table-dark">
                            <tr>
                                <th></th>
                                <th>Invoice No</th>
                                <th>Vendor</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="invoiceTableBody">
                            {% for inv in invoice %}
                            <tr>
                                <td><input type="checkbox" class="invoice-check" data-inv="{{ inv.invno }}"
                                        data-vendor="{{ inv.vendorcode.vendorcode }}"
                                        data-contract="{{ inv.contractno_id }}"
                                        data-oriamt="{{ inv.oriamt|default_if_none:0 }}"
                                        data-usdamt="{{ inv.usdamt|default_if_none:0 }}"></td>

                                <td>{{ inv.invno }}</td>
                                <td>{{ inv.vendorcode.vendorcode }}</td>
                                <td>{{ inv.oriamt|default_if_none:0 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="addInvoiceSelected">Add Selected</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- ================= JS: browse, add detail, helpers ================= -->
<script>
    /* --- helper to create a new detail row --- */
    function addDetailRow(detail = {}) {
        const tbody = document.getElementById('detailBody');

        const tr = document.createElement('tr');

        tr.innerHTML = `
        <!-- ACCOUNT -->
        <td>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" 
                       name="acct_no_display[]" 
                       value="${detail.acct_no || ''}" 
                       readonly>
                <button type="button" class="btn btn-sm btn-secondary" 
                        onclick="openBrowseAccount(this)">
                    Browse
                </button>
            </div>
            <input type="hidden" name="acct_no[]" value="${detail.acct_no || ''}">
        </td>

                <!-- DESCRIPTION -->
        <td>
            <input type="text" class="form-control form-control-sm" 
                   name="descript[]" 
                   value="${detail.descript || ''}">
        </td>

        <!-- VENDOR -->
        <td>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" 
                       name="vendor_display[]" 
                       value="${detail.vendorcode || ''}" 
                       readonly>
                <button type="button" class="btn btn-sm btn-secondary"
                        onclick="openBrowseVendor(this)">
                    Browse
                </button>
            </div>
            <input type="hidden" name="vendorcode[]" value="${detail.vendorcode || ''}">
        </td>

        <!-- CONTRACT -->
        <td>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" 
                       name="contract_display[]" 
                       value="${detail.contractno || ''}" readonly>
                <button type="button" class="btn btn-sm btn-secondary"
                        onclick="openBrowseContract(this)">
                    Browse
                </button>
            </div>
            <input type="hidden" name="contractno[]" value="${detail.contractno || ''}">
        </td>

        <!-- INVOICE -->
        <td>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" 
                       name="invoice_display[]" 
                       value="${detail.invno || ''}" readonly>
                <button type="button" class="btn btn-sm btn-secondary"
                        onclick="openBrowseInvoice(this)">
                    Browse
                </button>
            </div>
            <input type="hidden" name="invno[]" value="${detail.invno || ''}">
        </td>

        <!-- ORG AMT -->
        <td>
            <input type="text" class="form-control form-control-sm currency-input" 
                   name="oriamt[]" 
                   value="${detail.oriamt || ''}">
        </td>

        <!-- USD AMT -->
        <td>
            <input type="text" class="form-control form-control-sm currency-input" 
                   name="usdamt[]" 
                   value="${detail.usdamt || ''}">
        </td>

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

        tbody.appendChild(tr);
        formatCurrencyInputs();
        rebindAutoUSD();

    }

    /* --- format currency inputs --- */
    function formatCurrencyInputs() {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.removeEventListener('input', window._currencyHandler || function () { });
            const handler = function () {
                let val = input.value.replace(/[^0-9.]/g, '');
                input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            };
            input.addEventListener('input', handler);
            window._currencyHandler = handler;
        });
    }

    // === AUTO CALCULATE USD AMOUNT (ori / rate) ===
    function setupAutoUSD() {
        document.querySelectorAll('input[name="oriamt[]"]').forEach(input => {
            input.addEventListener('input', function () {
                const row = this.closest('tr');
                const usdInput = row.querySelector('input[name="usdamt[]"]');
                const rate = parseFloat(document.getElementById('rate').value.replace(/,/g, '')) || 0;

                let ori = parseFloat(this.value.replace(/,/g, '')) || 0;

                if (rate > 0) {
                    let usd = ori / rate;
                    usdInput.value = usd.toFixed(2);
                } else {
                    usdInput.value = "";
                }
            });
        });
    }

    function rebindAutoUSD() {
        setupAutoUSD();
    }

    // panggil lagi tiap kali row baru ditambahkan
    function rebindAutoUSD() {
        setupAutoUSD();
    }


    /* --- Browse Account --- */
    document.getElementById('searchAccount').addEventListener('keyup', function () {
        const f = this.value.toLowerCase();
        document.querySelectorAll('#accountTableBody tr').forEach(tr => {
            tr.style.display = tr.textContent.toLowerCase().includes(f) ? '' : 'none';
        });
    });
    document.getElementById('addAccountSelected').addEventListener('click', function () {
        document.querySelectorAll('.account-check:checked').forEach(cb => {

            let tr = window.currentTargetRow;
            tr.querySelector('input[name="acct_no_display[]"]').value = cb.dataset.acct;
            tr.querySelector('input[name="acct_no[]"]').value = cb.dataset.acct;

            cb.checked = false;
        });

        bootstrap.Modal.getInstance(document.getElementById('browseAccountModal')).hide();
    });


    /* --- Browse Vendor --- */
    document.getElementById('searchVendor').addEventListener('keyup', function () {
        const f = this.value.toLowerCase();
        document.querySelectorAll('#vendorTableBody tr').forEach(tr => {
            tr.style.display = tr.textContent.toLowerCase().includes(f) ? '' : 'none';
        });
    });

    document.getElementById('addVendorSelected').addEventListener('click', function () {
        document.querySelectorAll('.vendor-check:checked').forEach(cb => {

            let tr = window.currentTargetRow;
            tr.querySelector('input[name="vendor_display[]"]').value = cb.dataset.vendor;
            tr.querySelector('input[name="vendorcode[]"]').value = cb.dataset.vendor;

            cb.checked = false;
        });

        bootstrap.Modal.getInstance(document.getElementById('browseVendorModal')).hide();
    });


    /* --- Browse Contract --- */
    document.getElementById('searchContract').addEventListener('keyup', function () {
        const f = this.value.toLowerCase();
        document.querySelectorAll('#contractTableBody tr').forEach(tr => {
            tr.style.display = tr.textContent.toLowerCase().includes(f) ? '' : 'none';
        });
    });

    document.getElementById('addContractSelected').addEventListener('click', function () {
        document.querySelectorAll('.contract-check:checked').forEach(cb => {

            let tr = window.currentTargetRow;
            tr.querySelector('input[name="contract_display[]"]').value = cb.dataset.contract;
            tr.querySelector('input[name="contractno[]"]').value = cb.dataset.contract;

            cb.checked = false;
        });

        bootstrap.Modal.getInstance(document.getElementById('browseContractModal')).hide();
    });


    /* --- Browse Invoice --- */
    document.getElementById('searchInvoice').addEventListener('keyup', function () {
        const f = this.value.toLowerCase();
        document.querySelectorAll('#invoiceTableBody tr').forEach(tr => {
            tr.style.display = tr.textContent.toLowerCase().includes(f) ? '' : 'none';
        });
    });

    document.getElementById('addInvoiceSelected').addEventListener('click', function () {
        document.querySelectorAll('.invoice-check:checked').forEach(cb => {

            let tr = window.currentTargetRow;
            tr.querySelector('input[name="invoice_display[]"]').value = cb.dataset.inv;
            tr.querySelector('input[name="invno[]"]').value = cb.dataset.inv;

            tr.querySelector('input[name="oriamt[]"]').value = cb.dataset.oriamt || '';
            tr.querySelector('input[name="usdamt[]"]').value = cb.dataset.usdamt || '';

            cb.checked = false;
        });

        bootstrap.Modal.getInstance(document.getElementById('browseInvoiceModal')).hide();
    });


    /* --- Reset form for Add --- */
    function resetForm() {
        document.getElementById('journalForm').reset();
        document.getElementById('journalForm').action = "{% url 'save_journal' %}";
        document.getElementById('journalModalLabel').innerText = 'Add Journal Entry';
        document.getElementById('journal_id').value = "";
        // clear detail rows
        document.getElementById('detailBody').innerHTML = '';
    }

    /* --- Edit existing single Journal (ke modal) --- */
    window.editJournal = function (id) {
        const row = document.querySelector(`tr[data-id="${id}"]`);
        if (!row) return;
        document.getElementById('journalModalLabel').innerText = 'Edit Journal Voucher';
        document.getElementById('journalForm').action = "{% url 'save_journal' %}";
        document.getElementById('journal_id').value = id;
        document.getElementById('jvcode').value = row.dataset.jvcode;
        document.getElementById('jvno').value = row.dataset.jvno;
        document.getElementById('ref_no').value = row.dataset.ref_no;
        document.getElementById('date').value = row.dataset.date;
        document.getElementById('currsign').value = row.dataset.currsign;
        document.getElementById('rate').value = row.dataset.rate;
        document.getElementById('reverse').checked = (row.dataset.reverse === "True");
        // clear details and add single row populated from clicked row
        document.getElementById('detailBody').innerHTML = '';
        addDetailRow({
            acct_no: row.dataset.acct_no,
            acct_name: '', // optional: look up
            vendorcode: row.dataset.vendorcode,
            vendorname: '',
            contractno: row.dataset.contractno,
            invno: row.dataset.invno,
            descript: row.dataset.descript,
            oriamt: row.dataset.orgamt,
            usdamt: row.dataset.usdamt
        });
        new bootstrap.Modal(document.getElementById('journalModal')).show();
    };

    /* --- Before submit: remove formatting (commas) from currency inputs --- */
    document.getElementById('journalForm').addEventListener('submit', function () {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });
    });

    /* Initial format binding */
    formatCurrencyInputs();
    setupAutoUSD();


    function addEmptyRow() {
        addDetailRow({
            acct_no: '',
            acct_name: '',
            vendorcode: '',
            vendorname: '',
            contractno: '',
            invno: '',
            descript: '',
            oriamt: '',
            usdamt: ''
        });
    }

    function openBrowseAccount(btn) {
        window.currentTargetRow = btn.closest("tr");
        new bootstrap.Modal(document.getElementById("browseAccountModal")).show();
    }

    function openBrowseVendor(btn) {
        window.currentTargetRow = btn.closest("tr");
        new bootstrap.Modal(document.getElementById("browseVendorModal")).show();
    }

    function openBrowseContract(btn) {
        window.currentTargetRow = btn.closest("tr");

        let vendor = window.currentTargetRow.querySelector('input[name="vendorcode[]"]').value.trim();

        if (!vendor) {
            alert("Please select vendor first!");
            return;
        }

        document.querySelectorAll('#contractTableBody tr').forEach(tr => {
            let vendorInRow = tr.querySelector('.contract-check').dataset.vendor;
            tr.style.display = vendorInRow === vendor ? '' : 'none';
        });

        new bootstrap.Modal(document.getElementById("browseContractModal")).show();
    }

    function openBrowseInvoice(btn) {
        window.currentTargetRow = btn.closest("tr");

        // ambil vendor & contract dari row detail
        let vendorInput = window.currentTargetRow.querySelector('input[name="vendorcode[]"]');
        let contractInput = window.currentTargetRow.querySelector('input[name="contractno[]"]');

        let vendor = vendorInput ? vendorInput.value.trim() : '';
        let contract = contractInput ? contractInput.value.trim() : '';

        if (!vendor) {
            alert("Please select vendor first!");
            return;
        }
        if (!contract) {
            alert("Please select contract first!");
            return;
        }

        // reset filter terlebih dahulu: hide semua, lalu show yang cocok
        document.querySelectorAll('#invoiceTableBody tr').forEach(tr => {
            let cb = tr.querySelector('.invoice-check');
            if (!cb) { tr.style.display = 'none'; return; }
            let vendorInRow = cb.dataset.vendor ? cb.dataset.vendor.trim() : '';
            let contractInRow = cb.dataset.contract ? String(cb.dataset.contract).trim() : '';

            tr.style.display = (vendorInRow === vendor && contractInRow === contract) ? '' : 'none';
        });

        new bootstrap.Modal(document.getElementById("browseInvoiceModal")).show();
    }

</script>

<script>

    function calculateUSD(row) {
        const curr = document.getElementById("currsign").value;
        const rateInput = document.getElementById("rate");
        const rate = parseFloat(rateInput.value.replace(/,/g, "")) || 0;

        const oriInput = row.querySelector('input[name="oriamt[]"]');
        const usdInput = row.querySelector('input[name="usdamt[]"]');

        let ori = parseFloat(oriInput.value.replace(/,/g, "")) || 0;

        // Jika currency USD → USD amount = ORI amount (tidak dibagi rate)
        if (curr === "USD") {
            usdInput.value = ori.toFixed(2);
            return;
        }

        // Currency bukan USD → USD = ORI / Rate
        if (rate > 0) {
            usdInput.value = (ori / rate).toFixed(2);
        } else {
            usdInput.value = "";
        }
    }

    function bindAutoUSDRow(row) {
        const oriInput = row.querySelector('input[name="oriamt[]"]');

        oriInput.addEventListener("input", function () {
            calculateUSD(row);
        });
    }

    // Bind untuk semua row detail
    function bindAutoUSDAll() {
        document.querySelectorAll('#detailBody tr').forEach(row => {
            bindAutoUSDRow(row);
        });
    }

    // Kalau rate berubah → hitung ulang semua row
    document.getElementById("rate").addEventListener("input", function () {
        bindAutoUSDAll();
    });

    // Ketika tambah row → bind ulang
    function rebindAutoUSD() {
        bindAutoUSDAll();
    }

    /* ============================
       FORMATTER FOR RATE INPUT
       ============================ */
    document.addEventListener("DOMContentLoaded", function () {

        const rateInput = document.getElementById("rate");

        if (rateInput) {
            rateInput.addEventListener("input", function () {
                let value = this.value;

                // Hapus semua kecuali angka dan titik
                value = value.replace(/[^0-9.]/g, "");

                // Pisahkan integer & decimal
                let parts = value.split(".");
                let intPart = parts[0];
                let decPart = parts[1] ? parts[1].slice(0, 6) : ""; // maksimal 6 digit decimal

                // Format integer dengan koma ribuan
                intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                // Gabungkan kembali
                this.value = decPart ? intPart + "." + decPart : intPart;
            });
        }

        // Sebelum form submit → bersihkan koma
        document.getElementById("journalForm").addEventListener("submit", function () {
            if (rateInput) {
                rateInput.value = rateInput.value.replace(/,/g, "");
            }
        });

    });
</script>

{% endblock %}