@php $groups = config('sidebar.groups'); @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 h-full w-72 flex-col border-r border-gray-200 bg-white transition-transform duration-200 ease-in-out lg:static lg:translate-x-0 dark:border-gray-800 dark:bg-gray-900"
>
    <div class="flex h-16 shrink-0 items-center gap-2 border-b border-gray-200 px-5 dark:border-gray-800">
        <x-application-logo class="h-7 w-7 fill-current text-indigo-600" />
        <span class="text-sm font-semibold tracking-tight text-gray-900 dark:text-gray-100">{{ config('app.name') }}</span>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 py-4 space-y-6">
        @foreach ($groups as $group)
            <div>
                @if ($group['label'])
                    <p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                        {{ $group['label'] }}
                    </p>
                @endif

                <ul class="space-y-0.5">
                    @foreach ($group['items'] as $item)
                        @php
                            $exists = Route::has($item['route']);
                            $params = $item['params'] ?? [];
                            $isActive = $exists && request()->routeIs($item['route']) && (empty($params) || collect($params)->every(fn ($v, $k) => (string) request()->route($k) === (string) $v));
                        @endphp
                        <li>
                            @if ($exists)
                                <a
                                    href="{{ route($item['route'], $params) }}"
                                    class="flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors {{ $isActive ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100' }}"
                                >
                                    {{ $item['label'] }}
                                </a>
                            @else
                                <span class="flex cursor-not-allowed items-center justify-between rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-300 dark:text-gray-700">
                                    {{ $item['label'] }}
                                    <span class="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 dark:bg-gray-800 dark:text-gray-600">bald</span>
                                </span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    </nav>

    <div class="border-t border-gray-200 p-3 dark:border-gray-800">
        <div class="flex items-center gap-2 rounded-md px-2 py-2">
            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-xs font-semibold text-white">
                {{ Str::of(auth()->user()->name)->substr(0, 2)->upper() }}
            </div>
            <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{{ auth()->user()->name }}</p>
                <p class="truncate text-xs text-gray-500 dark:text-gray-500">{{ auth()->user()->email }}</p>
            </div>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" title="Abmelden" class="rounded-md p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></svg>
                </button>
            </form>
        </div>
    </div>
</aside>

<div
    x-show="sidebarOpen"
    x-cloak
    @click="sidebarOpen = false"
    class="fixed inset-0 z-30 bg-gray-900/30 lg:hidden"
    x-transition:enter="transition-opacity ease-linear duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-linear duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
></div>