@extends('layouts.self-paced-landing')

@section('title', 'Self-Paced Learning Portal')
@section('meta-description', 'Browse and enroll in self-paced online courses. Learn at your own pace and earn certificates.')

@section('content')

{{-- =========================================================================
     HERO SECTION
========================================================================= --}}
<section class="relative bg-gradient-to-br from-indigo-700 via-indigo-600 to-purple-700 text-white overflow-hidden">
    {{-- Background decoration --}}
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 right-0 w-96 h-96 bg-white rounded-full -translate-y-1/2 translate-x-1/2"></div>
        <div class="absolute bottom-0 left-0 w-64 h-64 bg-white rounded-full translate-y-1/2 -translate-x-1/2"></div>
    </div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-white/20 rounded-full text-sm font-medium mb-6 backdrop-blur-sm">
            <i class="fas fa-graduation-cap text-yellow-300"></i>
            Self-Paced Online Learning
        </div>
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">
            Learn at Your Own Pace,<br class="hidden sm:block">
            <span class="text-yellow-300">Earn Certificates</span>
        </h1>
        <p class="text-lg text-indigo-100 max-w-5xl mx-auto mb-8">
            Explore our curated courses, study on your schedule, take timed exams, and download your certificate of completion.
        </p>

        {{-- Search bar --}}
        <div class="max-w-3xl mx-auto" x-data="courseSearch()">
            <div class="relative flex items-center">
                <i class="fas fa-search absolute left-4 text-gray-400 pointer-events-none"></i>
                <input type="text"
                       x-model="search"
                       @input.debounce.400ms="fetchCourses()"
                       placeholder="Search courses..."
                       class="w-full pl-11 pr-4 py-3.5 rounded-xl text-gray-800 text-sm font-medium shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 bg-white">
                <button @click="fetchCourses()"
                        class="absolute right-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
                    Search
                </button>
            </div>
        </div>

        {{-- Stats row --}}
        <div class="flex flex-wrap items-center justify-center gap-6 mt-10 text-sm">
            <div class="flex items-center gap-2 text-indigo-100">
                <i class="fas fa-book text-yellow-300"></i>
                <span>{{ $courses->total() }} Course{{ $courses->total() !== 1 ? 's' : '' }} Available</span>
            </div>
            <div class="flex items-center gap-2 text-indigo-100">
                <i class="fas fa-certificate text-yellow-300"></i>
                <span>Earn Certificates</span>
            </div>
            <div class="flex items-center gap-2 text-indigo-100">
                <i class="fas fa-mobile-alt text-yellow-300"></i>
                <span>Pay via MTN MoMo</span>
            </div>
        </div>
    </div>
</section>

{{-- =========================================================================
     COURSES SECTION
========================================================================= --}}
<section id="courses" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">

    {{-- Section header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Available Courses</h2>
            <p class="text-sm text-gray-500 mt-1">Browse all published courses and enroll today</p>
        </div>
        <a href="{{ route('self-paced.public.verify') }}"
           class="inline-flex items-center gap-2 px-4 py-2 border border-indigo-200 text-indigo-700 text-sm font-medium rounded-lg hover:bg-indigo-50 transition">
            <i class="fas fa-shield-check text-xs"></i>
            Verify a Certificate
        </a>
    </div>

    {{-- Category filter pills --}}
    @if($categories->isNotEmpty())
    <div class="flex flex-wrap gap-2 mb-8" x-data="courseSearch()">
        <button @click="filterCategory(null)"
                :class="activeCategory === null ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                class="px-4 py-1.5 rounded-full text-sm font-medium transition">
            All <span class="ml-1 opacity-70">({{ $courses->total() }})</span>
        </button>
        @foreach($categories as $cat)
        @if($cat->courses_count > 0)
        <button @click="filterCategory({{ $cat->id }})"
                :class="activeCategory === {{ $cat->id }} ? 'text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                :style="activeCategory === {{ $cat->id }} ? 'background-color: {{ $cat->color ?? '#6366f1' }}' : ''"
                class="px-4 py-1.5 rounded-full text-sm font-medium transition flex items-center gap-1.5">
            @if($cat->icon)
                <i class="{{ $cat->icon }} text-xs"></i>
            @endif
            {{ $cat->name }}
            <span class="opacity-70">({{ $cat->courses_count }})</span>
        </button>
        @endif
        @endforeach
    </div>
    @endif

    {{-- Course cards grid — Alpine.js controlled --}}
    <div x-data="courseSearch()" x-init="init()">

        {{-- Loading indicator --}}
        <div x-show="loading" x-cloak class="flex justify-center py-12">
            <div class="flex items-center gap-3 text-indigo-600">
                <i class="fas fa-spinner fa-spin text-xl"></i>
                <span class="text-sm font-medium">Loading courses...</span>
            </div>
        </div>

        {{-- Cards container --}}
        <div x-show="!loading"
             id="course-cards-container"
             class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @include('self-paced.public.partials.course-cards', ['courses' => $courses])
        </div>

        {{-- Pagination (server-side, shown when not searching) --}}
        <div x-show="!loading && !isFiltered" class="mt-8">
            {{ $courses->links() }}
        </div>
    </div>
</section>

{{-- =========================================================================
     CERTIFICATE VERIFICATION CTA
========================================================================= --}}
<section class="bg-indigo-50 border-y border-indigo-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex flex-col md:flex-row items-center justify-between gap-6">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-indigo-100 rounded-2xl flex items-center justify-center flex-shrink-0">
                <i class="fas fa-shield-check text-indigo-600 text-2xl"></i>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-800">Verify a Certificate</h3>
                <p class="text-sm text-gray-500">Check the authenticity of any certificate issued by this portal.</p>
            </div>
        </div>
        <a href="{{ route('self-paced.public.verify') }}"
           class="flex-shrink-0 flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm rounded-xl transition shadow-md shadow-indigo-200">
            <i class="fas fa-search"></i>
            Verify Now
        </a>
    </div>
</section>

@endsection

@push('scripts')
<script>
function courseSearch() {
    return {
        search: '',
        activeCategory: null,
        loading: false,
        isFiltered: false,

        init() {
            // Sync search from URL param if present
            const params = new URLSearchParams(window.location.search);
            if (params.get('search')) {
                this.search = params.get('search');
                this.isFiltered = true;
            }
            if (params.get('category_id')) {
                this.activeCategory = parseInt(params.get('category_id'));
                this.isFiltered = true;
            }
        },

        fetchCourses() {
            this.loading = true;
            this.isFiltered = !!(this.search || this.activeCategory);

            const params = new URLSearchParams();
            if (this.search) params.set('search', this.search);
            if (this.activeCategory) params.set('category_id', this.activeCategory);

            axios.get('{{ route('self-paced.public.index') }}?' + params.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => {
                document.getElementById('course-cards-container').innerHTML = response.data.html;
            })
            .catch(() => {
                // Silently fail — keep existing content
            })
            .finally(() => {
                this.loading = false;
            });
        },

        filterCategory(categoryId) {
            this.activeCategory = categoryId;
            this.fetchCourses();
        }
    };
}
</script>
@endpush