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

@section('title', 'Exam Settings — ' . $course->title)
@section('page-title', 'Exam Settings')
@section('page-subtitle', $course->title)

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.exams.course-questions', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-clipboard-question"></i> View Questions
    </a>
    <a href="{{ route('self-paced.dashboard.courses.show', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back to Course
    </a>
@endsection

@section('content')
<div class="max-w-5xl mx-auto">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
        <a href="{{ route('self-paced.dashboard.index') }}" class="hover:text-indigo-600 transition">Dashboard</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.exams.index') }}" class="hover:text-indigo-600 transition">Exams</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.exams.course-questions', $course) }}" class="hover:text-indigo-600 transition">{{ Str::limit($course->title, 40) }}</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">Settings</span>
    </nav>

    {{-- Question bank info badge --}}
    @php $questionCount = $course->examQuestions()->where('is_active', true)->count(); @endphp
    <div class="bg-indigo-50 border border-indigo-100 rounded-xl p-4 mb-5 flex items-center gap-3">
        <span class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <i class="fas fa-database text-indigo-600"></i>
        </span>
        <div>
            <p class="text-sm font-semibold text-indigo-800">Active Question Bank</p>
            <p class="text-xs text-indigo-600 mt-0.5">
                This course has <strong>{{ $questionCount }}</strong> active question(s) available for exam attempts.
            </p>
        </div>
        <a href="{{ route('self-paced.dashboard.exams.course-questions', $course) }}"
           class="ml-auto text-xs text-indigo-600 hover:text-indigo-800 font-medium underline flex-shrink-0">
            Manage Questions
        </a>
    </div>

    {{-- Validation Errors --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
            <div>
                <p class="text-sm font-semibold text-red-700 mb-1">Please fix the following errors:</p>
                <ul class="text-sm text-red-600 space-y-0.5 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <form action="{{ route('self-paced.dashboard.exams.settings.update', $course) }}"
          method="POST">
        @csrf
        @method('PUT')

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">

            <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
                <i class="fas fa-cog text-indigo-500"></i> Exam Configuration
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                {{-- Exam Time Limit --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-stopwatch text-gray-400 mr-1"></i> Exam Time Limit (minutes) <span class="text-red-500">*</span>
                    </label>
                    <input type="number"
                           name="exam_time_limit"
                           value="{{ old('exam_time_limit', $course->exam_time_limit) }}"
                           min="1"
                           placeholder="60"
                           class="w-full px-3 py-2 text-sm border @error('exam_time_limit') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
                    @error('exam_time_limit')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-400 text-xs mt-1">Total minutes allowed per exam attempt.</p>
                </div>

                {{-- Questions Per Attempt --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-list-ol text-gray-400 mr-1"></i> Questions Per Attempt <span class="text-red-500">*</span>
                    </label>
                    <input type="number"
                           name="exam_questions_per_attempt"
                           value="{{ old('exam_questions_per_attempt', $course->exam_questions_per_attempt) }}"
                           min="1"
                           max="{{ $questionCount ?: 999 }}"
                           placeholder="10"
                           class="w-full px-3 py-2 text-sm border @error('exam_questions_per_attempt') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
                    @error('exam_questions_per_attempt')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-400 text-xs mt-1">Randomly selected from the {{ $questionCount }} active question(s).</p>
                </div>

                {{-- Max Attempts Allowed --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-redo text-gray-400 mr-1"></i> Max Attempts Allowed <span class="text-red-500">*</span>
                    </label>
                    <input type="number"
                           name="exam_attempts_allowed"
                           value="{{ old('exam_attempts_allowed', $course->exam_attempts_allowed) }}"
                           min="1"
                           placeholder="3"
                           class="w-full px-3 py-2 text-sm border @error('exam_attempts_allowed') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
                    @error('exam_attempts_allowed')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-400 text-xs mt-1">Maximum number of times a trainee can attempt this exam.</p>
                </div>

                {{-- Passing Score --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-percent text-gray-400 mr-1"></i> Passing Score (%) <span class="text-red-500">*</span>
                    </label>
                    <input type="number"
                           name="passing_score"
                           value="{{ old('passing_score', $course->passing_score) }}"
                           min="1"
                           max="100"
                           placeholder="70"
                           class="w-full px-3 py-2 text-sm border @error('passing_score') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
                    @error('passing_score')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-400 text-xs mt-1">Applies to future attempts only. Existing results are not affected.</p>
                </div>

            </div>

            {{-- Current settings summary --}}
            <div class="mt-6 p-4 bg-gray-50 border border-gray-100 rounded-xl">
                <p class="text-xs font-semibold text-gray-500 mb-3 uppercase tracking-wide">Current Settings</p>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
                    <div class="bg-white rounded-lg p-3 border border-gray-100">
                        <p class="text-xs text-gray-400">Time Limit</p>
                        <p class="text-base font-bold text-indigo-700">{{ $course->exam_time_limit ?? '—' }} <span class="text-xs font-normal">min</span></p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-gray-100">
                        <p class="text-xs text-gray-400">Questions</p>
                        <p class="text-base font-bold text-purple-700">{{ $course->exam_questions_per_attempt ?? '—' }}</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-gray-100">
                        <p class="text-xs text-gray-400">Max Attempts</p>
                        <p class="text-base font-bold text-amber-700">{{ $course->exam_attempts_allowed ?? '—' }}</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-gray-100">
                        <p class="text-xs text-gray-400">Pass Score</p>
                        <p class="text-base font-bold text-green-700">{{ $course->passing_score ?? 70 }}%</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="flex justify-between mt-4">
            <a href="{{ route('self-paced.dashboard.exams.course-questions', $course) }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                <i class="fas fa-arrow-left"></i> Cancel
            </a>
            <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition shadow">
                <i class="fas fa-save"></i> Save Settings
            </button>
        </div>

    </form>
</div>
@endsection
