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

@section('title', $course->title)
@section('meta-description', Str::limit(strip_tags($course->description), 160))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="lg:grid lg:grid-cols-3 lg:gap-10">

        {{-- ===================================================================
             MAIN CONTENT — left 2/3
        =================================================================== --}}
        <div class="lg:col-span-2 space-y-8">

            {{-- Breadcrumb --}}
            <nav class="flex items-center gap-2 text-xs text-gray-400">
                <a href="{{ route('self-paced.public.index') }}" class="hover:text-indigo-600 transition">Courses</a>
                <i class="fas fa-chevron-right text-[10px]"></i>
                @if($course->category)
                    <span>{{ $course->category->name }}</span>
                    <i class="fas fa-chevron-right text-[10px]"></i>
                @endif
                <span class="text-gray-600 font-medium truncate max-w-xs">{{ $course->title }}</span>
            </nav>

            {{-- Hero image --}}
            <div class="rounded-2xl overflow-hidden h-64 sm:h-80 relative">
                @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">
                @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' }}55 100%);">
                        <i class="{{ $course->category->icon ?? 'fas fa-book' }} text-7xl"
                           style="color: {{ $course->category->color ?? '#6366f1' }}; opacity: 0.4;"></i>
                    </div>
                @endif

                {{-- Badges --}}
                <div class="absolute top-4 left-4 flex gap-2">
                    @if($course->category)
                    <span class="px-3 py-1 rounded-full text-xs font-semibold text-white shadow"
                          style="background-color: {{ $course->category->color ?? '#6366f1' }};">
                        {{ $course->category->name }}
                    </span>
                    @endif
                    <span class="px-3 py-1 rounded-full text-xs font-bold shadow
                        {{ $course->isFree() ? 'bg-green-500 text-white' : 'bg-amber-500 text-white' }}">
                        {{ $course->isFree() ? 'Free' : number_format((float)$course->getTotalEnrollmentFee(), 2) . ' KES' }}
                    </span>
                </div>
            </div>

            {{-- Title + instructor --}}
            <div>
                <h1 class="text-3xl font-extrabold text-gray-900 mb-2">{{ $course->title }}</h1>
                @if($course->instructor)
                <p class="text-sm text-gray-500 flex items-center gap-2">
                    <i class="fas fa-user-tie text-indigo-400"></i>
                    Instructor: <span class="font-medium text-gray-700">{{ $course->instructor->name }}</span>
                </p>
                @endif
            </div>

            {{-- Info row --}}
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div class="flex items-center gap-2 p-3 bg-indigo-50 rounded-xl">
                    <i class="fas fa-clock text-indigo-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Duration</p>
                        <p class="text-sm font-bold text-indigo-700">{{ $course->getFormattedDuration() }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-amber-50 rounded-xl">
                    <i class="fas fa-money-bill text-amber-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Fee</p>
                        <p class="text-sm font-bold text-amber-700">{{ $course->getFormattedFee() }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-rose-50 rounded-xl">
                    <i class="fas fa-clipboard-question text-rose-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Questions</p>
                        <p class="text-sm font-bold text-rose-700">{{ $course->exam_questions_per_attempt }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 p-3 bg-green-50 rounded-xl">
                    <i class="fas fa-percent text-green-500 text-sm"></i>
                    <div>
                        <p class="text-xs text-gray-500">Pass Mark</p>
                        <p class="text-sm font-bold text-green-700">{{ $course->passing_score }}%</p>
                    </div>
                </div>
            </div>

            {{-- Description --}}
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-align-left text-indigo-400"></i> About This Course
                </h2>
                <div class="text-sm text-gray-600 leading-relaxed prose prose-sm max-w-none">
                    {!! nl2br(e($course->description)) !!}
                </div>
            </div>

            {{-- Objectives --}}
            @if($course->objectives)
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-bullseye text-indigo-400"></i> What You Will Learn
                </h2>
                <ul class="space-y-2">
                    @foreach(array_filter(explode("\n", $course->objectives)) as $obj)
                    <li class="flex items-start gap-2 text-sm text-gray-600">
                        <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0 text-xs"></i>
                        {{ trim($obj) }}
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- Prerequisites --}}
            @if($course->prerequisites)
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-list-check text-indigo-400"></i> Prerequisites
                </h2>
                <ul class="space-y-2">
                    @foreach(array_filter(explode("\n", $course->prerequisites)) as $pre)
                    <li class="flex items-start gap-2 text-sm text-gray-600">
                        <i class="fas fa-circle text-indigo-300 mt-1.5 flex-shrink-0 text-[6px]"></i>
                        {{ trim($pre) }}
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- Topics outline --}}
            @if($course->topics->isNotEmpty())
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-list-ol text-indigo-400"></i> Course Outline
                </h2>
                <ol class="space-y-3">
                    @foreach($course->topics->where('is_published', true) as $index => $topic)
                    <li class="flex items-start gap-3">
                        <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 text-indigo-700 rounded-full flex items-center justify-center text-xs font-bold">
                            {{ $index + 1 }}
                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">{{ $topic->title }}</p>
                            @if($topic->subtopics_count ?? $topic->subtopics->count())
                            <p class="text-xs text-gray-400 mt-0.5">
                                {{ $topic->subtopics->where('is_published', true)->count() }} sub-topic(s)
                            </p>
                            @endif
                        </div>
                    </li>
                    @endforeach
                </ol>
            </div>
            @endif

        </div>

        {{-- ===================================================================
             ENROLLMENT SIDEBAR — right 1/3 (sticky on desktop)
        =================================================================== --}}
        <div class="mt-8 lg:mt-0">
            <div class="sticky top-24 space-y-4">

                {{-- Enrollment CTA card --}}
                <div class="bg-white rounded-2xl border border-gray-100 shadow-md p-6">

                    {{-- Price display --}}
                    <div class="text-center mb-5">
                        @if($course->isFree())
                            <p class="text-3xl font-extrabold text-green-600">Free</p>
                            <p class="text-xs text-gray-400 mt-1">No payment required</p>
                        @else
                            <p class="text-3xl font-extrabold text-gray-900">
                                {{ number_format((float)$course->fee_amount, 0) }}
                                <span class="text-lg font-semibold text-gray-500">{{ $course->currency }}</span>
                            </p>
                            <p class="text-xs text-gray-400 mt-1">One-time payment via MTN MoMo</p>
                        @endif
                    </div>

                    {{-- CTA button based on enrollment state --}}
                    @if($userEnrollment && $userEnrollment->canAccess())
                        <a href="{{ route('self-paced.learn.overview', $course) }}"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-green-600 hover:bg-green-700 text-white font-bold text-sm rounded-xl transition shadow-md shadow-green-200">
                            <i class="fas fa-play-circle"></i>
                            Continue Learning
                        </a>
                        <p class="text-center text-xs text-green-600 mt-2 flex items-center justify-center gap-1">
                            <i class="fas fa-check-circle"></i> You are enrolled
                        </p>
                    @elseif($userEnrollment && $userEnrollment->isPendingPayment())
                        <a href="{{ route('self-paced.public.payment', [$course, $userEnrollment]) }}"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-amber-500 hover:bg-amber-600 text-white font-bold text-sm rounded-xl transition">
                            <i class="fas fa-credit-card"></i>
                            Complete Payment
                        </a>
                        <p class="text-center text-xs text-amber-600 mt-2">Payment pending</p>
                    @elseif($userEnrollment && $userEnrollment->isPaymentFailed())
                        <a href="{{ route('self-paced.public.payment', [$course, $userEnrollment]) }}"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-red-500 hover:bg-red-600 text-white font-bold text-sm rounded-xl transition">
                            <i class="fas fa-redo"></i>
                            Retry Payment
                        </a>
                        <p class="text-center text-xs text-red-500 mt-2">Previous payment failed</p>
                    @else
                        <a href="{{ route('self-paced.public.register', $course) }}"
                           class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl transition shadow-md shadow-indigo-200">
                            <i class="fas fa-user-plus"></i>
                            {{ $course->isFree() ? 'Enroll for Free' : 'Register Now' }}
                        </a>
                    @endif

                    {{-- Course quick facts --}}
                    <ul class="mt-5 space-y-2.5 text-xs text-gray-600 border-t border-gray-100 pt-4">
                        <li class="flex items-center gap-2">
                            <i class="fas fa-clock text-indigo-400 w-4"></i>
                            <span>Duration: <strong>{{ $course->getFormattedDuration() }}</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-stopwatch text-indigo-400 w-4"></i>
                            <span>Exam time: <strong>{{ $course->exam_time_limit }} minutes</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-redo text-indigo-400 w-4"></i>
                            <span>Max attempts: <strong>{{ $course->exam_attempts_allowed }}</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-percent text-indigo-400 w-4"></i>
                            <span>Passing score: <strong>{{ $course->passing_score }}%</strong></span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-certificate text-indigo-400 w-4"></i>
                            <span>Certificate on completion</span>
                        </li>
                    </ul>
                </div>

                {{-- Back link --}}
                <a href="{{ route('self-paced.public.index') }}"
                   class="flex items-center justify-center gap-1.5 text-sm text-gray-500 hover:text-indigo-600 transition">
                    <i class="fas fa-arrow-left text-xs"></i>
                    Back to All Courses
                </a>
            </div>
        </div>

    </div>
</div>
@endsection
