@php
    $mapping = $node['mapping'];
    $menu = $mapping->menu;
    $level = $node['level'];
    $children = $node['children'] ?? [];
    $hasChildren = count($children) > 0;
    $menuSet = $params['menu_set'] ?? 'DEFAULT';
@endphp

<div class="tree-node group relative rounded-lg border border-gray-100 bg-white px-4 py-3 transition-all hover:border-gray-200 hover:shadow-sm dark:border-gray-700/50 dark:bg-white/[0.01] dark:hover:border-gray-600 {{ $menu && $menu->menu_status === 0 ? 'opacity-50' : '' }}" style="margin-left: {{ $level * 28 }}px; {{ $level > 0 ? 'margin-top: 6px;' : '' }} {{ $level > 0 ? 'border-left: 3px solid #e5e7eb;' : '' }}">

    <div class="flex items-center justify-between gap-3">
        <div class="flex min-w-0 flex-1 items-center gap-3">
            <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md {{ $hasChildren ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400' : 'bg-gray-50 text-gray-400 dark:bg-gray-800 dark:text-gray-500' }}">
                @if($hasChildren)
                <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="M4 6h16M4 12h16M4 18h16"/></svg>
                @else
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                @endif
            </div>

            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="truncate text-sm font-medium {{ $menu && $menu->menu_status === 0 ? 'text-gray-400 dark:text-gray-500' : 'text-gray-800 dark:text-white/90' }}">
                        {{ $menu ? e($menu->menu_name) : ('Menu #' . $mapping->menu_id) }}
                    </span>
                    @if($menu && $menu->menu_status === 0)
                    <span class="inline-flex items-center rounded-full bg-error-50 px-2 py-0.5 text-xs font-medium text-error-600 dark:bg-error-500/10 dark:text-error-400">Deactive</span>
                    @elseif($menu && $menu->menu_status)
                    <span class="inline-flex items-center rounded-full bg-success-50 px-2 py-0.5 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Active</span>
                    @else
                    <span class="inline-flex items-center rounded-full bg-error-50 px-2 py-0.5 text-xs font-medium text-error-600 dark:bg-error-500/10 dark:text-error-400">Deactive</span>
                    @endif
                    @if($mapping->status === 0)
                    <span class="inline-flex items-center rounded-full bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-600 dark:bg-yellow-500/10 dark:text-yellow-400">Hidden</span>
                    @endif
                    <span class="text-xs text-gray-400 dark:text-gray-500">#{{ $mapping->id }}</span>
                </div>
                <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-400 dark:text-gray-500">
                    <span>{{ $menu?->menu_link ?: 'No link' }}</span>
                    @if($menu?->menu_class) <span class="before:mr-1 before:text-gray-300 before:content-['·']">{{ e($menu->menu_class) }}</span> @endif
                    @if($mapping->menu_set) <span class="before:mr-1 before:text-gray-300 before:content-['·']">Set: {{ e($mapping->menu_set) }}</span> @endif
                    @if($mapping->menu_group) <span class="before:mr-1 before:text-gray-300 before:content-['·']">Group: {{ e($mapping->menu_group) }}</span> @endif
                    @if($mapping->page_id) <span class="before:mr-1 before:text-gray-300 before:content-['·']">Page: {{ $mapping->page_id }}</span> @endif
                    @if($mapping->site_id) <span class="before:mr-1 before:text-gray-300 before:content-['·']">Site: {{ $mapping->site_id }}</span> @endif
                    @if($mapping->category) <span class="before:mr-1 before:text-gray-300 before:content-['·']">{{ e($mapping->category) }}</span> @endif
                </div>
            </div>
        </div>

        <div class="flex shrink-0 items-center gap-0.5 opacity-60 transition-opacity group-hover:opacity-100">
            @if($hasChildren)
            <span class="mr-1 text-xs text-gray-400 dark:text-gray-500">{{ count($children) }}</span>
            @endif

            <form method="POST" action="{{ route('frontend-menu.roledelete', ['id' => $mapping->id]) }}" class="inline">
                @csrf
                <button type="submit"
                    class="js-delete-mapping inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10 dark:hover:text-red-400"
                    title="Delete"
                    data-name="{{ $menu ? e($menu->menu_name) : '' }}">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                </button>
            </form>

            <button type="button"
                class="js-add-submenu inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-brand-50 hover:text-brand-600 dark:hover:bg-brand-500/10 dark:hover:text-brand-400"
                title="Add Submenu"
                data-parent="{{ $mapping->menu_id }}"
                data-role="{{ $role }}"
                data-set="{{ $mapping->menu_set ?? 'DEFAULT' }}"
                data-group="{{ $mapping->menu_group ?? '' }}">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            </button>

            @if($mapping->sort > 1)
            <a href="{{ route('frontend-menu.level', ['id' => $mapping->id, 'role' => $role, 'pos' => 'up', 'sort' => $mapping->sort, 'set' => $mapping->menu_set ?? 'DEFAULT']) }}"
                class="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-300"
                title="Move Up">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
            </a>
            @else
            <span class="inline-flex h-7 w-7 cursor-not-allowed items-center justify-center rounded-md text-gray-200 dark:text-gray-700">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
            </span>
            @endif

            <a href="{{ route('frontend-menu.level', ['id' => $mapping->id, 'role' => $role, 'pos' => 'down', 'sort' => $mapping->sort, 'set' => $mapping->menu_set ?? 'DEFAULT']) }}"
                class="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-300"
                title="Move Down">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </a>

            @if($menu)
            <form method="POST" action="{{ route('frontend-menu.disabled', $menu->menu_id) }}" id="toggleForm-{{ $menu->menu_id }}" class="inline">
                @csrf
                <div x-data="{ switcherToggle: {{ $menu->menu_status ? 'true' : 'false' }} }">
                    <label
                        @click.prevent="switcherToggle = !switcherToggle; $nextTick(() => document.getElementById('toggleForm-{{ $menu->menu_id }}').submit())"
                        class="flex cursor-pointer items-center">
                        <div class="relative">
                            <div class="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"
                                :class="switcherToggle ? 'bg-gray-700 dark:bg-white/10' : 'bg-gray-200 dark:bg-gray-800'">
                            </div>
                            <div class="absolute left-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white transition"
                                :class="switcherToggle ? 'translate-x-full' : ''">
                                <span :class="switcherToggle ? 'block' : 'hidden'" class="text-brand-500 dark:text-brand-500">
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                        <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span :class="switcherToggle ? 'hidden' : 'block'" class="text-gray-400 dark:text-gray-500">
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                        <path d="M4 4L10 10M10 4L4 10" stroke="currentColor" stroke-width="1.94437" stroke-linecap="round"/>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </label>
                </div>
            </form>
            @endif
        </div>
    </div>
</div>

@if($hasChildren)
    @foreach($children as $child)
        @include('backend.module.menu.frontend._tree_node', [
            'node' => $child,
            'role' => $role,
            'params' => $params,
            'menus' => $menus ?? [],
        ])
    @endforeach
@endif