@props(['user' => null])

@php
    $user = $user ?? auth()->user();
    $role = $user?->role ?? 'guest';

    // Get unassigned mothers count for clinic admin
    $unassignedMothersCount = 0;
    if ($role === 'clinic_admin' && $user && $user->clinic_id) {
        $unassignedMothersCount = \App\Models\ExpectantMother::where('clinic_id', $user->clinic_id)
            ->whereDoesntHave('currentAssignment')
            ->count();
    }

    // Get pending clinic change requests count for clinic admin
    $pendingClinicChangeRequestsCount = 0;
    if ($role === 'clinic_admin' && $user && $user->clinic_id) {
        $pendingClinicChangeRequestsCount = \App\Models\ClinicChangeRequest::where(function($query) use ($user) {
                $query->where('current_clinic_id', $user->clinic_id)
                      ->orWhere('requested_clinic_id', $user->clinic_id);
            })
            ->where('status', 'PENDING')
            ->count();
    }
    
    // Define navigation items for each role
    $navigationItems = [
        'expectant_mother' => [
            'dashboard' => [
                'label' => 'Dashboard',
                'route' => 'dashboard.mother',
                'active' => 'dashboard.mother',
                'icon' => 'fas fa-tachometer-alt'
            ],
            'appointments' => [
                'label' => 'Appointment',
                'route' => 'appointments',
                'active' => 'appointments',
                'icon' => 'fas fa-user-nurse'
            ],
            'health_records' => [
                'label' => 'My Health Records',
                'route' => 'mother.health-records.index',
                'active' => 'mother.health-records.*',
                'icon' => 'fas fa-file-medical'
            ],
            'color_code_history' => [
                'label' => 'Risk Level',
                'route' => 'mother.color-code.history',
                'active' => 'mother.color-code.history',
                'icon' => 'fas fa-exclamation-triangle'
            ],
            'kick_hiccup' => [
                'label' => 'Kick Hiccup Tracker',
                'route' => 'kick-hiccup-tracker',
                'active' => 'kick-hiccup-tracker',
                'icon' => 'fas fa-baby'
            ],
            'profile' => [
                'label' => 'Profile',
                'route' => 'profile',
                'active' => 'profile*',
                'icon' => 'fas fa-user-circle'
            ]
        ],
        'nurse' => [
            'dashboard' => [
                'label' => 'Dashboard',
                'route' => 'dashboard.nurse',
                'active' => 'dashboard.nurse',
                'icon' => 'fas fa-tachometer-alt'
            ],
            'appointments' => [
                'label' => 'Appointments',
                'route' => 'nurse.appointments',
                'active' => 'nurse.appointments*',
                'icon' => 'fas fa-calendar-check'
            ],
            'color_code_management' => [
                'label' => 'Color Code Management',
                'route' => 'color-code.management',
                'active' => 'color-code.*',
                'icon' => 'fas fa-palette'
            ],
            'health_records' => [
                'label' => 'Health Records',
                'route' => 'nurse.health-records.index',
                'active' => 'nurse.health-records.*',
                'icon' => 'fas fa-file-medical'
            ],
            'kick_hiccup' => [
                'label' => 'Kick Hiccup Tracker',
                'route' => 'nurse.kick-hiccup-tracker',
                'active' => 'nurse.kick-hiccup-tracker*',
                'icon' => 'fas fa-baby'
            ],
            'profile' => [
                'label' => 'Profile',
                'route' => 'nurse.profile',
                'active' => 'nurse.profile*',
                'icon' => 'fas fa-user-circle'
            ]
        ],
        'clinic_admin' => [
            'dashboard' => [
                'label' => 'Dashboard',
                'route' => 'dashboard.clinic-admin',
                'active' => 'dashboard.clinic-admin',
                'icon' => 'fas fa-tachometer-alt'
            ],
            'nurse_management' => [
                'label' => 'Nurse Management',
                'route' => 'clinic-admin.nurse-management',
                'active' => 'clinic-admin.nurse-management*',
                'icon' => 'fas fa-user-nurse'
            ],
            'zone_management' => [
                'label' => 'Zone Management',
                'route' => 'clinic-admin.zone-management',
                'active' => 'clinic-admin.zone-management*',
                'icon' => 'fas fa-map-marked-alt'
            ],
            'duty_management' => [
                'label' => 'Duty Management',
                'route' => 'clinic-admin.duty-management',
                'active' => 'clinic-admin.duty-management*',
                'icon' => 'fas fa-calendar-alt',
                'submenu' => [
                    'duty_roster' => [
                        'label' => 'Duty Roster',
                        'route' => 'clinic-admin.duty-management',
                        'active' => 'clinic-admin.duty-management',
                        'icon' => 'fas fa-calendar-alt'
                    ],
                    'duty_history' => [
                        'label' => 'Duty History',
                        'route' => 'clinic-admin.duty-history',
                        'active' => 'clinic-admin.duty-history',
                        'icon' => 'fas fa-history'
                    ]
                ]
            ],
            'mother_management' => [
                'label' => 'Mother Management',
                'route' => 'clinic-admin.mother-management',
                'active' => 'clinic-admin.mother-management*',
                'icon' => 'fas fa-female',
                'submenu' => [
                    'mothers' => [
                        'label' => 'Registered Mothers',
                        'route' => 'clinic-admin.mother-management',
                        'active' => 'clinic-admin.mother-management',
                        'icon' => 'fas fa-list'
                    ],
                    'clinic_change_requests' => [
                        'label' => 'Clinic Change Requests',
                        'route' => 'clinic-admin.clinic-change-requests.index',
                        'active' => 'clinic-admin.clinic-change-requests.*',
                        'icon' => 'fas fa-exchange-alt'
                    ]
                ]
            ],
            'appointments' => [
                'label' => 'Appointments',
                'route' => 'clinic-admin.appointments',
                'active' => 'clinic-admin.appointments*',
                'icon' => 'fas fa-calendar-check',
                'dropdown' => [
                    'quota' => [
                        'label' => 'Quota Management',
                        'route' => 'clinic-admin.appointments',
                        'active' => 'clinic-admin.appointments',
                        'icon' => 'fas fa-sliders-h'
                    ],
                    'view' => [
                        'label' => 'View Appointments',
                        'route' => 'clinic-admin.appointments.index',
                        'active' => 'clinic-admin.appointments.index',
                        'icon' => 'fas fa-list'
                    ]
                ]
            ],
            'profile' => [
                'label' => 'Profile',
                'route' => 'clinic-admin.profile',
                'active' => 'clinic-admin.profile*',
                'icon' => 'fas fa-user-circle'
            ]
        ],
        'head_nurse' => [
            'dashboard' => [
                'label' => 'Dashboard',
                'route' => 'dashboard.head-nurse',
                'active' => 'dashboard.head-nurse',
                'icon' => 'fas fa-tachometer-alt'
            ],
            'clinic_admin_management' => [
                'label' => 'Clinic Admins',
                'route' => 'head-nurse.clinic-admin-management',
                'active' => 'head-nurse.clinic-admin-management*',
                'icon' => 'fas fa-user-tie'
            ],
            'report_management' => [
                'label' => 'Report Management',
                'route' => 'head-nurse.reports',
                'active' => 'head-nurse.reports*',
                'icon' => 'fas fa-chart-line'
            ],
            'profile' => [
                'label' => 'Profile',
                'route' => 'head-nurse.profile',
                'active' => 'head-nurse.profile*',
                'icon' => 'fas fa-user-circle'
            ]
        ],
        'guest' => [
            'dashboard' => [
                'label' => 'Dashboard',
                'route' => 'dashboard',
                'active' => 'dashboard',
                'icon' => 'fas fa-tachometer-alt'
            ],
            'profile' => [
                'label' => 'Profile',
                'route' => 'profile',
                'active' => 'profile*',
                'icon' => 'fas fa-user-circle'
            ]
        ]
    ];
    
    // Get navigation items for current user role
    $navItems = $navigationItems[$role] ?? $navigationItems['guest'];
    
    // Get dashboard route based on role
    $dashboardRoute = match($role) {
        'expectant_mother' => 'dashboard.mother',
        'nurse' => 'dashboard.nurse',
        'head_nurse' => 'dashboard.head-nurse',
        'clinic_admin' => 'dashboard.clinic-admin',
        default => 'dashboard'
    };

    // Get navbar background color based on role
    $navbarBg = match($role) {
        'clinic_admin' => '',
        'head_nurse' => '',
        'expectant_mother' => 'accent-bg',
        'nurse' => '',
        default => 'bg-gradient-to-r from-pink-600 to-purple-600'
    };

    // Get navbar style for all roles with inline styles
    $navbarStyle = match($role) {
        'clinic_admin' => 'background-color: #654133;',
        'head_nurse' => 'background: linear-gradient(135deg, #7B5BA1 0%, #5E4075 100%);',
        'nurse' => 'background: linear-gradient(135deg, #CD7A98 0%, #94426A 100%);',
        default => ''
    };
@endphp

<nav class="fixed top-0 left-0 right-0 z-50 {{ $navbarBg }} backdrop-blur-lg shadow-xl" style="{{ $navbarStyle }}">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <a href="{{ route($dashboardRoute) }}" class="flex items-center space-x-3 group">
                <div class="h-12 w-12 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-300 transform group-hover:scale-105" style="background-color: rgba(216, 149, 177, 0.3);">
                    <img src="{{ asset('images/logo.jpeg') }}" alt="BondaCare Logo" class="h-9 w-9 rounded-lg object-cover">
                </div>
                <span class="text-xl font-bold text-white drop-shadow-lg tracking-wide">BondaCare</span>
            </a>

            <!-- Desktop Navigation Links -->
            <div class="hidden md:flex items-center space-x-1">
                @foreach($navItems as $key => $item)
                    @if($item['route'] !== '#')
                        <a href="{{ route($item['route']) }}"
                           class="relative px-4 py-2.5 rounded-full text-white hover:text-white transition-all duration-300 font-semibold flex items-center gap-2 {{ request()->routeIs($item['active']) ? 'text-white shadow-lg' : 'text-white/80' }}"
                           style="{{ request()->routeIs($item['active']) ? 'background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); backdrop-filter: blur(10px);' : '' }}"
                           onmouseover="if(!this.classList.contains('{{ request()->routeIs($item['active']) ? 'active' : '' }}')) { this.style.background='linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)'; this.style.backdropFilter='blur(10px)'; }"
                           onmouseout="if(!this.classList.contains('{{ request()->routeIs($item['active']) ? 'active' : '' }}')) { this.style.background=''; this.style.backdropFilter=''; }">
                            <i class="{{ $item['icon'] }} text-sm"></i>
                            <span>{{ $item['label'] }}</span>
                            @if($key === 'mother_management' && $role === 'clinic_admin')
                                @if($unassignedMothersCount > 0)
                                    <span class="px-2 py-0.5 text-white text-xs font-bold rounded-full animate-pulse shadow-md" style="background-color: #D895B1;">
                                        {{ $unassignedMothersCount }}
                                    </span>
                                @endif
                                @if($pendingClinicChangeRequestsCount > 0)
                                    <span class="px-2 py-0.5 text-white text-xs font-bold rounded-full animate-pulse shadow-md" style="background-color: #F59E0B;">
                                        {{ $pendingClinicChangeRequestsCount }}
                                    </span>
                                @endif
                            @endif
                        </a>
                    @else
                        <span class="px-4 py-2.5 rounded-full font-semibold cursor-not-allowed flex items-center gap-2 opacity-40">
                            <i class="{{ $item['icon'] }} text-sm"></i>
                            <span>{{ $item['label'] }}</span>
                        </span>
                    @endif
                @endforeach

                <!-- User Dropdown Menu -->
                @auth
                    @php
                        // Get role display info
                        $roleInfo = match($role) {
                            'expectant_mother' => ['icon' => 'fas fa-user-nurse', 'label' => 'Expectant Mother', 'color' => '#850E35'],
                            'nurse' => ['icon' => 'fas fa-user-md', 'label' => 'Nurse', 'color' => '#CD7A98'],
                            'head_nurse' => ['icon' => 'fas fa-user-shield', 'label' => 'Head Nurse', 'color' => '#7B5BA1'],
                            'clinic_admin' => ['icon' => 'fas fa-user-tie', 'label' => 'Clinic Admin', 'color' => '#654133'],
                            default => ['icon' => 'fas fa-user', 'label' => 'User', 'color' => '#4A5568']
                        };

                        // Get user's full name
                        $fullName = match($role) {
                            'expectant_mother' => $user->expectantMother->mother_full_name ?? $user->name,
                            default => $user->name
                        };

                        // Get user initials (first letter of first and last name)
                        $nameParts = explode(' ', $fullName);
                        $initials = '';
                        if (count($nameParts) >= 2) {
                            $initials = strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[count($nameParts) - 1], 0, 1));
                        } else {
                            $initials = strtoupper(substr($fullName, 0, 2));
                        }

                        // Get last login time
                        $lastLogin = $user->last_login_at
                            ? $user->last_login_at->timezone('Asia/Kuala_Lumpur')->format('M j, g:i A')
                            : 'First login';
                    @endphp

                    @if($role === 'head_nurse')
                        <!-- Simple Logout Button for Head Nurse -->
                        <form method="POST" action="{{ route('logout') }}" class="inline">
                            @csrf
                            <button type="submit"
                                    class="px-4 py-2 rounded-full text-white font-semibold flex items-center gap-2 shadow-md hover:shadow-lg transition-all duration-300"
                                    style="background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);"
                                    onmouseover="this.style.background='linear-gradient(135deg, #DC2626 0%, #B91C1C 100%)';"
                                    onmouseout="this.style.background='linear-gradient(135deg, #EF4444 0%, #DC2626 100%)';">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>Logout</span>
                            </button>
                        </form>
                    @else
                        <!-- User Dropdown for Other Roles -->
                        <div class="relative" x-data="{ open: false }" @click.away="open = false">
                        <!-- Dropdown Trigger Button -->
                        <button @click="open = !open"
                                class="px-3 py-2 rounded-full text-white font-semibold flex items-center gap-2 shadow-md hover:shadow-lg transition-all duration-300"
                                style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(10px);"
                                onmouseover="this.style.background='linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%)';"
                                onmouseout="this.style.background='linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)';">
                            <!-- User Avatar with Initials -->
                            <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-sm font-bold">
                                {{ $initials }}
                            </div>
                            <!-- Dropdown Arrow -->
                            <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
                        </button>

                        <!-- Dropdown Menu -->
                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 transform scale-95"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 transform scale-100"
                             x-transition:leave-end="opacity-0 transform scale-95"
                             class="absolute right-0 mt-3 w-72 bg-white rounded-2xl shadow-2xl overflow-hidden z-50 border border-gray-100"
                             style="display: none;">

                            <!-- User Info Section -->
                            <div class="p-5 border-b border-gray-100">
                                <div class="flex items-center gap-3 mb-3">
                                    <!-- Large Avatar -->
                                    <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-lg font-bold shadow-md"
                                         style="background: linear-gradient(135deg, {{ $roleInfo['color'] }} 0%, {{ $roleInfo['color'] }}dd 100%);">
                                        {{ $initials }}
                                    </div>
                                    <!-- Name -->
                                    <div class="flex-1">
                                        <p class="font-bold text-gray-900 text-sm leading-tight">{{ $fullName }}</p>
                                        <p class="text-xs text-gray-500 mt-0.5">{{ $user->email }}</p>
                                    </div>
                                </div>

                                <!-- Role Badge -->
                                <div class="flex items-center gap-2 px-3 py-2 rounded-lg"
                                     style="background: linear-gradient(135deg, {{ $roleInfo['color'] }}15 0%, {{ $roleInfo['color'] }}08 100%);">
                                    <i class="{{ $roleInfo['icon'] }} text-sm" style="color: {{ $roleInfo['color'] }};"></i>
                                    <span class="text-sm font-semibold" style="color: {{ $roleInfo['color'] }};">{{ $roleInfo['label'] }}</span>
                                </div>

                                <!-- Last Login -->
                                <div class="flex items-center gap-2 mt-3 text-xs text-gray-500">
                                    <i class="far fa-clock"></i>
                                    <span>Last login: <strong class="text-gray-700">{{ $lastLogin }}</strong></span>
                                </div>
                            </div>

                            <!-- Logout Button -->
                            <div class="p-3">
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit"
                                            class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white font-semibold transition-all duration-300 shadow-md hover:shadow-lg"
                                            style="background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);"
                                            onmouseover="this.style.background='linear-gradient(135deg, #DC2626 0%, #B91C1C 100%)';"
                                            onmouseout="this.style.background='linear-gradient(135deg, #EF4444 0%, #DC2626 100%)';">
                                        <i class="fas fa-sign-out-alt"></i>
                                        <span>Logout</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endif
                @endauth
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-white/80 hover:text-white p-2 rounded-xl transition-all duration-300"
                        onmouseover="this.style.backgroundColor='rgba(216, 149, 177, 0.2)';"
                        onmouseout="this.style.backgroundColor='';">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden pb-4">
            <div class="space-y-1 mt-2">
                @foreach($navItems as $key => $item)
                    @if($item['route'] !== '#')
                        <a href="{{ route($item['route']) }}"
                           class="flex items-center justify-between px-4 py-3.5 rounded-2xl transition-all duration-300 font-semibold {{ request()->routeIs($item['active']) ? 'text-white shadow-lg' : 'text-white/80' }}"
                           style="{{ request()->routeIs($item['active']) ? 'background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); backdrop-filter: blur(10px);' : '' }}"
                           onmouseover="if(!this.classList.contains('{{ request()->routeIs($item['active']) ? 'active' : '' }}')) { this.style.background='linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)'; this.style.backdropFilter='blur(10px)'; }"
                           onmouseout="if(!this.classList.contains('{{ request()->routeIs($item['active']) ? 'active' : '' }}')) { this.style.background=''; this.style.backdropFilter=''; }">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl flex items-center justify-center {{ request()->routeIs($item['active']) ? 'bg-white/20' : 'bg-white/10' }}">
                                    <i class="{{ $item['icon'] }} {{ request()->routeIs($item['active']) ? 'text-white' : 'text-white/80' }}"></i>
                                </div>
                                <span>{{ $item['label'] }}</span>
                            </div>
                            @if($key === 'mother_management' && $role === 'clinic_admin')
                                @if($unassignedMothersCount > 0)
                                    <span class="px-2 py-0.5 text-white text-xs font-bold rounded-full animate-pulse shadow-md" style="background-color: #D895B1;">
                                        {{ $unassignedMothersCount }}
                                    </span>
                                @endif
                                @if($pendingClinicChangeRequestsCount > 0)
                                    <span class="px-2 py-0.5 text-white text-xs font-bold rounded-full animate-pulse shadow-md" style="background-color: #F59E0B;">
                                        {{ $pendingClinicChangeRequestsCount }}
                                    </span>
                                @endif
                            @endif
                        </a>
                    @else
                        <span class="flex items-center gap-3 px-4 py-3.5 rounded-2xl font-semibold cursor-not-allowed opacity-40">
                            <div class="w-9 h-9 rounded-xl flex items-center justify-center bg-white/5">
                                <i class="{{ $item['icon'] }}"></i>
                            </div>
                            <span>{{ $item['label'] }}</span>
                        </span>
                    @endif
                @endforeach

                <!-- Mobile User Info & Logout -->
                @auth
                    @php
                        // Get role display info
                        $roleInfoMobile = match($role) {
                            'expectant_mother' => ['icon' => 'fas fa-user-nurse', 'label' => 'Expectant Mother', 'color' => '#850E35'],
                            'nurse' => ['icon' => 'fas fa-user-md', 'label' => 'Nurse', 'color' => '#CD7A98'],
                            'head_nurse' => ['icon' => 'fas fa-user-shield', 'label' => 'Head Nurse', 'color' => '#7B5BA1'],
                            'clinic_admin' => ['icon' => 'fas fa-user-tie', 'label' => 'Clinic Admin', 'color' => '#654133'],
                            default => ['icon' => 'fas fa-user', 'label' => 'User', 'color' => '#4A5568']
                        };

                        // Get user's full name
                        $fullNameMobile = match($role) {
                            'expectant_mother' => $user->expectantMother->mother_full_name ?? $user->name,
                            default => $user->name
                        };

                        // Get user initials
                        $namePartsMobile = explode(' ', $fullNameMobile);
                        $initialsMobile = '';
                        if (count($namePartsMobile) >= 2) {
                            $initialsMobile = strtoupper(substr($namePartsMobile[0], 0, 1) . substr($namePartsMobile[count($namePartsMobile) - 1], 0, 1));
                        } else {
                            $initialsMobile = strtoupper(substr($fullNameMobile, 0, 2));
                        }

                        // Get last login time
                        $lastLoginMobile = $user->last_login_at
                            ? $user->last_login_at->timezone('Asia/Kuala_Lumpur')->format('M j, g:i A')
                            : 'First login';
                    @endphp

                    @if($role === 'head_nurse')
                        <!-- Simple Logout Button for Head Nurse (Mobile) -->
                        <div class="px-4 py-4 mt-3" style="border-top: 1px solid rgba(255, 255, 255, 0.1);">
                            <form method="POST" action="{{ route('logout') }}" class="w-full">
                                @csrf
                                <button type="submit" class="flex items-center justify-center gap-3 w-full px-4 py-3.5 rounded-2xl text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300"
                                        style="background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);"
                                        onmouseover="this.style.background='linear-gradient(135deg, #DC2626 0%, #B91C1C 100%)';"
                                        onmouseout="this.style.background='linear-gradient(135deg, #EF4444 0%, #DC2626 100%)';">
                                    <i class="fas fa-sign-out-alt"></i>
                                    <span>Logout</span>
                                </button>
                            </form>
                        </div>
                    @else
                        <!-- User Info & Logout for Other Roles (Mobile) -->
                        <div class="px-4 py-4 mt-3" style="border-top: 1px solid rgba(255, 255, 255, 0.1);">
                        <!-- User Info Card -->
                        <div class="mb-3 p-4 rounded-2xl bg-white/10 backdrop-blur-md">
                            <div class="flex items-center gap-3 mb-3">
                                <!-- Avatar -->
                                <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-lg font-bold shadow-md"
                                     style="background: linear-gradient(135deg, {{ $roleInfoMobile['color'] }} 0%, {{ $roleInfoMobile['color'] }}dd 100%);">
                                    {{ $initialsMobile }}
                                </div>
                                <!-- Name & Email -->
                                <div class="flex-1">
                                    <p class="font-bold text-white text-sm leading-tight">{{ $fullNameMobile }}</p>
                                    <p class="text-xs text-white/70 mt-0.5">{{ $user->email }}</p>
                                </div>
                            </div>

                            <!-- Role Badge -->
                            <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/10 mb-2">
                                <i class="{{ $roleInfoMobile['icon'] }} text-sm text-white"></i>
                                <span class="text-sm font-semibold text-white">{{ $roleInfoMobile['label'] }}</span>
                            </div>

                            <!-- Last Login -->
                            <div class="flex items-center gap-2 text-xs text-white/70">
                                <i class="far fa-clock"></i>
                                <span>Last login: <strong class="text-white/90">{{ $lastLoginMobile }}</strong></span>
                            </div>
                        </div>

                        <!-- Logout Button -->
                        <form method="POST" action="{{ route('logout') }}" class="w-full">
                            @csrf
                            <button type="submit" class="flex items-center justify-center gap-3 w-full px-4 py-3.5 rounded-2xl text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300"
                                    style="background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);"
                                    onmouseover="this.style.background='linear-gradient(135deg, #DC2626 0%, #B91C1C 100%)';"
                                    onmouseout="this.style.background='linear-gradient(135deg, #EF4444 0%, #DC2626 100%)';">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>Logout</span>
                            </button>
                        </form>
                    </div>
                    @endif
                @endauth
            </div>
        </div>
    </div>
</nav>

<!-- Spacer to prevent content overlap with fixed navbar -->
<div class="h-16 w-full"></div>

<!-- Mobile Menu Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
                
                // Change icon to close when menu is open
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenuButton.innerHTML = `
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    `;
                } else {
                    mobileMenuButton.innerHTML = `
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    `;
                }
            });
        }
    });
</script>