@extends('backend.layouts.app')

@php
    $pageMenu = \App\Models\Backend\menu\frontend\Menu::where('menu_link', 'frontend-menu.assign')->first();
    $pageTitle = $pageMenu?->menu_name ?? 'Assign Frontend Menus';
    $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700';
@endphp

@section('title', $pageTitle)

@once
    @push('styles')
        <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
        <style>
            .select2-container--default .select2-selection--single { min-height: 44px; border-radius: 0.5rem; border-color: rgb(209 213 219); background-color: transparent; padding: 4px 8px; }
            .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 { 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); }
            .menu-tree-node { border-left: 2px solid rgb(229 231 235); }
            .dark .menu-tree-node { border-left-color: rgb(55 65 81); }
            .menu-tree-node.root-node { border-left: none; }
        </style>
    @endpush
@endonce

@section('content')
    <div class="space-y-6">
        <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="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('admin.dashboard') }}">Home <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></li>
                    <li><a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('frontend-menu.index') }}">Frontend Menu <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></li>
                    <li class="text-sm text-gray-800 dark:text-white/90">{{ $pageTitle }}</li>
                </ol>
            </nav>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-5">
                <p class="text-sm text-gray-500 dark:text-gray-400">Assign frontend menu items to roles for public website navigation. Control hierarchy, menu set grouping, page/site context, and ordering.</p>
            </div>

            <div class="space-y-5 border-t border-gray-100 p-6 dark:border-gray-800">
                <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">Role</label>
                        <select name="role_code" class="js-assign-role-select w-full">
                            <option value="">Select Role</option>
                            @foreach($roles as $code => $name)
                                <option value="{{ $code }}" @selected($role === $code)>{{ $name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Select a role to manage its menu assignments.</p>
                    </div>
                </form>

                @if($role)
                <form method="POST" action="{{ route('frontend-menu.assign') }}" class="rounded-xl border border-gray-200 bg-gray-50/50 p-5 dark:border-gray-800 dark:bg-gray-900/30">
                    @csrf
                    <input type="hidden" name="role_code" value="{{ $role }}">

                    <div class="mb-4 flex items-center gap-2">
                        <svg class="h-5 w-5 text-brand-500" 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>
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Assign New Menu Item</h4>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu <span class="text-error-500">*</span></label>
                            <select name="menu_id" class="js-assign-menu-select w-full" required>
                                <option value="">Select menu...</option>
                                @foreach($menus 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">Parent Menu</label>
                            <select name="parent_id" class="js-assign-parent-select w-full">
                                <option value="0">None (Root Level)</option>
                                @foreach($menus 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 Set</label>
                            <input type="text" name="menu_set" value="{{ old('menu_set', $params['menu_set'] ?? 'DEFAULT') }}" class="{{ $inputClass }}" placeholder="e.g. DEFAULT, TOPMENU, FOOTER">
                            <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Menu set grouping identifier.</p>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Group</label>
                            <input type="text" name="menu_group" value="{{ old('menu_group', $params['menu_group'] ?? '') }}" class="{{ $inputClass }}" placeholder="e.g. main, secondary">
                        </div>
                    </div>

                    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Page ID</label>
                            <select name="page_id" class="js-assign-page-select w-full">
                                <option value="0">* (All Pages)</option>
                                @foreach($pages as $id => $name)
                                    <option value="{{ $id }}" @selected(old('page_id', $params['page_id'] ?? 0) == $id)>{{ $name }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">0 = show on all pages.</p>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Site ID</label>
                            <select name="site_id" class="js-assign-site-select w-full">
                                <option value="0">* (All Sites)</option>
                                @foreach($sites as $id => $name)
                                    <option value="{{ $id }}" @selected(old('site_id', $params['site_id'] ?? 0) == $id)>{{ $name }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">0 = show on all sites.</p>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                            <select name="category" class="{{ $inputClass }}">
                                <option value="">None</option>
                                @foreach(\App\Models\Backend\menu\frontend\MenuCategory::where('category_status', true)->orderBy('category_name')->pluck('category_name', 'category_name') as $cat)
                                    <option value="{{ $cat }}" @selected(old('category', $params['category'] ?? '') === $cat)>{{ $cat }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex items-end gap-4">
                            <label class="mb-1.5 flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-400">
                                <input type="checkbox" name="status" value="1" @checked(old('status', ($params['status'] ?? null) !== '0')) class="h-4 w-4">
                                Active
                            </label>
                            <button type="submit" class="inline-flex h-11 items-center gap-2 rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-50">
                                <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
                            </button>
                        </div>
                    </div>
                </form>
                @endif

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                        <div class="flex items-center justify-between">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Assigned Menu Tree</h3>
                            @if($role)
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-medium text-brand-700 dark:bg-brand-500/10 dark:text-brand-400">
                                <span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span>
                                {{ $role }} @if($params['menu_set'] ?? false)({{ $params['menu_set'] }})@endif
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="p-5">
                        @if($role && count($assignedMenus))
                            <div class="space-y-1">
                                @foreach($assignedMenus as $node)
                                    @include('backend.module.menu.frontend._tree_node', [
                                        'node' => $node,
                                        'role' => $role,
                                        'params' => $params,
                                        'menus' => $menus,
                                    ])
                                @endforeach
                            </div>
                        @elseif($role)
                            <div class="py-10 text-center">
                                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                    <svg class="h-7 w-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                                </div>
                                <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">No assigned menu found</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-500">Select a role and use the form above to assign menu items.</p>
                            </div>
                        @else
                            <div class="py-10 text-center">
                                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                    <svg class="h-7 w-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                </div>
                                <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">Select a role</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-500">Choose a role from the dropdown above to manage its menu tree.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="submenu-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
        <div class="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
            <div class="mb-4 flex items-center gap-3">
                <div class="flex h-10 w-10 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-sm text-gray-500 dark:text-gray-400">Assign a submenu under the selected parent.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('frontend-menu.assign') }}">
                @csrf
                <input type="hidden" name="role_code" id="submenu-role">
                <input type="hidden" name="parent_id" id="submenu-parent">
                <input type="hidden" name="menu_set" id="submenu-set">
                <input type="hidden" name="menu_group" id="submenu-group">

                <div class="mb-4">
                    <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-submenu-menu-select w-full" required>
                        <option value="">Select menu...</option>
                        @foreach($menus as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex justify-end gap-3">
                    <button type="button" id="submenu-cancel" 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">Cancel</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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                $('.js-assign-role-select').select2({ width: '100%', placeholder: 'Select Role', allowClear: true }).on('change', function () { this.form.submit(); });
                $('.js-assign-menu-select').select2({ width: '100%', placeholder: 'Select menu...', allowClear: true });
                $('.js-assign-parent-select').select2({ width: '100%', placeholder: 'None (Root Level)', allowClear: true });
                $('.js-submenu-menu-select').select2({ width: '100%', placeholder: 'Select menu...', allowClear: true, dropdownParent: $('#submenu-modal') });

                var modal = document.getElementById('submenu-modal');
                var roleInput = document.getElementById('submenu-role');
                var parentInput = document.getElementById('submenu-parent');
                var setInput = document.getElementById('submenu-set');
                var groupInput = document.getElementById('submenu-group');
                var cancelBtn = document.getElementById('submenu-cancel');

                function openModal(parentId, roleCode, menuSet, menuGroup) {
                    roleInput.value = roleCode;
                    parentInput.value = parentId;
                    setInput.value = menuSet || 'DEFAULT';
                    groupInput.value = menuGroup || '';
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                }

                function closeModal() { modal.classList.add('hidden'); modal.classList.remove('flex'); }

                document.querySelectorAll('.js-add-submenu').forEach(function (btn) {
                    btn.addEventListener('click', function () {
                        openModal(this.getAttribute('data-parent'), this.getAttribute('data-role'), this.getAttribute('data-set'), this.getAttribute('data-group'));
                    });
                });

                if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
                modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
                document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); });

                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