@extends('layouts.public')

@section('title', $course->title . ' | CEPI Pakistan')

@section('content')
@php
    $totalSections = $course->modules->count();
    $totalLectures = $course->total_lectures ?: $course->modules->sum(fn ($module) => $module->lessons->count());
    $previewLectures = $course->modules->flatMap->lessons->where('is_preview', true)->take(4)->values();
    $totalHours = $course->total_duration ? round($course->total_duration / 3600, 1) : null;
@endphp

<section class="relative overflow-hidden bg-[linear-gradient(135deg,#0f172a_0%,#161950_55%,#1d4ed8_100%)] text-white">
    <div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 18px 18px;"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
        <div class="grid gap-10 lg:grid-cols-[1.15fr,0.85fr] lg:items-start">
            <div>
                <div class="flex flex-wrap items-center gap-3">
                    <span class="rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold text-white">{{ $course->category->name ?? 'General' }}</span>
                    <span class="rounded-full bg-amber-400 px-4 py-1.5 text-sm font-semibold text-slate-950">{{ ucfirst($course->level) }}</span>
                    <span class="rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-sm font-semibold text-white/80">{{ ucfirst($course->language) }}</span>
                </div>

                <h1 class="mt-6 max-w-4xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-[3.4rem]">{{ $course->title }}</h1>

                <p class="mt-6 max-w-3xl text-lg leading-8 text-white/75">
                    {{ $course->description }}
                </p>

                <div class="mt-8 flex flex-wrap items-center gap-6 text-sm text-white/75">
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-white">Instructor:</span>
                        <span>{{ $course->instructor->name ?? 'CEPI Faculty' }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-white">Updated:</span>
                        <span>{{ $course->updated_at->format('M Y') }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-white">Enrolled:</span>
                        <span>{{ $course->total_students ?: $course->enrollments()->count() }} learners</span>
                    </div>
                </div>

                <div class="mt-10 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-3xl border border-white/10 bg-white/5 px-5 py-5 backdrop-blur">
                        <p class="text-xs uppercase tracking-[0.2em] text-white/55">Sections</p>
                        <p class="mt-2 text-2xl font-bold text-white">{{ $totalSections }}</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 px-5 py-5 backdrop-blur">
                        <p class="text-xs uppercase tracking-[0.2em] text-white/55">Lectures</p>
                        <p class="mt-2 text-2xl font-bold text-white">{{ $totalLectures }}</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 px-5 py-5 backdrop-blur">
                        <p class="text-xs uppercase tracking-[0.2em] text-white/55">Duration</p>
                        <p class="mt-2 text-2xl font-bold text-white">{{ $totalHours ? $totalHours . ' hrs' : 'Flexible' }}</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 px-5 py-5 backdrop-blur">
                        <p class="text-xs uppercase tracking-[0.2em] text-white/55">Access</p>
                        <p class="mt-2 text-2xl font-bold text-white">{{ $course->is_free ? 'Free' : 'Paid' }}</p>
                    </div>
                </div>
            </div>

            <div class="relative">
                <div class="absolute -inset-5 rounded-[34px] bg-gradient-to-tr from-amber-300/20 to-white/5 blur-2xl"></div>
                <div class="relative overflow-hidden rounded-[32px] border border-white/10 bg-white/10 p-5 shadow-2xl backdrop-blur">
                    <div class="overflow-hidden rounded-[24px] bg-slate-900">
                        @if ($course->thumbnail)
                            <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}" class="h-72 w-full object-cover sm:h-80" />
                        @else
                            <div class="flex h-72 items-center justify-center bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_45%,#e0e7ff_100%)] text-brand-700 sm:h-80">
                                <span class="rounded-2xl border border-white/60 bg-white/70 px-4 py-2 text-sm font-semibold">{{ $course->title }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="mt-5 flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3 text-sm text-white/80">
                        <span>Structured CEPI learning path</span>
                        <span>{{ $course->duration_weeks ? $course->duration_weeks . ' week track' : 'Self-paced' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-white py-14">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-[minmax(0,1fr),360px] lg:px-8">
        <div class="space-y-8">
            <section class="rounded-[30px] border border-slate-200 bg-white p-7 shadow-theme-xs sm:p-8">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                        <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">What You Will Learn</p>
                        <h2 class="mt-2 text-2xl font-extrabold tracking-tight text-slate-900">A focused CEPI course experience.</h2>
                    </div>
                    <span class="text-sm text-slate-500">{{ $totalLectures }} lecture items across {{ $totalSections }} sections</span>
                </div>

                <div class="mt-8 grid gap-4 md:grid-cols-2">
                    <div class="rounded-2xl bg-slate-50 p-5">
                        <p class="text-sm font-semibold text-slate-900">Structured section-wise learning</p>
                        <p class="mt-2 text-sm leading-7 text-slate-600">Follow a guided flow built around key exam themes, topic sequencing, and concept reinforcement.</p>
                    </div>
                    <div class="rounded-2xl bg-slate-50 p-5">
                        <p class="text-sm font-semibold text-slate-900">Lecture-based conceptual coverage</p>
                        <p class="mt-2 text-sm leading-7 text-slate-600">Move through recorded lectures, notes, and topic breakdowns with an exam-focused orientation.</p>
                    </div>
                    <div class="rounded-2xl bg-slate-50 p-5">
                        <p class="text-sm font-semibold text-slate-900">Preview-enabled important topics</p>
                        <p class="mt-2 text-sm leading-7 text-slate-600">Open lectures marked as preview help learners understand the course approach before enrolling.</p>
                    </div>
                    <div class="rounded-2xl bg-slate-50 p-5">
                        <p class="text-sm font-semibold text-slate-900">Built for disciplined preparation</p>
                        <p class="mt-2 text-sm leading-7 text-slate-600">Designed for aspirants preparing for CSS, PMS, and other high-stakes competitive exams.</p>
                    </div>
                </div>
            </section>

            @if ($previewLectures->isNotEmpty())
                <section class="rounded-[30px] border border-slate-200 bg-slate-50 p-7 shadow-theme-xs sm:p-8">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                        <div>
                            <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Preview Lectures</p>
                            <h2 class="mt-2 text-2xl font-extrabold tracking-tight text-slate-900">Sample topics inside this course.</h2>
                        </div>
                        <span class="text-sm text-slate-500">{{ $previewLectures->count() }} preview lectures available</span>
                    </div>

                    <div class="mt-8 grid gap-4 lg:grid-cols-2">
                        @foreach ($previewLectures as $lecture)
                            <div class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-theme-xs">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{{ ucfirst($lecture->content_type) }}</p>
                                        <h3 class="mt-2 text-lg font-bold leading-snug text-slate-900">{{ $lecture->title }}</h3>
                                    </div>
                                    <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">Preview</span>
                                </div>
                                <p class="mt-3 text-sm leading-7 text-slate-600">{{ $lecture->description ?: 'Preview this lecture to understand the CEPI teaching approach for this topic.' }}</p>
                                <div class="mt-4 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
                                    {{ $lecture->duration_seconds }} seconds
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="rounded-[30px] border border-slate-200 bg-white p-7 shadow-theme-xs sm:p-8">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                        <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Course Content</p>
                        <h2 class="mt-2 text-2xl font-extrabold tracking-tight text-slate-900">Sections and lecture breakdown.</h2>
                    </div>
                    <div class="text-sm text-slate-500">
                        {{ $totalSections }} sections | {{ $totalLectures }} lectures
                    </div>
                </div>

                <div class="mt-8 space-y-4" x-data="{ openSection: 0 }">
                    @forelse ($course->modules as $index => $module)
                        <div class="overflow-hidden rounded-[26px] border border-slate-200 bg-slate-50">
                            <button
                                type="button"
                                class="flex w-full items-center justify-between gap-5 px-5 py-5 text-left transition hover:bg-slate-100"
                                @click="openSection = openSection === {{ $index }} ? -1 : {{ $index }}"
                            >
                                <div class="flex min-w-0 items-start gap-4">
                                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white text-sm font-bold text-brand-700 shadow-theme-xs">
                                        {{ str_pad((string) $module->order_index, 2, '0', STR_PAD_LEFT) }}
                                    </span>
                                    <div class="min-w-0">
                                        <p class="text-lg font-bold leading-snug text-slate-900">{{ $module->title }}</p>
                                        <p class="mt-1 text-sm text-slate-500">{{ $module->lessons->count() }} lectures inside this section</p>
                                    </div>
                                </div>
                                <svg class="h-5 w-5 shrink-0 text-slate-400 transition" :class="{ 'rotate-180': openSection === {{ $index }} }" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>

                            <div x-show="openSection === {{ $index }}" x-collapse class="border-t border-slate-200 bg-white">
                                @if ($module->description)
                                    <div class="border-b border-slate-100 px-5 py-4 text-sm leading-7 text-slate-600">
                                        {{ $module->description }}
                                    </div>
                                @endif

                                <div class="divide-y divide-slate-100">
                                    @forelse ($module->lessons as $lesson)
                                        <div class="flex flex-col gap-4 px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
                                            <div class="flex min-w-0 items-start gap-3">
                                                <span class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
                                                    @if ($lesson->content_type === 'quiz')
                                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 14v.01M16 10h.01M9 16h6M12 3l8 4v6c0 5-3.5 8-8 8s-8-3-8-8V7l8-4z" />
                                                        </svg>
                                                    @elseif ($lesson->content_type === 'article' || $lesson->content_type === 'text')
                                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h8M7 16h6M5 4h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z" />
                                                        </svg>
                                                    @elseif ($lesson->content_type === 'file' || $lesson->content_type === 'pdf')
                                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3h7l5 5v13a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z" />
                                                        </svg>
                                                    @else
                                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                                                            <path d="M8 5v14l11-7z" />
                                                        </svg>
                                                    @endif
                                                </span>
                                                <div class="min-w-0">
                                                    <p class="font-semibold leading-7 text-slate-900">{{ $lesson->title }}</p>
                                                    @if ($lesson->description)
                                                        <p class="mt-1 text-sm leading-7 text-slate-500">{{ $lesson->description }}</p>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="flex shrink-0 flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
                                                <span>{{ ucfirst($lesson->content_type) }}</span>
                                                <span>{{ $lesson->duration_seconds }} sec</span>
                                                @if ($lesson->is_preview)
                                                    <span class="rounded-full bg-brand-50 px-3 py-1 text-[11px] tracking-[0.12em] text-brand-700">Preview</span>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <div class="px-5 py-6 text-sm text-slate-500">No lectures added in this section yet.</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-[26px] border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center text-sm text-slate-500">
                            Curriculum is being updated.
                        </div>
                    @endforelse
                </div>
            </section>
        </div>

        <aside>
            <div class="sticky top-28 space-y-6">
                <div class="overflow-hidden rounded-[32px] border border-slate-200 bg-white shadow-theme-lg">
                    <div class="border-b border-slate-100 px-7 py-7">
                        <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Enrollment</p>
                        <div class="mt-4">
                            @if ($isEnrolled)
                                <p class="text-3xl font-extrabold text-emerald-600">Enrolled</p>
                                <p class="mt-2 text-sm leading-7 text-slate-600">You already have access to this course. Continue from your student dashboard.</p>
                            @elseif ($course->is_free)
                                <p class="text-4xl font-extrabold text-emerald-600">Free</p>
                                <p class="mt-2 text-sm leading-7 text-slate-600">Get started without payment and begin learning right away.</p>
                            @elseif ($course->discount_price)
                                <div>
                                    <p class="text-4xl font-extrabold text-slate-900">PKR {{ number_format((float) $course->discount_price) }}</p>
                                    <p class="mt-2 text-base text-slate-400 line-through">PKR {{ number_format((float) $course->price) }}</p>
                                </div>
                            @else
                                <p class="text-4xl font-extrabold text-slate-900">PKR {{ number_format((float) $course->price) }}</p>
                            @endif
                        </div>

                        @if ($isEnrolled)
                            <a href="{{ route('dashboard') }}" class="mt-6 inline-flex w-full items-center justify-center rounded-2xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-theme-sm transition hover:bg-emerald-700">
                                Go to Dashboard
                            </a>
                        @else
                            <a href="{{ route('checkout.manual.show', $course->slug) }}" class="mt-6 inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3.5 text-sm font-semibold text-white shadow-theme-sm transition hover:bg-brand-700">
                                {{ auth()->check() ? 'Register on This Course' : 'Register / Login to Enroll' }}
                            </a>
                        @endif
                    </div>

                    <div class="space-y-4 px-7 py-7 text-sm text-slate-600">
                        <div class="flex items-center justify-between gap-4">
                            <span>Instructor</span>
                            <span class="font-semibold text-slate-900">{{ $course->instructor->name ?? 'CEPI Faculty' }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span>Category</span>
                            <span class="font-semibold text-slate-900">{{ $course->category->name ?? 'General' }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span>Sections</span>
                            <span class="font-semibold text-slate-900">{{ $totalSections }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span>Lectures</span>
                            <span class="font-semibold text-slate-900">{{ $totalLectures }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span>Duration</span>
                            <span class="font-semibold text-slate-900">{{ $totalHours ? $totalHours . ' hrs' : 'Flexible' }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-4">
                            <span>Language</span>
                            <span class="font-semibold text-slate-900">{{ ucfirst($course->language) }}</span>
                        </div>
                    </div>
                </div>

                <div class="rounded-[32px] border border-slate-200 bg-slate-50 p-7 shadow-theme-xs">
                    <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Need Guidance?</p>
                    <h3 class="mt-3 text-xl font-extrabold tracking-tight text-slate-900">Talk to CEPI admissions.</h3>
                    <p class="mt-4 text-sm leading-7 text-slate-600">
                        If you want help choosing the right batch, subject, or exam track, our admissions team can guide you.
                    </p>
                    <div class="mt-6 space-y-3 text-sm text-slate-600">
                        <div>Mobile: 0321 111 4880</div>
                        <div>Email: submit.cepipakistan@gmail.com</div>
                        <div>WhatsApp: 0321 111 4880</div>
                    </div>
                    <a href="{{ route('contact') }}" class="mt-6 inline-flex rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">
                        Contact Us
                    </a>
                </div>
            </div>
        </aside>
    </div>
</section>
@endsection