{{-- resources/views/components/partials/sidebar.blade.php --}}

<div
    id="sidebar"
    class="fixed top-0 left-0 z-50 #drop-shadow-2xl
         -translate-x-full sm:translate-x-0
         h-full w-full">
    <div class="p-2.5 w-full h-full">
        <div class="side-bg flex flex-col rounded-lg shadow-2xl h-full border-white/10
                    bg-gradient-to-b from-[#0f172a]/90 via-[#1e293b]/70 to-[#0d9488]/30
                    backdrop-blur-xl border border-white/10">

            {{-- Header --}}
            <div class="relative h-16 border-b hr px-2 flex items-center justify-between">
                <a href="{{ route('ui.dashboard') }}"
                   class="sidebar-link group relative flex flex-row items-center #mx-auto sm:mx-0">
                    <span class="text-gray p-1.5">
                        <x-icons.icon-logo-circle class="!size-9"/>
                    </span>

                    <span class="sidebar-label text-xl ml-2 truncate tracking-wide font-bai transition-all">
                        <x-icons.icon-logo-text class="!size-35 fill-white"/>
                    </span>
                </a>

                <button class="sidebar-toggle absolute translate-0 right-5 block sm:hidden text-white/60 hover:text-white text-2xl"><i
                        class="ph ph-x"></i>
                </button>
            </div>

            {{-- Navigation --}}

            <nav class="flex-1 overflow-y-auto my-3 px-2.5 space-y-4 no-scrollbar text-[rgba(var(--gray))]">
                <ul class="space-y-3">
                    @foreach(config('menu.sidebar') as $section)
                        @php
                            $activeInside = collect($section['items'] ?? [])->contains(
                                fn($i) => isset($i['route']) && request()->routeIs($i['route'])
                            );
                            $secIcon = $section['icon'] ?? 'ph-dots-three-outline';
                        @endphp


                        <li class="space-y-1" x-data="{ open: {{ $activeInside ? 'true' : 'false' }} }">
                            <button
                                type="button"
                                class="js-sec-toggle w-full flex items-center gap-4 px-2.5 py-2 rounded-lg hover:bg-white/5 text-slate-300 transition-colors"
                                @click="(!$root.closest('#sidebar').classList.contains('u-collapsed')) && (open = !open)">
                                <i class="ph-duotone {{ $secIcon }} text-xl shrink-0 opacity-80"></i>
                                <span class="sidebar-label text-xs font-semibold tracking-wide">
            {{ $section['label'] ?? 'Sektion' }}
          </span>
                                <i class="sidebar-caret ph-duotone ph-caret-down ml-auto text-sm transition-transform"
                                   :class="{ '-rotate-180': open }" x-cloak></i>
                            </button>

                            <ul x-show="open && !$root.closest('#sidebar').classList.contains('u-collapsed')"
                                x-collapse x-cloak data-submenu class="pl-2 pr-1 space-y-1">
                                @foreach(($section['items'] ?? []) as $item)
                                    @php
                                        $active   = isset($item['route']) && request()->routeIs($item['route']);
                                        $itemIcon = $item['icon'] ?? 'ph-dot-outline';
                                    @endphp
                                    <li>
                                        {{--                                        <a href="{{ isset($item['route']) ? route($item['route']) : '#' }}"--}}
                                        <a href="#"
                                           class="sidebar-link group relative flex items-center gap-2 px-2 py-2 rounded-lg
                        border border-transparent transition-colors
                        hover:bg-gradient-to-t hover:from-white/10 hover:to-transparent
                        {{ $active ? 'bg-gradient-to-t from-white/10 to-transparent !border !border-white/10' : '' }}">
                                            <i class="ph-duotone {{ $itemIcon }} text-base opacity-80"></i>
                                            <span
                                                class="sidebar-label text-xs truncate tracking-wide {{ $active ? 'font-semibold' : '' }}">
                  {{ $item['label'] ?? 'Eintrag' }}
                </span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @endforeach
                </ul>
            </nav>

            {{-- Footer Toggle (Desktop/Tablet) --}}
            <div class="p-5 border-t hr flex justify-center items-center">
                <div class="sidebar-label text-[10px] text-slate-300/70 whitespace-nowrap">
                    <span class="text-xs text-white/40">{{ config('app.name') }} | v{{ config('app.version') }}</span>
                </div>

{{--                <button type="button"--}}
{{--                        class="action-button sidebar-toggle flex items-center justify-center p-2 shadow-2xl rounded"--}}
{{--                        aria-label="Sidebar ein/ausklappen">--}}
{{--                    <svg class="size-6" fill="none" stroke="currentColor" stroke-width="1.5"--}}
{{--                         viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">--}}
{{--                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>--}}
{{--                    </svg>--}}
{{--                </button>--}}
            </div>
        </div>
    </div>
</div>