@extends('layouts.moderator')

@section('title', 'إضافة تقييم جديد')
@section('page-title', 'إضافة تقييم جديد')

@section('content')
<div class="min-h-screen rtl py-6 sm:py-8 bg-gradient-to-b from-slate-950 via-indigo-950/70 to-slate-950">

  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- ✅ TOP BAR (Breadcrumb سقراط) --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <nav class="flex items-center gap-2 text-[12px] text-slate-200/70">
        <a href="{{ route('moderator.evaluations.index') }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/30 border border-white/10
                  hover:border-cyan-400/30 hover:bg-white/5 transition">
          <svg class="w-4 h-4 text-cyan-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          <span>إدارة التقييمات</span>
        </a>

        <svg class="w-4 h-4 text-white/30 rotate-180" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd"></path>
        </svg>

        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-white font-bold">
          <svg class="w-4 h-4 text-fuchsia-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          إضافة تقييم جديد
        </span>
      </nav>

      <div class="flex items-center gap-2">
        <a href="{{ route('moderator.evaluations.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-xs hover:bg-white/15 transition">
          <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
          رجوع للإدارة
        </a>
      </div>
    </div>

    {{-- ✅ HERO (ستايل سقراط — أجمل من الأسود) --}}
    <div class="relative overflow-hidden rounded-3xl
                bg-gradient-to-br from-slate-900/95 via-indigo-950/85 to-slate-950/90
                border border-cyan-400/20 shadow-2xl shadow-cyan-500/10">

      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-emerald-500/20 blur-3xl"></div>
      <div class="pointer-events-none absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,_#a5f3fc_0,_transparent_55%)]"></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-6">

        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-cyan-300/30 text-[11px] text-cyan-100">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>نموذج تقييم احترافي — الإدارة العليا</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            إضافة تقييم جديد
            <span class="block mt-2 text-[12px] sm:text-sm font-normal text-slate-200/85">
              قيّم بعدل، وثّق الحضور بدقة — كل تقييم ينعكس على ملف العضو والتحليلات.
            </span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            اكتب بوضوح وبإملاء صحيح.
            عند اختيار <b>غياب بعذر</b> أو <b>غياب بدون عذر</b>:
            يتم تصفير النقاط وتعطيل ملاحظات المقيّم تلقائيًا، ويصبح <b>سبب العذر</b> إلزاميًا.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <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/80">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              مراجعة آلية بالذكاء الاصطناعي
            </span>
            <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/80">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              السمعة = نقاط + انضباط + ملاحظات
            </span>
            <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/80">
              <span class="w-1.5 h-1.5 rounded-full bg-amber-300"></span>
              الغياب محفوظ ويؤثر على المميزات
            </span>
          </div>
        </div>

        {{-- ✅ SIDE CARD --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-3xl bg-black/40 border border-white/15 px-4 py-4 text-xs text-slate-100 space-y-3 shadow-xl">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
                </svg>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">المستخدم الحالي</div>
                <div class="font-extrabold text-sm text-white truncate">{{ auth()->user()->name }}</div>
                <div class="text-[11px] text-slate-400">الإدارة العليا</div>
              </div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 px-3 py-3 text-[12px] text-slate-200/85 leading-relaxed">
              تذكير: الصياغة الضعيفة أو الإملاء الخاطئ قد يغيّر تفسير التقييم.
              <span class="text-white/70">اكتب بهدوء ووضوح، وسجّل الغياب بدقة.</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- ✅ FORM CARD (ستايل سقراط) --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/70 shadow-2xl">
      <div class="pointer-events-none absolute -bottom-28 -right-24 w-96 h-96 rounded-full bg-fuchsia-500/10 blur-3xl"></div>

      <div class="px-5 sm:px-6 py-4 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">Wizard</div>
            <h3 class="text-base font-extrabold text-white">نموذج التقييم — سلايد</h3>
            <p class="text-[12px] text-slate-200/70">
              تنقل بين الخطوات ثم احفظ في النهاية.
            </p>
          </div>
        </div>

        <div class="text-[11px] text-slate-200/60 bg-black/30 border border-white/10 rounded-2xl px-3 py-2">
          عند وجود عذر رسمي يغطي التاريخ: يتم تفعيل الغياب تلقائيًا وقفل التعديل.
        </div>
      </div>

      <div class="p-5 sm:p-6">
        <form action="{{ route('moderator.evaluations.store') }}" method="POST" id="evaluationForm">
          @csrf

          <meta name="csrf-token" content="{{ csrf_token() }}">

          {{-- ✅ Toast (للسلايد بدل alert) --}}
          <div id="wizardToast" class="hidden mb-5 rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-100 px-4 py-3 text-sm">
            <span id="wizardToastText">—</span>
          </div>

          {{-- ===================== ADD: Auto Absence Banner (Epic) ===================== --}}
          <div id="autoAbsenceBanner" class="hidden mb-6 rounded-3xl border border-amber-300/40
                      bg-gradient-to-br from-amber-500/10 via-slate-950/70 to-slate-950/70
                      px-4 py-4 shadow-xl">
            <div class="flex items-start gap-3">
              <div class="h-10 w-10 rounded-2xl bg-amber-500/15 border border-amber-400/30 flex items-center justify-center">
                <svg class="w-5 h-5 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"></path>
                </svg>
              </div>

              <div class="flex-1">
                <div class="flex items-center justify-between gap-2">
                  <div class="text-sm font-extrabold text-amber-100">
                    تم تطبيق غياب رسمي تلقائيًا لهذا العضو
                  </div>
                  <span class="text-[11px] font-bold px-2 py-0.5 rounded-full bg-amber-200/10 text-amber-100 border border-amber-300/25">
                    Auto Excuse Mode
                  </span>
                </div>

                <div class="mt-1 text-[12px] text-amber-100/90 leading-relaxed">
                  تم ضبط <span class="font-bold">غياب بعذر</span> تلقائيًا وتعطيل النقاط وملاحظات المقيّم لأن العضو لديه عذر رسمي يغطي تاريخ التقييم.
                </div>

                <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-2">
                  <div class="rounded-2xl bg-white/5 border border-amber-200/20 p-3">
                    <div class="text-[11px] font-bold text-amber-200/90 mb-1">الفترة</div>
                    <div class="text-[12px] font-extrabold text-amber-50" id="autoAbsenceRange">—</div>
                  </div>
                  <div class="rounded-2xl bg-white/5 border border-amber-200/20 p-3">
                    <div class="text-[11px] font-bold text-amber-200/90 mb-1">المدة / المتبقي</div>
                    <div class="text-[12px] font-extrabold text-amber-50">
                      <span id="autoAbsenceTotalDays">—</span> يوم · متبقي <span id="autoAbsenceRemainingDays">—</span> يوم
                    </div>
                  </div>
                  <div class="rounded-2xl bg-white/5 border border-amber-200/20 p-3">
                    <div class="text-[11px] font-bold text-amber-200/90 mb-1">سبب العذر</div>
                    <div class="text-[12px] text-amber-50 leading-relaxed" id="autoAbsenceReason">—</div>
                  </div>
                </div>

                <div class="mt-3 text-[11px] text-amber-100/70">
                  ملاحظة: لا يمكن تغيير حالة الحضور أثناء وجود عذر رسمي يغطي تاريخ التقييم.
                </div>
              </div>
            </div>
          </div>
          {{-- ===================== END ADD ===================== --}}

          {{-- ✅ Progress Steps (Stepper) --}}
          <div id="wizardTopAnchor" class="mb-6 rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
            <div class="flex items-center justify-between gap-3 mb-4">
              <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                  </svg>
                </div>
                <div>
                  <div class="text-[11px] text-white/60">Progress</div>
                  <div class="font-extrabold text-white text-sm">خطوات إدخال التقييم</div>
                </div>
              </div>

              <div id="progressLabel" class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
                0/4 مكتمل
              </div>
            </div>

            <div class="h-2 rounded-full bg-white/10 overflow-hidden">
              <div id="progressBar" class="h-full rounded-full bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200" style="width:0%"></div>
            </div>

            <div class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-3" id="progressSteps">
              <button type="button" data-step="1" onclick="setWizardStep(1)"
                      class="step-chip flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition">
                <span data-step-icon class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/70 font-extrabold">1</span>
                <div class="text-right min-w-0">
                  <div class="font-extrabold truncate">نوع المستخدمين</div>
                  <div class="text-[11px] text-white/50" data-step-status>قادم</div>
                </div>
              </button>

              <button type="button" data-step="2" onclick="setWizardStep(2)"
                      class="step-chip flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition">
                <span data-step-icon class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/70 font-extrabold">2</span>
                <div class="text-right min-w-0">
                  <div class="font-extrabold truncate">اختيار المستخدم</div>
                  <div class="text-[11px] text-white/50" data-step-status>قادم</div>
                </div>
              </button>

              <button type="button" data-step="3" onclick="setWizardStep(3)"
                      class="step-chip flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition">
                <span data-step-icon class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/70 font-extrabold">3</span>
                <div class="text-right min-w-0">
                  <div class="font-extrabold truncate">تاريخ + حضور</div>
                  <div class="text-[11px] text-white/50" data-step-status>قادم</div>
                </div>
              </button>

              <button type="button" data-step="4" onclick="setWizardStep(4)"
                      class="step-chip flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition">
                <span data-step-icon class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/70 font-extrabold">4</span>
                <div class="text-right min-w-0">
                  <div class="font-extrabold truncate">نقاط + ملاحظات</div>
                  <div class="text-[11px] text-white/50" data-step-status>قادم</div>
                </div>
              </button>
            </div>

            <div id="progressHint" class="mt-3 text-[11px] text-white/50">
              ابدأ باختيار نوع المستخدمين.
            </div>
          </div>

          {{-- ✅ WIZARD SLIDES --}}
          <div class="rounded-3xl border border-white/10 bg-black/20 overflow-hidden">
            {{-- نخلي السلايد Track بـ LTR عشان الحسابات تكون ثابتة --}}
            <div dir="ltr" class="overflow-hidden">
              <div id="wizardTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(0%);">

                {{-- ================== SLIDE 1 ================== --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div id="sectionUserType" class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
                    <div class="flex items-center justify-between gap-3 mb-4">
                      <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 4v16m8-8H4"></path>
                          </svg>
                        </div>
                        <div>
                          <div class="text-[11px] text-white/60">Step 1</div>
                          <div class="font-extrabold text-white text-sm">اختر نوع المستخدمين</div>
                        </div>
                      </div>

                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
                        يفضل اختيار النوع ثم المستخدم
                      </span>
                    </div>

                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                      <button type="button" onclick="selectUserType('all')"
                              class="user-type-btn rounded-3xl border border-white/10 bg-white/5 p-4 text-center text-[12px] text-white/80 hover:border-cyan-400/30 hover:bg-white/10 transition"
                              data-type="all">
                        <div class="w-10 h-10 mx-auto mb-2 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
                          <svg class="w-5 h-5 text-slate-200/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                          </svg>
                        </div>
                        جميع المستخدمين
                      </button>

                      <button type="button" onclick="selectUserType('moderators')"
                              class="user-type-btn rounded-3xl border border-white/10 bg-white/5 p-4 text-center text-[12px] text-white/80 hover:border-cyan-400/30 hover:bg-white/10 transition"
                              data-type="moderators">
                        <div class="w-10 h-10 mx-auto mb-2 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
                          <svg class="w-5 h-5 text-purple-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                          </svg>
                        </div>
                        المشرفين
                      </button>

                      <button type="button" onclick="selectUserType('official_members')"
                              class="user-type-btn rounded-3xl border border-white/10 bg-white/5 p-4 text-center text-[12px] text-white/80 hover:border-cyan-400/30 hover:bg-white/10 transition"
                              data-type="official_members">
                        <div class="w-10 h-10 mx-auto mb-2 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
                          <svg class="w-5 h-5 text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                          </svg>
                        </div>
                        الأعضاء الرسميين
                      </button>

                      <button type="button" onclick="selectUserType('beta_members')"
                              class="user-type-btn rounded-3xl border border-white/10 bg-white/5 p-4 text-center text-[12px] text-white/80 hover:border-cyan-400/30 hover:bg-white/10 transition"
                              data-type="beta_members">
                        <div class="w-10 h-10 mx-auto mb-2 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
                          <svg class="w-5 h-5 text-orange-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
                          </svg>
                        </div>
                        أعضاء بيتا
                      </button>
                    </div>

                    <input type="hidden" id="selectedUserType" name="user_type" value="{{ old('user_type') }}">

                    <div class="mt-4 flex items-center justify-end">
                      <button type="button" onclick="wizardNext()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                                     bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200 shadow-lg shadow-cyan-500/10 hover:scale-[1.01] active:scale-100 transition">
                        التالي
                        <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </section>

                {{-- ================== SLIDE 2 ================== --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
                    <div class="flex items-center justify-between gap-3 mb-4">
                      <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                          </svg>
                        </div>
                        <div>
                          <div class="text-[11px] text-white/60">Step 2</div>
                          <div class="font-extrabold text-white text-sm">اختر المستخدم</div>
                        </div>
                      </div>

                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
                        لازم تختار نوع قبل المستخدم
                      </span>
                    </div>

                    <div id="userSelectionPlaceholder" class="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-[12px] text-white/70">
                      اختر نوع المستخدمين أولاً من الخطوة السابقة.
                    </div>

                    <div class="mt-4" id="userSelectionDiv" style="display:none;">
                      <label for="user_id" class="block text-[12px] text-slate-200/80 mb-2">
                        اختر المستخدم
                      </label>

                      <select id="user_id" name="user_id" required
                              class="w-full px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-sm text-white
                                     focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                        <option value="" disabled selected>اختر مستخدماً...</option>
                      </select>

                      @error('user_id')
                        <p class="text-rose-300 text-[12px] mt-2">{{ $message }}</p>
                      @enderror
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                      <button type="button" onclick="wizardPrev()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <svg class="w-4 h-4 ms-2 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                        السابق
                      </button>

                      <button type="button" onclick="wizardNext()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                                     bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200 shadow-lg shadow-cyan-500/10 hover:scale-[1.01] active:scale-100 transition">
                        التالي
                        <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </section>

                {{-- ================== SLIDE 3 ================== --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div id="sectionBasics" class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
                    <div class="flex items-center gap-3 mb-4">
                      <div class="w-9 h-9 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 7V3m8 4V3M5 11h14M5 19h14M6 7h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2z"></path>
                        </svg>
                      </div>
                      <div>
                        <div class="text-[11px] text-white/60">Step 3</div>
                        <div class="font-extrabold text-white text-sm">تاريخ التقييم + حالة الحضور</div>
                      </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label for="evaluation_date" class="block text-[12px] text-slate-200/80 mb-2">
                          تاريخ التقييم
                        </label>
                        <input type="date" id="evaluation_date" name="evaluation_date"
                               value="{{ old('evaluation_date', now()->format('Y-m-d')) }}" required
                               class="w-full px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                        @error('evaluation_date')
                          <p class="text-rose-300 text-[12px] mt-2">{{ $message }}</p>
                        @enderror
                      </div>

                      <div>
                        <div class="flex items-center justify-between mb-2">
                          <label for="attendance_status" class="block text-[12px] text-slate-200/80">
                            حالة الحضور
                          </label>
                          <span class="text-[11px] text-white/50">
                            الغياب يوقف النقاط والملاحظات
                          </span>
                        </div>

                        <select id="attendance_status" name="attendance_status" required
                                class="w-full px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-sm text-white
                                       focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                          <option value="" disabled {{ old('attendance_status') ? '' : 'selected' }}>
                            اختر حالة الحضور...
                          </option>
                          <option value="present" @selected(old('attendance_status') == 'present')>حاضر</option>
                          <option value="absent_with_excuse" @selected(old('attendance_status') == 'absent_with_excuse')>غائب بعذر</option>
                          <option value="absent_without_excuse" @selected(old('attendance_status') == 'absent_without_excuse')>غائب بدون عذر</option>
                        </select>

                        @error('attendance_status')
                          <p class="text-rose-300 text-[12px] mt-2">{{ $message }}</p>
                        @enderror
                      </div>
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                      <button type="button" onclick="wizardPrev()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <svg class="w-4 h-4 ms-2 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                        السابق
                      </button>

                      <button type="button" onclick="wizardNext()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                                     bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200 shadow-lg shadow-cyan-500/10 hover:scale-[1.01] active:scale-100 transition">
                        التالي
                        <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </section>

                {{-- ================== SLIDE 4 ================== --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
                    <div class="flex items-center gap-3 mb-4">
                      <div class="w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                      </div>
                      <div>
                        <div class="text-[11px] text-white/60">Step 4</div>
                        <div class="font-extrabold text-white text-sm">النقاط + الملاحظات + الحفظ</div>
                      </div>
                    </div>

                    {{-- ✅ Points Section --}}
                    <div id="pointsSection" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                      {{-- واتساب --}}
                      <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
                        <div class="flex items-center justify-between mb-3">
                          <div class="font-bold text-white text-sm">نقاط واتساب</div>
                          <span class="text-[11px] text-white/50">Presence</span>
                        </div>

                        <div class="space-y-3">
                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="whatsapp_presence" value="0"
                                   {{ old('whatsapp_presence', '0') == '0' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-emerald-500 border-white/20 focus:ring-emerald-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">0 نقاط</div>
                              <div class="text-[11px] text-white/60">لم يتواجد إطلاقاً</div>
                            </div>
                          </label>

                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="whatsapp_presence" value="1"
                                   {{ old('whatsapp_presence') == '1' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-emerald-500 border-white/20 focus:ring-emerald-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">1 نقطة</div>
                              <div class="text-[11px] text-white/60">كان في النهار فقط أو الليل فقط</div>
                            </div>
                          </label>

                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="whatsapp_presence" value="2"
                                   {{ old('whatsapp_presence') == '2' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-emerald-500 border-white/20 focus:ring-emerald-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">2 نقطة</div>
                              <div class="text-[11px] text-white/60">كان متواجداً طوال اليوم</div>
                            </div>
                          </label>
                        </div>
                      </div>

                      {{-- تيكتوك --}}
                      <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
                        <div class="flex items-center justify-between mb-3">
                          <div class="font-bold text-white text-sm">نقاط تيكتوك</div>
                          <span class="text-[11px] text-white/50">Interaction</span>
                        </div>

                        <div class="space-y-3">
                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="tiktok_interaction" value="0"
                                   {{ old('tiktok_interaction', '0') == '0' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-fuchsia-500 border-white/20 focus:ring-fuchsia-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">0 نقاط</div>
                              <div class="text-[11px] text-white/60">لم يتفاعل إطلاقاً</div>
                            </div>
                          </label>

                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="tiktok_interaction" value="1"
                                   {{ old('tiktok_interaction') == '1' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-fuchsia-500 border-white/20 focus:ring-fuchsia-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">1 نقطة</div>
                              <div class="text-[11px] text-white/60">تفاعل في النهار فقط أو الليل فقط</div>
                            </div>
                          </label>

                          <label class="flex items-start cursor-pointer p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition">
                            <input type="radio" name="tiktok_interaction" value="2"
                                   {{ old('tiktok_interaction') == '2' ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-fuchsia-500 border-white/20 focus:ring-fuchsia-500 focus:ring-2">
                            <div class="mr-3">
                              <div class="text-sm font-bold text-white">2 نقطة</div>
                              <div class="text-[11px] text-white/60">تفاعل طوال اليوم</div>
                            </div>
                          </label>
                        </div>
                      </div>
                    </div>

                    {{-- ✅ Notes --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                      <div>
                        <div class="flex items-center justify-between mb-2">
                          <label for="excuse_reason" class="block text-[12px] text-slate-200/80">
                            سبب العذر
                          </label>
                          <span id="excuseRequiredBadge"
                                class="hidden text-[11px] px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-200 border border-amber-400/25">
                            إجباري في حالة الغياب
                          </span>
                        </div>

                        <textarea id="excuse_reason" name="excuse_reason" rows="4"
                                  placeholder="اكتب سبب العذر إذا كان هناك غياب..."
                                  class="w-full px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-sm text-white
                                         focus:outline-none focus:ring-2 focus:ring-cyan-500/30">{{ old('excuse_reason') }}</textarea>
                      </div>

                      <div>
                        <label for="evaluator_notes" class="block text-[12px] text-slate-200/80 mb-2">
                          ملاحظات المُقيِّم
                        </label>

                        <textarea id="evaluator_notes" name="evaluator_notes" rows="4"
                                  placeholder="اكتب ملاحظاتك حول التقييم..."
                                  class="w-full px-3 py-2 rounded-2xl bg-black/40 border border-white/15 text-sm text-white resize-none
                                         focus:outline-none focus:ring-2 focus:ring-cyan-500/30">{{ old('evaluator_notes') }}</textarea>
                      </div>
                    </div>

                    {{-- ✅ Show Evaluator Name --}}
                    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-fuchsia-500/10 via-black/20 to-cyan-500/10 p-4 sm:p-5 mb-6">
                      <div class="flex items-start gap-3">
                        <div class="flex items-center h-5">
                          <input type="checkbox"
                                 name="show_evaluator_name"
                                 id="show_evaluator_name"
                                 value="1"
                                 {{ old('show_evaluator_name', true) ? 'checked' : '' }}
                                 class="h-4 w-4 text-fuchsia-500 focus:ring-fuchsia-500 border-white/20 rounded">
                        </div>
                        <div class="min-w-0">
                          <label for="show_evaluator_name" class="font-extrabold text-white cursor-pointer">
                            إظهار اسم المُقيِّم
                          </label>
                          <p class="text-[12px] text-white/70 mt-1 leading-relaxed">
                            عند تفعيل هذا الخيار، سيتم إظهار اسمك للعضو. لإخفاء هويتك، أزل التحديد.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="flex items-center justify-between mb-4">
                      <button type="button" onclick="wizardPrev()"
                              class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <svg class="w-4 h-4 ms-2 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5l7 7-7 7"></path>
                        </svg>
                        السابق
                      </button>

                      <span class="text-[11px] text-white/50">هذه آخر خطوة — الآن احفظ التقييم</span>
                    </div>

                    {{-- ✅ ACTION BUTTONS --}}
                    <div class="flex flex-col sm:flex-row-reverse gap-3">
                      <button type="submit"
                              class="inline-flex items-center justify-center px-6 py-3 rounded-2xl text-sm font-extrabold text-slate-950
                                     bg-gradient-to-r from-emerald-200 via-cyan-200 to-fuchsia-200
                                     shadow-lg shadow-emerald-500/15 hover:scale-[1.01] active:scale-100 transition">
                        <svg class="w-5 h-5 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        حفظ التقييم
                      </button>

                      <a href="{{ route('moderator.evaluations.index') }}"
                         class="inline-flex items-center justify-center px-6 py-3 rounded-2xl text-sm font-bold
                                bg-white/10 border border-white/15 text-white/90 hover:bg-white/15 transition">
                        <svg class="w-5 h-5 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        إلغاء
                      </a>
                    </div>

                  </div>
                </section>

              </div>
            </div>
          </div>

        </form>
      </div>
    </div>

  </div>
</div>

<script>
// ===================== Wizard / Slides =====================
let __wizardStep = 1;

function wizardToast(msg){
  const box = document.getElementById('wizardToast');
  const t   = document.getElementById('wizardToastText');
  if(!box || !t) return alert(msg);
  t.textContent = msg;
  box.classList.remove('hidden');
  clearTimeout(window.__wizToastTimer);
  window.__wizToastTimer = setTimeout(() => box.classList.add('hidden'), 3500);
}

function setWizardStep(step){
  step = Math.max(1, Math.min(4, parseInt(step || 1, 10)));
  __wizardStep = step;

  const track = document.getElementById('wizardTrack');
  if(track){
    const pct = (step - 1) * 100;
    track.style.transform = `translateX(-${pct}%)`;
  }

  // نرفعك فوق
  const top = document.getElementById('wizardTopAnchor');
  if(top) top.scrollIntoView({behavior:'smooth', block:'start'});

  updateProgressSteps();
}

function wizardPrev(){
  setWizardStep(__wizardStep - 1);
}

function validateStep(step){
  const typeEl = document.getElementById('selectedUserType');
  const userEl = document.getElementById('user_id');
  const dateEl = document.getElementById('evaluation_date');
  const attEl  = document.getElementById('attendance_status');
  const excEl  = document.getElementById('excuse_reason');

  const type = typeEl ? String(typeEl.value || '').trim() : '';
  const user = userEl ? String(userEl.value || '').trim() : '';
  const date = dateEl ? String(dateEl.value || '').trim() : '';
  const att  = attEl  ? String(attEl.value || '').trim()  : '';
  const exc  = excEl  ? String(excEl.value || '').trim()  : '';

  const isAbsent = (att === 'absent_with_excuse' || att === 'absent_without_excuse');

  if(step === 1 && !type){
    wizardToast('اختر نوع المستخدمين أولاً.');
    return false;
  }
  if(step === 2 && !user){
    wizardToast('اختر مستخدم قبل المتابعة.');
    return false;
  }
  if(step === 3){
    if(!date){ wizardToast('حدد تاريخ التقييم.'); return false; }
    if(!att){ wizardToast('اختر حالة الحضور.'); return false; }
  }
  if(step === 4){
    if(isAbsent && !exc){
      wizardToast('سبب العذر مطلوب في حالة الغياب.');
      return false;
    }
  }
  return true;
}

function wizardNext(){
  if(!validateStep(__wizardStep)) return;
  setWizardStep(__wizardStep + 1);
}

// ===================== Progress Steps Helpers =====================
function __setStepUI(stepEl, state){
  if(!stepEl) return;

  const icon = stepEl.querySelector('[data-step-icon]');
  const status = stepEl.querySelector('[data-step-status]');

  stepEl.classList.remove(
    'bg-white/5','border-white/10','text-white/70',
    'bg-cyan-500/10','border-cyan-400/35','text-white','ring-1','ring-cyan-400/30',
    'bg-emerald-500/10','border-emerald-400/25','text-emerald-100','ring-emerald-400/20'
  );

  if(icon){
    icon.classList.remove(
      'bg-white/5','border-white/10','text-white/70',
      'bg-cyan-500/15','border-cyan-400/25','text-cyan-200',
      'bg-emerald-500/15','border-emerald-400/25','text-emerald-200'
    );
  }

  if(state === 'done'){
    stepEl.classList.add('bg-emerald-500/10','border','border-emerald-400/25','text-emerald-100');
    if(icon) icon.classList.add('bg-emerald-500/15','border','border-emerald-400/25','text-emerald-200');
    if(status) status.textContent = 'مكتمل';
  } else if(state === 'doneActive'){
    stepEl.classList.add('bg-emerald-500/10','border','border-emerald-400/25','text-emerald-100','ring-1','ring-emerald-400/20');
    if(icon) icon.classList.add('bg-emerald-500/15','border','border-emerald-400/25','text-emerald-200');
    if(status) status.textContent = 'هنا';
  } else if(state === 'active'){
    stepEl.classList.add('bg-cyan-500/10','border','border-cyan-400/35','text-white','ring-1','ring-cyan-400/30');
    if(icon) icon.classList.add('bg-cyan-500/15','border','border-cyan-400/25','text-cyan-200');
    if(status) status.textContent = 'الآن';
  } else {
    stepEl.classList.add('bg-white/5','border','border-white/10','text-white/70');
    if(icon) icon.classList.add('bg-white/5','border','border-white/10','text-white/70');
    if(status) status.textContent = 'قادم';
  }
}

function updateProgressSteps(){
  const typeEl = document.getElementById('selectedUserType');
  const userEl = document.getElementById('user_id');
  const dateEl = document.getElementById('evaluation_date');
  const attEl  = document.getElementById('attendance_status');
  const excEl  = document.getElementById('excuse_reason');

  const type = typeEl ? String(typeEl.value || '').trim() : '';
  const user = userEl ? String(userEl.value || '').trim() : '';
  const date = dateEl ? String(dateEl.value || '').trim() : '';
  const att  = attEl  ? String(attEl.value || '').trim()  : '';
  const exc  = excEl  ? String(excEl.value || '').trim()  : '';

  const isAbsent = (att === 'absent_with_excuse' || att === 'absent_without_excuse');

  const step1Done = !!type;
  const step2Done = !!user;
  const step3Done = !!date && !!att;
  const step4Done = step3Done && (!isAbsent || (exc.length > 0));

  const steps = [step1Done, step2Done, step3Done, step4Done];
  const doneCount = steps.filter(Boolean).length;

  for(let i=1;i<=4;i++){
    const el = document.querySelector(`[data-step="${i}"]`);
    if(!el) continue;

    const isActive = (i === __wizardStep);
    let state = 'todo';
    if(steps[i-1]) state = isActive ? 'doneActive' : 'done';
    else if(isActive) state = 'active';
    __setStepUI(el, state);
  }

  const bar = document.getElementById('progressBar');
  const label = document.getElementById('progressLabel');
  const hint = document.getElementById('progressHint');

  if(bar){
    const pct = Math.round((doneCount / 4) * 100);
    bar.style.width = pct + '%';
  }
  if(label){
    label.textContent = `${doneCount}/4 مكتمل`;
  }
  if(hint){
    let msg = 'ابدأ باختيار نوع المستخدمين.';
    if(step1Done && !step2Done) msg = 'انتقل لاختيار المستخدم.';
    else if(step2Done && !step3Done) msg = 'حدد التاريخ وحالة الحضور.';
    else if(step3Done && !step4Done){
      msg = isAbsent ? 'سبب العذر إجباري الآن — اكتبه ثم احفظ.' : 'راجع النقاط/الملاحظات ثم احفظ.';
    } else if(step4Done){
      msg = 'جاهز للحفظ ✅';
    }
    hint.textContent = msg;
  }
}

function __suggestStep(){
  const typeEl = document.getElementById('selectedUserType');
  const userEl = document.getElementById('user_id');
  const dateEl = document.getElementById('evaluation_date');
  const attEl  = document.getElementById('attendance_status');
  const excEl  = document.getElementById('excuse_reason');

  const type = typeEl ? String(typeEl.value || '').trim() : '';
  const user = userEl ? String(userEl.value || '').trim() : '';
  const date = dateEl ? String(dateEl.value || '').trim() : '';
  const att  = attEl  ? String(attEl.value || '').trim()  : '';
  const exc  = excEl  ? String(excEl.value || '').trim()  : '';

  const isAbsent = (att === 'absent_with_excuse' || att === 'absent_without_excuse');

  if(!type) return 1;
  if(!user) return 2;
  if(!date || !att) return 3;
  if(isAbsent && !exc) return 4;
  return 4;
}
// ===================== END Wizard =====================


// ===================== ADD: Auto Approved Excuse Detector =====================
const AUTO_EXCUSE_CHECK_ENDPOINT = @json(route('moderator.evaluations.check-excuse-absence'));
const __OLD_USER_ID = @json(old('user_id'));
let __autoAbsenceLock = false;

function showAutoAbsenceBanner(payload){
  const box  = document.getElementById('autoAbsenceBanner');
  const r1   = document.getElementById('autoAbsenceRange');
  const rs   = document.getElementById('autoAbsenceReason');
  const td   = document.getElementById('autoAbsenceTotalDays');
  const rem  = document.getElementById('autoAbsenceRemainingDays');
  if(!box) return;

  if (r1)  r1.textContent  = payload?.from_date && payload?.to_date ? `${payload.from_date} → ${payload.to_date}` : '—';
  if (rs)  rs.textContent  = payload?.reason ?? '—';
  if (td)  td.textContent  = payload?.total_days ?? '—';
  if (rem) rem.textContent = payload?.remaining_days ?? '—';

  box.classList.remove('hidden');
}

function hideAutoAbsenceBanner(){
  const box = document.getElementById('autoAbsenceBanner');
  if(box) box.classList.add('hidden');
}

function lockAttendanceSelect(lock){
  const attendanceSelect = document.getElementById('attendance_status');
  if(!attendanceSelect) return;

  if(lock){
    attendanceSelect.classList.add('pointer-events-none', 'opacity-80');
    attendanceSelect.setAttribute('tabindex','-1');
    attendanceSelect.setAttribute('aria-disabled','true');
    attendanceSelect.title = 'مقفل تلقائيًا بسبب وجود غياب رسمي يغطي تاريخ التقييم';
  } else {
    attendanceSelect.classList.remove('pointer-events-none', 'opacity-80');
    attendanceSelect.removeAttribute('tabindex');
    attendanceSelect.removeAttribute('aria-disabled');
    attendanceSelect.removeAttribute('title');
  }
}

function lockExcuseReason(lock){
  const excuseTextarea = document.getElementById('excuse_reason');
  if(!excuseTextarea) return;

  if(lock){
    excuseTextarea.readOnly = true;
    excuseTextarea.classList.add('bg-amber-50', 'dark:bg-amber-900/20');
  } else {
    excuseTextarea.readOnly = false;
    excuseTextarea.classList.remove('bg-amber-50', 'dark:bg-amber-900/20');
  }
}

async function applyAutoApprovedExcuseIfNeeded(){
  const userSelect = document.getElementById('user_id');
  const dateEl     = document.getElementById('evaluation_date');
  const attendanceSelect = document.getElementById('attendance_status');
  const excuseTextarea   = document.getElementById('excuse_reason');

  if(!userSelect || !dateEl || !attendanceSelect || !excuseTextarea) return;

  const uid  = userSelect.value;
  const date = dateEl.value;

  if(!uid || !date){
    __autoAbsenceLock = false;
    lockAttendanceSelect(false);
    lockExcuseReason(false);
    hideAutoAbsenceBanner();
    updateProgressSteps();
    return;
  }

  try{
    const url = new URL(AUTO_EXCUSE_CHECK_ENDPOINT, window.location.origin);
    url.searchParams.set('user_id', uid);
    url.searchParams.set('date', date);

    const res = await fetch(url.toString(), { headers: { 'Accept':'application/json' } });
    if(!res.ok) throw new Error(`HTTP ${res.status}`);

    const data = await res.json();

    if(data && data.has_excuse){
      __autoAbsenceLock = true;

      attendanceSelect.value = 'absent_with_excuse';
      excuseTextarea.value = data.auto_message || data.reason || '';

      handleAttendanceChange();

      lockAttendanceSelect(true);
      lockExcuseReason(true);

      showAutoAbsenceBanner(data);
    } else {
      __autoAbsenceLock = false;
      lockAttendanceSelect(false);
      lockExcuseReason(false);
      hideAutoAbsenceBanner();
    }

    updateProgressSteps();
  } catch (err){
    console.error('Auto excuse check failed:', err);
    __autoAbsenceLock = false;
    lockAttendanceSelect(false);
    lockExcuseReason(false);
    hideAutoAbsenceBanner();
    updateProgressSteps();
  }
}
// ===================== END ADD =====================


// تحديد نوع المستخدمين
function selectUserType(type) {
  document.querySelectorAll('.user-type-btn').forEach(btn => {
    btn.classList.remove('border-cyan-400/60','bg-cyan-500/10','ring-1','ring-cyan-400/30');
    btn.classList.add('border-white/10','bg-white/5');
  });

  const selectedBtn = document.querySelector(`[data-type="${type}"]`);
  if (selectedBtn) {
    selectedBtn.classList.remove('border-white/10','bg-white/5');
    selectedBtn.classList.add('border-cyan-400/60','bg-cyan-500/10','ring-1','ring-cyan-400/30');
  }

  const hiddenInput = document.getElementById('selectedUserType');
  if (hiddenInput) hiddenInput.value = type;

  fetchUsers(type);

  const userDiv = document.getElementById('userSelectionDiv');
  const ph = document.getElementById('userSelectionPlaceholder');
  if (userDiv) userDiv.style.display = 'block';
  if (ph) ph.classList.add('hidden');

  updateProgressSteps();
}

// جلب المستخدمين من الخادم
async function fetchUsers(type) {
  const userSelect = document.getElementById('user_id');
  if (!userSelect) return;

  userSelect.innerHTML = '<option value="" disabled selected>جاري تحميل المستخدمين...</option>';

  try {
    const response = await fetch(`/moderator/evaluations/users-by-type?type=${type}`);
    if (!response.ok) throw new Error(`خطأ في الاستجابة: ${response.status} ${response.statusText}`);

    const users = await response.json();

    if (!Array.isArray(users) || users.length === 0) {
      userSelect.innerHTML = '<option value="" disabled selected>لا يوجد مستخدمون للنوع المختار</option>';
      updateProgressSteps();
      return;
    }

    userSelect.innerHTML = '<option value="" disabled selected>اختر مستخدماً...</option>';

    users.forEach(user => {
      const option = document.createElement('option');
      option.value = user.id;
      option.textContent = `${user.name} (${user.username})`;
      userSelect.appendChild(option);
    });

    if (__OLD_USER_ID) {
      const idStr = String(__OLD_USER_ID);
      const hasOpt = Array.from(userSelect.options).some(o => String(o.value) === idStr);
      if (hasOpt) userSelect.value = idStr;
    }

    updateProgressSteps();
    setTimeout(() => { applyAutoApprovedExcuseIfNeeded(); }, 0);

  } catch (error) {
    console.error('خطأ في جلب المستخدمين:', error);
    userSelect.innerHTML = `<option value="" disabled selected>حدث خطأ في تحميل المستخدمين</option>`;
    updateProgressSteps();
  }
}

// منطق حالة الحضور
function handleAttendanceChange() {
  const attendanceSelect = document.getElementById('attendance_status');
  const excuseTextarea  = document.getElementById('excuse_reason');
  const excuseBadge     = document.getElementById('excuseRequiredBadge');
  const evaluatorNotes  = document.getElementById('evaluator_notes');
  const pointsSection   = document.getElementById('pointsSection');

  if (!attendanceSelect || !excuseTextarea || !evaluatorNotes) return;

  const value = attendanceSelect.value;

  if (!value) {
    excuseTextarea.required = false;
    excuseTextarea.placeholder = 'اكتب سبب العذر إذا كان هناك غياب...';
    excuseTextarea.classList.remove('border-amber-400', 'focus:ring-amber-500', 'focus:border-amber-500');
    if (excuseBadge) excuseBadge.classList.add('hidden');

    if (pointsSection) pointsSection.classList.remove('opacity-60', 'pointer-events-none');

    evaluatorNotes.readOnly = false;
    evaluatorNotes.classList.remove('bg-gray-100', 'dark:bg-gray-600', 'cursor-not-allowed');
    evaluatorNotes.placeholder = 'اكتب ملاحظاتك حول التقييم...';

    updateProgressSteps();
    return;
  }

  const isAbsent = (value === 'absent_with_excuse' || value === 'absent_without_excuse');

  if (isAbsent) {
    excuseTextarea.required = true;
    excuseTextarea.placeholder = 'مطلوب: اكتب سبب العذر بشكل واضح ومختصر...';
    excuseTextarea.classList.add('border-amber-400', 'focus:ring-amber-500', 'focus:border-amber-500');
    if (excuseBadge) excuseBadge.classList.remove('hidden');

    if (pointsSection) pointsSection.classList.add('opacity-60', 'pointer-events-none');

    const whatsappZero = document.querySelector('input[name="whatsapp_presence"][value="0"]');
    const tiktokZero   = document.querySelector('input[name="tiktok_interaction"][value="0"]');
    if (whatsappZero) whatsappZero.checked = true;
    if (tiktokZero)   tiktokZero.checked   = true;

    evaluatorNotes.readOnly = true;
    evaluatorNotes.classList.add('bg-gray-100', 'dark:bg-gray-600', 'cursor-not-allowed');
    evaluatorNotes.placeholder = 'في حالة الغياب، يتم الاعتماد على سبب العذر فقط، وتعطيل ملاحظات المقيم.';
  } else {
    excuseTextarea.required = false;
    excuseTextarea.placeholder = 'اكتب سبب العذر إذا كان هناك غياب...';
    excuseTextarea.classList.remove('border-amber-400', 'focus:ring-amber-500', 'focus:border-amber-500');
    if (excuseBadge) excuseBadge.classList.add('hidden');

    if (pointsSection) pointsSection.classList.remove('opacity-60', 'pointer-events-none');

    evaluatorNotes.readOnly = false;
    evaluatorNotes.classList.remove('bg-gray-100', 'dark:bg-gray-600', 'cursor-not-allowed');
    evaluatorNotes.placeholder = 'اكتب ملاحظاتك حول التقييم...';
  }

  updateProgressSteps();
}

document.addEventListener("DOMContentLoaded", function() {
  const formElement      = document.getElementById('evaluationForm');
  const userSelect       = document.getElementById('user_id');
  const attendanceSelect = document.getElementById('attendance_status');
  const evaluationDate   = document.getElementById('evaluation_date');
  const excuseTextarea   = document.getElementById('excuse_reason');

  if (formElement && userSelect) {
    formElement.addEventListener('submit', function(e) {
      if (!userSelect.value) {
        e.preventDefault();
        wizardToast('يرجى اختيار مستخدم صالح قبل الإرسال.');
        setWizardStep(2);
        return;
      }

      if (attendanceSelect && !attendanceSelect.value) {
        e.preventDefault();
        wizardToast('يرجى اختيار حالة الحضور قبل حفظ التقييم.');
        setWizardStep(3);
        return;
      }

      const isAbsent = attendanceSelect && (attendanceSelect.value === 'absent_with_excuse' || attendanceSelect.value === 'absent_without_excuse');
      if (isAbsent && excuseTextarea && !excuseTextarea.value.trim()) {
        e.preventDefault();
        wizardToast('سبب العذر مطلوب في حالة الغياب.');
        setWizardStep(4);
        return;
      }
    });
  }

  if (attendanceSelect) {
    attendanceSelect.addEventListener('change', handleAttendanceChange);
    handleAttendanceChange();
  }

  if (userSelect) userSelect.addEventListener('change', () => updateProgressSteps());
  if (evaluationDate) evaluationDate.addEventListener('change', () => updateProgressSteps());
  if (excuseTextarea) excuseTextarea.addEventListener('input', () => updateProgressSteps());

  // restore old type
  const savedTypeInput = document.getElementById('selectedUserType');
  const savedType = savedTypeInput ? savedTypeInput.value : null;

  if (savedType) {
    selectUserType(savedType);
  } else {
    updateProgressSteps();
  }

  if (userSelect) userSelect.addEventListener('change', applyAutoApprovedExcuseIfNeeded);
  if (evaluationDate) evaluationDate.addEventListener('change', applyAutoApprovedExcuseIfNeeded);

  setTimeout(() => {
    const s = __suggestStep();
    __wizardStep = s;
    setWizardStep(s);
    applyAutoApprovedExcuseIfNeeded();
  }, 0);

  if (attendanceSelect) {
    attendanceSelect.addEventListener('change', function(){
      if(__autoAbsenceLock){
        attendanceSelect.value = 'absent_with_excuse';
        handleAttendanceChange();
      }
    });
  }
});
</script>
@endsection