@extends('layouts.superadmin')
@section('title', 'إنشاء لايفات — غرفة الصقر')

@push('styles')
<style>
/* ============================================================
   Falcon Lives Create — Super Epic Modern UI
   واجهة عصرية بدون صور وبدون حذف أي خوارزمية
   ============================================================ */

.falcon-live-page {
    position: relative;
    isolation: isolate;
}

.falcon-live-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 85% 8%, rgba(14,165,233,.17), transparent 34rem),
        radial-gradient(circle at 5% 18%, rgba(139,92,246,.16), transparent 32rem),
        radial-gradient(circle at 48% 105%, rgba(16,185,129,.11), transparent 36rem);
}

.falcon-panel {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 95% 10%, rgba(168,85,247,.18), transparent 36%),
        linear-gradient(135deg, rgba(2,6,23,.98), rgba(15,23,42,.94));
    border: 1px solid rgba(148,163,184,.22);
    box-shadow:
        0 28px 90px rgba(2,6,23,.38),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.falcon-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .055;
    background-image:
        linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
    background-size: 34px 34px;
}

.falcon-chip {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    border-radius: 999px;
    padding: .36rem .68rem;
    font-size: .72rem;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
}

.falcon-step-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .78rem .82rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.falcon-step-card .num {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    color: white;
    font-size: .82rem;
    font-weight: 1000;
    background: linear-gradient(135deg, #0284c7, #7c3aed);
    box-shadow: 0 14px 26px rgba(14,165,233,.22);
}

.falcon-form-card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(226,232,240,.88);
    box-shadow:
        0 28px 90px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
}

.dark .falcon-form-card {
    background: rgba(15,23,42,.88);
    border-color: rgba(255,255,255,.10);
    box-shadow:
        0 30px 100px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.falcon-command-bar {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(14,165,233,.18), transparent 35%),
        linear-gradient(135deg, #020617, #0f172a);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.falcon-command-box {
    border-radius: 1.35rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.falcon-label {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .42rem;
    font-size: .72rem;
    font-weight: 950;
    color: rgb(51 65 85);
}

.dark .falcon-label {
    color: rgba(226,232,240,.90);
}

.falcon-field {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgb(203 213 225);
    background: rgba(255,255,255,.97);
    padding: .76rem .88rem;
    font-size: .875rem;
    color: rgb(15 23 42);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.dark .falcon-field {
    border-color: rgba(255,255,255,.12);
    background: rgba(2,6,23,.58);
    color: rgb(241 245 249);
}

.falcon-field:focus {
    border-color: rgba(14,165,233,.90);
    box-shadow: 0 0 0 4px rgba(14,165,233,.14);
}

.falcon-row {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid rgba(226,232,240,.92);
    background:
        radial-gradient(circle at 0% 0%, rgba(14,165,233,.08), transparent 26%),
        rgba(255,255,255,.97);
    box-shadow: 0 18px 55px rgba(15,23,42,.075);
}

.dark .falcon-row {
    border-color: rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 0% 0%, rgba(14,165,233,.10), transparent 28%),
        rgba(15,23,42,.88);
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.falcon-row::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #38bdf8, #8b5cf6, #10b981);
}

.rowNo {
    box-shadow: 0 14px 30px rgba(14,165,233,.25);
}

.falcon-mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 1rem;
    padding: .55rem .75rem;
    font-size: .72rem;
    font-weight: 950;
    transition: .16s ease;
}

.is-sahra-active {
    border-color: rgba(245,158,11,.55) !important;
    box-shadow: 0 0 0 4px rgba(245,158,11,.13) !important;
}

@media (max-width: 640px) {
    .falcon-panel,
    .falcon-form-card {
        border-radius: 1.45rem;
    }

    .falcon-field {
        padding: .72rem .78rem;
        font-size: .83rem;
    }

    .falcon-row {
        border-radius: 1.35rem;
    }
}
</style>
@endpush

@section('content')
<div class="falcon-live-page max-w-7xl mx-auto px-3 sm:px-5 lg:px-8 py-4 sm:py-6 rtl space-y-5 sm:space-y-6">

    {{-- Hero --}}
    <section class="falcon-panel text-white">
        <div class="relative z-[1] p-4 sm:p-6 lg:p-7">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                <div class="min-w-0 space-y-3">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="falcon-chip">
                            <i class="fa-solid fa-tower-broadcast text-sky-300"></i>
                            غرفة الصقر
                        </span>
                        <span class="falcon-chip">
                            <i class="fa-solid fa-calendar-check text-emerald-300"></i>
                            جدولة لايفات النظام
                        </span>
                        <span class="falcon-chip">
                            <i class="fa-solid fa-code-branch text-violet-300"></i>
                            بدون حذف أي خوارزمية
                        </span>
                    </div>

                    <div>
                        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tight">
                            إنشاء لايفات جديد
                        </h1>
                        <p class="mt-2 max-w-3xl text-sm sm:text-base leading-8 text-slate-200/90">
                            واجهة أسرع وأسهل لجدولة لايفات الأعضاء: اختر التاريخ، أضف الصفوف، حدّد الوقت والمدة والنوع،
                            ثم أرسل اللايفات لصفحة التأكيد والمراجعة.
                        </p>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row lg:flex-col gap-2 lg:items-end">
                    <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
                       class="inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5
                              bg-white/10 hover:bg-white/15 border border-white/20 text-white font-extrabold
                              shadow-[0_18px_55px_rgba(0,0,0,.22)] transition">
                        <i class="fa-solid fa-arrow-right text-xs"></i>
                        رجوع لتأكيد اللايفات
                    </a>

                    <div class="text-[11px] text-slate-300 text-center lg:text-left">
                        بعد الحفظ يتم إرسال اللايفات تلقائيًا للمراجعة.
                    </div>
                </div>
            </div>

            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5">
                <div class="falcon-step-card">
                    <span class="num">1</span>
                    <div class="min-w-0">
                        <div class="text-sm font-black">تاريخ اللايف</div>
                        <div class="text-[11px] text-slate-300 truncate">اليوم المستهدف</div>
                    </div>
                </div>
                <div class="falcon-step-card">
                    <span class="num">2</span>
                    <div class="min-w-0">
                        <div class="text-sm font-black">اختيار العضو</div>
                        <div class="text-[11px] text-slate-300 truncate">مع فحص الغياب تلقائيًا</div>
                    </div>
                </div>
                <div class="falcon-step-card">
                    <span class="num">3</span>
                    <div class="min-w-0">
                        <div class="text-sm font-black">تفاصيل اللايف</div>
                        <div class="text-[11px] text-slate-300 truncate">وقت، مدة، نوع، سهرة</div>
                    </div>
                </div>
                <div class="falcon-step-card">
                    <span class="num">4</span>
                    <div class="min-w-0">
                        <div class="text-sm font-black">الحفظ</div>
                        <div class="text-[11px] text-slate-300 truncate">للانتقال إلى التأكيد</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="rounded-3xl border border-emerald-200/80 dark:border-emerald-500/20
                    bg-emerald-50/95 dark:bg-emerald-500/10 px-4 py-3 flex items-start gap-3 text-sm text-emerald-800 dark:text-emerald-100">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-emerald-500/10 border border-emerald-400/20">
                <i class="fa-solid fa-circle-check text-emerald-500"></i>
            </span>
            <div class="pt-1">{{ session('success') }}</div>
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-3xl border border-rose-200/80 dark:border-rose-500/20
                    bg-rose-50/95 dark:bg-rose-500/10 px-4 py-3 flex items-start gap-3 text-sm text-rose-800 dark:text-rose-100">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-rose-500/10 border border-rose-400/20">
                <i class="fa-solid fa-triangle-exclamation text-rose-500"></i>
            </span>
            <div class="pt-1">{{ session('error') }}</div>
        </div>
    @endif

    @if($errors->any())
        <div class="rounded-3xl border border-rose-300 dark:border-rose-500/30
                    bg-rose-50/95 dark:bg-rose-950/40 px-4 py-4 text-sm text-rose-800 dark:text-rose-100">
            <div class="flex items-start gap-3">
                <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-rose-500/10 border border-rose-400/20">
                    <i class="fa-solid fa-circle-exclamation text-rose-500"></i>
                </span>
                <div>
                    <div class="font-black mb-1">يوجد أخطاء في المدخلات، تأكد من الحقول التالية:</div>
                    <ul class="list-disc pr-4 space-y-0.5 text-[12px]">
                        @foreach($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- Form --}}
    <form method="POST"
          action="{{ route('superadmin.falcon-room.lives-new.store') }}"
          class="falcon-form-card">
        @csrf

        {{-- Command bar --}}
        <div class="falcon-command-bar">
            <div class="relative z-[1] p-4 sm:p-5">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                    <div class="lg:col-span-3">
                        <label class="block text-[11px] font-black text-slate-200 mb-1.5">
                            <i class="fa-regular fa-calendar-days text-sky-300 ml-1"></i>
                            تاريخ اللايف
                        </label>
                        <input type="date"
                               name="scheduled_date"
                               value="{{ old('scheduled_date', now()->toDateString()) }}"
                               required
                               class="w-full rounded-2xl bg-white/10 border border-white/15
                                      px-3 py-2.5 text-sm text-white
                                      focus:outline-none focus:ring-4 focus:ring-sky-500/20 focus:border-sky-400">
                    </div>

                    <div class="lg:col-span-5">
                        <div class="grid grid-cols-3 gap-2">
                            <div class="falcon-command-box px-3 py-2">
                                <div class="text-[10px] text-slate-300">عدد الصفوف</div>
                                <div id="rowsCount" class="text-xl font-black">0</div>
                            </div>
                            <div class="falcon-command-box px-3 py-2">
                                <div class="text-[10px] text-slate-300">فحص الغياب</div>
                                <div id="absenceStatus" class="text-sm font-black text-emerald-300">جاهز</div>
                            </div>
                            <div class="falcon-command-box px-3 py-2">
                                <div class="text-[10px] text-slate-300">المسار</div>
                                <div class="text-sm font-black text-sky-300">للتأكيد</div>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-4 flex flex-col sm:flex-row lg:justify-end gap-2">
                        <button type="button"
                                onclick="addRow()"
                                class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-black
                                       bg-white/10 hover:bg-white/15 text-slate-100 border border-white/15 transition shadow-sm">
                            <i class="fa-solid fa-user-plus text-xs"></i>
                            إضافة عضو
                        </button>

                        <button type="submit"
                                class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-black
                                       bg-sky-500 hover:bg-sky-400 text-white shadow-lg shadow-sky-500/25
                                       border border-sky-300/40 transition">
                            <i class="fa-solid fa-floppy-disk text-xs"></i>
                            حفظ وإرسال للتأكيد
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Rows --}}
        <div class="p-3 sm:p-5 lg:p-6 bg-slate-50/80 dark:bg-slate-950/35">
            <div id="rows" class="space-y-3 sm:space-y-4">
                {{-- يتم حقنه بالـ JS (addRow) --}}
            </div>

            <div id="emptyHint" class="hidden text-center py-12">
                <div class="mx-auto w-16 h-16 rounded-3xl bg-sky-500/10 border border-sky-400/20 grid place-items-center text-sky-500 mb-3">
                    <i class="fa-solid fa-user-plus text-2xl"></i>
                </div>
                <div class="text-sm font-black text-slate-800 dark:text-slate-100">لا يوجد صفوف بعد</div>
                <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">اضغط “إضافة عضو” لبدء جدولة اللايفات.</div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="px-4 sm:px-6 py-4 border-t border-slate-200 dark:border-white/10
                    bg-white/70 dark:bg-slate-900/70">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                <button type="button"
                        onclick="addRow()"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-black
                               bg-white hover:bg-slate-50 text-slate-800 border border-slate-200
                               dark:bg-white/5 dark:hover:bg-white/10 dark:text-slate-100 dark:border-white/10 shadow-sm">
                    <i class="fa-solid fa-plus text-xs"></i>
                    إضافة عضو آخر
                </button>

                <div class="rounded-2xl px-3 py-2 bg-slate-100/80 dark:bg-white/5 border border-slate-200 dark:border-white/10
                            text-[11px] leading-6 text-slate-600 dark:text-slate-300">
                    النوع مرتبط بقيم النظام:
                    <span class="font-black text-slate-900 dark:text-white">guests / tours / both</span>
                    — لا تغيّر الأسماء حتى تبقى التقارير صحيحة.
                </div>
            </div>
        </div>
    </form>
</div>

{{-- قالب الصف الواحد --}}
<template id="rowTpl">
  <div class="live-row falcon-row p-4 sm:p-5 space-y-4">

    {{-- Header --}}
    <div class="flex items-start justify-between gap-3">
      <div class="flex items-start gap-3 min-w-0">
        <span class="rowNo inline-flex items-center justify-center w-9 h-9 rounded-2xl
                     bg-gradient-to-br from-sky-500 to-indigo-600 text-white text-sm font-black">1</span>
        <div class="min-w-0">
          <div class="text-base font-black text-slate-950 dark:text-white">
            تفاصيل اللايف
          </div>
          <div class="text-[11px] text-slate-500 dark:text-slate-400 leading-5">
            اختر العضو، الوقت، المدة، النوع، وحالة السهرة.
          </div>
        </div>
      </div>

      <button type="button"
              class="falcon-mini-action bg-rose-50 hover:bg-rose-100 text-rose-700
                     dark:bg-rose-500/10 dark:hover:bg-rose-500/15 dark:text-rose-100
                     border border-rose-200/80 dark:border-rose-400/20"
              onclick="removeRow(this)">
        <i class="fa-solid fa-trash text-[10px]"></i>
        إزالة
      </button>
    </div>

    {{-- First row --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">
      <div class="lg:col-span-4">
        <label class="falcon-label">
            <i class="fa-solid fa-user text-sky-500"></i>
            العضو
        </label>
        <select name="user_id[]" required class="falcon-field">
          <option value="">اختر عضو من القائمة</option>
          @foreach($users as $u)
            <option value="{{ $u->id }}">{{ $u->name ?: $u->username }}</option>
          @endforeach
        </select>

        {{-- ADD: تنبيه الغياب داخل نفس الصف (بدون حذف أي شيء) --}}
        <div class="absenceAlert hidden mt-2 rounded-2xl border border-rose-200/80 dark:border-rose-500/20
                    bg-rose-50/90 dark:bg-rose-500/10 px-3 py-2 text-[11px] text-rose-800 dark:text-rose-100">
            <div class="flex items-start gap-2">
                <i class="fa-solid fa-triangle-exclamation mt-0.5 text-rose-500"></i>
                <div class="leading-relaxed">
                    <div class="font-black">لا يمكن اختيار هذا العضو</div>
                    <div class="absenceMsg opacity-90">هذا العضو في فترة غياب معتمدة تغطي هذا التاريخ.</div>
                </div>
            </div>
        </div>
        {{-- END ADD --}}
      </div>

      <div class="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
        <div>
          <label class="falcon-label">
              <i class="fa-regular fa-clock text-sky-500"></i>
              الوقت
          </label>
          <input type="time" name="scheduled_time[]" required class="falcon-field">
        </div>

        <div>
          <label class="falcon-label">
              <i class="fa-solid fa-tag text-violet-500"></i>
              الفترة
          </label>
          <input type="text" name="slot_label[]" placeholder="مثال: مساء / بعد 10 / AM" class="falcon-field">
        </div>

        <div>
          <label class="falcon-label">
              <i class="fa-solid fa-hourglass-half text-emerald-500"></i>
              عدد الساعات
          </label>
          <select name="planned_hours[]" class="falcon-field">
            <option value="1">1 ساعة</option>
            <option value="1.5">1.5 ساعة</option>
            <option value="2">2 ساعة</option>
            <option value="2.5">2.5 ساعة</option>
            <option value="3">3 ساعات</option>
            <option value="4">4 ساعات</option>
          </select>
        </div>

        <div>
          <label class="falcon-label">
              <i class="fa-solid fa-layer-group text-cyan-500"></i>
              نوع اللايف
          </label>
          <select name="type[]" class="falcon-field">
            <option value="guests">قستات</option>
            <option value="tours">تحديات</option>
            <option value="both">قستات + تحديات</option>
          </select>
        </div>
      </div>
    </div>

    {{-- Second row --}}
    <div class="grid grid-cols-1 md:grid-cols-12 gap-3">
      <div class="md:col-span-3">
        <label class="falcon-label">
            <i class="fa-solid fa-moon text-amber-500"></i>
            سهرة؟
        </label>
        <select name="is_sahra[]" onchange="toggleTopics(this)" class="falcon-field sahraSelect">
          <option value="0">لا، لايف عادي</option>
          <option value="1">نعم، يعتبر سهرة</option>
        </select>
      </div>

      <div class="topics hidden md:col-span-9">
        <label class="falcon-label">
            <i class="fa-solid fa-comments text-amber-500"></i>
            مواضيع السهرة
        </label>
        <input type="text" name="sahra_topics[]" placeholder="مثال: تعارف، تحديات، مناقشة قرارات التيم..." class="falcon-field">
        <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-300">
            تظهر هذه المواضيع تلقائياً أسفل ملاحظات اللايف بلون مميز عند المراجعة.
        </p>
      </div>
    </div>

    {{-- Notes --}}
    <div>
      <label class="falcon-label">
          <i class="fa-solid fa-note-sticky text-slate-500"></i>
          ملاحظات (HTML Allowlist)
      </label>
      <textarea name="note[]" rows="2" placeholder="<b>ملاحظة مهمة</b> عن اللايف..." class="falcon-field min-h-[88px] resize-y"></textarea>
      <p class="mt-1 text-[10px] text-slate-500 dark:text-slate-400 leading-5">
          يدعم بعض الوسوم مثل: &lt;b&gt;, &lt;strong&gt;, &lt;i&gt;, &lt;u&gt;, &lt;br&gt;, &lt;span&gt; … وفق الـ allowlist في الباك إند.
      </p>
    </div>
  </div>
</template>

<script>
let rowCounter = 0;

function renumber(){
  document.querySelectorAll('#rows .live-row .rowNo').forEach((el, idx) => {
    el.textContent = (idx + 1);
  });

  const rowsCount = document.getElementById('rowsCount');
  if(rowsCount) rowsCount.textContent = document.querySelectorAll('#rows .live-row').length;

  const emptyHint = document.getElementById('emptyHint');
  if(emptyHint){
    emptyHint.classList.toggle('hidden', document.querySelectorAll('#rows .live-row').length > 0);
  }
}

function addRow(){
  const tpl = document.getElementById('rowTpl');
  document.getElementById('rows').appendChild(tpl.content.cloneNode(true));
  rowCounter++;
  renumber();
}

function removeRow(btn){
  const row = btn.closest('.live-row');
  if(row) row.remove();
  renumber();
}

function toggleTopics(sel){
  const row = sel.closest('.live-row');
  const topics = row ? row.querySelector('.topics') : null;
  if(!topics) return;
  const active = sel.value === '1';
  topics.classList.toggle('hidden', !active);
  sel.classList.toggle('is-sahra-active', active);
}

document.addEventListener('DOMContentLoaded', () => addRow());

/* =========================================================
   // ADD: دعم الغياب (بدون حذف أي سطر من الخوارزمية)
   ========================================================= */
const ABSENT_ENDPOINT = @json(route('superadmin.falcon-room.lives-new.absent-users')); // يحتاج route موجود

let __absentSet = new Set();

function __getScheduledDate(){
  const el = document.querySelector('input[name="scheduled_date"]');
  return el ? (el.value || '') : '';
}

async function __fetchAbsent(){
  const date = __getScheduledDate();
  const status = document.getElementById('absenceStatus');
  if(status) status.textContent = 'يفحص...';

  if(!date) {
    __absentSet = new Set();
    if(status) status.textContent = 'جاهز';
    return;
  }

  try{
    const res = await fetch(`${ABSENT_ENDPOINT}?date=${encodeURIComponent(date)}`, {
      headers: { 'Accept': 'application/json' }
    });
    if(!res.ok) {
      __absentSet = new Set();
      if(status) status.textContent = 'جاهز';
      return;
    }

    const data = await res.json();
    const ids  = Array.isArray(data.user_ids) ? data.user_ids : [];
    __absentSet = new Set(ids.map(n => Number(n)));

    if(status) status.textContent = __absentSet.size ? `${__absentSet.size} غياب` : 'لا يوجد';
  }catch(e){
    __absentSet = new Set();
    if(status) status.textContent = 'تعذر الفحص';
  }
}

function __decorateOptions(selectEl){
  if(!selectEl) return;

  selectEl.querySelectorAll('option').forEach(opt => {
    const id = Number(opt.value || 0);
    if(!id) return;

    const baseText = opt.textContent.replace(/\s*\(غائب\)\s*$/,'');
    const isAbsent = __absentSet.has(id);

    opt.disabled = isAbsent;
    opt.textContent = isAbsent ? `${baseText} (غائب)` : baseText;
  });
}

function __applyAbsenceToRow(row){
  if(!row) return;

  const date = __getScheduledDate();
  const sel = row.querySelector('select[name="user_id[]"]');
  if(!sel) return;

  __decorateOptions(sel);

  const alertBox = row.querySelector('.absenceAlert');
  const msgEl    = row.querySelector('.absenceMsg');

  const uid = Number(sel.value || 0);
  if(uid && __absentSet.has(uid)){
    sel.value = '';
    if(alertBox) alertBox.classList.remove('hidden');
    if(msgEl) msgEl.textContent = `هذا العضو في فترة غياب معتمدة تغطي تاريخ ${date}.`;
  } else {
    if(alertBox) alertBox.classList.add('hidden');
    if(msgEl) msgEl.textContent = `هذا العضو في فترة غياب معتمدة تغطي هذا التاريخ.`;
  }
}

function __applyAbsenceToAllRows(){
  document.querySelectorAll('#rows .live-row').forEach(__applyAbsenceToRow);
}

async function __refreshAbsenceUI(){
  await __fetchAbsent();
  __applyAbsenceToAllRows();
}

// عند تغيير التاريخ: حدّث الغياب وطبّق التعطيل
document.addEventListener('change', (e) => {
  if(e.target && e.target.name === 'scheduled_date'){
    __refreshAbsenceUI();
  }
});

// عند تغيير العضو: طبّق على نفس الصف
document.addEventListener('change', (e) => {
  if(e.target && e.target.name === 'user_id[]'){
    const row = e.target.closest('.live-row');
    if(row) __applyAbsenceToRow(row);
  }
});

// بعد إضافة صف جديد: طبّق عليه مباشرة
const __origAddRow = addRow;
addRow = function(){
  __origAddRow();
  const rows = document.querySelectorAll('#rows .live-row');
  const last = rows[rows.length - 1];
  if(last) __applyAbsenceToRow(last);
};

// أول تحميل: بعد إنشاء أول صف، حدّث الغياب
document.addEventListener('DOMContentLoaded', () => {
  __refreshAbsenceUI();
});
/* ======================= END ADD ======================= */
</script>
@endsection