{% 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>
    <form method="GET" action="" class="d-flex" style="gap: 8px; max-width: 350px;">
        <input type="text" name="search_ref" class="form-control" placeholder="Search Ref No..."
            value="{{ search_ref }}">
        <button type="submit" class="btn btn-secondary">Search</button>

        {% if search_ref %}
        <a href="{% url 'journal' %}" class="btn btn-outline-secondary">Reset</a>
        {% endif %}
    </form>
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#journalModal"
            onclick="resetForm()">
            Add Journal Entry
        </button>
        {% if last_ref %}
        <a href="{% url 'journal_pdf' last_ref %}" class="btn btn-secondary" target="_blank">
            Generate PDF
        </a>
        {% endif %}

        <a href="{% url 'export_to_excel_journal' %}?ref_no={{ last_ref }}" class="btn btn-success">Export to Excel</a>
    </div>
</div>

{% if journal_header %}
<div class="card mb-3 shadow-sm">

    <div class="card-body py-2 small">

        <!-- ================= ROW 1 : MAIN IDENTIFIER ================= -->
        <div class="row mb-1 align-items-center">
            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Ref No</span> :
                <span class="fw-bold fs-5">
                    {{ journal_header.ref_no|format_ref_no }}
                </span>
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Currency</span> :
                {{ journal_header.currsign }}
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Reverse</span> :
                <input type="checkbox" disabled {% if journal_header.reverse %}checked{% endif %}>
            </div>


        </div>

        <!-- ================= ROW 2 : FINANCIAL CONTEXT ================= -->
        <div class="row mb-1">

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Date</span> :
                {{ journal_header.date|date:"d-m-Y" }}
            </div>


            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Rate</span> :
                {{ journal_header.rate|format_currency_dynamic:journal_header.currsign }}
            </div>

            <div class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Entry By</span> :
                {{ journal_header.entryby }}
            </div>

        </div>
    </div>
</div>
{% endif %}


<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>Account</th>
                <th>Description</th>
                <th>Vendor</th>
                <th>Contract No</th>
                <th>Invoice No</th>
                <th>Org Amt</th>
                <th>USD Amt</th>
                <th>Approved</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for j in journal %}
            <tr data-id="{{ j.id }}" data-ref_no="{{ j.header.ref_no }}" data-jvcode="{{ j.header.jvcode }}"
                data-date="{{ j.header.date|date:'Y-m-d' }}" data-currsign="{{ j.header.currsign|default_if_none:'' }}"
                data-rate="{{ j.header.rate }}" data-reverse="{{ j.header.reverse }}"
                data-acct_no="{{ j.acct_no|default_if_none:'' }}" data-descript="{{ j.descript|default_if_none:'' }}"
                data-oriamt="{{ j.oriamt }}" data-usdamt="{{ j.usdamt }}" data-approved="{{ j.header.approved }}">

                <td>{{ forloop.counter }}</td> <!-- Added row number -->

                <td>
                    {{ j.acct_no|format_acct_no }}
                    - {{ account_map|get_item:j.acct_no|default:"" }}
                </td>

                <td>{{ j.descript }}</td>
                <!-- Vendor -->
                <td>
                    {{ j.vendorcode|default:"-" }}
                    {% if j.vendorcode %}
                    - {{ vendor_map|get_item:j.vendorcode|default:"" }}
                    {% endif %}
                </td>


                <!-- Contract -->
                <td>{{ j.contractno|default:"-" }}</td>

                <!-- Invoice -->
                <td>{{ j.invno|default:"-" }}</td>

                <td>{{ j.oriamt|format_currency_dynamic:j.header.currsign }}</td>
                <td>{{ j.usdamt|format_currency_dynamic:'USD' }}</td>
                <td>
                    {% if j.header.approved %}
                    ✅
                    {% else %}
                    -
                    {% endif %}
                </td>

                <td>
                    <div class="d-flex gap-1">
                        {% if j.header.approved %}
                        <button class="btn btn-sm btn-secondary" disabled title="Approved">
                            <i class="bi bi-lock-fill"></i>
                        </button>
                        {% else %}
                        <button class="btn btn-sm btn-secondary" onclick="editJournal('{{ j.id }}')" title="Edit">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        {% endif %}

                        </button>
                        {% if j.header.approved %}
                        <button class="btn btn-sm btn-danger" disabled title="Journal Approved - Cannot Delete">
                            <i class="bi bi-trash"></i>
                        </button>
                        {% else %}
                        <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>
                        {% endif %}

                    </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">
                    <input type="hidden" name="jvcode_hidden" id="jvcode_hidden">


                    <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 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>
                            <tfoot>
                                <tr style="background:#f1f3f5; font-weight:600;">
                                    <td colspan="2" class="text-end">TOTAL</td>
                                    <td class="text-end">
                                        <span id="totalOri">0.00</span>
                                    </td>
                                    <td class="text-end">
                                        <span id="totalUsd">0.00</span>
                                    </td>
                                    <td></td>
                                </tr>
                            </tfoot>

                        </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|format_acct_no }}</td>
                                <td>{{ acc.acct_name }}</td>
                                <td>{{ acc.acct_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>

<!-- ================= JS: browse, add detail, helpers ================= -->

<script>
    let isLoadingEdit = false;
    /* --- helper to create a new detail row --- */

    function addDetailRow(detail = {}) {
        const tbody = document.getElementById('detailBody');

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

        // display value = formatted acct_no; hidden value = raw acct_no
        const rawAcct = detail.acct_no || '';
        const displayAcct = detail.acct_no_display || formatAcctNoJS(rawAcct);

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

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

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

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

        <!-- ACTION -->

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


    `;

        tbody.appendChild(tr);
        // set the currentTargetRow to the newly added row so Browse will fill it
        window.currentTargetRow = tr;
        formatCurrencyInputs();
        rebindAutoUSD();
        bindAutoUSDRow(tr); // bind this row's auto-usd as well
    }


    /* --- format currency inputs --- */
    function formatCurrencyInputs() {
        document.querySelectorAll('.currency-input').forEach(input => {

            input.removeEventListener('input', input._handler || (() => { }));

            const handler = function () {
                let raw = input.value;

                // ambil hanya 1 minus di depan
                let isNegative = raw.startsWith('-');

                // buang semua kecuali angka dan titik
                raw = raw.replace(/[^0-9.]/g, '');

                // JIKA BELUM ADA ANGKA → cukup tampilkan "-"
                if (raw === '') {
                    input.value = isNegative ? '-' : '';
                    return;
                }

                // split integer & decimal
                let parts = raw.split('.');
                let intPart = parts[0];
                let decPart = parts[1] ? parts[1].slice(0, 2) : '';

                // format ribuan
                intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                let formatted = decPart ? `${intPart}.${decPart}` : intPart;

                input.value = isNegative ? `-${formatted}` : formatted;
            };

            input.addEventListener('input', handler);
            input._handler = handler;
        });
    }

    // === AUTO CALCULATE USD AMOUNT (ori / rate) ===
    function setupAutoUSD() {
        document.querySelectorAll('input[name="oriamt[]"]').forEach(input => {
            // avoid duplicate handlers
            if (input._hasAutoUSD) return;
            input._hasAutoUSD = true;
            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;

                // Jika currency USD → USD amount = ORI amount
                if (document.getElementById('currsign').value === 'USD') {
                    usdInput.value = ori.toFixed(2);
                    return;
                }

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

    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';
        });
    });

    /* --- 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 = "";

        document.getElementById('jvcode').disabled = false; // ⬅️ BUKA LAGI
        document.getElementById('jvcode_hidden').value = "";
        // clear detail rows
        document.getElementById('detailBody').innerHTML = '';

        document.getElementById('totalOri').innerText = '0.00';
        document.getElementById('totalUsd').innerText = '0.00';

        isLoadingEdit = false;
    }

    /* --- Edit existing single Journal (ke modal) --- */
    window.editJournal = function (id) {
        isLoadingEdit = true;
        const row = document.querySelector(`tr[data-id="${id}"]`);
        const ref_no = row.dataset.ref_no;

        fetch(`/journal/get-details/?ref_no=${ref_no}`)
            .then(res => res.json())
            .then(data => {

                // header
                document.getElementById('journal_id').value = id;
                document.getElementById('jvcode').value = data.header.jvcode;
                document.getElementById('jvcode').disabled = true;
                document.getElementById('jvcode_hidden').value = data.header.jvcode;

                document.getElementById('date').value = data.header.date;
                document.getElementById('currsign').value = data.header.currsign;
                document.getElementById('rate').value = formatNumber(data.header.rate, 6);
                document.getElementById('reverse').checked = data.header.reverse;

                // clear detail
                const body = document.getElementById('detailBody');
                body.innerHTML = '';

                data.details.forEach(d => {
                    addDetailRow({
                        acct_no: d.acct_no,
                        descript: d.descript,
                        oriamt: formatNumber(d.oriamt, 2),
                        usdamt: formatNumber(d.usdamt, 2)
                    });

                });

                // ✅ AKTIFKAN LAGI auto-calc SETELAH load selesai
                isLoadingEdit = false;
                calculateTotals();

                new bootstrap.Modal(
                    document.getElementById('journalModal')
                ).show();
            });
    };

    document.getElementById("rate").addEventListener("input", function () {
        document.querySelectorAll('#detailBody tr').forEach(row => {
            calculateUSD(row);
        });
        calculateTotals();
    });


    /* --- Before submit: remove formatting (commas) from currency inputs --- */
    document.getElementById('journalForm').addEventListener('submit', function (e) {

        console.log("FORM DATA BEFORE SUBMIT");

        document.querySelectorAll('input[name="acct_no[]"]').forEach((x, i) => {
            console.log(`acct_no[${i}] =`, x.value);
        });

        // remove comma formatting
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });

        // ensure at least one non-empty acct_no[]
        const acctInputs = Array.from(document.querySelectorAll('input[name="acct_no[]"]'));
        const valid = acctInputs.some(f => f && f.value && f.value.trim() !== '');
        if (!valid) {
            alert("Detail Journal tidak boleh kosong dan harus ada Account No yang terisi!");
            e.preventDefault();
            return false;
        }
    });

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


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

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

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

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

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

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

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

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

        if (oriInput && !oriInput._boundForCalc) {
            oriInput._boundForCalc = true;
            oriInput.addEventListener("input", function () {
                calculateUSD(row);
                calculateTotals();
            });
        }

        if (usdInput && !usdInput._boundForCalcUsd) {
            usdInput._boundForCalcUsd = true;
            usdInput.addEventListener("input", calculateTotals);
        }
    }


    // 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, "");
            }
        });

    });

    function formatAcctNoJS(value) {
        if (!value || value.length !== 25) return value;

        return (
            value.slice(0, 4) + " " +
            value.slice(4, 15) + " " +
            value.slice(15, 16) + " " +
            value.slice(16, 19) + " " +
            value.slice(19, 21) + " " +
            value.slice(21, 22) + " " +
            value.slice(22, 25)
        );
    }

    document.getElementById("currsign").addEventListener("change", function () {
        const curr = this.value;
        const rateInput = document.getElementById("rate");
        const date = document.getElementById("date").value;

        if (!curr) return;

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

        // Jika belum pilih tanggal → jangan fetch API
        if (!date) {
            alert("Please select Date first.");
            this.value = "";
            return;
        }

        // Fetch rate dari backend
        fetch(`/journal/get-rate/?curr=${curr}&date=${date}`)
            .then(res => res.json())
            .then(data => {
                if (data.rate > 0) {
                    rateInput.value = data.rate;
                } else {
                    rateInput.value = "";
                    alert("Rate tidak ditemukan!");
                }
                bindAutoUSDAll();
            });
    });

    document.addEventListener("DOMContentLoaded", function () {

        const currSelect = document.getElementById("currsign");
        const rateInput = document.getElementById("rate");
        const dateInput = document.getElementById("date");

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

            if (!curr) return;

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

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

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

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

        currSelect.addEventListener("change", fetchRate);
        dateInput.addEventListener("change", fetchRate);

    });

    function calculateTotals() {
        let totalOri = 0;
        let totalUsd = 0;

        document.querySelectorAll('#detailBody tr').forEach(row => {
            const oriInput = row.querySelector('input[name="oriamt[]"]');
            const usdInput = row.querySelector('input[name="usdamt[]"]');

            let ori = oriInput ? parseFloat(oriInput.value.replace(/,/g, '')) || 0 : 0;
            let usd = usdInput ? parseFloat(usdInput.value.replace(/,/g, '')) || 0 : 0;

            totalOri += ori;
            totalUsd += usd;
        });

        document.getElementById('totalOri').innerText =
            totalOri.toLocaleString(undefined, { minimumFractionDigits: 2 });

        document.getElementById('totalUsd').innerText =
            totalUsd.toLocaleString(undefined, { minimumFractionDigits: 2 });
    }

</script>
<script>
    document.getElementById('addAccountSelected').addEventListener('click', function () {

        const checked = Array.from(document.querySelectorAll('.account-check:checked'));

        if (checked.length === 0) {
            alert("Please select at least one account.");
            return;
        }

        let firstUsed = false;

        checked.forEach(cb => {

            // 1️⃣ PAKAI ROW YANG DI-BROWSE (JIKA ADA & MASIH KOSONG)
            if (!firstUsed && window.currentTargetRow) {

                const acctHidden = window.currentTargetRow.querySelector('input[name="acct_no[]"]');
                const acctDisplay = window.currentTargetRow.querySelector('input[name="acct_no_display[]"]');

                if (acctHidden && !acctHidden.value) {
                    acctHidden.value = cb.dataset.acct;
                    acctDisplay.value = formatAcctNoJS(cb.dataset.acct);
                    firstUsed = true;
                    cb.checked = false;
                    return; // ⬅️ account pertama selesai
                }
            }

            // 2️⃣ SISANYA → TAMBAH ROW BARU
            addDetailRow({
                acct_no: cb.dataset.acct,
                acct_no_display: formatAcctNoJS(cb.dataset.acct),
                descript: '',
                oriamt: '',
                usdamt: ''
            });

            cb.checked = false;
        });

        window.currentTargetRow = null; // reset target
        calculateTotals();

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

    function formatNumber(value, decimals = 2) {
        if (value === null || value === undefined || value === '') return '';
        let num = parseFloat(value);
        if (isNaN(num)) return '';
        return num.toLocaleString(undefined, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        });
    }

</script>


{% endblock %}