{% extends "finance/base.html" %}

{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}

<style>

    /* ============================================================
       GENERAL
       ============================================================ */

    .page-title {
        font-size: 3rem;
        font-weight: 500;
        margin-bottom: 15px;
    }


    /* ============================================================
       MAIN TABLE
       ============================================================ */

    .pqr3-table {
        font-size: 0.88rem;
    }

    .pqr3-table thead th {
        background-color: #495057;
        color: white;
        vertical-align: middle;
        border-color: #495057;
    }

    .pqr3-table tbody td {
        vertical-align: middle;
    }


    /* ============================================================
       ROW TYPES
       ============================================================ */

    .pqr3-text-row {
        font-weight: 600;
        background-color: #f8f9fa;
    }

    .pqr3-total-row {
        font-weight: 600;
        background-color: #f8f9fa;
    }

    .pqr3-selected-row {
        background-color: #e9ecef !important;
    }


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

    .formula-row {
        display: none;
    }

    .formula-row.formula-open {
        display: table-row;
    }

    .formula-row td {
        border-top: 0 !important;
    }

    .formula-detail-cell {
        padding: 0 !important;
        background-color: #f8f9fa;
    }

    .formula-detail {
        margin: 8px 12px 12px 12px;
        padding: 12px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .formula-title {
        font-weight: 600;
        font-size: 0.85rem;
    }

    .formula-table {
        font-size: 0.82rem;
        margin-bottom: 0;
    }

    .formula-table thead th {
        background-color: #6c757d;
        color: white;
        font-weight: 500;
        vertical-align: middle;
    }


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

    .btn-narrow {
        padding-left: 8px;
        padding-right: 8px;
    }

    .formula-toggle {
        width: 30px;
        height: 28px;
        padding: 0;
        line-height: 1;
    }


    /* ============================================================
       DRAG HANDLE
       ============================================================ */

    .drag-handle {
        cursor: grab;
        color: #6c757d;
        margin-right: 5px;
    }

    .drag-handle:active {
        cursor: grabbing;
    }


    /* ============================================================
       FORMULA EDITOR
       ============================================================ */

    .formula-editor {
        display: none;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    .formula-editor.show {
        display: block;
    }


    /* ============================================================
       AUTOCOMPLETE
       ============================================================ */

    .autocomplete-wrapper {
        position: relative;
    }

    .autocomplete-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 2000;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-top: 0;
        max-height: 250px;
        overflow-y: auto;
    }

    .autocomplete-item {
        padding: 7px 10px;
        cursor: pointer;
        font-size: 0.82rem;
        border-bottom: 1px solid #f1f1f1;
    }

    .autocomplete-item:hover {
        background-color: #e9ecef;
    }

    .autocomplete-acct {
        font-weight: 600;
    }

    .autocomplete-name {
        color: #6c757d;
        margin-left: 8px;
    }


    /* ============================================================
       DESCRIPTION
       ============================================================ */

    .description-cell {
        white-space: nowrap;
    }


    /* ============================================================
       MOBILE
       ============================================================ */

    @media (max-width: 768px) {

        .pqr3-table {
            font-size: 0.78rem;
        }

        .formula-detail {
            margin-left: 4px;
            margin-right: 4px;
        }

        .description-cell {
            white-space: normal;
        }

    }

.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.autocomplete-wrapper input {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-top: 0;
    max-height: 250px;
    overflow-y: auto;
}

</style>


<div class="container-fluid mt-3">


    <!-- ============================================================
         TITLE
         ============================================================ -->

    <div class="d-flex justify-content-between align-items-center mb-3">

        <div class="page-title mb-0">
            Design FQR3
        </div>

        <button
            type="button"
            class="btn btn-success btn-sm"
            onclick="newPqr3();"
        >
            <i class="bi bi-plus-lg"></i>
            New
        </button>

    </div>


    <!-- ============================================================
         PQR3 EDITOR
         ============================================================ -->

    <div
        class="card mb-3"
        id="pqr3Editor"
        style="display: none;"
    >

        <div class="card-header bg-light">

            <strong id="pqr3EditorTitle">
                New PQR3
            </strong>

        </div>


        <div class="card-body">

            <form
                method="POST"
                id="pqr3Form"
            >

                {% csrf_token %}

                <input
                    type="hidden"
                    name="form_type"
                    value="pqr3"
                >

                <input
                    type="hidden"
                    name="pqr3_id"
                    id="pqr3_id"
                    value=""
                >

                <input
                    type="hidden"
                    name="lineno"
                    id="lineno"
                    value=""
                >


                <div class="row g-2">


                    <!-- =================================================
                         TYPE
                         ================================================= -->

                    <div class="col-md-2">

                        <label class="form-label mb-1">
                            Type
                        </label>

                        <select
                            class="form-select form-select-sm"
                            name="type"
                            id="pqr3_type"
                            onchange="typeChanged();"
                        >

                            <option value="TEXT">
                                TEXT
                            </option>

                            <option value="ACCT">
                                ACCT
                            </option>

                            <option value="TOTAL">
                                TOTAL
                            </option>

                        </select>

                    </div>


                    <!-- =================================================
                         ACCOUNT
                         ================================================= -->

                    <div class="col-md-3">

                        <label class="form-label mb-1">
                            Account
                        </label>

                        <div class="autocomplete-wrapper">

                            <input
                                type="text"
                                class="form-control form-control-sm"
                                name="acct"
                                id="pqr3_acct"
                                autocomplete="off"
                            >

                            <div
                                id="pqr3_acct_results"
                                class="autocomplete-list"
                            ></div>

                        </div>

                    </div>


                    <!-- =================================================
                         DESCRIPTION
                         ================================================= -->

                    <div class="col-md-5">

                        <label class="form-label mb-1">
                            Description
                        </label>

                        <input
                            type="text"
                            class="form-control form-control-sm"
                            name="descript"
                            id="pqr3_descript"
                        >

                    </div>


                    <!-- =================================================
                         BUTTON
                         ================================================= -->

                    <div class="col-md-2 d-flex align-items-end">

                        <div class="d-flex gap-1 w-100">

                            <button
                                type="submit"
                                class="btn btn-primary btn-sm flex-grow-1"
                            >

                                <i class="bi bi-check-lg"></i>
                                Save

                            </button>


                            <button
                                type="button"
                                class="btn btn-secondary btn-sm"
                                onclick="cancelPqr3();"
                            >

                                Cancel

                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    </div>


    <!-- ============================================================
         MAIN PQR3 TABLE
         ============================================================ -->

    <div class="table-responsive">

        <table
            class="table table-hover table-sm table-bordered pqr3-table"
            id="pqr3Table"
        >

            <thead>

                <tr>

                    <th style="width: 90px;">
                        Type
                    </th>

                    <th style="width: 250px;">
                        Acct
                    </th>

                    <th>
                        Description
                    </th>

                    <th
                        style="width: 190px;"
                        class="text-center"
                    >
                        Action
                    </th>

                </tr>

            </thead>


            <tbody id="sortablePqr3">

                {% for b in pqr3s %}


                <!-- ====================================================
                     PQR3 MAIN ROW
                     ==================================================== -->

                <tr
                    class="
                        {% if b.type == 'TEXT' %}
                            pqr3-text-row
                        {% elif b.type == 'TOTAL' %}
                            pqr3-total-row
                        {% endif %}

                        {% if expanded_acct == b.acct %}
                            pqr3-selected-row
                        {% endif %}
                    "
                    data-id="{{ b.id }}"
                    data-lineno="{{ b.lineno }}"
                >


                    <!-- =================================================
                         TYPE
                         ================================================= -->

                    <td>

                        <span class="drag-handle">
                            <i class="bi bi-grip-vertical"></i>
                        </span>

                        {{ b.type }}

                    </td>


                    <!-- =================================================
                         ACCOUNT
                         ================================================= -->

                    <td>

                        {{ b.acct|default:"" }}

                    </td>


                    <!-- =================================================
                         DESCRIPTION
                         ================================================= -->

                    <td class="description-cell">

                        {{ b.descript }}

                    </td>


                    <!-- =================================================
                         ACTION
                         ================================================= -->

                    <td class="text-center">

                        <div class="d-inline-flex gap-1">


                            <!-- EDIT -->

                            <button
                                type="button"
                                class="btn btn-secondary btn-sm btn-narrow"
                                title="Edit"
                                data-id="{{ b.id }}"
                                data-lineno="{{ b.lineno }}"
                                data-type="{{ b.type }}"
                                data-acct="{{ b.acct|default:'' }}"
                                data-descript="{{ b.descript|default:'' }}"
                                onclick="editPqr3FromButton(this);"
                            >

                                <i class="bi bi-pencil"></i>

                            </button>


                            <!-- DELETE -->

                            <button
                                type="button"
                                class="btn btn-danger btn-sm btn-narrow"
                                title="Delete"
                                data-id="{{ b.id }}"
                                onclick="deletePqr3FromButton(this);"
                            >

                                <i class="bi bi-trash"></i>

                            </button>


                            <!-- INSERT ABOVE -->

                            <button
                                type="button"
                                class="btn btn-outline-secondary btn-sm btn-narrow"
                                title="Insert Above"
                                data-id="{{ b.id }}"
                                onclick="insertAboveFromButton(this);"
                            >

                                <i class="bi bi-arrow-up"></i>

                            </button>


                            <!-- INSERT BELOW -->

                            <button
                                type="button"
                                class="btn btn-outline-secondary btn-sm btn-narrow"
                                title="Insert Below"
                                data-id="{{ b.id }}"
                                onclick="insertBelowFromButton(this);"
                            >

                                <i class="bi bi-arrow-down"></i>

                            </button>


                            <!-- FORMULA TOGGLE -->

                            {% if b.type == "ACCT" and b.acct %}

                                <button
                                    type="button"
                                    class="btn btn-outline-primary btn-sm btn-narrow formula-toggle"
                                    title="Formula Accounts"
                                    data-row-id="{{ b.id }}"
                                    onclick="toggleFormulaFromButton(this);"
                                >

                                    {% if expanded_acct == b.acct %}

                                        <i class="bi bi-dash-lg"></i>

                                    {% else %}

                                        <i class="bi bi-plus-lg"></i>

                                    {% endif %}

                                </button>

                            {% endif %}

                        </div>

                    </td>

                </tr>


                <!-- ====================================================
                     INLINE FORMULA ROW
                     ==================================================== -->

                {% if b.type == "ACCT" and b.acct %}

                <tr
                    id="formulaRow_{{ b.id }}"
                    class="formula-row{% if expanded_acct == b.acct %} formula-open{% endif %}"
                >

                    <td
                        colspan="4"
                        class="formula-detail-cell"
                    >

                        <div class="formula-detail">


                            <!-- =================================================
                                 FORMULA HEADER
                                 ================================================= -->

                            <div class="d-flex justify-content-between align-items-center">

                                <div class="formula-title">

                                    <i class="bi bi-calculator"></i>

                                    Formula Accounts

                                    <span class="text-muted">
                                        — {{ b.acct }}
                                    </span>

                                </div>


                                <button
                                    type="button"
                                    class="btn btn-success btn-sm"
                                    data-row-id="{{ b.id }}"
                                    onclick="addFormulaFromButton(this);"
                                >

                                    <i class="bi bi-plus-lg"></i>

                                    Add Formula

                                </button>

                            </div>


                            <!-- =================================================
                                 FORMULA TABLE
                                 ================================================= -->

                            <div class="table-responsive mt-2">

                                <table class="table table-sm table-bordered formula-table">

                                    <thead>

                                        <tr>

                                            <th>
                                                Acct From
                                            </th>

                                            <th>
                                                Acct To
                                            </th>

                                            <th
                                                style="width: 150px;"
                                                class="text-center"
                                            >
                                                Action
                                            </th>

                                        </tr>

                                    </thead>


                                    <tbody>

                                        {% for f in formulas_by_acct|get_item:b.acct %}

                                        <tr>


                                            <!-- ACCT FROM -->

                                            <td>
                                                {{ f.acct1 }}
                                            </td>


                                            <!-- ACCT TO -->

                                            <td>
                                                {{ f.acct2 }}
                                            </td>


                                            <!-- ACTION -->

                                            <td class="text-center">

                                                <div class="d-inline-flex gap-1">


                                                    <!-- EDIT -->

                                                    <button
                                                        type="button"
                                                        class="btn btn-secondary btn-sm btn-narrow"
                                                        title="Edit Formula"
                                                        data-id="{{ f.id }}"
                                                        data-row-id="{{ b.id }}"
                                                        data-acct1="{{ f.acct1|default:'' }}"
                                                        data-acct2="{{ f.acct2|default:'' }}"
                                                        onclick="editFormulaFromButton(this);"
                                                    >

                                                        <i class="bi bi-pencil"></i>

                                                    </button>


                                                    <!-- DELETE -->

                                                    <button
                                                        type="button"
                                                        class="btn btn-danger btn-sm btn-narrow"
                                                        title="Delete Formula"
                                                        data-id="{{ f.id }}"
                                                        data-acct="{{ b.acct }}"
                                                        onclick="deleteFormulaFromButton(this);"
                                                    >

                                                        <i class="bi bi-trash"></i>

                                                    </button>

                                                </div>

                                            </td>

                                        </tr>


                                        {% empty %}

                                        <tr>

                                            <td
                                                colspan="3"
                                                class="text-center text-muted"
                                            >

                                                No formula account.

                                            </td>

                                        </tr>

                                        {% endfor %}

                                    </tbody>

                                </table>

                            </div>


                            <!-- =================================================
                                 FORMULA EDITOR
                                 ================================================= -->

                            <div
                                class="formula-editor"
                                id="formulaEditor_{{ b.id }}"
                            >

                                <form
                                    method="POST"
                                    id="formulaForm_{{ b.id }}"
                                >

                                    {% csrf_token %}

                                    <input
                                        type="hidden"
                                        name="form_type"
                                        value="formula"
                                    >

                                    <input
                                        type="hidden"
                                        name="form_id"
                                        id="formula_id_{{ b.id }}"
                                        value=""
                                    >

                                    <input
                                        type="hidden"
                                        name="acct"
                                        value="{{ b.acct }}"
                                    >


                                    <div class="row g-2">


                                        <!-- =================================
                                             ACCT FROM
                                             ================================= -->

                                        <div class="col-md-4">

                                            <label class="form-label mb-1">
                                                Acct From
                                            </label>

                                            <div class="autocomplete-wrapper">

                                                <input
                                                    type="text"
                                                    class="form-control form-control-sm"
                                                    name="acct1"
                                                    id="acct1_{{ b.id }}"
                                                    autocomplete="off"
                                                >

                                                <div
                                                    class="autocomplete-list"
                                                    id="acct1_results_{{ b.id }}"
                                                ></div>

                                            </div>

                                        </div>


                                        <!-- =================================
                                             ACCT TO
                                             ================================= -->

                                        <div class="col-md-4">

                                            <label class="form-label mb-1">
                                                Acct To
                                            </label>

                                            <div class="autocomplete-wrapper">

                                                <input
                                                    type="text"
                                                    class="form-control form-control-sm"
                                                    name="acct2"
                                                    id="acct2_{{ b.id }}"
                                                    autocomplete="off"
                                                >

                                                <div
                                                    class="autocomplete-list"
                                                    id="acct2_results_{{ b.id }}"
                                                ></div>

                                            </div>

                                        </div>


                                        <!-- =================================
                                             BUTTON
                                             ================================= -->

                                        <div class="col-md-4 d-flex align-items-end">

                                            <div class="d-flex gap-1">

                                                <button
                                                    type="submit"
                                                    class="btn btn-primary btn-sm"
                                                >

                                                    <i class="bi bi-check-lg"></i>

                                                    Save

                                                </button>


                                                <button
                                                    type="button"
                                                    class="btn btn-secondary btn-sm"
                                                    data-row-id="{{ b.id }}"
                                                    onclick="cancelFormulaFromButton(this);"
                                                >

                                                    Cancel

                                                </button>

                                            </div>

                                        </div>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </td>

                </tr>

                {% endif %}


                {% empty %}

                <tr>

                    <td
                        colspan="4"
                        class="text-center text-muted py-4"
                    >

                        No PQR3 design data.

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

</div>


<!-- ================================================================
     SORTABLE JS
     ================================================================ -->

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>


<script>

/* ================================================================
   PAGE LOAD
   ================================================================ */

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

    typeChanged();

    setupPqr3Autocomplete();

    setupFormulaAutocompletes();

});


/* ================================================================
   NEW PQR3
   ================================================================ */

function newPqr3() {

    const editor =
        document.getElementById("pqr3Editor");

    editor.style.display = "block";


    document.getElementById(
        "pqr3EditorTitle"
    ).innerText = "New PQR3";


    document.getElementById(
        "pqr3_id"
    ).value = "";


    document.getElementById(
        "lineno"
    ).value = "";


    document.getElementById(
        "pqr3_type"
    ).value = "TEXT";


    document.getElementById(
        "pqr3_acct"
    ).value = "";


    document.getElementById(
        "pqr3_descript"
    ).value = "";


    typeChanged();


    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });

}


/* ================================================================
   EDIT PQR3
   ================================================================ */

function editPqr3(
    id,
    lineno,
    type,
    acct,
    descript
) {

    document.getElementById(
        "pqr3Editor"
    ).style.display = "block";


    document.getElementById(
        "pqr3EditorTitle"
    ).innerText = "Edit PQR3";


    document.getElementById(
        "pqr3_id"
    ).value = id;


    document.getElementById(
        "lineno"
    ).value = lineno;


    document.getElementById(
        "pqr3_type"
    ).value = type;


    document.getElementById(
        "pqr3_acct"
    ).value = acct;


    document.getElementById(
        "pqr3_descript"
    ).value = descript;


    typeChanged();


    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });

}


/* ================================================================
   EDIT PQR3 FROM BUTTON
   ================================================================ */

function editPqr3FromButton(button) {

    editPqr3(
        button.dataset.id,
        button.dataset.lineno,
        button.dataset.type,
        button.dataset.acct,
        button.dataset.descript
    );

}


/* ================================================================
   CANCEL PQR3
   ================================================================ */

function cancelPqr3() {

    document.getElementById(
        "pqr3Editor"
    ).style.display = "none";

}


/* ================================================================
   DELETE PQR3
   ================================================================ */

function deletePqr3(id) {

    if (!confirm("Delete this PQR3 row?")) {
        return;
    }


    window.location.href =
        "?delete_pqr3=" +
        encodeURIComponent(id);

}


/* ================================================================
   DELETE PQR3 FROM BUTTON
   ================================================================ */

function deletePqr3FromButton(button) {

    deletePqr3(
        button.dataset.id
    );

}


/* ================================================================
   TYPE CHANGE
   ================================================================ */

function typeChanged() {

    const type =
        document.getElementById(
            "pqr3_type"
        ).value;


    const acct =
        document.getElementById(
            "pqr3_acct"
        );


    if (type === "TEXT") {

        acct.value = "";

        acct.disabled = true;

    } else {

        acct.disabled = false;

    }

}


/* ================================================================
   TOGGLE FORMULA
   ================================================================ */

function toggleFormula(rowId) {

    const formulaRow =
        document.getElementById(
            "formulaRow_" + rowId
        );

    if (!formulaRow) {
        return;
    }


    const mainRows =
        document.querySelectorAll(
            "#sortablePqr3 > tr:not(.formula-row)"
        );


    const formulaRows =
        document.querySelectorAll(
            "#sortablePqr3 > tr.formula-row"
        );


    const buttons =
        document.querySelectorAll(
            ".formula-toggle"
        );


    const isOpen =
        formulaRow.classList.contains(
            "formula-open"
        );


    /*
     * Close all formula rows
     */

    formulaRows.forEach(function (row) {

        row.classList.remove(
            "formula-open"
        );

    });


    /*
     * Remove selected styling
     */

    mainRows.forEach(function (row) {

        row.classList.remove(
            "pqr3-selected-row"
        );

    });


    /*
     * Reset all buttons
     */

    buttons.forEach(function (button) {

        button.innerHTML =
            '<i class="bi bi-plus-lg"></i>';

    });


    /*
     * Open selected formula
     */

    if (!isOpen) {

        formulaRow.classList.add(
            "formula-open"
        );


        const mainRow =
            formulaRow.previousElementSibling;


        if (mainRow) {

            mainRow.classList.add(
                "pqr3-selected-row"
            );


            const button =
                mainRow.querySelector(
                    ".formula-toggle"
                );


            if (button) {

                button.innerHTML =
                    '<i class="bi bi-dash-lg"></i>';

            }

        }

    }

}

/* ================================================================
   TOGGLE FORMULA FROM BUTTON
   ================================================================ */

function toggleFormulaFromButton(button) {

    toggleFormula(
        button.dataset.rowId
    );

}


/* ================================================================
   ADD FORMULA
   ================================================================ */

/* ================================================================
   ADD FORMULA
   ================================================================ */

function addFormula(rowId) {

    const editor =
        document.getElementById(
            "formulaEditor_" + rowId
        );


    const acct1 =
        document.getElementById(
            "acct1_" + rowId
        );


    const acct2 =
        document.getElementById(
            "acct2_" + rowId
        );


    if (!editor || !acct1 || !acct2) {
        return;
    }


    // ============================================================
    // SHOW EDITOR
    // ============================================================

    editor.classList.add("show");


    // ============================================================
    // RESET FORM
    // ============================================================

    document.getElementById(
        "formula_id_" + rowId
    ).value = "";


    acct1.value = "";
    acct2.value = "";


    // ============================================================
    // MAKE SURE INPUT IS ENABLED
    // ============================================================

    acct1.disabled = false;
    acct1.readOnly = false;

    acct2.disabled = false;
    acct2.readOnly = false;


    // ============================================================
    // DO NOT INITIALIZE AUTOCOMPLETE HERE
    //
    // Autocomplete sudah di-initialize saat page load.
    // ============================================================


    // ============================================================
    // FOCUS ACCT FROM
    // ============================================================

    setTimeout(
        function () {

            acct1.focus();

        },
        100
    );


    // ============================================================
    // SCROLL TO EDITOR
    // ============================================================

    editor.scrollIntoView({
        behavior: "smooth",
        block: "nearest"
    });

}

/* ================================================================
   ADD FORMULA FROM BUTTON
   ================================================================ */

function addFormulaFromButton(button) {

    addFormula(
        button.dataset.rowId
    );

}


/* ================================================================
   EDIT FORMULA
   ================================================================ */

function editFormula(
    id,
    rowId,
    acct1,
    acct2
) {

    const editor =
        document.getElementById(
            "formulaEditor_" + rowId
        );

    if (!editor) {
        return;
    }

    editor.classList.add("show");

    document.getElementById(
        "formula_id_" + rowId
    ).value = id;

    document.getElementById(
        "acct1_" + rowId
    ).value = acct1;

    document.getElementById(
        "acct2_" + rowId
    ).value = acct2;

    // ============================================================
    // RE-INITIALIZE FORMULA AUTOCOMPLETE
    // ============================================================
    setupFormulaAutocompleteForRow(rowId);

    editor.scrollIntoView({
        behavior: "smooth",
        block: "nearest"
    });
}

/* ================================================================
   EDIT FORMULA FROM BUTTON
   ================================================================ */

function editFormulaFromButton(button) {

    editFormula(
        button.dataset.id,
        button.dataset.rowId,
        button.dataset.acct1,
        button.dataset.acct2
    );

}


/* ================================================================
   CANCEL FORMULA
   ================================================================ */

function cancelFormula(rowId) {

    const editor =
        document.getElementById(
            "formulaEditor_" + rowId
        );


    if (editor) {

        editor.classList.remove(
            "show"
        );

    }

}


/* ================================================================
   CANCEL FORMULA FROM BUTTON
   ================================================================ */

function cancelFormulaFromButton(button) {

    cancelFormula(
        button.dataset.rowId
    );

}


/* ================================================================
   DELETE FORMULA
   ================================================================ */

function deleteFormula(
    id,
    acct
) {

    if (!confirm("Delete this formula account?")) {
        return;
    }


    window.location.href =
        "?delete=" +
        encodeURIComponent(id) +
        "&delete_acct=" +
        encodeURIComponent(acct);

}


/* ================================================================
   DELETE FORMULA FROM BUTTON
   ================================================================ */

function deleteFormulaFromButton(button) {

    deleteFormula(
        button.dataset.id,
        button.dataset.acct
    );

}


/* ================================================================
   ACCOUNT AUTOCOMPLETE
   ================================================================ */

/* ================================================================
   ACCOUNT AUTOCOMPLETE
   ================================================================ */

function setupAutocomplete(
    input,
    resultBox,
    minAcctInput
) {

    if (!input || !resultBox) {
        return;
    }


    // ============================================================
    // PREVENT DUPLICATE EVENT LISTENER
    // ============================================================

    if (input.dataset.autocompleteBound === "1") {
        return;
    }

    input.dataset.autocompleteBound = "1";


    let timer = null;


    // ============================================================
    // INPUT
    // ============================================================

    input.addEventListener(
        "input",
        function () {

            const q =
                input.value.trim();


            resultBox.innerHTML = "";


            if (!q) {
                return;
            }


            clearTimeout(timer);


            timer = setTimeout(
                function () {

                    let url =
                        "/api/search_account/?q=" +
                        encodeURIComponent(q);


                    // =================================================
                    // ACCT TO
                    // =================================================

                    if (minAcctInput) {

                        const minAcct =
                            minAcctInput.value.trim();


                        if (minAcct) {

                            url +=
                                "&min_acct=" +
                                encodeURIComponent(
                                    minAcct
                                );

                        }

                    }


                    // =================================================
                    // SEARCH ACCOUNT
                    // =================================================

                    fetch(url)

                        .then(
                            function (response) {

                                if (!response.ok) {

                                    throw new Error(
                                        "HTTP " +
                                        response.status
                                    );

                                }

                                return response.json();

                            }
                        )

                        .then(
                            function (data) {

                                resultBox.innerHTML = "";


                                // =====================================
                                // NO RESULT
                                // =====================================

                                if (
                                    !Array.isArray(data) ||
                                    data.length === 0
                                ) {

                                    const empty =
                                        document.createElement(
                                            "div"
                                        );


                                    empty.className =
                                        "autocomplete-item text-muted";


                                    empty.textContent =
                                        "No account found.";


                                    resultBox.appendChild(
                                        empty
                                    );


                                    return;

                                }


                                // =====================================
                                // RESULTS
                                // =====================================

                                data.forEach(
                                    function (item) {

                                        const div =
                                            document.createElement(
                                                "div"
                                            );


                                        div.className =
                                            "autocomplete-item";


                                        // =================================
                                        // ACCOUNT NUMBER
                                        // =================================

                                        const acctSpan =
                                            document.createElement(
                                                "span"
                                            );


                                        acctSpan.className =
                                            "autocomplete-acct";


                                        acctSpan.textContent =
                                            (
                                                item.acct_no || ""
                                            ).trim();


                                        // =================================
                                        // ACCOUNT NAME
                                        // =================================

                                        const nameSpan =
                                            document.createElement(
                                                "span"
                                            );


                                        nameSpan.className =
                                            "autocomplete-name";


                                        nameSpan.textContent =
                                            (
                                                item.acct_name || ""
                                            ).trim();


                                        div.appendChild(
                                            acctSpan
                                        );


                                        div.appendChild(
                                            nameSpan
                                        );


                                        // =================================
                                        // SELECT ACCOUNT
                                        // =================================

                                        div.addEventListener(
                                            "click",
                                            function () {

                                                const selectedAcct =
                                                    (
                                                        item.acct_no || ""
                                                    ).trim();


                                                // =========================================================
                                                // SET ACCOUNT NUMBER
                                                // =========================================================

                                                input.value = selectedAcct;


                                                // =========================================================
                                                // CLOSE DROPDOWN
                                                // =========================================================

                                                resultBox.innerHTML = "";


                                                // =========================================================
                                                // ACCT FROM
                                                // Setelah dipilih, pindah ke Acct To
                                                // =========================================================

                                                if (
                                                    minAcctInput === null &&
                                                    input.id.startsWith("acct1_")
                                                ) {

                                                    const rowId =
                                                        input.id.replace(
                                                            "acct1_",
                                                            ""
                                                        );


                                                    const acct2 =
                                                        document.getElementById(
                                                            "acct2_" + rowId
                                                        );


                                                    if (acct2) {

                                                        setTimeout(
                                                            function () {

                                                                acct2.focus();

                                                            },
                                                            0
                                                        );

                                                    }

                                                }

                                            }
                                        );


                                        resultBox.appendChild(
                                            div
                                        );

                                    }
                                );

                            }
                        )

                        .catch(
                            function (error) {

                                console.error(
                                    "Account autocomplete error:",
                                    error
                                );


                                resultBox.innerHTML = "";

                            }
                        );

                },
                250
            );

        }
    );


    // ============================================================
    // CLOSE DROPDOWN
    // ============================================================

    document.addEventListener(
        "click",
        function (event) {

            if (
                event.target !== input &&
                !resultBox.contains(
                    event.target
                )
            ) {

                resultBox.innerHTML = "";

            }

        }
    );

}

/* ================================================================
   PQR3 AUTOCOMPLETE
   ================================================================ */

function setupPqr3Autocomplete() {

    const input =
        document.getElementById(
            "pqr3_acct"
        );


    const resultBox =
        document.getElementById(
            "pqr3_acct_results"
        );


    setupAutocomplete(
        input,
        resultBox,
        null
    );

}


/* ================================================================
   FORMULA AUTOCOMPLETE
   ================================================================= */

/* ================================================================
   FORMULA AUTOCOMPLETE
   ================================================================ */

function setupFormulaAutocompleteForRow(rowId) {

    const acct1 =
        document.getElementById(
            "acct1_" + rowId
        );


    const acct2 =
        document.getElementById(
            "acct2_" + rowId
        );


    const results1 =
        document.getElementById(
            "acct1_results_" + rowId
        );


    const results2 =
        document.getElementById(
            "acct2_results_" + rowId
        );


    if (
        !acct1 ||
        !acct2 ||
        !results1 ||
        !results2
    ) {
        return;
    }


    // ============================================================
    // ENABLE INPUT
    // ============================================================

    acct1.disabled = false;
    acct1.readOnly = false;

    acct2.disabled = false;
    acct2.readOnly = false;


    // ============================================================
    // ACCT FROM
    // ============================================================

    setupAutocomplete(
        acct1,
        results1,
        null
    );


    // ============================================================
    // ACCT TO
    //
    // Account To harus lebih besar daripada Account From.
    // ============================================================

    setupAutocomplete(
        acct2,
        results2,
        acct1
    );

}


/* ================================================================
   INITIALIZE ALL FORMULA AUTOCOMPLETE
   ================================================================= */

function setupFormulaAutocompletes() {

    const formulaRows =
        document.querySelectorAll(
            ".formula-row"
        );

    formulaRows.forEach(
        function (row) {

            const rowId =
                row.id.replace(
                    "formulaRow_",
                    ""
                );

            setupFormulaAutocompleteForRow(
                rowId
            );
        }
    );
}

/* ================================================================
   INSERT ABOVE
   ================================================================ */

function insertAbove(id) {

    const rows =
        Array.from(
            document.querySelectorAll(
                "#sortablePqr3 > tr:not(.formula-row)"
            )
        );


    const index =
        rows.findIndex(
            function (row) {
                return row.dataset.id == id;
            }
        );


    if (index < 0) {
        return;
    }


    const current =
        rows[index];


    const currentLine =
        parseInt(
            current.dataset.lineno || "0",
            10
        );


    let newLine;


    if (index === 0) {

        newLine = 1;

    } else {

        const previous =
            rows[index - 1];


        const previousLine =
            parseInt(
                previous.dataset.lineno || "0",
                10
            );


        if (
            currentLine -
            previousLine >
            1
        ) {

            newLine =
                Math.floor(
                    (
                        currentLine +
                        previousLine
                    ) / 2
                );

        } else {

            newLine =
                currentLine;

        }

    }


    newPqr3();


    document.getElementById(
        "lineno"
    ).value = newLine;

}


/* ================================================================
   INSERT ABOVE FROM BUTTON
   ================================================================ */

function insertAboveFromButton(button) {

    insertAbove(
        button.dataset.id
    );

}


/* ================================================================
   INSERT BELOW
   ================================================================ */

function insertBelow(id) {

    const rows =
        Array.from(
            document.querySelectorAll(
                "#sortablePqr3 > tr:not(.formula-row)"
            )
        );


    const index =
        rows.findIndex(
            function (row) {
                return row.dataset.id == id;
            }
        );


    if (index < 0) {
        return;
    }


    const current =
        rows[index];


    const currentLine =
        parseInt(
            current.dataset.lineno || "0",
            10
        );


    let newLine;


    if (index === rows.length - 1) {

        newLine =
            currentLine + 10;

    } else {

        const next =
            rows[index + 1];


        const nextLine =
            parseInt(
                next.dataset.lineno || "0",
                10
            );


        if (
            nextLine -
            currentLine >
            1
        ) {

            newLine =
                Math.floor(
                    (
                        currentLine +
                        nextLine
                    ) / 2
                );

        } else {

            newLine =
                currentLine + 1;

        }

    }


    newPqr3();


    document.getElementById(
        "lineno"
    ).value = newLine;

}


/* ================================================================
   INSERT BELOW FROM BUTTON
   ================================================================ */

function insertBelowFromButton(button) {

    insertBelow(
        button.dataset.id
    );

}


/* ================================================================
   SORTABLE
   ================================================================ */

const sortableElement =
    document.getElementById(
        "sortablePqr3"
    );


if (sortableElement) {

    new Sortable(
        sortableElement,
        {

            animation: 150,

            handle: ".drag-handle",

            draggable:
                "tr:not(.formula-row)",

            filter:
                ".formula-row",

            onEnd: function () {

                /*
                 * Existing lineno logic is intentionally
                 * not changed here.
                 *
                 * We first verify the new single-screen
                 * layout before changing the persistence
                 * mechanism for drag/drop.
                 */

            }

        }
    );

}

</script>

{% endblock %}