@php
    $sidebarScope = $sidebarScope ?? ((auth()->user()->type ?? 'guest') . '-portal');
    $sections = $navSections ?? [];
@endphp

<div x-data="sidebarModules('{{ $sidebarScope }}')" x-init="init()">
    <div x-ref="modulesContainer">
        @foreach ($sections as $sIdx => $section)
            @php
                $items = collect($section['items'] ?? [])->filter(fn($i) => $i['visible'] ?? true)->values();
                $color = $section['color'] ?? '#818cf8';
            @endphp
            @if($items->isEmpty()) @continue @endif

            @if(!empty($section['title']))
                <div class="mt-5 mb-1.5 px-1 flex items-center gap-2">
                    <span class="h-px flex-1 bg-white/[0.06]"></span>
                    <span class="text-[9px] font-bold tracking-[0.15em] uppercase text-white/25 select-none whitespace-nowrap">{{ $section['title'] }}</span>
                    <span class="h-px flex-1 bg-white/[0.06]"></span>
                </div>
            @elseif($sIdx > 0)
                <div class="h-2"></div>
            @endif

            <div class="rounded-xl border border-white/[0.06] bg-white/[0.03] overflow-hidden">
                @foreach ($items as $item)
                    @php
                        $itemRoutes = $item['routes'] ?? ($item['route'] ?? null);
                        $isActive = $itemRoutes ? request()->routeIs($itemRoutes) : false;
                        $children = collect($item['children'] ?? [])->filter(fn($c) => $c['visible'] ?? true)->values();
                        $childActive = $children->contains(fn($c) => ($r = $c['routes'] ?? ($c['route'] ?? null)) ? request()->routeIs($r) : false);
                        $active = $isActive || $childActive;
                        $iconColor = $active ? $color : 'rgba(255,255,255,0.28)';
                    @endphp

                    @if($children->isNotEmpty())
                        <div x-data="{ open: {{ $active ? 'true' : 'false' }} }">
                            <button type="button" @click="open = !open"
                                    class="relative flex w-full items-center gap-3 px-3 h-9 transition-colors group {{ $active ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]' }}">
                                @if($active)<span class="absolute inset-y-1.5 start-0 w-[3px] rounded-e-full" style="background:{{ $color }}"></span>@endif
                                <i class="fa-solid {{ $item['icon'] }} w-4 text-center text-[11px] shrink-0" style="color:{{ $iconColor }}"></i>
                                <span class="text-[12.5px] truncate flex-1 text-start {{ $active ? 'text-white font-semibold' : 'text-white/45 font-medium group-hover:text-white/75' }}">{{ $item['label'] }}</span>
                                <i class="fa-solid fa-chevron-down text-[9px] text-white/20 transition-transform" :class="open ? 'rotate-180' : ''"></i>
                            </button>
                            <div x-show="open" x-collapse x-cloak class="border-t border-white/[0.04]">
                                @foreach ($children as $child)
                                    @php
                                        $cr = $child['routes'] ?? ($child['route'] ?? null);
                                        $ca = $cr ? request()->routeIs($cr) : false;
                                    @endphp
                                    <a href="{{ isset($child['route']) ? route($child['route']) : '#' }}"
                                       @if($ca) id="sidebar-active-item" @endif
                                       class="relative flex items-center gap-3 px-3 h-9 transition-colors group {{ $ca ? 'bg-white/[0.05]' : 'hover:bg-white/[0.03]' }}">
                                        @if($ca)<span class="absolute inset-y-1.5 start-0 w-[3px] rounded-e-full" style="background:{{ $color }}"></span>@endif
                                        <span class="h-1.5 w-1.5 rounded-full ms-1 shrink-0" style="background:{{ $ca ? $color : 'rgba(255,255,255,0.2)' }}"></span>
                                        <span class="text-[12px] truncate {{ $ca ? 'text-white font-semibold' : 'text-white/40 group-hover:text-white/70' }}">{{ $child['label'] }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <a href="{{ isset($item['route']) ? route($item['route']) : '#' }}"
                           @if($active) id="sidebar-active-item" @endif
                           class="relative flex items-center gap-3 px-3 h-9 transition-colors group {{ $active ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]' }}">
                            @if($active)<span class="absolute inset-y-1.5 start-0 w-[3px] rounded-e-full" style="background:{{ $color }}"></span>@endif
                            <i class="fa-solid {{ $item['icon'] }} w-4 text-center text-[11px] shrink-0" style="color:{{ $iconColor }}"></i>
                            <span class="text-[12.5px] truncate {{ $active ? 'text-white font-semibold' : 'text-white/45 font-medium group-hover:text-white/75' }}">{{ $item['label'] }}</span>
                        </a>
                    @endif
                @endforeach
            </div>
        @endforeach
    </div>
</div>