@extends('backend.layouts.app')

@php
$pageTitle = $pageTitle ?? 'Assign Menu';
@endphp

@section('title', $pageTitle)

@once
@push('styles')
<link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
<style>
    @media (max-width: 767px) {
        .tree-node[data-level="0"] { margin-left: 0; }
        .tree-node[data-level="1"] { margin-left: 16px; }
        .tree-node[data-level="2"] { margin-left: 32px; }
        .tree-node[data-level="3"] { margin-left: 48px; }
        .tree-node[data-level="4"] { margin-left: 64px; }
        .tree-node[data-level="5"] { margin-left: 80px; }
        .tree-node[data-level="0"] + .tree-node[data-level="0"],
        .tree-node[data-level="0"]:has(+ .tree-node[data-level="1"]) { margin-top: 6px; }
        .tree-node[data-level="1"] { margin-top: 6px; border-left: 2px solid #e5e7eb; }
        .tree-node[data-level="2"],
        .tree-node[data-level="3"],
        .tree-node[data-level="4"],
        .tree-node[data-level="5"] { margin-top: 6px; border-left: 2px solid #e5e7eb; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
        .tree-node[data-level="0"] { margin-left: 0; }
        .tree-node[data-level="1"] { margin-left: 20px; }
        .tree-node[data-level="2"] { margin-left: 40px; }
        .tree-node[data-level="3"] { margin-left: 60px; }
        .tree-node[data-level="4"] { margin-left: 80px; }
        .tree-node[data-level="5"] { margin-left: 100px; }
        .tree-node[data-level="0"] + .tree-node[data-level="0"],
        .tree-node[data-level="0"]:has(+ .tree-node[data-level="1"]) { margin-top: 6px; }
        .tree-node[data-level="1"],
        .tree-node[data-level="2"],
        .tree-node[data-level="3"],
        .tree-node[data-level="4"],
        .tree-node[data-level="5"] { margin-top: 6px; border-left: 3px solid #e5e7eb; }
    }
    @media (min-width: 1024px) {
        .tree-node[data-level="0"] { margin-left: 0; }
        .tree-node[data-level="1"] { margin-left: 28px; }
        .tree-node[data-level="2"] { margin-left: 56px; }
        .tree-node[data-level="3"] { margin-left: 84px; }
        .tree-node[data-level="4"] { margin-left: 112px; }
        .tree-node[data-level="5"] { margin-left: 140px; }
        .tree-node[data-level="0"] + .tree-node[data-level="0"],
        .tree-node[data-level="0"]:has(+ .tree-node[data-level="1"]) { margin-top: 6px; }
        .tree-node[data-level="1"],
        .tree-node[data-level="2"],
        .tree-node[data-level="3"],
        .tree-node[data-level="4"],
        .tree-node[data-level="5"] { margin-top: 6px; border-left: 3px solid #e5e7eb; }
    }
    .tree-node-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .tree-node-container::-webkit-scrollbar {
        height: 6px;
    }
    .tree-node-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .tree-node-container::-webkit-scrollbar-thumb {
        background-color: rgb(209, 213, 219);
        border-radius: 3px;
    }
    .dark .tree-node-container::-webkit-scrollbar-thumb {
        background-color: rgb(55, 65, 81);
    }
    @media (max-width: 479px) {
        .max-xs\:hidden { display: none; }
    }
    @media (min-width: 480px) {
        .xs\:inline { display: inline; }
    }

    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        min-height: 44px;
        border-radius: 0.5rem;
        border-color: rgb(209 213 219);
        background-color: transparent;
        padding: 4px 8px;
    }

    .select2-container--default .select2-selection--multiple {
        max-height: 44px;
        overflow-y: auto;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 34px;
        color: rgb(31 41 55);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }

    .dark .select2-container--default .select2-selection--single,
    .dark .select2-container--default .select2-selection--multiple,
    .dark .select2-dropdown {
        border-color: rgb(55 65 81);
        background-color: rgb(17 24 39);
        color: rgb(243 244 246);
    }

    .dark .select2-container--default .select2-selection--single .select2-selection__rendered,
    .dark .select2-container--default .select2-search--dropdown .select2-search__field,
    .dark .select2-results__option {
        color: rgb(243 244 246);
    }

    .dark .select2-container--default .select2-search--dropdown .select2-search__field {
        border-color: rgb(55 65 81);
        background-color: rgb(17 24 39);
    }


</style>
@endpush
@endonce

@section('content')

<div class="space-y-6">
    {{-- Breadcrumb --}}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $pageTitle }}</h2>
        <nav>
            <ol class="flex items-center gap-1.5">
                <li><a class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" href="{{ route('admin.home') }}">Home</a></li>
                <li class="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
                    <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                    <a href="{{ route('frontend-menu.index') }}" class="hover:text-gray-700 dark:hover:text-gray-300">Frontend Menu</a>
                </li>
                <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                    <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                    {{ $pageTitle }}
                </li>
            </ol>
        </nav>
    </div>

    {{-- Step 1: Filter --}}
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center gap-3 border-b border-gray-100 px-5 py-4 dark:border-gray-800">
            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-500 text-xs font-bold text-white">1</span>
            <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Filter Context</h3>
            <p class="text-sm text-gray-400 dark:text-gray-500">— Choose where this menu will appear</p>
        </div>
        <div class="p-5">
            <form method="GET" action="{{ route('frontend-menu.assign') }}" class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Site</label>
                    <select name="site_id" id="siteid" class="js-filter-site w-full">
                        <option value="0">*</option>
                        @foreach($sites as $id => $name)
                        <option value="{{ $id }}" @selected($siteId == $id)>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Page</label>
                    <select name="page_id" id="pageid" class="js-filter-page w-full">
                        <option value="0">*</option>
                        @foreach($pages as $id => $name)
                        <option value="{{ $id }}" @selected($pageId == $id)>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                    <select name="category_id" id="categoryid" class="js-filter-category w-full">
                        <option value="0">*</option>
                        @foreach($categories as $id => $name)
                        <option value="{{ $id }}" @selected($categoryId == $id)>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
            <div class="mt-4 flex flex-wrap items-center gap-2">
                @if($siteId > 0)
                <span class="inline-flex items-center gap-1 rounded-full bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700 dark:bg-brand-500/10 dark:text-brand-400">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/></svg>
                    {{ $sites[$siteId] ?? 'Site #'.$siteId }}
                </span>
                @endif
                @if($pageId > 0)
                <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-3 py-1 text-xs font-medium text-purple-700 dark:bg-purple-500/10 dark:text-purple-400">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    {{ $pages[$pageId] ?? 'Page #'.$pageId }}
                </span>
                @endif
                @if($categoryId > 0)
                <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                    {{ $categories[$categoryId] ?? 'Category #'.$categoryId }}
                </span>
                @endif
                @if(empty($groupedRoles) && $siteId == 0 && $pageId == 0 && $categoryId == 0)
                <span class="text-xs text-gray-400 dark:text-gray-500">Select a filter above or assign to all sites/pages/categories (*)</span>
                @endif
            </div>
        </div>
    </div>

    {{-- Step 2: Assign --}}
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center gap-3 border-b border-gray-100 px-5 py-4 dark:border-gray-800">
            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-500 text-xs font-bold text-white">2</span>
            <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Assign Menus to Role</h3>
            <p class="text-sm text-gray-400 dark:text-gray-500">— Link menu items to user roles</p>
        </div>
        <div class="p-5">
            @if(empty($groupedRoles))
            <div class="flex flex-col items-center gap-4 py-8 text-center">
                <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                    <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">No menus assigned yet</p>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Click the button below to assign your first menu item.</p>
                </div>
                <a href="#parentmenumodal" data-modal-toggle="parentmenumodal" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-brand-600">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                    (+) Assign Menu
                </a>
            </div>
            @else
            <div class="mb-5 flex items-center justify-between">
                <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    <span>{{ collect($assignedMenusByRole)->flatten(1)->count() }} menu items assigned</span>
                </div>
                <a href="#parentmenumodal" data-modal-toggle="parentmenumodal" class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-600">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                    (+) Assign Menu
                </a>
            </div>

            {{-- Role groups --}}
            @foreach($groupedRoles as $roleCode)
            @php $roleTree = $assignedMenusByRole[$roleCode] ?? []; @endphp
            @if(count($roleTree))
            <div class="mb-6 last:mb-0">
                <div class="mb-3 flex items-center gap-2">
                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50 text-sm font-bold text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                        {{ substr($roleCode, 0, 1) }}
                    </div>
                    <div>
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $roleCode }}</h4>
                        <p class="text-xs text-gray-400 dark:text-gray-500">{{ count($roleTree) }} root menu item(s)</p>
                    </div>
                </div>
                <div class="tree-node-container space-y-1 rounded-xl border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-white/[0.02]">
                    @foreach($roleTree as $node)
                    @include('backend.module.menu.frontend._tree_node', [
                        'node' => $node,
                        'role' => $roleCode,
                        'params' => [
                            'page_id' => $pageId,
                            'site_id' => $siteId,
                            'category_id' => $categoryId,
                        ],
                        'menus' => $listofmenus ?? [],
                    ])
                    @endforeach
                </div>
            </div>
            @endif
            @endforeach
            @endif
        </div>
    </div>
</div>

{{-- Add Menus Modal --}}
<div id="parentmenumodal" class="fixed inset-0 z-50 hidden items-center justify-center overflow-y-auto bg-black/50 p-4">
    <div class="w-full max-w-md sm:max-w-lg lg:max-w-xl rounded-2xl bg-white shadow-xl dark:bg-gray-900">
        <div class="sticky top-0 z-10 flex items-start justify-between border-b border-gray-100 bg-white px-5 py-4 dark:border-gray-800 dark:bg-gray-900 rounded-t-2xl">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-500/10">
                    <svg class="h-5 w-5 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
                </div>
                <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ __('Add Menus') }}</h3>
            </div>
            <button type="button" data-modal-close="parentmenumodal" class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
        </div>
        <form method="POST" action="{{ route('frontend-menu.assign') }}">
            @csrf
            <div class="px-5 py-5 max-h-[65vh] overflow-y-auto">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Role</label>
                        <select name="role_code" class="js-parent-role-select w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90" required>
                            <option value="">Select role...</option>
                            @foreach($roles as $code => $name)
                            <option value="{{ $code }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu</label>
                        <select name="menu_id" class="js-parent-menu-select w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90" required>
                            <option value="">Select menu...</option>
                            @foreach($listofmenus as $menu)
                            <option value="{{ $menu->menu_id }}">{{ $menu->menu_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                        <select name="category_id" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- Select Category --</option>
                            @foreach($categories as $id => $name)
                            <option value="{{ $id }}" @selected($categoryId == $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Manage from <a href="{{ route('menu-category.index') }}" class="text-brand-500 hover:underline">Categories</a></p>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Group</label>
                        <select name="menu_group" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- Default --</option>
                            <option value="left">Left</option>
                            <option value="right">Right</option>
                            <option value="center">Center</option>
                            <option value="top">Top</option>
                            <option value="bottom">Bottom</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Site</label>
                        <select name="site_id" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="0">All Sites</option>
                            @foreach($sites as $id => $name)
                            <option value="{{ $id }}" @selected($siteId == $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Page</label>
                        <select name="page_id" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="0">All Pages</option>
                            @foreach($pages as $id => $name)
                            <option value="{{ $id }}" @selected($pageId == $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="sticky bottom-0 flex justify-end gap-3 border-t border-gray-100 bg-white px-5 py-4 dark:border-gray-800 dark:bg-gray-900 rounded-b-2xl">
                <button type="button" data-modal-close="parentmenumodal" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">{{ __('Close') }}</button>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-600">{{ __('Save') }}</button>
            </div>
        </form>
    </div>
</div>

{{-- Child Modal (Submenu) --}}
<div id="childmenumodal" class="fixed inset-0 z-50 hidden items-center justify-center overflow-y-auto bg-black/50 p-4">
    <div class="w-full max-w-md sm:max-w-lg lg:max-w-xl rounded-2xl bg-white shadow-xl dark:bg-gray-900">
        <div class="sticky top-0 z-10 flex items-start justify-between border-b border-gray-100 bg-white px-5 py-4 dark:border-gray-800 dark:bg-gray-900 rounded-t-2xl">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-500/10">
                    <svg class="h-5 w-5 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
                </div>
                <div>
                    <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ __('Add Submenu') }}</h3>
                    <p class="text-xs text-gray-400 dark:text-gray-500">Assign a child under the selected parent</p>
                </div>
            </div>
            <button type="button" data-modal-close="childmenumodal" class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
        </div>
        <form method="POST" action="{{ route('frontend-menu.assign') }}">
            @csrf
            <div class="px-5 py-5 max-h-[65vh] overflow-y-auto">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Role</label>
                        <select name="role_code" class="js-child-role-select w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90" required>
                            <option value="">Select role...</option>
                            @foreach($roles as $code => $name)
                            <option value="{{ $code }}" @selected($rolecode === $code)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu</label>
                        <select name="menu_id" id="menuid" class="js-submenu-menu-select w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90" required>
                            <option value="">Select menu...</option>
                            @foreach($listofmenus as $menu)
                            <option value="{{ $menu->menu_id }}">{{ $menu->menu_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                        <select name="category_id" id="hiddencategoryid" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- Select Category --</option>
                            @foreach($categories as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Group</label>
                        <select name="menu_group" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- Default --</option>
                            <option value="left">Left</option>
                            <option value="right">Right</option>
                            <option value="center">Center</option>
                            <option value="top">Top</option>
                            <option value="bottom">Bottom</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Site</label>
                        <select name="site_id" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="0">All Sites</option>
                            @foreach($sites as $id => $name)
                            <option value="{{ $id }}" @selected($siteId == $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Page</label>
                        <select name="page_id" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="0">All Pages</option>
                            @foreach($pages as $id => $name)
                            <option value="{{ $id }}" @selected($pageId == $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <input type="hidden" name="parent_id" id="hiddenparentid" value="{{ $parentid }}">
            </div>
            <div class="sticky bottom-0 flex justify-end gap-3 border-t border-gray-100 bg-white px-5 py-4 dark:border-gray-800 dark:bg-gray-900 rounded-b-2xl">
                <button type="button" data-modal-close="childmenumodal" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">{{ __('Close') }}</button>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-600">{{ __('Save') }}</button>
            </div>
        </form>
    </div>
</div>


@endsection

@once
@push('scripts')
<script src="{{ asset('vendor/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
    var parentid = @json($parentid);
    var rolecode = @json($rolecode);

    $('.js-filter-site, .js-filter-page, .js-filter-category').select2({ width: '100%', placeholder: 'Select...', allowClear: true });
    $('.js-parent-role-select, .js-parent-menu-select, .js-child-role-select, .js-submenu-menu-select').select2({ width: '100%' });

    $('#siteid, #pageid, #categoryid').change(function(e) {
        $(this).closest('form').submit();
    });

    document.querySelectorAll('.js-add-submenu').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var parentId = this.getAttribute('data-parent');
            var role = this.getAttribute('data-role');
            var categoryId = this.getAttribute('data-category') || '';

            document.getElementById('hiddenparentid').value = parentId;
            if (document.querySelector('.js-child-role-select option[value="' + role + '"]')) {
                document.querySelector('.js-child-role-select').value = role;
            }
            if (categoryId) {
                document.getElementById('hiddencategoryid').value = categoryId;
            }

            var el = document.getElementById('childmenumodal');
            el.classList.remove('hidden');
            el.classList.add('flex');
        });
    });

    document.querySelectorAll('[data-modal-toggle]').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            var el = document.getElementById(this.getAttribute('data-modal-toggle'));
            if (el) { el.classList.remove('hidden'); el.classList.add('flex'); }
        });
    });

    document.querySelectorAll('[data-modal-close]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var target = document.getElementById(this.getAttribute('data-modal-close'));
            if (target) { target.classList.add('hidden'); target.classList.remove('flex'); }
        });
    });

    document.querySelectorAll('#parentmenumodal, #childmenumodal').forEach(function(modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        });
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('#parentmenumodal, #childmenumodal').forEach(function(modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        }
    });

    if (parentid && parseInt(parentid) > 0 && rolecode) {
        if (document.querySelector('.js-child-role-select option[value="' + rolecode + '"]')) {
            document.querySelector('.js-child-role-select').value = rolecode;
        }
        document.getElementById('childmenumodal').classList.remove('hidden');
        document.getElementById('childmenumodal').classList.add('flex');
    }

    document.querySelectorAll('.js-delete-mapping').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            var form = this.closest('form');
            var name = this.getAttribute('data-name');
            Swal.fire({
                title: 'Delete Role Mapping?',
                text: name ? 'Delete mapping for "' + name + '"?' : 'This action cannot be undone.',
                icon: 'warning', showCancelButton: true,
                confirmButtonColor: '#ef4444', cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, delete it!', cancelButtonText: 'Cancel'
            }).then(function(result) { if (result.isConfirmed) form.submit(); });
        });
    });
});
</script>
@endpush
@endonce