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

@section('title', 'Exam Confirmation — ' . $course->title)
@section('course-title', $course->title)
@section('current-phase', '3')
@section('progress-percentage', $progressPercentage)

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

    {{-- Flash error / warning banners --}}
    @if(session('error'))
    <div class="mb-5 flex items-start gap-3 bg-red-50 border border-red-200 text-red-800 rounded-xl px-4 py-3 text-sm">
        <i class="fas fa-exclamation-circle text-red-500 mt-0.5 flex-shrink-0"></i>
        <span>{{ session('error') }}</span>
    </div>
    @endif
    @if(session('warning'))
    <div class="mb-5 flex items-start gap-3 bg-amber-50 border border-amber-200 text-amber-800 rounded-xl px-4 py-3 text-sm">
        <i class="fas fa-exclamation-triangle text-amber-500 mt-0.5 flex-shrink-0"></i>
        <span>{{ session('warning') }}</span>
    </div>
    @endif

    {{-- ===================================================================
         HEADER
    =================================================================== --}}
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-2xl mb-4">
            <i class="fas fa-clipboard-question text-indigo-600 text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-gray-800">Ready for the Exam?</h1>
        <p class="text-sm text-gray-500 mt-1">{{ $course->title }}</p>
    </div>

    {{-- ===================================================================
         EXAM INFO CARD
    =================================================================== --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
            <i class="fas fa-info-circle text-indigo-400"></i> Exam Details
        </h2>
        <div class="grid grid-cols-2 gap-4">
            <div class="flex items-center gap-3 p-3 bg-indigo-50 rounded-xl">
                <span class="w-9 h-9 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-list-ol text-indigo-600 text-sm"></i>
                </span>
                <div>
                    <p class="text-lg font-bold text-indigo-700">{{ $questionCount }}</p>
                    <p class="text-xs text-gray-500">Questions</p>
                </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-rose-50 rounded-xl">
                <span class="w-9 h-9 bg-rose-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-stopwatch text-rose-600 text-sm"></i>
                </span>
                <div>
                    <p class="text-lg font-bold text-rose-700">{{ $course->exam_time_limit }} min</p>
                    <p class="text-xs text-gray-500">Time Limit</p>
                </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-green-50 rounded-xl">
                <span class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-percent text-green-600 text-sm"></i>
                </span>
                <div>
                    <p class="text-lg font-bold text-green-700">{{ $course->passing_score }}%</p>
                    <p class="text-xs text-gray-500">Passing Score</p>
                </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-amber-50 rounded-xl">
                <span class="w-9 h-9 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-redo text-amber-600 text-sm"></i>
                </span>
                <div>
                    <p class="text-lg font-bold text-amber-700">
                        {{ $remainingAttempts }}
                        <span class="text-xs font-normal text-gray-400">/ {{ $course->exam_attempts_allowed }}</span>
                    </p>
                    <p class="text-xs text-gray-500">Attempts Left</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ===================================================================
         PROGRESS REMINDER
    =================================================================== --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
        <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-medium text-gray-500 flex items-center gap-1.5">
                <i class="fas fa-chart-line text-indigo-400"></i> Course Content Progress
            </span>
            <span class="text-sm font-bold text-indigo-700">{{ number_format($progressPercentage, 0) }}%</span>
        </div>
        <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
            <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-700"
                 style="width: {{ min(100, $progressPercentage) }}%"></div>
        </div>
        @if($progressPercentage < 100)
        <p class="text-xs text-amber-600 mt-2 flex items-center gap-1">
            <i class="fas fa-exclamation-triangle"></i>
            You have not completed all course content. We recommend finishing it before taking the exam.
        </p>
        @else
        <p class="text-xs text-green-600 mt-2 flex items-center gap-1">
            <i class="fas fa-check-circle"></i>
            All course content completed. You are ready for the exam!
        </p>
        @endif
    </div>

    {{-- ===================================================================
         WARNING NOTICE
    =================================================================== --}}
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
        <div class="flex items-start gap-3">
            <i class="fas fa-exclamation-triangle text-amber-500 mt-0.5 flex-shrink-0"></i>
            <div class="text-sm text-amber-800 space-y-1">
                <p class="font-semibold">Before you start:</p>
                <ul class="list-disc list-inside space-y-0.5 text-amber-700">
                    <li>Once started, the timer <strong>cannot be paused</strong>.</li>
                    <li>Closing the browser will not stop the timer — your attempt will continue.</li>
                    <li>If the timer runs out, your exam will be automatically submitted.</li>
                    <li>Each answer is saved immediately when you select it.</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ===================================================================
         ACTION BUTTONS
    =================================================================== --}}
    @if($remainingAttempts > 0)
        <form method="POST" action="{{ route('self-paced.learn.exam.start', $course) }}">
            @csrf
            <button type="submit"
                    class="w-full flex items-center justify-center gap-2.5 px-6 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-base rounded-xl transition shadow-lg shadow-indigo-200 active:scale-95">
                <i class="fas fa-play-circle text-lg"></i>
                Start Exam Now
                <i class="fas fa-arrow-right text-sm opacity-70"></i>
            </button>
        </form>
    @else
        <div class="w-full flex items-center justify-center gap-2.5 px-6 py-4 bg-gray-100 text-gray-400 font-bold text-base rounded-xl cursor-not-allowed">
            <i class="fas fa-ban text-lg"></i>
            No Attempts Remaining
        </div>
        <p class="text-center text-xs text-gray-400 mt-2">
            You have used all {{ $course->exam_attempts_allowed }} allowed attempt(s) for this course.
        </p>
    @endif

    <div class="mt-4 text-center">
        <a href="{{ route('self-paced.learn.content', $course) }}"
           class="inline-flex items-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 Course Content
        </a>
    </div>

</div>
@endsection
