@extends('layouts.superadmin')

@section('content')
@php
    use Carbon\Carbon;
@endphp

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

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

    {{-- تنبيه نجاح --}}
    @if(session('success'))
        <div class="mb-2 sm:mb-3 px-4 py-2.5 rounded-2xl border border-emerald-200/80
                    bg-emerald-50/95 dark:bg-emerald-900/30 dark:border-emerald-700/70
                    text-sm text-emerald-800 dark:text-emerald-100 flex items-start gap-2">
            <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="mb-2 sm:mb-3 px-4 py-2.5 rounded-2xl border border-rose-200/80
                    bg-rose-50/95 dark:bg-rose-900/30 dark:border-rose-700/70
                    text-sm text-rose-800 dark:text-rose-100 flex items-start gap-2">
            <i class="fa-solid fa-circle-exclamation mt-0.5 text-rose-500"></i>
            <div>{{ session('error') }}</div>
        </div>
    @endif

    {{-- هيدر ملحمي لصفحة التأكيد --}}
    <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 -left-10 w-64 h-64 rounded-full bg-sky-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-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 space-y-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">

                <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-wrap gap-2 justify-start md:justify-end flex-shrink-0">
                    <a href="{{ route('superadmin.falcon-room.lives-new.create') }}"
                       class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-[11px] 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-plus text-[11px]"></i>
                        إنشاء لايفات جديدة
                    </a>

                    <a href="{{ route('superadmin.falcon-room.lives-new.programTable') }}"
                       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 text-slate-50 border border-white/30
                              shadow-sm transition">
                        <i class="fa-solid fa-table-list text-[11px]"></i>
                        جدول البرامج
                    </a>
                </div>

            </div>

            {{-- تلميح صغير --}}
            <div class="text-[10px] sm:text-[11px] text-sky-100/80">
                تذكير: تغيير حالة أي لايف يقوم مباشرة بتعديل نقاط العضو وتسجيل الحركة في سجلات غرفة الصقر.
            </div>
        </div>
    </div>

    {{-- فلاتر البحث --}}
    <form method="GET"
          class="bg-white/95 dark:bg-slate-900/95 rounded-2xl shadow-md shadow-slate-900/40
                 border border-slate-200/80 dark:border-slate-800/80
                 px-4 sm:px-6 py-4 sm:py-5 grid grid-cols-1 md:grid-cols-4 gap-3">
{{-- ADD: أزرار سريعة للتاريخ (تضمن إرسال YYYY-MM-DD) --}}
@php
    $tz = config('app.timezone','Asia/Jerusalem');
    $todayStr    = \Carbon\Carbon::now($tz)->toDateString();
    $tomorrowStr = \Carbon\Carbon::now($tz)->addDay()->toDateString();
    $yesterdayStr= \Carbon\Carbon::now($tz)->subDay()->toDateString();

    $qsBase = request()->except('date'); // نحافظ على q/type/status
@endphp

<div class="md:col-span-4 flex flex-wrap gap-2 -mt-1">
    <a href="{{ route('superadmin.falcon-room.lives-new.confirm', array_merge($qsBase, ['date'=>$todayStr])) }}"
       class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[11px] font-bold
              bg-white hover:bg-gray-50 text-gray-900 border border-gray-200
              dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100 dark:border-gray-700 transition">
        <i class="fa-solid fa-calendar-day text-[10px]"></i>
        اليوم
    </a>

    <a href="{{ route('superadmin.falcon-room.lives-new.confirm', array_merge($qsBase, ['date'=>$tomorrowStr])) }}"
       class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[11px] font-bold
              bg-emerald-600 hover:bg-emerald-700 text-white border border-emerald-500/60 transition">
        <i class="fa-solid fa-calendar-plus text-[10px]"></i>
        غدا
    </a>

    <a href="{{ route('superadmin.falcon-room.lives-new.confirm', array_merge($qsBase, ['date'=>$yesterdayStr])) }}"
       class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl text-[11px] font-bold
              bg-white hover:bg-gray-50 text-gray-900 border border-gray-200
              dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100 dark:border-gray-700 transition">
        <i class="fa-solid fa-calendar-minus text-[10px]"></i>
        أمس
    </a>

    <span class="text-[11px] text-gray-500 dark:text-gray-400 flex items-center">
        (القيمة الحالية: <span class="font-bold mx-1">{{ $date }}</span>)
    </span>
</div>
{{-- END ADD --}}
        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                التاريخ
            </label>
            <input type="date" name="date" value="{{ $date }}"
                   class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                          border border-gray-300 dark:border-gray-700
                          px-3 py-2 text-sm text-gray-900 dark:text-gray-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-gray-700 dark:text-gray-200 mb-1">
                بحث (اسم / يوزر)
            </label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>
                </span>
                <input type="text" name="q" value="{{ $q }}" placeholder="مثال: Amir"
                       class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                              border border-gray-300 dark:border-gray-700
                              ps-3 pe-9 py-2 text-sm text-gray-900 dark:text-gray-100
                              focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
            </div>
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                نوع البث
            </label>
            <select name="type"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                           border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                           focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
                <option value="">الكل</option>
                <option value="guests" {{ $type==='guests'?'selected':'' }}>قستات</option>
                <option value="tours"  {{ $type==='tours'?'selected':'' }}>تحديات</option>
               <option value="both"   {{ $type==='both'?'selected':'' }}>كلاهما</option>
            </select>
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                الحالة
            </label>
            <select name="status"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                           border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                           focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
                <option value="">الكل</option>
                <option value="scheduled" {{ $status==='scheduled'?'selected':'' }}>غير مؤكد</option>
                <option value="confirmed" {{ $status==='confirmed'?'selected':'' }}>مؤكد</option>
                <option value="missed_excuse" {{ $status==='missed_excuse'?'selected':'' }}>مع عذر</option>
                <option value="missed_no_excuse" {{ $status==='missed_no_excuse'?'selected':'' }}>بدون عذر</option>
            </select>
        </div>

        <div class="md:col-span-4 flex flex-wrap gap-2 pt-1">
            <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                           bg-sky-600 hover:bg-sky-700 text-white shadow-sm shadow-sky-500/30 transition">
                <i class="fa-solid fa-magnifying-glass text-xs"></i>
                بحث
            </button>

            <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                      bg-gray-100 hover:bg-gray-200 text-gray-800
                      dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100
                      border border-gray-200 dark:border-gray-700 transition">
                <i class="fa-solid fa-rotate-right text-xs"></i>
                إعادة تعيين الفلاتر
            </a>
        </div>
    </form>

    {{-- نسخ جدول اللايفات لليوم/الأيام القادمة --}}
    @php
        $copyUsers = \App\Models\User::where('account_status','active')
            ->orderByRaw('COALESCE(name,username) ASC')
            ->get(['id','name','username']);
    @endphp

    <form method="POST"
          action="{{ route('superadmin.falcon-room.lives-new.copy-day') }}"
          class="bg-white/95 dark:bg-slate-900/95 rounded-2xl shadow-md shadow-slate-900/40
                 border border-slate-200/80 dark:border-slate-800/80
                 px-4 sm:px-6 py-4 sm:py-5 space-y-3">
        @csrf

        <div class="flex items-center justify-between gap-2 mb-2">
            <div>
                <h2 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100">
                    🧬 نسخ جدول اللايفات لأيام قادمة
                </h2>
                <p class="text-[11px] text-gray-500 dark:text-gray-400">
                    اختر يومًا أساسيًا، ثم انسخ نفس اللايفات لليوم التالي، ليومين، أو لأسبوع كامل.
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">

            <div>
                <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                    اليوم الأساسي (يوم النسخ منه)
                </label>
                <input type="date" name="source_date" value="{{ $date }}"
                       class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                              border border-gray-300 dark:border-gray-700
                              px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                              focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" required>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                    مدة النسخ
                </label>
                <select name="days"
                        class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                               border border-gray-300 dark:border-gray-700
                               px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                               focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" required>
                    <option value="1">نسخ لليوم التالي فقط</option>
                    <option value="2">نسخ ليومين قادمين</option>
                    <option value="7">نسخ لأسبوع قادم (7 أيام)</option>
                </select>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                    نطاق الأعضاء
                </label>
                <select id="copyScope" class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                               border border-gray-300 dark:border-gray-700
                               px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                               focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="all">كل الأعضاء في هذا اليوم</option>
                    <option value="selected">أعضاء محددين فقط</option>
                </select>
            </div>

        </div>

        <div id="copyUsersWrap" class="mt-3 hidden">
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                اختر الأعضاء المطلوب نسخ لايفاتهم (يمكن اختيار أكثر من عضو)
            </label>
            <select name="user_ids[]" multiple size="5"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                           border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                           focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                @foreach($copyUsers as $cu)
                    <option value="{{ $cu->id }}">
                        #{{ $cu->id }} — {{ $cu->name ?? $cu->username }}
                    </option>
                @endforeach
            </select>
            <p class="mt-1 text-[10px] text-gray-500 dark:text-gray-400">
                إن تركت هذه القائمة فارغة مع اختيار "أعضاء محددين" لن يتم نسخ أي شيء.
            </p>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-200 dark:border-slate-800">
            <p class="text-[10px] sm:text-[11px] text-gray-500 dark:text-gray-400">
                عند النسخ، يقوم النظام بتفادي التكرار لنفس العضو ونفس الوقت في الأيام الهدف.
            </p>

            <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                           bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm shadow-emerald-500/30 transition">
                <i class="fa-solid fa-clone text-xs"></i>
                تنفيذ عملية النسخ
            </button>
        </div>
    </form>

    {{-- KPIs --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between mb-1">
                <div class="text-[11px] font-semibold text-gray-600 dark:text-gray-400">إجمالي لايفات اليوم</div>
                <span class="w-6 h-6 rounded-full bg-sky-50 dark:bg-sky-900/40 grid place-items-center">
                    <i class="fa-solid fa-broadcast-tower text-[11px] text-sky-600 dark:text-sky-300"></i>
                </span>
            </div>
            <div class="text-2xl font-extrabold text-gray-900 dark:text-white">{{ $kpis['total'] }}</div>
            <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                مؤكد: {{ $kpis['confirmed'] }} • عذر: {{ $kpis['excuse'] }} • بدون: {{ $kpis['noexcuse'] }}
            </div>
        </div>

        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between mb-1">
                <div class="text-[11px] font-semibold text-gray-600 dark:text-gray-400">لايفات غير محسومة</div>
                <span class="w-6 h-6 rounded-full bg-amber-50 dark:bg-amber-900/40 grid place-items-center">
                    <i class="fa-solid fa-hourglass-half text-[11px] text-amber-600 dark:text-amber-300"></i>
                </span>
            </div>
            <div class="text-2xl font-extrabold text-amber-600 dark:text-amber-300">
                {{ $kpis['pending'] }}
            </div>
            <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                كل لايف غير محسوم يؤثر لاحقاً على تقييم حضور العضو.
            </div>
        </div>

        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between mb-1">
                <div class="text-[11px] font-semibold text-gray-600 dark:text-gray-400">إحصائيات الشهر</div>
                <span class="w-6 h-6 rounded-full bg-emerald-50 dark:bg-emerald-900/40 grid place-items-center">
                    <i class="fa-solid fa-calendar-days text-[11px] text-emerald-600 dark:text-emerald-300"></i>
                </span>
            </div>
            <div class="text-2xl font-extrabold text-gray-900 dark:text-white">{{ $month['total'] }}</div>
            <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                مؤكد: {{ $month['confirmed'] }} • بانتظار المتابعة: {{ $month['pending'] }}
            </div>
        </div>

        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between mb-1">
                <div class="text-[11px] font-semibold text-gray-600 dark:text-gray-400">قواعد النقاط</div>
                <span class="w-6 h-6 rounded-full bg-indigo-50 dark:bg-indigo-900/40 grid place-items-center">
                    <i class="fa-solid fa-scale-balanced text-[11px] text-indigo-600 dark:text-indigo-300"></i>
                </span>
            </div>
            <div class="text-xs sm:text-sm text-gray-800 dark:text-gray-100 leading-relaxed">
                <span class="font-semibold text-emerald-600 dark:text-emerald-300">حضر: +4</span> •
                <span class="font-semibold text-amber-600 dark:text-amber-300">مع عذر: 0</span> •
                <span class="font-semibold text-rose-600 dark:text-rose-300">بدون عذر: -2</span>
            </div>
            <p class="mt-1 text-[10px] text-gray-500 dark:text-gray-400">
                النقاط تطبَّق تلقائياً على تقييم العضو في النظام.
            </p>
        </div>
    </div>

    {{-- كروت اللايفات --}}
    @if($streams->isEmpty())
        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-6 text-center text-sm text-gray-500 dark:text-gray-400">
            لا يوجد لايفات لهذا اليوم بحسب الفلاتر الحالية.
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
            @foreach($streams as $live)
                @php
                    $u     = $live->user;
                    $name  = $u->name ?: $u->username;
                    $hours = round(($live->duration_hours ?? 0) + (($live->duration_minutes ?? 0)/60), 2);

                    $timeText = $live->scheduled_time
                        ? Carbon::parse($live->scheduled_time)->format('H:i')
                        : '—';

                    $statusLabel = match($live->status) {
                        'confirmed'        => 'مؤكد',
                        'missed_excuse'    => 'مع عذر',
                        'missed_no_excuse' => 'بدون عذر',
                        default            => 'غير مؤكد',
                    };

                    $statusClass = match($live->status) {
                        'confirmed'        => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                        'missed_excuse'    => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                        'missed_no_excuse' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                        default            => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100',
                    };

                    $isProactive = str_contains((string)($live->description ?? ''), '[PROACTIVE_SCHEDULE_ID=')
                        || (strcasecmp((string)($live->slot_label ?? ''), 'ProActive') === 0);
                @endphp

                <div id="row-{{ $live->id }}"
                     data-proactive="{{ $isProactive ? 1 : 0 }}"
                     class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700
                            shadow-sm hover:shadow-md transition-all duration-150 flex flex-col gap-3 p-4 sm:p-5">

                    {{-- الهيدر: العضو + الصورة + وقت اللايف --}}
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden border border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 flex-shrink-0">
                                <img src="{{ $u->avatar_url }}"
                                     alt="{{ $name }}"
                                     class="w-full h-full object-cover">
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
                                    {{ $name }}
                                    @if($live->is_sahra)
                                        <span class="text-amber-500 text-[11px]">🔥 سهرة</span>
                                    @endif
                                </div>
                                <div class="text-[11px] text-gray-500 dark:text-gray-400">
                                    #{{ $u->id }}
                                </div>
                            </div>
                        </div>

                        <div class="text-right text-[11px] sm:text-xs text-gray-600 dark:text-gray-300">
                            <div class="font-semibold">
                                {{ $timeText }}
                            </div>
                            <div class="text-[11px] text-gray-500 dark:text-gray-400">
                                {{ $live->slot_label ?: '—' }}
                            </div>
                        </div>
                    </div>

                    {{-- معلومات سريعة وسط الكرت --}}
                    <div class="grid grid-cols-3 gap-2 text-[11px] sm:text-xs text-gray-600 dark:text-gray-300">
                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-gray-500 dark:text-gray-400">النوع</span>
                            <span class="font-semibold text-gray-900 dark:text-gray-100">
                                @if($live->type==='guests') قستات
                                @elseif($live->type==='tours') تحديات
                                @else كلاهما
                                @endif
                            </span>
                        </div>

                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-gray-500 dark:text-gray-400">المدة</span>
                            <span class="font-semibold text-emerald-600 dark:text-emerald-300">
                                {{ $hours }} ساعة
                            </span>
                        </div>

                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-gray-500 dark:text-gray-400">الحالة</span>
                            <span id="badge-{{ $live->id }}"
                                  class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[11px] font-semibold {{ $statusClass }}">
                                {{ $statusLabel }} ({{ (int)($live->points_earned ?? 0) }})
                            </span>
                        </div>
                    </div>

                    {{-- أزرار الإجراءات --}}
                    <div class="pt-2 border-t border-gray-100 dark:border-gray-800 flex flex-wrap justify-between items-center gap-2">
                        <p class="text-[10px] sm:text-[11px] text-gray-500 dark:text-gray-400">
                            اختر الحالة الصحيحة حسب حضور العضو لهذا اللايف.
                        </p>

                        <div class="flex flex-wrap justify-end gap-1.5 sm:gap-2">
                            <button type="button"
                                    class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                           bg-emerald-600 hover:bg-emerald-700 text-white"
                                    onclick="trySetStatus({{ $live->id }}, 'confirmed')">
                                حضر
                            </button>

                            <button type="button"
                                    class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                           bg-amber-100 hover:bg-amber-200 text-amber-800
                                           dark:bg-amber-900/40 dark:hover:bg-amber-900/70 dark:text-amber-200"
                                    onclick="tryOpenExcuse({{ $live->id }})">
                                عذر
                            </button>

                            <button type="button"
                                    class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                           bg-gray-100 hover:bg-gray-200 text-gray-800
                                           dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100"
                                    onclick="trySetStatus({{ $live->id }}, 'missed_no_excuse')">
                                بدون
                            </button>

                            <button type="button"
                                    class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                           bg-rose-100 hover:bg-rose-200 text-rose-700
                                           dark:bg-rose-900/40 dark:hover:bg-rose-900/70 dark:text-rose-200"
                                    onclick="tryDeleteLive({{ $live->id }})">
                                حذف
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- فوتر ملحمي يشرح فلسفة تأكيد اللايفات --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-700 p-4 md:p-5">
            <h3 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
                🧾 كيف تستخدم صفحة تأكيد اللايفات؟
            </h3>
            <ul class="list-disc pr-5 space-y-1.5 text-[12px] sm:text-sm text-gray-700 dark:text-gray-200">
                <li>اختر اليوم المطلوب من الفلاتر، ثم راجع قائمة اللايفات واحدًا تلو الآخر.</li>
                <li>استخدم زر <span class="font-semibold text-emerald-600 dark:text-emerald-300">حضر</span> عند تأكيد حضور اللايف فعليًا.</li>
                <li>في حال وجود عذر حقيقي، استخدم زر <span class="font-semibold text-amber-600 dark:text-amber-300">عذر</span> واكتب السبب بالتفصيل.</li>
                <li>إن لم يحضر العضو ولا يوجد مبرر مقنع، استخدم زر <span class="font-semibold text-rose-600 dark:text-rose-300">بدون</span> لتسجيل الغياب بدون عذر.</li>
                <li>الحذف مخصص للحالات التقنية فقط (خطأ بإدخال اللايف، عضو غير صحيح، أو تكرار).</li>
            </ul>
        </div>

        <div class="bg-slate-900/95 dark:bg-slate-950 rounded-2xl shadow border border-slate-700 p-4 md:p-5">
            <h3 class="text-sm sm:text-base font-semibold text-slate-50 mb-2">
                ⚖️ ملاحظات مهمة عن العدالة في التقييم
            </h3>
            <ul class="list-disc pr-5 space-y-1.5 text-[12px] sm:text-sm text-slate-200">
                <li>قرار الحالة (حضر / عذر / بدون) يؤثر مباشرة على نقاط العضو وسجله داخل فريق الوفاء الذهبي.</li>
                <li>الهدف من النظام هو <span class="font-semibold text-emerald-300">العدالة والتنظيم</span> وليس العقاب لمجرد العقاب.</li>
                <li>الأعذار يجب أن تكون واضحة ومكتوبة، لأن النظام يحفظها كمرجع مستقبلي عند تقييم العضو.</li>
                <li>يفضّل توثيق الأنماط المتكررة (غيابات متتالية بدون عذر) قبل اتخاذ أي قرار إداري أكبر.</li>
            </ul>
        </div>
    </div>

    <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-[11px] text-center text-gray-500 dark:text-gray-400">
        صفحة تأكيد اللايفات — جزء من منظومة <span class="font-semibold">غرفة الصقر</span> لمتابعة الحضور داخل
        <span class="font-semibold">فريق الوفاء الذهبي</span>.
    </div>

</div>

{{-- Modal: Excuse --}}
<div id="exBackdrop"
     class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-40"
     onclick="closeExcuse()"></div>

<div id="exModal"
     class="fixed inset-0 hidden overflow-auto z-50">
  <div class="min-h-full flex items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-2xl bg-white dark:bg-gray-900
                border border-gray-200 dark:border-gray-700 shadow-2xl">
      <div class="px-4 sm:px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="w-9 h-9 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
            <i class="fa-regular fa-circle-question text-amber-600 dark:text-amber-300 text-sm"></i>
          </div>
          <h3 class="text-base sm:text-lg font-extrabold text-gray-900 dark:text-white">
            تسجيل عذر للايف
          </h3>
        </div>
        <button type="button"
                class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
                onclick="closeExcuse()">
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>
      </div>

      <div class="px-4 sm:px-5 py-4 space-y-3">
        <input type="hidden" id="exLiveId">

        <div>
          <label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-1">
            سبب العذر (يدعم HTML Allowlist)
          </label>
          <textarea id="exReason" rows="4"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                           border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                           focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500"
                    placeholder="اكتب سبب العذر بالتفصيل..."></textarea>
        </div>

        <label class="flex items-start gap-2 text-sm text-gray-800 dark:text-gray-100">
          <input type="checkbox" id="exSworn" class="mt-1">
          <span>أُقِسم بالله أن المعلومات المذكورة صحيحة، وأتحمل مسؤولية أي معلومات غير دقيقة.</span>
        </label>
      </div>

      <div class="px-4 sm:px-5 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2">
        <button type="button"
                class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                       bg-gray-100 hover:bg-gray-200 text-gray-800
                       dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100"
                onclick="closeExcuse()">
          إلغاء
        </button>
        <button type="button"
                class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                       bg-sky-600 hover:bg-sky-700 text-white shadow-sm"
                onclick="submitExcuse()">
          <i class="fa-solid fa-floppy-disk ml-1 text-xs"></i>
          حفظ
        </button>
      </div>
    </div>
  </div>
</div>

{{-- ✅ ADD: Modal ملحمي لـ ProActive (منع التأكيد/العذر/الحذف) --}}
<div id="proBackdrop"
     class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm hidden z-40"
     onclick="closeProactiveModal()"></div>

<div id="proModal"
     class="fixed inset-0 hidden overflow-auto z-50">
  <div class="min-h-full flex items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-2xl overflow-hidden
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-sky-500/40 shadow-2xl text-white">
      <div class="px-4 sm:px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-sky-500/20 border border-sky-400/30 grid place-items-center shadow-lg shadow-sky-500/20">
            <i class="fa-solid fa-bolt text-sky-200"></i>
          </div>
          <div class="min-w-0">
            <div class="text-[11px] text-sky-200/80 font-semibold">تنبيه نظام</div>
            <div class="text-base sm:text-lg font-extrabold tracking-tight">
              هذا اللايف ProActive
            </div>
          </div>
        </div>

        <button type="button"
                class="text-sky-100/70 hover:text-white"
                onclick="closeProactiveModal()">
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>
      </div>

      <div class="px-4 sm:px-5 py-4 space-y-3">
        <div class="text-sm sm:text-base text-sky-100/90 leading-relaxed">
          هذا اللايف <span id="proLiveIdTxt" class="font-extrabold text-white">#—</span>
          من نوع <span class="font-extrabold text-sky-200">ProActive</span>،
          لذلك لا يمكن <span class="font-semibold">تأكيده</span> أو <span class="font-semibold">تسجيل عذر/غياب</span>
          أو <span class="font-semibold">حذفه</span> من صفحة التأكيد.
        </div>

        <div class="rounded-xl bg-white/5 border border-white/10 p-3 text-[12px] leading-relaxed">
          ✅ الطريقة الصحيحة:
          <ul class="list-disc pr-5 mt-2 space-y-1 text-sky-100/85">
            <li>اذهب إلى قسم <b>ProActive</b>.</li>
            <li>اضغط <b>بدء</b> عند بداية اللايف.</li>
            <li>اضغط <b>إنهاء</b> عند نهاية اللايف.</li>
          </ul>
        </div>

        <div class="text-[11px] text-sky-200/70">
          ملاحظة: هذا يضمن احتساب ProActive بشكل صحيح داخل النظام.
        </div>
      </div>

      <div class="px-4 sm:px-5 py-3 border-t border-white/10 flex items-center justify-end gap-2">
        <button type="button"
                class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold
                       bg-sky-600 hover:bg-sky-500 text-white border border-sky-400/50 transition"
                onclick="closeProactiveModal()">
          حاضر
        </button>
      </div>
    </div>
  </div>
</div>

<script>
const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

document.getElementById('copyScope')?.addEventListener('change', function () {
    const wrap = document.getElementById('copyUsersWrap');
    if (!wrap) return;
    wrap.classList.toggle('hidden', this.value !== 'selected');
});

{{-- ✅ ADD: Helpers لمنع أي إجراء على ProActive --}}
function isLiveProactive(id){
    const row = document.getElementById('row-'+id);
    if(!row) return false;
    return (row.getAttribute('data-proactive') === '1');
}

function openProactiveModal(id){
    const b = document.getElementById('proBackdrop');
    const m = document.getElementById('proModal');
    const t = document.getElementById('proLiveIdTxt');

    if(t) t.textContent = '#'+id;

    if(b) b.classList.remove('hidden');
    if(m) m.classList.remove('hidden');

;

    // fallback بسيط لو ما لقي العناصر
    if(!b || !m){
        alert('هذا اللايف من نوع ProActive. يجب الذهاب لقسم ProActive والضغط على (بدء/إنهاء) وليس تأكيد اللايف من هنا.');
    }
}

function closeProactiveModal(){
    document.getElementById('proBackdrop')?.classList.add('hidden');
    document.getElementById('proModal')?.classList.add('hidden');
}

function guardProactive(id){
    if(isLiveProactive(id)){
        openProactiveModal(id);
        return true; // blocked
    }
    return false;
}

function trySetStatus(id, status){
    if(guardProactive(id)) return;
    setStatus(id, status);
}

function tryOpenExcuse(id){
    if(guardProactive(id)) return;
    openExcuse(id);
}

function tryDeleteLive(id){
    if(guardProactive(id)) return;
    deleteLive(id);
}

function badgeUI(id, status, points){
    const b = document.getElementById('badge-'+id);
    if(!b) return;

    let text = 'غير مؤكد';
    let cls  = 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100';

    if(status==='confirmed'){
        text='مؤكد';
        cls='bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200';
    }
    if(status==='missed_excuse'){
        text='مع عذر';
        cls='bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200';
    }
    if(status==='missed_no_excuse'){
        text='بدون عذر';
        cls='bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200';
    }

    b.className = 'inline-flex items-center justify-center px-3 py-1 rounded-full text-[11px] font-semibold border border-transparent ' + cls;
    b.textContent = `${text} (${points})`;
}

async function setStatus(id, status, extra={}){
    if(guardProactive(id)) return;

    const url = `{{ url('/superadmin/falcon-room/lives-new') }}/${id}/status`;
    const res = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type':'application/json',
            'X-CSRF-TOKEN':csrf,
            'Accept':'application/json'
        },
        body: JSON.stringify({status, ...extra})
    });
    const data = await res.json().catch(()=>({}));
    if(!res.ok || !data.success){
        alert(data.message || 'خطأ أثناء التحديث');
        return;
    }
    badgeUI(id, data.new_status, data.points_earned);
}

function openExcuse(id){
    if(guardProactive(id)) return;

    document.getElementById('exLiveId').value = id;
    document.getElementById('exReason').value = '';
    document.getElementById('exSworn').checked = false;
    document.getElementById('exBackdrop').classList.remove('hidden');
    document.getElementById('exModal').classList.remove('hidden');
}

function closeExcuse(){
    document.getElementById('exBackdrop').classList.add('hidden');
    document.getElementById('exModal').classList.add('hidden');
}

function submitExcuse(){
    const id = document.getElementById('exLiveId').value;
    const reason = document.getElementById('exReason').value.trim();
    const sworn = document.getElementById('exSworn').checked ? 1 : 0;

    if(!reason){
        alert('اكتب سبب العذر');
        return;
    }
    if(!sworn){
        alert('يجب الإقرار بالقسم قبل الحفظ');
        return;
    }

    setStatus(id, 'missed_excuse', {reason, sworn}).then(()=>closeExcuse());
}

async function deleteLive(id){
    if(guardProactive(id)) return;

    if(!confirm('هل أنت متأكد من حذف هذا اللايف؟')) return;

    const url = `{{ url('/superadmin/falcon-room/lives-new') }}/${id}`;
    const res = await fetch(url, {
        method:'DELETE',
        headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json'}
    });
    const data = await res.json().catch(()=>({}));

    if(!res.ok || !data.success){
        alert('تعذّر الحذف');
        return;
    }
    document.getElementById('row-'+id)?.remove();
}
</script>
@endsection