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

    <title><?php echo $__env->yieldContent('title', 'Self-Paced Learning Portal'); ?> — <?php echo e(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 -->
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="antialiased bg-gray-50 font-sans" x-data="{ mobileMenuOpen: false }">

    
    <header class="bg-indigo-700 shadow-lg sticky top-0 z-50">
        <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">

                
                <div class="flex items-center gap-3 flex-shrink-0">
                    <a href="<?php echo e(route('self-paced.dashboard.index')); ?>" class="flex items-center gap-2 text-white font-bold text-lg hover:text-indigo-200 transition">
                        <span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
                            <i class="fas fa-graduation-cap text-white text-sm"></i>
                        </span>
                        <span class="hidden sm:block">Self-Paced Portal</span>
                    </a>
                </div>

                
                <nav class="hidden lg:flex items-center gap-1">
                    <a href="<?php echo e(route('self-paced.dashboard.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.index') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-home mr-1.5"></i>Dashboard
                    </a>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced courses')): ?>
                    <a href="<?php echo e(route('self-paced.dashboard.courses.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.courses.*') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-book-open mr-1.5"></i>Courses
                    </a>
                    <?php endif; ?>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced exams')): ?>
                    <a href="<?php echo e(route('self-paced.dashboard.exams.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.exams.*') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-clipboard-question mr-1.5"></i>Exams
                    </a>
                    <?php endif; ?>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced enrollments')): ?>
                    <a href="<?php echo e(route('self-paced.dashboard.enrollments.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.enrollments.*') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-users mr-1.5"></i>Enrollments
                    </a>
                    <?php endif; ?>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced results')): ?>
                    <a href="<?php echo e(route('self-paced.dashboard.results.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.results.*') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-chart-bar mr-1.5"></i>Results
                    </a>
                    <?php endif; ?>
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced certificates')): ?>
                    <a href="<?php echo e(route('self-paced.dashboard.certificates.index')); ?>"
                       class="px-3 py-2 rounded-md text-sm font-medium text-indigo-100 hover:bg-indigo-600 hover:text-white transition <?php echo e(request()->routeIs('self-paced.dashboard.certificates.*') ? 'bg-indigo-800 text-white' : ''); ?>">
                        <i class="fas fa-certificate mr-1.5"></i>Certificates
                    </a>
                    <?php endif; ?>
                </nav>

                
                <div class="flex items-center gap-3">

                    
                    <a href="<?php echo e(route('dashboard')); ?>"
                       class="hidden sm:flex items-center gap-1.5 px-3 py-1.5 bg-white/10 hover:bg-white/20 text-white text-xs font-medium rounded-lg transition">
                        <i class="fas fa-arrow-left"></i>
                        <span>Main Dashboard</span>
                    </a>

                    
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open"
                                class="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-indigo-600 transition text-white">
                            <span class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-xs font-bold">
                                <?php echo e(strtoupper(substr(auth()->user()->name ?? 'U', 0, 1))); ?>

                            </span>
                            <span class="hidden md:block text-sm font-medium max-w-[120px] truncate">
                                <?php echo e(auth()->user()->name ?? 'User'); ?>

                            </span>
                            <i class="fas fa-chevron-down text-xs opacity-70"></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"><?php echo e(auth()->user()->name); ?></p>
                                <p class="text-xs text-gray-400 truncate"><?php echo e(auth()->user()->email); ?></p>
                            </div>
                            <a href="<?php echo e(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="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <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>

                    
                    <button @click="mobileMenuOpen = !mobileMenuOpen"
                            class="lg:hidden p-2 rounded-md text-indigo-100 hover:bg-indigo-600 transition">
                        <i class="fas fa-bars" x-show="!mobileMenuOpen"></i>
                        <i class="fas fa-times" x-show="mobileMenuOpen" x-cloak></i>
                    </button>
                </div>
            </div>
        </div>

        
        <div x-show="mobileMenuOpen" x-cloak x-transition class="lg:hidden border-t border-indigo-600 bg-indigo-800">
            <div class="px-4 py-3 space-y-1">
                <a href="<?php echo e(route('self-paced.dashboard.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-home w-4"></i>Dashboard
                </a>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced courses')): ?>
                <a href="<?php echo e(route('self-paced.dashboard.courses.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-book-open w-4"></i>Courses
                </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced exams')): ?>
                <a href="<?php echo e(route('self-paced.dashboard.exams.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-clipboard-question w-4"></i>Exams
                </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced enrollments')): ?>
                <a href="<?php echo e(route('self-paced.dashboard.enrollments.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-users w-4"></i>Enrollments
                </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view self-paced results')): ?>
                <a href="<?php echo e(route('self-paced.dashboard.results.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-chart-bar w-4"></i>Results
                </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced certificates')): ?>
                <a href="<?php echo e(route('self-paced.dashboard.certificates.index')); ?>"
                   class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-100 hover:bg-indigo-700 hover:text-white transition">
                    <i class="fas fa-certificate w-4"></i>Certificates
                </a>
                <?php endif; ?>
                <div class="pt-2 border-t border-indigo-700">
                    <a href="<?php echo e(route('dashboard')); ?>"
                       class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-indigo-200 hover:bg-indigo-700 hover:text-white transition">
                        <i class="fas fa-arrow-left w-4"></i>Back to Main Dashboard
                    </a>
                </div>
            </div>
        </div>
    </header>

    
    <?php if (! empty(trim($__env->yieldContent('hero')))): ?>
        <?php echo $__env->yieldContent('hero'); ?>
    <?php else: ?>
        <div class="bg-gradient-to-r from-indigo-600 to-purple-700 shadow-md">
            <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-white">
                            <i class="fas fa-graduation-cap mr-2"></i>
                            <?php echo $__env->yieldContent('page-title', 'Self-Paced Learning Portal'); ?>
                        </h1>
                        <p class="text-indigo-200 mt-1 text-sm"><?php echo $__env->yieldContent('page-subtitle'); ?></p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <?php echo $__env->yieldContent('hero-actions'); ?>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    
    <?php if(session('success') || session('error') || session('warning') || session('info')): ?>
        <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 pt-4">
            <?php 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"><?php echo e(session('success')); ?></span>
                    <button @click="show = false" class="text-green-400 hover:text-green-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php 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"><?php echo e(session('error')); ?></span>
                    <button @click="show = false" class="text-red-400 hover:text-red-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php 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"><?php echo e(session('warning')); ?></span>
                    <button @click="show = false" class="text-amber-400 hover:text-amber-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
            <?php 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"><?php echo e(session('info')); ?></span>
                    <button @click="show = false" class="text-blue-400 hover:text-blue-600"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    
    <main class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/layouts/self-paced-dashboard.blade.php ENDPATH**/ ?>