@extends('layouts.superadmin')
@section('title','نظام سقراط — Socratic Sentinel')

@section('content')
@php
  $view = request('view','cards'); // cards | table

  $eval = $evalStats ?? [];
  $improvers = $eval['top_improvers'] ?? collect();
  $decliners = $eval['top_decliners'] ?? collect();
  $anomalies = $eval['anomalies'] ?? collect();

  $go = $goalsStats ?? [];
  $goalStuck = $go['stuck'] ?? collect();
  $goalForecast = $go['forecast_bad'] ?? collect();

  $alertsList = collect($alerts ?? []);
@endphp

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

    {{-- Header --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-fuchsia-400/30 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-eye text-xs"></i>
            <span>غرفة سقراط — مراقبة الأعضاء + إنذارات + تقييمات</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            غرفة سقراط <span class="text-fuchsia-300">للمراقبة والتحكم</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            ديشبورد يركز على الأعضاء (نشاط + غيابات + تقييمات + خطر) — والتقنيات تأتي كقسم ثانوي.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              زيارات: {{ number_format($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-emerald-400"></span>
              نشط 7 أيام: {{ number_format($active7 ?? 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-indigo-400"></span>
              نشط 30 يوم: {{ number_format($active30 ?? 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-400"></span>
              حالات مفتوحة: {{ number_format($incidentsOpen ?? 0) }}
            </span>
          </div>
        </div>

        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center justify-between gap-2">
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-xl bg-fuchsia-500/20 text-fuchsia-200 grid place-items-center">
                  <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">{{ $from }} → {{ $to }}</div>
                </div>
              </div>

              <button type="button" onclick="toggleHelp()"
                class="inline-flex items-center gap-2 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-circle-question text-[11px]"></i>
                مساعدة
              </button>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-2">
              <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/40">
              </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/40">
              </div>

              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">طريقة العرض (الأعضاء)</label>
                <div class="mt-1 flex items-center gap-2">
                  <button name="view" value="cards" class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl text-[11px] border transition
                    {{ $view==='cards' ? 'bg-fuchsia-500/15 border-fuchsia-300/30 text-fuchsia-100' : 'bg-white/10 border-white/15 text-white/80 hover:bg-white/15' }}">
                    <i class="fa-solid fa-grid-2 text-[11px]"></i>
                    كروت
                  </button>
                  <button name="view" value="table" class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl text-[11px] border transition
                    {{ $view==='table' ? 'bg-cyan-500/15 border-cyan-300/30 text-cyan-100' : 'bg-white/10 border-white/15 text-white/80 hover:bg-white/15' }}">
                    <i class="fa-solid fa-table text-[11px]"></i>
                    جدول
                  </button>
                </div>
              </div>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 shadow-lg shadow-fuchsia-500/25 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.sentinel.explorer') }}"
                   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-magnifying-glass-chart ms-2 text-[11px]"></i> الاستكشاف
                </a>
                <a href="{{ route('superadmin.sentinel.broadcast') }}"
                   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-bullhorn ms-2 text-[11px]"></i> إرسال عام
                </a>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>

    {{-- Help Drawer --}}
    <div id="helpDrawer" class="hidden rounded-3xl border border-white/10 bg-black/35 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-sm font-extrabold text-fuchsia-200">مفاتيح المساعدة</div>
          <div class="text-[11px] text-white/60">التركيز هنا على الأعضاء — التقنيات تحت</div>
        </div>
        <button onclick="toggleHelp()" class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
          إغلاق
        </button>
      </div>

      <div class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
          <div class="font-extrabold text-white text-[13px] flex items-center gap-2">
            <i class="fa-solid fa-users text-cyan-200"></i>
            الأعضاء
          </div>
          <div class="mt-2 text-[12px] text-white/75 leading-relaxed">
            نشط 7/30 + زيارات + غيابات + خطر.
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
          <div class="font-extrabold text-white text-[13px] flex items-center gap-2">
            <i class="fa-solid fa-chart-line text-emerald-200"></i>
            التقييمات
          </div>
          <div class="mt-2 text-[12px] text-white/75 leading-relaxed">
            متوسط أسبوعي + تحسن/تراجع + انحرافات.
          </div>
        </div>

        <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
          <div class="font-extrabold text-white text-[13px] flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-rose-200"></i>
            التنبيهات
          </div>
          <div class="mt-2 text-[12px] text-white/75 leading-relaxed">
            هبوط تقييم / غيابات / أهداف بخطر.
          </div>
        </div>
      </div>
    </div>

    @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

    {{-- =========================
         SECTION: MEMBERS FIRST
       ========================= --}}

    @if($view === 'table')
      <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-white">ملخص الأعضاء والتفاعل</div>
          <div class="text-[11px] text-white/60">عرض جدولي</div>
        </div>

        <div class="p-4 overflow-x-auto">
          <table class="min-w-full text-sm">
            <thead class="text-[11px] text-white/60">
              <tr>
                <th class="text-right py-2 px-3">المؤشر</th>
                <th class="text-right py-2 px-3">القيمة</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              <tr>
                <td class="py-3 px-3 text-white/80">نشط 7 أيام</td>
                <td class="py-3 px-3 text-emerald-200 font-extrabold">{{ number_format($active7 ?? 0) }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">نشط 30 يوم</td>
                <td class="py-3 px-3 text-indigo-200 font-extrabold">{{ number_format($active30 ?? 0) }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">زيارات خلال الفترة</td>
                <td class="py-3 px-3 text-cyan-200 font-extrabold">{{ number_format($visits ?? 0) }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">مستخدمون فريدون</td>
                <td class="py-3 px-3 text-white font-extrabold">{{ number_format($uniqueUsers ?? 0) }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">متوسط التقييم الحالي</td>
                <td class="py-3 px-3 text-amber-200 font-extrabold">{{ $eval['overall_avg_current'] ?? 0 }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">التغير الأسبوعي %</td>
                <td class="py-3 px-3 font-extrabold {{ (($eval['overall_change_pct'] ?? 0) >= 0) ? 'text-emerald-200' : 'text-rose-200' }}">
                  {{ $eval['overall_change_pct'] ?? 0 }}%
                </td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">أعضاء خطر (غياب + نزول تقييم)</td>
                <td class="py-3 px-3 text-rose-200 font-extrabold">{{ number_format(($riskMembers ?? collect())->count()) }}</td>
              </tr>
              <tr>
                <td class="py-3 px-3 text-white/80">تنبيهات</td>
                <td class="py-3 px-3 text-fuchsia-200 font-extrabold">{{ number_format($alertsList->count()) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    @else

      {{-- Cards KPIs --}}
      <div class="grid gap-4 lg:grid-cols-12">
        <div class="lg:col-span-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">

          <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-emerald-600/10 via-slate-950 to-slate-950 border border-emerald-400/20 shadow-xl p-5">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                <i class="fa-solid fa-user-check"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-300/80">نشط 7 أيام</div>
                <div class="text-2xl font-extrabold text-emerald-200">{{ number_format($active7 ?? 0) }}</div>
              </div>
            </div>
          </div>

          <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-600/10 via-slate-950 to-slate-950 border border-indigo-400/20 shadow-xl p-5">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-indigo-500/15 border border-indigo-400/25 grid place-items-center text-indigo-200">
                <i class="fa-solid fa-users"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-300/80">نشط 30 يوم</div>
                <div class="text-2xl font-extrabold text-indigo-200">{{ number_format($active30 ?? 0) }}</div>
              </div>
            </div>
          </div>

          <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-cyan-600/10 via-slate-950 to-slate-950 border border-cyan-400/20 shadow-xl p-5">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                <i class="fa-solid fa-hand-pointer"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-300/80">الزيارات</div>
                <div class="text-2xl font-extrabold text-cyan-200">{{ number_format($visits ?? 0) }}</div>
              </div>
            </div>
          </div>

          <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-rose-600/10 via-slate-950 to-slate-950 border border-rose-400/20 shadow-xl p-5">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                <i class="fa-solid fa-skull-crossbones"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-300/80">أعضاء خطر</div>
                <div class="text-2xl font-extrabold text-rose-200">{{ number_format(($riskMembers ?? collect())->count()) }}</div>
              </div>
            </div>
          </div>

        </div>

        {{-- Weekly evaluation summary --}}
        <div class="lg:col-span-4 grid gap-4">
          <div class="rounded-3xl border border-white/10 bg-black/30 p-5">
            <div class="flex items-center justify-between">
              <div class="text-sm font-extrabold text-amber-200">ملخص التقييم (WoW)</div>
              <div class="text-[11px] text-white/60">أسبوع بأسبوع</div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3">
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="text-[11px] text-white/60">متوسط الحالي</div>
                <div class="text-xl font-extrabold text-white">{{ $eval['overall_avg_current'] ?? 0 }}</div>
              </div>
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="text-[11px] text-white/60">متوسط السابق</div>
                <div class="text-xl font-extrabold text-white">{{ $eval['overall_avg_prev'] ?? 0 }}</div>
              </div>
              <div class="col-span-2 rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="flex items-center justify-between">
                  <div class="text-[11px] text-white/60">التغير</div>
                  <div class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                    drop: {{ $dropThreshold ?? 15 }}%
                  </div>
                </div>
                <div class="mt-1 text-2xl font-extrabold {{ (($eval['overall_change_pct'] ?? 0) >= 0) ? 'text-emerald-200' : 'text-rose-200' }}">
                  {{ $eval['overall_change_pct'] ?? 0 }}%
                </div>
              </div>
            </div>

          </div>

          <div class="rounded-3xl border border-white/10 bg-black/30 p-5">
            <div class="flex items-center justify-between">
              <div class="text-sm font-extrabold text-fuchsia-200">تنبيهات</div>
              <div class="text-[11px] text-white/60">{{ $alertsList->count() }} عنصر</div>
            </div>

            <div class="mt-3 space-y-2 max-h-[220px] overflow-auto">
              @forelse($alertsList as $a)
                @php
                  $sev = $a['severity'] ?? 'low';
                  $sevCls = $sev === 'high'
                    ? 'border-rose-400/25 bg-rose-500/10 text-rose-200'
                    : ($sev === 'medium'
                      ? 'border-amber-400/25 bg-amber-500/10 text-amber-200'
                      : 'border-white/10 bg-white/5 text-white/80');
                @endphp
                <div class="rounded-2xl border {{ $sevCls }} p-3">
                  <div class="flex items-center justify-between gap-2">
                    <div class="font-extrabold text-[12px]">{{ $a['title'] ?? 'تنبيه' }}</div>
                    <span class="text-[10px] px-2 py-0.5 rounded-full bg-black/20 border border-white/10">
                      {{ $sev }}
                    </span>
                  </div>
                  <div class="mt-1 text-[12px] opacity-90">{{ $a['text'] ?? '' }}</div>
                </div>
              @empty
                <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
                  لا يوجد تنبيهات حالياً ✅
                </div>
              @endforelse
            </div>
          </div>

        </div>
      </div>
    @endif

    {{-- =========================
         TABLES: MEMBERS DATA
       ========================= --}}

    <div class="grid gap-4 lg:grid-cols-12">

      {{-- Top Absences --}}
      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-rose-200">الأكثر غيابًا (30 يوم)</div>
          <div class="text-[11px] text-white/60">حسب absences</div>
        </div>
        <div class="p-4">
          <div class="space-y-2">
            @forelse(($topAbsences ?? collect()) as $r)
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3 flex items-center justify-between">
                <div class="min-w-0">
                  <div class="text-[12px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.$r->user_id) }}</div>
                  <div class="text-[11px] text-white/60">ID: {{ $r->user_id }}</div>
                </div>
                <div class="text-xl font-extrabold text-rose-200">{{ (int)($r->c ?? 0) }}</div>
              </div>
            @empty
              <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
                لا يوجد بيانات غياب.
              </div>
            @endforelse
          </div>
        </div>
      </div>

      {{-- Top Improvers --}}
      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-emerald-200">أعلى تحسّن (WoW)</div>
          <div class="text-[11px] text-white/60">score_records / evaluations</div>
        </div>
        <div class="p-4">
          <div class="space-y-2">
            @forelse($improvers as $r)
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="flex items-center justify-between gap-2">
                  <div class="min-w-0">
                    <div class="text-[12px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.$r->user_id) }}</div>
                    <div class="text-[11px] text-white/60">
                      {{ $r->prev_avg }} → {{ $r->cur_avg }} (n {{ $r->prev_n }} → {{ $r->cur_n }})
                    </div>
                  </div>
                  <div class="text-lg font-extrabold text-emerald-200">
                    +{{ $r->change_pct }}%
                  </div>
                </div>
              </div>
            @empty
              <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
                لا يوجد بيانات تحسّن.
              </div>
            @endforelse
          </div>
        </div>
      </div>

      {{-- Top Decliners --}}
      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-rose-200">أعلى تراجع (WoW)</div>
          <div class="text-[11px] text-white/60">drop threshold: {{ $dropThreshold ?? 15 }}%</div>
        </div>
        <div class="p-4">
          <div class="space-y-2">
            @forelse($decliners as $r)
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="flex items-center justify-between gap-2">
                  <div class="min-w-0">
                    <div class="text-[12px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.$r->user_id) }}</div>
                    <div class="text-[11px] text-white/60">
                      {{ $r->prev_avg }} → {{ $r->cur_avg }} (n {{ $r->prev_n }} → {{ $r->cur_n }})
                    </div>
                  </div>
                  <div class="text-lg font-extrabold text-rose-200">
                    {{ $r->change_pct }}%
                  </div>
                </div>
              </div>
            @empty
              <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
                لا يوجد بيانات تراجع.
              </div>
            @endforelse
          </div>
        </div>
      </div>

    </div>

    {{-- Risk Members --}}
    <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-sm font-extrabold text-rose-200">أعضاء خطر</div>
          <div class="text-[11px] text-white/60">غياب (14 يوم) + نزول تقييم (≤ -10%)</div>
        </div>
        <div class="text-[11px] text-white/60">
          {{ number_format(($riskMembers ?? collect())->count()) }} عضو
        </div>
      </div>

      <div class="p-4 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="text-[11px] text-white/60">
            <tr>
              <th class="text-right py-2 px-3">العضو</th>
              <th class="text-right py-2 px-3">الغيابات</th>
              <th class="text-right py-2 px-3">التغير %</th>
              <th class="text-right py-2 px-3">الحالي</th>
              <th class="text-right py-2 px-3">السابق</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5">
            @forelse(($riskMembers ?? collect()) as $r)
              <tr class="hover:bg-white/5">
                <td class="py-3 px-3 text-white font-extrabold">{{ $r->name ?? ('#'.$r->user_id) }}</td>
                <td class="py-3 px-3 text-white/80">{{ (int)($r->abs_c ?? 0) }}</td>
                <td class="py-3 px-3 text-rose-200 font-extrabold">{{ $r->change_pct }}%</td>
                <td class="py-3 px-3 text-white/80">{{ $r->cur_avg }}</td>
                <td class="py-3 px-3 text-white/80">{{ $r->prev_avg }}</td>
              </tr>
            @empty
              <tr><td colspan="5" class="py-4 px-3 text-white/70">لا يوجد أعضاء خطر.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- Goals --}}
    <div class="grid gap-4 lg:grid-cols-12">
      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 p-5">
        <div class="flex items-center justify-between">
          <div class="text-sm font-extrabold text-amber-200">الأهداف</div>
          <div class="text-[11px] text-white/60">goals</div>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-3">
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60">مفتوحة</div>
            <div class="text-xl font-extrabold text-white">{{ $go['open'] ?? 0 }}</div>
          </div>
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60">مكتملة</div>
            <div class="text-xl font-extrabold text-white">{{ $go['completed'] ?? 0 }}</div>
          </div>
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60">متأخرة</div>
            <div class="text-xl font-extrabold text-rose-200">{{ $go['late'] ?? 0 }}</div>
          </div>
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60">نسبة إنجاز</div>
            <div class="text-xl font-extrabold text-emerald-200">{{ $go['completion_rate'] ?? 0 }}%</div>
          </div>
        </div>
      </div>

      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-white">أهداف متعثرة</div>
          <div class="text-[11px] text-white/60">stuck (updated_at & progress)</div>
        </div>
        <div class="p-4 space-y-2">
          @forelse($goalStuck as $g)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-[12px] font-extrabold text-white">{{ $g->title ?? ('#'.$g->id) }}</div>
              <div class="mt-1 text-[11px] text-white/60">
                تقدم: {{ $g->progress_percent ?? 0 }}% — آخر تحديث: {{ $g->updated_at ?? '' }}
              </div>
            </div>
          @empty
            <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
              لا يوجد أهداف متعثرة.
            </div>
          @endforelse
        </div>
      </div>

      <div class="lg:col-span-4 rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-amber-200">توقع تأخير</div>
          <div class="text-[11px] text-white/60">forecast_bad</div>
        </div>
        <div class="p-4 space-y-2">
          @forelse($goalForecast as $g)
            <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-3">
              <div class="text-[12px] font-extrabold text-white">{{ $g->title ?? ('#'.$g->id) }}</div>
              <div class="mt-1 text-[11px] text-white/70">
                إنجاز: {{ $g->progress_percent ?? 0 }}% — زمن: {{ $g->time_percent ?? 0 }}%
              </div>
            </div>
          @empty
            <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-[12px] text-white/70">
              لا يوجد توقعات تأخير.
            </div>
          @endforelse
        </div>
      </div>
    </div>

    {{-- =========================
         SECONDARY: TECH / AUDIT
       ========================= --}}

    <div class="grid gap-4 lg:grid-cols-12">

      <div class="lg:col-span-6 rounded-3xl border border-white/10 bg-black/30 p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="text-sm font-extrabold text-fuchsia-200">تحليل الأجهزة والمتصفحات (ثانوي)</div>
          <div class="text-[11px] text-white/60">tracking</div>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60 mb-2">الأجهزة</div>
            <canvas id="devicePie" height="160"></canvas>
          </div>
          <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
            <div class="text-[11px] text-white/60 mb-2">المتصفحات</div>
            <canvas id="browserPie" height="160"></canvas>
          </div>
        </div>
      </div>

      <div class="lg:col-span-6 rounded-3xl border border-white/10 bg-black/30 p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="text-sm font-extrabold text-cyan-200">نصائح وتحليلات (ثانوي)</div>
          <div class="text-[11px] text-white/60">AI Notes</div>
        </div>
        <div class="space-y-2 max-h-[360px] overflow-auto">
          @foreach(($ai ?? []) as $card)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="flex items-center justify-between">
                <div class="font-extrabold text-white text-[13px] flex items-center gap-2">
                  <i class="{{ $card['icon'] }} text-{{ $card['tone'] }}-200"></i>
                  <span>{{ $card['title'] }}</span>
                </div>
                <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                  قوة {{ $card['score'] }}
                </span>
              </div>
              <div class="mt-1 text-[12px] text-white/75 leading-relaxed">{{ $card['text'] }}</div>
            </div>
          @endforeach
        </div>
      </div>

    </div>

    {{-- Top Routes --}}
    <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-sm font-extrabold text-emerald-200">أكثر المسارات استخدامًا (Audit)</div>
          <div class="text-[11px] text-white/60">أين تركز الإدارة أكثر</div>
        </div>

        <div class="inline-flex items-center gap-2">
          <span class="text-[11px] text-white/60">العرض:</span>
          <button type="button" onclick="toggleRoutesView('cards')" class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
            كروت
          </button>
          <button type="button" onclick="toggleRoutesView('table')" class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
            جدول
          </button>
        </div>
      </div>

      <div class="p-4">
        <div id="routesCards" class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
          @foreach(($topRoutes ?? []) as $r)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-[11px] text-white/60 truncate">{{ $r->k }}</div>
              <div class="text-2xl font-extrabold text-white">{{ number_format($r->c) }}</div>
            </div>
          @endforeach
        </div>

        <div id="routesTable" class="hidden overflow-x-auto">
          <table class="min-w-full text-sm">
            <thead class="text-[11px] text-white/60">
              <tr>
                <th class="text-right py-2 px-3">المسار</th>
                <th class="text-right py-2 px-3">العدد</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @foreach(($topRoutes ?? []) as $r)
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white/80">{{ $r->k }}</td>
                  <td class="py-3 px-3 text-white font-extrabold">{{ number_format($r->c) }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>

      </div>
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
function toggleHelp(){
  const el = document.getElementById('helpDrawer');
  el.classList.toggle('hidden');
}
function toggleRoutesView(mode){
  const cards = document.getElementById('routesCards');
  const table = document.getElementById('routesTable');
  if(mode === 'table'){
    cards.classList.add('hidden');
    table.classList.remove('hidden');
  }else{
    table.classList.add('hidden');
    cards.classList.remove('hidden');
  }
}

// Charts
const deviceData = @json(($devicePie ?? collect())->map(fn($x)=>['k'=>$x->k,'c'=>$x->c])->values());
const browserData = @json(($browserPie ?? collect())->map(fn($x)=>['k'=>$x->k,'c'=>$x->c])->values());

if(document.getElementById('devicePie')){
  new Chart(document.getElementById('devicePie'), {
    type: 'doughnut',
    data: { labels: deviceData.map(x=>x.k), datasets: [{ data: deviceData.map(x=>x.c) }] },
    options: { plugins: { legend: { display: false } }, cutout: '62%' }
  });
}
if(document.getElementById('browserPie')){
  new Chart(document.getElementById('browserPie'), {
    type: 'doughnut',
    data: { labels: browserData.map(x=>x.k), datasets: [{ data: browserData.map(x=>x.c) }] },
    options: { plugins: { legend: { display: false } }, cutout: '62%' }
  });
}
</script>
@endsection