{% 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
   ============================================================ */
.attach11-table {
    font-size: 0.88rem;
}

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

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

/* ============================================================
   ROW TYPES
   ============================================================ */
.attach11-text-row,
.attach11-total-row {
    font-weight: 600;
    background-color: #f8f9fa;
}

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

/* ============================================================
   FORMAT DETAIL
   ============================================================ */
.format-row {
    display: none;
}

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

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

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

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

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

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

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

/* ============================================================
   BUTTON
   ============================================================ */
.btn-narrow {
    padding-left: 8px;
    padding-right: 8px;
}

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

/* ============================================================
   FORMAT EDITOR
   ============================================================ */
.format-editor {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
}

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

/* ============================================================
   AUTOCOMPLETE
   ============================================================ */
.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;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    max-height: 220px;
    overflow-y: auto;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

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

.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) {
    .attach11-table {
        font-size: 0.78rem;
    }

    .format-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 Attachment FQR11
        </div>

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

    </div>

    <!-- ========================================================
         ATTACHMENT EDITOR
         ======================================================== -->
    <div
        class="card mb-3"
        id="attach11Editor"
        style="display: none;"
    >

        <div class="card-header bg-light">
            <strong id="attach11EditorTitle">
                New Attachment
            </strong>
        </div>

        <div class="card-body">

            <form method="POST" id="attach11Form">
                {% csrf_token %}

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

                <input
                    type="hidden"
                    name="attach_id"
                    id="attach11_id"
                    value=""
                >

                <input
                    type="hidden"
                    name="lineno"
                    id="attach11_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="attach11_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="attach11_acct"
                                autocomplete="off"
                            >

                            <div
                                id="attach11_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="attach11_descript"
                            maxlength="50"
                        >

                    </div>

                    <!-- BUTTONS -->
                    <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="cancelAttach11();"
                            >
                                Cancel
                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>
    </div>

    <!-- ========================================================
         MAIN TABLE
         ======================================================== -->
    <div class="table-responsive">

        <table
            class="table table-hover table-sm table-bordered attach11-table"
            id="attach11Table"
        >

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

                {% for b in attach11s %}

                <!-- =================================================
                     MAIN ROW
                     ================================================= -->
                <tr
                    class="{% if b.type == 'TEXT' %}attach11-text-row{% elif b.type == 'TOTAL' %}attach11-total-row{% endif %}{% if expanded_lineno == b.lineno %} attach11-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="editAttach11FromButton(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="deleteAttach11FromButton(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>

                            <!-- FORMAT TOGGLE -->
                            {% if b.type == "ACCT" and b.acct %}

                            <button
                                type="button"
                                class="btn btn-outline-primary btn-sm btn-narrow format-toggle"
                                title="Format Accounts"
                                data-row-id="{{ b.id }}"
                                onclick="toggleFormatFromButton(this);"
                            >
                                {% if expanded_lineno == b.lineno %}
                                    <i class="bi bi-dash-lg"></i>
                                {% else %}
                                    <i class="bi bi-plus-lg"></i>
                                {% endif %}
                            </button>

                            {% endif %}

                        </div>

                    </td>

                </tr>

                <!-- =================================================
                     INLINE FORMAT ROW
                     ================================================= -->
                {% if b.type == "ACCT" and b.acct %}

                <tr
                    id="formatRow_{{ b.id }}"
                    class="format-row{% if expanded_lineno == b.lineno %} format-open{% endif %}"
                >

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

                        <div class="format-detail">

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

                                <div class="format-title">

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

                                    Attachment Format

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

                                </div>

                                <button
                                    type="button"
                                    class="btn btn-success btn-sm"
                                    data-row-id="{{ b.id }}"
                                    onclick="addFormatFromButton(this);"
                                >
                                    <i class="bi bi-plus-lg"></i>
                                    Add Format
                                </button>

                            </div>

                            <!-- FORMAT TABLE -->
                            <div class="table-responsive mt-2">

                                <table class="table table-sm table-bordered format-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 formats_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">

                                                    <!-- EDIT FORMAT -->
                                                    <button
                                                        type="button"
                                                        class="btn btn-secondary btn-sm btn-narrow"
                                                        title="Edit Format"
                                                        data-id="{{ f.id }}"
                                                        data-row-id="{{ b.id }}"
                                                        data-acct1="{{ f.acct1 }}"
                                                        data-acct2="{{ f.acct2 }}"
                                                        onclick="editFormatFromButton(this);"
                                                    >
                                                        <i class="bi bi-pencil"></i>
                                                    </button>

                                                    <!-- DELETE FORMAT -->
                                                    <button
                                                        type="button"
                                                        class="btn btn-danger btn-sm btn-narrow"
                                                        title="Delete Format"
                                                        data-id="{{ f.id }}"
                                                        data-lineno="{{ b.lineno }}"
                                                        onclick="deleteFormatFromButton(this);"
                                                    >
                                                        <i class="bi bi-trash"></i>
                                                    </button>

                                                </div>

                                            </td>

                                        </tr>

                                        {% empty %}

                                        <tr>
                                            <td
                                                colspan="3"
                                                class="text-center text-muted"
                                            >
                                                No format account.
                                            </td>
                                        </tr>

                                        {% endfor %}

                                    </tbody>

                                </table>

                            </div>

                            <!-- FORMAT EDITOR -->
                            <div
                                class="format-editor"
                                id="formatEditor_{{ b.id }}"
                            >

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

                                    {% csrf_token %}

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

                                    <input
                                        type="hidden"
                                        name="format_id"
                                        id="format_id_{{ b.id }}"
                                        value=""
                                    >

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

                                        <!-- BUTTONS -->
                                        <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="cancelFormatFromButton(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 attachment design data.
                    </td>
                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

</div>

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

<script>
/* ================================================================
   PAGE LOAD
   ================================================================ */
document.addEventListener("DOMContentLoaded", function () {
    typeChanged();
    setupAttach11Autocomplete();
    setupFormatAutocompletes();
});


/* ================================================================
   NEW ATTACHMENT
   ================================================================ */
function newAttach11() {
    const editor = document.getElementById("attach11Editor");

    editor.style.display = "block";

    document.getElementById("attach11EditorTitle").innerText =
        "New Attachment";

    document.getElementById("attach11_id").value = "";
    document.getElementById("attach11_lineno").value = "";
    document.getElementById("attach11_type").value = "TEXT";
    document.getElementById("attach11_acct").value = "";
    document.getElementById("attach11_descript").value = "";

    typeChanged();

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


/* ================================================================
   EDIT ATTACHMENT
   ================================================================ */
function editAttach11(id, lineno, type, acct, descript) {
    document.getElementById("attach11Editor").style.display = "block";

    document.getElementById("attach11EditorTitle").innerText =
        "Edit Attachment";

    document.getElementById("attach11_id").value = id;
    document.getElementById("attach11_lineno").value = lineno;
    document.getElementById("attach11_type").value = type.trim();
    document.getElementById("attach11_acct").value = acct.trim();
    document.getElementById("attach11_descript").value = descript.trim();

    typeChanged();

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


function editAttach11FromButton(button) {
    editAttach11(
        button.dataset.id,
        button.dataset.lineno,
        button.dataset.type,
        button.dataset.acct,
        button.dataset.descript
    );
}


/* ================================================================
   CANCEL ATTACHMENT
   ================================================================ */
function cancelAttach11() {
    document.getElementById("attach11Editor").style.display = "none";
}


/* ================================================================
   DELETE ATTACHMENT
   ================================================================ */
function deleteAttach11(id) {
    if (!confirm("Delete this attachment row and its format rows?")) {
        return;
    }

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


function deleteAttach11FromButton(button) {
    deleteAttach11(button.dataset.id);
}


/* ================================================================
   TYPE CHANGE
   ================================================================ */
function typeChanged() {
    const type = document.getElementById("attach11_type").value.trim();
    const acct = document.getElementById("attach11_acct");

    if (type === "TEXT") {
        acct.value = "";
        acct.disabled = true;
    } else {
        acct.disabled = false;
    }
}


/* ================================================================
   TOGGLE FORMAT
   ================================================================ */
function toggleFormat(rowId) {
    const formatRow = document.getElementById("formatRow_" + rowId);

    if (!formatRow) {
        return;
    }

    const formatRows = document.querySelectorAll(
        "#sortableAttach11 > tr.format-row"
    );

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

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

    const isOpen = formatRow.classList.contains("format-open");

    formatRows.forEach(function (row) {
        row.classList.remove("format-open");
    });

    mainRows.forEach(function (row) {
        row.classList.remove("attach11-selected-row");
    });

    buttons.forEach(function (button) {
        button.innerHTML = '<i class="bi bi-plus-lg"></i>';
    });

    if (!isOpen) {
        formatRow.classList.add("format-open");

        const mainRow = formatRow.previousElementSibling;

        if (mainRow) {
            mainRow.classList.add("attach11-selected-row");

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

            if (button) {
                button.innerHTML = '<i class="bi bi-dash-lg"></i>';
            }
        }
    }
}


function toggleFormatFromButton(button) {
    toggleFormat(button.dataset.rowId);
}


/* ================================================================
   ADD FORMAT
   ================================================================ */
function addFormat(rowId) {
    const editor = document.getElementById("formatEditor_" + rowId);
    const acct1 = document.getElementById("acct1_" + rowId);
    const acct2 = document.getElementById("acct2_" + rowId);
    const formatId = document.getElementById("format_id_" + rowId);

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

    editor.classList.add("show");

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

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

    setupFormatAutocompleteForRow(rowId);

    setTimeout(function () {
        acct1.focus();
    }, 100);

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


function addFormatFromButton(button) {
    addFormat(button.dataset.rowId);
}


/* ================================================================
   EDIT FORMAT
   ================================================================ */
function editFormat(id, rowId, acct1, acct2) {
    const editor = document.getElementById("formatEditor_" + rowId);

    if (!editor) {
        return;
    }

    editor.classList.add("show");

    document.getElementById("format_id_" + rowId).value = id;
    document.getElementById("acct1_" + rowId).value = acct1.trim();
    document.getElementById("acct2_" + rowId).value = acct2.trim();

    setupFormatAutocompleteForRow(rowId);

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


function editFormatFromButton(button) {
    editFormat(
        button.dataset.id,
        button.dataset.rowId,
        button.dataset.acct1,
        button.dataset.acct2
    );
}


/* ================================================================
   CANCEL FORMAT
   ================================================================ */
function cancelFormat(rowId) {
    const editor = document.getElementById("formatEditor_" + rowId);

    if (editor) {
        editor.classList.remove("show");
    }
}


function cancelFormatFromButton(button) {
    cancelFormat(button.dataset.rowId);
}


/* ================================================================
   DELETE FORMAT
   ================================================================ */
function deleteFormat(id, lineno) {
    if (!confirm("Delete this format account?")) {
        return;
    }

    window.location.href =
        "?delete_format=" + encodeURIComponent(id) +
        "&delete_lineno=" + encodeURIComponent(lineno);
}


function deleteFormatFromButton(button) {
    deleteFormat(
        button.dataset.id,
        button.dataset.lineno
    );
}


/* ================================================================
   ACCOUNT AUTOCOMPLETE
   Uses the same endpoint as PQR4.
   ================================================================ */
function setupAutocomplete(input, resultBox, minAcctInput) {
    if (!input || !resultBox || input.dataset.autocompleteReady === "1") {
        return;
    }

    input.dataset.autocompleteReady = "1";

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

            if (minAcctInput && minAcctInput.value.trim()) {
                url += "&min_acct=" +
                    encodeURIComponent(minAcctInput.value.trim());
            }

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

                        div.addEventListener(
                            "pointerdown",
                            function (event) {
                                event.preventDefault();
                                event.stopPropagation();

                                input.value =
                                    (item.acct_no || "").trim();

                                resultBox.innerHTML = "";

                                if (
                                    !minAcctInput &&
                                    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);
    });

    document.addEventListener("click", function (event) {
        if (
            event.target !== input &&
            !resultBox.contains(event.target)
        ) {
            resultBox.innerHTML = "";
        }
    });
}


/* ================================================================
   ATTACHMENT AUTOCOMPLETE
   ================================================================ */
function setupAttach11Autocomplete() {
    setupAutocomplete(
        document.getElementById("attach11_acct"),
        document.getElementById("attach11_acct_results"),
        null
    );
}


/* ================================================================
   FORMAT AUTOCOMPLETE
   ================================================================ */
function setupFormatAutocompleteForRow(rowId) {
    const acct1 = document.getElementById("acct1_" + rowId);
    const acct2 = document.getElementById("acct2_" + rowId);

    setupAutocomplete(
        acct1,
        document.getElementById("acct1_results_" + rowId),
        null
    );

    setupAutocomplete(
        acct2,
        document.getElementById("acct2_results_" + rowId),
        acct1
    );
}


function setupFormatAutocompletes() {
    document.querySelectorAll(".format-row").forEach(function (row) {
        const rowId = row.id.replace("formatRow_", "");

        setupFormatAutocompleteForRow(rowId);
    });
}


/* ================================================================
   INSERT ABOVE
   ================================================================ */
function insertAbove(id) {
    const rows = Array.from(
        document.querySelectorAll(
            "#sortableAttach11 > tr:not(.format-row)"
        )
    );

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

    if (index < 0) {
        return;
    }

    const currentLine = parseInt(
        rows[index].dataset.lineno || "0",
        10
    );

    let newLine;

    if (index === 0) {
        newLine = Math.max(1, currentLine - 10);
    } else {
        const previousLine = parseInt(
            rows[index - 1].dataset.lineno || "0",
            10
        );

        if (currentLine - previousLine > 1) {
            newLine = Math.floor(
                (currentLine + previousLine) / 2
            );
        } else {
            newLine = currentLine;
        }
    }

    newAttach11();

    document.getElementById("attach11_lineno").value = newLine;
}


function insertAboveFromButton(button) {
    insertAbove(button.dataset.id);
}


/* ================================================================
   INSERT BELOW
   ================================================================ */
function insertBelow(id) {
    const rows = Array.from(
        document.querySelectorAll(
            "#sortableAttach11 > tr:not(.format-row)"
        )
    );

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

    if (index < 0) {
        return;
    }

    const currentLine = parseInt(
        rows[index].dataset.lineno || "0",
        10
    );

    let newLine;

    if (index === rows.length - 1) {
        newLine = currentLine + 10;
    } else {
        const nextLine = parseInt(
            rows[index + 1].dataset.lineno || "0",
            10
        );

        if (nextLine - currentLine > 1) {
            newLine = Math.floor(
                (currentLine + nextLine) / 2
            );
        } else {
            newLine = currentLine + 1;
        }
    }

    newAttach11();

    document.getElementById("attach11_lineno").value = newLine;
}


function insertBelowFromButton(button) {
    insertBelow(button.dataset.id);
}


/* ================================================================
   SORTABLE
   Persistence follows the current PQR4 behavior.
   ================================================================ */
const sortableAttach11 = document.getElementById("sortableAttach11");

if (sortableAttach11 && window.Sortable) {
    new Sortable(sortableAttach11, {
        animation: 150,
        handle: ".drag-handle",
        draggable: "tr:not(.format-row)",
        filter: ".format-row, .autocomplete-list, .autocomplete-item, input",
        onEnd: function () {
            /* Persistence intentionally unchanged. */
        }
    });
}
</script>

{% endblock %}