@php
    $groups = \App\Support\Navigation::forUser(auth()->user());
@endphp

<aside x-cloak
       :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
       class="fixed inset-y-0 left-0 z-40 flex w-64 flex-col bg-slate-900 transition-all duration-200 lg:translate-x-0"
       :style="sidebarCollapsed ? 'width: 4.5rem' : 'width: 16rem'">

    <div class="flex h-16 shrink-0 items-center gap-2.5 border-b border-white/10 px-4">
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-brand-500 text-white">
            <x-icon name="building-hospital" size="lg" />
        </span>

        <div class="min-w-0 flex-1" x-show="!sidebarCollapsed" x-cloak>
            <p class="truncate text-sm font-semibold text-white">{{ hospital_name() }}</p>
            <p class="truncate text-[11px] uppercase tracking-wide text-slate-400">{{ setting('facility_level', 'Health Facility') }}</p>
        </div>

        <button type="button" @click="sidebarOpen = false" class="rounded p-1 text-slate-400 hover:bg-white/10 hover:text-white lg:hidden">
            <x-icon name="x" size="sm" />
        </button>
    </div>

    <nav class="flex-1 space-y-5 overflow-y-auto px-3 py-4">
        @foreach ($groups as $group)
            <div>
                <p class="px-2 pb-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-500"
                   x-show="!sidebarCollapsed" x-cloak>{{ $group['label'] }}</p>
                <div class="mx-2 mb-1.5 border-t border-white/5" x-show="sidebarCollapsed" x-cloak></div>

                <ul class="space-y-0.5">
                    @foreach ($group['items'] as $item)
                        @php
                            $isActive = request()->routeIs($item['match'] ?? $item['route']);
                        @endphp

                        <li>
                            <a href="{{ route($item['route']) }}"
                               @class([
                                   'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition',
                                   'bg-brand-600 text-white shadow-sm' => $isActive,
                                   'text-slate-300 hover:bg-white/5 hover:text-white' => ! $isActive,
                               ])
                               :title="sidebarCollapsed ? '{{ $item['label'] }}' : null">
                                <x-icon :name="$item['icon']" size="md" class="shrink-0" />

                                <span class="truncate" x-show="!sidebarCollapsed" x-cloak>{{ $item['label'] }}</span>

                                @if (! empty($item['badge']))
                                    <span class="ml-auto rounded-full bg-white/15 px-2 py-0.5 text-[11px] font-semibold text-white"
                                          x-show="!sidebarCollapsed" x-cloak>{{ $item['badge'] }}</span>
                                @endif
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach

        @if ($groups === [])
            <p class="px-3 text-xs text-slate-500">No modules are enabled for your account yet.</p>
        @endif
    </nav>

    <div class="shrink-0 border-t border-white/10 p-3">
        <button type="button" @click="sidebarCollapsed = !sidebarCollapsed"
                class="hidden w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-400 transition hover:bg-white/5 hover:text-white lg:flex">
            <x-icon name="chevron-left" size="md" class="shrink-0 transition-transform" x-bind:class="sidebarCollapsed ? 'rotate-180' : ''" />
            <span x-show="!sidebarCollapsed" x-cloak>Collapse</span>
        </button>
    </div>
</aside>