@extends('layouts.superadmin')
@section('title', 'إنشاء لايفات (جديد)')

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

    {{-- هيدر ملحمي لإنشاء اللايفات --}}
    <div class="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-sky-500/40 text-white">

        {{-- زخارف --}}
        <div class="pointer-events-none absolute -top-24 -right-10 w-64 h-64 rounded-full bg-sky-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -left-16 w-72 h-72 rounded-full bg-indigo-500/25 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1.5 min-w-0">
                <div class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full
                            bg-slate-900/70 border border-sky-400/60 text-[10px] sm:text-[11px] text-sky-100">
                    <i class="fa-solid fa-tower-broadcast text-[9px] text-sky-300"></i>
                    <span>غرفة الصقر — جدولة لايفات النظام</span>
                </div>

                <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight flex items-center gap-2">
                    إنشاء لايفات (جديد)
                </h1>

                <p class="text-[11px] sm:text-xs text-sky-100/85 leading-relaxed max-w-2xl">
                    من هنا تقوم بجدولة لايفات للأعضاء في يوم محدد، مع تحديد الوقت، المدة، النوع،
                    وهل يعتبر اللايف سهرة. بعد الحفظ يتم إرسال اللايفات تلقائياً إلى صفحة التأكيد والمراجعة.
                </p>
            </div>

            <div class="flex flex-col items-end gap-2 flex-shrink-0">
                <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
                   class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-[11px] sm:text-sm font-semibold
                          bg-white/10 hover:bg-white/15 border border-white/30
                          text-slate-50 shadow-md shadow-slate-900/60 transition">
                    <i class="fa-solid fa-arrow-right text-xs"></i>
                    <span>رجوع لصفحة تأكيد اللايفات</span>
                </a>
                <div class="text-[10px] text-sky-100/85">
                    تذكير: كل لايف يتم إنشاؤه هنا يحتاج لاحقاً تأكيد حالة (مؤكد / مع عذر / بدون عذر).
                </div>
            </div>
        </div>
    </div>

    {{-- التنبيهات --}}
    @if(session('success'))
        <div class="rounded-2xl border border-emerald-200/80 dark:border-emerald-800/80
                    bg-emerald-50/90 dark:bg-emerald-900/30 px-4 py-2.5 flex items-start gap-2 text-sm text-emerald-800 dark:text-emerald-100">
            <i class="fa-solid fa-circle-check mt-0.5 text-emerald-500"></i>
            <div>{{ session('success') }}</div>
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-2xl border border-rose-200/80 dark:border-rose-800/80
                    bg-rose-50/90 dark:bg-rose-900/30 px-4 py-2.5 flex items-start gap-2 text-sm text-rose-800 dark:text-rose-100">
            <i class="fa-solid fa-triangle-exclamation mt-0.5 text-rose-500"></i>
            <div>{{ session('error') }}</div>
        </div>
    @endif

    @if($errors->any())
        <div class="rounded-2xl border border-rose-300 dark:border-rose-800
                    bg-rose-50/95 dark:bg-rose-950/40 px-4 py-3 text-sm text-rose-800 dark:text-rose-100">
            <div class="flex items-start gap-2">
                <i class="fa-solid fa-circle-exclamation mt-0.5 text-rose-500"></i>
                <div>
                    <div class="font-semibold mb-1 text-[13px]">
                        يوجد أخطاء في المدخلات، تأكد من الحقول التالية:
                    </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 method="POST"
          action="{{ route('superadmin.falcon-room.lives-new.store') }}"
          class="bg-white/95 dark:bg-slate-900/95 rounded-2xl shadow-lg shadow-slate-900/40
                 border border-slate-200/80 dark:border-slate-800/80 overflow-hidden">
        @csrf

        {{-- الشريط العلوي --}}
        <div class="px-4 sm:px-6 py-3.5 sm:py-4 border-b border-slate-200 dark:border-slate-800
                    bg-gradient-to-r from-slate-900 via-slate-900/95 to-slate-900/90 text-white">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 items-end">
                <div class="lg:col-span-1">
                    <label class="block text-[11px] font-semibold text-slate-100 mb-1">
                        تاريخ اللايف
                    </label>
                    <input type="date"
                           name="scheduled_date"
                           value="{{ old('scheduled_date', now()->toDateString()) }}"
                           required
                           class="w-full rounded-xl bg-slate-900/70
                                  border border-slate-600
                                  px-3 py-2 text-xs sm:text-sm text-slate-50
                                  focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
                </div>

                <div class="sm:col-span-1 lg:col-span-3 flex flex-wrap gap-2 sm:justify-end">
                    <button type="button"
                            onclick="addRow()"
                            class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold
                                   bg-slate-800 hover:bg-slate-700 text-slate-100 border border-slate-600
                                   transition shadow-sm">
                        <i class="fa-solid fa-user-plus text-[11px]"></i>
                        إضافة عضو جديد للجدول
                    </button>

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

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

        {{-- الشريط السفلي --}}
        <div class="px-4 sm:px-6 py-3.5 border-t border-slate-200 dark:border-slate-800
                    bg-slate-100/80 dark:bg-slate-900/80">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <div class="flex flex-wrap gap-2">
                    <button type="button"
                            onclick="addRow()"
                            class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs sm:text-sm font-semibold
                                   bg-white hover:bg-slate-50 text-slate-800 border border-slate-200
                                   dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-100 dark:border-slate-700
                                   shadow-sm">
                        <i class="fa-solid fa-plus text-[11px]"></i>
                        إضافة عضو آخر
                    </button>
                </div>

                <div class="text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                    النوع مرتبط بقيم النظام:
                    <span class="font-semibold text-slate-700 dark:text-slate-200">
                        guests / tours / both
                    </span>
                    — لا تغيّر الأسماء حتى تبقى التقارير صحيحة.
                </div>
            </div>
        </div>
    </form>
</div>

{{-- قالب الصف الواحد --}}
<template id="rowTpl">
  <div class="live-row rounded-2xl border border-slate-200 dark:border-slate-800
              bg-white dark:bg-slate-900/80 p-4 sm:p-4 space-y-3">

    {{-- هيدر الصف --}}
    <div class="flex items-center justify-between gap-3">
      <div class="flex items-center gap-2">
        <span class="rowNo inline-flex items-center justify-center w-7 h-7 rounded-full
                     bg-sky-600 text-white text-xs font-bold shadow-md shadow-sky-500/40">1</span>
        <div class="flex flex-col">
          <div class="text-sm font-semibold text-slate-900 dark:text-slate-50">
            تفاصيل اللايف
          </div>
          <div class="text-[11px] text-slate-500 dark:text-slate-400">
            اختر العضو، الوقت، المدة، والنوع لهذا اللايف.
          </div>
        </div>
      </div>

      <button type="button"
              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-[11px] font-semibold
                     bg-rose-50 hover:bg-rose-100 text-rose-700
                     dark:bg-rose-900/40 dark:hover:bg-rose-900/60 dark:text-rose-100
                     border border-rose-200/80 dark:border-rose-800/80 transition"
              onclick="removeRow(this)">
        <i class="fa-solid fa-trash text-[10px]"></i>
        إزالة
      </button>
    </div>

    {{-- السطر الأول: العضو + الوقت/فترة/ساعات/نوع --}}
    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 mt-1">
      <div class="md:col-span-5">
        <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
            العضو
        </label>
        <select name="user_id[]"
                required
                class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                       border border-slate-300 dark:border-slate-700
                       px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                       focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
          <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-xl border border-rose-200/80 dark:border-rose-800/80
                    bg-rose-50/90 dark:bg-rose-950/40 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-semibold">لا يمكن اختيار هذا العضو</div>
                    <div class="absenceMsg opacity-90">هذا العضو في فترة غياب معتمدة تغطي هذا التاريخ.</div>
                </div>
            </div>
        </div>
        {{-- END ADD --}}
      </div>

      <div class="md:col-span-7 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <div>
          <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
              الوقت
          </label>
          <input type="time" name="scheduled_time[]" required
                 class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                        border border-slate-300 dark:border-slate-700
                        px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                        focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
        </div>

        <div>
          <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
              الفترة (مثلاً: مساء / سهرة)
          </label>
          <input type="text" name="slot_label[]" placeholder="مثال: مساء / بعد 10 / AM"
                 class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                        border border-slate-300 dark:border-slate-700
                        px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                        focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
        </div>

        <div>
          <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
              عدد الساعات
          </label>
          <select name="planned_hours[]"
                  class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                         border border-slate-300 dark:border-slate-700
                         px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                         focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
            <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="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
              نوع اللايف
          </label>
          <select name="type[]"
                  class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                         border border-slate-300 dark:border-slate-700
                         px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                         focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
            <option value="guests">قستات</option>
            <option value="tours">تحديات</option>
            <option value="both">قستات + تحديات</option>
          </select>
        </div>
      </div>
    </div>

    {{-- السطر الثاني: سهرة + مواضيع السهرة --}}
    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 mt-2">
      <div class="md:col-span-3">
        <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
            سهرة؟
        </label>
        <select name="is_sahra[]"
                onchange="toggleTopics(this)"
                class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                       border border-slate-300 dark:border-slate-700
                       px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                       focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
          <option value="0">لا، لايف عادي</option>
          <option value="1">نعم، يعتبر سهرة</option>
        </select>
      </div>

      <div class="topics hidden md:col-span-9">
        <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
            مواضيع السهرة
        </label>
        <input type="text" name="sahra_topics[]" placeholder="مثال: تعارف، تحديات، مناقشة قرارات التيم..."
               class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                      border border-slate-300 dark:border-slate-700
                      px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                      focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-300">
            تظهر هذه المواضيع تلقائياً أسفل ملاحظات اللايف بلون مميز عند المراجعة.
        </p>
      </div>
    </div>

    {{-- الملاحظات --}}
    <div class="mt-2">
      <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200">
          ملاحظات (HTML Allowlist)
      </label>
      <textarea name="note[]" rows="2" placeholder="<b>ملاحظة مهمة</b> عن اللايف..."
                class="mt-1 w-full rounded-xl bg-white dark:bg-slate-950
                       border border-slate-300 dark:border-slate-700
                       px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                       focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500"></textarea>
      <p class="mt-1 text-[10px] text-slate-500 dark:text-slate-400">
          يدعم بعض الوسوم مثل: &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);
  });
}

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;
  topics.classList.toggle('hidden', sel.value !== '1');
}

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();
  if(!date) { __absentSet = new Set(); return; }

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

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

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