<form method="post" action="<?= base_url() ?>admin/settings/update_menu_allocation" enctype="multipart/form-data" class="space-y-5">
    <div class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
        <div class="flex flex-col gap-3 border-b border-border px-6 py-4 md:flex-row md:items-center md:justify-between">
            <h2 class="text-lg font-semibold text-foreground"><?= lang('menu_allocation'); ?></h2>
            <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90">
                <?= lang('submit') ?>
            </button>
        </div>

        <div class="menu-allocation__row grid grid-cols-1 gap-5 p-5 lg:grid-cols-12">
            <section class="menu-allocation__col lg:col-span-7">
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('active_menu'); ?></h3>
                <div id="nestable" class="dd menu-allocation__list">
                    <?= $active_menu ?>
                </div>
                <textarea id="nestable-output" name="all_active_menu" class="hidden"></textarea>
            </section>

            <section class="menu-allocation__col lg:col-span-5">
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('inactive_menu'); ?></h3>
                <div id="nestable2" class="dd menu-allocation__list">
                    <?= !empty($inactive_menu) ? $inactive_menu : '' ?>
                </div>
                <textarea id="nestable2-output" name="all_inactive_menu" class="hidden"></textarea>
            </section>
        </div>
    </div>
</form>

<style>
    .menu-allocation__col {
        min-width: 0;
    }
    .menu-allocation__list {
        background: hsl(var(--muted) / 0.35);
        border: 1px solid hsl(var(--border));
        border-radius: 12px;
        padding: 12px;
        min-height: 300px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .dark .menu-allocation__list {
        background: hsl(var(--card) / 0.65);
    }
    .menu-allocation__list .dd-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .menu-allocation__list .dd-item {
        margin: 8px 0;
        background: hsl(var(--card));
        border: 1px solid hsl(var(--border));
        border-radius: 10px;
    }
    .menu-allocation__list .dd-item > .dd-list {
        margin: 8px 12px 12px;
        padding-left: 14px;
        border-left: 2px dashed hsl(var(--border));
    }
    .menu-allocation__list .dd-handle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        cursor: grab;
        background: transparent;
        border-radius: 8px;
        font-weight: 600;
        color: hsl(var(--foreground));
        user-select: none;
		font-size: 14px;
    }
    .menu-allocation__list .dd-handle:active {
        cursor: grabbing;
    }
    .menu-allocation__list .dd-handle::before {
        content: "::";
        color: hsl(var(--muted-foreground));
        font-weight: 700;
        letter-spacing: 1px;
    }
    .menu-allocation__list .dd-placeholder {
        background: hsl(var(--primary) / 0.08);
        border: 2px dashed hsl(var(--primary));
        border-radius: 10px;
        min-height: 44px;
    }
    @media (max-width: 991px) {
        .menu-allocation__list {
            min-height: 220px;
        }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script type="text/javascript">
    (function () {
        var activeContainer = document.getElementById('nestable');
        var inactiveContainer = document.getElementById('nestable2');
        if (!activeContainer || !inactiveContainer) {
            return;
        }

        var activeOutput = document.getElementById('nestable-output');
        var inactiveOutput = document.getElementById('nestable2-output');

        var getDirectChildList = function (el) {
            for (var i = 0; i < el.children.length; i++) {
                var child = el.children[i];
                if (child.classList && child.classList.contains('dd-list')) {
                    return child;
                }
            }
            return null;
        };

        var ensureChildLists = function (container) {
            var items = container.querySelectorAll('.dd-item');
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (!getDirectChildList(item)) {
                    var emptyList = document.createElement('ol');
                    emptyList.className = 'dd-list';
                    item.appendChild(emptyList);
                }
            }
        };

        var serializeList = function (listEl) {
            var items = [];
            if (!listEl) {
                return items;
            }
            for (var i = 0; i < listEl.children.length; i++) {
                var itemEl = listEl.children[i];
                if (!itemEl.classList || !itemEl.classList.contains('dd-item')) {
                    continue;
                }
                var item = { id: itemEl.getAttribute('data-id') };
                var childList = getDirectChildList(itemEl);
                if (childList && childList.children.length) {
                    var children = serializeList(childList);
                    if (children.length) {
                        item.children = children;
                    }
                }
                items.push(item);
            }
            return items;
        };

        var updateOutputs = function () {
            var activeList = getDirectChildList(activeContainer) || activeContainer.querySelector('.dd-list');
            var inactiveList = getDirectChildList(inactiveContainer) || inactiveContainer.querySelector('.dd-list');
            if (activeOutput) {
                activeOutput.value = window.JSON ? window.JSON.stringify(serializeList(activeList)) : '';
            }
            if (inactiveOutput) {
                inactiveOutput.value = window.JSON ? window.JSON.stringify(serializeList(inactiveList)) : '';
            }
        };

        var initSortableOnList = function (listEl) {
            if (!window.Sortable || !listEl) {
                return;
            }
            new Sortable(listEl, {
                group: 'menu-allocation',
                handle: '.dd-handle',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onEnd: updateOutputs,
                onAdd: updateOutputs,
                onUpdate: updateOutputs,
                onSort: updateOutputs
            });
        };

        var initAllLists = function (container) {
            ensureChildLists(container);
            var lists = container.querySelectorAll('.dd-list');
            for (var i = 0; i < lists.length; i++) {
                initSortableOnList(lists[i]);
            }
        };

        initAllLists(activeContainer);
        initAllLists(inactiveContainer);
        updateOutputs();

        var form = activeContainer.closest('form');
        if (form) {
            form.addEventListener('submit', updateOutputs);
        }
    })();
</script>
