{{-- Desktop Sidebar --}}
<aside class="hidden lg:flex lg:flex-shrink-0" :class="sidebarOpen ? 'lg:w-64' : 'lg:w-20'">
    <div class="flex flex-col w-full transition-all duration-300"
         style="background: linear-gradient(180deg, #1c1917 0%, #292524 100%);">
        {{-- Logo & School Name --}}
        <div class="flex items-center justify-between h-16 px-4" style="background-color: #1c1917;">
            @php
                $logoUrl = ($schoolSettings['school_logo'] ?? null) ? asset('storage/' . $schoolSettings['school_logo']) : null;
            @endphp
            <div class="flex items-center gap-3 min-w-0" x-show="sidebarOpen">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo" class="w-9 h-9 rounded-lg object-contain bg-white/10 p-0.5 shrink-0">
                @else
                    <span class="text-2xl shrink-0">🏫</span>
                @endif
                <span class="text-lg font-bold text-white truncate">
                    {{ $schoolSettings['school_name'] ?? 'School Portal' }}
                </span>
            </div>
            <div x-show="!sidebarOpen" class="mx-auto">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo" class="w-8 h-8 rounded-lg object-contain bg-white/10 p-0.5">
                @else
                    <span class="text-xl">🏫</span>
                @endif
            </div>
            <button @click="sidebarOpen = !sidebarOpen" class="text-white/60 hover:text-white transition-colors ml-2 shrink-0">
                <i class="fas fa-bars"></i>
            </button>
        </div>

        {{-- Navigation --}}
        <nav class="flex-1 overflow-y-auto py-4 space-y-1">
            @php
                $role = auth()->user()->role;
                $nav = [
                    ['route' => 'dashboard', 'icon' => 'fa-tachometer-alt', 'label' => 'Dashboard', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'students.index', 'icon' => 'fa-user-graduate', 'label' => 'Students', 'roles' => ['admin']],
                    ['route' => 'teachers.index', 'icon' => 'fa-chalkboard-teacher', 'label' => 'Teachers', 'roles' => ['admin']],
                    ['route' => 'parents.index', 'icon' => 'fa-users', 'label' => 'Parents', 'roles' => ['admin']],
                    ['route' => 'admin.classes.index', 'icon' => 'fa-chalkboard', 'label' => 'Classes', 'roles' => ['admin']],
                    ['route' => 'admin.subjects.index', 'icon' => 'fa-book', 'label' => 'Subjects', 'roles' => ['admin']],
                    ['route' => 'academics.exams.index', 'icon' => 'fa-graduation-cap', 'label' => 'Academics', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'assignments.index', 'icon' => 'fa-tasks', 'label' => 'Assignments', 'roles' => ['admin','teacher','student']],
                    ['route' => 'attendance.index', 'icon' => 'fa-clipboard-check', 'label' => 'Attendance', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'communication.announcements', 'icon' => 'fa-bullhorn', 'label' => 'Announcements', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'communication.conversations', 'icon' => 'fa-comments', 'label' => 'Messages', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'fees.index', 'icon' => 'fa-money-bill-wave', 'label' => 'Fees', 'roles' => ['admin','student','parent']],
                    ['route' => 'timetable.index', 'icon' => 'fa-calendar-alt', 'label' => 'Timetable', 'roles' => ['admin','teacher','student','parent']],
                ];
            @endphp

            @foreach($nav as $item)
                @if(in_array($role, $item['roles']))
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center px-4 py-3 text-sm transition-colors
                              {{ request()->routeIs($item['route'].'*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                        <i class="fas {{ $item['icon'] }} w-5 text-center"></i>
                        <span class="ml-3" x-show="sidebarOpen">{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach

            {{-- Divider before utility links --}}
            <div class="my-3 mx-4 border-t border-white/10"></div>

            {{-- Profile --}}
            <a href="{{ route('profile.edit') }}"
               class="flex items-center px-4 py-3 text-sm transition-colors
                      {{ request()->routeIs('profile.*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                <i class="fas fa-user-cog w-5 text-center"></i>
                <span class="ml-3" x-show="sidebarOpen">Profile</span>
            </a>

            {{-- Settings (Admin only) --}}
            @if(auth()->user()->isAdmin())
                <a href="{{ route('admin.settings.index') }}"
                   class="flex items-center px-4 py-3 text-sm transition-colors
                          {{ request()->routeIs('admin.settings.*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                    <i class="fas fa-cog w-5 text-center"></i>
                    <span class="ml-3" x-show="sidebarOpen">Settings</span>
                </a>
            @endif
        </nav>

        {{-- User Info --}}
        <div class="p-4 border-t border-white/10" style="background-color: #1c1917;" x-show="sidebarOpen">
            <div class="flex items-center">
                <div class="w-8 h-8 bg-stone-600 rounded-full flex items-center justify-center text-sm font-bold text-white">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="ml-3 min-w-0">
                    <p class="text-sm font-medium text-white truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-stone-400 capitalize">{{ auth()->user()->role }}</p>
                </div>
            </div>
        </div>
    </div>
</aside>

{{-- Mobile Sidebar Overlay --}}
<div x-show="mobileSidebar" x-transition:enter="transition-opacity ease-linear duration-300"
     x-transition:leave="transition-opacity ease-linear duration-300"
     class="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden" @click="mobileSidebar = false">
</div>

{{-- Mobile Sidebar Drawer --}}
<div x-show="mobileSidebar" x-transition:enter="transition ease-in-out duration-300 transform"
     x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
     x-transition:leave="transition ease-in-out duration-300 transform"
     x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full"
     class="fixed inset-y-0 left-0 z-50 w-64 lg:hidden"
     style="background: linear-gradient(180deg, #1c1917 0%, #292524 100%);">
    <div class="flex flex-col h-full text-white">
        {{-- Mobile Header --}}
        <div class="flex items-center justify-between h-16 px-4" style="background-color: #1c1917;">
            <div class="flex items-center gap-3 min-w-0">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo" class="w-9 h-9 rounded-lg object-contain bg-white/10 p-0.5 shrink-0">
                @else
                    <span class="text-2xl shrink-0">🏫</span>
                @endif
                <span class="text-lg font-bold text-white truncate">
                    {{ $schoolSettings['school_name'] ?? 'School Portal' }}
                </span>
            </div>
            <button @click="mobileSidebar = false" class="text-white/60 hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {{-- Mobile Navigation --}}
        <nav class="flex-1 overflow-y-auto py-4 space-y-1">
            @foreach($nav as $item)
                @if(in_array($role, $item['roles']))
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center px-4 py-3 text-sm transition-colors
                              {{ request()->routeIs($item['route'].'*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                        <i class="fas {{ $item['icon'] }} w-5 text-center"></i>
                        <span class="ml-3">{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach

            <div class="my-3 mx-4 border-t border-white/10"></div>

            <a href="{{ route('profile.edit') }}"
               class="flex items-center px-4 py-3 text-sm transition-colors
                      {{ request()->routeIs('profile.*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                <i class="fas fa-user-cog w-5 text-center"></i>
                <span class="ml-3">Profile</span>
            </a>

            @if(auth()->user()->isAdmin())
                <a href="{{ route('admin.settings.index') }}"
                   class="flex items-center px-4 py-3 text-sm transition-colors
                          {{ request()->routeIs('admin.settings.*') ? 'bg-white/15 text-white' : 'text-stone-300 hover:bg-white/10 hover:text-white' }}">
                    <i class="fas fa-cog w-5 text-center"></i>
                    <span class="ml-3">Settings</span>
                </a>
            @endif
        </nav>

        {{-- Mobile User Info --}}
        <div class="p-4 border-t border-white/10" style="background-color: #1c1917;">
            <div class="flex items-center">
                <div class="w-8 h-8 bg-stone-600 rounded-full flex items-center justify-center text-sm font-bold text-white">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="ml-3 min-w-0">
                    <p class="text-sm font-medium text-white truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-stone-400 capitalize">{{ auth()->user()->role }}</p>
                </div>
            </div>
        </div>
    </div>
</div>