@extends('layouts.superadmin')

@section('title', 'لوحة تحكم الإدارة العليا')
@section('page-title', 'لوحة التحكم الرئيسية')

@section('content')
    @php
        use Illuminate\Support\Facades\DB;
        use Carbon\Carbon;

        $user = auth()->user();

        $enableMemberCareWidget =
            ($showMemberCareWidget ?? true) && isset($memberCareWidgetCases) && $memberCareWidgetCases->isNotEmpty();

        $latestFalconNotes = DB::table('falcon_rola_notes')->orderBy('created_at', 'desc')->limit(3)->get();

        $tz = config('app.timezone', 'Asia/Jerusalem');
        $next = $nextSchedule ?? null;

        if ($next) {
            $title = $next->event_title ?? 'فعالية ProActive القادمة';
            $type = $next->event_type ?? 'regular'; // regular|plus
            $typeTxt = $type === 'plus' ? '+Plus' : 'عادية';
            $date = Carbon::parse($next->event_date, $tz);
            $dateStr = $date->format('Y-m-d');
            $dayName = $date->locale('ar')->dayName;
            $hostName = $next->leader_name ?? '—';
            $isToday = $date->isToday();
        } else {
            $title = 'فعالية ProActive القادمة';
            $type = 'regular';
            $typeTxt = 'عادية';
            $dateStr = '—';
            $dayName = '—';
            $hostName = '—';
            $isToday = false;
        }
    @endphp
{{-- =================== Taateer Expiry Alerts Widget =================== --}}
@if(isset($taateerExpiryWidget) && $taateerExpiryWidget)
@php
  $tw = $taateerExpiryWidget;

  $danger  = $tw['danger']  ?? collect();   // <= 24h (إنذار)
  $warning = $tw['warning'] ?? collect();   // <= 48h (تنبيه)
  $expired = $tw['expired'] ?? collect();   // منتهي
  $safe    = $tw['safe']    ?? collect();   // بأمان

  $counts  = $tw['counts'] ?? ['danger'=>0,'warning'=>0,'expired'=>0,'safe'=>0,'needs_action'=>0];
  $rb      = $tw['roleBreakdown'] ?? ['admin'=>0,'supervisor'=>0,'member'=>0];

  $hasDanger = ($counts['danger'] ?? 0) > 0 || ($counts['expired'] ?? 0) > 0;
  $tzDash = config('app.timezone','Asia/Jerusalem');

  $taateerRoute = \Illuminate\Support\Facades\Route::has('superadmin.taateer.index')
      ? route('superadmin.taateer.index')
      : '#';
@endphp
{{-- =========================
   ✅ Activities / Challenges Center — temporarily disabled
   ✅ Competitions are intentionally paused from the dashboard
   ✅ No heavy score queries here while disabled
========================= --}}
@php
  $activitiesCenterDisabled = true;
  $activitiesCenterName = 'مركز الأنشطة والتفاعل';
  $activitiesModuleLabel = 'نظام الفعاليات والتحديات';
  $activitiesPausedAt = \Carbon\Carbon::now(config('app.timezone', 'Asia/Jerusalem'))->format('Y-m-d H:i');
@endphp

<div class="min-h-[1px] bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent my-6"></div>

<section dir="rtl"
  class="relative overflow-hidden rounded-[2rem] border border-cyan-400/20 bg-gradient-to-br from-slate-950 via-slate-900 to-black shadow-2xl shadow-cyan-500/10">

  <div class="pointer-events-none absolute -top-28 -right-16 h-80 w-80 rounded-full bg-cyan-500/15 blur-3xl"></div>
  <div class="pointer-events-none absolute -bottom-32 -left-16 h-96 w-96 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
  <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/35 to-transparent"></div>

  <div class="relative 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 flex-1">
        <div class="inline-flex items-center gap-2 rounded-full border border-cyan-300/20 bg-cyan-400/10 px-3 py-1 text-[11px] font-black text-cyan-100">
          <i class="fa-solid fa-shield-halved text-cyan-200"></i>
          <span>وضع رسمي مؤقت</span>
        </div>

        <h2 class="mt-3 text-2xl sm:text-3xl font-black tracking-tight text-white">
          {{ $activitiesCenterName }}
        </h2>

        <p class="mt-2 max-w-3xl text-[13px] sm:text-sm leading-7 text-slate-300">
          تم إيقاف المسابقات حاليًا من لوحة التحكم بعد انتهاء الموسم، مع إبقاء المركز جاهزًا لإعادة التشغيل لاحقًا بدون ضغط على قاعدة البيانات أو فتح روابط غير مطلوبة.
        </p>

        <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
          <div class="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
            <div class="flex items-center gap-2 text-[11px] font-bold text-slate-400">
              <i class="fa-solid fa-power-off text-rose-300"></i>
              حالة المسابقات
            </div>
            <div class="mt-1 text-base font-black text-rose-100">متوقفة مؤقتًا</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
            <div class="flex items-center gap-2 text-[11px] font-bold text-slate-400">
              <i class="fa-solid fa-gauge-high text-emerald-300"></i>
              أداء الصفحة
            </div>
            <div class="mt-1 text-base font-black text-emerald-100">أخف وأسرع</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
            <div class="flex items-center gap-2 text-[11px] font-bold text-slate-400">
              <i class="fa-solid fa-clock text-amber-300"></i>
              آخر ضبط
            </div>
            <div class="mt-1 text-base font-black text-amber-100">{{ $activitiesPausedAt }}</div>
          </div>
        </div>
      </div>

      <div class="w-full lg:w-[330px] rounded-3xl border border-white/10 bg-black/30 p-4 shadow-xl shadow-black/30">
        <div class="flex items-center gap-3">
          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl border border-rose-300/25 bg-rose-500/15 text-rose-100">
            <i class="fa-solid fa-lock text-lg"></i>
          </div>
          <div>
            <div class="text-sm font-black text-white">المسابقات مغلقة الآن</div>
            <div class="mt-1 text-[12px] leading-6 text-slate-400">
              لن تظهر جداول المشاركين أو نقاط اليوم، ولن يتم فتح صفحة المسابقات من هذا الكرت.
            </div>
          </div>
        </div>

        <div class="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-[12px] leading-6 text-amber-100">
          <i class="fa-solid fa-circle-info ml-1"></i>
          عند بدء فعالية جديدة يمكن تغيير هذا الكرت لاحقًا إلى وضع التشغيل باسم الموسم الجديد.
        </div>
      </div>
    </div>
  </div>
</section>

<div class="rounded-3xl border {{ $hasDanger ? 'border-rose-300/70 dark:border-rose-800/70' : 'border-amber-300/70 dark:border-amber-800/70' }}
            bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm overflow-hidden">

  <div class="p-4 sm:p-5 border-b border-slate-200/70 dark:border-slate-800/70">
    <div class="flex items-start justify-between gap-3">
      <div class="flex items-start gap-3">
        <div class="h-11 w-11 rounded-2xl grid place-items-center
                    {{ $hasDanger ? 'bg-rose-600 text-white' : 'bg-amber-500 text-slate-950' }} shadow">
          <i class="fa-solid {{ $hasDanger ? 'fa-triangle-exclamation' : 'fa-bell' }} text-lg"></i>
        </div>

        <div>
          <div class="text-sm font-extrabold text-slate-900 dark:text-white">
            تنبيهات انتهاء التعتير للأعضاء
          </div>

          <div class="mt-1 text-[12px] text-slate-600 dark:text-slate-200 leading-relaxed">
            القاعدة: <b>قبل يومين (48 ساعة)</b> يظهر <b>تنبيه</b> — <b>قبل يوم (24 ساعة)</b> يظهر <b>إنذار</b>.
            <br>
            <span class="text-slate-500 dark:text-slate-300">
              مهم: الهدف هو التجديد قبل الانتهاء لتفادي أي تعطل في التحقق أو الدخول.
            </span>
          </div>
        </div>
      </div>

      <div class="shrink-0 flex flex-col items-end gap-2">
        <div class="text-[11px] font-extrabold px-3 py-1 rounded-full
                    {{ $hasDanger ? 'bg-rose-500/15 border border-rose-500/25 text-rose-700 dark:text-rose-200'
                                  : 'bg-amber-500/15 border border-amber-500/25 text-amber-800 dark:text-amber-200' }}">
          بحاجة إجراء: {{ (int)($counts['needs_action'] ?? 0) }}
          <span class="opacity-70">•</span>
          إداري: {{ (int)($rb['admin'] ?? 0) }}
          <span class="opacity-70">•</span>
          مشرف: {{ (int)($rb['supervisor'] ?? 0) }}
          <span class="opacity-70">•</span>
          عضو: {{ (int)($rb['member'] ?? 0) }}
        </div>

        @if($taateerRoute !== '#')
          <a href="{{ $taateerRoute }}"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl text-[11px] font-extrabold
                    bg-slate-900 text-white hover:bg-slate-800 transition">
            <i class="fa-solid fa-key"></i>
            فتح نظام التعتير
          </a>
        @endif
      </div>
    </div>

    {{-- Summary pills --}}
    <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-2 text-[11px]">
      <div class="rounded-2xl border border-rose-300/30 bg-rose-500/10 px-3 py-2">
        <div class="text-rose-700 dark:text-rose-200 font-extrabold">منتهي</div>
        <div class="text-slate-900 dark:text-white font-black text-base">{{ (int)($counts['expired'] ?? 0) }}</div>
      </div>
      <div class="rounded-2xl border border-rose-300/30 bg-rose-500/10 px-3 py-2">
        <div class="text-rose-700 dark:text-rose-200 font-extrabold">إنذار (≤ 24 ساعة)</div>
        <div class="text-slate-900 dark:text-white font-black text-base">{{ (int)($counts['danger'] ?? 0) }}</div>
      </div>
      <div class="rounded-2xl border border-amber-300/30 bg-amber-500/10 px-3 py-2">
        <div class="text-amber-800 dark:text-amber-200 font-extrabold">تنبيه (≤ 48 ساعة)</div>
        <div class="text-slate-900 dark:text-white font-black text-base">{{ (int)($counts['warning'] ?? 0) }}</div>
      </div>
      <div class="rounded-2xl border border-emerald-300/30 bg-emerald-500/10 px-3 py-2">
        <div class="text-emerald-800 dark:text-emerald-200 font-extrabold">أعضاء بأمان</div>
        <div class="text-slate-900 dark:text-white font-black text-base">{{ (int)($counts['safe'] ?? 0) }}</div>
      </div>
    </div>
  </div>

  <div class="p-4 sm:p-5 space-y-4">

    {{-- EXPIRED --}}
    @if($expired->isNotEmpty())
      <div class="rounded-3xl border border-rose-300/30 bg-rose-500/10 p-4">
        <div class="font-extrabold text-rose-800 dark:text-rose-200 mb-2">
          🔥 أكواد منتهية — يجب إعادة إصدار/تجديد فورًا
        </div>

        <ul class="space-y-2">
          @foreach($expired->take(12) as $m)
            <li class="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/40 dark:bg-white/5 px-3 py-2">
              <div class="min-w-0">
                <div class="text-[13px] font-extrabold text-slate-900 dark:text-white truncate">
                  {{ $m->name ?: ($m->username ? '@'.$m->username : '#'.$m->id) }}
                  <span class="ms-2 text-[11px] px-2 py-0.5 rounded-full bg-black/10 dark:bg-white/10 border border-white/10">
                    {{ $m->roleLabel }}
                  </span>
                </div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                  انتهى عند:
                  {{ \Carbon\Carbon::parse($m->expiresAt, $tzDash)->locale('ar')->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
              </div>

              <span class="shrink-0 text-[11px] font-extrabold px-3 py-1 rounded-full
                           bg-rose-500/15 border border-rose-500/25 text-rose-700 dark:text-rose-200">
                منتهي
              </span>
            </li>
          @endforeach
        </ul>

        @if($expired->count() > 12)
          <div class="mt-2 text-[11px] text-rose-700/80 dark:text-rose-200/80">
            و {{ $expired->count() - 12 }} آخرون…
          </div>
        @endif
      </div>
    @endif

    {{-- DANGER <= 24h --}}
    @if($danger->isNotEmpty())
      <div class="rounded-3xl border border-rose-300/30 bg-rose-500/10 p-4">
        <div class="font-extrabold text-rose-800 dark:text-rose-200 mb-2">
          ⚠️ إنذار قبل يوم — متبقي أقل من 24 ساعة
        </div>

        <ul class="space-y-2">
          @foreach($danger->take(12) as $m)
            @php $h = max(0, (int)$m->hoursLeft); @endphp
            <li class="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/40 dark:bg-white/5 px-3 py-2">
              <div class="min-w-0">
                <div class="text-[13px] font-extrabold text-slate-900 dark:text-white truncate">
                  {{ $m->name ?: ($m->username ? '@'.$m->username : '#'.$m->id) }}
                  <span class="ms-2 text-[11px] px-2 py-0.5 rounded-full bg-black/10 dark:bg-white/10 border border-white/10">
                    {{ $m->roleLabel }}
                  </span>
                </div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                  ينتهي:
                  {{ \Carbon\Carbon::parse($m->expiresAt, $tzDash)->locale('ar')->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
              </div>

              <span class="shrink-0 text-[11px] font-extrabold px-3 py-1 rounded-full
                           bg-rose-500/15 border border-rose-500/25 text-rose-700 dark:text-rose-200">
                متبقي {{ $h }}س
              </span>
            </li>
          @endforeach
        </ul>

        @if($danger->count() > 12)
          <div class="mt-2 text-[11px] text-rose-700/80 dark:text-rose-200/80">
            و {{ $danger->count() - 12 }} آخرون…
          </div>
        @endif
      </div>
    @endif

    {{-- WARNING <= 48h --}}
    @if($warning->isNotEmpty())
      <div class="rounded-3xl border border-amber-300/30 bg-amber-500/10 p-4">
        <div class="font-extrabold text-amber-900 dark:text-amber-200 mb-2">
          🔔 تنبيه قبل يومين — متبقي أقل من 48 ساعة
        </div>

        <ul class="space-y-2">
          @foreach($warning->take(12) as $m)
            @php $h = max(0, (int)$m->hoursLeft); @endphp
            <li class="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/40 dark:bg-white/5 px-3 py-2">
              <div class="min-w-0">
                <div class="text-[13px] font-extrabold text-slate-900 dark:text-white truncate">
                  {{ $m->name ?: ($m->username ? '@'.$m->username : '#'.$m->id) }}
                  <span class="ms-2 text-[11px] px-2 py-0.5 rounded-full bg-black/10 dark:bg-white/10 border border-white/10">
                    {{ $m->roleLabel }}
                  </span>
                </div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                  ينتهي:
                  {{ \Carbon\Carbon::parse($m->expiresAt, $tzDash)->locale('ar')->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
              </div>

              <span class="shrink-0 text-[11px] font-extrabold px-3 py-1 rounded-full
                           bg-amber-500/15 border border-amber-500/25 text-amber-800 dark:text-amber-200">
                متبقي {{ $h }}س
              </span>
            </li>
          @endforeach
        </ul>

        @if($warning->count() > 12)
          <div class="mt-2 text-[11px] text-amber-800/80 dark:text-amber-200/80">
            و {{ $warning->count() - 12 }} آخرون…
          </div>
        @endif
      </div>
    @endif

    {{-- SAFE (collapsible) --}}
    <details class="rounded-3xl border border-emerald-300/30 bg-emerald-500/10 p-4">
      <summary class="cursor-pointer list-none flex items-center justify-between gap-2">
        <div class="font-extrabold text-emerald-900 dark:text-emerald-200">
          🟢 أعضاء بأمان (أكثر من 48 ساعة)
          <span class="ms-2 text-[11px] font-black px-2 py-0.5 rounded-full bg-emerald-500/15 border border-emerald-500/25">
            {{ $safe->count() }}
          </span>
        </div>
        <i class="fa-solid fa-chevron-down text-[11px] text-emerald-900/70 dark:text-emerald-200/70"></i>
      </summary>

      <div class="mt-3">
        @if($safe->isEmpty())
          <div class="text-[12px] text-emerald-900/80 dark:text-emerald-200/80">
            لا يوجد.
          </div>
        @else
          <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2">
            @foreach($safe->take(10) as $m)
              <li class="rounded-2xl border border-white/10 bg-white/40 dark:bg-white/5 px-3 py-2">
                <div class="text-[13px] font-extrabold text-slate-900 dark:text-white truncate">
                  {{ $m->name ?: ($m->username ? '@'.$m->username : '#'.$m->id) }}
                  <span class="ms-2 text-[11px] px-2 py-0.5 rounded-full bg-black/10 dark:bg-white/10 border border-white/10">
                    {{ $m->roleLabel }}
                  </span>
                </div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                  ينتهي:
                  {{ \Carbon\Carbon::parse($m->expiresAt, $tzDash)->locale('ar')->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
              </li>
            @endforeach
          </ul>

          @if($safe->count() > 10)
            <div class="mt-2 text-[11px] text-emerald-900/70 dark:text-emerald-200/70">
              و {{ $safe->count() - 10 }} آخرون…
            </div>
          @endif
        @endif
      </div>
    </details>

  </div>
</div>
@endif
    <div id="sa-dashboard" class="relative rtl min-h-[70vh]">

        {{-- خلفية Enterprise (fancy) --}}
        <div class="pointer-events-none absolute inset-0 overflow-hidden">
            <div class="absolute -top-32 -right-24 h-96 w-96 rounded-full bg-violet-500/10 blur-3xl"></div>
            <div class="absolute -bottom-32 -left-24 h-96 w-96 rounded-full bg-cyan-500/10 blur-3xl"></div>
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(99,102,241,0.08),transparent_55%)]">
            </div>
        </div>

        {{-- Toast container --}}
        <div id="sa-toasts" class="fixed top-4 left-4 z-[9999] space-y-2"></div>

        <div class="relative space-y-6">

            {{-- ======================= Top Sticky Console Bar + Tabs ======================= --}}
        <div class="sticky top-0 z-40 -mx-2 px-2 pt-2">
  <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70
              bg-white/70 dark:bg-slate-950/45 backdrop-blur-xl
              shadow-[0_20px_60px_-40px_rgba(2,6,23,0.55)] overflow-hidden">

    {{-- Top Header (Compact) --}}
    <div class="px-3 sm:px-4 pt-3 sm:pt-4 pb-2">
      <div class="flex items-center justify-between gap-3">
        <div class="flex items-center gap-3 min-w-0">
          <div class="h-10 w-10 sm:h-11 sm:w-11 rounded-2xl
                      bg-gradient-to-br from-slate-900 via-slate-950 to-black
                      ring-1 ring-emerald-500/25 shadow-lg grid place-items-center text-white shrink-0">
            <i class="fa-solid fa-shield-halved text-[16px] sm:text-lg"></i>
          </div>

          <div class="min-w-0">
            <div class="flex items-center gap-2 min-w-0">
              <h1 class="text-[13px] sm:text-sm font-extrabold text-slate-900 dark:text-white truncate">
                SuperAdmin Console — مركز الإدارة العليا
              </h1>

              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-extrabold
                           bg-emerald-500/10 text-emerald-800 border border-emerald-500/15
                           dark:bg-emerald-500/10 dark:text-emerald-200 dark:border-emerald-500/20 shrink-0">
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                Live
              </span>
            </div>

            <div class="mt-0.5 text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-300 truncate">
              {{ \Carbon\Carbon::now()->locale('ar')->isoFormat('dddd D MMMM YYYY') }}
              <span class="opacity-60">•</span>
              {{ now($tz)->format('H:i') }}
            </div>
          </div>
        </div>

        <div class="flex items-center gap-2 shrink-0">
          {{-- User badge: hidden on mobile to save space --}}
          <div class="hidden md:flex items-center gap-2 rounded-2xl px-2.5 py-2
                      border border-slate-200/70 dark:border-slate-800/70
                      bg-white/70 dark:bg-slate-950/40">
            <img src="{{ $user->avatar_url ?? '/default-avatar.png' }}"
                 class="h-8 w-8 rounded-xl object-cover ring-1 ring-white/70 dark:ring-slate-800"
                 alt="avatar">
            <div class="leading-tight">
              <div class="text-[12px] font-bold text-slate-900 dark:text-white truncate max-w-[160px]">
                {{ $user->name }}
              </div>
              <div class="text-[10px] text-slate-500 dark:text-slate-300">
                مشرف / الإدارة العليا
              </div>
            </div>
          </div>

          <button id="sa-refresh-all" type="button"
                  class="inline-flex items-center gap-2 rounded-2xl px-3 py-2 text-[11px] sm:text-xs font-extrabold
                         bg-slate-900 text-white hover:bg-slate-800 transition
                         dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white
                         ring-1 ring-black/5 dark:ring-white/10">
            <i class="fa-solid fa-rotate"></i>
            <span class="hidden sm:inline">تحديث شامل</span>
            <span class="sm:hidden">تحديث</span>
          </button>
        </div>
      </div>
    </div>

    {{-- Tabs (Mobile-first: horizontal scroll instead of big wrap) --}}
    <div class="px-2.5 sm:px-4 pb-2.5 sm:pb-3">
      @php
        $tabs = [
          ['key' => 'overview',  'label' => 'نظرة عامة',        'icon' => 'fa-layer-group'],
          ['key' => 'members',   'label' => 'الأعضاء',          'icon' => 'fa-users-gear'],
          ['key' => 'requests',  'label' => 'الطلبات',          'icon' => 'fa-inbox'],
          ['key' => 'presence',  'label' => 'التواجد',          'icon' => 'fa-signal'],
          ['key' => 'analytics', 'label' => 'التحليلات',        'icon' => 'fa-chart-pie'],
          ['key' => 'proactive', 'label' => 'ProActive',        'icon' => 'fa-bolt'],
          ['key' => 'tips',      'label' => 'النصائح',          'icon' => 'fa-lightbulb'],
        ];
      @endphp

      <div class="relative">
        {{-- subtle divider line --}}
        <div class="absolute inset-x-0 top-0 h-px bg-slate-200/70 dark:bg-slate-800/70"></div>

        <div class="pt-2 flex items-center gap-2 overflow-x-auto no-scrollbar
                    snap-x snap-mandatory"
             role="tablist" aria-label="لوحة تحكم الإدارة - تبويبات">

          @foreach ($tabs as $t)
            <button type="button"
                    data-sa-tab="{{ $t['key'] }}"
                    role="tab"
                    aria-selected="{{ $t['key'] === 'overview' ? 'true' : 'false' }}"
                    class="sa-tab-btn snap-start shrink-0
                           inline-flex items-center gap-2 rounded-2xl px-3 py-2
                           text-[11px] sm:text-xs font-extrabold
                           border border-slate-200/70 dark:border-slate-800/70
                           bg-white/60 dark:bg-slate-950/30
                           text-slate-700 dark:text-slate-200
                           hover:bg-white/90 dark:hover:bg-slate-900/60 transition
                           focus:outline-none focus:ring-2 focus:ring-emerald-400/30">
              <span class="inline-flex h-6 w-6 rounded-xl items-center justify-center
                           bg-slate-900/5 dark:bg-white/5 border border-slate-900/5 dark:border-white/10">
                <i class="fa-solid {{ $t['icon'] }} text-[12px]"></i>
              </span>
              <span class="whitespace-nowrap">{{ $t['label'] }}</span>
            </button>
          @endforeach
        </div>
      </div>
    </div>

  </div>
</div>

{{-- optional: hide scrollbar --}}
<style>
  .no-scrollbar::-webkit-scrollbar{ display:none; }
  .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
</style>


            {{-- ======================= PANELS ======================= --}}
            {{-- Panel: OVERVIEW --}}
            <section data-sa-panel="overview" role="tabpanel" class="space-y-6">

                {{-- Hero Card (Enterprise Profile + KPIs) --}}
                <div
                    class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70
                           bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl
                           shadow-[0_30px_80px_-60px_rgba(2,6,23,0.7)]
                           p-5 sm:p-6">

                    <div class="flex items-start gap-4 sm:gap-6">
                        <div class="flex-shrink-0">
                            <img src="{{ $user->avatar_url ?? '/default-avatar.png' }}"
                                class="w-16 h-16 sm:w-20 sm:h-20 rounded-3xl object-cover ring-2 ring-white dark:ring-slate-900 shadow"
                                alt="صورة المشرف">
                        </div>

                        <div class="flex-1 min-w-0 space-y-3">
                            <div>
                                <p class="text-[11px] sm:text-xs font-medium text-slate-500 dark:text-slate-300">
                                    لوحة الإدارة العليا — تحكم Enterprise
                                </p>

                                <div class="flex flex-wrap items-center gap-2 mt-1">
                                    <h2
                                        class="text-xl sm:text-2xl md:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                                        مرحبا {{ $user->name }}
                                    </h2>

                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-extrabold
                                               bg-sky-500/10 text-sky-700 border border-sky-500/10
                                               dark:bg-sky-500/10 dark:text-sky-200 dark:border-sky-500/20">
                                        مشرف / الإدارة العليا
                                    </span>
                                </div>

                                <div
                                    class="mt-1 flex flex-wrap items-center gap-3 text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fa-regular fa-calendar text-[10px]"></i>
                                        {{ \Carbon\Carbon::now()->locale('ar')->isoFormat('dddd D MMMM YYYY') }}
                                    </span>

                                    <span class="hidden sm:inline text-slate-300 dark:text-slate-700">•</span>

                                    <span class="inline-flex items-center gap-1">
                                        <i class="fa-regular fa-clock text-[10px]"></i>
                                        آخر تسجيل دخول:
                                        <span class="font-extrabold text-slate-800 dark:text-slate-100">
                                            {{ $user->last_activity ? \Carbon\Carbon::parse($user->last_activity)->diffForHumans() : 'لأول مرة' }}
                                        </span>
                                    </span>
                                </div>

                                <p class="mt-2 text-[11px] sm:text-xs text-slate-600 dark:text-slate-200 leading-relaxed">
                                    هنا تراقب <span class="font-bold text-indigo-600 dark:text-indigo-300">صحة المنظومة</span>،
                                    التزام الأعضاء، وملفات الإدارة داخل
                                    <span class="font-extrabold text-fuchsia-600 dark:text-fuchsia-300">جيش الوفاء الذهبي</span>.
                                </p>
                            </div>

                            {{-- KPIs --}}
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-3 border-t border-dashed border-slate-200/70 dark:border-slate-800">
                                @php
                                    $kpis = [
                                        [
                                            'label' => 'إجمالي المستخدمين',
                                            'value' => $stats['total_users'] ?? '—',
                                            'valueCls' => 'text-slate-900 dark:text-white',
                                            'icon' => 'fa-users',
                                            'iconWrap' =>
                                                'bg-blue-500/10 text-blue-600 dark:bg-blue-500/10 dark:text-blue-200',
                                        ],
                                        [
                                            'label' => 'الأعضاء الرسميين',
                                            'value' => $stats['official_members'] ?? '—',
                                            'valueCls' => 'text-emerald-600 dark:text-emerald-200',
                                            'icon' => 'fa-badge-check',
                                            'iconWrap' =>
                                                'bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-200',
                                        ],
                                        [
                                            'label' => 'أعضاء بيتا',
                                            'value' => $stats['beta_members'] ?? '—',
                                            'valueCls' => 'text-amber-600 dark:text-amber-200',
                                            'icon' => 'fa-flask',
                                            'iconWrap' =>
                                                'bg-amber-500/10 text-amber-600 dark:bg-amber-500/10 dark:text-amber-200',
                                        ],
                                        [
                                            'label' => 'المتواجدون الآن',
                                            'value' => $stats['online_users'] ?? '—',
                                            'valueCls' => 'text-violet-600 dark:text-violet-200',
                                            'icon' => 'fa-signal',
                                            'iconWrap' =>
                                                'bg-violet-500/10 text-violet-600 dark:bg-violet-500/10 dark:text-violet-200',
                                        ],
                                    ];
                                @endphp

                                @foreach ($kpis as $k)
                                    <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-900/40 px-3 py-3">
                                        <div class="flex items-center justify-between gap-2">
                                            <div>
                                                <p class="text-[11px] text-slate-500 dark:text-slate-300">
                                                    {{ $k['label'] }}
                                                </p>
                                                <p class="mt-1 text-lg font-extrabold {{ $k['valueCls'] }}">
                                                    {{ $k['value'] }}
                                                </p>
                                            </div>
                                            <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl {{ $k['iconWrap'] }}">
                                                <i class="fa-solid {{ $k['icon'] }} text-xs"></i>
                                            </span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                {{-- كارد الأعضاء بعذر رسمي اليوم --}}
                @if (isset($todayExcusedUsers) && $todayExcusedUsers->isNotEmpty())
                    <div
                        class="rounded-3xl border border-rose-300/70 dark:border-rose-800/70
                               bg-rose-50/70 dark:bg-rose-950/30 p-4 sm:p-5
                               shadow-[0_20px_60px_-45px_rgba(225,29,72,0.45)]">
                        <div class="flex items-start justify-between gap-3">
                            <div class="space-y-1">
                                <div class="text-[13px] sm:text-sm font-extrabold text-rose-900 dark:text-rose-100">
                                    يوجد أعضاء في فترة غياب معتمدة تغطي تاريخ اليوم.
                                </div>
                                <div class="text-[12px] sm:text-[13px] font-bold text-rose-800 dark:text-rose-200">
                                    الأعضاء اليوم عندهم عذر رسمي للغياب:
                                </div>
                            </div>

                            <div
                                class="flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                       bg-rose-500/15 border border-rose-500/30 text-rose-700 dark:text-rose-200 text-[11px] font-extrabold">
                                <i class="fa-solid fa-user-shield text-[11px]"></i>
                                <span>{{ $todayExcusedUsers->count() }}</span>
                            </div>
                        </div>

                        <div
                            class="mt-3 rounded-3xl bg-white/70 dark:bg-white/5 border border-rose-200/70 dark:border-rose-800/60 p-3 sm:p-4">
                            <ul class="space-y-2">
                                @foreach ($todayExcusedUsers as $u)
                                    <li class="flex items-center justify-between gap-3">
                                        <div class="flex items-center gap-3 min-w-0">
                                            <div
                                                class="w-9 h-9 rounded-2xl bg-gradient-to-br from-rose-500 to-pink-600
                                                       flex items-center justify-center text-white font-extrabold flex-shrink-0">
                                                {{ mb_substr($u->name ?: $u->username, 0, 1) }}
                                            </div>
                                            <div class="min-w-0">
                                                <div class="text-[13px] font-extrabold text-rose-900 dark:text-rose-50 truncate">
                                                    {{ $u->name ?: $u->username }}
                                                </div>
                                                <div class="text-[11px] text-rose-700/80 dark:text-rose-200/80 truncate">
                                                    {{ $u->username ? '@' . $u->username : '' }}
                                                </div>
                                            </div>
                                        </div>

                                        <span class="w-2.5 h-2.5 rounded-full bg-rose-500 flex-shrink-0"></span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                {{-- مركز الأولويات الآن --}}
                @php
                    $pendingRequests = (int) ($requestStats['pending'] ?? 0);
                    $newRequests = (int) ($requestStats['new'] ?? 0);
                    $pendingAbsences = (int) ($absenceStats['pending'] ?? 0);
                    $pendingEvals = (int) ($stats['pending_evaluations'] ?? 0);
                    $pendingViolations = (int) ($violationStats['pending'] ?? ($stats['pending_violations'] ?? 0));
                    $unreadTips = (int) ($stats['unread_tips'] ?? 0);
                    $scheduledLives = (int) ($stats['scheduled_lives'] ?? 0);

                    $urgentTotal =
                        $pendingRequests + $pendingAbsences + $pendingEvals + $pendingViolations + $unreadTips;

                    $pressure = 0;
                    $pressure += min(30, ($pendingRequests / 10) * 30);
                    $pressure += min(20, ($pendingAbsences / 10) * 20);
                    $pressure += min(20, ($pendingViolations / 10) * 20);
                    $pressure += min(20, ($pendingEvals / 30) * 20);
                    $pressure += min(10, ($unreadTips / 20) * 10);
                    $pressure += min(10, ($scheduledLives / 50) * 10);
                    $pressure = (int) round(min(100, $pressure));

                    $status = 'good';
                    $label = 'مستقر';
                    if ($pressure >= 75) {
                        $status = 'danger';
                        $label = 'حرج';
                    } elseif ($pressure >= 45) {
                        $status = 'warning';
                        $label = 'متوسط';
                    }

                    $barClass =
                        $status === 'danger'
                            ? 'bg-gradient-to-r from-red-500 to-rose-500'
                            : ($status === 'warning'
                                ? 'bg-gradient-to-r from-amber-400 to-orange-500'
                                : 'bg-gradient-to-r from-emerald-400 via-sky-400 to-violet-400');

                    $urlRequests = \Illuminate\Support\Facades\Route::has('live-activities.requests.index')
                        ? route('live-activities.requests.index')
                        : '#';

                    $urlLivesToday = \Illuminate\Support\Facades\Route::has('superadmin.falcon-room.lives-new.confirm')
                        ? route('superadmin.falcon-room.lives-new.confirm', ['date' => now()->toDateString()])
                        : '#';

                    $urlTemplates = \Illuminate\Support\Facades\Route::has(
                        'superadmin.falcon-room.lives-insights.templates.index',
                    )
                        ? route('superadmin.falcon-room.lives-insights.templates.index')
                        : '#';

                    $urlFeedback = \Illuminate\Support\Facades\Route::has(
                        'superadmin.falcon-room.lives-insights.feedback.index',
                    )
                        ? route('superadmin.falcon-room.lives-insights.feedback.index')
                        : '#';

                    $templatesTotal = (int) ($insightsStats['templates_total'] ?? 0);
                    $feedbackWeek = (int) ($insightsStats['feedback_week'] ?? 0);

                    $topAiTip = $aiProgramTips[0] ?? null;
                @endphp

<div
    class="rounded-3xl border border-slate-700/70 bg-gradient-to-r from-slate-900 via-slate-950 to-slate-900
           p-4 sm:p-5 shadow-[0_35px_90px_-70px_rgba(2,6,23,0.9)] text-white rtl">

    <div class="flex flex-col md:flex-row md:items-center gap-4">

        {{-- Left: Activities Priorities --}}
<div class="flex items-center gap-3 flex-1">
    <div
        class="h-12 w-12 rounded-3xl bg-slate-900 flex items-center justify-center
               ring-2 ring-amber-500/45 shadow-lg shadow-amber-500/20">
        <i class="fa-solid fa-moon text-amber-300 text-xl"></i>
    </div>

    <div class="flex flex-col gap-1 w-full md:w-auto">
        <h2 class="text-lg sm:text-xl font-extrabold text-center md:text-right">
            مركز الأنشطة والتفاعل
        </h2>

        <p class="text-[12px] sm:text-sm text-slate-300/85 text-center md:text-right">
            ملخص سريع لأهم ملفات <span class="text-amber-200 font-bold">نظام الفعاليات والتحديات</span> اليوم
            — فعاليات • هدايا/ميزانية • جدول مهام • تنبيهات • أرشيف.
        </p>

        <div class="mt-2 flex flex-wrap items-center justify-center md:justify-start gap-2 text-[11px] text-slate-300">
            <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
                المتواجدون الآن:
                <span class="font-semibold text-slate-100">{{ $ramadanOnlineUsers ?? 0 }}</span>
            </span>

            <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
                تنبيهات المركز (معلّقة):
                <span class="font-semibold text-amber-200">{{ $ramadanUrgentTotal ?? 0 }}</span>
            </span>

            @if (!empty($ramadanNextSlot))
                <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
                    أقرب موعد نشاط:
                    <span class="font-semibold text-slate-100">{{ $ramadanNextSlot->scheduled_date ?? '—' }}</span>
                    • <span class="font-semibold text-slate-100">{{ $ramadanNextSlot->scheduled_time ?? '—' }}</span>
                </span>
            @endif

            {{-- ✅ التحديات القديمة 9 و10 — متوقفة حالياً --}}
            <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
                {{ $ramadanC9Title ?? 'التحدي 9' }}:
                <span class="font-semibold text-emerald-200">{{ $ramadanC9Participants ?? 0 }}</span>
                <span class="text-slate-400">مشارك</span>
                <span class="text-slate-500">•</span>
                <span class="font-semibold text-slate-100">{{ $ramadanC9PointsSum ?? 0 }}</span>
                <span class="text-slate-400">نقطة</span>
            </span>

            <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
                {{ $ramadanC10Title ?? 'التحدي 10' }}:
                <span class="font-semibold text-emerald-200">{{ $ramadanC10Participants ?? 0 }}</span>
                <span class="text-slate-400">مشارك</span>
                <span class="text-slate-500">•</span>
                <span class="font-semibold text-slate-100">{{ $ramadanC10PointsSum ?? 0 }}</span>
                <span class="text-slate-400">نقطة</span>
            </span>
        </div>
    </div>
</div>

{{-- Right: Activities Pressure --}}
<div class="w-full md:w-[380px] rounded-3xl border border-slate-700/60 bg-slate-950/45 p-4">
    <div class="flex items-center justify-between mb-1">
        <span class="text-[11px] text-slate-400">ضغط المركز اليوم</span>
        <span class="text-sm font-semibold text-slate-100">
            {{ $ramadanPressure ?? 0 }} / 100 —
            <span class="{{ ($ramadanStatus ?? 'ok') === 'danger' ? 'text-red-300' : ((($ramadanStatus ?? 'ok') === 'warning') ? 'text-amber-300' : 'text-emerald-300') }}">
                {{ $ramadanLabel ?? 'مستقر' }}
            </span>
        </span>
    </div>

    <div class="h-2.5 w-full rounded-full bg-slate-800 overflow-hidden">
        <div class="h-full rounded-full transition-all duration-500 {{ $ramadanBarClass ?? 'bg-emerald-500/70' }}"
             style="width: {{ min(100, max(0, (int)($ramadanPressure ?? 0))) }}%;"></div>
    </div>

    {{-- ✅ قول كمان: ضغط يومي/أسبوعي/شهري --}}
    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-300">
        <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
            يومي:
            <span class="font-semibold text-slate-100">{{ $ramadanPressureDaily ?? ($ramadanPressure ?? 0) }}</span>/100
        </span>

        <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
            أسبوعي:
            <span class="font-semibold text-slate-100">{{ $ramadanPressureWeekly ?? 0 }}</span>/100
        </span>

        <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
            شهري:
            <span class="font-semibold text-slate-100">{{ $ramadanPressureMonthly ?? 0 }}</span>/100
        </span>

        <span class="px-2 py-0.5 rounded-full border border-slate-700 bg-slate-900/60">
            البروجريس:
            <span class="font-semibold text-emerald-200">{{ $ramadanProgress ?? 0 }}%</span>
        </span>
    </div>

    {{-- ✅ Progress bar --}}
    <div class="mt-2">
        <div class="h-2.5 w-full rounded-full bg-slate-800 overflow-hidden">
            <div class="h-full rounded-full transition-all duration-500 bg-sky-500/70"
                 style="width: {{ min(100, max(0, (int)($ramadanProgress ?? 0))) }}%;"></div>
        </div>
        <div class="mt-1 text-[10px] text-slate-400">
            ملاحظة: البروجريس محسوب من ضغط الأسبوع + الشهر (كل ما الضغط أعلى يقل البروجريس).
        </div>
    </div>

    {{-- Meta strip --}}
    <div class="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
        <span class="inline-flex items-center gap-1 rounded-2xl border border-slate-700/60 bg-slate-900/50 px-2.5 py-1 text-slate-200">
            <i class="fa-solid fa-users text-[10px] text-sky-200"></i>
            المشاركون: <b class="text-slate-100">{{ $ramadanParticipantsTotal ?? 0 }}</b>
        </span>

        <span class="inline-flex items-center gap-1 rounded-2xl border border-slate-700/60 bg-slate-900/50 px-2.5 py-1 text-slate-200">
            <i class="fa-solid fa-trophy text-[10px] text-amber-200"></i>
            تحديات مربوطة: <b class="text-slate-100">{{ $ramadanLinkedCompetitionsTotal ?? 0 }}</b>
        </span>

        <span class="inline-flex items-center gap-1 rounded-2xl border border-slate-700/60 bg-slate-900/50 px-2.5 py-1 text-slate-200">
            <i class="fa-solid fa-user-check text-[10px] text-emerald-200"></i>
            مشاركون بالتحديات: <b class="text-slate-100">{{ $ramadanParticipantsInComps ?? 0 }}</b>
        </span>

        <span class="inline-flex items-center gap-1 rounded-2xl border border-slate-700/60 bg-slate-900/50 px-2.5 py-1 text-slate-200">
            <i class="fa-solid fa-file-lines text-[10px] text-violet-200"></i>
            تقارير اليوم: <b class="text-slate-100">{{ $ramadanReportsToday ?? 0 }}</b>
        </span>
    </div>

    {{-- Breakdown --}}
    <div class="mt-3 grid grid-cols-2 gap-2 text-[11px]">

        {{-- ✅ Challenges card (keeps backend enum vars unchanged) --}}
        <div class="rounded-2xl border border-slate-700 bg-slate-900/60 px-3 py-2">
            <div class="flex items-center justify-between">
                <div class="text-slate-400">تحديات (مسودات)</div>
                <div class="text-[10px] text-slate-400">
                    مربوطة: <span class="text-slate-200 font-semibold">{{ $ramadanLinkedCompetitionsTotal ?? 0 }}</span>
                </div>
            </div>

            <div class="font-semibold text-slate-100 mt-0.5">
                {{ $ramadanPendingCompetitions ?? 0 }}
                @if (($ramadanNewCompetitions ?? 0) > 0)
                    <span class="text-emerald-300">(+{{ $ramadanNewCompetitions }})</span>
                @endif
            </div>

            <div class="mt-1 flex flex-wrap items-center gap-2 text-[10px]">
                <span class="text-slate-400">نشطة:</span>
                <span class="font-semibold text-emerald-200">{{ $ramadanActiveCompetitions ?? 0 }}</span>

                {{-- ✅ اختياري: منتهية --}}
                <span class="text-slate-400">منتهية:</span>
                <span class="font-semibold text-slate-200">{{ $ramadanEndedCompetitions ?? 0 }}</span>
            </div>
        </div>

        {{-- Financial --}}
        <div class="rounded-2xl border border-slate-700 bg-slate-900/60 px-3 py-2">
            <div class="text-slate-400">هدايا/ميزانية (Pending)</div>
            <div class="font-semibold text-slate-100 mt-0.5">{{ $ramadanPendingFinancial ?? 0 }}</div>
            <div class="mt-1 flex items-center gap-2 text-[10px]">
                <span class="text-slate-400">الإجمالي:</span>
                <span class="font-semibold text-emerald-200">{{ $ramadanFinancialTotal ?? 0 }}</span>
            </div>
        </div>

        {{-- Schedule --}}
        <div class="rounded-2xl border border-slate-700 bg-slate-900/60 px-3 py-2">
            <div class="text-slate-400">الجدول/الساعات (Pending)</div>
            <div class="font-semibold text-slate-100 mt-0.5">{{ $ramadanPendingSchedule ?? 0 }}</div>

            <div class="mt-1 flex items-center justify-between text-[10px]">
                <span class="text-slate-400">اليوم:</span>
                <span class="font-semibold text-sky-200">{{ $ramadanScheduledToday ?? 0 }}</span>
            </div>

            <div class="mt-1 text-[10px] text-slate-400 truncate">
                القادمة:
                <span class="text-slate-200 font-semibold">
                    {{ $ramadanNextSlot->slot_label ?? '—' }}
                </span>
                @if (!empty($ramadanNextSlot))
                    <span class="text-slate-400">({{ $ramadanNextSlot->scheduled_date ?? '' }} {{ $ramadanNextSlot->scheduled_time ?? '' }})</span>
                @endif
            </div>
        </div>

        {{-- Archive + Alerts --}}
        <div class="rounded-2xl border border-slate-700 bg-slate-900/60 px-3 py-2">
            <div class="text-slate-400">توثيق/أرشيف (Pending)</div>
            <div class="font-semibold text-slate-100 mt-0.5">{{ $ramadanPendingArchive ?? 0 }}</div>

            <div class="mt-1 flex items-center justify-between text-[10px]">
                <span class="text-slate-400">تنبيهات عاجلة:</span>
                <span class="font-semibold text-amber-200">{{ $ramadanUrgentTotal ?? 0 }}</span>
            </div>
        </div>

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

{{-- Activities quick links --}}
<div class="mt-4 grid gap-3 md:grid-cols-4 sm:grid-cols-2 grid-cols-1">

    <div aria-disabled="true"
       class="relative overflow-hidden rounded-3xl border border-rose-400/25 bg-rose-950/25 p-4 opacity-95 cursor-not-allowed">
        <div class="pointer-events-none absolute -top-10 -left-10 h-28 w-28 rounded-full bg-rose-500/15 blur-2xl"></div>
        <div class="relative flex items-center justify-between gap-3">
            <div>
                <div class="text-xs text-rose-200/80">التحديات والمسابقات</div>
                <div class="text-sm font-black text-white">متوقفة مؤقتًا</div>
                <div class="mt-1 text-[10px] leading-5 text-slate-400">
                    تم تعطيل فتح المسابقات من الصفحة حاليًا بعد انتهاء الموسم.
                    <br>
                    مربوطة سابقًا: <span class="text-slate-200 font-semibold">{{ $ramadanLinkedCompetitionsTotal ?? 0 }}</span>
                    • منتهية: <span class="text-slate-200 font-semibold">{{ $ramadanEndedCompetitions ?? 0 }}</span>
                </div>
            </div>
            <div class="grid h-11 w-11 place-items-center rounded-2xl border border-rose-300/20 bg-rose-500/10 text-rose-100">
                <i class="fa-solid fa-lock"></i>
            </div>
        </div>
    </div>

    <a href="{{ $urlRamadanToday ?? '#' }}"
       class="rounded-3xl border border-slate-700/60 bg-slate-900/55 p-4 hover:bg-slate-900/80 transition">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs text-slate-400">مواعيد الأنشطة (اليوم)</div>
                <div class="text-sm font-semibold">متابعة اليوم</div>
                <div class="mt-1 text-[10px] text-slate-400 truncate">
                    القادمة: <span class="text-slate-200 font-semibold">{{ $ramadanNextSlot->slot_label ?? '—' }}</span>
                </div>
            </div>
            <div class="text-2xl font-extrabold text-sky-200">{{ $ramadanScheduledToday ?? 0 }}</div>
        </div>
    </a>

    <a href="{{ $urlRamadanFinancial ?? '#' }}"
       class="rounded-3xl border border-slate-700/60 bg-slate-900/55 p-4 hover:bg-slate-900/80 transition">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs text-slate-400">هدايا/ميزانية</div>
                <div class="text-sm font-semibold">إدارة المالية</div>
                <div class="mt-1 text-[10px] text-slate-400">
                    Pending: <span class="text-slate-200 font-semibold">{{ $ramadanPendingFinancial ?? 0 }}</span>
                </div>
            </div>
            <div class="text-2xl font-extrabold text-emerald-200">{{ $ramadanFinancialTotal ?? 0 }}</div>
        </div>
    </a>

    <a href="{{ $urlRamadanLog ?? '#' }}"
       class="rounded-3xl border border-slate-700/60 bg-slate-900/55 p-4 hover:bg-slate-900/80 transition">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs text-slate-400">سجل/تنبيهات المركز</div>
                <div class="text-sm font-semibold">دفتر الأنشطة</div>
                <div class="mt-1 text-[10px] text-slate-400">
                    تقارير اليوم: <span class="text-slate-200 font-semibold">{{ $ramadanReportsToday ?? 0 }}</span>
                </div>
            </div>
            <div class="text-2xl font-extrabold text-violet-200">{{ $ramadanLogWeek ?? 0 }}</div>
        </div>
    </a>
</div>

{{-- AI Activities Tip --}}
@if (!empty($ramadanTopAiTip))
    <div class="mt-4 rounded-3xl border border-slate-700/60 bg-slate-950/45 p-4">
        <div class="flex items-start gap-3">
            <div class="h-10 w-10 rounded-3xl bg-slate-900 flex items-center justify-center ring-2 ring-amber-500/35">
                <i class="fa-solid fa-star-and-crescent text-amber-300"></i>
            </div>
            <div class="flex-1">
                <div class="text-xs text-slate-400 mb-1">
                    توصية تشغيلية ذكية — {{ $ramadanTopAiTip['score'] ?? '' }}
                </div>
                <div class="font-semibold text-slate-100 mb-1">
                    {{ $ramadanTopAiTip['title'] ?? '—' }}
                </div>
                <div class="text-[12px] text-slate-300/90 leading-6">
                    {{ $ramadanTopAiTip['body'] ?? '' }}
                </div>
            </div>
        </div>
    </div>
@endif

<div class="mt-4 text-[11px] text-slate-500 text-center">
    ملاحظة: مؤشر “ضغط المركز” تقديري مبني على (تنبيهات + تحديات مسودات + مالية + جدول ساعات + أرشيف + مشاركين + تقارير اليوم).
    <span class="text-slate-400">آخر تحديث عند تحميل الصفحة.</span>
</div>
                {{-- بطاقة رقم التعتير --}}
                @if (isset($taateer) && $taateer)
                    @php
                        $issuedAt = \Carbon\Carbon::parse($taateer->issued_at)->locale('ar');
                        $expiresAt = \Carbon\Carbon::parse($taateer->expires_at)->locale('ar');
                    @endphp

                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-emerald-200/70 dark:border-emerald-800/50 shadow-sm">
                        <div class="p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-4">
                            <div class="h-10 w-10 sm:h-12 sm:w-12 rounded-2xl grid place-items-center bg-emerald-600 text-white shadow">
                                <i class="fa-solid fa-key text-lg"></i>
                            </div>

                            <div class="flex-1 space-y-2">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h3 class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-slate-50">
                                        رقم التعتير الخاص بك
                                    </h3>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-extrabold
                                                 bg-emerald-500/10 text-emerald-700 border border-emerald-500/15
                                                 dark:bg-emerald-500/10 dark:text-emerald-200 dark:border-emerald-500/20">
                                        مفعل حالياً
                                    </span>
                                </div>

                                <p class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">
                                    هذا الرقم هو مفتاح دخولك الرسمي للنظام ووسيلة التحقق من عضويتك في
                                    <span class="font-bold text-emerald-700 dark:text-emerald-300">جيش الوفاء الذهبي</span>.
                                    الرجاء الحفاظ عليه وعدم مشاركته مع أي شخص.
                                </p>

                                <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-3">
                                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
                                        <div class="text-[11px] text-slate-500 dark:text-slate-300 mb-0.5">رقم تعتيرك</div>
                                        <div class="font-mono font-bold text-slate-900 dark:text-slate-50 text-sm tracking-wider">
                                            {{ $taateer->code }}
                                        </div>
                                    </div>

                                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
                                        <div class="text-[11px] text-slate-500 dark:text-slate-300 mb-0.5">تاريخ إنشاء المفتاح</div>
                                        <div class="font-medium text-slate-900 dark:text-slate-50 text-xs sm:text-sm">
                                            {{ $issuedAt->isoFormat('D MMMM YYYY – h:mm A') }}
                                        </div>
                                    </div>

                                    <div class="rounded-2xl bg-amber-50 dark:bg-amber-950/30 p-3 border border-amber-200/80 dark:border-amber-800/60">
                                        <div class="text-[11px] text-amber-700/90 dark:text-amber-200 mb-0.5">تاريخ انتهاء الصلاحية</div>
                                        <div class="font-extrabold text-amber-900 dark:text-amber-100 text-xs sm:text-sm">
                                            {{ $expiresAt->isoFormat('D MMMM YYYY – h:mm A') }}
                                        </div>
                                        <div class="text-[10px] mt-1 text-amber-700/80 dark:text-amber-200/80">
                                            عند انتهاء الصلاحية لن تتمكن من الدخول حتى يتم إصدار رقم جديد من قبل
                                            <span class="font-bold">الصقر</span>.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="rounded-3xl border border-rose-200 dark:border-rose-900 bg-rose-50/80 dark:bg-rose-950/30 text-rose-900 dark:text-rose-100 px-4 py-3 text-xs sm:text-sm">
                        🚨 لا يوجد رقم تعتير فعّال لحسابك حالياً. الرجاء التواصل مع
                        <span class="font-extrabold">مدير نظام التعتير — الصقر</span>
                        للتحقق من حسابك.
                    </div>
                @endif

                {{-- رسائل الإدارة (AJAX) --}}
                <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm border border-slate-200/70 dark:border-slate-800/70 p-4"
                    id="adminMsgs">
                    <div class="flex items-center justify-between mb-2">
                        <div class="font-extrabold text-sm sm:text-base">📣 رسائل الإدارة</div>
                        <button id="am-refresh" type="button"
                            class="text-xs px-3 py-2 rounded-2xl border border-slate-200/70 dark:border-slate-800/70
                                   bg-white/70 dark:bg-slate-950/30 hover:bg-white dark:hover:bg-slate-900/60 transition">
                            تحديث
                        </button>
                    </div>

                    <div id="am-list" class="space-y-2 text-xs sm:text-sm"></div>
                    <div class="mt-2 text-[11px] text-slate-500 dark:text-slate-300" id="am-updated">—</div>
                </div>
            </section>

            {{-- Panel: MEMBERS --}}
            <section data-sa-panel="members" role="tabpanel" class="space-y-6" hidden>

                {{-- معدل التزامك بالاختبارات --}}
                @if (isset($testGauge))
                    <section>
                        <div class="mb-3 flex items-center justify-between gap-2">
                            <div class="flex items-center gap-2">
                                <span class="inline-flex h-9 w-9 items-center justify-center rounded-3xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-200">
                                    <i class="fa-solid fa-gauge-high"></i>
                                </span>
                                <div>
                                    <h2 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-slate-50">
                                        معدل التزامك بالاختبارات
                                    </h2>
                                    <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-300">
                                        يوضّح مستوى مشاركتك ونجاحك في اختبارات نظام الوفاء الذهبي.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800 shadow-lg shadow-slate-300/30 dark:shadow-black/40 px-5 py-6 sm:px-6 sm:py-7">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
                                <div class="w-full sm:w-1/2 flex justify-center">
                                    <div class="relative w-44 h-44 sm:w-52 sm:h-52">
                                        @php
                                            $p = max(0, min(100, $testGauge->success_rate ?? 0));
                                        @endphp

                                        <svg viewBox="0 0 120 120" class="w-full h-full">
                                            <circle cx="60" cy="60" r="40" fill="none" stroke="#E5E7EB"
                                                stroke-width="10" stroke-linecap="round" pathLength="100" />
                                            <defs>
                                                <linearGradient id="gaugeGradientMain" x1="0%" y1="0%" x2="100%" y2="0%">
                                                    <stop offset="0%" stop-color="#f97373" />
                                                    <stop offset="50%" stop-color="#facc15" />
                                                    <stop offset="100%" stop-color="#22c55e" />
                                                </linearGradient>
                                            </defs>
                                            <circle cx="60" cy="60" r="40" fill="none"
                                                stroke="url(#gaugeGradientMain)" stroke-width="10" stroke-linecap="round"
                                                pathLength="100" stroke-dasharray="{{ $p }} 100"
                                                transform="rotate(-90 60 60)" />
                                        </svg>

                                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                                            <span class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">معدل الاختبارات</span>
                                            <span class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white">{{ $p }}%</span>
                                            <span class="mt-1 text-[11px] text-slate-400 dark:text-slate-400">
                                                ناجح في {{ $testGauge->passed_tests }}/{{ $testGauge->total_tests }} اختبار
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex-1 space-y-2 text-sm sm:text-base">
                                    <h3 class="font-extrabold text-slate-900 dark:text-white flex items-center gap-2">
                                        <i class="fa-solid fa-gift text-emerald-400"></i>
                                        مستوى التزامك بالاختبارات
                                    </h3>
                                    <p class="text-slate-600 dark:text-slate-200 leading-relaxed text-xs sm:text-sm">
                                        هذا المعدّل يمثّل نسبة الاختبارات التي <span class="font-bold">نجحت فيها</span> من
                                        كل الاختبارات التي شاركت بها. كل ما ارتفع المعدّل، زادت فرصتك بالحصول على
                                        <span class="font-bold text-emerald-600 dark:text-emerald-300">
                                            هدايا وتحفيزات خاصة من القائد سيف الوفاء والصقر
                                        </span>
                                        في الفترات القادمة.
                                    </p>

                                    @if ($testGauge->total_tests === 0)
                                        <p class="text-xs text-slate-500 dark:text-slate-300">
                                            لم تشارك بأي اختبار بعد. أول ما تبدأ تحل الاختبارات، رح يظهر معدل التزامك هنا.
                                        </p>
                                    @elseif($p < 60)
                                        <p class="text-xs text-rose-600 dark:text-rose-300">
                                            معدلّك حالياً منخفض شوي… حاول تحل الاختبارات القادمة بتركيز أعلى عشان ترفع نسبتك 💪
                                        </p>
                                    @elseif($p >= 60 && $p < 85)
                                        <p class="text-xs text-amber-600 dark:text-amber-300">
                                            أداء جيّد 👏 كم اختبار ناجح زيادة وبتصير من المميّزين اللي لهم أولوية في الهدايا.
                                        </p>
                                    @else
                                        <p class="text-xs text-emerald-600 dark:text-emerald-300">
                                            مستوى أسطوري 🔥 انت من نخبة الملتزمين، ترقّب مفاجآت خاصة من القيادة.
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </section>
                @endif

                {{-- أعضاء يحتاجون متابعة — غرفة الصقر --}}
                @if ($enableMemberCareWidget)
                    <section>
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <div>
                                <h2 class="text-base md:text-lg font-black text-slate-900 dark:text-white flex items-center gap-2">
                                    <span>أعضاء يحتاجون متابعة — غرفة الصقر</span>
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold
                                                 bg-amber-500/10 text-amber-800 dark:bg-amber-500/10 dark:text-amber-200 border border-amber-500/15">
                                        <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
                                        إشارات متابعة حيّة
                                    </span>
                                </h2>
                                <p class="mt-1 text-[11px] md:text-xs text-slate-600 dark:text-slate-200">
                                    هذه القائمة تُظهر الأعضاء الذين تم وضعهم <span class="font-bold">تحت المراقبة</span>
                                    أو <span class="font-bold">يحتاجون اهتمام</span> في نظام ملفات المتابعة.
                                </p>
                            </div>
                        </div>

                        <div class="relative">
                            <div class="overflow-x-auto pb-3 sa-scrollbar">
                                <div class="flex gap-4 snap-x snap-mandatory min-w-full">
                                    @foreach ($memberCareWidgetCases as $case)
                                        @php
                                            $u = $case->user;
                                            $note = $case->notes->first();
                                            $avatarUrl =
                                                $u->avatar_url ??
                                                (!empty($u->avatar) ? asset('storage/avatars/' . $u->avatar) : null);
                                            $level = $case->level;
                                        @endphp

                                        <a href="{{ route('superadmin.falcon.member_care.show', $u) }}"
                                            class="snap-start shrink-0 w-72 md:w-80 group
                                                   rounded-3xl border shadow-sm
                                                   bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl
                                                   border-slate-200/70 dark:border-slate-800/70
                                                   hover:border-amber-400/60 hover:shadow-lg
                                                   transition-all duration-300 relative overflow-hidden">

                                            <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                                @if ($level === 'needs_attention')
                                                    <div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 via-amber-400/10 to-transparent"></div>
                                                @elseif($level === 'watch')
                                                    <div class="absolute inset-0 bg-gradient-to-br from-amber-400/10 via-sky-400/10 to-transparent"></div>
                                                @endif
                                            </div>

                                            <div class="relative z-10 p-4 space-y-3">
                                                <div class="flex items-center gap-3">
                                                    <div class="relative">
                                                        @if ($avatarUrl)
                                                            <img src="{{ $avatarUrl }}"
                                                                class="w-10 h-10 rounded-2xl object-cover border-2 border-white dark:border-slate-900 shadow">
                                                        @else
                                                            <div class="w-10 h-10 rounded-2xl grid place-items-center bg-gradient-to-br from-slate-200 to-white dark:from-slate-800 dark:to-slate-700 text-slate-700 dark:text-slate-100 text-sm font-extrabold">
                                                                {{ mb_substr($u->name ?? '؟', 0, 1) }}
                                                            </div>
                                                        @endif

                                                        @if ($level === 'needs_attention')
                                                            <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-rose-500 ring-2 ring-white dark:ring-slate-950"></span>
                                                        @elseif($level === 'watch')
                                                            <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-amber-500 ring-2 ring-white dark:ring-slate-950"></span>
                                                        @endif
                                                    </div>

                                                    <div class="min-w-0">
                                                        <p class="text-sm font-extrabold text-slate-900 dark:text-white truncate">
                                                            {{ $u->name }}
                                                        </p>
                                                        <p class="text-[11px] text-slate-500 dark:text-slate-300 truncate">
                                                            {{ $u->username }} • {{ $u->email }}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="flex flex-wrap items-center gap-2 text-[10px]">
                                                    <span class="px-2 py-0.5 rounded-full font-bold
                                                        @if ($level === 'needs_attention') bg-rose-500/10 text-rose-800 dark:text-rose-200 border border-rose-500/15
                                                        @elseif($level === 'watch') bg-amber-500/10 text-amber-800 dark:text-amber-200 border border-amber-500/15
                                                        @else bg-sky-500/10 text-sky-800 dark:text-sky-200 border border-sky-500/15 @endif">
                                                        @switch($level)
                                                            @case('watch')
                                                                تحت المراقبة
                                                                @break
                                                            @case('needs_attention')
                                                                يحتاج اهتمام
                                                                @break
                                                            @case('star')
                                                                عضو نجم ⭐
                                                                @break
                                                            @default
                                                                عادي
                                                        @endswitch
                                                    </span>

                                                    @if ($case->focus_reason)
                                                        <span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-900/50 dark:text-slate-200 line-clamp-1 border border-slate-200/60 dark:border-slate-800/60">
                                                            {{ $case->focus_reason }}
                                                        </span>
                                                    @endif
                                                </div>

                                                <div class="text-[11px] text-slate-700 dark:text-slate-200 line-clamp-3">
                                                    @if ($note)
                                                        {{ $note->body }}
                                                    @else
                                                        لا توجد ملاحظات مكتوبة بعد — افتح ملف المتابعة وأضف أول ملاحظة.
                                                    @endif
                                                </div>

                                                <div class="flex items-center justify-between text-[10px] text-slate-500 dark:text-slate-300">
                                                    <span>آخر تحديث: {{ $case->updated_at->diffForHumans() }}</span>

                                                    @if ($note && $note->next_action_at)
                                                        <span class="inline-flex items-center gap-1
                                                            {{ $note->next_action_at->isPast() ? 'text-rose-600 dark:text-rose-300' : 'text-emerald-600 dark:text-emerald-300' }}">
                                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                    d="M12 8v4l2 2m4-6a8 8 0 11-16 0 8 8 0 0116 0z" />
                                                            </svg>
                                                            متابعة: {{ $note->next_action_at->format('Y-m-d') }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>

                            <p class="mt-1 text-[10px] text-slate-500 dark:text-slate-300">
                                يمكنك سحب البطاقات أفقيًا على الهاتف لرؤية باقي الأعضاء.
                            </p>
                        </div>
                    </section>
                @endif

                {{-- أفضل أعضاء الشباب والصبايا --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {{-- Top Males --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm border border-slate-200/70 dark:border-slate-800/70 p-6">
                        <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white mb-4 flex items-center">
                            <i class="fa-solid fa-user-tie ml-2 text-blue-600 dark:text-blue-300"></i>
                            أفضل أعضاء فريق الشباب
                        </h2>

                        @if ($topMales->count() > 0)
                            <div class="space-y-4">
                                @foreach ($topMales as $index => $user)
                                    <div class="flex items-center p-4 rounded-3xl border border-blue-200/60 dark:border-blue-900/50 bg-gradient-to-r from-blue-50/80 to-white/80 dark:from-slate-950/10 dark:to-slate-950/40 hover:shadow-lg transition-shadow">
                                        <div class="flex-shrink-0">
                                            <div class="relative">
                                                <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-3xl object-cover border-4 border-white dark:border-slate-950 shadow"
                                                    src="{{ $user->avatar_url }}" alt="{{ $user->name }}">
                                                @if ($user->isOnline())
                                                    <div class="absolute -bottom-1 -left-1 w-5 h-5 bg-emerald-500 border-3 border-white dark:border-slate-950 rounded-full animate-pulse"></div>
                                                @endif
                                                <span class="absolute -top-2 -right-2 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white text-xs font-extrabold rounded-full w-7 h-7 flex items-center justify-center shadow">
                                                    {{ $index + 1 }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="mr-4 flex-grow min-w-0">
                                            <h3 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-white truncate">{{ $user->name }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-200 flex items-center">
                                                <i class="fa-solid fa-star ml-2 text-yellow-500"></i>
                                                <span class="font-extrabold text-yellow-700 dark:text-yellow-200">{{ $user->total_points }}</span> نقطة
                                            </p>

                                            @if ($user->ranks->count() > 0)
                                                <div class="flex flex-wrap gap-1 mt-2">
                                                    @foreach ($user->ranks as $rank)
                                                        <span class="px-2 py-1 bg-blue-600 text-white text-xs rounded-full">{{ $rank->name }}</span>
                                                    @endforeach
                                                </div>
                                            @endif

                                            <p class="text-xs text-slate-500 dark:text-slate-300 mt-1">
                                                <span class="inline-flex items-center">
                                                    @if ($user->membership_status == 'official')
                                                        <span class="w-2 h-2 bg-emerald-500 rounded-full ml-1"></span> عضو رسمي
                                                    @elseif($user->membership_status == 'beta')
                                                        <span class="w-2 h-2 bg-amber-500 rounded-full ml-1"></span> عضو بيتا
                                                    @endif
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-slate-500 dark:text-slate-300 text-center py-8">لا يوجد أعضاء حالياً</p>
                        @endif
                    </div>

                    {{-- Top Females --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm border border-slate-200/70 dark:border-slate-800/70 p-6">
                        <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white mb-4 flex items-center">
                            <i class="fa-solid fa-user-astronaut ml-2 text-pink-600 dark:text-pink-300"></i>
                            أفضل أعضاء فريق الصبايا
                        </h2>

                        @if ($topFemales->count() > 0)
                            <div class="space-y-4">
                                @foreach ($topFemales as $index => $user)
                                    <div class="flex items-center p-4 rounded-3xl border border-pink-200/60 dark:border-pink-900/50 bg-gradient-to-r from-pink-50/80 to-white/80 dark:from-slate-950/10 dark:to-slate-950/40 hover:shadow-lg transition-shadow">
                                        <div class="flex-shrink-0">
                                            <div class="relative">
                                                <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-3xl object-cover border-4 border-white dark:border-slate-950 shadow"
                                                    src="{{ $user->avatar_url }}" alt="{{ $user->name }}">
                                                @if ($user->isOnline())
                                                    <div class="absolute -bottom-1 -left-1 w-5 h-5 bg-emerald-500 border-3 border-white dark:border-slate-950 rounded-full animate-pulse"></div>
                                                @endif
                                                <span class="absolute -top-2 -right-2 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white text-xs font-extrabold rounded-full w-7 h-7 flex items-center justify-center shadow">
                                                    {{ $index + 1 }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="mr-4 flex-grow min-w-0">
                                            <h3 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-white truncate">{{ $user->name }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-200 flex items-center">
                                                <i class="fa-solid fa-star ml-2 text-yellow-500"></i>
                                                <span class="font-extrabold text-yellow-700 dark:text-yellow-200">{{ $user->total_points }}</span> نقطة
                                            </p>

                                            @if ($user->ranks->count() > 0)
                                                <div class="flex flex-wrap gap-1 mt-2">
                                                    @foreach ($user->ranks as $rank)
                                                        <span class="px-2 py-1 bg-pink-600 text-white text-xs rounded-full">{{ $rank->name }}</span>
                                                    @endforeach
                                                </div>
                                            @endif

                                            <p class="text-xs text-slate-500 dark:text-slate-300 mt-1">
                                                <span class="inline-flex items-center">
                                                    @if ($user->membership_status == 'official')
                                                        <span class="w-2 h-2 bg-emerald-500 rounded-full ml-1"></span> عضو رسمي
                                                    @elseif($user->membership_status == 'beta')
                                                        <span class="w-2 h-2 bg-amber-500 rounded-full ml-1"></span> عضو بيتا
                                                    @endif
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-slate-500 dark:text-slate-300 text-center py-8">لا يوجد أعضاء حالياً</p>
                        @endif
                    </div>
                </div>
            </section>

            {{-- Panel: REQUESTS --}}
            <section data-sa-panel="requests" role="tabpanel" class="space-y-6" hidden>
                {{-- عنوان القسم --}}
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h2 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-slate-50">
                            إحصائيات النظام والطلبات
                        </h2>
                        <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-300">
                            مؤشرات سريعة عن عدد الأعضاء، حركة الطلبات، الاجتماعات وطلبات الغياب.
                        </p>
                    </div>
                </div>

                {{-- KPIs --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                    @php
                        $sysKpis = [
                            [
                                'title' => 'إجمالي المستخدمين',
                                'value' => $stats['total_users'] ?? 0,
                                'grad' => 'from-blue-500 to-blue-600',
                                'icon' => 'fa-users',
                            ],
                            [
                                'title' => 'الأعضاء الرسميين',
                                'value' => $stats['official_members'] ?? 0,
                                'grad' => 'from-emerald-500 to-emerald-600',
                                'icon' => 'fa-badge-check',
                            ],
                            [
                                'title' => 'أعضاء بيتا',
                                'value' => $stats['beta_members'] ?? 0,
                                'grad' => 'from-amber-400 to-amber-500',
                                'icon' => 'fa-flask',
                            ],
                            [
                                'title' => 'المتواجدون الآن',
                                'value' => $stats['online_users'] ?? 0,
                                'grad' => 'from-violet-500 to-violet-600',
                                'icon' => 'fa-signal',
                            ],
                        ];
                    @endphp

                    @foreach ($sysKpis as $k)
                        <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-sm px-4 py-4 flex items-center justify-between gap-3">
                            <div>
                                <p class="text-xs font-bold text-slate-500 dark:text-slate-300">{{ $k['title'] }}</p>
                                <h3 class="mt-1 text-2xl md:text-3xl font-extrabold text-slate-900 dark:text-slate-50">
                                    {{ $k['value'] }}
                                </h3>
                            </div>
                            <div class="shrink-0">
                                <div class="h-11 w-11 rounded-2xl bg-gradient-to-br {{ $k['grad'] }} text-white grid place-items-center shadow">
                                    <i class="fa-solid {{ $k['icon'] }} text-lg"></i>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- الطلبات والاجتماعات والغياب --}}
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">

                    {{-- طلبات الأعضاء --}}
                    <div class="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-sm p-5 flex flex-col gap-4">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-xs tracking-wide text-slate-500 dark:text-slate-300">طلبات الأعضاء</p>

                                @if (($requestStats['new'] ?? 0) > 0)
                                    <span class="mt-2 inline-flex items-center gap-2 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 px-2.5 py-0.5 text-[11px] font-bold border border-emerald-500/15">
                                        <span class="h-2 w-2 animate-pulse rounded-full bg-emerald-400"></span>
                                        جديد اليوم: <b class="ltr:ml-1 rtl:mr-1">{{ $requestStats['new'] }}</b>
                                    </span>
                                @endif

                                <h3 class="mt-3 text-3xl md:text-4xl font-extrabold leading-none text-slate-900 dark:text-slate-50">
                                    {{ $requestStats['total'] ?? 0 }}
                                </h3>

                                <div class="mt-3 grid grid-cols-3 gap-2 text-[11px] sm:text-[12px]">
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-amber-400"></span>
                                        <span>قيد المراجعة:</span>
                                        <b class="text-amber-700 dark:text-amber-200">{{ $requestStats['pending'] ?? 0 }}</b>
                                    </span>
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
                                        <span>مقبول:</span>
                                        <b class="text-emerald-700 dark:text-emerald-200">{{ $requestStats['approved'] ?? 0 }}</b>
                                    </span>
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-rose-400"></span>
                                        <span>مرفوض:</span>
                                        <b class="text-rose-700 dark:text-rose-200">{{ $requestStats['rejected'] ?? 0 }}</b>
                                    </span>
                                </div>

                                <div class="mt-2 text-[11px] text-slate-500 dark:text-slate-300">
                                    أُضيف اليوم: <b class="text-slate-800 dark:text-slate-100">{{ $requestStats['today'] ?? 0 }}</b>
                                </div>
                            </div>

                            <div class="shrink-0">
                                <div class="grid h-11 w-11 place-items-center rounded-2xl bg-slate-50 dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/60">
                                    <i class="fa-solid fa-folder-open text-slate-600 dark:text-slate-200"></i>
                                </div>
                            </div>
                        </div>

                        @if (!empty($requestTablesStats ?? []))
                            <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-2 text-[11px] sm:text-[12px]">
                                @php
                                    $labels = [
                                        'high_level' => 'الإدارة العليا',
                                        'absences' => 'الغيابات',
                                        'live' => 'طلبات لايف/جولة',
                                        'activities' => 'طلبات نشاط',
                                        'moderator' => 'طلبات المشرف',
                                    ];
                                @endphp
                                @foreach ($requestTablesStats as $key => $row)
                                    <div class="flex items-center justify-between rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="font-bold text-slate-800 dark:text-slate-100">{{ $labels[$key] ?? $key }}</span>
                                        <span class="text-slate-500 dark:text-slate-300">
                                            {{ $row['tot'] ?? 0 }} إجمالي •
                                            <span class="text-amber-600 dark:text-amber-200">{{ $row['pending'] ?? 0 }}</span>
                                            قيد المراجعة
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <div class="pt-3 mt-1 border-t border-slate-200/70 dark:border-slate-800/70">
                            <a href="{{ route('superadmin.high-level-requests.index') }}"
                                class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 px-4 py-2 text-xs sm:text-sm font-extrabold shadow hover:opacity-95 transition">
                                إدارة الطلبات
                                <i class="fa-solid fa-arrow-left text-[11px]"></i>
                            </a>
                        </div>
                    </div>

                    {{-- الاجتماعات الإدارية --}}
                    <div class="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-sm p-5 flex flex-col gap-4">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-xs tracking-wide text-slate-500 dark:text-slate-300">الاجتماعات الإدارية</p>

                                @if (($meetStats['new'] ?? 0) > 0)
                                    <span class="mt-2 inline-flex items-center gap-2 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 px-2.5 py-0.5 text-[11px] font-bold border border-emerald-500/15">
                                        <span class="h-2 w-2 animate-pulse rounded-full bg-emerald-400"></span>
                                        جديد اليوم: <b class="ltr:ml-1 rtl:mr-1">{{ $meetStats['new'] }}</b>
                                    </span>
                                @endif

                                <h3 class="mt-3 text-3xl md:text-4xl font-extrabold leading-none text-slate-900 dark:text-slate-50">
                                    {{ $meetStats['total'] ?? 0 }}
                                </h3>

                                <div class="mt-3 grid grid-cols-3 gap-2 text-[11px] sm:text-[12px]">
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-yellow-400"></span>
                                        <span>مجدولة:</span>
                                        <b class="text-yellow-700 dark:text-yellow-200">{{ $meetStats['scheduled'] ?? 0 }}</b>
                                    </span>
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-cyan-400"></span>
                                        <span>قيد التنفيذ:</span>
                                        <b class="text-cyan-700 dark:text-cyan-200">{{ $meetStats['ongoing'] ?? 0 }}</b>
                                    </span>
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
                                        <span>مكتملة:</span>
                                        <b class="text-emerald-700 dark:text-emerald-200">{{ $meetStats['completed'] ?? 0 }}</b>
                                    </span>
                                </div>

                                <div class="mt-2 grid grid-cols-2 gap-2 text-[11px] sm:text-[12px]">
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-rose-400"></span>
                                        <span>ملغية:</span>
                                        <b class="text-rose-700 dark:text-rose-200">{{ $meetStats['cancelled'] ?? 0 }}</b>
                                    </span>
                                    <span class="flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-slate-400"></span>
                                        <span>أُضيف اليوم:</span>
                                        <b class="text-slate-800 dark:text-slate-100">{{ $meetStats['today'] ?? 0 }}</b>
                                    </span>
                                </div>
                            </div>

                            <div class="shrink-0">
                                <div class="grid h-11 w-11 place-items-center rounded-2xl bg-slate-50 dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/60">
                                    <i class="fa-regular fa-calendar text-slate-600 dark:text-slate-200"></i>
                                </div>
                            </div>
                        </div>

                        @if (!empty($meetTypesStats ?? []))
                            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-[11px] sm:text-[12px]">
                                @php
                                    $labels = [
                                        'high_level' => 'الإدارة العليا',
                                        'moderators' => 'مجلس المشرفين',
                                        'teams' => 'لجان/فرق',
                                        'one_to_one' => 'مقابلات فردية',
                                        'emergency' => 'طارئة',
                                    ];
                                @endphp
                                @foreach ($meetTypesStats as $key => $row)
                                    <div class="flex items-center justify-between rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="font-bold text-slate-800 dark:text-slate-100">{{ $labels[$key] ?? $key }}</span>
                                        <span class="text-slate-500 dark:text-slate-300">
                                            {{ $row['tot'] ?? 0 }} إجمالي •
                                            <span class="text-yellow-700 dark:text-yellow-200">{{ $row['scheduled'] ?? 0 }}</span>
                                            مجدولة
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- طلبات الغياب --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-sm p-5 flex flex-col justify-between relative overflow-hidden">
                        @if (($absenceStats['today'] ?? 0) > 0)
                            <div class="absolute top-3 left-3">
                                <span class="px-2 py-0.5 bg-amber-500/10 text-amber-700 dark:text-amber-200 text-[11px] rounded-full border border-amber-500/15">
                                    جديد اليوم: {{ $absenceStats['today'] }}
                                </span>
                            </div>
                        @endif

                        <div class="flex items-center justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-xs font-extrabold text-amber-700 dark:text-amber-200">طلبات الغياب</p>
                                <h3 class="text-3xl md:text-4xl font-extrabold mt-2 text-slate-900 dark:text-slate-50">
                                    {{ number_format($absenceStats['total'] ?? 0) }}
                                </h3>

                                <div class="mt-3 flex flex-wrap items-center gap-2 text-[11px] sm:text-[12px]">
                                    <span class="inline-flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-yellow-400"></span>
                                        <span>قيد المراجعة:</span>
                                        <b class="text-yellow-700 dark:text-yellow-200 ltr:ml-1 rtl:mr-1">{{ $absenceStats['pending'] ?? 0 }}</b>
                                    </span>
                                    <span class="inline-flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
                                        <span>معتمدة:</span>
                                        <b class="text-emerald-700 dark:text-emerald-200 ltr:ml-1 rtl:mr-1">{{ $absenceStats['approved'] ?? 0 }}</b>
                                    </span>
                                    <span class="inline-flex items-center gap-1 rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-2 py-1 border border-slate-200/60 dark:border-slate-800/60">
                                        <span class="h-2 w-2 rounded-full bg-rose-400"></span>
                                        <span>مرفوضة:</span>
                                        <b class="text-rose-700 dark:text-rose-200 ltr:ml-1 rtl:mr-1">{{ $absenceStats['rejected'] ?? 0 }}</b>
                                    </span>
                                </div>

                                <div class="mt-4">
                                    <a href="{{ route('superadmin.absences.index') }}"
                                        class="inline-flex items-center gap-2 rounded-2xl bg-amber-600 text-white px-3 py-2 text-xs font-extrabold shadow hover:bg-amber-700 transition">
                                        إدارة طلبات الغياب
                                        <i class="fa-solid fa-arrow-left"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="bg-amber-500/10 rounded-full p-3 border border-amber-500/15">
                                <i class="fa-solid fa-bell text-amber-700 dark:text-amber-200 text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Panel: PRESENCE --}}
            <section data-sa-panel="presence" role="tabpanel" class="space-y-6" hidden>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

                    {{-- المتواجدون الآن بالتفصيل --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-4 border border-slate-200/70 dark:border-slate-800/70">
                        <div class="flex items-center justify-between mb-3">
                            <div class="text-sm font-extrabold text-slate-700 dark:text-slate-200">المتواجدون الآن (تفصيلي)</div>
                            <div class="text-xs text-slate-500 dark:text-slate-300" id="online-count">
                                {{ $onlineSessions->count() ?? 0 }}
                            </div>
                        </div>

                        <div id="online-list" class="divide-y divide-slate-100 dark:divide-slate-800">
                            @forelse($onlineSessions as $s)
                                @php
                                    $map = config('page_names', []);
                                    $key = strtolower((string) ($s->current_page ?? ''));
                                    $norm = \Illuminate\Support\Str::of($key)
                                        ->replace([' ', '.', '/'], '-')
                                        ->replaceMatches('/-+/', '-')
                                        ->trim('-')
                                        ->value();
                                    $arabic = $map[$norm] ?? \Illuminate\Support\Str::of($norm)->replace('-', ' ')->title();
                                @endphp
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center gap-3 min-w-0">
                                        @if (!empty($s->user->avatar_url))
                                            <img src="{{ $s->user->avatar_url }}" class="w-8 h-8 rounded-2xl object-cover border border-slate-200/60 dark:border-slate-800/60">
                                        @endif
                                        <div class="min-w-0">
                                            <div class="text-sm font-extrabold text-slate-900 dark:text-white truncate">{{ $s->user->name }}</div>
                                            <div class="text-xs text-slate-500 dark:text-slate-300 truncate">{{ $arabic }}</div>
                                        </div>
                                    </div>
                                    <div class="text-xs text-slate-600 dark:text-slate-200">
                                        {{ number_format(($s->accumulated_ms ?? 0) / 60000, 1) }} د
                                    </div>
                                </div>
                            @empty
                                <div class="py-6 text-center text-xs text-slate-500 dark:text-slate-300">لا أحد متواجد الآن.</div>
                            @endforelse
                        </div>

                        <div id="online-updated" class="mt-3 text-[11px] text-slate-500 dark:text-slate-300">—</div>
                    </div>

                    {{-- من تواجدوا اليوم --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-4 border border-slate-200/70 dark:border-slate-800/70">
                        <div class="flex items-center justify-between mb-3">
                            <div class="text-sm font-extrabold text-slate-700 dark:text-slate-200">من تواجدوا اليوم</div>
                            <div class="text-xs text-slate-500 dark:text-slate-300">
                                <span id="today-count">0</span> عضو •
                                <span id="today-total" class="text-emerald-600 dark:text-emerald-200 font-extrabold">0 د</span>
                            </div>
                        </div>

                        <div id="today-list" class="divide-y divide-slate-100 dark:divide-slate-800">
                            <div class="py-6 text-center text-xs text-slate-500 dark:text-slate-300">لا يوجد بيانات بعد.</div>
                        </div>

                        <div id="today-updated" class="mt-3 text-[11px] text-slate-500 dark:text-slate-300">—</div>
                    </div>
                </div>
            </section>

            {{-- Panel: ANALYTICS --}}
            <section data-sa-panel="analytics" role="tabpanel" class="space-y-6" hidden>

                {{-- توزيع الذكور والإناث + حالة العضوية --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">مقارنة الذكور والإناث</h2>
                            <i class="fa-solid fa-people-group text-slate-400"></i>
                        </div>
                        <div class="flex justify-center">
                            <div id="genderChart" class="w-full max-w-md"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="text-center p-3 bg-blue-50/80 dark:bg-blue-500/10 rounded-3xl border border-blue-200/60 dark:border-blue-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">الذكور</p>
                                <p class="text-2xl font-extrabold text-blue-600 dark:text-blue-200">{{ $genderStats['male_count'] }}</p>
                                <p class="text-xs text-slate-500 dark:text-slate-300">{{ $genderStats['male_percentage'] }}%</p>
                            </div>
                            <div class="text-center p-3 bg-pink-50/80 dark:bg-pink-500/10 rounded-3xl border border-pink-200/60 dark:border-pink-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">الإناث</p>
                                <p class="text-2xl font-extrabold text-pink-600 dark:text-pink-200">{{ $genderStats['female_count'] }}</p>
                                <p class="text-xs text-slate-500 dark:text-slate-300">{{ $genderStats['female_percentage'] }}%</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">حالة العضوية</h2>
                            <i class="fa-solid fa-id-badge text-slate-400"></i>
                        </div>
                        <div class="flex justify-center">
                            <div id="membershipChart" class="w-full max-w-md"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="text-center p-3 bg-emerald-50/80 dark:bg-emerald-500/10 rounded-3xl border border-emerald-200/60 dark:border-emerald-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">رسمي</p>
                                <p class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-200">{{ $membershipStats['official'] }}</p>
                            </div>
                            <div class="text-center p-3 bg-amber-50/80 dark:bg-amber-500/10 rounded-3xl border border-amber-200/60 dark:border-amber-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">بيتا</p>
                                <p class="text-2xl font-extrabold text-amber-600 dark:text-amber-200">{{ $membershipStats['beta'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- توزيع النقاط والنشاطات الأخيرة --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white mb-4">توزيع النقاط</h2>
                        <div id="pointsChart" class="flex justify-center"></div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="text-center p-3 bg-emerald-50/80 dark:bg-emerald-500/10 rounded-3xl border border-emerald-200/60 dark:border-emerald-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">نقاط مكتسبة</p>
                                <p class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-200">{{ $pointsStats['earned'] }}</p>
                            </div>
                            <div class="text-center p-3 bg-rose-50/80 dark:bg-rose-500/10 rounded-3xl border border-rose-200/60 dark:border-rose-500/15">
                                <p class="text-sm text-slate-600 dark:text-slate-200">نقاط مخصومة</p>
                                <p class="text-2xl font-extrabold text-rose-600 dark:text-rose-200">{{ $pointsStats['deducted'] }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white mb-4">النشاطات الأخيرة</h2>
                        <div class="space-y-3 max-h-96 overflow-y-auto sa-scrollbar">
                            @if (count($recentActivities) > 0)
                                @foreach ($recentActivities as $activity)
                                    <div class="flex items-start p-3 bg-slate-50/70 dark:bg-slate-900/40 rounded-3xl border border-slate-200/60 dark:border-slate-800/60 hover:shadow-lg transition-colors">
                                        <div class="flex-shrink-0">
                                            @if ($activity['icon'] == 'evaluation')
                                                <div class="w-10 h-10 bg-blue-500/10 rounded-2xl flex items-center justify-center text-blue-600 dark:text-blue-200 border border-blue-500/15">
                                                    <i class="fa-solid fa-clipboard-check"></i>
                                                </div>
                                            @elseif($activity['icon'] == 'user')
                                                <div class="w-10 h-10 bg-emerald-500/10 rounded-2xl flex items-center justify-center text-emerald-600 dark:text-emerald-200 border border-emerald-500/15">
                                                    <i class="fa-solid fa-user-plus"></i>
                                                </div>
                                            @else
                                                <div class="w-10 h-10 bg-rose-500/10 rounded-2xl flex items-center justify-center text-rose-600 dark:text-rose-200 border border-rose-500/15">
                                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="mr-3 flex-grow min-w-0">
                                            <p class="text-sm text-slate-800 dark:text-slate-100 leading-relaxed">{{ $activity['message'] }}</p>
                                            <p class="text-xs text-slate-500 dark:text-slate-300 mt-1 flex items-center">
                                                <i class="fa-regular fa-clock ml-2"></i>
                                                {{ $activity['time'] }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center py-12">
                                    <i class="fa-regular fa-folder-open text-4xl text-slate-400"></i>
                                    <p class="text-slate-500 dark:text-slate-300 text-center mt-3">لا توجد نشاطات حديثة</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- التقييمات والحضور والمخالفات --}}
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg font-extrabold text-slate-900 dark:text-white mb-4">حالة التقييمات</h2>
                        <div id="evaluationChart" class="flex justify-center"></div>
                        <div class="mt-4 space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>موافق</span>
                                <span class="font-extrabold">{{ $evaluationStats['approved'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>معلق</span>
                                <span class="font-extrabold">{{ $evaluationStats['pending'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>مرفوض</span>
                                <span class="font-extrabold">{{ $evaluationStats['rejected'] }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg font-extrabold text-slate-900 dark:text-white mb-4">إحصائيات الحضور</h2>
                        <div id="attendanceChart" class="flex justify-center"></div>
                        <div class="mt-4 space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>حاضر</span>
                                <span class="font-extrabold">{{ $attendanceStats['present'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>عذر</span>
                                <span class="font-extrabold">{{ $attendanceStats['absent_with_excuse'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>غائب</span>
                                <span class="font-extrabold">{{ $attendanceStats['absent_without_excuse'] }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg font-extrabold text-slate-900 dark:text-white mb-4">حالة المخالفات</h2>
                        <div id="violationChart" class="flex justify-center"></div>
                        <div class="mt-4 space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>معلق</span>
                                <span class="font-extrabold">{{ $violationStats['pending'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>محلول</span>
                                <span class="font-extrabold">{{ $violationStats['resolved'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>نشط</span>
                                <span class="font-extrabold">{{ $violationStats['active'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Panel: PROACTIVE --}}
            <section data-sa-panel="proactive" role="tabpanel" class="space-y-6" hidden>
                @if (!empty($aiProgramTips) || $latestFalconNotes->count() || $next)
                    <section>
                        <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800 shadow-sm p-4 sm:p-5 space-y-3">

                            <div class="flex items-center justify-between gap-3">
                                <div class="flex items-center gap-3">
                                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-3xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-200 border border-indigo-500/15">
                                        <i class="fa-solid fa-bolt"></i>
                                    </span>
                                    <div>
                                        <h2 class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-slate-50">
                                            مركز ProActive
                                        </h2>
                                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                            ملخص سريع للفعاليات، النصايح والملاحظات بدون ما تاخذ مساحة كبيرة من الصفحة.
                                        </p>
                                    </div>
                                </div>

                                @if ($isToday)
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-amber-500/10 text-amber-800 dark:text-amber-200 text-[11px] font-bold border border-amber-500/15">
                                        <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
                                        فعالية اليوم
                                    </span>
                                @elseif($next)
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 text-[11px] font-bold border border-emerald-500/15">
                                        قريباً
                                    </span>
                                @endif
                            </div>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs sm:text-sm">
                                <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-300">نوع الفعالية</div>
                                    <div class="mt-0.5 font-bold text-slate-900 dark:text-slate-100">{{ $typeTxt }}</div>
                                </div>
                                <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-300">اليوم</div>
                                    <div class="mt-0.5 font-bold text-slate-900 dark:text-slate-100">{{ $dayName }}</div>
                                </div>
                                <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-300">التاريخ</div>
                                    <div class="mt-0.5 font-bold text-slate-900 dark:text-slate-100">{{ $dateStr }}</div>
                                </div>
                                <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 px-3 py-2 border border-slate-200/60 dark:border-slate-800/60">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-300">عند مين</div>
                                    <div class="mt-0.5 font-bold text-slate-900 dark:text-slate-100 truncate">{{ $hostName }}</div>
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center gap-3 text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                @php
                                    $tipsCount =
                                        !empty($aiProgramTips) && is_countable($aiProgramTips) ? count($aiProgramTips) : 0;
                                    $notesCount = $latestFalconNotes->count();
                                @endphp
                                <span class="inline-flex items-center gap-1">
                                    <i class="fa-solid fa-lightbulb text-amber-400 text-[11px]"></i>
                                    نصايح ProActive (آخر 30 يوم):
                                    <span class="font-bold text-slate-700 dark:text-slate-100">{{ $tipsCount }}</span>
                                </span>
                                <span class="hidden sm:inline text-slate-300 dark:text-slate-700">•</span>
                                <span class="inline-flex items-center gap-1">
                                    <i class="fa-regular fa-note-sticky text-cyan-400 text-[11px]"></i>
                                    آخر ملاحظات مسجّلة:
                                    <span class="font-bold text-slate-700 dark:text-slate-100">{{ $notesCount }}</span>
                                </span>

                                <span class="ml-auto inline-flex items-center gap-1 text-[11px] sm:text-xs">
                                    <i class="fa-solid fa-calendar-days text-indigo-500 text-[11px]"></i>
                                    <a href="{{ route('superadmin.proactive.schedules.grid') }}" class="underline decoration-dotted">
                                        مواعيد ProActive
                                    </a>
                                </span>
                            </div>

                            <details class="mt-2 group">
                                <summary class="flex items-center justify-between cursor-pointer select-none text-xs sm:text-[13px] text-slate-600 dark:text-slate-200">
                                    <span class="inline-flex items-center gap-2">
                                        <i class="fa-solid fa-layer-group text-[11px]"></i>
                                        <span>فتح لوحة ProActive الكاملة (نصائح + ملاحظات + بانر الفعالية)</span>
                                    </span>
                                    <span class="inline-flex items-center gap-1 text-[11px] text-slate-400 group-open:rotate-180 transition-transform">
                                        <i class="fa-solid fa-chevron-down"></i>
                                    </span>
                                </summary>

                                <div class="mt-4 space-y-4 sa-animate-in">

                                    {{-- نصايح برنامج ProActive الذكية --}}
                                    @if (!empty($aiProgramTips))
                                        <div class="rounded-3xl bg-gradient-to-r from-indigo-700 via-violet-700 to-sky-700 text-white p-5 shadow-lg">
                                            <div class="flex items-start justify-between gap-4">
                                                <div>
                                                    <h2 class="text-sm md:text-base font-extrabold flex items-center gap-2">
                                                        <i class="fa-solid fa-lightbulb text-amber-300"></i>
                                                        نصايح برنامج ProActive الذكية (آخر 30 يوم)
                                                    </h2>
                                                    <p class="mt-1 text-xs md:text-sm text-white/80">
                                                        هذه التوصيات مبنية على تقارير ProActive المسجّلة في آخر 30 يوم:
                                                        نسبة المشاكل، التقدّم، فعاليات PLUS، والدعوات والأصدقاء الجدد.
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="mt-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
                                                @foreach ($aiProgramTips as $tip)
                                                    @php
                                                        $level = $tip['level'] ?? 'medium';
                                                        $score = $tip['score'] ?? null;

                                                        $classes = match ($level) {
                                                            'high' => 'bg-rose-500/10 border-rose-300/60',
                                                            'positive' => 'bg-emerald-500/10 border-emerald-300/60',
                                                            'medium' => 'bg-amber-500/10 border-amber-300/60',
                                                            default => 'bg-slate-500/10 border-slate-300/60',
                                                        };

                                                        $badgeText = match ($level) {
                                                            'high' => 'أولوية عالية',
                                                            'positive' => 'خبر إيجابي',
                                                            'medium' => 'أولوية متوسطة',
                                                            default => 'معلومة عامة',
                                                        };
                                                    @endphp

                                                    <div class="rounded-3xl border {{ $classes }} p-3.5 text-xs md:text-[13px]">
                                                        <div class="flex items-center justify-between gap-2 mb-1.5">
                                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-black/20 text-[11px]">
                                                                @if ($level === 'high')
                                                                    <i class="fa-solid fa-circle-exclamation text-rose-200"></i>
                                                                @elseif($level === 'positive')
                                                                    <i class="fa-solid fa-circle-check text-emerald-200"></i>
                                                                @elseif($level === 'medium')
                                                                    <i class="fa-solid fa-triangle-exclamation text-amber-200"></i>
                                                                @else
                                                                    <i class="fa-solid fa-info-circle text-slate-200"></i>
                                                                @endif
                                                                {{ $badgeText }}
                                                            </span>

                                                            @if ($score !== null)
                                                                <span class="text-[10px] text-white/75">
                                                                    درجة الأهمية: <span class="font-bold">{{ $score }}/100</span>
                                                                </span>
                                                            @endif
                                                        </div>

                                                        <div class="font-bold text-[13px]">{{ $tip['title'] ?? 'توصية من النظام' }}</div>
                                                        <p class="mt-1 text-white/80 leading-relaxed">{{ $tip['body'] ?? '' }}</p>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    {{-- ملاحظاتكم الميمونة --}}
                                    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-indigo-900 to-slate-950 text-white shadow-xl">
                                        <div class="pointer-events-none absolute inset-0 opacity-40">
                                            <div class="absolute -top-24 -right-10 h-40 w-40 rounded-full bg-emerald-500/25 blur-3xl"></div>
                                            <div class="absolute -bottom-24 -left-10 h-40 w-40 rounded-full bg-cyan-500/25 blur-3xl"></div>
                                        </div>

                                        <div class="relative p-5 space-y-3">
                                            <div class="flex items-center justify-between gap-3">
                                                <div class="flex items-center gap-3">
                                                    <div class="w-10 h-10 rounded-2xl bg-white/10 flex items-center justify-center">
                                                        <i class="fa-regular fa-note-sticky text-lg"></i>
                                                    </div>
                                                    <div>
                                                        <h2 class="text-sm md:text-base font-extrabold flex items-center gap-2">
                                                            ملاحظاتكم الميمونة في ProActive
                                                        </h2>
                                                        <p class="text-[11px] md:text-xs text-white/70">
                                                            آخر ثلاث ملاحظات تم تسجيلها، مع حالة رد البرنامج عليها.
                                                        </p>
                                                    </div>
                                                </div>

                                                <a href="{{ route('superadmin.falconRolaNotes.index') }}"
                                                    class="hidden sm:inline-flex items-center gap-1 px-3 py-1.5 rounded-2xl bg-white/10 text-[11px] font-bold hover:bg-white/15">
                                                    عرض كل الملاحظات
                                                    <i class="fa-solid fa-arrow-left text-[10px]"></i>
                                                </a>
                                            </div>

                                            @if ($latestFalconNotes->count())
                                                <div class="mt-3 space-y-2">
                                                    @foreach ($latestFalconNotes as $note)
                                                        @php
                                                            $status = $note->program_status ?? 'pending';
                                                            $created = $note->created_at
                                                                ? Carbon::parse($note->created_at)->diffForHumans()
                                                                : 'غير محدد';

                                                            if ($status === 'approved') {
                                                                $badgeText = '✅ تم القبول';
                                                                $badgeClass =
                                                                    'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-400/30';
                                                                $hint =
                                                                    'سيتم أخذ الملاحظة بالحسبان في أوقات ProActive القادمة';
                                                            } elseif ($status === 'rejected') {
                                                                $badgeText = '❌ مرفوض';
                                                                $badgeClass =
                                                                    'bg-rose-500/15 text-rose-100 ring-1 ring-rose-400/30';
                                                                $hint = 'راجع صياغة الملاحظة، الإملاء، والتاريخ في العنوان';
                                                            } else {
                                                                $badgeText = '🕓 قيد المراجعة';
                                                                $badgeClass =
                                                                    'bg-amber-500/15 text-amber-100 ring-1 ring-amber-400/30';
                                                                $hint = 'بانتظار تقييم البرنامج لهذه الملاحظة';
                                                            }
                                                        @endphp

                                                        <div class="flex items-start gap-3 rounded-2xl bg-black/20 px-3 py-2.5">
                                                            <div class="mt-1">
                                                                <span class="inline-flex h-2 w-2 rounded-full bg-emerald-300"></span>
                                                            </div>
                                                            <div class="flex-1 min-w-0">
                                                                <div class="flex flex-wrap items-center gap-2 justify-between">
                                                                    <p class="text-xs md:text-sm font-bold truncate">{{ $note->title }}</p>
                                                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] {{ $badgeClass }}">
                                                                        {{ $badgeText }}
                                                                    </span>
                                                                </div>

                                                                <div class="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-white/70">
                                                                    <span class="inline-flex items-center gap-1">
                                                                        <i class="fa-solid fa-circle-info text-[10px] text-cyan-300"></i>
                                                                        <span>{{ $hint }}</span>
                                                                    </span>
                                                                    <span class="hidden md:inline text-white/40">•</span>
                                                                    <span class="inline-flex items-center gap-1 text-white/55">
                                                                        <i class="fa-regular fa-clock text-[10px]"></i>
                                                                        <span>أضيفت {{ $created }}</span>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="mt-3 text-[12px] text-white/70">
                                                    لا توجد ملاحظات مُسجلة حتى الآن في برنامج ProActive.
                                                </div>
                                            @endif

                                            <div class="pt-2 mt-2 border-t border-white/10 flex items-center justify-between text-[11px] text-white/50">
                                                <span>هذه الملاحظات تُستخدم كمدخلات لقرارات ProActive.</span>
                                                <a href="{{ route('superadmin.falconRolaNotes.review.lock') }}" class="inline-flex items-center gap-1 hover:text-white">
                                                    لوحة مراجعة رد البرنامج
                                                    <i class="fa-solid fa-shield-halved text-[10px]"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- بانر الفعالية --}}
                                    <div class="relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl p-6 md:p-8
                                        {{ $isToday ? 'bg-gradient-to-br from-amber-600 via-amber-500 to-orange-500' : 'bg-gradient-to-br from-slate-900 via-indigo-900 to-slate-900' }} text-white">

                                        <div class="pointer-events-none absolute inset-0">
                                            @if ($isToday)
                                                <div class="absolute -top-24 -left-24 w-72 h-72 rounded-full bg-yellow-300/30 blur-3xl animate-pulse"></div>
                                                <div class="absolute -bottom-20 -right-20 w-80 h-80 rounded-full bg-amber-400/25 blur-3xl animate-pulse"></div>
                                                <div class="absolute inset-0 ring-2 ring-yellow-300/30 rounded-3xl animate-[pulse_2s_ease-in-out_infinite]"></div>
                                            @else
                                                <div class="absolute -top-28 -left-28 w-72 h-72 rounded-full bg-indigo-500/20 blur-3xl"></div>
                                                <div class="absolute -bottom-24 -right-24 w-80 h-80 rounded-full bg-cyan-400/20 blur-3xl"></div>
                                            @endif
                                        </div>

                                        <div class="relative z-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                                            <div class="min-w-0">
                                                <div class="flex items-center gap-3">
                                                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                                                        {{ $isToday ? 'bg-black/15 ring-1 ring-black/20' : 'bg-white/10 ring-1 ring-white/20' }}
                                                        text-xs font-extrabold tracking-wide">
                                                        <i class="fa-solid fa-shield-halved"></i> رسمي
                                                    </span>
                                                    <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight flex items-center gap-2">
                                                        ⚡ فعالية ProActive
                                                        @if ($type === 'plus')
                                                            <span class="px-2 py-0.5 rounded-full bg-black/20 ring-1 ring-white/20 text-xs">+Plus</span>
                                                        @endif
                                                    </h2>
                                                </div>
                                                <p class="mt-2 text-sm {{ $isToday ? 'text-white/90' : 'text-white/80' }}">
                                                    {{ $title }} — تعزز النشاط وروح الفريق. التفاصيل تُحدّث من القيادة.
                                                </p>
                                            </div>

                                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm w-full md:w-auto">
                                                <div class="p-3 rounded-2xl {{ $isToday ? 'bg-white/10 ring-1 ring-white/20' : 'bg-white/5 ring-1 ring-white/10' }} text-center">
                                                    <div class="text-[11px] {{ $isToday ? 'text-white/80' : 'text-white/70' }}">نوع الفعالية</div>
                                                    <div class="mt-0.5 font-extrabold">{{ $typeTxt }}</div>
                                                </div>
                                                <div class="p-3 rounded-2xl {{ $isToday ? 'bg-white/10 ring-1 ring-white/20' : 'bg-white/5 ring-1 ring-white/10' }} text-center">
                                                    <div class="text-[11px] {{ $isToday ? 'text-white/80' : 'text-white/70' }}">اليوم</div>
                                                    <div class="mt-0.5 font-extrabold">{{ $dayName }}</div>
                                                </div>
                                                <div class="p-3 rounded-2xl {{ $isToday ? 'bg-white/10 ring-1 ring-white/20' : 'bg-white/5 ring-1 ring-white/10' }} text-center">
                                                    <div class="text-[11px] {{ $isToday ? 'text-white/80' : 'text-white/70' }}">التاريخ</div>
                                                    <div class="mt-0.5 font-extrabold">{{ $dateStr }}</div>
                                                </div>
                                                <div class="p-3 rounded-2xl {{ $isToday ? 'bg-white/10 ring-1 ring-white/20' : 'bg-white/5 ring-1 ring-white/10' }} text-center">
                                                    <div class="text-[11px] {{ $isToday ? 'text-white/80' : 'text-white/70' }}">عند مين</div>
                                                    <div class="mt-0.5 font-extrabold truncate">{{ $hostName }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        @if ($isToday)
                                            <div class="relative z-10 mt-5 rounded-2xl bg-black/15 ring-1 ring-yellow-300/40 px-4 py-3 flex items-center gap-3 shadow-lg backdrop-blur-md">
                                                <i class="fa-solid fa-bell text-yellow-200 animate-[ping_1.8s_linear_infinite]"></i>
                                                <div class="text-sm leading-relaxed">
                                                    <span class="font-extrabold text-yellow-100">تنبيه هام:</span>
                                                    فعالية اليوم <b>{{ $typeTxt }}</b> — يُرجى تجهيز الفريق والمتابعة الآن.
                                                </div>
                                            </div>
                                        @endif

                                        <div class="relative z-10 mt-6 flex flex-wrap items-center gap-3 justify-between">
                                            <a href="{{ route('superadmin.proactive.schedules.grid') }}"
                                                class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl
                                                    {{ $isToday ? 'bg-black/25 hover:bg-black/30' : 'bg-indigo-600 hover:bg-indigo-700' }}
                                                    text-white font-extrabold shadow transition">
                                                <i class="fa-solid fa-calendar-days"></i> مواعيد ProActive
                                            </a>
                                            <span class="text-xs {{ $isToday ? 'text-white/90' : 'text-white/60' }}">
                                                آخر مزامنة: {{ now($tz)->format('Y-m-d H:i') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </details>
                        </div>
                    </section>
                @endif
            </section>

            {{-- Panel: TIPS --}}
            <section data-sa-panel="tips" role="tabpanel" class="space-y-6" hidden>

                {{-- كارد إحصائيات النصائح --}}
                <div class="rounded-3xl shadow-lg p-6 text-white border border-cyan-500/20 bg-gradient-to-br from-cyan-600 via-cyan-700 to-slate-900/80">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-cyan-100 text-sm font-bold">إحصائيات النصائح</p>
                            <h3 class="text-3xl md:text-4xl font-extrabold mt-2">{{ $stats['total_tips'] }}</h3>
                        </div>
                        <div class="bg-white/15 rounded-2xl p-3 border border-white/15">
                            <i class="fa-solid fa-lightbulb text-2xl"></i>
                        </div>
                    </div>
                    <div class="mt-3 flex justify-between text-xs text-cyan-100">
                        <span>غير مقروءة: {{ $stats['unread_tips'] }}</span>
                        <span>تم الرد: {{ $stats['replied_tips'] }}</span>
                    </div>
                    <div id="tipsTypeChart" class="mt-4"></div>
                    <div class="mt-2 text-[11px] text-white/60">*المخطط يظهر عند فتح تبويب "النصائح" لأول مرة.</div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {{-- أعلى المستشارين نشاطاً --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <h2 class="text-lg font-extrabold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
                            <i class="fa-solid fa-user-pen text-cyan-600 dark:text-cyan-200"></i>
                            أكثر المستشارين نشاطاً
                        </h2>

                        <div class="space-y-3">
                            @forelse($topAdvisors as $index => $advisor)
                                <div class="flex items-center p-3 rounded-3xl border border-cyan-200/60 dark:border-cyan-500/15 bg-gradient-to-r from-cyan-50/80 to-white/80 dark:from-slate-950/20 dark:to-slate-950/40 hover:shadow-lg transition-shadow">
                                    <div class="flex-shrink-0 ml-3">
                                        <div class="relative">
                                            <img src="{{ $advisor->avatar_url }}" alt="{{ $advisor->name }}"
                                                class="w-12 h-12 rounded-2xl object-cover border-2 border-cyan-500/60">
                                            <span class="absolute -top-1 -right-1 w-6 h-6 bg-cyan-600 text-white text-xs font-extrabold rounded-full flex items-center justify-center shadow">
                                                {{ $index + 1 }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-extrabold text-slate-900 dark:text-white truncate">{{ $advisor->name }}</p>
                                        <p class="text-xs text-slate-500 dark:text-slate-300">{{ $advisor->role_name }}</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-extrabold text-cyan-600 dark:text-cyan-200">{{ $advisor->tips_count }}</p>
                                        <p class="text-xs text-slate-500 dark:text-slate-300">نصيحة</p>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-4">
                                    <p class="text-slate-500 dark:text-slate-300">لا يوجد مستشارين نشطين حالياً</p>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    {{-- آخر النصائح --}}
                    <div class="rounded-3xl bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl shadow-sm p-6 border border-slate-200/70 dark:border-slate-800/70">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white flex items-center gap-2">
                                <i class="fa-solid fa-scroll text-cyan-600 dark:text-cyan-200"></i>
                                آخر النصائح
                            </h2>
                        </div>

                        <div class="space-y-4 sa-scrollbar max-h-[520px] overflow-y-auto" id="tips-container">
                            @forelse($recent_tips as $tip)
                                <div class="relative p-4 bg-gradient-to-r from-slate-50/90 to-white/80 dark:from-slate-900/30 dark:to-slate-950/30 border-r-4
                                    @if ($tip->type === 'mandatory') border-red-500
                                    @elseif($tip->type === 'general') border-blue-500
                                    @else border-purple-500 @endif
                                    rounded-3xl hover:shadow-lg transition-shadow border border-slate-200/60 dark:border-slate-800/60">

                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 ml-3">
                                            <div class="w-10 h-10 rounded-2xl flex items-center justify-center border
                                                @if ($tip->type === 'mandatory') bg-red-500/10 text-red-600 border-red-500/15
                                                @elseif($tip->type === 'general') bg-blue-500/10 text-blue-600 border-blue-500/15
                                                @else bg-purple-500/10 text-purple-600 border-purple-500/15 @endif">
                                                @if ($tip->type === 'mandatory')
                                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                                @elseif($tip->type === 'general')
                                                    <i class="fa-solid fa-bell"></i>
                                                @else
                                                    <i class="fa-solid fa-bullseye"></i>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center justify-between mb-1 gap-2 flex-wrap">
                                                <h3 class="text-md font-extrabold text-slate-900 dark:text-white truncate">{{ $tip->title }}</h3>
                                                <div class="flex items-center gap-2 flex-wrap">
                                                    <span class="px-2 py-1 text-xs rounded-full border
                                                        @if ($tip->type === 'mandatory') bg-red-500/10 text-red-800 dark:text-red-200 border-red-500/15
                                                        @elseif($tip->type === 'general') bg-blue-500/10 text-blue-800 dark:text-blue-200 border-blue-500/15
                                                        @else bg-purple-500/10 text-purple-800 dark:text-purple-200 border-purple-500/15 @endif">
                                                        {{ $tip->type === 'mandatory' ? 'إجباري' : ($tip->type === 'general' ? 'عام' : 'مستهدف') }}
                                                    </span>

                                                    @if ($tip->is_read)
                                                        <span class="px-2 py-1 text-xs bg-emerald-500/10 text-emerald-800 dark:text-emerald-200 border border-emerald-500/15 rounded-full flex items-center gap-1">
                                                            <i class="fa-solid fa-check text-[11px]"></i> مقروء
                                                        </span>
                                                    @else
                                                        <span class="px-2 py-1 text-xs bg-amber-500/10 text-amber-800 dark:text-amber-200 border border-amber-500/15 rounded-full flex items-center gap-1">
                                                            <span class="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></span> غير مقروء
                                                        </span>
                                                    @endif

                                                    @if ($tip->is_active)
                                                        <span class="px-2 py-1 text-xs bg-cyan-500/10 text-cyan-800 dark:text-cyan-200 border border-cyan-500/15 rounded-full flex items-center gap-1">
                                                            <span class="w-2 h-2 bg-cyan-500 rounded-full animate-pulse"></span> نشط
                                                        </span>
                                                    @else
                                                        <span class="px-2 py-1 text-xs bg-slate-500/10 text-slate-800 dark:text-slate-200 border border-slate-500/15 rounded-full flex items-center gap-1">
                                                            <i class="fa-solid fa-pause text-[11px]"></i> غير نشط
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="flex items-start mt-2">
                                                <p class="text-sm text-slate-600 dark:text-slate-200 line-clamp-2">
                                                    {{ Str::limit(strip_tags($tip->content), 150) }}
                                                </p>
                                            </div>

                                            <div class="flex items-center justify-between mt-3 text-xs text-slate-500 dark:text-slate-300 gap-2 flex-wrap">
                                                <div class="flex items-center">
                                                    <img src="{{ $tip->advisor->avatar_url ?? asset('images/default-avatar.png') }}"
                                                        class="w-5 h-5 rounded-full ml-1 border border-slate-200/60 dark:border-slate-800/60" alt="">
                                                    <span>{{ $tip->advisor->name ?? 'مستشار' }}</span>
                                                </div>

                                                <div class="flex items-center">
                                                    <i class="fa-regular fa-clock ml-1"></i>
                                                    <span>{{ $tip->created_at->diffForHumans() }}</span>
                                                </div>

                                                @if ($tip->recipient)
                                                    <div class="flex items-center">
                                                        <i class="fa-regular fa-user ml-1"></i>
                                                        <span>{{ $tip->recipient->name }}</span>
                                                    </div>
                                                @else
                                                    <div class="flex items-center">
                                                        <i class="fa-solid fa-users ml-1"></i>
                                                        <span>جميع الأعضاء</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-10">
                                    <div class="w-16 h-16 bg-slate-100 dark:bg-slate-900/40 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-200/60 dark:border-slate-800/60">
                                        <i class="fa-regular fa-lightbulb text-2xl text-slate-400"></i>
                                    </div>
                                    <h3 class="text-slate-700 dark:text-slate-200 font-extrabold mb-1">لا توجد نصائح</h3>
                                    <p class="text-slate-500 dark:text-slate-300 text-sm">لم يقم المستشارون بإضافة أي نصائح بعد.</p>
                                </div>
                            @endforelse
                        </div>

                        <div id="extra-tips-container" class="space-y-4 mt-4" style="display: none;"></div>
                    </div>
                </div>
            </section>

        </div>

        {{-- 🌟 Dock نقاطك - ثابت أسفل الشاشة --}}
        <div class="fixed inset-x-0 bottom-3 z-40 pointer-events-none">
            <div class="flex justify-center">
                <div class="pointer-events-auto">
                    <div
                        class="flex items-center gap-2 rounded-full
                               bg-white/85 dark:bg-slate-950/55 backdrop-blur-xl
                               border border-indigo-200/60 dark:border-indigo-500/15
                               px-4 py-2 shadow-lg shadow-slate-900/15">
                        <span class="text-xs sm:text-sm font-extrabold text-indigo-700 dark:text-indigo-200">
                            نقاطك: {{ number_format(auth()->user()->total_points) }}
                        </span>
                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-500/10 text-indigo-700 dark:text-indigo-200 border border-indigo-500/15">
                            <i class="fa-solid fa-star text-[12px]"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Helpers --}}
        <style>
            @keyframes saFadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .sa-animate-in { animation: saFadeIn .25s ease-out both; }
            .line-clamp-2 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .line-clamp-3 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            .sa-scrollbar::-webkit-scrollbar { height: 10px; width: 10px; }
            .sa-scrollbar::-webkit-scrollbar-thumb { background: rgba(148,163,184,.45); border-radius: 999px; }
            .dark .sa-scrollbar::-webkit-scrollbar-thumb { background: rgba(71,85,105,.6); }
            /* Tabs active state */
            .sa-tab-btn.is-active {
                background: linear-gradient(90deg, rgba(79,70,229,.95), rgba(124,58,237,.9), rgba(14,165,233,.85));
                color: #fff !important;
                border-color: rgba(255,255,255,.15) !important;
                box-shadow: 0 18px 50px -35px rgba(79,70,229,.9);
            }
        </style>
    </div>
@endsection

@push('scripts')
    {{-- ApexCharts --}}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.46.0/dist/apexcharts.min.js"></script>

    {{-- Encrypted Access Token --}}
    <script>
        fetch('/auth/encrypted-token').then(r => r.json()).then(data => {
            if (data.atencrypted) localStorage.setItem('atencrypted', data.atencrypted);
        });
    </script>

    {{-- Enterprise Tabs + Toasts + Global Refresh --}}
    <script>
        (function() {
            const root = document.getElementById('sa-dashboard');
            if (!root) return;

            const btns = Array.from(root.querySelectorAll('[data-sa-tab]'));
            const panels = Array.from(root.querySelectorAll('[data-sa-panel]'));
            const storeKey = 'sa.dashboard.activeTab';

            function toast(msg, type = 'info') {
                const host = document.getElementById('sa-toasts');
                if (!host) return;

                const el = document.createElement('div');
                const cls = type === 'success' ? 'bg-emerald-600' : (type === 'error' ? 'bg-rose-600' : 'bg-slate-900');
                el.className =
                    `sa-animate-in ${cls} text-white rounded-2xl px-4 py-3 shadow-lg border border-white/10 text-xs sm:text-sm font-bold`;
                el.textContent = msg;

                host.appendChild(el);
                setTimeout(() => {
                    el.style.opacity = '0';
                    el.style.transform = 'translateY(-6px)';
                    el.style.transition = 'all .25s ease';
                }, 2200);
                setTimeout(() => el.remove(), 2600);
            }
            window.saToast = toast;

            function getInitialTab() {
                const u = new URL(location.href);
                return u.searchParams.get('tab') || localStorage.getItem(storeKey) || 'overview';
            }

            function setTab(tabKey) {
                // buttons
                btns.forEach(b => {
                    const active = b.dataset.saTab === tabKey;
                    b.setAttribute('aria-selected', active ? 'true' : 'false');
                    b.classList.toggle('is-active', active);
                });

                // panels
                panels.forEach(p => {
                    const active = p.dataset.saPanel === tabKey;
                    p.hidden = !active;
                    if (active) {
                        p.classList.add('sa-animate-in');
                        setTimeout(() => p.classList.remove('sa-animate-in'), 400);
                    }
                });

                localStorage.setItem(storeKey, tabKey);

                // update url
                const u = new URL(location.href);
                u.searchParams.set('tab', tabKey);
                history.replaceState(null, '', u.toString());

                // broadcast
                requestAnimationFrame(() => {
                    document.dispatchEvent(new CustomEvent('sa:tab-change', {
                        detail: { tab: tabKey }
                    }));
                });
            }

            btns.forEach(b => b.addEventListener('click', () => setTab(b.dataset.saTab)));
            setTab(getInitialTab());

            // global refresh
            const refreshBtn = document.getElementById('sa-refresh-all');
            if (refreshBtn) {
                refreshBtn.addEventListener('click', () => {
                    document.dispatchEvent(new Event('sa:refresh'));
                    toast('تم تحديث البيانات الحيّة ✅', 'success');
                });
            }
        })();
    </script>

    {{-- رسائل الإدارة (AJAX) --}}
    <script>
        (function() {
            const url = '{{ route('dashboard.admin-messages.feed') }}';
            const listEl = document.getElementById('am-list');
            const updEl = document.getElementById('am-updated');
            const btn = document.getElementById('am-refresh');

            const chip = (p) => p === 'urgent' ? 'bg-rose-50 text-rose-700 border-rose-200' :
                p === 'high' ? 'bg-amber-50 text-amber-700 border-amber-200' :
                'bg-slate-50 text-slate-700 border-slate-200';

            const skeleton = () => `
                <div class="p-3 rounded-2xl border border-slate-200/60 dark:border-slate-800/60 bg-white/60 dark:bg-slate-950/30 animate-pulse">
                    <div class="h-3 w-1/3 bg-slate-200 dark:bg-slate-800 rounded"></div>
                    <div class="mt-2 h-3 w-4/5 bg-slate-200 dark:bg-slate-800 rounded"></div>
                    <div class="mt-2 h-3 w-2/5 bg-slate-200 dark:bg-slate-800 rounded"></div>
                </div>`;

            async function load() {
                if (!listEl) return;
                try {
                    listEl.innerHTML = skeleton() + skeleton();
                    const r = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    const d = await r.json();
                    const items = d.items || [];

                    updEl && (updEl.textContent = 'آخر تحديث: ' + (d.updated_at || new Date().toLocaleTimeString()));

                    if (!items.length) {
                        listEl.innerHTML = '<div class="text-slate-500 dark:text-slate-300 text-xs">لا توجد رسائل.</div>';
                        return;
                    }

                    listEl.innerHTML = items.map(x => `
                        <div class="p-3 rounded-3xl border border-slate-200/60 dark:border-slate-800/60 bg-white/70 dark:bg-slate-950/30 ${x.is_pinned ? 'ring-1 ring-amber-400/40' : ''}">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <div class="font-extrabold truncate text-slate-900 dark:text-white">${x.title}</div>
                                    <div class="text-slate-600 dark:text-slate-200">${x.body}</div>
                                    ${x.expires_at ? `<div class="text-[11px] text-slate-400 mt-1">ينتهي: ${x.expires_at}</div>` : ``}
                                </div>
                                <span class="px-2 py-0.5 rounded-full text-[11px] font-bold border ${chip(x.priority)}">${x.priority}</span>
                            </div>
                        </div>
                    `).join('');
                } catch (e) {
                    listEl.innerHTML = '<div class="text-slate-500 dark:text-slate-300 text-xs">تعذّر التحميل.</div>';
                }
            }

            btn && btn.addEventListener('click', load);

            // Run only when overview tab active
            let timer = null;
            function start() {
                load();
                timer && clearInterval(timer);
                timer = setInterval(load, 60000);
            }
            function stop() {
                timer && clearInterval(timer);
                timer = null;
            }

            document.addEventListener('sa:tab-change', (e) => {
                if (e.detail?.tab === 'overview') start();
                else stop();
            });

            document.addEventListener('sa:refresh', load);

            // in case overview is default
            start();
        })();
    </script>

    {{-- المتواجدون الآن + من تواجدوا اليوم (AJAX) --}}
    @if (auth()->check())
        <script>
            (function() {
                const url = "{{ route('superadmin.online.json') }}";
                const listEl = document.getElementById('online-list');
                const countEl = document.getElementById('online-count');
                const updEl = document.getElementById('online-updated');
                let ctrl = null;
                let timer = null;

                function rowTpl(u) {
                    return `
                        <div class="flex items-center justify-between py-2">
                            <div class="flex items-center gap-3 min-w-0">
                                ${u.avatar ? `<img src="${u.avatar}" class="w-8 h-8 rounded-2xl object-cover border border-slate-200/60 dark:border-slate-800/60">` : ``}
                                <div class="min-w-0">
                                    <div class="text-sm font-extrabold text-slate-900 dark:text-white truncate">${u.name}</div>
                                    <div class="text-xs text-slate-500 dark:text-slate-300 truncate">${u.page}</div>
                                </div>
                            </div>
                            <div class="text-xs text-slate-600 dark:text-slate-200">${u.minutes} د</div>
                        </div>`;
                }

                async function load() {
                    try {
                        ctrl && ctrl.abort();
                        ctrl = new AbortController();
                        const res = await fetch(url, {
                            signal: ctrl.signal,
                            headers: { 'Accept': 'application/json' }
                        });
                        if (!res.ok) throw new Error('net');
                        const data = await res.json();
                        const items = data.items || data.users || [];

                        countEl && (countEl.textContent = items.length);
                        updEl && (updEl.textContent = 'آخر تحديث: ' + (data.updated_at || data.updated || new Date().toLocaleTimeString()));

                        if (!listEl) return;

                        if (!items.length) {
                            listEl.innerHTML = '<div class="py-6 text-center text-xs text-slate-500 dark:text-slate-300">لا أحد متواجد الآن.</div>';
                            return;
                        }

                        listEl.innerHTML = items.map(rowTpl).join('');
                    } catch (e) {
                        // تجاهل مؤقت
                    }
                }

                function start() {
                    load();
                    timer && clearInterval(timer);
                    timer = setInterval(load, 15000);
                }
                function stop() {
                    timer && clearInterval(timer);
                    timer = null;
                }

                document.addEventListener('sa:tab-change', (e) => {
                    if (e.detail?.tab === 'presence') start();
                    else stop();
                });

                document.addEventListener('sa:refresh', load);
            })();
        </script>

        <script>
            (function() {
                const urlToday = "{{ route('superadmin.online.today.json') }}";
                const listEl = document.getElementById('today-list');
                const countEl = document.getElementById('today-count');
                const totalEl = document.getElementById('today-total');
                const updEl = document.getElementById('today-updated');
                let ctrlToday = null;
                let timer = null;

                function rowTpl(u) {
                    return `
                        <div class="flex items-center justify-between py-2">
                            <div class="flex items-center gap-3 min-w-0">
                                ${u.avatar ? `<img src="${u.avatar}" class="w-8 h-8 rounded-2xl object-cover border border-slate-200/60 dark:border-slate-800/60">` : ``}
                                <div class="min-w-0">
                                    <div class="text-sm font-extrabold text-slate-900 dark:text-white truncate">${u.name}</div>
                                    <div class="text-xs text-slate-500 dark:text-slate-300 truncate">آخر تواجد: ${u.last}</div>
                                </div>
                            </div>
                            <div class="text-xs text-slate-600 dark:text-slate-200">${u.minutes} د</div>
                        </div>`;
                }

                async function loadToday() {
                    try {
                        ctrlToday && ctrlToday.abort();
                        ctrlToday = new AbortController();
                        const res = await fetch(urlToday, {
                            signal: ctrlToday.signal,
                            headers: { 'Accept': 'application/json' }
                        });
                        if (!res.ok) throw new Error('net');
                        const data = await res.json();
                        const items = data.items || [];

                        countEl && (countEl.textContent = (data.count ?? items.length));
                        totalEl && (totalEl.textContent = (data.total_minutes ?? 0));
                        updEl && (updEl.textContent = 'آخر تحديث: ' + (data.updated_at || new Date().toLocaleTimeString()));

                        if (!listEl) return;

                        if (!items.length) {
                            listEl.innerHTML = '<div class="py-6 text-center text-xs text-slate-500 dark:text-slate-300">لا يوجد بيانات بعد.</div>';
                            return;
                        }
                        listEl.innerHTML = items.map(rowTpl).join('');
                    } catch (e) {
                        /* تجاهل مؤقت */
                    }
                }

                function start() {
                    loadToday();
                    timer && clearInterval(timer);
                    timer = setInterval(loadToday, 30000);
                }
                function stop() {
                    timer && clearInterval(timer);
                    timer = null;
                }

                document.addEventListener('sa:tab-change', (e) => {
                    if (e.detail?.tab === 'presence') start();
                    else stop();
                });

                document.addEventListener('sa:refresh', loadToday);
            })();
        </script>
    @endif

    {{-- ApexCharts Lazy Render (Analytics + Tips) --}}
    <script>
        (function() {
            let renderedAnalytics = false;
            let renderedTips = false;

            function renderAnalyticsCharts() {
                if (renderedAnalytics) return;
                if (typeof ApexCharts === 'undefined') return;

                // Gender
                const genderEl = document.querySelector("#genderChart");
                if (genderEl) {
                    var genderOptions = {
                        series: [{{ $genderStats['male_count'] }}, {{ $genderStats['female_count'] }}],
                        chart: { type: 'donut', height: 280, fontFamily: 'Cairo, sans-serif' },
                        labels: ['الذكور', 'الإناث'],
                        colors: ['#3B82F6', '#EC4899'],
                        legend: { position: 'bottom', fontFamily: 'Cairo, sans-serif' },
                        dataLabels: {
                            enabled: true,
                            formatter: function(val) { return val.toFixed(1) + "%"; }
                        },
                        plotOptions: {
                            pie: {
                                donut: {
                                    size: '70%',
                                    labels: {
                                        show: true,
                                        total: {
                                            show: true,
                                            label: 'المجموع',
                                            formatter: function(w) {
                                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    };
                    new ApexCharts(genderEl, genderOptions).render();
                }

                // Membership
                const membershipEl = document.querySelector("#membershipChart");
                if (membershipEl) {
                    var membershipOptions = {
                        series: [{{ $membershipStats['official'] }}, {{ $membershipStats['beta'] }}],
                        chart: { type: 'donut', height: 280, fontFamily: 'Cairo, sans-serif' },
                        labels: ['رسمي', 'بيتا'],
                        colors: ['#10B981', '#F59E0B'],
                        legend: { position: 'bottom', fontFamily: 'Cairo, sans-serif' },
                        plotOptions: {
                            pie: {
                                donut: {
                                    size: '70%',
                                    labels: {
                                        show: true,
                                        total: {
                                            show: true,
                                            label: 'المجموع',
                                            formatter: function(w) {
                                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    };
                    new ApexCharts(membershipEl, membershipOptions).render();
                }

                // Evaluation
                const evalEl = document.querySelector("#evaluationChart");
                if (evalEl) {
                    var evaluationOptions = {
                        series: [{{ $evaluationStats['approved'] }}, {{ $evaluationStats['pending'] }}, {{ $evaluationStats['rejected'] }}],
                        chart: { type: 'pie', height: 200, fontFamily: 'Cairo, sans-serif' },
                        labels: ['موافق', 'معلق', 'مرفوض'],
                        colors: ['#10B981', '#F59E0B', '#EF4444'],
                        legend: { show: false },
                        dataLabels: { enabled: false }
                    };
                    new ApexCharts(evalEl, evaluationOptions).render();
                }

                // Attendance
                const attEl = document.querySelector("#attendanceChart");
                if (attEl) {
                    var attendanceOptions = {
                        series: [{{ $attendanceStats['present'] }}, {{ $attendanceStats['absent_with_excuse'] }}, {{ $attendanceStats['absent_without_excuse'] }}],
                        chart: { type: 'pie', height: 200, fontFamily: 'Cairo, sans-serif' },
                        labels: ['حاضر', 'عذر', 'غائب'],
                        colors: ['#10B981', '#F59E0B', '#EF4444'],
                        legend: { show: false },
                        dataLabels: { enabled: false }
                    };
                    new ApexCharts(attEl, attendanceOptions).render();
                }

                // Violations
                const vioEl = document.querySelector("#violationChart");
                if (vioEl) {
                    var violationOptions = {
                        series: [{{ $violationStats['pending'] }}, {{ $violationStats['resolved'] }}, {{ $violationStats['active'] }}],
                        chart: { type: 'pie', height: 200, fontFamily: 'Cairo, sans-serif' },
                        labels: ['معلق', 'محلول', 'نشط'],
                        colors: ['#F59E0B', '#10B981', '#EF4444'],
                        legend: { show: false },
                        dataLabels: { enabled: false }
                    };
                    new ApexCharts(vioEl, violationOptions).render();
                }

                // Points
                const pointsEl = document.querySelector("#pointsChart");
                if (pointsEl) {
                    var pointsOptions = {
                        series: [{{ $pointsStats['earned'] }}, {{ $pointsStats['deducted'] }}],
                        chart: { type: 'donut', height: 280, fontFamily: 'Cairo, sans-serif' },
                        labels: ['نقاط مكتسبة', 'نقاط مخصومة'],
                        colors: ['#10B981', '#EF4444'],
                        legend: { position: 'bottom', fontFamily: 'Cairo, sans-serif' },
                        plotOptions: {
                            pie: {
                                donut: {
                                    size: '70%',
                                    labels: {
                                        show: true,
                                        total: {
                                            show: true,
                                            label: 'صافي النقاط',
                                            formatter: function() {
                                                return {{ $pointsStats['earned'] }} - {{ $pointsStats['deducted'] }};
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    };
                    new ApexCharts(pointsEl, pointsOptions).render();
                }

                renderedAnalytics = true;
            }

            function renderTipsChart() {
                if (renderedTips) return;
                if (typeof ApexCharts === 'undefined') return;
                const el = document.getElementById('tipsTypeChart');
                if (!el) return;

                const tipsTypeOptions = {
                    series: [{{ $tipsStats['mandatory'] }}, {{ $tipsStats['general'] }}, {{ $tipsStats['targeted'] }}],
                    chart: { type: 'pie', height: 240, fontFamily: 'Cairo, sans-serif' },
                    labels: ['إجبارية', 'عامة', 'مستهدفة'],
                    colors: ['#EF4444', '#3B82F6', '#8B5CF6'],
                    legend: { show: false },
                    dataLabels: { enabled: false }
                };
                new ApexCharts(el, tipsTypeOptions).render();
                renderedTips = true;
            }

            document.addEventListener('sa:tab-change', (e) => {
                const tab = e.detail?.tab;
                // تأخير بسيط عشان الـ panel يصير ظاهر فعلاً قبل الرسم
                setTimeout(() => {
                    if (tab === 'analytics') renderAnalyticsCharts();
                    if (tab === 'tips') renderTipsChart();
                }, 60);
            });
        })();
    </script>
@endpush