<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'My Courses') — {{ config('app.name') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />

    <!-- FontAwesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Alpine.js cloak -->
    <style>[x-cloak] { display: none !important; }</style>

    <!-- Vite assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    @stack('styles')
</head>
<body class="antialiased bg-gray-50 font-sans">

    {{-- ===================================================================
         TRAINEE DASHBOARD HEADER
    =================================================================== --}}
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                {{-- Left: Organization Logo/Name + Course Catalogue --}}
                <div class="flex items-center gap-6">
                    {{-- Organization Brand --}}
                    <a href="#" class="flex items-center gap-2 flex-shrink-0">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center text-white font-bold">
                            @if($organization)
                                {{ strtoupper(substr($organization->short_name ?? $organization->name, 0, 1)) }}
                            @else
                                M
                            @endif
                        </div>
                        <div class="hidden sm:block">
                            <p class="text-sm font-bold text-gray-900">
                                {{ $organization?->name ?? config('app.name') }}
                            </p>
                            <p class="text-xs text-gray-500">Learning Portal</p>
                        </div>
                    </a>

                    {{-- Course Catalogue Link --}}
                    <a href="{{ route('self-paced.public.index') }}"
                       class="hidden md:inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600 transition">
                        <i class="fas fa-compass"></i>
                        Course Catalogue
                    </a>

                    {{-- Verify Certificate Link --}}
                    <a href="{{ route('self-paced.public.verify') }}"
                       class="hidden md:inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600 transition">
                        <i class="fas fa-certificate"></i>
                        Verify Certificate
                    </a>
                </div>

                {{-- Right: Notifications + Profile Menu --}}
                <div class="flex items-center gap-4">
                    {{-- Notifications Bell --}}
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false"
                                class="relative p-2 text-gray-600 hover:text-indigo-600 transition rounded-lg hover:bg-gray-100">
                            <i class="fas fa-bell text-lg"></i>
                            @php
                                $notificationCount = 0;
                                // This would count pending approvals, enrolments, payments, certificates
                            @endphp
                            @if($notificationCount > 0)
                                <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">
                                    {{ $notificationCount }}
                                </span>
                            @endif
                        </button>

                        {{-- Notifications Dropdown --}}
                        <div x-show="open" x-transition
                             class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                            <div class="p-4 border-b border-gray-100">
                                <h3 class="font-semibold text-gray-900">Notifications</h3>
                            </div>
                            <div class="max-h-96 overflow-y-auto">
                                {{-- Approved Registrations --}}
                                {{-- Enrolments --}}
                                {{-- Payment Confirmations --}}
                                {{-- Certificate Ready --}}
                                <div class="p-4 text-center text-sm text-gray-500">
                                    No new notifications
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- User Profile Menu --}}
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false"
                                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white text-sm font-semibold">
                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                            </div>
                            <div class="hidden sm:block text-left">
                                <p class="text-sm font-medium text-gray-900">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500">Trainee</p>
                            </div>
                            <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                        </button>

                        {{-- Profile Dropdown Menu --}}
                        <div x-show="open" x-transition
                             class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                            <div class="p-4 border-b border-gray-100">
                                <p class="text-sm font-semibold text-gray-900">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500">{{ Auth::user()->email }}</p>
                            </div>
                            <div class="p-2">
                                <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition">
                                    <i class="fas fa-user text-gray-400"></i> My Profile
                                </a>
                                <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition">
                                    <i class="fas fa-cog text-gray-400"></i> Settings
                                </a>
                                <hr class="my-2">
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition">
                                        <i class="fas fa-sign-out-alt"></i> Logout
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    {{-- ===================================================================
         MAIN CONTENT
    =================================================================== --}}
    <main class="min-h-screen bg-gray-50">
        @yield('content')
    </main>

    {{-- ===================================================================
         SIMPLE FOOTER
    =================================================================== --}}
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <p class="text-sm text-gray-600">
                    &copy; {{ now()->year }} {{ $organization?->name ?? config('app.name') }}. All rights reserved.
                </p>
                <p class="text-sm text-gray-500 mt-4 md:mt-0">
                    Developed by <span class="font-semibold text-gray-700">Gosucess Technologies</span>
                </p>
            </div>
        </div>
    </footer>

    @stack('scripts')
</body>
</html>
