@extends('layouts.main_dashboard.app')
@section('title', $examV2->title)
@section('skip_page_hero', true)

@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp
<div class="space-y-6" x-data="{ addSection: false, activeSection: null }">

    {{-- Header --}}
    <div class="flex items-center justify-between gap-4">
        <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>
            <div>
                <h1 class="text-xl font-black text-surface-900 dark:text-white">{{ $examV2->title }}</h1>
                <div class="flex items-center gap-2 mt-0.5">
                    @if($examV2->status === 'published')
                        <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-700">{{ $isArabic ? 'منشور' : 'Published' }}</span>
                    @else
                        <span class="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-black text-zinc-600">{{ $isArabic ? 'مسودة' : 'Draft' }}</span>
                    @endif
                    @if($examV2->course)
                        <span class="text-xs text-surface-400">{{ $examV2->course->name }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="flex gap-2">
            <button @click="addSection = !addSection"
                    class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300">
                <i class="fa-solid fa-plus text-xs"></i>
                {{ $isArabic ? 'قسم جديد' : 'Add Section' }}
            </button>
            @if($examV2->status === 'draft')
            <form method="POST" action="{{ route('admin.exams-v2.publish', $examV2) }}">
                @csrf
                <button class="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                    {{ $isArabic ? 'نشر الاختبار' : 'Publish Exam' }}
                </button>
            </form>
            @else
            <form method="POST" action="{{ route('admin.exams-v2.unpublish', $examV2) }}">
                @csrf
                <button class="inline-flex items-center gap-2 rounded-xl bg-amber-500 px-4 py-2 text-sm font-bold text-white hover:bg-amber-600">
                    {{ $isArabic ? 'إلغاء النشر' : 'Unpublish' }}
                </button>
            </form>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">{{ session('success') }}</div>
    @endif

    {{-- Add Section Form --}}
    <div x-show="addSection" x-cloak x-transition
         class="rounded-xl border border-brand-200 bg-white p-5 shadow-sm dark:border-brand-500/30 dark:bg-surface-900">
        <form method="POST" action="{{ route('admin.exams-v2.sections.add', $examV2) }}" class="flex flex-wrap items-end gap-4">
            @csrf
            <div class="flex-1 min-w-[200px]">
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'اسم القسم' : 'Section Title' }} *</label>
                <input type="text" name="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">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'نوع التصحيح' : 'Grading' }} *</label>
                <select name="grading_mode" class="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="auto">{{ $isArabic ? 'تلقائي' : 'Auto' }}</option>
                    <option value="manual">{{ $isArabic ? 'يدوي' : 'Manual' }}</option>
                    <option value="mixed">{{ $isArabic ? 'مختلط' : 'Mixed' }}</option>
                </select>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الدرجات' : 'Points' }} *</label>
                <input type="number" name="points" value="10" min="0" required
                       class="w-28 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>
            <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 ? 'إضافة' : 'Add' }}
            </button>
        </form>
    </div>

    {{-- Sections --}}
    @forelse($examV2->sections as $section)
    <div class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900"
         x-data="{ addQ: false }">
        <div class="flex items-center justify-between gap-4 border-b border-surface-200 px-6 py-4 dark:border-surface-800">
            <div>
                <h2 class="font-black text-surface-900 dark:text-white">{{ $section->title }}</h2>
                <p class="text-xs text-surface-400">
                    {{ $section->grading_mode }} · {{ $section->points }} {{ $isArabic ? 'درجة' : 'pts' }} · {{ $section->questions->count() }} {{ $isArabic ? 'سؤال' : 'questions' }}
                </p>
            </div>
            <button @click="addQ = !addQ"
                    class="rounded-lg border border-surface-200 px-3 py-1.5 text-xs font-bold text-surface-700 hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300">
                <i class="fa-solid fa-plus me-1 text-xs"></i>{{ $isArabic ? 'إضافة سؤال' : 'Add Question' }}
            </button>
        </div>

        {{-- Add Question from Bank --}}
        <div x-show="addQ" x-cloak class="border-b border-surface-200 bg-surface-50/50 px-6 py-4 dark:border-surface-800 dark:bg-surface-800/30">
            <form method="POST" action="{{ route('admin.exams-v2.sections.questions.add', [$examV2, $section]) }}"
                  class="flex flex-wrap items-end gap-4">
                @csrf
                <div class="flex-1 min-w-[250px]">
                    <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'اختر سؤالاً من البنك' : 'Select from Bank' }}</label>
                    <select name="question_id" 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="">—</option>
                        @foreach($banks as $bank)
                            <optgroup label="{{ $bank->title }}">
                                @foreach($bank->questions as $bq)
                                    <option value="{{ $bq->id }}">[{{ $bq->question_type }}] {{ Str::limit($bq->prompt, 60) }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الدرجة' : 'Points' }}</label>
                    <input type="number" name="points" value="1" min="1"
                           class="w-20 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>
                <button type="submit" class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white hover:bg-brand-700">
                    {{ $isArabic ? 'إضافة' : 'Add' }}
                </button>
            </form>
        </div>

        {{-- Questions in section --}}
        @if($section->questions->isEmpty())
            <p class="px-6 py-4 text-sm text-surface-400">{{ $isArabic ? 'لا توجد أسئلة في هذا القسم.' : 'No questions in this section.' }}</p>
        @else
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @foreach($section->questions as $sq)
                <div class="flex items-center justify-between gap-4 px-6 py-3">
                    <div class="flex-1">
                        <span class="me-2 rounded-full bg-surface-100 px-2 py-0.5 text-[10px] font-black text-surface-500 dark:bg-surface-800">{{ $sq->question?->question_type }}</span>
                        <span class="text-sm text-surface-700 dark:text-surface-300">{{ Str::limit($sq->question?->prompt, 80) }}</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <span class="text-xs font-black text-surface-500">{{ $sq->points }} {{ $isArabic ? 'د' : 'pts' }}</span>
                        <form method="POST" action="{{ route('admin.exams-v2.sections.questions.remove', [$examV2, $section, $sq]) }}">
                            @csrf @method('DELETE')
                            <button class="text-red-400 hover:text-red-600"><i class="fa-solid fa-xmark text-xs"></i></button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
    @empty
        <div class="rounded-xl border border-dashed border-surface-300 bg-white p-12 text-center text-surface-400 dark:border-surface-700 dark:bg-surface-900">
            {{ $isArabic ? 'لا توجد أقسام بعد. أضف قسماً أولاً.' : 'No sections yet. Add a section first.' }}
        </div>
    @endforelse
</div>
@endsection