(() => {
    "use strict";

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

    const submit = (endpoint) => {
        form.action = endpoint;
        form.target = "_self";
        form.submit();
    };

    const parentRow = (element) => element.closest("tr[data-parent-index]");
    const children = (row) => form.querySelector(`tr[data-child-row="${row.dataset.parentIndex}"]`);
    const childInputs = (row, field) => children(row)?.querySelectorAll(`[data-child-field="${field}"]`) || [];
    const parentInput = (row, field) => row.querySelector(`[data-parent-field="${field}"]`);
    const fields = ["allocation", "telesheet", "earlier", "negative", "cutoff"];

    const syncParent = (row, field) => {
        const inputs = [...childInputs(row, field)];
        parentInput(row, field).checked = inputs.length > 0 && inputs.every((input) => input.checked);
    };

    form.addEventListener("click", (event) => {
        const action = event.target.closest("[data-action]")?.dataset.action;
        if (action === "refresh") return submit("cutoffpending");
        if (action === "save") return submit("savecutoffpending");
        if (action !== "toggle") return;
        const button = event.target.closest("[data-action='toggle']");
        const detail = children(parentRow(button));
        detail.hidden = !detail.hidden;
        button.setAttribute("aria-expanded", String(!detail.hidden));
        button.querySelector(".matrix-row-toggle__chevron").textContent = detail.hidden ? "▶" : "▼";
    });

    form.addEventListener("change", (event) => {
        const parentField = event.target.dataset.parentField;
        if (parentField) {
            const row = parentRow(event.target);
            const affected = parentField === "cutoff" ? fields : [parentField];
            affected.forEach((field) => {
                parentInput(row, field).checked = event.target.checked;
                childInputs(row, field).forEach((input) => { input.checked = event.target.checked; });
            });
            return;
        }
        const childField = event.target.dataset.childField;
        if (!childField) return;
        const detail = event.target.closest("tr[data-child-row]");
        const row = form.querySelector(`tr[data-parent-index="${detail.dataset.childRow}"]`);
        if (childField === "cutoff") {
            fields.forEach((field) => {
                const input = event.target.closest("tr[data-child-index]").querySelector(`[data-child-field="${field}"]`);
                input.checked = event.target.checked;
                syncParent(row, field);
            });
        } else {
            syncParent(row, childField);
        }
    });
})();