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

{% block content %}

<style>
    .table .table-dark th {
        background-color: #56636f !important;
        border: none !important;
    }

    .container-fluid {
        border-bottom: none;
        padding-bottom: 10px;
    }

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

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

    .pagination-current,
    .pagination-go {
        background-color: #56636f !important;
        border: 1px solid #56636f !important;
        color: #ffffff !important;
    }

    .pagination-current:hover,
    .pagination-current:focus,
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: #49545e !important;
        border-color: #49545e !important;
        color: #ffffff !important;
    }

    .pagination-disabled {
        opacity: 0.55;
        pointer-events: none;
    }

    .budget-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .budget-table {
        min-width: 1900px;
        width: 100%;
        margin-bottom: 0;
        background-color: #ffffff !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;

        --bs-table-border-color: #dfe3e6 !important;
    }

    .budget-table th,
    .budget-table td {
        vertical-align: middle;
        white-space: nowrap;
    }

    /* HEADER */
    .budget-table thead th {
        text-align: center;
        vertical-align: middle;
        background-color: #56636f !important;
        color: #ffffff !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1px solid #68747e !important;
        border-right: 1px solid #68747e !important;
    }

    .budget-table thead th:first-child {
        border-left: none !important;
    }

    .budget-table thead th:last-child {
        border-right: none !important;
    }

    /* BODY */
    .budget-table tbody tr {
        border: none !important;
    }

    .budget-table tbody td {
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1px solid #e1e4e7 !important;
        border-right: 1px solid #e1e4e7 !important;
        vertical-align: middle;
    }

    .budget-table tbody td:first-child {
        border-left: none !important;
    }

    .budget-table tbody td:last-child {
        border-right: none !important;
    }

    /* STRIPED ROWS */
    .budget-table tbody tr:nth-of-type(odd) td {
        background-color: #ffffff !important;
    }

    .budget-table tbody tr:nth-of-type(even) td {
        background-color: #f3f4f5 !important;
    }

    /* HOVER */
    .budget-table tbody tr:hover td {
        background-color: #eef0f2 !important;
    }

    .budget-number {
        text-align: right;
    }

    .quarter-header {
        background-color: #56636f !important;
        color: #ffffff !important;
    }

    .modal-xl {
        max-width: 1100px;
    }

    .budget-section-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 10px;
    }

    .budget-total-input {
        background-color: #f1f3f5 !important;
        font-weight: 600;
    }
</style>

<div class="container-fluid">

    <!-- ==================================================== -->
    <!-- HEADER & TOOLBAR LAYOUT (PRESISI RATA KIRI) -->
    <!-- ==================================================== -->
    <div class="d-flex justify-content-between align-items-start mb-2">

        <!-- KELOMPOK KIRI: TITLE + SHOWING INFO & SEARCH + STATUS -->
        <div class="d-flex align-items-start gap-4">

            <!-- KOLOM 1: TITLE & SHOWING DATA -->
            <div class="d-flex flex-column gap-2">
                <h4 class="mb-0">Entry Budget / WP&B</h4>
                <div class="small">
                    {% if active_header %}
                    <span class="badge bg-success">ACTIVE · V{{ active_header.version_no }}</span>
                    <span class="text-muted ms-1">Effective {{ active_header.effective_date|date:"d-m-Y" }}</span>
                    {% else %}
                    <span class="badge bg-secondary">NO ACTIVE BUDGET</span>
                    {% endif %}
                </div>
                <div class="text-muted small">
                    Showing {{ paginator_obj.start_index }} - {{ paginator_obj.end_index }} of {{ paginator_obj.paginator.count }}
                </div>
            </div>

            <!-- KOLOM 2: SEARCH + YEAR + FILTER (BARIS 1) & BUDGET STATUS (BARIS 2) -->
            <div class="d-flex flex-column gap-2">

                <!-- BARIS ATAS: SEARCH + YEAR + FILTER -->
                <form method="get" id="filterForm" class="d-flex align-items-center gap-2">

                    <input type="text" name="search" value="{{ query|default:'' }}" class="form-control form-control-sm"
                        placeholder="Search Account No / Name" style="width:220px;">

                    <select name="year" class="form-select form-select-sm" style="width:100px;" onchange="this.form.submit()">
                        {% for y in years %}
                        <option value="{{ y }}" {% if y == year %}selected{% endif %}>
                            {{ y }}
                        </option>
                        {% endfor %}
                    </select>

                    <input type="hidden" name="budget_status" value="{{ budget_status|default:'all' }}">

                    <button type="submit" class="btn btn-sm btn-secondary">
                        <i class="bi bi-funnel"></i>
                        Filter
                    </button>

                </form>

                <!-- BARIS BAWAH: BUDGET STATUS (PRESISI SEJAJAR SEARCH FIELD) -->
                <form method="get" class="d-flex align-items-center gap-2 mb-0">
                    <input type="hidden" name="search" value="{{ query|default:'' }}">
                    <input type="hidden" name="year" value="{{ year|default:'' }}">

                    <span class="small fw-semibold text-muted me-1">
                        Budget Status:
                    </span>

                    <div class="form-check form-check-inline mb-0 me-2">
                        <input class="form-check-input" type="radio" name="budget_status" id="status_all" value="all"
                            {% if budget_status == 'all' or not budget_status %}checked{% endif %} onchange="this.form.submit()">
                        <label class="form-check-label small" for="status_all">
                            All
                        </label>
                    </div>

                    <div class="form-check form-check-inline mb-0 me-2">
                        <input class="form-check-input" type="radio" name="budget_status" id="budgeted" value="budgeted"
                            {% if budget_status == 'budgeted' %}checked{% endif %} onchange="this.form.submit()">
                        <label class="form-check-label small" for="budgeted">
                            Budgeted
                        </label>
                    </div>

                    <div class="form-check form-check-inline mb-0 me-0">
                        <input class="form-check-input" type="radio" name="budget_status" id="non_budgeted"
                            value="non_budgeted" {% if budget_status == 'non_budgeted' %}checked{% endif %} onchange="this.form.submit()">
                        <label class="form-check-label small" for="non_budgeted">
                            Non Budgeted
                        </label>
                    </div>
                </form>

            </div>

        </div>

        <!-- KELOMPOK KANAN: ACTION BUTTONS & PAGINATION -->
        <div class="d-flex flex-column align-items-end gap-2">

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

                <button type="button" class="btn btn-sm btn-secondary" data-bs-toggle="modal"
                    data-bs-target="#importBudgetModal">
                    Upload / Revise Budget
                </button>

                <a href="{% url 'budget_version_comparison' %}?year={{ year|default:'' }}" class="btn btn-sm btn-outline-primary">
                    Compare Versions
                </a>

                <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetBudget()" title="Hapus semua versi budget dan nol-kan angka budget di Account Master">
                    Reset Budget
                </button>

                <a href="{% url 'download_budget_template' %}" class="btn btn-sm btn-secondary">
                    Template
                </a>

                <a href="{% url 'generate_pdf_budget' %}?search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}"
                    target="_blank" class="btn btn-sm btn-secondary">
                    Generate PDF
                </a>

                <a href="{% url 'export_to_excel_budget' %}?search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}"
                    class="btn btn-sm btn-secondary">
                    Export to Excel
                </a>

            </div>

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

                {% if paginator_obj.has_previous %}
                <a class="btn btn-sm pagination-page-btn"
                    href="?page=1&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                    First
                </a>
                <a class="btn btn-sm pagination-page-btn"
                    href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                    Previous
                </a>
                {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">First</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Previous</span>
                {% endif %}

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

                {% if paginator_obj.has_next %}
                <a class="btn btn-sm pagination-page-btn"
                    href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                    Next
                </a>
                <a class="btn btn-sm pagination-page-btn"
                    href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                    Last
                </a>
                {% else %}
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Next</span>
                <span class="btn btn-sm pagination-page-btn pagination-disabled">Last</span>
                {% endif %}

                <form method="get" class="d-flex align-items-center gap-1 ms-2">
                    <input type="hidden" name="search" value="{{ query|default:'' }}">
                    <input type="hidden" name="year" value="{{ year|default:'' }}">
                    <input type="hidden" name="budget_status" value="{{ budget_status|default:'all' }}">
                    <span class="small text-muted">Go to Page</span>
                    <input type="number" name="page" min="1" max="{{ paginator_obj.paginator.num_pages }}"
                        class="form-control form-control-sm" style="width:70px;">
                    <button type="submit" class="btn btn-sm pagination-go">Go</button>
                </form>

            </div>

        </div>

    </div>


    {% if revision_history %}
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-header py-2" style="background:#eef1f4; color:#34404a;">
            <strong>Budget Revision History</strong>
            <span class="text-muted small ms-2">{{ revision_history|length }} latest version(s)</span>
        </div>
        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead><tr><th>Version</th><th>Effective Date</th><th>Revision Reason</th><th>Saved By</th><th>Created At</th><th>Status</th></tr></thead>
                <tbody>
                {% for revision in revision_history %}
                <tr>
                    <td>V{{ revision.version_no }}</td>
                    <td>{{ revision.effective_date|date:"d-m-Y" }}</td>
                    <td>{{ revision.revision_reason|default:"—" }}</td>
                    <td>{{ revision.created_by|default:"—" }}</td>
                    <td>{{ revision.created_at|date:"d-m-Y H:i" }}</td>
                    <td>{% if revision.status == 'ACTIVE' %}<span class="badge bg-success">ACTIVE</span>{% elif revision.status == 'SUPERSEDED' %}<span class="badge bg-secondary">SUPERSEDED</span>{% else %}<span class="badge bg-warning text-dark">{{ revision.status }}</span>{% endif %}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- ==================================================== -->
    <!-- TABLE -->
    <!-- ==================================================== -->
    <div class="budget-table-wrapper">

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

            <thead class="table-dark">
                <tr>
                    <th rowspan="2" style="width:50px;">No</th>
                    <th rowspan="2">Account No</th>
                    <th rowspan="2">Account Name</th>

                    <th colspan="4" class="quarter-header">Q1</th>
                    <th colspan="4" class="quarter-header">Q2</th>
                    <th colspan="4" class="quarter-header">Q3</th>
                    <th colspan="4" class="quarter-header">Q4</th>

                    <th rowspan="2" style="width:80px;">Action</th>
                </tr>

                <tr>
                    <th>Jan</th>
                    <th>Feb</th>
                    <th>Mar</th>
                    <th>Total</th>

                    <th>Apr</th>
                    <th>May</th>
                    <th>Jun</th>
                    <th>Total</th>

                    <th>Jul</th>
                    <th>Aug</th>
                    <th>Sep</th>
                    <th>Total</th>

                    <th>Oct</th>
                    <th>Nov</th>
                    <th>Dec</th>
                    <th>Total</th>
                </tr>
            </thead>

            <tbody>
                {% for row in page_obj %}
                <tr>
                    <td class="text-center">
                        {{ forloop.counter0|add:paginator_obj.start_index }}
                    </td>
                    <td>{{ row.acct_no|format_acct_no }}</td>
                    <td>{{ row.acct_name }}</td>

                    <!-- Q1 -->
                    <td class="budget-number">{{ row.usdbgt01|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt02|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt03|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number fw-semibold">{{ row.q1_display|default:0|floatformat:2|intcomma }}</td>

                    <!-- Q2 -->
                    <td class="budget-number">{{ row.usdbgt04|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt05|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt06|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number fw-semibold">{{ row.q2_display|default:0|floatformat:2|intcomma }}</td>

                    <!-- Q3 -->
                    <td class="budget-number">{{ row.usdbgt07|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt08|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt09|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number fw-semibold">{{ row.q3_display|default:0|floatformat:2|intcomma }}</td>

                    <!-- Q4 -->
                    <td class="budget-number">{{ row.usdbgt10|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt11|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number">{{ row.usdbgt12|default:0|floatformat:2|intcomma }}</td>
                    <td class="budget-number fw-semibold">{{ row.q4_display|default:0|floatformat:2|intcomma }}</td>

                    <!-- ACTION -->
                    <td class="text-center">
                        <span class="text-muted small" title="Budget changes are submitted as a new revision">—</span>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="20" class="text-center text-muted py-4">
                        No data found.
                    </td>
                </tr>
                {% endfor %}
            </tbody>

        </table>

    </div>


    <!-- ==================================================== -->
    <!-- BOTTOM PAGINATION -->
    <!-- ==================================================== -->
    <div class="d-flex justify-content-between align-items-center mt-2">

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

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

            {% if paginator_obj.has_previous %}
            <a class="btn btn-sm pagination-page-btn"
                href="?page=1&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                First
            </a>
            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                Previous
            </a>
            {% else %}
            <span class="btn btn-sm pagination-page-btn pagination-disabled">First</span>
            <span class="btn btn-sm pagination-page-btn pagination-disabled">Previous</span>
            {% endif %}

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

            {% if paginator_obj.has_next %}
            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                Next
            </a>
            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&year={{ year|default:'' }}&budget_status={{ budget_status|default:'all' }}">
                Last
            </a>
            {% else %}
            <span class="btn btn-sm pagination-page-btn pagination-disabled">Next</span>
            <span class="btn btn-sm pagination-page-btn pagination-disabled">Last</span>
            {% endif %}

            <form method="get" class="d-flex align-items-center gap-1 ms-2">
                <input type="hidden" name="search" value="{{ query|default:'' }}">
                <input type="hidden" name="year" value="{{ year|default:'' }}">
                <input type="hidden" name="budget_status" value="{{ budget_status|default:'all' }}">
                <span class="small text-muted">Go to Page</span>
                <input type="number" name="page" min="1" max="{{ paginator_obj.paginator.num_pages }}"
                    class="form-control form-control-sm" style="width:70px;">
                <button type="submit" class="btn btn-sm pagination-go">Go</button>
            </form>

        </div>

    </div>

</div>

<!-- ======================================================== -->
<!-- IMPORT BUDGET MODAL -->
<!-- ======================================================== -->
<div class="modal fade" id="importBudgetModal" tabindex="-1" aria-labelledby="importBudgetModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="importBudgetModalLabel">Upload / Revise Budget</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="alert alert-info">
                    <strong>Import format:</strong><br>
                    Account No, Account Name, Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
                    <br><br>
                    <strong>Note:</strong> Q1, Q2, Q3, and Q4 are calculated automatically from the monthly values.
                    <br>Setiap upload akan membuat versi baru. Versi terbaru langsung aktif setelah seluruh data berhasil disimpan.
                    Versi sebelumnya tetap tersimpan sebagai riwayat.
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <label for="importBudgetYear" class="form-label">Budget Year</label>
                        <select id="importBudgetYear" name="year" class="form-select form-select-sm">
                            {% for y in years %}
                            <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="importBudgetEffectiveDate" class="form-label">Effective Date</label>
                        <input type="date" id="importBudgetEffectiveDate" class="form-control form-control-sm" required>
                    </div>
                    <div class="col-md-5">
                        <label for="importBudgetReason" class="form-label">Revision Reason</label>
                        <input type="text" id="importBudgetReason" class="form-control form-control-sm" maxlength="255" placeholder="Reason for this budget revision" required>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="importBudgetFile" class="form-label">Excel / CSV File</label>
                    <input type="file" id="importBudgetFile" class="form-control" accept=".xlsx,.csv">
                </div>

                <div class="small text-muted">
                    Belum punya format file?
                    <a href="{% url 'download_budget_template' %}">Download Import Template</a>
                </div>

                <div id="importBudgetMessage" class="mt-3"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-secondary" onclick="importBudget()">Save & Activate Revision</button>
            </div>

        </div>
    </div>

</div>

<!-- ======================================================== -->
<!-- EDIT BUDGET MODAL -->
<!-- ======================================================== -->
<div class="modal fade" id="budgetModal" tabindex="-1" aria-labelledby="budgetModalLabel" aria-hidden="true">

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

            <div class="modal-header">
                <h5 class="modal-title" id="budgetModalLabel">Edit Budget</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="budgetYear">
                <input type="hidden" id="budgetAcctNo">

                <div class="row mb-3">
                    <div class="col-md-2">
                        <label class="form-label">Year</label>
                        <input type="text" id="budgetYearDisplay" class="form-control bg-light" readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Account No</label>
                        <input type="text" id="budgetAcctNoDisplay" class="form-control bg-light" readonly>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Account Name</label>
                        <input type="text" id="budgetAcctName" class="form-control bg-light" readonly>
                    </div>
                </div>

                <div class="row">

                    <!-- Q1 -->
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3">
                            <div class="budget-section-title">Q1</div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Jan</label>
                                    <input type="text" id="usdbgt01" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Feb</label>
                                    <input type="text" id="usdbgt02" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Mar</label>
                                    <input type="text" id="usdbgt03" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Q1</label>
                                    <input type="text" id="q1" class="form-control budget-total-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Q2 -->
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3">
                            <div class="budget-section-title">Q2</div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Apr</label>
                                    <input type="text" id="usdbgt04" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">May</label>
                                    <input type="text" id="usdbgt05" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Jun</label>
                                    <input type="text" id="usdbgt06" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Q2</label>
                                    <input type="text" id="q2" class="form-control budget-total-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Q3 -->
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3">
                            <div class="budget-section-title">Q3</div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Jul</label>
                                    <input type="text" id="usdbgt07" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Aug</label>
                                    <input type="text" id="usdbgt08" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Sep</label>
                                    <input type="text" id="usdbgt09" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Q3</label>
                                    <input type="text" id="q3" class="form-control budget-total-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Q4 -->
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3">
                            <div class="budget-section-title">Q4</div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Oct</label>
                                    <input type="text" id="usdbgt10" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Nov</label>
                                    <input type="text" id="usdbgt11" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Dec</label>
                                    <input type="text" id="usdbgt12" class="form-control budget-month"
                                        oninput="calculateBudgetQuarters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Q4</label>
                                    <input type="text" id="q4" class="form-control budget-total-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

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

            </div>

        </div>
    </div>

</div>

<script>
    // ========================================================
    // NUMBER
    // ========================================================
    function parseBudgetNumber(value) {
        if (!value) return 0;
        value = value.toString().replace(/,/g, '').trim();
        const number = parseFloat(value);
        return isNaN(number) ? 0 : number;
    }

    function formatBudgetNumber(value) {
        const number = parseBudgetNumber(value);
        return number.toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    // ========================================================
    // QUARTER CALCULATION
    // ========================================================
    function calculateBudgetQuarters() {
        const q1 = parseBudgetNumber(document.getElementById('usdbgt01').value) +
                   parseBudgetNumber(document.getElementById('usdbgt02').value) +
                   parseBudgetNumber(document.getElementById('usdbgt03').value);

        const q2 = parseBudgetNumber(document.getElementById('usdbgt04').value) +
                   parseBudgetNumber(document.getElementById('usdbgt05').value) +
                   parseBudgetNumber(document.getElementById('usdbgt06').value);

        const q3 = parseBudgetNumber(document.getElementById('usdbgt07').value) +
                   parseBudgetNumber(document.getElementById('usdbgt08').value) +
                   parseBudgetNumber(document.getElementById('usdbgt09').value);

        const q4 = parseBudgetNumber(document.getElementById('usdbgt10').value) +
                   parseBudgetNumber(document.getElementById('usdbgt11').value) +
                   parseBudgetNumber(document.getElementById('usdbgt12').value);

        document.getElementById('q1').value = formatBudgetNumber(q1);
        document.getElementById('q2').value = formatBudgetNumber(q2);
        document.getElementById('q3').value = formatBudgetNumber(q3);
        document.getElementById('q4').value = formatBudgetNumber(q4);
    }

    // ========================================================
    // EDIT
    // ========================================================
    function editBudget(year, acctNo) {
        const url = `/budget/${year}/${encodeURIComponent(acctNo)}/edit/`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert(data.message || 'Budget data not found.');
                    return;
                }

                document.getElementById('budgetYear').value = data.year;
                document.getElementById('budgetAcctNo').value = data.acct_no;
                document.getElementById('budgetYearDisplay').value = data.year;
                document.getElementById('budgetAcctNoDisplay').value = data.acct_no;
                document.getElementById('budgetAcctName').value = data.acct_name || '';

                for (let i = 1; i <= 12; i++) {
                    const field = `usdbgt${String(i).padStart(2, '0')}`;
                    document.getElementById(field).value = formatBudgetNumber(data[field]);
                }

                calculateBudgetQuarters();

                const modal = new bootstrap.Modal(document.getElementById('budgetModal'));
                modal.show();
            })
            .catch(error => {
                console.error(error);
                alert('Unable to load Budget data.');
            });
    }

    // ========================================================
    // CSRF
    // ========================================================
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // ========================================================
    // SAVE
    // ========================================================
    function saveBudget() {
        const year = document.getElementById('budgetYear').value;
        const acctNo = document.getElementById('budgetAcctNo').value;
        const formData = new FormData();

        formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));

        for (let i = 1; i <= 12; i++) {
            const field = `usdbgt${String(i).padStart(2, '0')}`;
            formData.append(field, document.getElementById(field).value);
        }

        fetch(`/budget/${year}/${encodeURIComponent(acctNo)}/edit/`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || 'Unable to save Budget.');
                }
            })
            .catch(error => {
                console.error(error);
                alert('Unable to save Budget.');
            });
    }

    // ========================================================
    // IMPORT BUDGET

    // Reset seluruh versi budget dan angka budget pada Account Master.
    function resetBudget() {
        const confirmed = confirm('PERINGATAN: Reset Budget akan menghapus SELURUH versi dan riwayat budget serta mengubah angka budget Januari–Desember di seluruh Account menjadi 0. Data Account Master lainnya tidak dihapus. Tindakan ini tidak dapat dibatalkan.\n\nLanjutkan reset?');
        if (!confirmed) return;

        const secondConfirm = prompt('Untuk konfirmasi, ketik RESET BUDGET:');
        if (secondConfirm !== 'RESET BUDGET') {
            if (secondConfirm !== null) alert('Konfirmasi tidak cocok. Reset dibatalkan.');
            return;
        }

        fetch("{% url 'reset_budget' %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken'),
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            body: 'csrfmiddlewaretoken=' + encodeURIComponent(getCookie('csrftoken'))
        })
        .then(async response => {
            const data = await response.json();
            if (!response.ok || !data.success) throw new Error(data.message || 'Reset gagal.');
            return data;
        })
        .then(data => { alert(data.message); location.reload(); })
        .catch(error => alert(error.message || 'Reset gagal.'));
    }

    // ========================================================
    function importBudget() {
        const year = document.getElementById('importBudgetYear').value;
        const fileInput = document.getElementById('importBudgetFile');
        const message = document.getElementById('importBudgetMessage');

        message.innerHTML = '';

        if (!fileInput.files.length) {
            message.innerHTML = '<div class="alert alert-warning">Please select an Excel or CSV file.</div>';
            return;
        }

        const formData = new FormData();
        const effectiveDate = document.getElementById('importBudgetEffectiveDate').value;
        const revisionReason = document.getElementById('importBudgetReason').value.trim();
        if (!effectiveDate || !revisionReason) {
            message.innerHTML = '<div class="alert alert-warning">Effective Date and Revision Reason are required.</div>';
            return;
        }
        formData.append('year', year);
        formData.append('effective_date', effectiveDate);
        formData.append('revision_reason', revisionReason);
        formData.append('file', fileInput.files[0]);
        formData.append('csrfmiddlewaretoken', getCookie('csrftoken'));

        const button = document.querySelector('#importBudgetModal .modal-footer button:last-child');
        button.disabled = true;
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Importing...';

        fetch("{% url 'import_budget' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
            .then(async response => {
                const data = await response.json();
                if (!response.ok) throw data;
                return data;
            })
            .then(data => {
                if (data.success) {
                    message.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                    setTimeout(function () {
                        location.reload();
                    }, 800);
                } else {
                    message.innerHTML = '<div class="alert alert-danger">' + (data.message || 'Import failed.') + '</div>';
                }
            })
            .catch(error => {
                console.error(error);
                let html = '<div class="alert alert-danger">' + (error.message || 'Import failed.') + '</div>';
                if (error.errors && error.errors.length) {
                    html += '<div class="alert alert-danger mt-2"><strong>Details:</strong><br>' + error.errors.join('<br>') + '</div>';
                }
                message.innerHTML = html;
            })
            .finally(() => {
                button.disabled = false;
                button.innerHTML = 'Save & Activate Revision';
            });
    }

    // ========================================================
    // RESET IMPORT MODAL
    // ========================================================
    document.getElementById('importBudgetModal').addEventListener('hidden.bs.modal', function () {
        document.getElementById('importBudgetFile').value = '';
        document.getElementById('importBudgetReason').value = '';
        document.getElementById('importBudgetEffectiveDate').value = '';
        document.getElementById('importBudgetMessage').innerHTML = '';
    });
</script>

{% endblock %}