@extends('admin.layouts.master')

@section('title', 'Menu Builder')

@section('css')
    <style>
        /* ═══════════════════════════ MENU BUILDER ═══════════════════════════ */
        .nl-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all .16s;
            white-space: nowrap;
            border-radius: 0
        }

        .nl-btn-primary {
            background: var(--acc);
            color: #fff
        }

        .nl-btn-primary:hover {
            background: var(--acc-dark);
            color: #fff
        }

        .nl-btn-secondary {
            background: var(--surface);
            color: var(--ink);
            border: 1.5px solid var(--line)
        }

        .nl-btn-secondary:hover {
            background: var(--sb-hover-bg);
            color: var(--acc);
            border-color: var(--acc)
        }

        .nl-btn-sm {
            padding: 5px 12px;
            font-size: 12px
        }

        .mb-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--line)
        }

        .mb-header h1 {
            font-size: 20px;
            font-weight: 800;
            color: var(--ink);
            margin: 0 0 3px;
            display: flex;
            align-items: center;
            gap: 9px
        }

        .mb-header h1 i {
            color: var(--acc);
            font-size: 17px
        }

        .mb-header p {
            font-size: 13px;
            color: var(--muted);
            margin: 0
        }

        .mb-wrap {
            display: grid;
            grid-template-columns: 260px 1fr 220px;
            gap: 0;
            border: 1.5px solid var(--line);
            background: var(--line)
        }

        @media(max-width:1100px) {
            .mb-wrap {
                grid-template-columns: 240px 1fr 200px
            }
        }

        @media(max-width:880px) {
            .mb-wrap {
                grid-template-columns: 1fr;
                gap: 1px
            }
        }

        .mb-col {
            background: var(--panel);
            display: flex;
            flex-direction: column
        }

        .mb-col-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 14px;
            border-bottom: 1.5px solid var(--line);
            background: var(--surface);
            font-size: 11.5px;
            font-weight: 800;
            color: var(--ink);
            text-transform: uppercase;
            letter-spacing: .7px;
            flex-shrink: 0
        }

        .mb-col-hd i {
            color: var(--acc);
            margin-right: 5px;
            font-size: 11px
        }

        .mb-col-hd-count {
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0
        }

        .mb-tabs {
            display: flex;
            border-bottom: 1.5px solid var(--line);
            background: var(--surface)
        }

        .mb-tab {
            flex: 1;
            padding: 9px 6px;
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            border: none;
            background: transparent;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1.5px;
            transition: all .16s;
            text-align: center;
            white-space: nowrap
        }

        .mb-tab:hover {
            color: var(--acc)
        }

        .mb-tab.active {
            color: var(--acc);
            border-bottom-color: var(--acc);
            background: var(--panel)
        }

        .mb-tab-body {
            padding: 10px;
            flex: 1;
            overflow: hidden
        }

        .mb-tab-pane {
            display: none
        }

        .mb-tab-pane.active {
            display: block
        }

        .mb-search-box {
            position: relative;
            margin-bottom: 8px
        }

        .mb-search-box i {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
            font-size: 11px;
            pointer-events: none
        }

        .mb-search {
            width: 100%;
            height: 30px;
            padding: 0 8px 0 26px;
            border: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            font-size: 12px;
            outline: none;
            box-sizing: border-box
        }

        .mb-search:focus {
            border-color: var(--acc)
        }

        .mb-search::placeholder {
            color: var(--muted);
            opacity: .6
        }

        .mb-src-list {
            max-height: 400px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--line) transparent
        }

        .mb-src-list::-webkit-scrollbar {
            width: 3px
        }

        .mb-src-list::-webkit-scrollbar-thumb {
            background: var(--line)
        }

        .mb-cat-group {
            border-bottom: 1px solid var(--line)
        }

        .mb-cat-group:last-child {
            border-bottom: none
        }

        .mb-src-item {
            display: flex;
            align-items: center;
            padding: 0;
            background: var(--panel);
            cursor: grab;
            user-select: none;
            transition: background .12s;
            border-bottom: 1px solid var(--line)
        }

        .mb-src-item:last-child {
            border-bottom: none
        }

        .mb-src-item:hover {
            background: var(--acc-soft)
        }

        .mb-src-item:active {
            cursor: grabbing
        }

        .mb-src-item.sub-item {
            padding-left: 12px;
            background: var(--surface)
        }

        .mb-src-item.sub-item:hover {
            background: var(--acc-soft)
        }

        .mb-src-drag-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 36px;
            color: var(--muted);
            font-size: 10px;
            flex-shrink: 0
        }

        .mb-src-item:hover .mb-src-drag-icon {
            color: var(--acc)
        }

        .mb-src-item-text {
            flex: 1;
            padding: 0 8px 0 0;
            min-width: 0
        }

        .mb-src-item-name {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block
        }

        .mb-src-item-meta {
            font-size: 10.5px;
            color: var(--muted);
            display: block
        }

        .mb-cat-hd {
            display: flex;
            align-items: center;
            padding: 0;
            background: var(--surface);
            cursor: pointer;
            border-bottom: 1px solid var(--line);
            transition: background .12s
        }

        .mb-cat-hd:hover {
            background: var(--sb-hover-bg)
        }

        .mb-cat-hd-drag {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 36px;
            color: var(--muted);
            font-size: 10px;
            cursor: grab
        }

        .mb-cat-hd-drag:active {
            cursor: grabbing
        }

        .mb-cat-hd-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 36px;
            color: var(--muted);
            font-size: 9px;
            flex-shrink: 0
        }

        .mb-cat-hd-arrow i {
            transition: transform .18s
        }

        .mb-cat-hd-arrow.open i {
            transform: rotate(90deg)
        }

        .mb-cat-hd-name {
            flex: 1;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--ink);
            padding: 0 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .mb-cat-hd-bn {
            font-size: 10.5px;
            color: var(--muted);
            padding-right: 8px
        }

        .mb-cat-children {
            display: none
        }

        .mb-cat-children.open {
            display: block
        }

        .mb-custom-form {
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .mb-custom-form input {
            height: 32px;
            padding: 0 10px;
            border: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            font-size: 13px;
            outline: none
        }

        .mb-custom-form input:focus {
            border-color: var(--acc)
        }

        .mb-custom-form input::placeholder {
            color: var(--muted);
            opacity: .6;
            font-style: italic
        }

        .mb-custom-form .nl-btn {
            justify-content: center
        }

        .mb-mid-col {
            border-left: 1px solid var(--line);
            border-right: 1px solid var(--line)
        }

        .mb-name-bar {
            display: flex;
            align-items: center;
            border-bottom: 1.5px solid var(--line);
            background: var(--surface)
        }

        .mb-name-bar input {
            flex: 1;
            height: 38px;
            padding: 0 12px;
            border: none;
            border-right: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
            outline: none
        }

        .mb-name-bar input:focus {
            background: var(--panel)
        }

        .mb-no-menu-msg {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            color: var(--muted);
            text-align: center
        }

        .mb-no-menu-msg i {
            font-size: 32px;
            opacity: .15;
            margin-bottom: 14px
        }

        .mb-no-menu-msg h3 {
            font-size: 14px;
            font-weight: 800;
            color: var(--ink);
            margin: 0 0 6px
        }

        .mb-no-menu-msg p {
            font-size: 12.5px;
            margin: 0;
            line-height: 1.6
        }

        /* আগের */
        #mbTree {
            min-height: 40px;
        }

        /* নতুন */
        #mbTree {
            min-height: 160px;
            display: block;
            position: relative;
        }

        .mb-drop-zone-empty {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border: 2px dashed var(--line);
            padding: 40px 20px;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
            font-weight: 600;
            pointer-events: none;
            user-select: none;
        }

        .mb-drop-zone-empty i {
            display: block;
            font-size: 26px;
            margin-bottom: 10px;
            opacity: .25
        }

        .mb-tree-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            padding: 11px 14px;
            border-top: 1.5px solid var(--line);
            background: var(--surface);
            flex-shrink: 0
        }

        .mb-tree-hint {
            font-size: 11.5px;
            color: var(--muted);
            font-weight: 500
        }

        .mb-tree-hint i {
            color: var(--acc);
            margin-right: 3px
        }

        /* ══ TREE ITEM ══ */
        .mb-tree-item {
            margin-bottom: 4px
        }

        .mb-tree-item-row {
            display: flex;
            align-items: center;
            background: var(--panel);
            border: 1.5px solid var(--line);
            min-height: 46px;
            transition: border-color .15s
        }

        .mb-tree-item-row:hover {
            border-color: var(--acc-mid)
        }

        .mb-tree-item-row.editing {
            border-color: var(--acc)
        }

        .mb-tree-drag {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            min-height: 46px;
            cursor: grab;
            color: var(--muted);
            font-size: 11px;
            background: var(--surface);
            border-right: 1.5px solid var(--line);
            flex-shrink: 0
        }

        .mb-tree-drag:hover {
            background: var(--acc-soft);
            color: var(--acc)
        }

        .mb-tree-drag:active {
            cursor: grabbing
        }

        /* ✅ COLLAPSE BTN — depth=0 সবসময় active, depth=1 dim */
        .mb-coll {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            margin-left: 8px;
            flex-shrink: 0;
            border: 1.5px solid var(--line);
            border-radius: 3px;
            background: var(--surface);
            color: var(--muted);
            cursor: pointer;
            pointer-events: auto;
            transition: color .14s, border-color .14s, background .14s;
        }

        .mb-coll svg {
            transition: transform .18s;
            display: block
        }

        .mb-coll:hover {
            background: var(--acc-soft);
            color: var(--acc);
            border-color: var(--acc)
        }

        .mb-tree-item.sub-open>.mb-tree-item-row .mb-coll svg {
            transform: rotate(90deg)
        }

        /* depth=1 — collapse dim (sub নেই) */
        .mb-tree-item[data-depth="1"]>.mb-tree-item-row .mb-coll {
            color: var(--line);
            cursor: default;
            pointer-events: none;
        }

        .mb-badge {
            padding: 2px 6px;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
            flex-shrink: 0;
            margin-left: 8px;
            border-radius: 2px
        }

        .b-cat {
            background: rgba(245, 158, 11, .12);
            color: #f59e0b
        }

        .b-page {
            background: rgba(16, 185, 129, .12);
            color: #10b981
        }

        .b-route {
            background: color-mix(in srgb, var(--acc) 12%, transparent);
            color: var(--acc)
        }

        .b-cust {
            background: rgba(239, 68, 68, .1);
            color: #ef4444
        }

        .mb-item-info {
            flex: 1;
            padding: 0 10px;
            min-width: 0
        }

        .mb-item-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .mb-item-url {
            font-size: 10.5px;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .mb-edit-fields {
            display: none;
            flex-direction: column;
            gap: 4px;
            padding: 6px 0
        }

        .mb-edit-fields input {
            height: 26px;
            padding: 0 8px;
            border: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            font-size: 12px;
            outline: none
        }

        .mb-edit-fields input:focus {
            border-color: var(--acc)
        }

        .mb-acts {
            display: flex;
            align-items: center;
            gap: 3px;
            padding-right: 8px;
            flex-shrink: 0
        }

        .mb-act {
            width: 26px;
            height: 26px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 10px;
            transition: all .14s;
            border-radius: 2px
        }

        .mb-act:hover {
            background: var(--acc-soft);
            color: var(--acc);
            border-color: var(--acc-mid)
        }

        .mb-act.ok:hover {
            background: rgba(16, 185, 129, .1);
            color: #10b981;
            border-color: #10b981
        }

        .mb-act.rm:hover {
            background: rgba(239, 68, 68, .08);
            color: #ef4444;
            border-color: #ef4444
        }

        /* ══ SUB-LIST ══ */
        .mb-sub-wrap {
            display: none
        }

        .mb-tree-item.sub-open>.mb-sub-wrap {
            display: block
        }

        .mb-sub-list {
            margin-left: 26px;
            padding-left: 12px;
            border-left: 2px dashed var(--line);
            margin-top: 3px;
            padding-bottom: 2px;
            min-height: 14px
        }

        .sortable-ghost>.mb-tree-item-row {
            opacity: .3;
            background: var(--acc-soft) !important;
            border-color: var(--acc) !important
        }

        .sortable-chosen>.mb-tree-item-row {
            box-shadow: 0 4px 16px rgba(0, 0, 0, .1)
        }

        /* Right panel */
        .mb-menu-list-wrap {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--line) transparent;
            max-height: 500px
        }

        .mb-menu-entry {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 13px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            border-bottom: 1px solid var(--line);
            transition: background .12s
        }

        .mb-menu-entry:last-child {
            border-bottom: none
        }

        .mb-menu-entry:hover {
            background: var(--sb-hover-bg);
            color: var(--acc)
        }

        .mb-menu-entry.active {
            background: var(--acc-soft);
            color: var(--acc);
            border-left: 3px solid var(--acc);
            padding-left: 10px
        }

        .mb-menu-entry-icon {
            font-size: 11px;
            opacity: .5;
            flex-shrink: 0
        }

        .mb-menu-entry-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .mb-menu-entry-del {
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            opacity: 0;
            transition: all .12s;
            flex-shrink: 0
        }

        .mb-menu-entry:hover .mb-menu-entry-del {
            opacity: 1
        }

        .mb-menu-entry-del:hover {
            color: #ef4444
        }

        .mb-menu-empty-msg {
            padding: 24px 14px;
            text-align: center;
            color: var(--muted);
            font-size: 12.5px
        }

        .mb-menu-empty-msg i {
            display: block;
            font-size: 20px;
            opacity: .2;
            margin-bottom: 8px
        }

        .mb-create-area {
            border-top: 1.5px solid var(--line);
            padding: 10px;
            background: var(--surface);
            flex-shrink: 0
        }

        .mb-create-area input {
            width: 100%;
            height: 32px;
            padding: 0 10px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--ink);
            font-size: 12.5px;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 6px
        }

        .mb-create-area input:focus {
            border-color: var(--acc)
        }

        .mb-create-area input::placeholder {
            color: var(--muted);
            opacity: .6
        }

        .mb-create-area .nl-btn {
            width: 100%;
            justify-content: center
        }

        .mb-loader {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 9999;
            align-items: center;
            justify-content: center
        }

        .mb-loader.show {
            display: flex
        }

        .mb-loader-ring {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, .2);
            border-top-color: #fff;
            border-radius: 50%;
            animation: mbspin .7s linear infinite
        }

        @keyframes mbspin {
            to {
                transform: rotate(360deg)
            }
        }

        .mb-item-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
        }

        .mb-badge {
            font-size: 10px;
            font-weight: 600;
            text-transform: lowercase;
            background: transparent !important;
            padding: 0;
            flex-shrink: 0;
        }

        .mb-badge::before {
            content: '[';
        }

        .mb-badge::after {
            content: ']';
        }

        .b-cat {
            color: #f59e0b
        }

        .b-page {
            color: #10b981
        }

        .b-route {
            color: var(--acc)
        }

        .b-cust {
            color: #ef4444
        }
    </style>
@endsection


@section('content')
    <div class="mb-loader" id="mbLoader">
        <div class="mb-loader-ring"></div>
    </div>

    <div class="mb-header">
        <div>
            <h1><i class="fas fa-bars"></i> Menu Builder</h1>
            <p>Drag items from the left &nbsp;·&nbsp; Drop onto item = sub-menu &nbsp;·&nbsp; Max 1 level deep</p>
        </div>
    </div>

    <div class="mb-wrap">

        {{-- ══ COL 1: Source ══ --}}
        <div class="mb-col">
            <div class="mb-col-hd"><span><i class="fas fa-plus-circle"></i>Add Items</span></div>
            <div class="mb-tabs">
                <button class="mb-tab active" data-tab="categories">Categories</button>
                <button class="mb-tab" data-tab="pages">Pages</button>
                <button class="mb-tab" data-tab="routes">Routes</button>
                <button class="mb-tab" data-tab="custom">Custom</button>
            </div>
            <div class="mb-tab-body">

                <div class="mb-tab-pane active" id="tab-categories">
                    <div class="mb-search-box"><i class="fas fa-search"></i>
                        <input type="text" class="mb-search" id="searchCat" placeholder="Search...">
                    </div>
                    <div class="mb-src-list" id="listCat">
                        @php $rootCats = $categories->whereNull('parent_category_id'); @endphp
                        @foreach ($rootCats as $cat)
                            @php $subs = $categories->where('parent_category_id', $cat->id); @endphp
                            <div class="mb-cat-group">
                                <div class="mb-cat-hd" data-type="category" data-ref-id="{{ $cat->id }}"
                                    data-title="{{ $cat->name }}"
                                    data-url="{{ url('/category/' . ($cat->slug ?? $cat->id)) }}">
                                    <span class="mb-cat-hd-drag"><i class="fas fa-grip-vertical"></i></span>
                                    @if ($subs->count())
                                        <span class="mb-cat-hd-arrow"><i class="fas fa-chevron-right"></i></span>
                                    @endif
                                    <span class="mb-cat-hd-name">{{ $cat->name }}</span>
                                    @if ($cat->bn_name)
                                        <span class="mb-cat-hd-bn">{{ $cat->bn_name }}</span>
                                    @endif
                                </div>
                                @if ($subs->count())
                                    <div class="mb-cat-children">
                                        @foreach ($subs as $sub)
                                            <div class="mb-src-item sub-item" data-type="category"
                                                data-ref-id="{{ $sub->id }}" data-title="{{ $sub->name }}"
                                                data-url="{{ url('/category/' . ($sub->slug ?? $sub->id)) }}">
                                                <span class="mb-src-drag-icon"><i class="fas fa-grip-vertical"></i></span>
                                                <div class="mb-src-item-text">
                                                    <span class="mb-src-item-name">{{ $sub->name }}</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-tab-pane" id="tab-pages">
                    <div class="mb-search-box"><i class="fas fa-search"></i>
                        <input type="text" class="mb-search" id="searchPages" placeholder="Search pages...">
                    </div>
                    <div class="mb-src-list" id="listPages">
                        @foreach ($pages as $page)
                            <div class="mb-src-item" data-type="page" data-ref-id="{{ $page->id }}"
                                data-title="{{ $page->title }}"
                                data-url="{{ url('/page/' . ($page->slug ?? $page->id)) }}">
                                <span class="mb-src-drag-icon"><i class="fas fa-grip-vertical"></i></span>
                                <div class="mb-src-item-text">
                                    <span class="mb-src-item-name">{{ $page->title }}</span>
                                    <span class="mb-src-item-meta">{{ $page->status ?? 'published' }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-tab-pane" id="tab-routes">
                    <div class="mb-search-box"><i class="fas fa-search"></i>
                        <input type="text" class="mb-search" id="searchRoutes" placeholder="Search routes...">
                    </div>
                    <div class="mb-src-list" id="listRoutes">
                        @foreach ($permissions as $perm)
                            @php
                                $pUrl = '#';
                                if (!empty($perm->route) && \Illuminate\Support\Facades\Route::has($perm->route)) {
                                    try {
                                        $pUrl = route($perm->route);
                                    } catch (\Exception $e) {
                                    }
                                }
                            @endphp
                            <div class="mb-src-item" data-type="route" data-ref-id="{{ $perm->id }}"
                                data-title="{{ $perm->display_name }}" data-url="{{ $pUrl }}">
                                <span class="mb-src-drag-icon"><i class="fas fa-grip-vertical"></i></span>
                                <div class="mb-src-item-text">
                                    <span class="mb-src-item-name">{{ $perm->display_name }}</span>
                                    <span class="mb-src-item-meta">{{ $perm->route }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-tab-pane" id="tab-custom">
                    <div class="mb-custom-form">
                        <input type="text" id="customTitle" placeholder="Label  (e.g. Contact)">
                        <input type="text" id="customUrl" placeholder="URL  (e.g. https://...)">
                        <button class="nl-btn nl-btn-primary" id="addCustom">
                            <i class="fas fa-plus"></i> Add to Menu
                        </button>
                    </div>
                </div>

            </div>
        </div>

        {{-- ══ COL 2: Tree ══ --}}
        <div class="mb-col mb-mid-col">
            <div class="mb-col-hd"><span><i class="fas fa-sitemap"></i>Menu Structure</span></div>

            <div class="mb-name-bar" id="mbNameBar" style="display:none;">
                <input type="text" id="menuNameInput" placeholder="Menu name...">
                <button class="nl-btn nl-btn-secondary nl-btn-sm" id="btnRename" style="border-left:none;height:38px;">
                    <i class="fas fa-save"></i> Rename
                </button>
            </div>

            <div class="mb-no-menu-msg" id="mbNoMenuMsg">
                <i class="fas fa-hand-point-right"></i>
                <h3>No menu selected</h3>
                <p>Select a menu from the right panel,<br>or create a new one.</p>
            </div>

            <div id="mbTreeArea" style="display:none;flex:1;flex-direction:column;">
                {{-- নতুন কোড --}}
                <div class="mb-drop-zone" id="mbDropZone">
                    <div id="mbTree">
                        <div class="mb-drop-zone-empty" id="mbEmptyMsg">
                            <i class="fas fa-arrows-alt"></i>
                            Drag items here from the left panel
                        </div>
                    </div>
                </div>
                <div class="mb-tree-footer">
                    <span class="mb-tree-hint">
                        <i class="fas fa-info-circle"></i>
                        ▶ collapse/expand &nbsp;·&nbsp; Max 1 level sub-menu
                    </span>
                    <button class="nl-btn nl-btn-primary" id="btnSave">
                        <i class="fas fa-save"></i> Save Menu
                    </button>
                </div>
            </div>
        </div>

        {{-- ══ COL 3: Menu List ══ --}}
        <div class="mb-col">
            <div class="mb-col-hd">
                <span><i class="fas fa-list"></i>Menus</span>
                <span class="mb-col-hd-count" id="menuCountTxt">{{ $menus->count() }} total</span>
            </div>
            <div class="mb-menu-list-wrap" id="mbMenuList">
                @forelse($menus as $menu)
                    <div class="mb-menu-entry" data-id="{{ $menu->id }}" data-name="{{ $menu->name }}">
                        <i class="fas fa-bars mb-menu-entry-icon"></i>
                        <span class="mb-menu-entry-name">{{ $menu->name }}</span>
                        <button class="mb-menu-entry-del" data-id="{{ $menu->id }}"><i
                                class="fas fa-times"></i></button>
                    </div>
                @empty
                    <div class="mb-menu-empty-msg" id="mbMenuEmptyMsg">
                        <i class="fas fa-bars"></i>No menus yet
                    </div>
                @endforelse
            </div>
            <div class="mb-create-area">
                <input type="text" id="newMenuName" placeholder="New menu name...">
                <button class="nl-btn nl-btn-primary nl-btn-sm" id="btnCreateMenu">
                    <i class="fas fa-plus"></i> Create Menu
                </button>
            </div>
        </div>

    </div>

    <template id="mbItemTpl">
        <div class="mb-tree-item">
            <div class="mb-tree-item-row">
                <div class="mb-tree-drag"><i class="fas fa-grip-vertical"></i></div>
                <div class="mb-coll" title="Collapse / Expand">
                    <svg width="8" height="9" viewBox="0 0 8 9" fill="currentColor">
                        <path d="M2 1.5l4 3-4 3v-6z" />
                    </svg>
                </div>
                <div class="mb-item-info">
                    <div class="mb-display">
                        <div class="mb-item-label">
                            <span class="mb-label-text"></span>
                            <span class="mb-badge"></span>
                        </div>
                        <div class="mb-item-url"></div>
                    </div>
                    <div class="mb-edit-fields">
                        <input type="text" class="ei-title" placeholder="Label">
                        <input type="text" class="ei-url" placeholder="URL">
                    </div>
                </div>
                <div class="mb-acts">
                    <div class="mb-act edit-btn" title="Edit"><i class="fas fa-pen"></i></div>
                    <div class="mb-act ok save-btn" title="Save" style="display:none"><i class="fas fa-check"></i>
                    </div>
                    <div class="mb-act rm del-btn" title="Remove"><i class="fas fa-times"></i></div>
                </div>
            </div>
            <div class="mb-sub-wrap">
                <div class="mb-sub-list"></div>
            </div>
        </div>
    </template>

@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
        (function() {
            'use strict';

            var CSRF = '{{ csrf_token() }}';
            var currentMenuId = null;

            var R = {
                show: function(id) {
                    return '{{ route('menus.show', ':id') }}'.replace(':id', id);
                },
                store: '{{ route('menus.store') }}',
                update: function(id) {
                    return '{{ route('menus.update', ':id') }}'.replace(':id', id);
                },
                destroy: function(id) {
                    return '{{ route('menus.destroy', ':id') }}'.replace(':id', id);
                },
                updateItems: function(id) {
                    return '{{ route('menus.updateItems', ':id') }}'.replace(':id', id);
                },
            };

            var BADGE = {
                category: {
                    lbl: 'Category',
                    cls: 'b-cat'
                },
                page: {
                    lbl: 'Page',
                    cls: 'b-page'
                },
                route: {
                    lbl: 'Route',
                    cls: 'b-route'
                },
                custom: {
                    lbl: 'Custom',
                    cls: 'b-cust'
                },
            };

            function loader(on) {
                document.getElementById('mbLoader').classList.toggle('show', !!on);
            }

            /* ✅ FIX: tree item আছে কিনা দেখে empty msg দেখাও/লুকাও */
            function updateEmpty() {
                var hasItems = !!document.getElementById('mbTree').querySelector('.mb-tree-item');
                document.getElementById('mbEmptyMsg').style.display = hasItems ? 'none' : '';
            }

            /* ═══════════════════════════════════════════════════════════
               buildItem(data, depth)
               depth=0 → root item, sub-list sortable চালু
               depth=1 → child item, sub-wrap নেই (1 level only)
            ═══════════════════════════════════════════════════════════ */
            function buildItem(data, depth) {
                depth = depth === undefined ? 0 : depth;
                var type = data.type || 'custom';
                var bd = BADGE[type] || BADGE.custom;
                var tpl = document.getElementById('mbItemTpl');
                var el = tpl.content.firstElementChild.cloneNode(true);

                el.dataset.id = data.id || '';
                el.dataset.type = type;
                el.dataset.refId = data.ref_id || '';
                el.dataset.title = data.title || '';
                el.dataset.url = data.url || '';
                el.dataset.depth = depth;

                el.querySelector('.mb-badge').textContent = bd.lbl;
                el.querySelector('.mb-badge').classList.add(bd.cls);
                el.querySelector('.mb-label-text').textContent = data.title || 'Untitled';
                el.querySelector('.mb-item-url').textContent = data.url || '';
                el.querySelector('.ei-title').value = data.title || '';
                el.querySelector('.ei-url').value = data.url || '';

                if (depth === 0) {
                    /* root item: sub-list চালু */
                    var subList = el.querySelector('.mb-sub-list');
                    if (data.children && data.children.length) {
                        data.children.forEach(function(c) {
                            subList.appendChild(buildItem(c, 1));
                        });
                        el.classList.add('sub-open');
                    }
                    initSubSortable(subList);
                } else {
                    /* child item: sub-wrap সরাও — নো নেস্টিং */
                    var sw = el.querySelector('.mb-sub-wrap');
                    if (sw) sw.remove();
                }

                return el;
            }

            /* Collapse toggle — depth=0 only */
            document.addEventListener('click', function(e) {
                var btn = e.target.closest('.mb-coll');
                if (!btn) return;
                var item = btn.closest('.mb-tree-item');
                if (!item || item.dataset.depth === '1') return;
                e.stopPropagation();
                item.classList.toggle('sub-open');
            });

            /* Edit / Save / Delete */
            document.addEventListener('click', function(e) {
                if (e.target.closest('.edit-btn')) {
                    var row = e.target.closest('.mb-tree-item-row');
                    row.classList.add('editing');
                    row.querySelector('.mb-display').style.display = 'none';
                    row.querySelector('.mb-edit-fields').style.display = 'flex';
                    row.querySelector('.edit-btn').style.display = 'none';
                    row.querySelector('.save-btn').style.display = 'flex';
                    return;
                }
                if (e.target.closest('.save-btn')) {
                    var row2 = e.target.closest('.mb-tree-item-row');
                    var item2 = e.target.closest('.mb-tree-item');
                    var t = row2.querySelector('.ei-title').value.trim() || item2.dataset.title;
                    var u = row2.querySelector('.ei-url').value.trim() || item2.dataset.url;
                    item2.dataset.title = t;
                    item2.dataset.url = u;
                    row2.querySelector('.mb-item-label').textContent = t;
                    row2.querySelector('.mb-item-url').textContent = u;
                    row2.classList.remove('editing');
                    row2.querySelector('.mb-display').style.display = '';
                    row2.querySelector('.mb-edit-fields').style.display = 'none';
                    row2.querySelector('.save-btn').style.display = 'none';
                    row2.querySelector('.edit-btn').style.display = '';
                    return;
                }
                if (e.target.closest('.del-btn')) {
                    if (!confirm('Remove this item?')) return;
                    e.target.closest('.mb-tree-item').remove();
                    updateEmpty();
                    return;
                }
            });

            /* ═══════════════════════════════════════════════════════════
               ROOT sortable — group 'menu-root'
               ✅ FIX 2: put: function() দিয়ে depth=1 items reject করে
            ═══════════════════════════════════════════════════════════ */
            function initRootSortable() {
                var el = document.getElementById('mbTree');
                if (!el) return;
                if (el._sortable) {
                    el._sortable.destroy();
                    el._sortable = null;
                }

                el._sortable = Sortable.create(el, {
                    group: {
                        name: 'menu-root',
                        pull: true,
                        put: function(to, from, dragEl) {
                            /* source items সবসময় accept */
                            if (dragEl.classList.contains('mb-src-item') || dragEl.classList.contains(
                                    'mb-cat-hd')) return true;
                            /* depth=1 items root এ আসতে পারবে না */
                            return dragEl.dataset.depth !== '1';
                        }
                    },
                    handle: '.mb-tree-drag',
                    animation: 150,
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onAdd: function(evt) {
                        var moved = evt.item;
                        if (moved.classList.contains('mb-src-item') || moved.classList.contains(
                                'mb-cat-hd')) {
                            moved = convertSourceToItem(moved, 0);
                        } else {
                            moved.dataset.depth = '0';
                            /* sub-wrap না থাকলে যোগ করো */
                            if (!moved.querySelector('.mb-sub-wrap')) {
                                var wrap = document.createElement('div');
                                wrap.className = 'mb-sub-wrap';
                                var list = document.createElement('div');
                                list.className = 'mb-sub-list';
                                wrap.appendChild(list);
                                moved.appendChild(wrap);
                                initSubSortable(list);
                            }
                        }
                        updateEmpty();
                    },
                    onRemove: function() {
                        updateEmpty();
                    },
                });
            }

            /* ═══════════════════════════════════════════════════════════
               SUB sortable — group 'menu-sub'
               drop হলে parent auto-open, moved item depth=1
            ═══════════════════════════════════════════════════════════ */
            function initSubSortable(el) {
                if (!el || el._sortable) return;

                el._sortable = Sortable.create(el, {
                    group: {
                        name: 'menu-sub',
                        pull: true,
                        put: ['menu-sub', 'source', 'menu-root']
                    },
                    handle: '.mb-tree-drag',
                    animation: 150,
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onAdd: function(evt) {
                        var moved = evt.item;

                        if (moved.classList.contains('mb-src-item') || moved.classList.contains(
                                'mb-cat-hd')) {
                            /* source → depth=1 child */
                            moved = convertSourceToItem(moved, 1);
                        } else {
                            /* root item sub তে নামলে */
                            moved.dataset.depth = '1';
                            /* তার sub-wrap সরাও (grandchildren root এ যাবে) */
                            var sw = moved.querySelector('.mb-sub-wrap');
                            if (sw) {
                                var rootTree = document.getElementById('mbTree');
                                sw.querySelectorAll(':scope > .mb-sub-list > .mb-tree-item').forEach(
                                    function(gc) {
                                        gc.dataset.depth = '0';
                                        if (!gc.querySelector('.mb-sub-wrap')) {
                                            var w = document.createElement('div');
                                            w.className = 'mb-sub-wrap';
                                            var l = document.createElement('div');
                                            l.className = 'mb-sub-list';
                                            w.appendChild(l);
                                            gc.appendChild(w);
                                            initSubSortable(l);
                                        }
                                        rootTree.appendChild(gc);
                                    });
                                sw.remove();
                            }
                        }

                        /* parent auto-open */
                        var parentItem = moved.parentElement.closest('.mb-tree-item');
                        if (parentItem) parentItem.classList.add('sub-open');

                        updateEmpty();
                    },
                    onRemove: function() {},
                });
            }

            /* Source lists — clone only */
            function initSourceSortables() {
                document.querySelectorAll('.mb-cat-hd').forEach(function(hd) {
                    var c = hd.parentElement;
                    if (c._sortable) return;
                    c._sortable = Sortable.create(c, {
                        group: {
                            name: 'source',
                            pull: 'clone',
                            put: false
                        },
                        sort: false,
                        animation: 120,
                        draggable: '.mb-cat-hd',
                        ghostClass: 'sortable-ghost',
                    });
                });
                document.querySelectorAll('.mb-cat-children').forEach(function(el) {
                    if (el._sortable) return;
                    el._sortable = Sortable.create(el, {
                        group: {
                            name: 'source',
                            pull: 'clone',
                            put: false
                        },
                        sort: false,
                        animation: 120,
                        draggable: '.mb-src-item',
                        ghostClass: 'sortable-ghost',
                    });
                });
                var pl = document.getElementById('listPages');
                if (pl && !pl._sortable) pl._sortable = Sortable.create(pl, {
                    group: {
                        name: 'source',
                        pull: 'clone',
                        put: false
                    },
                    sort: false,
                    animation: 120,
                    draggable: '.mb-src-item',
                    ghostClass: 'sortable-ghost',
                });
                var rl = document.getElementById('listRoutes');
                if (rl && !rl._sortable) rl._sortable = Sortable.create(rl, {
                    group: {
                        name: 'source',
                        pull: 'clone',
                        put: false
                    },
                    sort: false,
                    animation: 120,
                    draggable: '.mb-src-item',
                    ghostClass: 'sortable-ghost',
                });
            }

            function convertSourceToItem(srcEl, depth) {
                var item = buildItem({
                    id: 'new-' + Date.now(),
                    type: srcEl.dataset.type,
                    ref_id: srcEl.dataset.refId,
                    title: srcEl.dataset.title,
                    url: srcEl.dataset.url,
                    children: [],
                }, depth);
                srcEl.parentNode.replaceChild(item, srcEl);
                return item;
            }

            /* Left panel category collapse */
            document.addEventListener('click', function(e) {
                var hd = e.target.closest('.mb-cat-hd');
                if (!hd || e.target.closest('.mb-cat-hd-drag')) return;
                var arrow = hd.querySelector('.mb-cat-hd-arrow');
                var ch = hd.nextElementSibling;
                if (!arrow || !ch || !ch.classList.contains('mb-cat-children')) return;
                ch.classList.toggle('open');
                arrow.classList.toggle('open');
            });

            /* Tabs */
            $(document).on('click', '.mb-tab', function() {
                $('.mb-tab').removeClass('active');
                $(this).addClass('active');
                $('.mb-tab-pane').removeClass('active');
                $('#tab-' + $(this).data('tab')).addClass('active');
            });

            /* Search */
            $('#searchCat').on('input', function() {
                var q = this.value.toLowerCase();
                $('#listCat .mb-cat-group').each(function() {
                    $(this).toggle(!q || $(this).text().toLowerCase().includes(q));
                });
            });
            $('#searchPages').on('input', function() {
                var q = this.value.toLowerCase();
                $('#listPages .mb-src-item').each(function() {
                    $(this).toggle(!q || $(this).data('title').toString().toLowerCase().includes(q));
                });
            });
            $('#searchRoutes').on('input', function() {
                var q = this.value.toLowerCase();
                $('#listRoutes .mb-src-item').each(function() {
                    $(this).toggle(!q || $(this).data('title').toString().toLowerCase().includes(q));
                });
            });

            /* Show menu UI */
            function showMenuUI(id, name) {
                currentMenuId = id;
                $('.mb-menu-entry').removeClass('active');
                $('.mb-menu-entry[data-id="' + id + '"]').addClass('active');
                $('#mbNoMenuMsg').hide();
                $('#mbNameBar').css('display', 'flex');
                $('#mbTreeArea').css('display', 'flex');
                $('#menuNameInput').val(name);
            }

            $(document).on('click', '.mb-menu-entry', function(e) {
                if ($(e.target).closest('.mb-menu-entry-del').length) return;
                showMenuUI($(this).data('id'), $(this).data('name'));
                renderMenu(currentMenuId);
            });

            $(document).on('click', '.mb-menu-entry-del', function(e) {
                e.stopPropagation();
                var id = $(this).data('id'),
                    name = $(this).closest('.mb-menu-entry').data('name');
                if (!confirm('Delete menu "' + name + '"?')) return;
                loader(true);
                $.ajax({
                    url: R.destroy(id),
                    type: 'DELETE',
                    data: {
                        _token: CSRF
                    },
                    success: function() {
                        loader(false);
                        $('.mb-menu-entry[data-id="' + id + '"]').remove();
                        if (currentMenuId == id) {
                            currentMenuId = null;
                            $('#mbNameBar,#mbTreeArea').hide();
                            $('#mbNoMenuMsg').show();
                        }
                        updateMenuCount();
                        toastr.success('Menu deleted!');
                    },
                    error: function() {
                        loader(false);
                        toastr.error('Delete failed!');
                    }
                });
            });

            $('#btnCreateMenu').on('click', function() {
                var name = $('#newMenuName').val().trim();
                if (!name) {
                    toastr.error('Enter a menu name!');
                    return;
                }
                loader(true);
                $.post(R.store, {
                    _token: CSRF,
                    name: name
                }, function(res) {
                    loader(false);
                    $('#mbMenuEmptyMsg').remove();
                    var $row = $('<div class="mb-menu-entry" data-id="' + res.menu.id +
                        '" data-name="' + res.menu.name + '">' +
                        '<i class="fas fa-bars mb-menu-entry-icon"></i>' +
                        '<span class="mb-menu-entry-name">' + res.menu.name + '</span>' +
                        '<button class="mb-menu-entry-del" data-id="' + res.menu.id +
                        '"><i class="fas fa-times"></i></button>' +
                        '</div>');
                    $('#mbMenuList').append($row).scrollTop($('#mbMenuList')[0].scrollHeight);
                    showMenuUI(res.menu.id, res.menu.name);
                    /* ✅ tree clear — empty msg রাখো */
                    document.getElementById('mbTree').querySelectorAll('.mb-tree-item').forEach(
                        function(i) {
                            i.remove();
                        });
                    updateEmpty();
                    initRootSortable();
                    initSourceSortables();
                    $('#newMenuName').val('');
                    updateMenuCount();
                    toastr.success('Menu "' + res.menu.name + '" created!');
                }).fail(function(xhr) {
                    loader(false);
                    toastr.error((xhr.responseJSON && xhr.responseJSON.message) || 'Create failed!');
                });
            });

            $('#btnRename').on('click', function() {
                var name = $('#menuNameInput').val().trim();
                if (!name || !currentMenuId) return;
                loader(true);
                $.ajax({
                    url: R.update(currentMenuId),
                    type: 'PUT',
                    data: {
                        _token: CSRF,
                        name: name
                    },
                    success: function() {
                        loader(false);
                        $('.mb-menu-entry[data-id="' + currentMenuId + '"]').data('name', name)
                            .find('.mb-menu-entry-name').text(name);
                        toastr.success('Renamed!');
                    },
                    error: function() {
                        loader(false);
                        toastr.error('Rename failed!');
                    }
                });
            });

            function renderMenu(id) {
                loader(true);
                $.get(R.show(id), function(res) {
                    loader(false);
                    currentMenuId = res.menu.id;
                    $('#menuNameInput').val(res.menu.name);
                    document.getElementById('mbTree').querySelectorAll('.mb-tree-item').forEach(function(i) {
                        i.remove();
                    });
                    if (res.items && res.items.length) {
                        res.items.forEach(function(item) {
                            document.getElementById('mbTree').appendChild(buildItem(item, 0));
                        });
                    }
                    updateEmpty();
                    initRootSortable();
                    initSourceSortables();
                }).fail(function() {
                    loader(false);
                    toastr.error('Failed to load menu!');
                });
            }

            $('#addCustom').on('click', function() {
                if (!currentMenuId) {
                    toastr.warning('Select a menu first!');
                    return;
                }
                var t = $('#customTitle').val().trim(),
                    u = $('#customUrl').val().trim();
                if (!t) {
                    toastr.error('Enter a label!');
                    return;
                }
                if (!u) {
                    toastr.error('Enter a URL!');
                    return;
                }
                document.getElementById('mbTree').appendChild(
                    buildItem({
                        id: 'new-' + Date.now(),
                        type: 'custom',
                        title: t,
                        url: u,
                        children: []
                    }, 0)
                );
                updateEmpty();
                $('#customTitle,#customUrl').val('');
                toastr.success('"' + t + '" added!');
            });

            /* Collect items — max 1 level */
            function collectItems(cont, depth) {
                depth = depth || 0;
                var items = [];
                cont.querySelectorAll(':scope > .mb-tree-item').forEach(function(el, i) {
                    var subList = depth === 0 ? el.querySelector(':scope > .mb-sub-wrap > .mb-sub-list') : null;
                    items.push({
                        id: el.dataset.id || null,
                        type: el.dataset.type,
                        ref_id: el.dataset.refId || null,
                        title: el.dataset.title,
                        url: el.dataset.url,
                        order: i,
                        children: subList ? collectItems(subList, 1) : [],
                    });
                });
                return items;
            }

            $('#btnSave').on('click', function() {
                if (!currentMenuId) {
                    toastr.warning('No menu selected!');
                    return;
                }
                loader(true);
                $.ajax({
                    url: R.updateItems(currentMenuId),
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        _token: CSRF,
                        items: collectItems(document.getElementById('mbTree'), 0)
                    }),
                    success: function(res) {
                        loader(false);
                        toastr.success(res.message || 'Menu saved!');
                        renderMenu(currentMenuId);
                    },
                    error: function(xhr) {
                        loader(false);
                        toastr.error((xhr.responseJSON && xhr.responseJSON.message) ||
                            'Save failed!');
                    }
                });
            });

            function updateMenuCount() {
                document.getElementById('menuCountTxt').textContent = document.querySelectorAll('.mb-menu-entry')
                    .length + ' total';
            }

            initRootSortable();
            initSourceSortables();

        })();
    </script>
@endsection