@extends('layouts.superadmin')

@section('title','نظام أثينا — غرفة القيادة الموحدة')

@section('content')
@php
  $girls = $girlsMode ?? false;

  $accentBorder = $girls ? 'border-fuchsia-400/30' : 'border-cyan-400/25';
  $accentGlowA  = $girls ? 'bg-fuchsia-400/20' : 'bg-cyan-400/20';
  $accentGlowB  = $girls ? 'bg-rose-500/20' : 'bg-emerald-500/20';

  $chipGrad = $girls
    ? 'bg-gradient-to-r from-rose-200 via-fuchsia-200 to-violet-200'
    : 'bg-gradient-to-r from-cyan-200 via-emerald-200 to-fuchsia-200';

  $modeLabel = $girls ? 'Girls Mode' : 'All Mode';
@endphp

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

    {{-- FLASH --}}
    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border {{ $accentBorder }} shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full {{ $accentGlowA }} blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full {{ $accentGlowB }} blur-3xl"></div>
      <div class="pointer-events-none absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,_#a5f3fc_0,_transparent_55%)]"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border {{ $accentBorder }} text-[11px] text-white/90">
            <i class="fa-solid fa-chess-queen text-xs"></i>
            <span>نظام أثينا — غرفة القيادة الموحدة • SuperAdmin</span>
            <span class="ms-2 px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-[10px]">{{ $modeLabel }}</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            غرفة أثينا <span class="opacity-90">للإدارة العليا</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            لوحة قيادة موحدة: مراقبة + إحصائيات (עוגות ותרשמים) + تحليلات AI + إشعارات للجميع — بدون تشتّت بين الأنظمة.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              زيارات: {{ number_format($kpis['visits'] ?? 0) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              Online: {{ number_format($kpis['online_now'] ?? 0) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-amber-300"></span>
              Audit اليوم: {{ number_format($kpis['audit_today'] ?? 0) }}
            </span>
          </div>
        </div>

        {{-- FILTER + MODE --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-3 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-white/10 border border-white/10 grid place-items-center text-white">
                <i class="fa-solid fa-filter"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">فلترة الفترة + الوضع</div>
                <div class="font-bold text-sm truncate">تحليل سريع</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-1">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
              </div>

              <input type="hidden" name="slide" value="{{ $slide }}">
              <input type="hidden" name="mode" value="{{ $girls ? 'girls' : 'all' }}">

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900 {{ $chipGrad }} shadow-lg hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                تحديث المؤشرات
              </button>

              <div class="col-span-2 flex items-center gap-2 pt-1">
                <a href="{{ route('superadmin.control-room.index', ['from'=>$from,'to'=>$to,'slide'=>$slide,'mode'=>'all']) }}"
                   class="flex-1 inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                  <i class="fa-solid fa-globe ms-2 text-[11px]"></i> All
                </a>
                <a href="{{ route('superadmin.control-room.index', ['from'=>$from,'to'=>$to,'slide'=>$slide,'mode'=>'girls']) }}"
                   class="flex-1 inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                  <i class="fa-solid fa-heart ms-2 text-[11px]"></i> Girls
                </a>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>

    {{-- STEPPER --}}
    <div id="athenaTop" class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
      <div class="flex items-center justify-between gap-3 mb-4">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
            <i class="fa-solid fa-bolt"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Slides</div>
            <div class="font-extrabold text-white text-sm">تنقل بين سلايدات أثينا</div>
          </div>
        </div>

        <div id="slideLabel" class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          {{ $slide }}/5
        </div>
      </div>

      <div class="h-2 rounded-full bg-white/10 overflow-hidden">
        <div id="slideBar" class="h-full rounded-full {{ $chipGrad }}" style="width: {{ ($slide/5)*100 }}%"></div>
      </div>

      <div class="mt-4 grid grid-cols-1 sm:grid-cols-5 gap-3" id="slideSteps">
        @php
          $steps = [
            1 => ['لوحة القيادة','fa-gauge-high'],
            2 => ['AI تحليلات','fa-brain'],
            3 => ['إحصائيات/עוגות','fa-chart-pie'],
            4 => ['مراقبة مباشرة','fa-satellite-dish'],
            5 => ['أمان + إشعارات','fa-shield-halved'],
          ];
        @endphp

        @foreach($steps as $i => $meta)
          <button type="button" onclick="setAthenaSlide({{ $i }})"
            class="ath-step flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition {{ $slide === $i ? 'bg-white/10 text-white border-white/15' : '' }}">
            <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/80 font-extrabold">
              <i class="fa-solid {{ $meta[1] }} text-[12px]"></i>
            </span>
            <div class="text-right min-w-0">
              <div class="font-extrabold truncate">{{ $meta[0] }}</div>
              <div class="text-[11px] text-white/50">{{ $i === $slide ? 'نشط' : 'قادم' }}</div>
            </div>
          </button>
        @endforeach
      </div>
    </div>

    {{-- SLIDES TRACK --}}
    <div class="rounded-3xl border border-white/10 bg-black/20 overflow-hidden">
      <div dir="ltr" class="overflow-hidden">
        <div id="athenaTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(-{{ ($slide-1)*100 }}%);">

          {{-- SLIDE 1: DASHBOARD --}}
          <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
            <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-5 space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <div class="text-[11px] text-white/60">Slide 1</div>
                  <h2 class="text-base font-extrabold text-white">لوحة القيادة</h2>
                  <p class="text-[12px] text-white/60">ملخص سريع للفترة المحددة.</p>
                </div>
                <a class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                   href="{{ route('superadmin.control-room.dashboard', ['from'=>$from,'to'=>$to,'mode'=>$girls?'girls':'all']) }}">
                  رابط مباشر
                  <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
                </a>
              </div>

              <div class="grid gap-3 lg:grid-cols-5">
                <div class="rounded-3xl p-4 border border-white/10 bg-gradient-to-br from-slate-900 to-slate-950">
                  <div class="text-[11px] text-white/60">المستخدمين</div>
                  <div class="text-2xl font-extrabold text-white">{{ number_format($kpis['users_total'] ?? 0) }}</div>
                  <div class="text-[11px] text-white/50">نشط: {{ number_format($kpis['users_active'] ?? 0) }}</div>
                </div>
                <div class="rounded-3xl p-4 border border-white/10 bg-gradient-to-br from-cyan-600/10 via-slate-950 to-slate-950">
                  <div class="text-[11px] text-white/60">Online الآن</div>
                  <div class="text-2xl font-extrabold text-cyan-200">{{ number_format($kpis['online_now'] ?? 0) }}</div>
                  <div class="text-[11px] text-white/50">آخر 8 دقائق</div>
                </div>
                <div class="rounded-3xl p-4 border border-white/10 bg-gradient-to-br from-emerald-600/10 via-slate-950 to-slate-950">
                  <div class="text-[11px] text-white/60">التقييمات</div>
                  <div class="text-2xl font-extrabold text-emerald-200">{{ number_format($kpis['evaluations_total'] ?? 0) }}</div>
                  <div class="text-[11px] text-white/50">حضور: {{ number_format($kpis['present'] ?? 0) }}</div>
                </div>
                <div class="rounded-3xl p-4 border border-white/10 bg-gradient-to-br from-amber-600/10 via-slate-950 to-slate-950">
                  <div class="text-[11px] text-white/60">غياب بدون عذر</div>
                  <div class="text-2xl font-extrabold text-amber-200">{{ number_format($kpis['absent_without_excuse'] ?? 0) }}</div>
                  <div class="text-[11px] text-white/50">غياب بعذر: {{ number_format($kpis['absent_with_excuse'] ?? 0) }}</div>
                </div>
                <div class="rounded-3xl p-4 border border-white/10 bg-gradient-to-br from-rose-600/10 via-slate-950 to-slate-950">
                  <div class="text-[11px] text-white/60">Failed Login (Open)</div>
                  <div class="text-2xl font-extrabold text-rose-200">{{ number_format($kpis['failed_logins_open_7d'] ?? 0) }}</div>
                  <div class="text-[11px] text-white/50">آخر 7 أيام</div>
                </div>
              </div>

              <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                <div class="text-[12px] text-white/70">
                  متوسط Load Time:
                  <span class="font-extrabold text-white">
                    {{ $kpis['avg_load_time'] !== null ? number_format((float)$kpis['avg_load_time'],2).'ms' : '—' }}
                  </span>
                  <span class="text-white/40 ms-2">•</span>
                  إشعارات آخر 7 أيام:
                  <span class="font-extrabold text-white">{{ number_format($kpis['notifications_7d'] ?? 0) }}</span>
                </div>
              </div>
            </div>
          </section>

          {{-- SLIDE 2: AI INSIGHTS --}}
          <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
            <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-5 space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <div class="text-[11px] text-white/60">Slide 2</div>
                  <h2 class="text-base font-extrabold text-white">تحليلات AI + نصايح</h2>
                  <p class="text-[12px] text-white/60">اقتراحات عملية مبنية على مؤشرات الفترة.</p>
                </div>
                <a class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                   href="{{ route('superadmin.control-room.ai', ['from'=>$from,'to'=>$to,'mode'=>$girls?'girls':'all']) }}">
                  رابط مباشر <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
                </a>
              </div>

              <div class="grid gap-3 lg:grid-cols-2">
                @foreach(($aiInsights ?? []) as $ins)
                  @php
                    $lvl = $ins['level'] ?? 'info';
                    $lvlStyles = [
                      'ok' => 'border-emerald-400/20 bg-emerald-500/10 text-emerald-100',
                      'warn' => 'border-amber-300/20 bg-amber-500/10 text-amber-100',
                      'danger' => 'border-rose-400/20 bg-rose-500/10 text-rose-100',
                      'info' => 'border-cyan-300/20 bg-cyan-500/10 text-cyan-100',
                    ];
                  @endphp

                  <div class="rounded-3xl border {{ $lvlStyles[$lvl] ?? $lvlStyles['info'] }} p-4">
                    <div class="flex items-start justify-between gap-3">
                      <div>
                        <div class="font-extrabold text-sm">{{ $ins['title'] ?? 'Insight' }}</div>
                        <div class="text-[12px] opacity-90 leading-relaxed mt-1">
                          {{ $ins['text'] ?? '' }}
                        </div>
                      </div>
                      <span class="text-[10px] px-2 py-1 rounded-full bg-white/10 border border-white/10 font-bold">
                        {{ strtoupper($lvl) }}
                      </span>
                    </div>

                    @if(!empty($ins['action_slide']))
                      <div class="mt-3">
                        <button type="button"
                                onclick="setAthenaSlide({{ (int)$ins['action_slide'] }})"
                                class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[12px] hover:bg-white/15 transition">
                          <i class="fa-solid fa-wand-magic-sparkles text-[11px]"></i>
                          {{ $ins['action_label'] ?? 'افتح' }}
                        </button>
                      </div>
                    @endif
                  </div>
                @endforeach
              </div>
            </div>
          </section>

          {{-- SLIDE 3: ANALYTICS / CHARTS --}}
          <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
            <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-5 space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <div class="text-[11px] text-white/60">Slide 3</div>
                  <h2 class="text-base font-extrabold text-white">الإحصائيات • עוגות ותרשמים</h2>
                  <p class="text-[12px] text-white/60">Pie/Line/Bar + أفضل صفحات.</p>
                </div>
                <a class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                   href="{{ route('superadmin.control-room.analytics', ['from'=>$from,'to'=>$to,'mode'=>$girls?'girls':'all']) }}">
                  رابط مباشر <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
                </a>
              </div>

              <div class="grid gap-4 lg:grid-cols-2">
                <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                  <div class="text-[12px] text-white/70 font-bold mb-2">Attendance Pie</div>
                  <canvas id="chartAttendance" height="140"></canvas>
                </div>

                <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                  <div class="text-[12px] text-white/70 font-bold mb-2">Membership Pie</div>
                  <canvas id="chartMembership" height="140"></canvas>
                </div>

                <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                  <div class="text-[12px] text-white/70 font-bold mb-2">Visits / Day</div>
                  <canvas id="chartVisits" height="140"></canvas>
                </div>

                <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                  <div class="text-[12px] text-white/70 font-bold mb-2">Points + Hours / Day</div>
                  <canvas id="chartPoints" height="140"></canvas>
                </div>
              </div>

              <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                <div class="flex items-center justify-between mb-2">
                  <div class="text-[12px] text-white/70 font-bold">Top Pages</div>
                  <button class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                          onclick="loadCharts()">
                    تحديث الرسوم <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                  </button>
                </div>

                <div class="grid gap-3 lg:grid-cols-2">
                  <div>
                    <canvas id="chartTopPages" height="120"></canvas>
                  </div>
                  <div class="text-[12px] text-white/70 leading-relaxed">
                    نصيحة: إذا لاحظت صفحة معيّنة تتكرر بقوة مع Load Time مرتفع — اعتبرها “نقطة اختناق” وابدأ فيها.
                    <div class="mt-2 text-[11px] text-white/50">
                      * البيانات تُسحب من تتبع الزيارات + النقاط + التقييمات حسب الفترة.
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </section>

          {{-- SLIDE 4: LIVE MONITOR --}}
          <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
            <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-5 space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <div class="text-[11px] text-white/60">Slide 4</div>
                  <h2 class="text-base font-extrabold text-white">مراقبة مباشرة (Live Monitor)</h2>
                  <p class="text-[12px] text-white/60">جلسات فعالة + آخر صفحة + آخر ظهور.</p>
                </div>

                <div class="flex items-center gap-2">
                  <button class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                          onclick="refreshLive()">
                    تحديث الآن <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                  </button>
                  <a class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                     href="{{ route('superadmin.control-room.live', ['from'=>$from,'to'=>$to,'mode'=>$girls?'girls':'all']) }}">
                    رابط مباشر <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
                  </a>
                </div>
              </div>

              <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
                <div class="px-4 py-3 border-b border-white/10 text-[12px] text-white/70 flex items-center justify-between">
                  <div class="font-bold">Live Sessions</div>
                  <div class="text-[11px] text-white/50" id="liveTs">—</div>
                </div>

                <div class="overflow-x-auto">
                  <table class="w-full text-[12px] text-white/80">
                    <thead class="bg-white/5 text-white/60">
                      <tr>
                        <th class="text-right px-4 py-2">المستخدم</th>
                        <th class="text-right px-4 py-2">النوع</th>
                        <th class="text-right px-4 py-2">الرتبة</th>
                        <th class="text-right px-4 py-2">آخر صفحة</th>
                        <th class="text-right px-4 py-2">آخر ظهور</th>
                        <th class="text-right px-4 py-2">مدة</th>
                      </tr>
                    </thead>
                    <tbody id="liveBody">
                      @forelse($liveSessions as $s)
                        <tr class="border-t border-white/5">
                          <td class="px-4 py-2 font-bold">
                            {{ $s->name ?? '—' }}
                            <span class="text-white/40 font-normal">(@{{ $s->username ?? '—' }})</span>
                          </td>
                          <td class="px-4 py-2">{{ $s->gender ?? '—' }}</td>
                          <td class="px-4 py-2">{{ $s->membership_status ?? '—' }}</td>
                          <td class="px-4 py-2 text-white/70 truncate max-w-[360px]">{{ $s->current_page ?? '—' }}</td>
                          <td class="px-4 py-2 text-white/60">{{ $s->last_seen_at }}</td>
                          <td class="px-4 py-2 text-white/60">{{ number_format(($s->accumulated_ms ?? 0)/60000, 1) }}m</td>
                        </tr>
                      @empty
                        <tr><td colspan="6" class="px-4 py-4 text-white/50">لا يوجد جلسات فعالة الآن.</td></tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>
              </div>

              <div class="text-[11px] text-white/50">
                * يتم اعتبار الجلسة فعّالة إذا last_seen خلال آخر 20 دقيقة.
              </div>
            </div>
          </section>

          {{-- SLIDE 5: SECURITY + NOTIFICATIONS --}}
          <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
            <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-5 space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <div class="text-[11px] text-white/60">Slide 5</div>
                  <h2 class="text-base font-extrabold text-white">الأمان + الإشعارات للجميع</h2>
                  <p class="text-[12px] text-white/60">Audit + Broadcast عبر Notification Hub.</p>
                </div>
                <a class="text-[11px] px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                   href="{{ route('superadmin.control-room.security', ['from'=>$from,'to'=>$to,'mode'=>$girls?'girls':'all']) }}">
                  رابط مباشر <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
                </a>
              </div>

              <div class="grid gap-4 lg:grid-cols-2">
                {{-- AUDIT --}}
                <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
                  <div class="px-4 py-3 border-b border-white/10 text-[12px] text-white/70 font-bold">
                    Latest Admin Audit Logs
                  </div>
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px] text-white/80">
                      <thead class="bg-white/5 text-white/60">
                        <tr>
                          <th class="text-right px-4 py-2">Action</th>
                          <th class="text-right px-4 py-2">Module</th>
                          <th class="text-right px-4 py-2">Route</th>
                          <th class="text-right px-4 py-2">IP</th>
                          <th class="text-right px-4 py-2">Time</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach($latestAudit as $a)
                          <tr class="border-t border-white/5">
                            <td class="px-4 py-2 font-bold text-white/90">{{ $a->action }}</td>
                            <td class="px-4 py-2 text-white/70">{{ $a->module ?? '—' }}</td>
                            <td class="px-4 py-2 text-white/60">{{ $a->route_name ?? '—' }}</td>
                            <td class="px-4 py-2 text-white/60">{{ $a->ip_address ?? '—' }}</td>
                            <td class="px-4 py-2 text-white/50">{{ $a->created_at }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>

                {{-- BROADCAST --}}
                <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
                  <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
                      <i class="fa-solid fa-bullhorn"></i>
                    </div>
                    <div>
                      <div class="text-[11px] text-white/60">Broadcast</div>
                      <div class="font-extrabold text-white">إشعار للجميع / شريحة محددة</div>
                    </div>
                  </div>

                  <form method="POST" action="{{ route('superadmin.control-room.notifications.store') }}" class="space-y-3">
                    @csrf
                    <input type="hidden" name="from" value="{{ $from }}">
                    <input type="hidden" name="to" value="{{ $to }}">
                    <input type="hidden" name="mode" value="{{ $girls ? 'girls' : 'all' }}">

                    <div class="grid grid-cols-2 gap-2">
                      <div>
                        <label class="text-[10px] text-white/60">Type</label>
                        <select name="type" class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2">
                          <option value="custom">custom</option>
                          <option value="reminder">reminder</option>
                          <option value="live">live</option>
                          <option value="decision">decision</option>
                          <option value="weekly_test">weekly_test</option>
                          <option value="daily_reading">daily_reading</option>
                        </select>
                      </div>
                      <div>
                        <label class="text-[10px] text-white/60">Audience</label>
                        <select name="audience" class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2">
                          <option value="all">all</option>
                          <option value="female">female</option>
                          <option value="male">male</option>
                          <option value="moderators">moderators</option>
                          <option value="beta">beta</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label class="text-[10px] text-white/60">Title</label>
                      <input name="title" maxlength="200" required
                        class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2"
                        placeholder="عنوان ملحمي…">
                    </div>

                    <div>
                      <label class="text-[10px] text-white/60">Body</label>
                      <textarea name="body" required rows="4"
                        class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2"
                        placeholder="اكتب الرسالة…"></textarea>
                    </div>

                    <div>
                      <label class="text-[10px] text-white/60">URL (اختياري)</label>
                      <input name="url"
                        class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2"
                        placeholder="https://...">
                    </div>

                    <div class="grid grid-cols-2 gap-2">
                      <div>
                        <label class="text-[10px] text-white/60">Send Mode</label>
                        <select name="send_mode" class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2"
                                onchange="toggleSchedule(this.value)">
                          <option value="now">now</option>
                          <option value="schedule">schedule</option>
                        </select>
                      </div>
                      <div id="scheduleBox" class="hidden">
                        <label class="text-[10px] text-white/60">Send At</label>
                        <input type="datetime-local" name="send_at"
                               class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2">
                      </div>
                    </div>

                    <button class="w-full inline-flex items-center justify-center px-4 py-3 rounded-3xl text-xs font-extrabold text-slate-900 {{ $chipGrad }} shadow-lg hover:scale-[1.01] active:scale-100 transition">
                      <i class="fa-solid fa-paper-plane ms-2"></i>
                      إنشاء الإشعار
                    </button>

                    @if($errors->any())
                      <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-100 px-4 py-3 text-[12px]">
                        {{ $errors->first() }}
                      </div>
                    @endif
                  </form>
                </div>
              </div>

              {{-- Recent notifications --}}
              <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
                <div class="px-4 py-3 border-b border-white/10 text-[12px] text-white/70 font-bold">
                  آخر إشعارات (Notification Hub)
                </div>

                <div class="overflow-x-auto">
                  <table class="w-full text-[12px] text-white/80">
                    <thead class="bg-white/5 text-white/60">
                      <tr>
                        <th class="text-right px-4 py-2">Title</th>
                        <th class="text-right px-4 py-2">Audience</th>
                        <th class="text-right px-4 py-2">Status</th>
                        <th class="text-right px-4 py-2">Sent</th>
                        <th class="text-right px-4 py-2">Counts</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($latestNotifications as $n)
                        <tr class="border-t border-white/5">
                          <td class="px-4 py-2 font-bold text-white/90">{{ $n->title }}</td>
                          <td class="px-4 py-2 text-white/70">{{ $n->audience }}</td>
                          <td class="px-4 py-2 text-white/70">{{ $n->status }}</td>
                          <td class="px-4 py-2 text-white/60">{{ $n->sent_at ?? '—' }}</td>
                          <td class="px-4 py-2 text-white/60">
                            sent: {{ (int)$n->sent_count }} • failed: {{ (int)$n->failed_count }}
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
          </section>

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

  </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  let athenaSlide = {{ (int)$slide }};
  const totalSlides = 5;

  function setAthenaSlide(n){
    athenaSlide = Math.max(1, Math.min(totalSlides, n));
    const track = document.getElementById('athenaTrack');
    track.style.transform = `translateX(-${(athenaSlide-1)*100}%)`;

    document.getElementById('slideLabel').textContent = `${athenaSlide}/${totalSlides}`;
    document.getElementById('slideBar').style.width = `${(athenaSlide/totalSlides)*100}%`;

    // حافظ على السلايد بالرابط (بدون ريفرش)
    const url = new URL(window.location.href);
    url.searchParams.set('slide', athenaSlide);
    window.history.replaceState({}, '', url);
  }

  function toggleSchedule(v){
    const box = document.getElementById('scheduleBox');
    if(!box) return;
    box.classList.toggle('hidden', v !== 'schedule');
  }

  // ---- Charts ----
  let cAttendance, cMembership, cVisits, cPoints, cTopPages;

  async function loadCharts(){
    const url = new URL("{{ route('superadmin.control-room.api.charts') }}", window.location.origin);
    url.searchParams.set('from', "{{ $from }}");
    url.searchParams.set('to', "{{ $to }}");
    url.searchParams.set('mode', "{{ $girls ? 'girls' : 'all' }}");

    const res = await fetch(url.toString(), { headers: { 'Accept':'application/json' }});
    const data = await res.json();

    // Attendance Pie
    const ctxA = document.getElementById('chartAttendance');
    if(ctxA){
      cAttendance?.destroy();
      cAttendance = new Chart(ctxA, {
        type: 'pie',
        data: { labels: data.attendance.labels, datasets: [{ data: data.attendance.data }] },
        options: { plugins: { legend: { labels: { color: '#e5e7eb' } } } }
      });
    }

    // Membership Pie
    const ctxM = document.getElementById('chartMembership');
    if(ctxM){
      cMembership?.destroy();
      cMembership = new Chart(ctxM, {
        type: 'pie',
        data: { labels: data.membership.labels, datasets: [{ data: data.membership.data }] },
        options: { plugins: { legend: { labels: { color: '#e5e7eb' } } } }
      });
    }

    // Visits Line
    const ctxV = document.getElementById('chartVisits');
    if(ctxV){
      cVisits?.destroy();
      cVisits = new Chart(ctxV, {
        type: 'line',
        data: {
          labels: data.visits.labels,
          datasets: [{ label: 'Visits', data: data.visits.data, tension: 0.35 }]
        },
        options: {
          scales: {
            x: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
            y: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
          },
          plugins: { legend: { labels: { color:'#e5e7eb' } } }
        }
      });
    }

    // Points + Hours
    const ctxP = document.getElementById('chartPoints');
    if(ctxP){
      cPoints?.destroy();
      cPoints = new Chart(ctxP, {
        type: 'bar',
        data: {
          labels: data.points.labels,
          datasets: [
            { label: 'Points', data: data.points.points },
            { label: 'Hours', data: data.points.hours }
          ]
        },
        options: {
          scales: {
            x: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
            y: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
          },
          plugins: { legend: { labels: { color:'#e5e7eb' } } }
        }
      });
    }

    // Top pages
    const ctxT = document.getElementById('chartTopPages');
    if(ctxT){
      cTopPages?.destroy();
      cTopPages = new Chart(ctxT, {
        type: 'bar',
        data: { labels: data.top_pages.labels, datasets: [{ label: 'Top Pages', data: data.top_pages.data }] },
        options: {
          indexAxis: 'y',
          scales: {
            x: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
            y: { ticks: { color:'#9ca3af' }, grid: { color:'rgba(255,255,255,0.06)' } },
          },
          plugins: { legend: { labels: { color:'#e5e7eb' } } }
        }
      });
    }
  }

  // ---- Live ----
  async function refreshLive(){
    const url = new URL("{{ route('superadmin.control-room.api.live') }}", window.location.origin);
    url.searchParams.set('mode', "{{ $girls ? 'girls' : 'all' }}");

    const res = await fetch(url.toString(), { headers: { 'Accept':'application/json' }});
    const data = await res.json();

    const ts = document.getElementById('liveTs');
    if(ts) ts.textContent = data.ts;

    const body = document.getElementById('liveBody');
    if(!body) return;

    body.innerHTML = '';
    if(!data.items || data.items.length === 0){
      body.innerHTML = `<tr><td colspan="6" class="px-4 py-4 text-white/50">لا يوجد جلسات فعالة الآن.</td></tr>`;
      return;
    }

    for(const s of data.items){
      const mins = (Number(s.accumulated_ms||0) / 60000).toFixed(1);
      body.innerHTML += `
        <tr class="border-t border-white/5">
          <td class="px-4 py-2 font-bold">${s.name ?? '—'} <span class="text-white/40 font-normal">(@${s.username ?? '—'})</span></td>
          <td class="px-4 py-2">${s.gender ?? '—'}</td>
          <td class="px-4 py-2">${s.membership_status ?? '—'}</td>
          <td class="px-4 py-2 text-white/70 truncate max-w-[360px]">${s.current_page ?? '—'}</td>
          <td class="px-4 py-2 text-white/60">${s.last_seen_at ?? '—'}</td>
          <td class="px-4 py-2 text-white/60">${mins}m</td>
        </tr>
      `;
    }
  }

  // start
  document.addEventListener('DOMContentLoaded', () => {
    loadCharts();
    // تحديث لايف تلقائي إذا انت واقف على سلايد 4
    if(athenaSlide === 4) refreshLive();
  });
</script>
@endsection