

<?php $__env->startSection('title', $course->title); ?>
<?php $__env->startSection('meta-description', Str::limit(strip_tags($course->description), 160)); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="lg:grid lg:grid-cols-3 lg:gap-10">

        
        <div class="lg:col-span-2 space-y-8">

            
            <nav class="flex items-center gap-2 text-xs text-gray-400">
                <a href="<?php echo e(route('self-paced.public.index')); ?>" class="hover:text-indigo-600 transition">Courses</a>
                <i class="fas fa-chevron-right text-[10px]"></i>
                <?php if($course->category): ?>
                    <span><?php echo e($course->category->name); ?></span>
                    <i class="fas fa-chevron-right text-[10px]"></i>
                <?php endif; ?>
                <span class="text-gray-600 font-medium truncate max-w-xs"><?php echo e($course->title); ?></span>
            </nav>

            
            <div class="rounded-2xl overflow-hidden h-64 sm:h-80 relative">
                <?php if($course->featured_image && file_exists(public_path('storage/' . $course->featured_image))): ?>
                    <img src="<?php echo e(asset('storage/' . $course->featured_image)); ?>"
                         alt="<?php echo e($course->title); ?>"
                         class="w-full h-full object-cover">
                <?php else: ?>
                    <div class="w-full h-full flex items-center justify-center"
                         style="background: linear-gradient(135deg, <?php echo e($course->category->color ?? '#6366f1'); ?>22 0%, <?php echo e($course->category->color ?? '#6366f1'); ?>55 100%);">
                        <i class="<?php echo e($course->category->icon ?? 'fas fa-book'); ?> text-7xl"
                           style="color: <?php echo e($course->category->color ?? '#6366f1'); ?>; opacity: 0.4;"></i>
                    </div>
                <?php endif; ?>

                
                <div class="absolute top-4 left-4 flex gap-2">
                    <?php if($course->category): ?>
                    <span class="px-3 py-1 rounded-full text-xs font-semibold text-white shadow"
                          style="background-color: <?php echo e($course->category->color ?? '#6366f1'); ?>;">
                        <?php echo e($course->category->name); ?>

                    </span>
                    <?php endif; ?>
                    <span class="px-3 py-1 rounded-full text-xs font-bold shadow
                        <?php echo e($course->isFree() ? 'bg-green-500 text-white' : 'bg-amber-500 text-white'); ?>">
                        <?php echo e($course->isFree() ? 'Free' : number_format((float)$course->fee_amount, 0) . ' ' . $course->currency); ?>

                    </span>
                </div>
            </div>

            
            <div>
                <h1 class="text-3xl font-extrabold text-gray-900 mb-2"><?php echo e($course->title); ?></h1>
                <?php if($course->instructor): ?>
                <p class="text-sm text-gray-500 flex items-center gap-2">
                    <i class="fas fa-user-tie text-indigo-400"></i>
                    Instructor: <span class="font-medium text-gray-700"><?php echo e($course->instructor->name); ?></span>
                </p>
                <?php endif; ?>
            </div>

            
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div class="flex items-center gap-2 p-3 bg-indigo-50 rounded-xl">
                    <i class="fas fa-clock text-indigo-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Duration</p>
                        <p class="text-sm font-bold text-indigo-700"><?php echo e($course->getFormattedDuration()); ?></p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-amber-50 rounded-xl">
                    <i class="fas fa-money-bill text-amber-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Fee</p>
                        <p class="text-sm font-bold text-amber-700"><?php echo e($course->getFormattedFee()); ?></p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-rose-50 rounded-xl">
                    <i class="fas fa-clipboard-question text-rose-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Questions</p>
                        <p class="text-sm font-bold text-rose-700"><?php echo e($course->exam_questions_per_attempt); ?></p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-green-50 rounded-xl">
                    <i class="fas fa-percent text-green-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Pass Mark</p>
                        <p class="text-sm font-bold text-green-700"><?php echo e($course->passing_score); ?>%</p>
                    </div>
                </div>
            </div>

            
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-align-left text-indigo-400"></i> About This Course
                </h2>
                <div class="text-sm text-gray-600 leading-relaxed prose prose-sm max-w-none">
                    <?php echo nl2br(e($course->description)); ?>

                </div>
            </div>

            
            <?php if($course->objectives): ?>
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-bullseye text-indigo-400"></i> What You Will Learn
                </h2>
                <ul class="space-y-2">
                    <?php $__currentLoopData = array_filter(explode("\n", $course->objectives)); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $obj): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="flex items-start gap-2 text-sm text-gray-600">
                        <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0 text-xs"></i>
                        <?php echo e(trim($obj)); ?>

                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
            <?php endif; ?>

            
            <?php if($course->prerequisites): ?>
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-list-check text-indigo-400"></i> Prerequisites
                </h2>
                <ul class="space-y-2">
                    <?php $__currentLoopData = array_filter(explode("\n", $course->prerequisites)); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pre): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="flex items-start gap-2 text-sm text-gray-600">
                        <i class="fas fa-circle text-indigo-300 mt-1.5 flex-shrink-0 text-[6px]"></i>
                        <?php echo e(trim($pre)); ?>

                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
            <?php endif; ?>

            
            <?php if($course->topics->isNotEmpty()): ?>
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-list-ol text-indigo-400"></i> Course Outline
                </h2>
                <ol class="space-y-3">
                    <?php $__currentLoopData = $course->topics->where('is_published', true); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 text-indigo-700 rounded-full flex items-center justify-center text-xs font-bold">
                            <?php echo e($index + 1); ?>

                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800"><?php echo e($topic->title); ?></p>
                            <?php if($topic->subtopics_count ?? $topic->subtopics->count()): ?>
                            <p class="text-xs text-gray-400 mt-0.5">
                                <?php echo e($topic->subtopics->where('is_published', true)->count()); ?> sub-topic(s)
                            </p>
                            <?php endif; ?>
                        </div>
                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ol>
            </div>
            <?php endif; ?>

        </div>

        
        <div class="mt-8 lg:mt-0">
            <div class="sticky top-24 space-y-4">

                
                <div class="bg-white rounded-2xl border border-gray-100 shadow-md p-6">

                    
                    <div class="text-center mb-5">
                        <?php if($course->isFree()): ?>
                            <p class="text-3xl font-extrabold text-green-600">Free</p>
                            <p class="text-xs text-gray-400 mt-1">No payment required</p>
                        <?php else: ?>
                            <p class="text-3xl font-extrabold text-gray-900">
                                <?php echo e(number_format((float)$course->fee_amount, 0)); ?>

                                <span class="text-lg font-semibold text-gray-500"><?php echo e($course->currency); ?></span>
                            </p>
                            <p class="text-xs text-gray-400 mt-1">One-time payment via MTN MoMo</p>
                        <?php endif; ?>
                    </div>

                    
                    <?php if($userEnrollment && $userEnrollment->canAccess()): ?>
                        <a href="<?php echo e(route('self-paced.learn.overview', $course)); ?>"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-green-600 hover:bg-green-700 text-white font-bold text-sm rounded-xl transition shadow-md shadow-green-200">
                            <i class="fas fa-play-circle"></i>
                            Continue Learning
                        </a>
                        <p class="text-center text-xs text-green-600 mt-2 flex items-center justify-center gap-1">
                            <i class="fas fa-check-circle"></i> You are enrolled
                        </p>
                    <?php elseif($userEnrollment && $userEnrollment->isPendingPayment()): ?>
                        <a href="<?php echo e(route('self-paced.public.payment', [$course, $userEnrollment])); ?>"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-amber-500 hover:bg-amber-600 text-white font-bold text-sm rounded-xl transition">
                            <i class="fas fa-credit-card"></i>
                            Complete Payment
                        </a>
                        <p class="text-center text-xs text-amber-600 mt-2">Payment pending</p>
                    <?php elseif($userEnrollment && $userEnrollment->isPaymentFailed()): ?>
                        <a href="<?php echo e(route('self-paced.public.payment', [$course, $userEnrollment])); ?>"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-red-500 hover:bg-red-600 text-white font-bold text-sm rounded-xl transition">
                            <i class="fas fa-redo"></i>
                            Retry Payment
                        </a>
                        <p class="text-center text-xs text-red-500 mt-2">Previous payment failed</p>
                    <?php else: ?>
                        <a href="<?php echo e(route('self-paced.public.register', $course)); ?>"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl transition shadow-md shadow-indigo-200">
                            <i class="fas fa-user-plus"></i>
                            <?php echo e($course->isFree() ? 'Enroll for Free' : 'Register Now'); ?>

                        </a>
                    <?php endif; ?>

                    
                    <ul class="mt-5 space-y-2.5 text-xs text-gray-600 border-t border-gray-100 pt-4">
                        <li class="flex items-center gap-2">
                            <i class="fas fa-clock text-indigo-400 w-4"></i>
                            <span>Duration: <strong><?php echo e($course->getFormattedDuration()); ?></strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-stopwatch text-indigo-400 w-4"></i>
                            <span>Exam time: <strong><?php echo e($course->exam_time_limit); ?> minutes</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-redo text-indigo-400 w-4"></i>
                            <span>Max attempts: <strong><?php echo e($course->exam_attempts_allowed); ?></strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-percent text-indigo-400 w-4"></i>
                            <span>Passing score: <strong><?php echo e($course->passing_score); ?>%</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-certificate text-indigo-400 w-4"></i>
                            <span>Certificate on completion</span>
                        </li>
                    </ul>
                </div>

                
                <a href="<?php echo e(route('self-paced.public.index')); ?>"
                   class="flex items-center justify-center gap-1.5 text-sm text-gray-500 hover:text-indigo-600 transition">
                    <i class="fas fa-arrow-left text-xs"></i>
                    Back to All Courses
                </a>
            </div>
        </div>

    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.self-paced-landing', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/self-paced/public/show.blade.php ENDPATH**/ ?>