@php
    $user = auth()->user();
    $isAdmin = $user->hasAnyRole(['super_admin', 'faculty_admin']);
    $isTeacher = $user->hasRole('teacher');
    $isStudent = $user->hasRole('student');
@endphp

<header class="flex justify-between items-center mb-10">
    <div>
        <h1 class="font-display text-3xl lg:text-4xl font-bold text-gray-900 tracking-tight">
            @yield('page-title', 'Tableau de Bord')
        </h1>
        <p class="text-gray-500 mt-1">
            @yield('page-subtitle', 'Bienvenue sur votre espace personnel')
        </p>
    </div>
    
    <div class="flex items-center gap-4">
        <!-- Notifications -->
        <div class="relative" x-data="{ open: false }">
            <button @click="open = !open" class="relative w-12 h-12 bg-white border border-gray-200 rounded-2xl flex items-center justify-center hover:bg-gray-50 transition-all shadow-sm">
                <i class="fa-solid fa-bell text-gray-600"></i>
                <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">3</span>
            </button>
            
            <div x-show="open" @click.away="open = false" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-2"
                 class="absolute right-0 top-16 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 z-50 overflow-hidden">
                <div class="p-4 border-b border-gray-100">
                    <h3 class="font-bold text-gray-900">Notifications</h3>
                </div>
                <div class="max-h-64 overflow-y-auto">
                    <div class="p-4 hover:bg-gray-50 cursor-pointer border-b border-gray-50">
                        <div class="flex gap-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                                <i class="fa-solid fa-book text-blue-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Nouveau cours disponible</p>
                                <p class="text-xs text-gray-500 mt-1">Mathématiques Avancées</p>
                                <p class="text-[10px] text-gray-400 mt-1">Il y a 2 heures</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-50 cursor-pointer border-b border-gray-50">
                        <div class="flex gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
                                <i class="fa-solid fa-check text-green-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Devoir corrigé</p>
                                <p class="text-xs text-gray-500 mt-1">Note: 18/20</p>
                                <p class="text-[10px] text-gray-400 mt-1">Il y a 5 heures</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 hover:bg-gray-50 cursor-pointer">
                        <div class="flex gap-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
                                <i class="fa-solid fa-video text-purple-600 text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Session live demain</p>
                                <p class="text-xs text-gray-500 mt-1">Physique Quantique - 14h00</p>
                                <p class="text-[10px] text-gray-400 mt-1">Il y a 1 jour</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-3 border-t border-gray-100 bg-gray-50">
                    <a href="#" class="text-center block text-sm font-semibold text-royal-blue hover:text-royal-blue-dark">
                        Voir toutes les notifications
                    </a>
                </div>
            </div>
        </div>
        
        <!-- User Card -->
        <div class="flex items-center gap-4 bg-white px-5 py-3 rounded-2xl shadow-sm border border-gray-100">
            <div class="w-10 h-10 royal-gradient rounded-xl flex items-center justify-center">
                <span class="text-white font-bold">{{ substr($user->name, 0, 1) }}</span>
            </div>
            <div>
                <span class="block text-sm font-bold text-gray-900">{{ $user->name }}</span>
                <span class="block text-[10px] text-gray-500 uppercase font-bold tracking-wider">
                    @if($isAdmin)
                        Administrateur
                    @elseif($isTeacher)
                        Enseignant
                    @else
                        Étudiant
                    @endif
                </span>
            </div>
        </div>
    </div>
</header>