@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'اختبار جديد' : 'New Exam')
@section('skip_page_hero', true)

@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp
<div class="mx-auto max-w-2xl space-y-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.exams-v2.index') }}" class="flex h-9 w-9 items-center justify-center rounded-xl border border-surface-200 text-surface-500 hover:bg-surface-50 dark:border-surface-700">
            <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }} text-sm"></i>
        </a>
        <h1 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'اختبار جديد' : 'New Exam' }}</h1>
    </div>

    <form method="POST" action="{{ route('admin.exams-v2.store') }}"
          class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900 space-y-5">
        @csrf

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'عنوان الاختبار' : 'Title' }} *</label>
            <input type="text" name="title" value="{{ old('title') }}" required
                   class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            @error('title')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'المقرر' : 'Course' }}</label>
            <select name="course_id" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
                <option value="">— {{ $isArabic ? 'بدون مقرر' : 'No course' }} —</option>
                @foreach($courses as $c)
                    <option value="{{ $c->id }}" @selected(old('course_id') == $c->id)>{{ $c->name }} ({{ $c->subject?->name }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'التعليمات' : 'Instructions' }}</label>
            <textarea name="instructions" rows="3"
                      class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">{{ old('instructions') }}</textarea>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'المدة (دقيقة)' : 'Duration (min)' }}</label>
                <input type="number" name="duration_minutes" value="{{ old('duration_minutes') }}" min="1"
                       class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'عدد المحاولات' : 'Attempts Limit' }} *</label>
                <input type="number" name="attempts_limit" value="{{ old('attempts_limit', 1) }}" min="1" required
                       class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            </div>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'متاح من' : 'Available From' }}</label>
                <input type="datetime-local" name="available_from" value="{{ old('available_from') }}"
                       class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'متاح حتى' : 'Available Until' }}</label>
                <input type="datetime-local" name="available_until" value="{{ old('available_until') }}"
                       class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
            </div>
        </div>

        <div>
            <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'ظهور النتيجة' : 'Result Visibility' }} *</label>
            <select name="result_visibility" required class="w-full rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
                <option value="after_grading" @selected(old('result_visibility','after_grading')==='after_grading')>{{ $isArabic ? 'بعد التصحيح' : 'After Grading' }}</option>
                <option value="immediately" @selected(old('result_visibility')==='immediately')>{{ $isArabic ? 'فوراً' : 'Immediately' }}</option>
                <option value="hidden" @selected(old('result_visibility')==='hidden')>{{ $isArabic ? 'مخفي' : 'Hidden' }}</option>
            </select>
        </div>

        <div class="flex gap-6">
            <label class="flex items-center gap-2 cursor-pointer text-sm font-bold text-surface-700 dark:text-surface-300">
                <input type="checkbox" name="shuffle_questions" value="1" {{ old('shuffle_questions') ? 'checked' : '' }} class="rounded border-surface-300 text-brand-600">
                {{ $isArabic ? 'ترتيب عشوائي للأسئلة' : 'Shuffle Questions' }}
            </label>
            <label class="flex items-center gap-2 cursor-pointer text-sm font-bold text-surface-700 dark:text-surface-300">
                <input type="checkbox" name="shuffle_choices" value="1" {{ old('shuffle_choices') ? 'checked' : '' }} class="rounded border-surface-300 text-brand-600">
                {{ $isArabic ? 'ترتيب عشوائي للخيارات' : 'Shuffle Choices' }}
            </label>
        </div>

        <div class="flex justify-end gap-3 pt-2">
            <a href="{{ route('admin.exams-v2.index') }}"
               class="rounded-xl border border-surface-200 px-5 py-2.5 text-sm font-bold text-surface-700 hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300">
                {{ __('dashboard.Cancel') }}
            </a>
            <button type="submit" class="rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-brand-700">
                {{ $isArabic ? 'إنشاء وإضافة أقسام' : 'Create & Add Sections' }}
            </button>
        </div>
    </form>
</div>
@endsection