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

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

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

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

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

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

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

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

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

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

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

    .delete-action-btn {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #ffffff !important;
    }

    .delete-action-btn:hover,
    .delete-action-btn:focus {
        background-color: #bb2d3b !important;
        border-color: #b02a37 !important;
        color: #ffffff !important;
    }


    .pagination-current {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Invoice Register</h2>

    <form method="GET" action="{% url 'invoice' %}" class="d-flex align-items-center" style="margin-right: 1rem;">
        <input type="text" name="search" id="searchInput" class="form-control" placeholder="Search Invoice No..."
            value="{{ search_query }}" style="max-width: 300px;">
    </form>

    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#invoiceModal"
            onclick="resetForm()">Add Invoice Register</button>
        <a href="{% url 'generate_pdf_invoice' %}" class="btn btn-secondary" target="_blank"
            rel="noopener noreferrer">Generate PDF Report</a>
        <a href="{% url 'export_to_excel_invoice' %}" class="btn btn-secondary">Export to Excel</a>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center px-3 mb-2">
    <div class="text-muted">
        {% if page_obj.paginator.count %}
        Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
        of {{ page_obj.paginator.count }}
        {% else %}
        Showing 0 - 0 of 0
        {% endif %}
    </div>

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

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

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

        <span class="ms-2">Go to</span>
        <form method="GET" action="{% url 'invoice' %}" class="d-flex align-items-center gap-1">
            {% if search_query %}<input type="hidden" name="search" value="{{ search_query }}">{% endif %}
            <input type="number" name="page" min="1" max="{{ page_obj.paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;" placeholder="Page">
            <button type="submit" class="btn btn-secondary btn-sm">Go</button>
        </form>
    </div>
</div>

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

                    flatpickr(".date-input", {
                        dateFormat: "d-m-Y",
                        allowInput: true,
                        locale: {
                            firstDayOfWeek: 1
                        }
                    });

                });
            </script>
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor Code</th>
                <th scope="col" class="align-middle">Name</th>
                <th scope="col" class="align-middle">Invoice Code</th>
                <th scope="col" class="align-middle">Invoice No</th>
                <th scope="col" class="align-middle">Invoice Date</th>
                <th scope="col" class="align-middle">Description</th>
                <th scope="col" class="align-middle">Contract No/Ref. No</th>
                <th scope="col" class="align-middle">Currency</th>
                <th scope="col" class="align-middle">Invoice Amount</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if invoice %}
            {% for invno in invoice %}
            <tr data-id="{{ invno.id }}" data-vendorcode="{{ invno.vendorcode.vendorcode }}"
                data-vendorname="{{ invno.vendorcode.vendorname }}" data-kodeinv="{{ invno.kodeinv }}"
                data-invdate="{{ invno.invdate|date:'Y-m-d' }}" data-invno="{{ invno.invno }}"
                data-logdate="{{ invno.logdate|date:'Y-m-d' }}" data-duedate="{{ invno.duedate|date:'Y-m-d' }}"
                data-description="{{ invno.description }}" data-cnc="{{ invno.cnc }}"
                data-contractno="{{ invno.contractno|default:'' }}" data-srvperiod="{{ invno.srvperiod }}"
                data-currsign="{{ invno.currsign.currsign|default_if_none:'' }}" data-amount="{{ invno.amount }}"
                data-dpp="{{ invno.dpp }}" data-vat="{{ invno.vat }}" data-totalamount="{{ invno.totalamount }}"
                data-userdate="{{ invno.userdate|date:'Y-m-d' }}" data-findate="{{ invno.findate|date:'Y-m-d' }}"
                data-goods1="{{ invno.goods1 }}" data-goods2="{{ invno.goods2 }}" data-goods3="{{ invno.goods3 }}"
                data-goods4="{{ invno.goods4 }}" data-goods5="{{ invno.goods5 }}" data-goods6="{{ invno.goods6 }}"
                data-goods7="{{ invno.goods7 }}" data-goods8="{{ invno.goods8 }}" data-goods9="{{ invno.goods9 }}"
                data-goods10="{{ invno.goods10 }}" data-goods11="{{ invno.goods11 }}" data-goods12="{{ invno.goods12 }}"
                data-goods13="{{ invno.goods13 }}" data-goods14="{{ invno.goods14 }}" data-goods15="{{ invno.goods15 }}"
                data-goods16="{{ invno.goods16 }}" data-goodslist1="{{ invno.goodslist1 }}" data-so1="{{ invno.so1 }}"
                data-so2="{{ invno.so2 }}" data-so3="{{ invno.so3 }}" data-so4="{{ invno.so4 }}"
                data-so5="{{ invno.so5 }}" data-so6="{{ invno.so6 }}" data-so7="{{ invno.so7 }}"
                data-so8="{{ invno.so8 }}" data-so9="{{ invno.so9 }}" data-so10="{{ invno.so10 }}"
                data-so11="{{ invno.so11 }}" data-so12="{{ invno.so12 }}" data-so13="{{ invno.so13 }}"
                data-so14="{{ invno.so14 }}" data-so15="{{ invno.so15 }}" data-so16="{{ invno.so16 }}"
                data-solist1="{{ invno.solist1 }}">


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

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary invoice-action-btn"
                            onclick="editinvoice('{{ invno.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_invoice' invno.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm delete-action-btn"
                                onclick="return confirm('Are you sure you want to delete this Invoice No?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                        <!-- Tombol print -->
                        <a href="{% url 'print_invoice' invno.id %}" target="_blank"
                            class="btn btn-sm btn-secondary invoice-action-btn">
                            <i class="bi bi-printer"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Invoice No. found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<form method="GET" action="{% url 'invoice' %}" id="invoiceSearchForm">
    <input type="hidden" name="page" value="1">
</form>

<div class="d-flex justify-content-between align-items-center px-3 mb-2">
    <div class="text-muted">
        {% if page_obj.paginator.count %}
        Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
        of {{ page_obj.paginator.count }}
        {% else %}
        Showing 0 - 0 of 0
        {% endif %}
    </div>

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

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

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

        <span class="ms-2">Go to</span>
        <form method="GET" action="{% url 'invoice' %}" class="d-flex align-items-center gap-1">
            {% if search_query %}<input type="hidden" name="search" value="{{ search_query }}">{% endif %}
            <input type="number" name="page" min="1" max="{{ page_obj.paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;" placeholder="Page">
            <button type="submit" class="btn btn-secondary btn-sm">Go</button>
        </form>
    </div>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            this.form.submit();
        }
    });
</script>


{{ invoice_form_data|json_script:"invoice-form-data" }}
{{ invoice_form_reopen|json_script:"invoice-form-reopen" }}
{{ invoice_form_error|json_script:"invoice-form-error" }}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const dataElement = document.getElementById("invoice-form-data");
        const reopenElement = document.getElementById("invoice-form-reopen");
        const errorElement = document.getElementById("invoice-form-error");
        const shouldReopen = reopenElement
            ? JSON.parse(reopenElement.textContent)
            : false;
        const validationMessage = document.getElementById("invoiceValidationMessage");

        if (validationMessage && errorElement) {
            const errorMessage = JSON.parse(errorElement.textContent || "null");
            if (errorMessage) {
                validationMessage.textContent = errorMessage;
                validationMessage.classList.remove("d-none");
            }
        }

        if (!shouldReopen || !dataElement) {
            return;
        }

        let formData = {};
        try {
            formData = JSON.parse(dataElement.textContent || "{}");
        } catch (e) {
            console.error("Unable to restore invoice form:", e);
            return;
        }

        const form = document.getElementById("invoiceForm");
        if (!form) return;

        // Isi field biasa berdasarkan name.
        Object.keys(formData).forEach(function (name) {
            if (name === "csrfmiddlewaretoken") return;

            const fields = form.querySelectorAll('[name="' + CSS.escape(name) + '"]');
            if (!fields.length) return;

            fields.forEach(function (field) {
                if (field.type === "checkbox") {
                    field.checked = formData[name] === "on";
                } else {
                    field.value = formData[name];
                }
            });
        });

        // Restore urutan field yang bergantung satu sama lain.
        const vendorSelect = document.getElementById("vendorcode");
        const invnoInput = document.getElementById("invno");
        const cncSelect = document.getElementById("cnc");
        const contractSelect = document.getElementById("contractno");
        const contractHidden = document.getElementById("contractno_hidden");

        if (vendorSelect && formData.vendorcode !== undefined) {
            vendorSelect.value = formData.vendorcode;
            vendorSelect.dispatchEvent(new Event("change", { bubbles: true }));
        }

        if (invnoInput && formData.invno !== undefined) {
            invnoInput.value = formData.invno;
        }

        if (cncSelect && formData.cnc !== undefined) {
            cncSelect.value = formData.cnc;
            cncSelect.dispatchEvent(new Event("change", { bubbles: true }));
        }

        // Setelah CNC diproses, kembalikan Contract No.
        if (contractSelect && formData.contractno !== undefined) {
            setTimeout(function () {
                if (formData.cnc === "Non-Commitment") {
                    // Untuk NC, fungsi setNonCommitmentContract() akan membuat
                    // NC-{Invoice No} secara otomatis.
                    contractSelect.value = "NC-" + (formData.invno || "");
                } else {
                    contractSelect.value = formData.contractno || "";
                }

                if (contractHidden) {
                    contractHidden.value = contractSelect.value;
                }

                contractSelect.dispatchEvent(new Event("change", { bubbles: true }));
            }, 100);
        }

        // Restore amount dan field lainnya setelah event dependency selesai.
        setTimeout(function () {
            Object.keys(formData).forEach(function (name) {
                if (name === "csrfmiddlewaretoken" || name === "contractno") return;

                const fields = form.querySelectorAll('[name="' + CSS.escape(name) + '"]');
                fields.forEach(function (field) {
                    if (field.type === "checkbox") {
                        field.checked = formData[name] === "on";
                    } else {
                        field.value = formData[name];
                    }
                });
            });

            if (contractHidden && contractSelect) {
                contractHidden.value = contractSelect.value;
            }

            // Buka kembali modal agar user bisa langsung memperbaiki Amount.
            const modalElement = document.getElementById("invoiceModal");
            if (modalElement && window.bootstrap) {
                const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
                modal.show();
            }
        }, 180);
    });
</script>

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

                <div id="invoiceValidationMessage" class="alert alert-danger d-none" role="alert"></div>

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

                    <div class="row">
                        <!-- KIRI -->
                        <div class="col-md-6">
                            <label for="vendorcode" class="form-label">Vendor</label>
                            <select class="form-control" id="vendorcode" name="vendorcode" required>
                                <option value="">-- Select Vendor Code --</option>
                                {% for v in vendor %}
                                <option value="{{ v.vendorcode }}">{{ v.vendorcode }} - {{ v.vendorname }}</option>
                                {% endfor %}
                            </select>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="kodeinv" class="form-label">Invoice Code</label>
                                    <select class="form-control" id="kodeinv" name="kodeinv" required>
                                        <option value="">-- Select Type --</option>
                                        <option value="Non PI">Non PI</option>
                                        <option value="PI">PI</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="invdate" class="form-label">Date</label>
                                    <input type="text" class="form-control date-input" id="invdate" name="invdate"
                                        placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off" required>
                                </div>
                            </div>

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

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="logdate" class="form-label">Log Date</label>
                                    <input type="text" class="form-control date-input" id="logdate" name="logdate"
                                        placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off" required>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="duedate" class="form-label">Due Date</label>
                                    <input type="text" class="form-control date-input" id="duedate" name="duedate"
                                        placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <input type="text" class="form-control" id="description" name="description" required>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="cnc" class="form-label">Commitment/Non-Commitment</label>
                                    <select class="form-control" id="cnc" name="cnc" required>
                                        <option value="">-- Select Type --</option>
                                        <option value="Commitment">Commitment</option>
                                        <option value="Non-Commitment">Non-Commitment</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="contractno" class="form-label">Contract No/Ref. No</label>
                                    <select class="form-control" id="contractno" name="contractno">
                                        <option value="">-- Select Contract --</option>
                                        {% for kontrak in contracts %}
                                        <option value="{{ kontrak.contractno }}"
                                            data-vendor="{{ kontrak.vendorcode.vendorcode }}">
                                            {{ kontrak.contractno }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" name="contractno_hidden" id="contractno_hidden">
                                </div>
                            </div>

                            <!-- <div class="mb-3">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="contract_notes" readonly></textarea>
                            </div> -->

                            <div class="mb-3">
                                <label for="sisa_kontrak" class="form-label">Remaining Contract Commitment</label>
                                <input type="text" class="form-control" id="sisa_kontrak" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="srvperiod" class="form-label">Srv. Period</label>
                                <input type="text" class="form-control date-input" id="srvperiod" name="srvperiod"
                                    placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off">
                            </div>

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

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

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

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

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


                        </div>

                        <!-- KANAN -->
                        <div class="col-md-6">
                            <div class="row">
                                <!-- KIRI -->
                                <div class="col-md-6">
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="goods1" name="goods1">
                                        <label for="goods1" class="form-check-label">Goods</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods2"
                                            name="goods2" disabled>
                                        <label for="goods2" class="form-check-label">Invoice + Materai</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods3"
                                            name="goods3" disabled>
                                        <label for="goods3" class="form-check-label">Photocopy Invoice</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods4"
                                            name="goods4" disabled>
                                        <label for="goods4" class="form-check-label">Faktur Pajak (3)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods5"
                                            name="goods5" disabled>
                                        <label for="goods5" class="form-check-label">SSP (5)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods6"
                                            name="goods6" disabled>
                                        <label for="goods6" class="form-check-label">PPh 23 (Non Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods7"
                                            name="goods7" disabled>
                                        <label for="goods7" class="form-check-label">PPh 4(2) (Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods8"
                                            name="goods8" disabled>
                                        <label for="goods8" class="form-check-label">Progress Report *)**)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods9"
                                            name="goods9" disabled>
                                        <label for="goods9" class="form-check-label">Timesheet *)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods10"
                                            name="goods10" disabled>
                                        <label for="goods10" class="form-check-label">Contract Photocopy</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods11"
                                            name="goods11" disabled>
                                        <label for="goods11" class="form-check-label">Copy of Requisition Letter</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods12"
                                            name="goods12" disabled>
                                        <label for="goods12" class="form-check-label">Project Summary and MoM</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods13"
                                            name="goods13" disabled>
                                        <label for="goods13" class="form-check-label">Berita Acara</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods14"
                                            name="goods14" disabled>
                                        <label for="goods14" class="form-check-label">A.F.E</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods15"
                                            name="goods15" disabled>
                                        <label for="goods15" class="form-check-label">Comply with PTK 007</label>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <!-- Checkbox Goods16 -->
                                        <div class="col-auto">
                                            <input type="checkbox" class="form-check-input goods-group" id="goods16"
                                                name="goods16" disabled onchange="toggleGoodsDesc()">
                                            <label class="form-check-label" for="goods16"></label>
                                        </div>

                                        <!-- Input Goodslist1 -->
                                        <div class="col">
                                            <input type="text" class="form-control" id="goodslist1" name="goodslist1"
                                                readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- KANAN -->
                                <div class="col-md-6">
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="so1" name="so1">
                                        <label for="so1" class="form-check-label">Service Order</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so2" name="so2"
                                            disabled>
                                        <label for="so2" class="form-check-label">Invoice + Materai</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so3" name="so3"
                                            disabled>
                                        <label for="so3" class="form-check-label">Photocopy Invoice</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so4" name="so4"
                                            disabled>
                                        <label for="so4" class="form-check-label">Faktur Pajak (3)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so5" name="so5"
                                            disabled>
                                        <label for="so5" class="form-check-label">SSP (5)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so6" name="so6"
                                            disabled>
                                        <label for="so6" class="form-check-label">PPh 23 (Non Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so7" name="so7"
                                            disabled>
                                        <label for="so7" class="form-check-label">PPh 4(2) (Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so8" name="so8"
                                            disabled>
                                        <label for="so8" class="form-check-label">SO Photocopy</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so9" name="so9"
                                            disabled>
                                        <label for="so9" class="form-check-label">SO Original</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so10" name="so10"
                                            disabled>
                                        <label for="so10" class="form-check-label">Copy of Requisition Letter</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so11" name="so11"
                                            disabled>
                                        <label for="so11" class="form-check-label">Service Requisition</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so12" name="so12"
                                            disabled>
                                        <label for="so12" class="form-check-label">Timesheet *)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so13" name="so13"
                                            disabled>
                                        <label for="so13" class="form-check-label">Berita Acara</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so14" name="so14"
                                            disabled>
                                        <label for="so14" class="form-check-label">A.F.E</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so15" name="so15"
                                            disabled>
                                        <label for="so15" class="form-check-label">Comply with PTK 007</label>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-auto">
                                            <input type="checkbox" class="form-check-input so-group" id="so16"
                                                name="so16" disabled onchange="toggleSoDesc()">
                                            <label class="form-check-label" for="so16"></label>
                                        </div>
                                        <div class="col">
                                            <input type="text" class="form-control" id="solist1" name="solist1"
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <hr style="margin-top: 0.5rem; margin-bottom: 1rem; border-top: 1px solid #ccc;"> -->
                            <hr>
                            <p style="color: green;" class="small mt-2">Routing Slip:</p>

                            <div class="mb-3">
                                <label for="userdate" class="form-label">Sent to User</label>
                                <input type="text" class="form-control date-input" id="userdate" name="userdate"
                                    placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off">
                            </div>
                            <div class="mb-3">
                                <label for="findate" class="form-label">Return from User</label>
                                <input type="text" class="form-control date-input" id="findate" name="findate"
                                    placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off">
                            </div>

                        </div>
                    </div>

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

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

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

<script>
    function toggleGoodsGroup() {
        const goodsGroup = document.querySelectorAll('.goods-group');
        const enabled = document.getElementById('goods1').checked;
        goodsGroup.forEach(cb => cb.disabled = !enabled);
    }

    function toggleSoGroup() {
        const soGroup = document.querySelectorAll('.so-group');
        const enabled = document.getElementById('so1').checked;
        soGroup.forEach(cb => cb.disabled = !enabled);
    }

    document.getElementById('goods1').addEventListener('change', function () {
        if (this.checked) {
            // Kalau Goods dipilih, Service Order harus clear
            document.getElementById('so1').checked = false;

            document.querySelectorAll('.so-group').forEach(cb => {
                cb.checked = false;
            });
        }

        toggleGoodsGroup();
        toggleSoGroup();
    });

    document.getElementById('so1').addEventListener('change', function () {
        if (this.checked) {
            // Kalau Service Order dipilih, Goods harus clear
            document.getElementById('goods1').checked = false;

            document.querySelectorAll('.goods-group').forEach(cb => {
                cb.checked = false;
            });
        }

        toggleGoodsGroup();
        toggleSoGroup();
    });
</script>


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

        function filterAccountOptions(selectedVendor, selectedAccount = '') {
            const accountOptions = accountSelect.querySelectorAll('option');
            let foundMatch = false;

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

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

                if (vendorMatch && option.value === selectedAccount) {
                    foundMatch = true;
                }
            });

            if (selectedAccount && foundMatch) {
                accountSelect.value = selectedAccount;
            } else {
                accountSelect.value = "";
            }
        }

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

        function formatCurrencyValue(value) {
            if (!value) return '';
            return parseFloat(value).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function formatDisplayDate(value) {
            if (!value || value === 'None') return '';

            const text = String(value).trim();

            // Already DD-MM-YYYY
            if (/^\d{2}-\d{2}-\d{4}$/.test(text)) {
                return text;
            }

            // Django date value: YYYY-MM-DD
            const isoMatch = text.match(/^(\d{4})-(\d{2})-(\d{2})/);
            if (isoMatch) {
                return `${isoMatch[3]}-${isoMatch[2]}-${isoMatch[1]}`;
            }

            return text;
        }

        function dateToISO(value) {
            const text = (value || '').trim();

            if (/^\d{2}-\d{2}-\d{4}$/.test(text)) {
                const [day, month, year] = text.split('-');
                return `${year}-${month}-${day}`;
            }

            if (/^\d{4}-\d{2}-\d{2}$/.test(text)) {
                return text;
            }

            return '';
        }

        function isValidDisplayDate(value) {
            const iso = dateToISO(value);
            if (!iso) return false;

            const [year, month, day] = iso.split('-').map(Number);
            const date = new Date(year, month - 1, day);

            return date.getFullYear() === year &&
                date.getMonth() === month - 1 &&
                date.getDate() === day;
        }

        function addDaysToDisplayDate(value, days) {
            const iso = dateToISO(value);
            if (!iso) return '';

            const [year, month, day] = iso.split('-').map(Number);
            const date = new Date(year, month - 1, day);
            date.setDate(date.getDate() + days);

            return `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${date.getFullYear()}`;
        }

        function setupDateInput(input) {
            if (!input) return;

            input.addEventListener('input', function () {
                let value = this.value.replace(/\D/g, '').slice(0, 8);

                if (value.length > 4) {
                    value = value.slice(0, 2) + '-' + value.slice(2, 4) + '-' + value.slice(4);
                } else if (value.length > 2) {
                    value = value.slice(0, 2) + '-' + value.slice(2);
                }

                this.value = value;
            });
        }

        document.querySelectorAll('.date-input').forEach(setupDateInput);

        window.editinvoice = function (invoiceId) {
            const row = document.querySelector(`tr[data-id="${invoiceId}"]`);
            if (!row) return;

            document.getElementById('invoiceModalLabel').innerText = 'Edit Invoice Register';
            document.getElementById('invoiceModalLabel').style.fontWeight = 'bold';
            document.getElementById('invoiceForm').action = "{% url 'save_invoice' %}";
            document.getElementById('invoice_id').value = invoiceId;

        vendorSelect.value = row.dataset.vendorcode;

        document.getElementById('kodeinv').value = (row.dataset.kodeinv || '').trim();
        document.getElementById('invdate').value = formatDisplayDate(row.dataset.invdate);
        document.getElementById('invno').value = row.dataset.invno;
        document.getElementById('logdate').value = formatDisplayDate(row.dataset.logdate);
        document.getElementById('duedate').value = formatDisplayDate(row.dataset.duedate);
        document.getElementById('description').value = row.dataset.description;
        document.getElementById('cnc').value = (row.dataset.cnc || '').trim();

        if (row.dataset.cnc === "Non-Commitment") {
            const contractSelect = document.getElementById('contractno');
            const contractHidden = document.getElementById('contractno_hidden');
            const ncCode = row.dataset.contractno || ("NC-" + row.dataset.invno);

            let ncOption = Array.from(contractSelect.options).find(
                option => option.value === ncCode
            );

            if (!ncOption) {
                ncOption = new Option(ncCode, ncCode);
                ncOption.dataset.nonCommitment = "true";
                contractSelect.add(ncOption);
            }

            contractSelect.value = ncCode;
            contractHidden.value = ncCode;
            contractSelect.disabled = true;
            document.getElementById('sisa_kontrak').value = "0.00";

        } else {
            filterContractOptions(row.dataset.vendorcode, row.dataset.contractno);
            document.getElementById('contractno').value = row.dataset.contractno;
            document.getElementById('contractno_hidden').value = row.dataset.contractno;
            fetchContractInfo(row.dataset.contractno, row.dataset.vendorcode);
        }
            document.getElementById('srvperiod').value = formatDisplayDate(row.dataset.srvperiod);
            document.getElementById('currsign').value = row.dataset.currsign;
            document.getElementById('amount').value = formatCurrencyValue(row.dataset.amount);
            document.getElementById('dpp').value = formatCurrencyValue(row.dataset.dpp);
            document.getElementById('vat').value = formatCurrencyValue(row.dataset.vat);
            document.getElementById('totalamount').value = formatCurrencyValue(row.dataset.totalamount);
            document.getElementById('userdate').value = formatDisplayDate(row.dataset.userdate);
            document.getElementById('findate').value = formatDisplayDate(row.dataset.findate);

            for (let i = 1; i <= 16; i++) {
                document.getElementById(`goods${i}`).checked = row.dataset[`goods${i}`] === 'True';
            }
            const goodslist1 = row.dataset.goodslist1;
            document.getElementById('goodslist1').value = goodslist1 === 'None' ? '' : goodslist1;

            for (let i = 1; i <= 16; i++) {
                document.getElementById(`so${i}`).checked = row.dataset[`so${i}`] === 'True';
            }
            const solist1 = row.dataset.solist1;
            document.getElementById('solist1').value = solist1 === 'None' ? '' : solist1;

            // Sesuaikan status tombol checklist saat Edit
            toggleGoodsGroup();
            toggleSoGroup();

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


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const cncSelect = document.getElementById('cnc');
        const contractSelect = document.getElementById('contractno');
        const contractHidden = document.getElementById('contractno_hidden');
        const vendorSelect = document.getElementById('vendorcode');
        const invnoInput = document.getElementById('invno');

        function setNonCommitmentContract() {
            const invno = (invnoInput.value || '').trim();

            if (!invno) {
                contractSelect.value = "";
                contractHidden.value = "";
                return;
            }

            const ncCode = "NC-" + invno;

            // Tambahkan NC-{Invoice No} sebagai option agar nilai
            // terlihat di field Contract No meskipun select disabled.
            let ncOption = Array.from(contractSelect.options).find(
                option => option.value === ncCode
            );

            if (!ncOption) {
                ncOption = new Option(ncCode, ncCode);
                ncOption.dataset.nonCommitment = "true";
                contractSelect.add(ncOption);
            }

            contractSelect.value = ncCode;
            contractHidden.value = ncCode;
        }

        function toggleContractSelect() {
            if (cncSelect.value === "Commitment") {
                contractSelect.disabled = false;
                contractHidden.value = contractSelect.value || "";
                filterContractOptions(vendorSelect.value); // filter lagi berdasarkan vendor
            } else if (cncSelect.value === "Non-Commitment") {
                contractSelect.disabled = true;
                setNonCommitmentContract();

                // Non-Commitment tidak mempunyai Contract Commitment
                document.getElementById('sisa_kontrak').value = "0.00";
            } else {
                document.getElementById('sisa_kontrak').value = "";

                contractSelect.value = "";
                contractHidden.value = "";
                contractSelect.disabled = true;
            }
        }

        cncSelect.addEventListener("change", toggleContractSelect);

        invnoInput.addEventListener("input", function () {
            if (cncSelect.value === "Non-Commitment") {
                setNonCommitmentContract();
            }
        });

        vendorSelect.addEventListener("change", function () {
            if (cncSelect.value === "Commitment") {
                filterContractOptions(this.value);
            }
        });

        contractSelect.addEventListener("change", function () {
            if (cncSelect.value === "Commitment") {
                contractHidden.value = this.value || "";
            }
        });

        // Jangan panggil toggleContractSelect() di awal
        // supaya saat Add Invoice, dropdown masih bisa tampil normal sampai CNC dipilih
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const amountInput = document.getElementById('amount');
        const dppInput = document.getElementById('dpp');
        const vatInput = document.getElementById('vat');
        const totalInput = document.getElementById('totalamount');

        function parseNumber(val) {
            if (!val) return 0;
            return parseFloat(val.replace(/,/g, '')) || 0;
        }

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

        function recalc() {
            let amount = parseNumber(amountInput.value);

            if (amount > 0) {
                let dpp = amount * 11 / 12;
                let vat = dpp * 12 / 100;
                let total = amount + vat;

                if (!dppInput.dataset.edited) dppInput.value = formatNumber(dpp);
                if (!vatInput.dataset.edited) vatInput.value = formatNumber(vat);
                if (!totalInput.dataset.edited) totalInput.value = formatNumber(total);
            }
        }

        // Hitung ulang saat amount berubah
        amountInput.addEventListener('input', recalc);

        // Tandai kalau user edit manual → jangan auto-overwrite
        [dppInput, vatInput, totalInput].forEach(input => {
            input.addEventListener('input', () => {
                input.dataset.edited = "true";
            });
        });
    });
</script>


<!-- toggleGoodsGroup();
toggleSoGroup();
toggleGoodsDesc();
toggleSoDesc(); -->

<script>
    function resetForm() {
        // Reset form values
        document.getElementById('invoiceForm').reset();

        const validationMessage = document.getElementById('invoiceValidationMessage');
        if (validationMessage) {
            validationMessage.textContent = '';
            validationMessage.classList.add('d-none');
        }

        document.getElementById('duedate').dataset.edited = "false";

        // Reset action to add URL
        document.getElementById('invoiceForm').action = "{% url 'save_invoice' %}";

        // Set modal title to Add
        document.getElementById('invoiceModalLabel').innerText = 'Add Invoice Register';

        // Reset hidden ID
        document.getElementById('invoice_id').value = "";

        // Reset checklist Goods & Service Order
        document.getElementById('goods1').checked = false;
        document.getElementById('so1').checked = false;
        toggleGoodsGroup();
        toggleSoGroup();

        // Reset dropdowns
        document.getElementById('vendorcode').value = "";
        document.getElementById('currsign').value = "";
        document.getElementById('accountno').value = "";
        const contractSelect = document.getElementById('contractno');
        contractSelect.value = "";
        document.getElementById('contractno_hidden').value = "";

        // Hapus option NC-{Invoice No} yang dibuat dinamis sebelumnya.
        Array.from(contractSelect.options).forEach(option => {
            if (option.dataset.nonCommitment === "true") {
                option.remove();
            }
        });

        // Optional: re-filter accountno if needed
        filterAccountOptions(""); // to hide all accountno options
    }
</script>

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

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

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

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

        const contractSelect = document.getElementById('contractno');
        const contractHidden = document.getElementById('contractno_hidden');
        if (contractSelect && contractHidden) {
            contractHidden.value = contractSelect.value;
        }
    });
</script>

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

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

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

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

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

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

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

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

<script>
    function fetchContractInfo(contractno, vendorcode = '') {
        if (!contractno || !vendorcode) {
            document.getElementById("sisa_kontrak").value = "";
            return;
        }

        fetch(
            `/finance/invoice/contract-info/${encodeURIComponent(contractno)}/?vendorcode=${encodeURIComponent(vendorcode)}`
        )
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    document.getElementById("sisa_kontrak").value = "Not found";
                } else {
                    document.getElementById("sisa_kontrak").value =
                        new Intl.NumberFormat('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }).format(data.sisa_kontrak);
                }
            })
            .catch(() => {
                document.getElementById("sisa_kontrak").value = "Not found";
            });
    }

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

        if (contractSelect) {
            contractSelect.addEventListener("change", function () {
                document.getElementById("contractno_hidden").value = this.value;
                fetchContractInfo(this.value, vendorSelect.value);
            });
        }

        if (vendorSelect) {
            vendorSelect.addEventListener("change", function () {
                document.getElementById("sisa_kontrak").value = "";

                if (contractSelect && contractSelect.value) {
                    fetchContractInfo(contractSelect.value, this.value);
                }
            });
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
        const invDate = document.getElementById("invdate");
        const logDate = document.getElementById("logdate");
        const dueDate = document.getElementById("duedate");

        function validateDateOrder() {
            if (!isValidDisplayDate(invDate.value)) {
                if (invDate.value) {
                    alert("Invoice Date harus menggunakan format DD-MM-YYYY.");
                    invDate.value = "";
                }
                return false;
            }

            if (logDate.value && !isValidDisplayDate(logDate.value)) {
                alert("Log Date harus menggunakan format DD-MM-YYYY.");
                logDate.value = "";
                return false;
            }

            if (dueDate.value && !isValidDisplayDate(dueDate.value)) {
                alert("Due Date harus menggunakan format DD-MM-YYYY.");
                dueDate.value = "";
                return false;
            }

            const invoiceISO = dateToISO(invDate.value);
            const logISO = dateToISO(logDate.value);
            const dueISO = dateToISO(dueDate.value);

            if (logISO && logISO < invoiceISO) {
                alert("Log Date tidak boleh lebih kecil daripada Invoice Date!");
                logDate.value = "";
                return false;
            }

            if (dueISO && dueISO < invoiceISO) {
                alert("Due Date tidak boleh lebih kecil daripada Invoice Date!");
                dueDate.value = "";
                return false;
            }

            return true;
        }

        invDate.addEventListener("change", function () {
            if (invDate.value && !isValidDisplayDate(invDate.value)) {
                alert("Invoice Date harus menggunakan format DD-MM-YYYY.");
                invDate.value = "";
            }
        });

        logDate.addEventListener("change", function () {
            if (logDate.value && !isValidDisplayDate(logDate.value)) {
                alert("Log Date harus menggunakan format DD-MM-YYYY.");
                logDate.value = "";
                return;
            }

            validateDateOrder();
        });

        dueDate.addEventListener("change", function () {
            if (dueDate.value && !isValidDisplayDate(dueDate.value)) {
                alert("Due Date harus menggunakan format DD-MM-YYYY.");
                dueDate.value = "";
                return;
            }

            validateDateOrder();
        });

        document.getElementById("invoiceForm").addEventListener("submit", function (event) {
            const dateFields = ["invdate", "logdate", "duedate", "srvperiod", "userdate", "findate"];

            for (const fieldId of dateFields) {
                const field = document.getElementById(fieldId);

                if (field.value && !isValidDisplayDate(field.value)) {
                    event.preventDefault();
                    alert(`${field.previousElementSibling ? field.previousElementSibling.innerText : fieldId} harus menggunakan format DD-MM-YYYY.`);
                    field.focus();
                    return;
                }
            }

            if (!validateDateOrder()) {
                event.preventDefault();
            }
        });
    });

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

        const logDateInput = document.getElementById('logdate');
        const dueDateInput = document.getElementById('duedate');

        if (!logDateInput || !dueDateInput) {
            return;
        }

        dueDateInput.dataset.edited = "false";

        dueDateInput.addEventListener('input', function () {
            this.dataset.edited = "true";
        });

        function setDueDateFromLogDate() {
            const logDate = logDateInput.value;

            if (!isValidDisplayDate(logDate)) {
                return;
            }

            if (dueDateInput.dataset.edited === "true") {
                return;
            }

            dueDateInput.value = addDaysToDisplayDate(logDate, 30);
        }

        logDateInput.addEventListener('change', function () {
            dueDateInput.dataset.edited = "false";
            setDueDateFromLogDate();
        });

    });
</script>

{% endblock %}