@php
    $hasChildren = $menu->children->isNotEmpty();
    $isActive = request()->routeIs($menu->route);
@endphp

<li class="fluent-nav-item 
    {{ $menu->type_menu === \App\Enums\JenisMenu::Judul ? 'is-title' : '' }}
">

    {{-- SEPARATOR --}}
    @if($menu->type_menu === \App\Enums\JenisMenu::Separator)
        <div class="fluent-nav-separator"></div>

    {{-- TITLE --}}
    @elseif($menu->type_menu === \App\Enums\JenisMenu::Judul)
        <div class="fluent-nav-title">
            {{ strtoupper($menu->title) }}
        </div>

        @if ($hasChildren)
            <ul class="fluent-submenu is-open">
                @foreach ($menu->children as $child)
                    @include('backend.partials.sidebar-nav-menu', ['menu' => $child])
                @endforeach
            </ul>
        @endif

    {{-- NORMAL --}}
    @else

        {{-- 🔥 MENU TANPA CHILD → LINK --}}
        @if(!$hasChildren)
            <a
                href="{{ $menu->route ? route($menu->route) : '#' }}"
                class="fluent-nav-link
                    {{ $isActive ? 'is-active' : '' }}"
            >
                <div class="fluent-nav-left">
                    <x-fluent-icon 
                        name="{{ $menu->icon ?? 'menu' }}" 
                        variant="{{ $isActive ? 'filled' : 'regular' }}" 
                        size="md" 
                    />
                    <span class="fluent-nav-text">{{ $menu->title }}</span>
                </div>
            </a>

        {{-- 🔥 MENU DENGAN CHILD → TOGGLE --}}
        @else
            <div
                class="fluent-nav-link
                    has-children
                    {{ ($menu->is_active_tree ?? false) ? 'is-open' : '' }}"
                data-title="{{ $menu->title }}"
                data-toggle="submenu"
                data-target="#menu-{{ $menu->id }}"
            >
                <div class="fluent-nav-left">
                    <x-fluent-icon 
                        name="{{ $menu->icon ?? 'menu' }}" 
                        size="md" 
                    />
                    <span class="fluent-nav-text">{{ $menu->title }}</span>
                </div>

                <div class="fluent-nav-right">
                    <x-fluent-icon name="chevron_right" size="sm" />
                </div>
            </div>
        @endif

        {{-- CHILDREN --}}
        @if ($hasChildren)
            <ul
                id="menu-{{ $menu->id }}"
                class="fluent-submenu {{ ($menu->is_active_tree ?? false) ? 'is-open' : '' }}"
            >
                @foreach ($menu->children as $child)
                    @include('backend.partials.sidebar-nav-menu', ['menu' => $child])
                @endforeach
            </ul>
        @endif

    @endif

</li>