@extends('layouts.superadmin')

@section('title', 'إدارة الاختبارات — إنشاء سؤال جديد')
@section('page-title', 'إدارة الاختبارات — إنشاء سؤال جديد')

@section('content')
<div class="space-y-6">

    {{-- رجوع + تنبيه بسيط --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <a href="{{ route('tests.questions.index') }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm
                  bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200
                  border border-slate-200 dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-700">
            <i class="fa-solid fa-arrow-right-long"></i>
            <span>العودة لقائمة الأسئلة</span>
        </a>

        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 max-w-md">
            أنشئ سؤالاً، أضِف الإجابات، وحدد أيّها صحيحة. يجب أن يكون هناك على الأقل إجابتان، وإجابة واحدة صحيحة.
        </p>
    </div>

    {{-- كرت النموذج --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-6 space-y-5">

        {{-- عنوان --}}
        <div class="flex items-center gap-3">
            <div class="h-10 w-10 rounded-2xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center">
                <i class="fa-solid fa-circle-question text-lg"></i>
            </div>
            <div>
                <h1 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
                    إنشاء سؤال جديد
                </h1>
                <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                    اختر الاختبار المستهدف، أدخل نص السؤال، ثم أضف الإجابات وحدد الصحيحة.
                </p>
            </div>
        </div>

        {{-- رسائل أخطاء --}}
        @if ($errors->any())
            <div class="rounded-2xl border border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950/40 p-3 sm:p-4">
                <div class="flex items-start gap-2">
                    <span class="mt-0.5 text-rose-600 dark:text-rose-300">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                    </span>
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-rose-700 dark:text-rose-200 mb-1">
                            تأكد من الحقول التالية:
                        </p>
                        <ul class="text-[11px] sm:text-xs text-rose-700 dark:text-rose-200 space-y-0.5">
                            @foreach ($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        {{-- الفورم --}}
        <form action="{{ route('tests.questions.store') }}" method="POST" class="space-y-5">
            @csrf

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

                {{-- الاختبار --}}
                <div class="space-y-1.5">
                    <label class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                        الاختبار <span class="text-amber-500">*</span>
                    </label>
                    <select name="test_id"
                            class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
                                   px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2
                                   focus:ring-indigo-500/70 focus:border-indigo-500/70">
                        <option value="">اختر الاختبار...</option>
                        @foreach ($tests as $test)
                            <option value="{{ $test->id }}" {{ old('test_id') == $test->id ? 'selected' : '' }}>
                                #{{ $test->id }} — {{ $test->title }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- ترتيب السؤال --}}
                <div class="space-y-1.5">
                    <label class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                        ترتيب السؤال داخل الاختبار (اختياري)
                    </label>
                    <input type="number" name="sort_order" min="0"
                           value="{{ old('sort_order', 0) }}"
                           class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
                                  px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2
                                  focus:ring-indigo-500/70 focus:border-indigo-500/70"
                           placeholder="مثال: 1 أو 2 أو 3">
                </div>

                {{-- نص السؤال --}}
                <div class="md:col-span-2 space-y-1.5">
                    <label class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                        نص السؤال <span class="text-amber-500">*</span>
                    </label>
                    <textarea name="question_text" rows="3"
                              class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
                                     px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2
                                     focus:ring-indigo-500/70 focus:border-indigo-500/70"
                              placeholder="اكتب نص السؤال كاملاً هنا...">{{ old('question_text') }}</textarea>
                </div>
            </div>

            {{-- قسم الإجابات --}}
            <div class="border-t border-slate-200 dark:border-slate-700 pt-4 space-y-3">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <p class="text-sm font-semibold text-slate-900 dark:text-white">
                            الإجابات (اختيار من متعدد)
                        </p>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            أدخل من 2 إلى 6 إجابات، وحدّد واحدة فقط كإجابة صحيحة.
                        </p>
                    </div>
                    <button type="button"
                            onclick="addAnswerRow()"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs
                                   bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200
                                   border border-slate-200 dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-700">
                        <i class="fa-solid fa-plus"></i>
                        <span>إضافة إجابة</span>
                    </button>
                </div>

                <div id="answers-wrapper" class="space-y-2.5">
                    @php
                        $oldAnswers = old('answers', ['', '', '', '']);
                        $oldCorrect = old('correct_answer', null);
                    @endphp

                    @foreach ($oldAnswers as $idx => $answer)
                        <div class="answer-row flex items-center gap-2">
                            <div class="flex-1">
                                <input type="text"
                                       name="answers[{{ $idx }}]"
                                       value="{{ $answer }}"
                                       class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
                                              px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2
                                              focus:ring-indigo-500/70 focus:border-indigo-500/70"
                                       placeholder="نص الإجابة {{ $idx + 1 }}">
                            </div>
                            <div class="flex items-center gap-2">
                                <label class="inline-flex items-center gap-1 text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                                    <input type="radio" name="correct_answer" value="{{ $idx }}"
                                           class="rounded border-slate-300 text-emerald-500 focus:ring-emerald-500"
                                           {{ (string)$oldCorrect === (string)$idx ? 'checked' : '' }}>
                                    <span>صحيحة</span>
                                </label>
                                <button type="button"
                                        onclick="removeAnswerRow(this)"
                                        class="inline-flex items-center justify-center w-7 h-7 rounded-lg
                                               bg-rose-50 dark:bg-rose-900/30 text-rose-600 dark:text-rose-200
                                               border border-rose-100 dark:border-rose-800 hover:bg-rose-100 dark:hover:bg-rose-900/60 text-xs">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <p class="text-[11px] text-slate-400 dark:text-slate-500">
                    ملاحظة: سيتم تجاهل أي إجابة فارغة تلقائياً، لكن يجب أن تبقى على الأقل إجابتان غير فارغتين مع إجابة صحيحة واحدة.
                </p>
            </div>

            {{-- أزرار الحفظ --}}
            <div class="flex items-center justify-end gap-2 pt-2">
                <a href="{{ route('tests.questions.index') }}"
                   class="px-3.5 py-2 rounded-xl text-xs sm:text-sm border border-slate-200 dark:border-slate-700
                          text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
                    إلغاء
                </a>

                <button type="submit"
                        class="px-4 py-2 rounded-xl text-xs sm:text-sm font-semibold
                               bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm">
                    حفظ السؤال والإجابات
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let answerIndex = {{ count(old('answers', ['', '', '', ''])) }};

    function addAnswerRow() {
        const wrapper = document.getElementById('answers-wrapper');
        if (!wrapper) return;

        if (answerIndex >= 6) {
            alert('الحد الأقصى 6 إجابات للسؤال الواحد.');
            return;
        }

        const row = document.createElement('div');
        row.className = 'answer-row flex items-center gap-2 mt-1';

        row.innerHTML = `
            <div class="flex-1">
                <input type="text"
                       name="answers[${answerIndex}]"
                       class="w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60
                              px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2
                              focus:ring-indigo-500/70 focus:border-indigo-500/70"
                       placeholder="نص الإجابة ${answerIndex + 1}">
            </div>
            <div class="flex items-center gap-2">
                <label class="inline-flex items-center gap-1 text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                    <input type="radio" name="correct_answer" value="${answerIndex}"
                           class="rounded border-slate-300 text-emerald-500 focus:ring-emerald-500">
                    <span>صحيحة</span>
                </label>
                <button type="button"
                        onclick="removeAnswerRow(this)"
                        class="inline-flex items-center justify-center w-7 h-7 rounded-lg
                               bg-rose-50 dark:bg-rose-900/30 text-rose-600 dark:text-rose-200
                               border border-rose-100 dark:border-rose-800 hover:bg-rose-100 dark:hover:bg-rose-900/60 text-xs">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
        `;

        wrapper.appendChild(row);
        answerIndex++;
    }

    function removeAnswerRow(btn) {
        const row = btn.closest('.answer-row');
        const wrapper = document.getElementById('answers-wrapper');
        if (!row || !wrapper) return;

        // ممنوع نحذف لدرجة يبقى أقل من 2 حقول موجودة
        const rows = wrapper.querySelectorAll('.answer-row');
        if (rows.length <= 2) {
            alert('لا يمكنك حذف أكثر من ذلك، يجب أن يبقى على الأقل إجابتان.');
            return;
        }

        row.remove();
    }
</script>
@endpush