@extends('layouts.public')

@section('title', 'Courses | CEPI Pakistan')

@section('content')
<section class="bg-[linear-gradient(135deg,#0f172a_0%,#161950_55%,#1d4ed8_100%)] py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">CEPI Courses</p>
        <h1 class="mt-5 text-4xl font-extrabold leading-tight sm:text-5xl">Explore current CEPI programs and exam-preparation tracks.</h1>
        <p class="mt-6 max-w-3xl text-lg leading-8 text-white/75">
            Browse compulsory subjects, optional subjects, mentoring programs, and focused one-paper exam preparation paths.
        </p>
    </div>
</section>

<section class="bg-slate-50 py-16">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="grid gap-8 lg:grid-cols-[320px,1fr]">
            <aside class="rounded-[30px] border border-slate-200 bg-white p-6 shadow-theme-xs">
                <form action="{{ route('courses.index') }}" method="GET" class="space-y-6">
                    <div>
                        <label class="mb-2 block text-sm font-semibold text-slate-700">Search Courses</label>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Current Affairs, Essay, PMS..." class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500">
                    </div>

                    <div>
                        <p class="mb-3 text-sm font-semibold text-slate-700">Categories</p>
                        <div class="space-y-3">
                            <label class="flex items-center gap-3">
                                <input type="radio" name="category" value="" {{ !request('category') ? 'checked' : '' }} class="border-slate-300 text-brand-600 focus:ring-brand-500">
                                <span class="text-sm text-slate-600">All Categories</span>
                            </label>
                            @foreach ($categories as $category)
                                <label class="flex items-center gap-3">
                                    <input type="radio" name="category" value="{{ $category->slug }}" {{ request('category') === $category->slug ? 'checked' : '' }} class="border-slate-300 text-brand-600 focus:ring-brand-500">
                                    <span class="text-sm text-slate-600">{{ $category->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <button type="submit" class="rounded-2xl bg-slate-950 px-5 py-3 text-sm font-semibold text-white">Apply</button>
                        <a href="{{ route('courses.index') }}" class="rounded-2xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700">Clear</a>
                    </div>
                </form>
            </aside>

            <div>
                @if ($courses->isNotEmpty())
                    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-2">
                        @foreach ($courses as $course)
                            <article class="overflow-hidden rounded-[30px] border border-slate-200 bg-white shadow-theme-xs transition hover:-translate-y-1 hover:shadow-theme-sm">
                                <a href="{{ route('courses.show', $course->slug) }}" class="block aspect-[16/10] overflow-hidden bg-slate-100">
                                    @if ($course->thumbnail)
                                        <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}" class="h-full w-full object-cover transition duration-500 hover:scale-105">
                                    @else
                                        <div class="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_45%,#e0e7ff_100%)] text-brand-700">
                                            <span class="rounded-2xl border border-white/60 bg-white/70 px-4 py-2 text-sm font-semibold">{{ $course->category->name ?? 'CEPI Course' }}</span>
                                        </div>
                                    @endif
                                </a>

                                <div class="p-6">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">{{ $course->category->name ?? 'General' }}</span>
                                        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase text-slate-600">{{ ucfirst($course->level) }}</span>
                                    </div>

                                    <h2 class="mt-4 text-xl font-bold leading-snug text-slate-900">{{ $course->title }}</h2>
                                    <p class="mt-3 text-sm text-slate-500">{{ \Illuminate\Support\Str::limit($course->description, 120) }}</p>

                                    <div class="mt-5 grid grid-cols-2 gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
                                        <div>Instructor: {{ $course->instructor->name ?? 'CEPI Faculty' }}</div>
                                        <div>{{ ucfirst($course->language) }}</div>
                                        <div>{{ $course->total_lectures }} lectures</div>
                                        <div>{{ $course->duration_weeks ? $course->duration_weeks . ' weeks' : 'Flexible' }}</div>
                                    </div>

                                    <div class="mt-6 flex items-center justify-between gap-4">
                                        <div>
                                            @if ($course->is_free)
                                                <span class="text-2xl font-extrabold text-emerald-600">Free</span>
                                            @elseif ($course->discount_price)
                                                <div>
                                                    <span class="text-2xl font-extrabold text-slate-900">PKR {{ number_format((float) $course->discount_price) }}</span>
                                                    <span class="ml-2 text-sm text-slate-400 line-through">PKR {{ number_format((float) $course->price) }}</span>
                                                </div>
                                            @else
                                                <span class="text-2xl font-extrabold text-slate-900">PKR {{ number_format((float) $course->price) }}</span>
                                            @endif
                                        </div>
                                        <a href="{{ route('courses.show', $course->slug) }}" class="rounded-2xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700">View Course</a>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <div class="mt-10">
                        {{ $courses->links() }}
                    </div>
                @else
                    <div class="rounded-[30px] border border-dashed border-slate-300 bg-white px-6 py-16 text-center text-sm text-slate-500">
                        No courses matched your filters. Try clearing the search or category selection.
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection