@props([
'name' => 'menu', // input name for JSON
'value' => '[]', // initial JSON (string or array)
'id' => null, // optional DOM id
'maxDepth' => null, // optional nesting limit (null = unlimited)
])

<div {{ $attributes->merge(['class' => 'menu-builder']) }} x-data="menuBuilder({ initial: @js($value), maxDepth: @js($maxDepth) })" x-init="init()" :id="$id">
    <form action="{{ route('admin.settings.menu') }}" method="POST">
        @csrf
        <input name="menu-name" value="{{ request()->get('menu-name' , 'primary-menu')  }}" hidden>
        <div class="container py-4">
            <div class="row g-3">
                <!-- Add item panel -->
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-header">{{ __('Add Menu Item') }}</div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">{{ __('Label') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" placeholder="e.g. Home"
                                       x-model.trim="newItem.title">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{{ __('URL') }}</label>
                                <input dir="ltr" type="url" class="form-control" placeholder="https://example.com"
                                       x-model.trim="newItem.url">
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="new-blank" x-model="newItem.blank">
                                <label class="form-check-label" for="new-blank">{{ __('Open in new tab') }} </label>
                            </div>
                            <button type="button" class="btn btn-primary w-100" @click="addItem()"
                                    :disabled="!newItem.title">{{ __('Add to menu') }}</button>
                            <hr>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm"
                                        @click="expandAll()">{{ __('Expand all') }}</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm"
                                        @click="collapseAll()">{{ __('Collapse all') }}</button>
                                <button type="button" class="btn btn-outline-danger btn-sm ms-auto" @click="clearAll()"
                                        x-show="items.length">{{ __('Clear') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Builder panel -->
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div>
                                <strong>{{ __('Menu Structure') }}</strong>
                                <small class="text-muted ms-2">{{ __('Drag to reorder or nest items') }}</small>
                            </div>
                            <div class="d-flex gap-2 align-items-center">
                                <button type="submit" class="btn btn-success btn-sm">{{ __('Save the menu') }}</button>
                                <button type="button" class="btn btn-success btn-sm"
                                        @click="save()">{{ __('Save JSON') }}</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Root list -->
                            <ol class="" x-ref="rootList" data-sortable>
                                <template x-for="item in items" :key="item.id">
                                    <li class="menu-li" :data-id="item.id" data-type="item">
                                        <div class="menu-item-card d-flex align-items-center gap-2">
                                            <span class="drag-handle" title="Drag to move">⋮⋮</span>
                                            <button type="button" class="btn btn-sm btn-light border"
                                                    @click="item._open = !item._open" :aria-expanded="item._open">
                                                <span x-text="item._open ? '▾' : '▸'"></span>
                                            </button>
                                            <div class="flex-grow-1">
                                                <div><strong x-text="item.title"></strong> <small class="text-muted"
                                                                                                  x-text="item.url"></small>
                                                </div>
                                            </div>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-secondary"
                                                        @click="item._open = true">{{ __('Edit') }}</button>
                                                <button type="button" class="btn btn-outline-secondary"
                                                        @click="addChild(item.id)">{{ __('Add child') }}</button>
                                                <button type="button" class="btn btn-outline-danger"
                                                        @click="removeItem(item.id)">{{ __('Delete') }}</button>
                                            </div>
                                        </div>

                                        <!-- Inline editor -->
                                        <div class="border rounded p-2 mt-2 bg-light" x-show="item._open" x-transition>
                                            <div class="row g-2 align-items-center">
                                                <div class="col-md-5">
                                                    <label class="form-label">{{__('Label')}}</label>
                                                    <input type="text" class="form-control form-control-sm"
                                                           x-model.trim="item.title" @input="save()">
                                                </div>
                                                <div class="col-md-5">
                                                    <label class="form-label">{{__('URL')}}</label>
                                                    <input type="url" class="form-control form-control-sm"
                                                           x-model.trim="item.url" @input="save()">
                                                </div>
                                                <div class="col-md-2 mt-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                               :id="'b'+item.id" x-model="item.blank" @change="save()">
                                                        <label class="form-check-label"
                                                               :for="'b'+item.id">{{ __('Open in new tab') }} </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Children list -->
                                        <ol class="ms-4 mt-2" data-sortable>
                                            <template x-for="child in item.children" :key="child.id">
                                                <li class="menu-li" :data-id="child.id" data-type="item">
                                                    <div class="menu-item-card d-flex align-items-center gap-2">
                                                        <span class="drag-handle" title="Drag to move">⋮⋮</span>
                                                        <button type="button" class="btn btn-sm btn-light border"
                                                                @click="child._open = !child._open"
                                                                :aria-expanded="child._open">
                                                            <span x-text="child._open ? '▾' : '▸'"></span>
                                                        </button>
                                                        <div class="flex-grow-1">
                                                            <div><strong x-text="child.title"></strong> <small
                                                                    class="text-muted" x-text="child.url"></small></div>
                                                        </div>
                                                        <div class="btn-group btn-group-sm">
                                                            <button type="button" class="btn btn-outline-secondary"
                                                                    @click="child._open = true">{{ __('Edit') }}</button>
                                                            <button type="button" class="btn btn-outline-secondary"
                                                                    @click="addChild(child.id)">{{ __('Add child') }}</button>
                                                            <button type="button" class="btn btn-outline-danger"
                                                                    @click="removeItem(child.id)">{{ __('Delete') }}</button>
                                                        </div>
                                                    </div>

                                                    <!-- Inline editor for child -->
                                                    <div class="border rounded p-2 mt-2 bg-light" x-show="child._open"
                                                         x-transition>
                                                        <div class="row g-2 align-items-center">
                                                            <div class="col-md-5">
                                                                <label class="form-label">{{ __('Label') }}</label>
                                                                <input type="text" class="form-control form-control-sm"
                                                                       x-model.trim="child.title" @input="save()">
                                                            </div>
                                                            <div class="col-md-5">
                                                                <label class="form-label">{{ __('URL') }}</label>
                                                                <input type="url" class="form-control form-control-sm"
                                                                       x-model.trim="child.url" @input="save()">
                                                            </div>
                                                            <div class="col-md-2 mt-4">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox"
                                                                           :id="'bc'+child.id" x-model="child.blank"
                                                                           @change="save()">
                                                                    <label class="form-check-label"
                                                                           :for="'bc'+child.id">{{ __('Open in new tab') }}</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Grand-children list (recursive via template nesting) -->
                                                    <ol class="ms-4 mt-2" data-sortable>
                                                        <template x-for="g in child.children" :key="g.id">
                                                            <li class="menu-li" :data-id="g.id" data-type="item">
                                                                <div
                                                                    class="menu-item-card d-flex align-items-center gap-2">
                                                                    <span class="drag-handle"
                                                                          title="Drag to move">⋮⋮</span>
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-light border"
                                                                            @click="g._open = !g._open"
                                                                            :aria-expanded="g._open">
                                                                        <span x-text="g._open ? '▾' : '▸'"></span>
                                                                    </button>
                                                                    <div class="flex-grow-1">
                                                                        <div><strong x-text="g.title"></strong> <small
                                                                                class="text-muted"
                                                                                x-text="g.url"></small></div>
                                                                    </div>
                                                                    <div class="btn-group btn-group-sm">
                                                                        <button type="button"
                                                                                class="btn btn-outline-secondary"
                                                                                @click="g._open = true">{{ __('Edit') }}</button>
                                                                        <button type="button"
                                                                                class="btn btn-outline-secondary"
                                                                                @click="addChild(g.id)">{{ __('Add child') }}</button>
                                                                        <button type="button"
                                                                                class="btn btn-outline-danger"
                                                                                @click="removeItem(g.id)">{{ __('Delete') }}</button>
                                                                    </div>
                                                                </div>
                                                                <div class="border rounded p-2 mt-2 bg-light"
                                                                     x-show="g._open" x-transition>
                                                                    <div class="row g-2 align-items-center">
                                                                        <div class="col-md-5">
                                                                            <label
                                                                                class="form-label">{{ __('Label') }}</label>
                                                                            <input type="text"
                                                                                   class="form-control form-control-sm"
                                                                                   x-model.trim="g.title"
                                                                                   @input="save()">
                                                                        </div>
                                                                        <div class="col-md-5">
                                                                            <label
                                                                                class="form-label">{{ __('URL') }}</label>
                                                                            <input type="url"
                                                                                   class="form-control form-control-sm"
                                                                                   x-model.trim="g.url" @input="save()">
                                                                        </div>
                                                                        <div class="col-md-2 mt-4">
                                                                            <div class="form-check">
                                                                                <input class="form-check-input"
                                                                                       type="checkbox" :id="'bg'+g.id"
                                                                                       x-model="g.blank"
                                                                                       @change="save()">
                                                                                <label class="form-check-label"
                                                                                       :for="'bg'+g.id">{{ __('Open in new tab') }}</label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- deeper levels will continue to work via DOM serialization even if not pre-rendered here -->
                                                                <ol class="ms-4 mt-2" data-sortable></ol>
                                                            </li>
                                                        </template>
                                                    </ol>
                                                </li>
                                            </template>
                                        </ol>
                                    </li>
                                </template>
                            </ol>

                            <!-- Hidden field for form submit to Laravel -->
                            <input type="text" hidden name="{{ $name }}" x-model="outputJson">

                            <!-- Preview -->
                            <label class="form-label mt-3 d-none">JSON output</label>
                            <textarea class="form-control d-none" rows="8" x-text="outputJson" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@once
    <style>
        .drag-handle {
            cursor: grab;
            user-select: none;
            font-size: 1.25rem;
            line-height: 1;
        }

        .sortable-ghost {
            opacity: .6;
        }

        .sortable-chosen {
            background: var(--bs-light);
        }

        .placeholder {
            height: 44px;
            border: 2px dashed var(--bs-secondary);
            border-radius: .5rem;
            margin: .25rem 0;
        }

        ol[data-sortable] {
            list-style: none;
            padding-left: 0;
        }

        ol[data-sortable] > li {
            margin-bottom: .25rem;
        }

        .menu-item-card {
            border: 1px solid var(--bs-border-color, #dee2e6);
            border-radius: .5rem;
            padding: .5rem .75rem;
            background: #fff;
        }
    </style>
    <!-- SortableJS -->
@endonce
@pushonce('scripts')
    <script src="/assets/cdn/sortablejs@1.15.2/Sortable.min.js"></script>

    <script>
        // menu builder
        function menuBuilder(opts = {}) {
            return {
                // configuration
                maxDepth: opts.maxDepth ?? null,

                // state
                items: [],
                outputJson: '[]',
                newItem: {
                    title: '',
                    url: '',
                    blank: false
                },
                nextId: 1,
                registry: new Map(),

                init() {
                    // load initial value if provided
                    console.log('start init')
                    if (opts.initial) {
                        try {
                            this.loadFromJson(opts.initial);
                        } catch (e) {
                            /* ignore */
                        }
                    }
                    this.rebuildRegistry();
                    this.$nextTick(() => {
                        this.initSortables();
                        this.save();
                    });
                },

                addItem(parentId = null) {
                    const item = {
                        id: this.nextId++,
                        title: this.newItem.title || 'Untitled',
                        url: this.newItem.url || '',
                        blank: !!this.newItem.blank,
                        children: [],
                        _open: true
                    };
                    if (parentId === null) {
                        this.items.push(item);
                    } else {
                        const t = this.findById(parentId);
                        if (t && t.item) t.item.children.push(item);
                    }
                    this.newItem = {
                        title: '',
                        url: '',
                        blank: false
                    };
                    this.rebuildRegistry();
                    this.$nextTick(() => {
                        this.initSortables();
                        this.save();
                    });
                },
                addChild(parentId) {
                    this.addItem(parentId);
                },

                removeItem(id) {
                    const removeRec = (arr) => {
                        const idx = arr.findIndex(x => x.id === id);
                        if (idx !== -1) {
                            arr.splice(idx, 1);
                            return true;
                        }
                        for (const it of arr)
                            if (removeRec(it.children)) return true;
                        return false;
                    };
                    removeRec(this.items);
                    this.rebuildRegistry();
                    this.$nextTick(() => {
                        this.save();
                    });
                },

                expandAll() {
                    this.walk(it => it._open = true);
                },
                collapseAll() {
                    this.walk(it => it._open = false);
                },
                clearAll() {
                    this.items = [];
                    this.rebuildRegistry();
                    this.save();
                },

                save() {
                    this.outputJson = JSON.stringify(this.serialize(), null, 2);
                },

                // helpers
                walk(fn, arr = null) {
                    (arr || this.items).forEach(it => {
                        fn(it);
                        this.walk(fn, it.children);
                    });
                },
                findById(id, arr = this.items, parent = null) {
                    for (let i = 0; i < arr.length; i++) {
                        const it = arr[i];
                        if (it.id === id) return {
                            item: it,
                            parent,
                            index: i
                        };
                        const deeper = this.findById(id, it.children, it);
                        if (deeper) return deeper;
                    }
                    return null;
                },

                rebuildRegistry() {
                    this.registry.clear();
                    this.walk(it => {
                        this.registry.set(it.id, {
                            id: it.id,
                            title: it.title,
                            url: it.url,
                            blank: !!it.blank,
                            _open: !!it._open
                        });
                    });
                },

                // SortableJS integration
                initSortables() {
                    this.$root.querySelectorAll('ol[data-sortable]').forEach((ol) => {
                        if (ol._sortableInited) return;
                        ol._sortableInited = true;
                        new Sortable(ol, {
                            group: {
                                name: 'nested',
                                pull: true,
                                put: true
                            },
                            animation: 150,
                            handle: '.drag-handle',
                            ghostClass: 'sortable-ghost',
                            chosenClass: 'sortable-chosen',
                            dragoverBubble: true,
                            swapThreshold: 0.65,
                            onMove: (evt) => {
                                if (this.maxDepth == null) return true;
                                const el = evt.dragged; // LI being dragged
                                const to = evt.to; // target OL
                                const depth = this.computeDepth(to);
                                // depth counts from 1 at root items
                                return depth <= this.maxDepth;
                            },
                            onEnd: () => {
                                this.applyDomToData();
                            },
                            onAdd: () => {
                                this.applyDomToData();
                            },
                            onUpdate: () => {
                                this.applyDomToData();
                            },
                        });
                    });
                },

                computeDepth(ol) {
                    let d = 1; // root depth
                    let cur = ol;
                    while (cur && cur.closest && (cur = cur.closest('li[data-type="item"]'))) {
                        d++;
                        cur = cur.parentElement; // next OL
                        if (!cur) break;
                        cur = cur.closest('ol[data-sortable]');
                    }
                    return d;
                },

                applyDomToData() {
                    const oldRegistry = this.registry;
                    const buildFromList = (ol) => {
                        const arr = [];
                        ol.querySelectorAll(':scope > li[data-type="item"]').forEach(li => {
                            const id = parseInt(li.getAttribute('data-id'));
                            const snapshot = oldRegistry.get(id) || {
                                id,
                                title: 'Untitled',
                                url: '',
                                blank: false,
                                _open: false
                            };
                            const childOl = li.querySelector(':scope > ol[data-sortable]');
                            const children = childOl ? buildFromList(childOl) : [];
                            arr.push({
                                id,
                                title: snapshot.title,
                                url: snapshot.url,
                                blank: !!snapshot.blank,
                                children,
                                _open: !!snapshot._open
                            });
                        });
                        return arr;
                    };
                    const root = this.$refs.rootList;
                    this.items = buildFromList(root);
                    this.rebuildRegistry();
                    this.$nextTick(() => {
                        this.initSortables();
                        this.save();
                    });
                },

                serialize() {
                    const clone = (arr) => arr.map(it => ({
                        id: it.id,
                        title: it.title,
                        url: it.url,
                        blank: !!it.blank,
                        children: clone(it.children)
                    }));
                    return clone(this.items);
                },

                loadFromJson(json) {
                    const parsed = typeof json === 'string' ? JSON.parse(json) : json;
                    const attach = (arr) => arr.map(it => ({
                        id: it.id ?? this.nextId++,
                        title: it.title || 'Untitled',
                        url: it.url || '',
                        blank: !!it.blank,
                        children: attach(it.children || []),
                        _open: false
                    }));
                    this.items = attach(parsed);
                    const collect = (i) => [i.id, ...i.children.flatMap(collect)];
                    const maxId = Math.max(0, ...this.items.flatMap(collect));
                    this.nextId = maxId + 1;
                    this.rebuildRegistry();
                    this.$nextTick(() => {
                        this.initSortables();
                        this.save();
                    });
                }
            };
        }
    </script>

@endpushonce