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

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $types = config('exam-engine.question_types');
@endphp
<div class="space-y-6" x-data="{ showForm: false, qType: 'single_choice', optCount: 4 }">

    {{-- Header --}}
    <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.exam-banks.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">{{ $examBank->title }}</h1>
                <p class="text-xs text-surface-400">{{ $questions->total() }} {{ $isArabic ? 'سؤال' : 'questions' }}</p>
            </div>
        </div>
        <button @click="showForm = !showForm"
                class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">
            <i class="fa-solid fa-plus text-xs"></i>
            {{ $isArabic ? 'إضافة سؤال' : 'Add Question' }}
        </button>
    </div>

    {{-- Add Question Form --}}
    <div x-show="showForm" x-cloak x-transition
         class="rounded-xl border border-brand-200 bg-white p-6 shadow-sm dark:border-brand-500/30 dark:bg-surface-900">
        <h2 class="mb-5 font-black text-surface-900 dark:text-white">{{ $isArabic ? 'سؤال جديد' : 'New Question' }}</h2>
        <form method="POST" action="{{ route('admin.exam-banks.questions.store', $examBank) }}" class="space-y-4">
            @csrf

            <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 ? 'نوع السؤال' : 'Question Type' }} *</label>
                    <select name="question_type" x-model="qType" 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">
                        @foreach($types as $key => $type)
                            <option value="{{ $key }}">{{ $type['label'] }}</option>
                        @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="default_points" value="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>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'نص السؤال' : 'Question Prompt' }} *</label>
                <textarea name="prompt" rows="3" 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"></textarea>
            </div>

            <div>
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'تلميح (اختياري)' : 'Hint (optional)' }}</label>
                <input type="text" name="hint"
                       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>

            {{-- Options (for choice questions) --}}
            <div x-show="['single_choice','multiple_choice','true_false'].includes(qType)">
                <div class="mb-2 flex items-center justify-between">
                    <label class="text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الخيارات' : 'Options' }}</label>
                    <button type="button" @click="optCount++" x-show="qType !== 'true_false'"
                            class="text-xs font-bold text-brand-600 hover:underline">+ {{ $isArabic ? 'إضافة خيار' : 'Add option' }}</button>
                </div>
                <template x-for="i in (qType === 'true_false' ? 2 : optCount)" :key="i">
                    <div class="mb-2 flex items-center gap-3">
                        <input type="text" :name="`options[${i-1}][label]`"
                               :placeholder="qType === 'true_false' ? (i===1 ? '{{ $isArabic ? 'صح' : 'True' }}' : '{{ $isArabic ? 'خطأ' : 'False' }}') : `{{ $isArabic ? 'الخيار' : 'Option' }} ${i}`"
                               class="flex-1 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm outline-none focus:border-brand-400 dark:border-surface-700 dark:bg-surface-800 dark:text-white">
                        <label class="flex items-center gap-1.5 text-xs text-surface-500">
                            <input type="checkbox" :name="`options[${i-1}][is_correct]`" value="1"
                                   class="rounded border-surface-300 text-brand-600">
                            {{ $isArabic ? 'صحيح' : 'Correct' }}
                        </label>
                    </div>
                </template>
            </div>

            {{-- Model answer for text questions --}}
            <div x-show="['short_text','fill_in_blank'].includes(qType)">
                <label class="mb-1.5 block text-sm font-bold text-surface-700 dark:text-surface-300">{{ $isArabic ? 'الإجابة النموذجية' : 'Model Answer' }}</label>
                <input type="text" name="model_answer"
                       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 class="flex justify-end gap-3 pt-2">
                <button type="button" @click="showForm = false"
                        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') }}
                </button>
                <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 ? 'حفظ السؤال' : 'Save Question' }}
                </button>
            </div>
        </form>
    </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

    {{-- Questions List --}}
    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        @if($questions->isEmpty())
            <div class="px-6 py-12 text-center text-surface-400">
                {{ $isArabic ? 'لا توجد أسئلة بعد. أضف أول سؤال.' : 'No questions yet. Add the first one.' }}
            </div>
        @else
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @foreach($questions as $i => $q)
                <div class="flex items-start justify-between gap-4 px-6 py-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-2">
                            <span class="rounded-full bg-surface-100 px-2 py-0.5 text-[10px] font-black text-surface-500 dark:bg-surface-800">{{ $q->question_type }}</span>
                            <span class="text-xs text-surface-400">{{ $q->default_points }} {{ $isArabic ? 'درجة' : 'pts' }}</span>
                        </div>
                        <p class="mt-1 text-sm font-bold text-surface-900 dark:text-white">{{ Str::limit($q->prompt, 120) }}</p>
                        @if($q->options->isNotEmpty())
                            <div class="mt-2 flex flex-wrap gap-2">
                                @foreach($q->options as $opt)
                                    <span class="rounded-full border px-2 py-0.5 text-xs {{ $opt->is_correct ? 'border-emerald-300 bg-emerald-50 text-emerald-700' : 'border-surface-200 text-surface-500' }}">
                                        {{ $opt->option_key }}: {{ Str::limit($opt->label, 30) }}
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <form method="POST" action="{{ route('admin.exam-banks.questions.destroy', [$examBank, $q]) }}"
                          onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}')">
                        @csrf @method('DELETE')
                        <button class="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-bold text-red-600 hover:bg-red-50">
                            <i class="fa-solid fa-trash text-xs"></i>
                        </button>
                    </form>
                </div>
                @endforeach
            </div>
            <div class="border-t border-surface-200 px-6 py-4 dark:border-surface-800">
                {{ $questions->links() }}
            </div>
        @endif
    </section>
</div>
@endsection