{{-- Desktop Sidebar — Bronze + Marble Edition --}}
<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 relative"
         style="background: linear-gradient(180deg, #1c1917 0%, #292524 50%, #1c1917 100%);">

        {{-- Gold shimmer accent line at top --}}
        <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#8B6914,#D4AF37,#C9A84C,#D4AF37,#8B6914);background-size:200% 100%;animation:goldShimmer 4s ease infinite;z-index:10;"></div>

        {{-- Logo & School Name --}}
        <div class="flex items-center justify-between px-4" style="height: 68px; border-bottom: 1px solid rgba(201,168,76,0.1);">
            @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-10 h-10 rounded-lg object-contain p-0.5 shrink-0"
                         style="background: rgba(255,255,255,0.08); border: 1.5px solid rgba(201,168,76,0.25);">
                @else
                    <span class="text-2xl shrink-0" style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(201,168,76,0.25);">🏫</span>
                @endif
                <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:700;background:linear-gradient(135deg,#C9A84C,#D4AF37,#E8D48B,#C9A84C);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;">
                    {{ $schoolSettings['school_name'] ?? 'School Portal' }}
                </span>
            </div>
            <div x-show="!sidebarOpen" class="mx-auto">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo" class="w-9 h-9 rounded-lg object-contain p-0.5"
                         style="background: rgba(255,255,255,0.08); border: 1.5px solid rgba(201,168,76,0.25);">
                @else
                    <span class="text-xl" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(201,168,76,0.25);">🏫</span>
                @endif
            </div>
            <button @click="sidebarOpen = !sidebarOpen" class="transition-colors ml-2 shrink-0" style="color:rgba(201,168,76,0.5);" onmouseover="this.style.color='#C9A84C'" onmouseout="this.style.color='rgba(201,168,76,0.5)'">
                <i class="fas fa-bars"></i>
            </button>
        </div>

        {{-- Navigation --}}
        <nav class="flex-1 overflow-y-auto py-3 space-y-0.5" style="scrollbar-width:thin;scrollbar-color:rgba(201,168,76,0.2) transparent;">
            @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']],
                    ['route' => 'homework.index', 'icon' => 'fa-book-open', 'label' => 'Homework', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'gallery.index', 'icon' => 'fa-images', 'label' => 'Gallery', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'ptm.index', 'icon' => 'fa-handshake', 'label' => 'PTM', 'roles' => ['admin','teacher','parent']],
                    ['route' => 'sms.index', 'icon' => 'fa-paper-plane', 'label' => 'SMS/WhatsApp', 'roles' => ['admin']],
                    ['route' => 'transport.index', 'icon' => 'fa-bus', 'label' => 'Transport', 'roles' => ['admin','student','parent']],
                    ['route' => 'academic-calendar.index', 'icon' => 'fa-calendar-day', 'label' => 'Academic Calendar', 'roles' => ['admin','teacher','student','parent']],
                    ['route' => 'staff-directory.index', 'icon' => 'fa-id-badge', 'label' => 'Staff Directory', 'roles' => ['admin','teacher','student','parent']],
                ];
            @endphp

            @foreach($nav as $item)
                @if(in_array($role, $item['roles']))
                    @php $isActive = request()->routeIs($item['route'].'*'); @endphp
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center py-2.5 text-sm transition-all duration-200"
                       style="{{ $isActive
                           ? 'background:linear-gradient(135deg,rgba(139,105,20,0.25),rgba(201,168,76,0.12));border:1px solid rgba(201,168,76,0.15);border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#FAFAF9;'
                           : 'border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;' }}"
                       onmouseover="if(!this.classList.contains('nav-active')){this.style.background='rgba(255,255,255,0.06)';this.style.color='#FAFAF9';}"
                       onmouseout="if(!this.classList.contains('nav-active')){this.style.background='transparent';this.style.color='#A8A29E';}">
                        <i class="fas {{ $item['icon'] }} w-5 text-center" style="{{ $isActive ? 'color:#C9A84C;opacity:1;' : 'opacity:0.7;' }}"></i>
                        <span class="ml-3" x-show="sidebarOpen">{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach

            {{-- Report Cards (Student/Parent) --}}
            @if(in_array($role, ['student', 'parent']))
                @php $isActive = request()->routeIs('report-cards.*'); @endphp
                <a href="{{ route('report-cards.index') }}"
                   class="flex items-center py-2.5 text-sm transition-all duration-200"
                   style="{{ $isActive
                       ? 'background:linear-gradient(135deg,rgba(139,105,20,0.25),rgba(201,168,76,0.12));border:1px solid rgba(201,168,76,0.15);border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#FAFAF9;'
                       : 'border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;' }}">
                    <i class="fas fa-file-alt w-5 text-center" style="{{ $isActive ? 'color:#C9A84C;' : 'opacity:0.7;' }}"></i>
                    <span class="ml-3" x-show="sidebarOpen">Report Cards</span>
                </a>
            @endif

            {{-- Divider with gold tint --}}
            <div class="my-2 mx-5" style="border-top:1px solid rgba(255,255,255,0.06);position:relative;">
                <div style="position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.15),transparent);"></div>
            </div>

            {{-- Profile --}}
            @php $isActive = request()->routeIs('profile.*'); @endphp
            <a href="{{ route('profile.edit') }}"
               class="flex items-center py-2.5 text-sm transition-all duration-200"
               style="{{ $isActive
                   ? 'background:linear-gradient(135deg,rgba(139,105,20,0.25),rgba(201,168,76,0.12));border:1px solid rgba(201,168,76,0.15);border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#FAFAF9;'
                   : 'border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;' }}">
                <i class="fas fa-user-cog w-5 text-center" style="{{ $isActive ? 'color:#C9A84C;' : 'opacity:0.7;' }}"></i>
                <span class="ml-3" x-show="sidebarOpen">Profile</span>
            </a>

            {{-- Admin-only section --}}
            @if(auth()->user()->isAdmin())
                @php $adminLinks = [
                    ['route' => 'admin.report-cards.index', 'icon' => 'fa-file-pdf', 'label' => 'Report Cards'],
                    ['route' => 'admin.bulk.students.index', 'icon' => 'fa-file-import', 'label' => 'Bulk Upload'],
                    ['route' => 'admin.bulk.marks.index', 'icon' => 'fa-file-excel', 'label' => 'Bulk Marks'],
                    ['route' => 'admin.permissions.index', 'icon' => 'fa-shield-alt', 'label' => 'Permissions'],
                    ['route' => 'admin.audit-logs.index', 'icon' => 'fa-clipboard-list', 'label' => 'Audit Logs'],
                    ['route' => 'admin.settings.index', 'icon' => 'fa-cog', 'label' => 'Settings'],
                ]; @endphp

                @foreach($adminLinks as $item)
                    @php $isActive = request()->routeIs($item['route'].'*'); @endphp
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center py-2.5 text-sm transition-all duration-200"
                       style="{{ $isActive
                           ? 'background:linear-gradient(135deg,rgba(139,105,20,0.25),rgba(201,168,76,0.12));border:1px solid rgba(201,168,76,0.15);border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#FAFAF9;'
                           : 'border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;' }}">
                        <i class="fas {{ $item['icon'] }} w-5 text-center" style="{{ $isActive ? 'color:#C9A84C;' : 'opacity:0.7;' }}"></i>
                        <span class="ml-3" x-show="sidebarOpen">{{ $item['label'] }}</span>
                    </a>
                @endforeach
            @endif
        </nav>

        {{-- User Info --}}
        <div class="p-4 relative" style="background:rgba(0,0,0,0.15);" x-show="sidebarOpen">
            <div style="position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.15),transparent);"></div>
            <div class="flex items-center">
                <div class="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-bold text-white"
                     style="background: linear-gradient(135deg, #8B6914, #C9A84C);">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="ml-3 min-w-0">
                    <p class="text-sm font-semibold text-stone-200 truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs capitalize" style="color:#C9A84C;font-weight:500;">{{ 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 50%, #1c1917 100%);">
    <div class="flex flex-col h-full text-white relative">
        {{-- Gold shimmer line --}}
        <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#8B6914,#D4AF37,#C9A84C,#D4AF37,#8B6914);background-size:200% 100%;animation:goldShimmer 4s ease infinite;z-index:10;"></div>

        {{-- Mobile Header --}}
        <div class="flex items-center justify-between px-4" style="height: 68px; border-bottom: 1px solid rgba(201,168,76,0.1);">
            <div class="flex items-center gap-3 min-w-0">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo" class="w-10 h-10 rounded-lg object-contain p-0.5 shrink-0"
                         style="background: rgba(255,255,255,0.08); border: 1.5px solid rgba(201,168,76,0.25);">
                @else
                    <span class="text-2xl shrink-0" style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(201,168,76,0.25);">🏫</span>
                @endif
                <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:700;background:linear-gradient(135deg,#C9A84C,#D4AF37,#E8D48B,#C9A84C);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
                    {{ $schoolSettings['school_name'] ?? 'School Portal' }}
                </span>
            </div>
            <button @click="mobileSidebar = false" style="color:rgba(201,168,76,0.5);">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {{-- Mobile Navigation --}}
        <nav class="flex-1 overflow-y-auto py-3 space-y-0.5">
            @foreach($nav as $item)
                @if(in_array($role, $item['roles']))
                    @php $isActive = request()->routeIs($item['route'].'*'); @endphp
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center py-2.5 text-sm transition-colors"
                       style="{{ $isActive
                           ? 'background:linear-gradient(135deg,rgba(139,105,20,0.25),rgba(201,168,76,0.12));border:1px solid rgba(201,168,76,0.15);border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#FAFAF9;'
                           : 'border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;' }}">
                        <i class="fas {{ $item['icon'] }} w-5 text-center" style="{{ $isActive ? 'color:#C9A84C;' : 'opacity:0.7;' }}"></i>
                        <span class="ml-3">{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach

            @if(in_array($role, ['student', 'parent']))
                <a href="{{ route('report-cards.index') }}"
                   class="flex items-center py-2.5 text-sm"
                   style="border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;">
                    <i class="fas fa-file-alt w-5 text-center" style="opacity:0.7;"></i>
                    <span class="ml-3">Report Cards</span>
                </a>
            @endif

            <div class="my-2 mx-5" style="border-top:1px solid rgba(255,255,255,0.06);"></div>

            <a href="{{ route('profile.edit') }}"
               class="flex items-center py-2.5 text-sm"
               style="border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;">
                <i class="fas fa-user-cog w-5 text-center" style="opacity:0.7;"></i>
                <span class="ml-3">Profile</span>
            </a>

            @if(auth()->user()->isAdmin())
                @foreach($adminLinks as $item)
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center py-2.5 text-sm"
                       style="border:1px solid transparent;border-radius:8px;margin:1px 8px;padding-left:16px;padding-right:16px;color:#A8A29E;">
                        <i class="fas {{ $item['icon'] }} w-5 text-center" style="opacity:0.7;"></i>
                        <span class="ml-3">{{ $item['label'] }}</span>
                    </a>
                @endforeach
            @endif
        </nav>

        {{-- Mobile User Info --}}
        <div class="p-4 relative" style="background:rgba(0,0,0,0.15);">
            <div style="position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.15),transparent);"></div>
            <div class="flex items-center">
                <div class="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-bold text-white"
                     style="background: linear-gradient(135deg, #8B6914, #C9A84C);">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="ml-3 min-w-0">
                    <p class="text-sm font-semibold text-stone-200 truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs capitalize" style="color:#C9A84C;font-weight:500;">{{ auth()->user()->role }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Sidebar animation keyframes --}}
<style>
    @keyframes goldShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
</style>