<!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', 'Learning Portal') — {{ 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" x-data="{ sidebarOpen: false }">

    {{-- ===================================================================
         LEARNER PORTAL HEADER — minimal, focused
         Shows: portal brand, course title, progress bar, user menu
    =================================================================== --}}
    <header class="@yield('header-class', 'bg-white') border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-14">
                @php $headerDark = View::yieldContent('header-dark') === 'true'; @endphp

                {{-- Brand + Course Title --}}
                <div class="flex items-center gap-3 min-w-0">
                    <a href="{{ route('self-paced.public.index') }}"
                       class="flex-shrink-0 flex items-center gap-2 font-bold text-sm transition {{ $headerDark ? 'text-white hover:text-indigo-100' : 'text-indigo-700 hover:text-indigo-900' }}">
                        <span class="w-7 h-7 rounded-lg flex items-center justify-center {{ $headerDark ? 'bg-white/20' : 'bg-indigo-100' }}">
                            <i class="fas fa-graduation-cap text-xs {{ $headerDark ? 'text-white' : 'text-indigo-600' }}"></i>
                        </span>
                        <span class="hidden sm:block">Self-Paced Portal</span>
                    </a>

                    @hasSection('course-title')
                        <span class="{{ $headerDark ? 'text-white/40' : 'text-gray-300' }} hidden sm:block">|</span>
                        <span class="text-sm font-semibold truncate max-w-[200px] md:max-w-xs hidden sm:block {{ $headerDark ? 'text-white' : 'text-gray-700' }}">
                            @yield('course-title')
                        </span>
                    @endif
                </div>

                {{-- Phase Breadcrumb — desktop --}}
                @hasSection('current-phase')
                <nav class="hidden md:flex items-center gap-1 text-xs font-medium" aria-label="Learning phases">
                    @php $phase = (int) View::yieldContent('current-phase', '1'); @endphp

                    {{-- Phase 1: Overview --}}
                    <span class="flex items-center gap-1 px-2.5 py-1 rounded-full
                        {{ $phase === 1 ? 'bg-indigo-600 text-white' : ($phase > 1 ? ($headerDark ? 'bg-white/20 text-white' : 'bg-green-100 text-green-700') : ($headerDark ? 'bg-white/10 text-white/60' : 'bg-gray-100 text-gray-400')) }}">
                        @if($phase > 1)
                            <i class="fas fa-check text-[10px]"></i>
                        @else
                            <span class="w-3.5 h-3.5 rounded-full border-2 {{ $phase === 1 ? 'border-white bg-white/30' : ($headerDark ? 'border-white/40' : 'border-gray-300') }} inline-block"></span>
                        @endif
                        Overview
                    </span>

                    <i class="fas fa-chevron-right text-[10px] {{ $headerDark ? 'text-white/40' : 'text-gray-300' }}"></i>

                    {{-- Phase 2: Content --}}
                    <span class="flex items-center gap-1 px-2.5 py-1 rounded-full
                        {{ $phase === 2 ? 'bg-white/20 text-white' : ($phase > 2 ? ($headerDark ? 'bg-white/20 text-white' : 'bg-green-100 text-green-700') : ($headerDark ? 'bg-white/10 text-white/60' : 'bg-gray-100 text-gray-400')) }}">
                        @if($phase > 2)
                            <i class="fas fa-check text-[10px]"></i>
                        @else
                            <span class="w-3.5 h-3.5 rounded-full border-2 {{ $phase === 2 ? 'border-white bg-white/30' : ($headerDark ? 'border-white/40' : 'border-gray-300') }} inline-block"></span>
                        @endif
                        Content
                    </span>

                    <i class="fas fa-chevron-right text-[10px] {{ $headerDark ? 'text-white/40' : 'text-gray-300' }}"></i>

                    {{-- Phase 3: Exam --}}
                    <span class="flex items-center gap-1 px-2.5 py-1 rounded-full
                        {{ $phase === 3 ? 'bg-indigo-600 text-white' : ($phase > 3 ? ($headerDark ? 'bg-white/20 text-white' : 'bg-green-100 text-green-700') : ($headerDark ? 'bg-white/10 text-white/60' : 'bg-gray-100 text-gray-400')) }}">
                        @if($phase > 3)
                            <i class="fas fa-check text-[10px]"></i>
                        @else
                            <span class="w-3.5 h-3.5 rounded-full border-2 {{ $phase === 3 ? 'border-white bg-white/30' : ($headerDark ? 'border-white/40' : 'border-gray-300') }} inline-block"></span>
                        @endif
                        Exam
                    </span>

                    <i class="fas fa-chevron-right text-[10px] {{ $headerDark ? 'text-white/40' : 'text-gray-300' }}"></i>

                    {{-- Phase 4: Results --}}
                    <span class="flex items-center gap-1 px-2.5 py-1 rounded-full
                        {{ $phase === 4 ? 'bg-indigo-600 text-white' : ($headerDark ? 'bg-white/10 text-white/60' : 'bg-gray-100 text-gray-400') }}">
                        <span class="w-3.5 h-3.5 rounded-full border-2 {{ $phase === 4 ? 'border-white bg-white/30' : ($headerDark ? 'border-white/40' : 'border-gray-300') }} inline-block"></span>
                        Results
                    </span>
                </nav>
                @endif

                {{-- Right: progress + user --}}
                <div class="flex items-center gap-3 flex-shrink-0">

                    {{-- Progress percentage badge --}}
                    @hasSection('progress-percentage')
                    <div class="hidden sm:flex items-center gap-2">
                        <div class="w-24 h-2 rounded-full overflow-hidden {{ $headerDark ? 'bg-white/20' : 'bg-gray-200' }}">
                            <div class="h-full bg-indigo-500 rounded-full transition-all duration-500 {{ $headerDark ? '!bg-white/70' : '' }}"
                                 style="width: {{ min(100, (float) View::yieldContent('progress-percentage', '0')) }}%"></div>
                        </div>
                        <span class="text-xs font-semibold {{ $headerDark ? 'text-white' : 'text-indigo-700' }}">
                            {{ number_format((float) View::yieldContent('progress-percentage', '0'), 0) }}%
                        </span>
                    </div>
                    @endif

                    {{-- User avatar + dropdown --}}
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open"
                                class="flex items-center gap-1.5 px-2 py-1.5 rounded-lg transition {{ $headerDark ? 'hover:bg-white/10 text-white' : 'hover:bg-gray-100 text-gray-700' }}">
                            <span class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold {{ $headerDark ? 'bg-white/20 text-white' : 'bg-indigo-100 text-indigo-700' }}">
                                {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                            </span>
                            <span class="hidden md:block text-sm font-medium max-w-[100px] truncate">
                                {{ auth()->user()->name ?? 'Learner' }}
                            </span>
                            <i class="fas fa-chevron-down text-xs {{ $headerDark ? 'text-white/60' : 'text-gray-400' }}"></i>
                        </button>

                        <div x-show="open"
                             @click.outside="open = false"
                             x-transition
                             class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-100 py-1 z-50">
                            <div class="px-4 py-2 border-b border-gray-100">
                                <p class="text-xs font-semibold text-gray-800 truncate">{{ auth()->user()->name }}</p>
                                <p class="text-xs text-gray-400 truncate">{{ auth()->user()->email }}</p>
                            </div>
                            <a href="{{ route('self-paced.learn.my-courses') }}"
                               class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">
                                <i class="fas fa-th-large w-4 text-gray-400"></i> My Courses
                            </a>
                            <a href="{{ route('profile.edit') }}"
                               class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">
                                <i class="fas fa-user-circle w-4 text-gray-400"></i> Profile
                            </a>
                            <form method="POST" action="{{ route('logout') }}">
                                @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 transition">
                                    <i class="fas fa-sign-out-alt w-4"></i> Logout
                                </button>
                            </form>
                        </div>
                    </div>

                    {{-- Mobile sidebar toggle (for content phase) --}}
                    @hasSection('has-sidebar')
                    <button @click="sidebarOpen = !sidebarOpen"
                            class="md:hidden p-2 rounded-md transition {{ $headerDark ? 'text-white hover:bg-white/10' : 'text-gray-500 hover:bg-gray-100' }}"
                            aria-label="Toggle navigation">
                        <i class="fas fa-bars" x-show="!sidebarOpen"></i>
                        <i class="fas fa-times" x-show="sidebarOpen" x-cloak></i>
                    </button>
                    @endif
                </div>
            </div>
        </div>

        {{-- Progress bar — full width strip below header --}}
        @hasSection('progress-percentage')
        <div class="h-1 bg-gray-100 w-full">
            <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 transition-all duration-700"
                 style="width: {{ min(100, (float) View::yieldContent('progress-percentage', '0')) }}%"></div>
        </div>
        @endif
    </header>

    {{-- ===================================================================
         FLASH MESSAGES
    =================================================================== --}}
    @if(session('success') || session('error') || session('warning') || session('info'))
        <div class="w-full px-4 sm:px-6 lg:px-8 pt-4">
            @if(session('success'))
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-check-circle text-green-500"></i>
                    <span class="text-sm flex-1">{{ session('success') }}</span>
                    <button @click="show = false" class="text-green-400 hover:text-green-600"><i class="fas fa-times"></i></button>
                </div>
            @endif
            @if(session('error'))
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-red-50 border border-red-200 text-red-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                    <span class="text-sm flex-1">{{ session('error') }}</span>
                    <button @click="show = false" class="text-red-400 hover:text-red-600"><i class="fas fa-times"></i></button>
                </div>
            @endif
            @if(session('warning'))
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-amber-50 border border-amber-200 text-amber-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-exclamation-triangle text-amber-500"></i>
                    <span class="text-sm flex-1">{{ session('warning') }}</span>
                    <button @click="show = false" class="text-amber-400 hover:text-amber-600"><i class="fas fa-times"></i></button>
                </div>
            @endif
            @if(session('info'))
                <div x-data="{ show: true }" x-show="show" x-transition
                     class="flex items-center gap-3 bg-blue-50 border border-blue-200 text-blue-800 rounded-lg px-4 py-3 mb-2">
                    <i class="fas fa-info-circle text-blue-500"></i>
                    <span class="text-sm flex-1">{{ session('info') }}</span>
                    <button @click="show = false" class="text-blue-400 hover:text-blue-600"><i class="fas fa-times"></i></button>
                </div>
            @endif
        </div>
    @endif

    {{-- ===================================================================
         MAIN CONTENT
         Views that need a sidebar (Phase 2) use @section('has-sidebar')
         and render their own two-column layout inside @section('content').
         All other phases use the centred single-column container.
    =================================================================== --}}
    <main class="min-h-screen">
        @yield('content')
    </main>

    {{-- ===================================================================
         FOOTER — minimal, just copyright
    =================================================================== --}}
    <footer class="border-t border-gray-200 @yield('footer-class', 'bg-white') mt-8">
        @php $footerDark = View::yieldContent('footer-class') !== ''; @endphp
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row items-center justify-between gap-2">
            <p class="text-xs {{ $footerDark ? 'text-white/60' : 'text-gray-400' }}">
                &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
            </p>
            <div class="flex items-center gap-4 text-xs {{ $footerDark ? 'text-white/60' : 'text-gray-400' }}">
                <a href="{{ route('self-paced.public.index') }}" class="hover:{{ $footerDark ? 'text-white' : 'text-indigo-600' }} transition">Course Catalogue</a>
                <a href="{{ route('self-paced.public.verify') }}" class="hover:{{ $footerDark ? 'text-white' : 'text-indigo-600' }} transition">Verify Certificate</a>
            </div>
        </div>
    </footer>

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