{{-- resources/views/superadmin/proactive/schedules/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — مواعيد ProActive')
@section('page-title','📅 مواعيد فعاليات ProActive — عادي & بلس')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- ✅ HERO (ستايل سقراط) --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-cyan-400/25 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="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">
            <i class="fa-solid fa-bolt text-xs"></i>
            <span>ProActive — لوحة المواعيد الرسمية • غرفة الصقر</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            لوحة مواعيد <span class="text-cyan-300">ProActive</span> — عادي & بلس
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            غيّر الحالة إلى <b>نشطة</b> ليتم تسجيل وقت البدء تلقائيًا، ثم إلى <b>منتهية</b> لحساب المدّة وحفظها في قاعدة البيانات وتحليلها في التقارير.
            <span class="text-white/70">أي تعديل/إلغاء لازم يكون بسبب واضح + ملاحظة بالصقر ورولا.</span>
          </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>
              نشطة الآن: {{ $stats['active'] }}
            </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>
              قادمة: {{ $stats['upcoming'] }}
            </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-slate-300"></span>
              منتهية/ملغاة: {{ $stats['finished'] + $stats['cancelled'] }}
            </span>
          </div>
        </div>

        {{-- ✅ زر فتح المودل مرة ثانية --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-9 h-9 rounded-xl bg-cyan-500/20 text-cyan-200 grid place-items-center">
                <i class="fa-solid fa-file-signature"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">شروط الاستخدام</div>
                <div class="font-bold text-sm truncate">تعهد ProActive</div>
              </div>
            </div>

            <button type="button"
                    onclick="window.ProActiveGate && window.ProActiveGate.open()"
                    class="w-full inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                           bg-gradient-to-r from-cyan-200 via-emerald-200 to-fuchsia-200 shadow-lg shadow-cyan-500/15
                           hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-up-right-from-square ms-2 text-[11px]"></i>
              فتح التعهد / الشروط
            </button>

            <div class="text-[11px] text-white/60">
              * يظهر أول مرة تلقائيًا — وبعدها بتقدر تفتحه من هون.
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- ✅ FLASH --}}
    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        <i class="fa-solid fa-circle-check ms-2"></i>
        {{ session('success') }}
      </div>
    @endif
    @if(session('error'))
      <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
        <i class="fa-solid fa-triangle-exclamation ms-2"></i>
        {{ session('error') }}
      </div>
    @endif

    {{-- ✅ STATS CARDS (ستايل سقراط) --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-cyan-600/10 via-slate-950 to-slate-950 border border-cyan-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-cyan-400/10 blur-3xl"></div>
        <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">
            <i class="fa-solid fa-bolt"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">نشطة الآن</div>
            <div class="text-2xl font-extrabold text-cyan-200">{{ $stats['active'] }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-emerald-600/10 via-slate-950 to-slate-950 border border-emerald-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-emerald-400/10 blur-3xl"></div>
        <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">
            <i class="fa-solid fa-calendar-check"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">قادمة</div>
            <div class="text-2xl font-extrabold text-emerald-200">{{ $stats['upcoming'] }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-500/10 via-slate-950 to-slate-950 border border-white/10 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-white/8 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
            <i class="fa-solid fa-flag-checkered"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">منتهية / ملغاة</div>
            <div class="text-2xl font-extrabold text-white">{{ $stats['finished'] + $stats['cancelled'] }}</div>
          </div>
        </div>
      </div>
    </div>

    {{-- ✅ Filters (ستايل سقراط + بدون لمس المنطق) --}}
    <details class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl md:open">
      <summary class="cursor-pointer list-none px-4 sm:px-6 py-4 flex items-center justify-between border-b border-white/10">
        <div class="flex items-center gap-2 text-white/90">
          <span class="w-9 h-9 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
            <i class="fa-solid fa-filter text-[12px]"></i>
          </span>
          <div>
            <div class="text-[11px] text-white/60">فلترة</div>
            <div class="font-extrabold text-sm">فلاتر البحث عن المواعيد</div>
          </div>
        </div>
        <i class="fa-solid fa-chevron-down text-white/50 text-xs group-open:rotate-180 transition-transform"></i>
      </summary>

      <form method="GET" class="px-4 sm:px-6 py-4 space-y-3">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
          <div>
            <label class="text-[10px] text-slate-300/80">النوع</label>
            <select name="type" class="mt-1 w-full rounded-xl bg-black/40 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="">الكل</option>
              <option value="regular" {{ ($filter['type'] ?? '')==='regular'?'selected':'' }}>عادي</option>
              <option value="plus"    {{ ($filter['type'] ?? '')==='plus'?'selected':'' }}>بلس</option>
            </select>
          </div>

          <div>
            <label class="text-[10px] text-slate-300/80">الحالة</label>
            <select name="status" class="mt-1 w-full rounded-xl bg-black/40 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              <option value="">الكل</option>
              <option value="upcoming"  {{ ($filter['status'] ?? '')==='upcoming'?'selected':'' }}>قادمة</option>
              <option value="active"    {{ ($filter['status'] ?? '')==='active'?'selected':'' }}>نشطة</option>
              <option value="finished"  {{ ($filter['status'] ?? '')==='finished'?'selected':'' }}>منتهية</option>
              <option value="cancelled" {{ ($filter['status'] ?? '')==='cancelled'?'selected':'' }}>ملغاة</option>
            </select>
          </div>

          <div>
            <label class="text-[10px] text-slate-300/80">من تاريخ</label>
            <input type="date" name="from" value="{{ $filter['from'] ?? '' }}"
                   class="mt-1 w-full rounded-xl bg-black/40 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/30">
          </div>

          <div>
            <label class="text-[10px] text-slate-300/80">إلى تاريخ</label>
            <input type="date" name="to" value="{{ $filter['to'] ?? '' }}"
                   class="mt-1 w-full rounded-xl bg-black/40 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/30">
          </div>

          <div>
            <label class="text-[10px] text-slate-300/80">بحث (عنوان/قائد)</label>
            <input type="text" name="q" value="{{ $filter['q'] ?? '' }}"
                   class="mt-1 w-full rounded-xl bg-black/40 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                   placeholder="مثال: سهرة الجمعة / اسم القائد">
          </div>
        </div>

        <div class="flex flex-col sm:flex-row justify-end gap-2 pt-2">
          <a href="{{ route('superadmin.proactive.schedules.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">
            تفريغ الفلاتر
          </a>
          <button class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                         bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200 shadow-lg shadow-fuchsia-500/15 hover:scale-[1.01] active:scale-100 transition">
            تطبيق الفلاتر
          </button>
        </div>
      </form>
    </details>

    {{-- ✅ GRID البطاقات (نفس المنطق — بس ستايل أقوى) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
      @forelse($rows as $item)
        @php
          $status      = $item->status ?? 'upcoming';
          $statusText  = ['upcoming'=>'قادمة','active'=>'نشطة','finished'=>'منتهية','cancelled'=>'ملغاة'][$status] ?? $status;
          $toneRing    = match($status){
            'active'   => 'ring-cyan-300/60',
            'upcoming' => 'ring-emerald-300/60',
            'finished' => 'ring-slate-300/60',
            'cancelled'=> 'ring-rose-300/60',
            default    => 'ring-slate-300/40',
          };
          $chipClass   = match($status){
            'active'   => 'bg-cyan-500/10 text-cyan-200 border-cyan-400/25',
            'upcoming' => 'bg-emerald-500/10 text-emerald-200 border-emerald-400/25',
            'finished' => 'bg-white/5 text-white/80 border-white/10',
            'cancelled'=> 'bg-rose-500/10 text-rose-200 border-rose-400/25',
            default    => 'bg-white/5 text-white/80 border-white/10',
          };
          $isPlus = ($item->event_type === 'plus');
        @endphp

        <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/85 p-4 shadow-xl hover:border-fuchsia-400/30 transition ring-1 {{ $toneRing }}">
          <div class="pointer-events-none absolute -top-14 -right-12 w-44 h-44 rounded-full bg-fuchsia-500/10 blur-3xl opacity-0 group-hover:opacity-100 transition"></div>

          {{-- رأس البطاقة --}}
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[11px] uppercase tracking-wider text-white/50">
                {{ $isPlus ? 'ProActive+ (بلس)' : 'ProActive عادية' }}
              </div>
              <h3 class="mt-0.5 font-extrabold text-white truncate">
                {{ $item->event_title }}
              </h3>
            </div>
            <span class="px-2.5 py-1 rounded-full text-[11px] border {{ $chipClass }}">
              {{ $statusText }}
            </span>
          </div>

          {{-- معلومات أساسية --}}
          <div class="mt-3 text-[13px] text-white/80 space-y-2">
            <div class="flex items-center gap-2">
              <i class="fa-regular fa-calendar-days text-white/40 w-4"></i>
              <span>{{ $item->event_date }}</span>
              @if($item->event_time)
                <span class="text-white/30">—</span>
                <span>{{ \Carbon\Carbon::parse($item->event_time)->format('H:i') }}</span>
              @endif
            </div>

            <div class="flex items-center gap-2">
              <i class="fa-solid fa-signal text-white/40 w-4"></i>
              <span class="uppercase">{{ $item->platform }}</span>
            </div>

            @if($item->leader_name)
              <div class="flex items-center gap-2">
                <i class="fa-solid fa-user-tie text-white/40 w-4"></i>
                <span>القائد: {{ $item->leader_name }}</span>
              </div>
            @endif
          </div>

          {{-- شريط الوقت / المدّة (نفس منطقك) --}}
          <div class="mt-3">
            @if($status === 'active')
              <div class="rounded-2xl bg-cyan-500/10 border border-cyan-400/20 p-3 text-[12px] text-cyan-200 flex items-center gap-2">
                <i class="fa-solid fa-bolt text-cyan-300"></i>
                <div>
                  <span>نشطة منذ: </span>
                  <b class="js-ticker"
                     data-start="{{ $item->started_at ?? ($item->event_date.' '.($item->event_time ?? '00:00:00')) }}"
                     data-tz="{{ config('app.timezone','Asia/Jerusalem') }}">—:—</b>
                </div>
              </div>

            @elseif($status === 'finished')
              @php
                $raw = $item->duration_minutes;
                if ($raw === null || $raw == 0) {
                    if ($item->started_at && $item->finished_at) {
                        $raw = \Carbon\Carbon::parse($item->finished_at)
                            ->diffInMinutes(\Carbon\Carbon::parse($item->started_at));
                    } else {
                        $raw = 0;
                    }
                }
                $mins = (int) round($raw);
                if ($mins < 0) $mins = abs($mins);

                if ($mins >= 60) {
                    $hours = intdiv($mins, 60);
                    $rem   = $mins % 60;

                    if ($hours === 1) $hoursLabel = 'ساعة واحدة';
                    elseif ($hours === 2) $hoursLabel = 'ساعتين';
                    elseif ($hours >= 3 && $hours <= 10) $hoursLabel = $hours.' ساعات';
                    else $hoursLabel = $hours.' ساعة';

                    $durationText = $rem > 0 ? ($hoursLabel.' و '.$rem.' دقيقة') : $hoursLabel;
                } else {
                    $durationText = $mins.' دقيقة';
                }
              @endphp

              <div class="rounded-2xl bg-emerald-500/10 border border-emerald-400/20 p-3 text-[12px] text-emerald-200 flex items-center gap-2">
                <i class="fa-regular fa-hourglass-end text-emerald-300"></i>
                <div>
                  <span class="font-bold">المدة المحسوبة:</span>
                  <span class="ms-1">{{ $durationText }}</span>
                  <span class="opacity-60 text-[11px] ms-1">*(من وقت البدء إلى وقت الإنهاء)</span>
                </div>
              </div>

            @else
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-[12px] text-white/70 flex items-center gap-2">
                <i class="fa-regular fa-clock text-white/50"></i>
                <span>الجاهزية: ستبدأ عند تغيير الحالة إلى <b class="text-white">نشطة</b>.</span>
              </div>
            @endif
          </div>

          {{-- أزرار الإجراءات (نفس الفورمز والروتات) --}}
          <div class="mt-4 pt-4 border-t border-white/10">
            <div class="flex flex-wrap gap-2">

              {{-- تغيير الحالة العام --}}
              <form method="POST" action="{{ route('superadmin.proactive.schedules.status', $item->id) }}" class="flex items-center gap-2">
                @csrf
                <select name="status" class="rounded-xl text-xs border border-white/10 bg-black/40 text-white px-3 py-2">
                  <option value="upcoming"  {{ $status==='upcoming'?'selected':'' }}>قادمة</option>
                  <option value="active"    {{ $status==='active'?'selected':'' }}>نشطة</option>
                  <option value="finished"  {{ $status==='finished'?'selected':'' }}>منتهية</option>
                  <option value="cancelled" {{ $status==='cancelled'?'selected':'' }}>ملغاة</option>
                </select>
                <button class="px-3 py-2 rounded-xl bg-white/10 border border-white/10 text-white text-xs hover:bg-white/15 transition">
                  تحديث
                </button>
              </form>

              {{-- أزرار سريعة --}}
              @if($status!=='active')
                <form method="POST" action="{{ route('superadmin.proactive.schedules.status', $item->id) }}">
                  @csrf
                  <input type="hidden" name="status" value="active">
                  <button class="px-3 py-2 rounded-xl bg-cyan-600/90 text-white text-xs hover:bg-cyan-600 transition">
                    ابدأ الآن
                  </button>
                </form>
              @endif

              @if($status!=='finished')
                <form method="POST" action="{{ route('superadmin.proactive.schedules.status', $item->id) }}">
                  @csrf
                  <input type="hidden" name="status" value="finished">
                  <button class="px-3 py-2 rounded-xl bg-emerald-600/90 text-white text-xs hover:bg-emerald-600 transition">
                    إنهِ الآن
                  </button>
                </form>
              @endif

              <a href="{{ route('superadmin.proactive.schedules.edit',$item->id) }}"
                 class="px-3 py-2 rounded-xl bg-amber-500/90 text-white text-xs hover:bg-amber-500 transition">
                تعديل
              </a>

              <form method="POST" action="{{ route('superadmin.proactive.schedules.destroy',$item->id) }}"
                    onsubmit="return confirm('تأكيد حذف هذا الموعد؟');">
                @csrf @method('DELETE')
                <button class="px-3 py-2 rounded-xl bg-rose-600/90 text-white text-xs hover:bg-rose-600 transition">
                  حذف
                </button>
              </form>
            </div>
          </div>

        </div>
      @empty
        <div class="col-span-full">
          <div class="rounded-3xl border border-dashed border-white/15 bg-black/30 px-4 py-10 text-center text-white/60 text-sm">
            لا توجد مواعيد بعد. ابدأ بإنشاء أول موعد عبر زر <b>إضافة موعد جديد</b>.
          </div>
        </div>
      @endforelse
    </div>

    {{-- ترقيم --}}
    @if($rows->hasPages())
      <div class="px-2">{{ $rows->links() }}</div>
    @endif

  </div>
</div>

{{-- ✅ MODAL: تعهد + ملاحظات (معلومات فقط) --}}
@php
  $gateKey = 'proactive_terms_ack_v1';
@endphp

<div id="proactiveGate" class="fixed inset-0 z-[999999] hidden">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></div>

  <div class="relative max-w-2xl mx-auto mt-10 sm:mt-16 px-4">
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95 border border-fuchsia-400/25 shadow-2xl shadow-fuchsia-500/10 p-5 sm:p-6">
      <div class="pointer-events-none absolute -top-20 -right-20 w-72 h-72 rounded-full bg-fuchsia-500/12 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-20 w-80 h-80 rounded-full bg-cyan-500/12 blur-3xl"></div>

      <div class="relative space-y-4">
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200 grid place-items-center">
            <i class="fa-solid fa-file-signature text-lg"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">تنبيه/تعهد تشغيل</div>
            <div class="text-xl font-extrabold text-white">شروط واستخدام ProActive</div>
          </div>
        </div>

        <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 text-[13px] text-white/85 leading-relaxed">
          هذا للتوثيق والتنبيه فقط — <b>مش حاجز صلاحيات</b>. الهدف: كل مسؤول يعرف قواعد التشغيل قبل التعديل على المواعيد.
        </div>

        <div class="space-y-2 text-[13px] text-white/85">
          <div class="rounded-2xl bg-white/5 border border-white/10 px-4 py-3">
            <div class="font-extrabold text-white mb-1">1) عند البدء لازم الإنهاء</div>
            <div class="text-[11px] text-white/65">لا تترك فعالية “نشطة” بدون “منتهية”.</div>
          </div>

          <div class="rounded-2xl bg-white/5 border border-white/10 px-4 py-3">
            <div class="font-extrabold text-white mb-1">2) تعديل/إلغاء لازم يكون معه سبب</div>
            <div class="text-[11px] text-white/65">أي تعديل أو إلغاء لازم تكتبه في “ملاحظات الصقر ورولا”.</div>
          </div>

          <div class="rounded-2xl bg-white/5 border border-white/10 px-4 py-3">
            <div class="font-extrabold text-white mb-1">3) بروتوكول مسؤولية</div>
            <div class="text-[11px] text-white/65">التوثيق يحمي النظام ويمنع مشاكل لاحقًا.</div>
          </div>
        </div>

        {{-- ملاحظة المستخدم --}}
        <div class="rounded-2xl bg-black/40 border border-white/15 p-4 space-y-2">
          <label class="text-[11px] text-white/70 font-bold">ملاحظتك / تعهدك (مطلوب)</label>
          <textarea id="proGateNote" rows="3"
                    class="w-full rounded-2xl bg-black/40 border border-white/15 text-white text-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/35"
                    placeholder="مثال: أتعهد أن أي إلغاء/تعديل سأسجله في ملاحظات الصقر ورولا + وسأنهي كل فعالية نشطة..."></textarea>

          <div id="proGateErr" class="hidden rounded-xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-3 py-2 text-xs">
            لازم تكتب ملاحظة قصيرة قبل الموافقة.
          </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-2 pt-1">
          <button type="button" onclick="ProActiveGate.accept()"
                  class="flex-1 px-4 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                         bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200 shadow-lg shadow-fuchsia-500/15 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-check ms-2 text-[12px]"></i>
            موافق — دخول
          </button>
          <button type="button" onclick="ProActiveGate.later()"
                  class="px-4 py-2.5 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-sm hover:bg-white/15 transition">
            لاحقًا
          </button>
        </div>

        <div class="text-[11px] text-white/40">
          * يتم حفظ الملاحظة محليًا (LocalStorage). إذا بدك نخليها تنكتب تلقائيًا في “ملاحظات الصقر ورولا” لازم نضيف endpoint بسيط في الكنترول.
        </div>
      </div>
    </div>
  </div>
</div>

{{-- ✅ مؤقّت حي للفعاليات النشطة (كما هو بدون تغيير) --}}
<script>
(function(){
  function pad(n){ return (n<10?'0':'')+n; }
  function tick(){
    document.querySelectorAll('.js-ticker').forEach(function(el){
      var start = el.getAttribute('data-start');
      if(!start) return;
      var s = new Date(start.replace(' ','T'));
      if(isNaN(s.getTime())) return;
      var now   = new Date();
      var diffMs= Math.max(0, now - s);
      var mins  = Math.floor(diffMs/60000);
      var hrs   = Math.floor(mins/60);
      var rem   = mins % 60;
      el.textContent = hrs + 'س ' + pad(rem) + 'د';
    });
  }
  tick();
  setInterval(tick, 15000);
})();
</script>

{{-- ✅ Gate Script (لا يكسر الصفحة + لا يلمس السكربتات) --}}
<script>
(function(){
  const KEY = @json($gateKey);
  const gate = document.getElementById('proactiveGate');
  const note = document.getElementById('proGateNote');
  const err  = document.getElementById('proGateErr');

  function openGate(){
    if (!gate) return;
    gate.classList.remove('hidden');
  }
  function closeGate(){
    if (!gate) return;
    gate.classList.add('hidden');
    if (err) err.classList.add('hidden');
  }

  window.ProActiveGate = {
    open: openGate,
    later: function(){
      // "لاحقًا" = ما بنمنعك تعمل شيء، بس نخفي المودل
      closeGate();
    },
    accept: function(){
      if (!note || !note.value.trim()){
        if (err) err.classList.remove('hidden');
        return;
      }
      localStorage.setItem(KEY, '1');
      localStorage.setItem(KEY + '_note', note.value.trim());
      closeGate();
    }
  };

  document.addEventListener('DOMContentLoaded', function(){
    // يظهر أول مرة فقط
    const seen = localStorage.getItem(KEY) === '1';
    if (!seen) openGate();
  });
})();
</script>
@endsection