@extends('layouts.main_dashboard.app')

@php
    $routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin';
    $isAr = app()->getLocale() === 'ar';
@endphp

@section('title', __('dashboard.Add New Quiz') . ' | ' . $course->name)

@section('content')
<div class="max-w-5xl mx-auto space-y-8 pb-20">
    <!-- Header Section -->
    <div class="relative overflow-hidden rounded-xl bg-surface-900 p-8 lg:p-12 text-white shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/20 via-transparent to-transparent opacity-50"></div>
        <div class="absolute -end-12 -top-12 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl"></div>
        
        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-8">
            <div class="space-y-4">
                <nav class="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-surface-500">
                    <a href="{{ route($routePrefix . '.home') }}" class="hover:text-white transition-colors">{{ __('dashboard.Home') }}</a>
                    <i class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[8px]"></i>
                    <a href="{{ route($routePrefix . '.courses.index') }}" class="hover:text-white transition-colors">{{ __('dashboard.Courses') }}</a>
                    <i class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[8px]"></i>
                    <span class="text-indigo-400">{{ __('dashboard.New Quiz') }}</span>
                </nav>
                <h1 class="text-4xl lg:text-5xl font-black tracking-tight leading-tight">
                    {{ $isAr ? 'إنشاء اختبار جديد' : 'Create New Quiz' }}
                </h1>
                <p class="text-lg text-surface-400 max-w-xl font-medium">
                    {{ $isAr ? 'قم بإعداد تفاصيل الاختبار وجدوله الزمني للمقرر:' : 'Set up the quiz details and schedule for the course:' }} 
                    <span class="text-white underline decoration-indigo-500/50 underline-offset-4">{{ $course->name }}</span>
                </p>
            </div>
            
            <div class="shrink-0 flex gap-3">
                <a href="{{ route($routePrefix . '.courses.quizzes.index', $courseId) }}" 
                   class="h-14 w-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-xl text-white hover:bg-white/10 transition-all shadow-xl backdrop-blur-sm group"
                   title="{{ __('dashboard.Back to Quizzes') }}">
                    <i class="fa-solid fa-arrow-{{ $isAr ? 'right' : 'left' }} group-hover:-translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </div>

    <form action="{{ route($routePrefix . '.courses.quizzes.store', $courseId) }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        @csrf

        <!-- Main Form Area -->
        <div class="lg:col-span-8 space-y-8">
            
            <!-- Step 1: Basic Information -->
            <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 shadow-sm overflow-hidden transition-all hover:shadow-md group/card">
                <div class="p-8 border-b border-surface-100 dark:border-surface-800 flex items-center gap-4 bg-surface-50/50 dark:bg-surface-800/50">
                    <div class="h-12 w-12 rounded-2xl bg-white dark:bg-surface-900 border border-surface-100 dark:border-surface-800 flex items-center justify-center text-indigo-600 shadow-sm transition-transform group-hover/card:scale-110">
                        <i class="fa-solid fa-pen-nib"></i>
                    </div>
                    <div>
                        <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'المعلومات الأساسية' : 'General Info' }}</h3>
                        <p class="text-xs text-surface-500 font-medium">{{ $isAr ? 'حدد عنوان الاختبار ووصفه للطلاب' : 'Define quiz title and description for students' }}</p>
                    </div>
                </div>

                <div class="p-8 space-y-6">
                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.Title') }}</label>
                        <div class="relative group">
                            <i class="fa-solid fa-heading absolute start-4 top-1/2 -translate-y-1/2 text-surface-300 group-focus-within:text-indigo-500 transition-colors"></i>
                            <input type="text" name="title" value="{{ old('title') }}" 
                                   class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-surface-900 outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all" 
                                   placeholder="{{ $isAr ? 'مثال: اختبار منتصف الفصل الدراسي' : 'e.g. Mid-term Examination' }}" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.Description') }}</label>
                        <div class="relative group">
                            <textarea name="description" rows="4" 
                                      class="w-full rounded-2xl border border-surface-200 bg-white p-4 text-sm font-bold text-surface-900 outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all resize-none" 
                                      placeholder="{{ $isAr ? 'اكتب تعليمات الاختبار أو وصفاً موجزاً...' : 'Write quiz instructions or a brief description...' }}">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Time & Rules -->
            <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 shadow-sm overflow-hidden transition-all hover:shadow-md group/card">
                <div class="p-8 border-b border-surface-100 dark:border-surface-800 flex items-center gap-4 bg-surface-50/50 dark:bg-surface-800/50">
                    <div class="h-12 w-12 rounded-2xl bg-white dark:bg-surface-900 border border-surface-100 dark:border-surface-800 flex items-center justify-center text-amber-600 shadow-sm transition-transform group-hover/card:scale-110">
                        <i class="fa-solid fa-clock-pulse"></i>
                    </div>
                    <div>
                        <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'الجدول الزمني والقيود' : 'Scheduling & Limits' }}</h3>
                        <p class="text-xs text-surface-500 font-medium">{{ $isAr ? 'تحكم في وقت توفر الاختبار والمدة المسموحة' : 'Control when the quiz is available and its duration' }}</p>
                    </div>
                </div>

                <div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.Start Time') }}</label>
                        <div class="relative group">
                            <i class="fa-solid fa-calendar-check absolute start-4 top-1/2 -translate-y-1/2 text-surface-300 group-focus-within:text-amber-500 transition-colors"></i>
                            <input type="datetime-local" name="start_time" value="{{ old('start_time') }}" 
                                   class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-surface-900 outline-none focus:border-amber-500 focus:ring-4 focus:ring-amber-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.End Time') }}</label>
                        <div class="relative group">
                            <i class="fa-solid fa-calendar-xmark absolute start-4 top-1/2 -translate-y-1/2 text-surface-300 group-focus-within:text-amber-500 transition-colors"></i>
                            <input type="datetime-local" name="end_time" value="{{ old('end_time') }}" 
                                   class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-surface-900 outline-none focus:border-amber-500 focus:ring-4 focus:ring-amber-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.Duration (minutes)') }}</label>
                        <div class="relative group">
                            <i class="fa-solid fa-stopwatch absolute start-4 top-1/2 -translate-y-1/2 text-surface-300 group-focus-within:text-amber-500 transition-colors"></i>
                            <input type="number" name="duration" value="{{ old('duration') }}" min="1" 
                                   class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-surface-900 outline-none focus:border-amber-500 focus:ring-4 focus:ring-amber-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all" 
                                   placeholder="e.g. 60" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="px-1 text-xs font-black uppercase tracking-widest text-surface-500 dark:text-surface-400">{{ __('dashboard.Difficulty Level') }}</label>
                        <div class="relative group">
                            <i class="fa-solid fa-gauge-high absolute start-4 top-1/2 -translate-y-1/2 text-surface-300 group-focus-within:text-amber-500 transition-colors"></i>
                            <select name="difficulty_level" class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-surface-900 outline-none focus:border-amber-500 focus:ring-4 focus:ring-amber-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white appearance-none transition-all" required>
                                <option value="easy" @selected(old('difficulty_level', 'easy') === 'easy')>{{ __('dashboard.Easy') }}</option>
                                <option value="medium" @selected(old('difficulty_level') === 'medium')>{{ __('dashboard.Medium') }}</option>
                                <option value="hard" @selected(old('difficulty_level') === 'hard')>{{ __('dashboard.Hard') }}</option>
                            </select>
                            <i class="fa-solid fa-chevron-down absolute end-4 top-1/2 -translate-y-1/2 text-surface-300 pointer-events-none text-[10px]"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Optional Media -->
            <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 shadow-sm overflow-hidden transition-all hover:shadow-md group/card">
                <div class="p-8 border-b border-surface-100 dark:border-surface-800 flex items-center gap-4 bg-surface-50/50 dark:bg-surface-800/50">
                    <div class="h-12 w-12 rounded-2xl bg-white dark:bg-surface-900 border border-surface-100 dark:border-surface-800 flex items-center justify-center text-emerald-600 shadow-sm transition-transform group-hover/card:scale-110">
                        <i class="fa-solid fa-paperclip"></i>
                    </div>
                    <div>
                        <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'وسائط إضافية' : 'Additional Media' }}</h3>
                        <p class="text-xs text-surface-500 font-medium">{{ $isAr ? 'يمكنك إرفاق ملف مساعد للاختبار (اختياري)' : 'Attach an optional supporting file for the quiz' }}</p>
                    </div>
                </div>

                <div class="p-8">
                    <div class="relative group">
                        <input type="file" name="media" id="media_upload" class="hidden">
                        <label for="media_upload" class="flex flex-col items-center justify-center w-full min-h-[160px] rounded-3xl border-2 border-dashed border-surface-200 dark:border-surface-800 bg-surface-50 dark:bg-surface-950/50 hover:border-emerald-500/50 hover:bg-emerald-50/10 transition-all cursor-pointer group/label">
                            <div class="h-14 w-14 rounded-2xl bg-white dark:bg-surface-900 border border-surface-100 dark:border-surface-800 flex items-center justify-center text-surface-400 group-hover/label:text-emerald-500 group-hover/label:border-emerald-100 transition-all shadow-sm mb-4">
                                <i class="fa-solid fa-cloud-arrow-up text-xl"></i>
                            </div>
                            <div class="text-center">
                                <span class="block text-sm font-black text-surface-900 dark:text-white">{{ $isAr ? 'اضغط لرفع ملف' : 'Click to upload file' }}</span>
                                <span class="text-[10px] font-bold text-surface-400 uppercase tracking-widest mt-1 block">{{ $isAr ? 'أو قم بسحب وإفلات الملف هنا' : 'or drag and drop it here' }}</span>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Actions Area -->
        <div class="lg:col-span-4 space-y-8">
            <div class="bg-indigo-600 rounded-xl p-8 text-white shadow-xl shadow-indigo-500/20 relative overflow-hidden group">
                <div class="absolute -end-8 -top-8 h-32 w-32 rounded-full bg-white/10 blur-2xl transition-transform group-hover:scale-150 duration-700"></div>
                <div class="relative z-10">
                    <h4 class="text-xl font-black mb-4">{{ $isAr ? 'ماذا بعد الحفظ؟' : 'What happens next?' }}</h4>
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <div class="h-6 w-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                                <i class="fa-solid fa-check text-[10px]"></i>
                            </div>
                            <p class="text-xs font-bold leading-relaxed text-indigo-100">{{ $isAr ? 'سيتم حفظ الاختبار كمسودة غير منشورة ولن يراه الطلاب.' : 'Quiz will be saved as a draft and hidden from students.' }}</p>
                        </li>
                        <li class="flex items-start gap-3">
                            <div class="h-6 w-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                                <i class="fa-solid fa-check text-[10px]"></i>
                            </div>
                            <p class="text-xs font-bold leading-relaxed text-indigo-100">{{ $isAr ? 'ستنتقل تلقائياً لصفحة إضافة الأسئلة من بنك الأسئلة أو يدوياً.' : 'You will be redirected to add questions manually or from the bank.' }}</p>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 p-8 shadow-sm space-y-4">
                <button type="submit" class="w-full inline-flex items-center justify-center gap-3 rounded-2xl bg-surface-900 dark:bg-white px-8 py-5 text-sm font-black text-white dark:text-surface-900 transition-all hover:scale-[1.02] active:scale-[0.98] shadow-xl shadow-surface-900/20 group">
                    <i class="fa-solid fa-floppy-disk text-lg group-hover:animate-bounce"></i>
                    <span>{{ __('dashboard.Save & Continue') }}</span>
                </button>
                
                <a href="{{ route($routePrefix . '.courses.quizzes.index', $courseId) }}" 
                   class="w-full inline-flex items-center justify-center gap-3 rounded-2xl bg-surface-100 dark:bg-surface-800 px-8 py-5 text-sm font-black text-surface-600 dark:text-surface-400 transition-all hover:bg-surface-200 dark:hover:bg-surface-700">
                    <i class="fa-solid fa-xmark text-lg"></i>
                    <span>{{ __('dashboard.Cancel') }}</span>
                </a>
            </div>

            <!-- Quiz Status Preview Card -->
            <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 shadow-sm overflow-hidden">
                <div class="p-6 border-b border-surface-100 dark:border-surface-800 flex items-center justify-between">
                    <h3 class="font-black text-surface-900 dark:text-white">{{ $isAr ? 'معاينة الحالة' : 'Status Preview' }}</h3>
                    <div class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
                </div>
                <div class="p-6 space-y-6">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-surface-500">{{ $isAr ? 'حالة النشر' : 'Publish Status' }}</span>
                        <span class="text-[10px] font-black px-2 py-1 rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-500 uppercase tracking-widest">{{ $isAr ? 'مسودة' : 'Draft' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-surface-500">{{ $isAr ? 'المقرر' : 'Course' }}</span>
                        <span class="text-xs font-bold text-surface-900 dark:text-white truncate max-w-[120px]">{{ $course->name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection