
<?php if($courses->isEmpty()): ?>
    <div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
        <div class="w-20 h-20 bg-indigo-50 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-book-open text-indigo-300 text-3xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-700 mb-1">Coming Soon</h3>
        <p class="text-sm text-gray-400 max-w-xs">
            No courses are available yet. Check back soon for exciting new learning opportunities.
        </p>
    </div>
<?php else: ?>
    <?php $__currentLoopData = $courses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $course): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col overflow-hidden group">

        
        <a href="<?php echo e(route('self-paced.public.courses.show', $course)); ?>" class="block relative overflow-hidden h-44 flex-shrink-0">
            <?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 group-hover:scale-105 transition-transform duration-300">
            <?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'); ?>44 100%);">
                    <i class="<?php echo e($course->category->icon ?? 'fas fa-book'); ?> text-4xl"
                       style="color: <?php echo e($course->category->color ?? '#6366f1'); ?>; opacity: 0.6;"></i>
                </div>
            <?php endif; ?>

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

            </span>
            <?php endif; ?>

            
            <span class="absolute top-3 right-3 px-2.5 py-1 rounded-full text-xs font-bold shadow-sm
                <?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>
        </a>

        
        <div class="flex flex-col flex-1 p-5">
            <a href="<?php echo e(route('self-paced.public.courses.show', $course)); ?>"
               class="text-base font-bold text-gray-800 hover:text-indigo-700 transition leading-snug mb-2 line-clamp-2">
                <?php echo e($course->title); ?>

            </a>

            <p class="text-xs text-gray-500 leading-relaxed mb-4 line-clamp-3 flex-1">
                <?php echo e(Str::limit(strip_tags($course->description), 150)); ?>

            </p>

            
            <div class="flex flex-wrap gap-2 mb-4">
                <span class="inline-flex items-center gap-1 px-2 py-1 bg-gray-50 rounded-lg text-xs text-gray-600">
                    <i class="fas fa-clock text-indigo-400 text-[10px]"></i>
                    <?php echo e($course->getFormattedDuration()); ?>

                </span>
                <span class="inline-flex items-center gap-1 px-2 py-1 bg-gray-50 rounded-lg text-xs text-gray-600">
                    <i class="fas fa-clipboard-question text-indigo-400 text-[10px]"></i>
                    <?php echo e($course->exam_questions_per_attempt); ?> questions
                </span>
                <span class="inline-flex items-center gap-1 px-2 py-1 bg-gray-50 rounded-lg text-xs text-gray-600">
                    <i class="fas fa-percent text-indigo-400 text-[10px]"></i>
                    Pass: <?php echo e($course->passing_score); ?>%
                </span>
            </div>

            
            <a href="<?php echo e(route('self-paced.public.register', $course)); ?>"
               class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition active:scale-95 shadow-sm shadow-indigo-200">
                <i class="fas fa-user-plus text-xs"></i>
                <?php echo e($course->isFree() ? 'Enroll Free' : 'Register Now'); ?>

            </a>
        </div>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/self-paced/public/partials/course-cards.blade.php ENDPATH**/ ?>