{% 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

   ============================================================ */

.pqr11-table {

    font-size: 0.88rem;

}

.pqr11-table thead th {

    background-color: #495057;
    color: white;
    vertical-align: middle;
    border-color: #495057;

}

.pqr11-table tbody td {

    vertical-align: middle;

}

/* ============================================================

   ROW TYPES

   ============================================================ */

.pqr11-text-row {

    font-weight: 600;

    background-color: #f8f9fa;

}

.pqr11-total-row {

    font-weight: 600;

    background-color: #f8f9fa;

}

.pqr11-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-wrapper {

    position: relative;

    width: 100%;

}

.autocomplete-wrapper input {

    pointer-events: auto !important;

    user-select: text !important;

    cursor: text !important;

}

.autocomplete-list {

    pointer-events: auto !important;

    z-index: 99999 !important;

}

.autocomplete-item {

    pointer-events: auto !important;

    cursor: pointer !important;

}

.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) {

    .pqr11-table {

        font-size: 0.78rem;

    }

    .formula-detail {

        margin-left: 4px;

        margin-right: 4px;

    }

    .description-cell {

        white-space: normal;

    }
}

</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 FQR11

        </div>
        <button

            type="button"

            class="btn btn-success btn-sm"

            onclick="newPqr8();"

        >

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

            New

        </button>

    </div>


    <!-- ============================================================

         PQR8 EDITOR

         ============================================================ -->

         <div

        class="card mb-3"

        id="pqr8Editor"

        style="display: none;"

    >

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



            <strong id="pqr8EditorTitle">

                New PQR8

            </strong>



        </div>





        <div class="card-body">



            <form

                method="POST"

                id="pqr8Form"

            >



                {% csrf_token %}



                <input

                    type="hidden"

                    name="form_type"

                    value="pqr11"

                >



                <input

                    type="hidden"

                    name="pqr11_id"

                    id="pqr11_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="pqr8_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="pqr8_acct"

                                autocomplete="off"

                            >



                            <div

                                id="pqr8_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="pqr8_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="cancelPqr8();"

                            >



                                Cancel



                            </button>



                        </div>



                    </div>



                </div>



            </form>



        </div>



    </div>





    <!-- ============================================================

         MAIN TABLE

         ============================================================ -->



    <div class="table-responsive">



        <table

            class="table table-hover table-sm table-bordered pqr11-table"

            id="pqr8Table"

        >



            <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="sortablePqr8">



                {% for b in pqr11s %}





                <!-- ====================================================

                     MAIN ROW

                     ==================================================== -->



                <tr

                    class="

                        {% if b.type == 'TEXT' %}

                            pqr11-text-row

                        {% elif b.type == 'TOTAL' %}

                            pqr11-total-row

                        {% endif %}



                        {% if expanded_acct == b.acct %}

                            pqr11-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="editPqr8FromButton(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="deletePqr8FromButton(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_lineno|get_item:b.lineno %}



                                        <tr>



                                            <td>

                                                {{ f.acct1|format_acct_no }}

                                            </td>



                                            <td>

                                                {{ f.acct2|format_acct_no }}

                                            </td>



                                            <td class="text-center">



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



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

                                                        data-acct2="{{ f.acct2 }}"

                                                        onclick="editFormulaFromButton(this);"

                                                    >



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



                                                    </button>





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

                                    >

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





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



        setupPqr8Autocomplete();



        setupFormulaAutocompletes();



    }

);





/* ================================================================

   NEW PQR8

   ================================================================ */



function newPqr8() {



    const editor =

        document.getElementById(

            "pqr8Editor"

        );





    editor.style.display =

        "block";





    document.getElementById(

        "pqr8EditorTitle"

    ).innerText =

        "New PQR8";





    document.getElementById(

        "pqr8_id"

    ).value =

        "";





    document.getElementById(

        "lineno"

    ).value =

        "";





    document.getElementById(

        "pqr8_type"

    ).value =

        "TEXT";





    document.getElementById(

        "pqr8_acct"

    ).value =

        "";





    document.getElementById(

        "pqr8_descript"

    ).value =

        "";





    typeChanged();





    window.scrollTo({

        top: 0,

        behavior: "smooth"

    });



}





/* ================================================================

   EDIT PQR8

   ================================================================ */



function editPqr8(

    id,

    lineno,

    type,

    acct,

    descript

) {



    document.getElementById(

        "pqr8Editor"

    ).style.display =

        "block";





    document.getElementById(

        "pqr8EditorTitle"

    ).innerText =

        "Edit PQR8";





    document.getElementById(

        "pqr8_id"

    ).value =

        id;





    document.getElementById(

        "lineno"

    ).value =

        lineno;





    document.getElementById(

        "pqr8_type"

    ).value =

        type;





    document.getElementById(

        "pqr8_acct"

    ).value =

        acct;





    document.getElementById(

        "pqr8_descript"

    ).value =

        descript;





    typeChanged();





    window.scrollTo({

        top: 0,

        behavior: "smooth"

    });



}





/* ================================================================

   EDIT PQR8 FROM BUTTON

   ================================================================ */



function editPqr8FromButton(button) {



    editPqr8(

        button.dataset.id,

        button.dataset.lineno,

        button.dataset.type,

        button.dataset.acct,

        button.dataset.descript

    );



}





/* ================================================================

   CANCEL PQR8

   ================================================================ */



function cancelPqr8() {



    document.getElementById(

        "pqr8Editor"

    ).style.display =

        "none";



}





/* ================================================================

   DELETE PQR8

   ================================================================ */



function deletePqr8(id) {



    if (

        !confirm(

            "Delete this PQR8 row?"

        )

    ) {

        return;

    }





    window.location.href =

        "?delete_pqr8=" +

        encodeURIComponent(id);



}





/* ================================================================

   DELETE PQR8 FROM BUTTON

   ================================================================ */



function deletePqr8FromButton(button) {



    deletePqr8(

        button.dataset.id

    );



}





/* ================================================================

   TYPE CHANGE

   ================================================================ */



function typeChanged() {



    const type =

        document.getElementById(

            "pqr8_type"

        ).value;





    const acct =

        document.getElementById(

            "pqr8_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(

            "#sortablePqr8 > tr:not(.formula-row)"

        );





    const formulaRows =

        document.querySelectorAll(

            "#sortablePqr8 > tr.formula-row"

        );





    const buttons =

        document.querySelectorAll(

            ".formula-toggle"

        );





    const isOpen =

        formulaRow.classList.contains(

            "formula-open"

        );





    formulaRows.forEach(

        function (row) {



            row.classList.remove(

                "formula-open"

            );



        }

    );





    mainRows.forEach(

        function (row) {



            row.classList.remove(

                "pqr11-selected-row"

            );



        }

    );





    buttons.forEach(

        function (button) {



            button.innerHTML =

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



        }

    );





    if (!isOpen) {



        formulaRow.classList.add(

            "formula-open"

        );





        const mainRow =

            formulaRow.previousElementSibling;





        if (mainRow) {



            mainRow.classList.add(

                "pqr11-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

   ================================================================ */



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;





    // ============================================================

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





    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

   ================================================================ */



function setupAutocomplete(

    input,

    resultBox,

    minAcctInput

) {



    if (!input || !resultBox) {

        return;

    }





    let timer = null;





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





                                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;

                                }





                                data.forEach(

                                    function (item) {



                                        const div =

                                            document.createElement(

                                                "div"

                                            );





                                        div.className =

                                            "autocomplete-item";





                                        const acctSpan =

                                            document.createElement(

                                                "span"

                                            );





                                        acctSpan.className =

                                            "autocomplete-acct";





                                        acctSpan.textContent =

                                            (

                                                item.acct_no ||

                                                ""

                                            ).trim();





                                        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(

                                            "pointerdown",

                                            function (event) {



                                                event.preventDefault();

                                                event.stopPropagation();



                                                const selectedAcct =

                                                    (

                                                        item.acct_no ||

                                                        ""

                                                    ).trim();



                                                input.value = selectedAcct;



                                                resultBox.innerHTML = "";





                                                // ========================================================

                                                // ACCT FROM -> 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

                                                        );



                                                    }

                                                }



                                            },

                                            true

                                        );





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



            }



        }

    );



}





/* ================================================================

   PQR8 AUTOCOMPLETE

   ================================================================ */



function setupPqr8Autocomplete() {



    const input =

        document.getElementById(

            "pqr8_acct"

        );





    const resultBox =

        document.getElementById(

            "pqr8_acct_results"

        );





    setupAutocomplete(

        input,

        resultBox,

        null

    );



}





/* ================================================================

   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;

    }





    // =============================================================

    // FORCE ENABLE

    // =============================================================



    acct1.disabled = false;

    acct1.readOnly = false;



    acct2.disabled = false;

    acct2.readOnly = false;





    // =============================================================

    // ACCT FROM

    // =============================================================



    setupAutocomplete(

        acct1,

        results1,

        null

    );





    // =============================================================

    // ACCT TO

    // =============================================================



    setupAutocomplete(

        acct2,

        results2,

        acct1

    );



}





/* ================================================================

   INITIALIZE 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(

                "#sortablePqr8 > 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;



        }



    }





    newPqr8();





    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(

                "#sortablePqr8 > 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;



        }



    }





    newPqr8();





    document.getElementById(

        "lineno"

    ).value =

        newLine;



}





/* ================================================================

   INSERT BELOW FROM BUTTON

   ================================================================ */



function insertBelowFromButton(button) {



    insertBelow(

        button.dataset.id

    );



}





/* ================================================================

   SORTABLE

   ================================================================ */



const sortableElement =

    document.getElementById(

        "sortablePqr8"

    );





if (sortableElement) {



    new Sortable(

        sortableElement,

        {



            animation: 150,



            handle:

                ".drag-handle",



            draggable:

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



            filter:

                ".formula-row, .autocomplete-list, .autocomplete-item, input",



            onEnd: function () {



                /*

                 * Persistence sengaja belum diubah.

                 */



            }



        }

    );



}



</script>



{% endblock %}