@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-7xl 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-sky-400/25 shadow-2xl shadow-sky-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-sky-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/18 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                <div class="space-y-2 max-w-2xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-sky-300/30 text-[11px] text-sky-100">
                        <i class="fa-solid fa-sliders text-xs"></i>
                        <span>قواعد تفعيل سقراط — تشغيل/تعطيل ومحاذاة المستويات</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        قواعد التفعيل <span class="text-sky-300">Rules</span>
                    </h1>

                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
                        هذه القواعد تحدد: متى يشتغل سقراط؟ كم سؤال؟ وما هو نطاق المستوى؟  
                        مثال: غياب بدون عذر → 3 أسئلة → مستوى 1 إلى 4.
                    </p>
                </div>

                <a href="{{ route('superadmin.socratic.dashboard') }}"
                   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(session('success'))
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
                {{ session('success') }}
            </div>
        @endif

        @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

        {{-- CREATE/UPSERT RULE --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5 sm:p-6">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-bold text-white">إضافة / تحديث قاعدة</h2>
                    <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">إذا كانت القاعدة موجودة، يتم تحديثها تلقائيًا.</p>
                </div>
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/70">
                    <i class="fa-solid fa-wand-magic-sparkles text-[11px]"></i>
                    إعداد
                </span>
            </div>

            <form method="post" action="{{ route('superadmin.socratic.rules.store') }}"
                  class="mt-4 grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
                @csrf

                <div class="md:col-span-4">
                    <label class="text-[11px] text-slate-300/80">السياق (Context)</label>
                    <input name="context_type" value="{{ old('context_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-sky-500/50"
                           placeholder="absence / evaluation / live / decision">
                </div>

                <div class="md:col-span-3">
                    <label class="text-[11px] text-slate-300/80">المُحفّز (Trigger)</label>
                    <input name="trigger_key" value="{{ old('trigger_key') }}"
                           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"
                           placeholder="absent / late / low_score / manual">
                </div>

                <div class="md:col-span-1">
                    <label class="text-[11px] text-slate-300/80">L Min</label>
                    <input type="number" min="1" max="4" name="level_min" value="{{ old('level_min',1) }}"
                           class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/20">
                </div>

                <div class="md:col-span-1">
                    <label class="text-[11px] text-slate-300/80">L Max</label>
                    <input type="number" min="1" max="4" name="level_max" value="{{ old('level_max',4) }}"
                           class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/20">
                </div>

                <div class="md:col-span-1">
                    <label class="text-[11px] text-slate-300/80">عدد الأسئلة</label>
                    <input type="number" min="1" max="20" name="questions_limit" value="{{ old('questions_limit',3) }}"
                           class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500/50">
                </div>

                <div class="md:col-span-2 flex items-center gap-4 mt-2">
                    <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="md:col-span-12">
                    <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-sky-300 via-sky-200 to-fuchsia-200 shadow-lg shadow-sky-500/25
                        hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-floppy-disk ms-2 text-[12px]"></i>
                        حفظ القاعدة
                    </button>
                </div>
            </form>
        </div>

        {{-- RULES LIST --}}
        <div class="grid gap-3">
            @forelse($rules as $r)
                <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/85 p-4 shadow-xl">
                    <div class="pointer-events-none absolute -top-16 -right-16 w-56 h-56 rounded-full bg-sky-500/10 blur-3xl"></div>

                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                    {{ $r->context_type }}
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                    Trigger: {{ $r->trigger_key }}
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                    L{{ $r->level_min }} → L{{ $r->level_max }}
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                    {{ $r->questions_limit }} أسئلة
                                </span>

                                @if((int)$r->is_active===1)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/25 text-emerald-200 text-[11px] font-bold">
                                        مفعّلة
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-amber-500/10 border border-amber-400/25 text-amber-200 text-[11px] font-bold">
                                        متوقفة
                                    </span>
                                @endif
                            </div>

                            <div class="mt-2 text-[11px] text-slate-300/80">
                                قاعدة رقم: <span class="text-white font-semibold">#{{ $r->id }}</span>
                                • تم إنشاؤها: <span class="text-slate-200/80">{{ $r->created_at }}</span>
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-2">
                            <form method="post" action="{{ route('superadmin.socratic.rules.toggle', $r->id) }}">
                                @csrf
                                <button class="px-4 py-2 rounded-2xl bg-black/40 border border-white/15 text-white/90 text-xs hover:bg-white/10 transition">
                                    <i class="fa-solid fa-power-off ms-2 text-[11px]"></i>
                                    تبديل التفعيل
                                </button>
                            </form>

                            {{-- تعديل سريع (نفس منطقك: PUT) --}}
                            <form method="post" action="{{ route('superadmin.socratic.rules.update', $r->id) }}"
                                  class="flex flex-wrap items-center gap-2">
                                @csrf
                                @method('PUT')

                                <input type="number" min="1" max="4" name="level_min" value="{{ $r->level_min }}"
                                       class="w-20 rounded-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">

                                <input type="number" min="1" max="4" name="level_max" value="{{ $r->level_max }}"
                                       class="w-20 rounded-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">

                                <input type="number" min="1" max="20" name="questions_limit" value="{{ $r->questions_limit }}"
                                       class="w-24 rounded-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">

                                <label class="inline-flex items-center gap-2 text-xs text-white/80">
                                    <input type="checkbox" name="is_active" value="1" @checked((int)$r->is_active===1)>
                                    مفعّل
                                </label>

                                <button class="px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                                    bg-gradient-to-r from-sky-300 via-sky-200 to-fuchsia-200 shadow-lg shadow-sky-500/20
                                    hover:scale-[1.01] active:scale-100 transition">
                                    <i class="fa-solid fa-floppy-disk ms-2 text-[11px]"></i>
                                    حفظ
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-3xl border border-dashed border-white/15 bg-black/30 px-4 py-10 text-center text-slate-300/80 text-sm">
                    لا توجد قواعد حتى الآن.
                </div>
            @endforelse
        </div>

    </div>
</div>
@endsection