@props([
    'sections' => [],
])

@php
    $isActive = function (string $route): bool {
        return request()->routeIs($route)
            || request()->routeIs(str_replace('.index', '.*', $route))
            || request()->routeIs(str_replace('.home', '.*', $route));
    };
@endphp

@foreach ($sections as $section)
    @php
        $collapsible = $section['collapsible'] ?? true;
        $items = $section['items'] ?? [];
        $visibleItems = collect($items)->filter(function ($item) {
            $permission = $item['permission'] ?? null;
            return $permission === null || auth()->user()?->can($permission);
        });
        if ($visibleItems->isEmpty()) {
            continue;
        }
        $groupActive = $visibleItems->contains(fn ($item) => $isActive($item['route']));
        $defaultOpen = $section['default_open'] ?? false;
    @endphp

    <div class="nav-section" @if ($collapsible && count($visibleItems) > 1) x-data="{ open: {{ ($defaultOpen || $groupActive) ? 'true' : 'false' }} }" @endif>
        @if ($collapsible && count($visibleItems) > 1)
            <button type="button" class="nav-group-toggle" @click="open = !open">
                <span class="nav-group-label">{{ $section['label'] }}</span>
                <span class="nav-chevron" :class="{ 'open': open }">›</span>
            </button>
            <div x-show="open" x-collapse>
                @foreach ($visibleItems as $item)
                    <a href="{{ route($item['route']) }}"
                       class="nav-item {{ $isActive($item['route']) ? 'active' : '' }}">
                        @if (! empty($item['icon']))
                            <span class="nav-icon"><x-icon :name="$item['icon']" width="18" height="18" /></span>
                        @endif
                        <span>{{ $item['label'] }}</span>
                        @if (! empty($item['count']))
                            <span class="nav-count {{ ($item['count_class'] ?? '') }}">{{ $item['count'] }}</span>
                        @endif
                    </a>
                @endforeach
            </div>
        @else
            @if (! empty($section['label']) && $section['label'] !== 'Dashboard')
                <div class="nav-label">{{ $section['label'] }}</div>
            @endif
            @foreach ($visibleItems as $item)
                <a href="{{ route($item['route']) }}"
                   class="nav-item {{ $isActive($item['route']) ? 'active' : '' }}">
                    @if (! empty($item['icon']))
                        <span class="nav-icon"><x-icon :name="$item['icon']" width="18" height="18" /></span>
                    @endif
                    <span>{{ $item['label'] }}</span>
                    @if (! empty($item['count']))
                        <span class="nav-count">{{ $item['count'] }}</span>
                    @endif
                </a>
            @endforeach
        @endif
    </div>
@endforeach