{{--
    AJAX partial — course cards grid
    Variables: $courses (LengthAwarePaginator of Course)
    Used by: public/index.blade.php real-time search + category filter
    Requirements: 13.1, 13.5
--}}
@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>
@else
    @foreach($courses as $course)
    <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">

        {{-- Featured image / gradient placeholder --}}
        <a href="{{ route('self-paced.public.courses.show', $course) }}" class="block relative overflow-hidden h-44 flex-shrink-0">
            @if($course->featured_image && file_exists(public_path('storage/' . $course->featured_image)))
                <img src="{{ asset('storage/' . $course->featured_image) }}"
                     alt="{{ $course->title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
            @else
                <div class="w-full h-full flex items-center justify-center"
                     style="background: linear-gradient(135deg, {{ $course->category->color ?? '#6366f1' }}22 0%, {{ $course->category->color ?? '#6366f1' }}44 100%);">
                    <i class="{{ $course->category->icon ?? 'fas fa-book' }} text-4xl"
                       style="color: {{ $course->category->color ?? '#6366f1' }}; opacity: 0.6;"></i>
                </div>
            @endif

            {{-- Category badge overlay --}}
            @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: {{ $course->category->color ?? '#6366f1' }};">
                {{ $course->category->name }}
            </span>
            @endif

            {{-- Fee badge overlay --}}
            <span class="absolute top-3 right-3 px-2.5 py-1 rounded-full text-xs font-bold shadow-sm
                {{ $course->isFree() ? 'bg-green-500 text-white' : 'bg-amber-500 text-white' }}">
                {{ $course->isFree() ? 'Free' : number_format((float)$course->fee_amount, 0) . ' ' . $course->currency }}
            </span>
        </a>

        {{-- Card body --}}
        <div class="flex flex-col flex-1 p-5">
            <a href="{{ 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">
                {{ $course->title }}
            </a>

            <p class="text-xs text-gray-500 leading-relaxed mb-4 line-clamp-3 flex-1">
                {{ Str::limit(strip_tags($course->description), 150) }}
            </p>

            {{-- Meta badges --}}
            <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>
                    {{ $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>
                    {{ $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: {{ $course->passing_score }}%
                </span>
            </div>

            {{-- Register button --}}
            <a href="{{ 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>
                {{ $course->isFree() ? 'Enroll Free' : 'Register Now' }}
            </a>
        </div>
    </div>
    @endforeach
@endif
