@extends('layouts.superadmin')

@section('title','إضافة سؤال سقراط')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-4xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6 rtl">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-emerald-400/25 shadow-2xl shadow-emerald-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-emerald-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-cyan-500/18 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-emerald-300/30 text-[11px] text-emerald-100">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>إضافة سؤال جديد — بنك أسئلة سقراط</span>
                    </div>
                    <h1 class="mt-2 text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        إضافة سؤال <span class="text-emerald-300">ملحمي</span>
                    </h1>
                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 mt-2">
                        اكتب السؤال بدقة… لأنه راح يصير جزء من محرك الوعي داخل المنظومة.
                    </p>
                </div>

                <a href="{{ route('superadmin.socratic.questions.index') }}"
                   class="px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                    <i class="fa-solid fa-arrow-right ms-2 text-[11px]"></i>
                    رجوع للبنك
                </a>
            </div>
        </div>

        @if($errors->any())
            <div class="rounded-3xl border border-rose-500/25 bg-rose-500/10 px-5 py-4 text-rose-200">
                <div class="font-extrabold mb-2 text-sm">يوجد أخطاء — رجاءً صحّحها:</div>
                <ul class="list-disc pl-5 text-sm text-rose-100/90 space-y-1">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="post" action="{{ route('superadmin.socratic.questions.store') }}"
              class="rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5 sm:p-6 space-y-4">
            @csrf

            <div>
                <label class="text-[11px] text-slate-300/80">السياق (Context Type)</label>
                <input name="context_type" value="{{ old('context_type','absence') }}"
                       class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50">
                <p class="text-[11px] text-slate-300/70 mt-1">مثال: absence / evaluation / live / decision</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="text-[11px] text-slate-300/80">المستوى</label>
                    <select name="level"
                            class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/50">
                        @for($i=1;$i<=4;$i++)
                            <option value="{{ $i }}" @selected(old('level',1)==$i)>المستوى {{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div>
                    <label class="text-[11px] text-slate-300/80">نوع الإجابة</label>
                    <select name="question_type"
                            class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/50">
                        <option value="text" @selected(old('question_type','text')==='text')>نص (Text)</option>
                        <option value="choice" @selected(old('question_type')==='choice')>اختيارات (Choice)</option>
                        <option value="scale" @selected(old('question_type')==='scale')>مقياس (Scale)</option>
                    </select>
                </div>

                <div>
                    <label class="text-[11px] text-slate-300/80">ترتيب العرض</label>
                    <input name="sort_order" type="number" min="0" value="{{ old('sort_order',0) }}"
                           class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-white/20">
                </div>
            </div>

            <div>
                <label class="text-[11px] text-slate-300/80">نص السؤال</label>
                <textarea name="question_text" rows="5"
                          class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/50"
                          placeholder="اكتب السؤال هنا…">{{ old('question_text') }}</textarea>
            </div>

            <div class="flex flex-wrap items-center gap-6">
                <label class="inline-flex items-center gap-2 text-sm text-white/80">
                    <input type="checkbox" name="is_required" value="1" @checked(old('is_required',1))>
                    سؤال إلزامي
                </label>

                <label class="inline-flex items-center gap-2 text-sm text-white/80">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active',1))>
                    تفعيل السؤال
                </label>
            </div>

            <div class="flex flex-col sm:flex-row gap-2 pt-2">
                <button class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-sm font-bold text-slate-900
                    bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200 shadow-lg shadow-emerald-500/25
                    hover:scale-[1.01] active:scale-100 transition">
                    <i class="fa-solid fa-floppy-disk ms-2 text-[12px]"></i>
                    حفظ السؤال
                </button>

                <a href="{{ route('superadmin.socratic.questions.index') }}"
                   class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-sm hover:bg-white/15 transition">
                    إلغاء
                </a>
            </div>
        </form>

    </div>
</div>
@endsection