{% 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;">
        <input type="text" name="search_ref" class="form-control" placeholder="Search Ref No..."
            value="{{ search_ref }}" style="width: 150px;">
        <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>

        <form method="POST" action="{% url 'upload_excel_journal' %}" enctype="multipart/form-data"
            style="display:inline;" id="uploadJournalForm">

            {% csrf_token %}

            <input type="file" name="file" id="journalCsvFile" accept=".csv" style="display:none;"
                onchange="document.getElementById('uploadJournalForm').submit();">

            <button type="button" class="btn btn-secondary"
                onclick="document.getElementById('journalCsvFile').click();">
                Upload Journal
            </button>

        </form>

        {% if last_ref %}
        <a href="{% url 'journal_pdf' last_ref %}" class="btn btn-secondary" target="_blank">
            PDF
        </a>
        {% endif %}

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

        {% if journal_header and not journal_header.approved %}
        <form method="POST" action="{% url 'delete_journal_header' journal_header.ref_no %}" style="display:inline;"
            onsubmit="return confirm('Are you sure you want to delete this Journal Voucher?')">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">
                Delete Journal
            </button>
        </form>
        {% endif %}

    </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 class="col-md-4">
                <span class="text-muted" style="min-width:90px; display:inline-block;">Status</span> :
                {% if journal_header.void %}
                <span class="badge bg-danger">VOID</span>
                {% elif journal_header.approved %}
                <span class="badge bg-success">APPROVED</span>
                {% else %}
                <span class="badge bg-warning text-dark">NOT APPROVED</span>
                {% endif %}
            </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>CC</th>
                <th>AFE</th>
                <th>Description</th>
                <th>Vendor</th>
                <th>Contract No</th>
                <th>Invoice No</th>
                <th>Org Amt</th>
                <th>USD Amt</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.cc_no_id|default:"-" }}
                    {% if j.cc_no_id %}
                    - {{ cc_map|get_item:j.cc_no_id|default:"" }}
                    {% endif %}
                </td>

                <td>
                    {{ j.afeno_id|default:"-" }}
                    {% if j.afeno_id %}
                    - {{ afe_map|get_item:j.afeno_id|default:"" }}
                    {% endif %}
                </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>
                    <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.header.ref_no }}')"
                            title="Edit">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        {% endif %}


                    </div>
                </td>

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

    </table>
</div>

{% if paginator.num_pages > 1 %}
<div class="d-flex justify-content-center align-items-center gap-2 mt-3 mb-4">

    {% if page_obj.has_previous %}
    <a href="?page=1{% if search_ref %}&search_ref={{ search_ref|urlencode }}{% endif %}"
        class="btn btn-sm btn-secondary">
        First
    </a>

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

    <button class="btn btn-sm btn-secondary" disabled>
        Previous
    </button>
    {% endif %}


    <span class="mx-2 fw-bold">
        Journal {{ page_obj.number }}
        of
        {{ paginator.num_pages }}
    </span>


    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}{% if search_ref %}&search_ref={{ search_ref|urlencode }}{% endif %}"
        class="btn btn-sm btn-secondary">
        Next
    </a>

    <a href="?page={{ paginator.num_pages }}{% if search_ref %}&search_ref={{ search_ref|urlencode }}{% endif %}"
        class="btn btn-sm btn-secondary">
        Last
    </a>
    {% else %}
    <button class="btn btn-sm btn-secondary" disabled>
        Next
    </button>

    <button class="btn btn-sm btn-secondary" disabled>
        Last
    </button>
    {% endif %}

</div>
{% endif %}

<!-- <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 d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <h5 class="modal-title mb-0" id="journalModalLabel">
                        Add Journal Entry
                    </h5>

                    <!-- 🔥 REF NO (HIDDEN BY DEFAULT) -->
                    <span id="modalRefNo" class="fw-bold" style="font-size: 1.4rem; display: none;">
                    </span>
                </div>

                <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="ref_no" id="ref_no">
                    <input type="hidden" name="journal_id" id="journal_id" value="{{ header.id|default:'' }}">
                    <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="text"
           class="form-control date-input"
           name="date"
           id="date"
           placeholder="DD-MM-YYYY"
           maxlength="10"
           autocomplete="off"
           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: 12%;">CC</th>
                                    <th style="width: 16%;">AFE</th>
                                    <th style="width: 25%;">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="4" 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>

<!-- ================= Browse CC Modal ================= -->

<div class="modal fade" id="browseCCModal" tabindex="-1">

    <div class="modal-dialog modal-xl">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Browse Cost Center</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <input class="form-control mb-2" id="searchCC" placeholder="Search CC...">

                <div style="max-height:400px; overflow:auto;">

                    <table class="table table-hover table-sm">

                        <thead class="table-dark">

                            <tr>

                                <th></th>
                                <th>CC No</th>
                                <th>CC Name</th>

                            </tr>

                        </thead>

                        <tbody id="ccTableBody">

                            {% for cc in ccs %}

                            <tr>

                                <td>
                                    <input type="checkbox" class="cc-check" data-cc="{{ cc.cc_no }}"
                                        data-ccname="{{ cc.cc_name|default:'' }}">
                                </td>

                                <td>{{ cc.cc_no }}</td>

                                <td>{{ cc.cc_name|default:'' }}</td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="addCCSelected">
                    Add Selected
                </button>

                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>

            </div>

        </div>

    </div>

</div>


<!-- ================= Browse AFE Modal ================= -->

<div class="modal fade" id="browseAFEModal" tabindex="-1">

    <div class="modal-dialog modal-xl">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Browse AFE</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <input class="form-control mb-2" id="searchAFE" placeholder="Search AFE...">

                <div style="max-height:400px; overflow:auto;">

                    <table class="table table-hover table-sm">

                        <thead class="table-dark">

                            <tr>

                                <th></th>
                                <th>AFE No</th>
                                <th>AFE Name</th>
                                <th>AFE Type</th>

                            </tr>

                        </thead>

                        <tbody id="afeTableBody">

                            {% for afe in afecodes %}

                            <tr>

                                <td>
                                    <input type="checkbox" class="afe-check" data-afeno="{{ afe.afeno }}"
                                        data-afename="{{ afe.afename|default:'' }}">
                                </td>

                                <td>{{ afe.afeno }}</td>

                                <td>{{ afe.afename|default:'' }}</td>

                                <td>{{ afe.afetype|default:'' }}</td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="addAFESelected">
                    Add Selected
                </button>

                <button type="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');

        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>


        <!-- CC -->
        <td>

            <div class="input-group">

                <input type="text"
                    class="form-control form-control-sm"
                    name="cc_no[]"
                    value="${detail.cc_no || ''}"
                    readonly>

                <button type="button"
                        class="btn btn-sm btn-secondary"
                        onclick="openBrowseCC(this)">
                    Browse
                </button>

            </div>

        </td>


        <!-- AFE -->
        <td>

            <div class="input-group">

                <input type="text"
                    class="form-control form-control-sm"
                    name="afeno[]"
                    value="${detail.afeno || ''}"
                    readonly>

                <button type="button"
                        class="btn btn-sm btn-secondary"
                        onclick="openBrowseAFE(this)">
                    Browse
                </button>

            </div>

        </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 || ''}"
                   readonly>

        </td>


        <!-- ACTION -->
        <td>

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

        </td>
    `;

        tbody.appendChild(tr);

        window.currentTargetRow = tr;

        const oriInput = tr.querySelector('.ori-input');

        if (oriInput) {
            bindOriTyping(oriInput);
            bindOriFormatter(oriInput);
        }

        bindAutoUSDRow(tr);

        calculateUSD(tr);
        calculateTotals();
    }

    function bindUSDFormatter() {
        document.querySelectorAll('.usd-input').forEach(input => {

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

            const handler = function () {
                let raw = input.value;
                let isNegative = raw.startsWith('-');

                raw = raw.replace(/[^0-9.]/g, '');

                if (raw === '') {
                    input.value = isNegative ? '-' : '';
                    return;
                }

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

                input.value = isNegative
                    ? `-${intPart}${decPart ? '.' + decPart : ''}`
                    : `${intPart}${decPart ? '.' + decPart : ''}`;
            };

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


    /* --- format currency inputs --- */
    function formatCurrencyInputs() {
        document.querySelectorAll('.ori-input, .usd-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) : '';

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

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

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

    function bindOriTyping(input) {
        input.addEventListener("input", function () {
            let raw = input.value;
            let isNegative = raw.startsWith('-');

            raw = raw.replace(/[^0-9,]/g, '');

            if (raw === '') {
                input.value = isNegative ? '-' : '';
                return;
            }

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

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

            input.value = isNegative
                ? `-${intPart}${decPart ? ',' + decPart : ''}`
                : `${intPart}${decPart ? ',' + decPart : ''}`;

            // 🔥 TAMBAHKAN INI
            const row = input.closest('tr');
            calculateUSD(row);
            calculateTotals();
        });
    }

    function bindOriFormatter(input) {
        input.addEventListener("blur", function () {
            const val = parseIDNumber(input.value);
            if (val !== 0) {
                input.value = formatOri(val);
            }
        });
    }


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

    /* --- Browse CC --- */

    document.getElementById('searchCC').addEventListener('keyup', function () {

        const f = this.value.toLowerCase();

        document.querySelectorAll('#ccTableBody tr').forEach(tr => {

            tr.style.display =
                tr.textContent.toLowerCase().includes(f)
                    ? ''
                    : 'none';

        });

    });


    /* --- Browse AFE --- */

    document.getElementById('searchAFE').addEventListener('keyup', function () {

        const f = this.value.toLowerCase();

        document.querySelectorAll('#afeTableBody tr').forEach(tr => {

            tr.style.display =
                tr.textContent.toLowerCase().includes(f)
                    ? ''
                    : 'none';

        });

    });

    /* --- Reset form for Add --- */
    function resetForm() {
        document.getElementById('journalForm').reset();
        document.getElementById('journalModalLabel').innerText = "Add Journal Entry";

        // 🔥 SEMBUNYIKAN REF NO
        const refSpan = document.getElementById('modalRefNo');
        refSpan.style.display = "none";
        refSpan.innerText = "";

        document.getElementById('journalForm').action = "{% url 'save_journal' %}";
        document.getElementById('journal_id').value = "";

        document.getElementById('jvcode').disabled = false; // ⬅️ BUKA LAGI
        document.getElementById('date').disabled = false;
        document.getElementById('currsign').disabled = false;
        document.getElementById('rate').disabled = false;
        document.getElementById('reverse').disabled = false;
        document.getElementById('jvcode_hidden').value = "";
        // clear detail rows
        document.getElementById('detailBody').innerHTML = '';
        document.querySelector(
            '#journalModal .modal-body .row.mt-4'
        ).style.display = '';

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

        isLoadingEdit = false;
    }

    /* --- Edit existing single Journal --- */

    window.editJournal = function (ref_no) {

        isLoadingEdit = true;

        fetch(
            `{% url 'journal_get_details' %}?ref_no=${encodeURIComponent(ref_no)}`
        )
            .then(async res => {
                const text = await res.text();

                if (!res.ok) {
                    throw new Error(
                        `HTTP ${res.status}: ${text}`
                    );
                }

                try {
                    return JSON.parse(text);
                } catch (e) {
                    throw new Error(
                        `Response bukan JSON: ${text}`
                    );
                }
            }).then(data => {

                const isAutomatic =
                    data.header.otomatis === true;


                /* =========================
                   TITLE
                   ========================= */

                document.getElementById(
                    'journalModalLabel'
                ).innerText =
                    isAutomatic
                        ? "Edit Automatic Journal"
                        : "Edit Manual Journal";


                /* =========================
                   REF NO
                   ========================= */

                const refSpan =
                    document.getElementById('modalRefNo');

                refSpan.innerText =
                    formatJournalNoJS(
                        data.header.ref_no
                    );

                refSpan.style.display =
                    "inline-block";

                document.getElementById('ref_no').value =
                    data.header.ref_no;


                /* =========================
                   HEADER
                   ========================= */

                document.getElementById('jvcode').value =
                    data.header.jvcode;

                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 =
                    data.header.rate;

                document.getElementById('reverse').checked =
                    data.header.reverse;


                /* =========================
                   HEADER LOCK
                   ========================= */

                document.getElementById('jvcode').disabled = true;

                document.getElementById('date').disabled =
                    isAutomatic;

                document.getElementById('currsign').disabled =
                    isAutomatic;

                document.getElementById('rate').disabled =
                    isAutomatic;

                document.getElementById('reverse').disabled =
                    isAutomatic;


                /* =========================
                   DETAIL
                   ========================= */

                const body =
                    document.getElementById('detailBody');

                body.innerHTML = '';


                data.details.forEach(d => {

                    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="${formatAcctNoJS(d.acct_no || '')}"
                               readonly>

                        <button type="button"
                                class="btn btn-sm btn-secondary"
                                onclick="openBrowseAccount(this)"
                                ${isAutomatic ? 'disabled' : ''}>
                            Browse
                        </button>

                    </div>

                    <input type="hidden"
                           name="acct_no[]"
                           value="${d.acct_no || ''}">

                </td>


                <!-- CC -->
                <td>

                    <div class="input-group">

                        <input type="text"
                            class="form-control form-control-sm"
                            name="cc_no[]"
                            value="${d.cc_no || ''}"
                            readonly>

                        <button type="button"
                                class="btn btn-sm btn-secondary"
                                onclick="openBrowseCC(this)"
                                ${isAutomatic ? 'disabled' : ''}>
                            Browse
                        </button>

                    </div>

                </td>


                <!-- AFE -->
                <td>

                    <div class="input-group">

                        <input type="text"
                            class="form-control form-control-sm"
                            name="afeno[]"
                            value="${d.afeno || ''}"
                            readonly>

                        <button type="button"
                                class="btn btn-sm btn-secondary"
                                onclick="openBrowseAFE(this)"
                                ${isAutomatic ? 'disabled' : ''}>
                            Browse
                        </button>

                    </div>

                </td>

                <!-- DESCRIPTION -->
                <td>

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

                </td>


                <!-- ORG AMOUNT -->
                <td>

                    <input type="text"
                           class="form-control form-control-sm ori-input"
                           name="oriamt[]"
                           value="${formatNumber(d.oriamt, 2)}"
                           ${isAutomatic ? 'readonly' : ''}>

                </td>


                <!-- USD AMOUNT -->
                <td>

                    <input type="text"
                           class="form-control form-control-sm usd-input"
                           name="usdamt[]"
                           value="${formatNumber(d.usdamt, 2)}"
                           readonly>

                </td>


                <!-- ACTION -->
                <td>

                    <button type="button"
                            class="btn btn-sm btn-danger"
                            onclick="
                                this.closest('tr').remove();
                                calculateTotals();
                            "
                            ${isAutomatic ? 'disabled' : ''}>
                        Remove
                    </button>

                </td>
            `;


                    body.appendChild(tr);


                    const oriInput =
                        tr.querySelector('.ori-input');

                    if (oriInput) {

                        bindOriTyping(oriInput);
                        bindOriFormatter(oriInput);

                    }

                    bindAutoUSDRow(tr);

                    calculateUSD(tr);

                });


                /* =========================
                   ADD DETAIL
                   ========================= */

                document.querySelector(
                    '#journalModal .modal-body .row.mt-4'
                ).style.display =
                    isAutomatic ? 'none' : '';


                /* =========================
                   SAVE BUTTON
                   ========================= */

                document.querySelector(
                    '#journalModal .modal-footer .btn-primary'
                ).innerText =
                    isAutomatic
                        ? 'Update Description'
                        : 'Update Journal';


                calculateTotals();

                isLoadingEdit = false;


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

            })
            .catch(error => {

                console.error(error);

                isLoadingEdit = false;

                alert(
                    "Failed to load Journal."
                );

            });
    };

    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('.ori-input, .usd-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();


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

    let browseAccountModal = null;
    let browseCCModal = null;
    let browseAFEModal = null;


    function openBrowseCC(btn) {

        window.currentTargetRow = btn.closest("tr");

        browseCCModal = new bootstrap.Modal(
            document.getElementById("browseCCModal")
        );

        browseCCModal.show();
    }


    function openBrowseAFE(btn) {

        window.currentTargetRow = btn.closest("tr");

        browseAFEModal = new bootstrap.Modal(
            document.getElementById("browseAFEModal")
        );

        browseAFEModal.show();
    }

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

    function calculateUSD(row) {
        const curr = document.getElementById("currsign").value;
        const rate = parseIDNumber(document.getElementById("rate").value);
        const ori = parseIDNumber(row.querySelector('.ori-input').value);

        const usdInput = row.querySelector('.usd-input');

        let usd = 0;

        if (curr === "USD") {
            usd = ori;
        } else if (rate > 0) {
            usd = ori / rate;
        }

        // 🔒 ROUND FINAL KE 2 DESIMAL (ACCOUNTING RULE)
        usd = Math.round(usd * 100) / 100;

        usdInput.value = formatUSD(usd);
    }

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


    // 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 v = this.value.replace(/[^0-9.]/g, '');
                let parts = v.split('.');
                this.value = parts[0] + (parts[1] ? '.' + parts[1].slice(0, 6) : '');
            });
        }

        // 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 => {
            totalOri += parseIDNumber(
                row.querySelector('.ori-input').value
            );

            totalUsd += parseUSNumber(
                row.querySelector('.usd-input').value
            );
        });

        // 🔒 NORMALISASI FLOATING RESIDUAL
        if (Math.abs(totalUsd) < 0.005) totalUsd = 0;

        document.getElementById("totalOri").innerText = formatOri(totalOri);
        document.getElementById("totalUsd").innerText = formatUSD(totalUsd);
    }

    function formatOri(val) {
        return val.toLocaleString('id-ID', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function formatUSD(val) {
        // 🔒 NORMALISASI -0 → 0
        if (Object.is(val, -0)) val = 0;

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

    function parseLocaleNumber(val) {
        if (!val) return 0;

        // hapus spasi
        val = val.trim();

        // hapus pemisah ribuan (.)
        val = val.replace(/\./g, '');

        // ganti koma jadi desimal
        val = val.replace(',', '.');

        let num = parseFloat(val);
        return isNaN(num) ? 0 : num;
    }

    function parseIDNumber(val) {
        if (!val) return 0;
        val = val.trim();
        val = val.replace(/\./g, ''); // hapus ribuan
        val = val.replace(',', '.');  // koma → desimal
        const num = parseFloat(val);
        return isNaN(num) ? 0 : num;
    }

    function parseUSNumber(val) {
        if (!val) return 0;
        val = val.trim();
        val = val.replace(/,/g, '');
        let num = parseFloat(val);
        if (Object.is(num, -0)) num = 0;
        return isNaN(num) ? 0 : num;
    }

    function formatJournalNoJS(ref) {
        if (!ref || ref.length < 9) return ref;

        ref = ref.padStart(9, '0');
        return (
            ref.substring(0, 2) + "." +
            ref.substring(2, 4) + "." +
            ref.substring(4, 6) + "-" +
            ref.substring(6)
        );
    }

    function formatRateInput(el) {
        if (!el || !el.value) return;

        // ambil angka mentah (ID style)
        let raw = el.value.toString().trim();

        // normalisasi: hapus ribuan, ubah koma ke titik
        raw = raw.replace(/\./g, '').replace(',', '.');

        let num = parseFloat(raw);
        if (isNaN(num)) {
            el.value = '';
            return;
        }

        // format ke ID dengan 6 desimal
        el.value = num.toLocaleString('id-ID', {
            minimumFractionDigits: 6,
            maximumFractionDigits: 6
        });
    }

</script>
<script>

    /* --- Add Selected CC --- */

    document.getElementById('addCCSelected').addEventListener('click', function () {

        const checked = document.querySelectorAll('.cc-check:checked');

        if (!checked.length || !window.currentTargetRow) {
            return;
        }

        const input = window.currentTargetRow.querySelector(
            'input[name="cc_no[]"]'
        );

        if (input) {
            input.value = checked[0].dataset.cc || '';
        }

        checked.forEach(cb => {
            cb.checked = false;
        });

        window.currentTargetRow = null;

        if (browseCCModal) {
            browseCCModal.hide();
        }

    });


    /* --- Add Selected AFE --- */

    document.getElementById('addAFESelected').addEventListener('click', function () {

        const checked = document.querySelectorAll('.afe-check:checked');

        if (!checked.length || !window.currentTargetRow) {
            return;
        }

        const input = window.currentTargetRow.querySelector(
            'input[name="afeno[]"]'
        );

        if (input) {
            input.value = checked[0].dataset.afeno || '';
        }

        checked.forEach(cb => {
            cb.checked = false;
        });

        window.currentTargetRow = null;

        if (browseAFEModal) {
            browseAFEModal.hide();
        }

    });

    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();

        if (browseAccountModal) {
            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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    flatpickr(".date-input", {
        dateFormat: "d-m-Y",
        allowInput: true,
        locale: {
            firstDayOfWeek: 1
        }
    });
});
</script>

{% endblock %}