@props([
    'menu',
    'active' => null,
    'subActive' => null,
    'level' => 0,
])

@php
    $hasChildren = $menu->children->count();
    $isExternal = str_contains($menu->target_url, 'http');

    $url = $hasChildren
        ? '#'
        : ($isExternal
            ? $menu->target_url
            : url($menu->target_url . $menu->target_slug . ($menu->action ?? '')));

    $submenuId = 'submenu-' . md5($menu->caption . $level);
    $currentPath = request()->path(); // contoh: "/", "profile-bkd", dll
    $isHome = $currentPath === '/' || $currentPath === '';
    $isMenuHome = !$hasChildren && (
        ($menu->target_url === '/' || $menu->target_url === '') &&
        ($menu->target_slug === '' || $menu->target_slug === null)
    );
    $isActive = $active === $menu->caption || ($isHome && $isMenuHome);
    $isSubActive = ($subActive ?? '') === $menu->caption;
@endphp

<li class="fluent-menu__item {{ $hasChildren ? 'is-parent' : '' }}">
    @if($hasChildren)
        <button 
            type="button" 
            class="fluent-menu__link 
                {{ $isActive ? 'is-active' : '' }}
                {{ $isSubActive ? 'is-sub-active' : '' }}"
            data-toggle="submenu" 
            data-target="#{{ $submenuId }}"
        >
            <span class="fluent-menu__text">
                {{ strtoupper($menu->caption) }}
            </span>
            <span class="fluent-menu__caret">
                <x-fluent-icon name="chevron_down" size="xs" />
            </span>
        </button>
    @else
        <a 
            href="{{ $url }}" 
            class="fluent-menu__link 
                {{ $isActive ? 'is-active' : '' }}
                {{ $isSubActive ? 'is-sub-active' : '' }}"
            @if($isExternal) target="_blank" @endif
        >
            <span class="fluent-menu__text">
                {{ strtoupper($menu->caption) }}
            </span>
        </a>
    @endif
    @if($hasChildren)
        <div id="{{ $submenuId }}" class="fluent-menu__submenu">
            <ul class="fluent-menu fluent-menu--sub">
                @foreach($menu->children as $child)
                    <x-frontend.fluent-menu
                        :menu="$child"
                        :active="$active"
                        :subActive="$subActive"
                        :level="$level + 1"
                    />
                @endforeach
            </ul>
        </div>
    @endif

</li>