@extends('layouts.superadmin')
@section('title','Socratic Sentinel — Explorer')

@section('content')
@php
  $auditTotal = (is_object($audit) && method_exists($audit,'total')) ? (int)$audit->total() : (is_countable($audit) ? count($audit) : 0);
  $trackingCount = (is_countable($tracking) ? count($tracking) : 0);
  $failedCount = (is_countable($failed) ? count($failed) : 0);
  $jobsCount = (is_countable($jobs) ? count($jobs) : 0);

  $membersDeep = $membersDeep ?? [
    'total'=>0,'active7'=>0,'active30'=>0,'dormant14'=>0,
    'top_visitors_14'=>collect(),'last_seen'=>collect(),'absence_top30'=>collect(),
    'eval'=>[
      'overall_avg_current'=>0,'overall_avg_prev'=>0,'overall_change_pct'=>0,
      'top_improvers'=>collect(),'top_decliners'=>collect(),'anomalies'=>collect(),
    ],
  ];

  $promission = $promission ?? [
    'open'=>0,'completed'=>0,'late'=>0,'completion_rate'=>0,
    'stuck'=>collect(),'forecast_bad'=>collect(),'top_assignees'=>collect(),
  ];

  $promissionAlgo = $promissionAlgo ?? [
    'from' => $from ?? now()->subDays(14)->toDateString(),
    'to'   => $to ?? now()->toDateString(),
    'compare_mode' => 'prev_month',
    'compare_from' => null,
    'compare_to' => null,
    'compare_enabled' => false,
    'goalsTeam' => ['total_hours'=>300,'guest_count'=>100,'live_hours'=>80,'sahra_hours'=>20],
    'goalsMember' => ['mix_hours'=>50,'sahra_hours'=>5],
    'team' => ['members'=>0,'live_hours'=>0,'sahra_hours'=>0,'guest_hours'=>0,'guest_count'=>0,'total_hours'=>0],
    'teamCmp' => null,
    'rows' => collect(),
    'ai' => ['summary'=>'','tips'=>[]],
  ];

  $algoTeam = $promissionAlgo['team'] ?? [];
  $algoGoalsTeam = $promissionAlgo['goalsTeam'] ?? [];
  $algoGoalsMember = $promissionAlgo['goalsMember'] ?? [];
  $algoRows = collect($promissionAlgo['rows'] ?? collect());
  $algoAi = $promissionAlgo['ai'] ?? ['summary'=>'','tips'=>[]];

  $pct = function($num, $den){
    $den = (float)($den ?? 0);
    if($den <= 0) return 0;
    return round(((float)$num / $den) * 100, 1);
  };

  $fmtH = function($h){
    return number_format((float)$h, 2);
  };

  $hitBadge = function($hit){
    if(is_null($hit)) return ['cls'=>'bg-white/5 border-white/10 text-white/70','txt'=>'—'];
    return $hit
      ? ['cls'=>'bg-emerald-500/10 border-emerald-400/20 text-emerald-200','txt'=>'محقق ✅']
      : ['cls'=>'bg-rose-500/10 border-rose-400/20 text-rose-200','txt'=>'غير محقق ✖'];
  };

  $compareEnabled = (bool)($promissionAlgo['compare_enabled'] ?? false);
  $cmp = $promissionAlgo['teamCmp'] ?? null;

  $tone = function($v){
    if(is_null($v)) return 'slate';
    return ((float)$v >= 0) ? 'emerald' : 'rose';
  };
@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-cyan-400/25 shadow-2xl shadow-cyan-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/20 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-cyan-300/30 text-[11px] text-cyan-100">
            <i class="fa-solid fa-magnifying-glass-chart text-xs"></i>
            <span>Explorer — Audit + Tracking + Jobs + Members + ProMission</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            Explorer <span class="text-cyan-300">التنقيب والتحقيق</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            لوحة استكشاف عميقة: سجلات الإدارة + تتبع + طوابير + تعمّق بالأعضاء + أهداف + خوارزمية ProMission.
          </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>
              Audit: {{ number_format($auditTotal) }}
            </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>
              Tracking: {{ number_format($trackingCount) }}
            </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-fuchsia-400"></span>
              Jobs: {{ number_format($jobsCount) }}
            </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-rose-400"></span>
              Failed: {{ number_format($failedCount) }}
            </span>
          </div>

          <div class="pt-1 text-[11px] text-white/55">
            ✅ ملاحظة: يتم عرض <span class="text-white font-bold">الأعضاء المؤهلين فقط</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-3 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-cyan-500/20 text-cyan-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">نطاق التحليل</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2">

              {{-- Range --}}
              <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-cyan-500/35">
              </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-fuchsia-500/35">
              </div>

              {{-- Search --}}
              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">بحث (Action/Module/Route/URL/IP)</label>
                <input type="text" name="q" value="{{ request('q') }}"
                  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-emerald-500/35"
                  placeholder="مثال: evaluations أو /superadmin أو 192.168...">
              </div>

              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">User ID (Tracking)</label>
                <input type="number" name="user_id" value="{{ request('user_id') }}"
                  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-amber-500/35"
                  placeholder="اختياري">
              </div>

              {{-- ProMission Algo Compare Controls (kept in same request) --}}
              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">مقارنة خوارزمية ProMission</label>
                <select name="compare_mode"
                        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/35">
                  @php $cm = (string)($promissionAlgo['compare_mode'] ?? request('compare_mode','prev_month')); @endphp
                  <option value="none" @selected($cm==='none')>بدون مقارنة</option>
                  <option value="prev_month" @selected($cm==='prev_month')>نفس المدة الشهر الماضي</option>
                  <option value="custom" @selected($cm==='custom')>تخصيص</option>
                </select>
                <div class="mt-2 grid grid-cols-2 gap-2">
                  <input type="date" name="compare_from" value="{{ $promissionAlgo['compare_from'] ?? request('compare_from') }}"
                         class="w-full 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/35"
                         placeholder="من">
                  <input type="date" name="compare_to" value="{{ $promissionAlgo['compare_to'] ?? request('compare_to') }}"
                         class="w-full 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/35"
                         placeholder="إلى">
                </div>
                <div class="mt-1 text-[10px] text-white/45">
                  إذا اخترت "تخصيص" لازم تعبي من/إلى.
                </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-cyan-200 via-fuchsia-200 to-emerald-200 shadow-lg shadow-cyan-500/20 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">
                <a href="{{ route('superadmin.sentinel.dashboard') }}"
                   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-gauge-high ms-2 text-[11px]"></i> Dashboard
                </a>
                <a href="{{ route('superadmin.sentinel.incidents') }}"
                   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-triangle-exclamation ms-2 text-[11px]"></i> Incidents
                </a>
              </div>
            </form>

          </div>
        </div>

      </div>
    </div>

    {{-- Tabs --}}
    <div class="rounded-3xl border border-white/10 bg-black/25 p-3 sm:p-4">
      <div class="flex flex-wrap gap-2">
        <button type="button" data-tab-btn="audit"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-shield-halved text-cyan-200"></i>
          Audit Logs
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format($auditTotal) }}
          </span>
        </button>

        <button type="button" data-tab-btn="tracking"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-location-crosshairs text-emerald-200"></i>
          Tracking
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format($trackingCount) }}
          </span>
        </button>

        <button type="button" data-tab-btn="jobs"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-gears text-fuchsia-200"></i>
          Jobs
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format($jobsCount) }}
          </span>
        </button>

        <button type="button" data-tab-btn="failed"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-bug text-rose-200"></i>
          Failed Jobs
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format($failedCount) }}
          </span>
        </button>

        <button type="button" data-tab-btn="members"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-users text-amber-200"></i>
          Members Deep
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format((int)($membersDeep['total'] ?? 0)) }}
          </span>
        </button>

        <button type="button" data-tab-btn="promission"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-bullseye text-fuchsia-200"></i>
          ProMission Goals
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format((int)($promission['open'] ?? 0)) }}
          </span>
        </button>

        {{-- ✅ NEW TAB: ProMission Algorithm --}}
        <button type="button" data-tab-btn="promission_algo"
          class="tab-btn inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/80 hover:bg-white/10 transition">
          <i class="fa-solid fa-wand-magic-sparkles text-cyan-200"></i>
          ProMission Algorithm
          <span class="text-[11px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ number_format((int)($algoTeam['members'] ?? 0)) }}
          </span>
        </button>
      </div>
    </div>

    {{-- ========================= AUDIT ========================= --}}
    <div id="tab-audit" class="tab-panel rounded-3xl border border-white/10 bg-black/25 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-cyan-200">Audit Logs</div>
          <div class="text-[11px] text-white/60">أحدث عمليات الإدارة (مع Pagination)</div>
        </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">ID</th>
              <th class="text-right py-2 px-3">Action</th>
              <th class="text-right py-2 px-3">Module</th>
              <th class="text-right py-2 px-3">Route</th>
              <th class="text-right py-2 px-3">IP</th>
              <th class="text-right py-2 px-3">At</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5">
            @forelse($audit as $row)
              <tr class="hover:bg-white/5 transition">
                <td class="py-3 px-3 text-white/80">{{ $row->id ?? '—' }}</td>
                <td class="py-3 px-3">
                  <div class="font-bold text-white">{{ $row->action ?? '—' }}</div>
                  <div class="text-[11px] text-white/55 truncate max-w-[420px]">{{ $row->url ?? $row->route_name ?? '—' }}</div>
                </td>
                <td class="py-3 px-3 text-white/80">{{ $row->module ?? '—' }}</td>
                <td class="py-3 px-3 text-white/70">{{ $row->route_name ?? '—' }}</td>
                <td class="py-3 px-3">
                  <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/75">
                    {{ $row->ip_address ?? '—' }}
                  </span>
                </td>
                <td class="py-3 px-3 text-[12px] text-white/65">{{ $row->created_at ?? '—' }}</td>
              </tr>
            @empty
              <tr><td colspan="6" class="py-8 text-center text-white/60">لا يوجد نتائج.</td></tr>
            @endforelse
          </tbody>
        </table>

        @if(is_object($audit) && method_exists($audit,'links'))
          <div class="mt-4">
            {{ $audit->links() }}
          </div>
        @endif
      </div>
    </div>

    {{-- ========================= TRACKING ========================= --}}
    <div id="tab-tracking" class="tab-panel hidden rounded-3xl border border-white/10 bg-black/25 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">Tracking</div>
          <div class="text-[11px] text-white/60">آخر الزيارات (آخر 40)</div>
        </div>
      </div>

      <div class="p-4 grid gap-3 lg:grid-cols-2">
        @forelse($tracking as $t)
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[12px] text-white/80">
                  <span class="font-extrabold text-white">User:</span>
                  <span class="px-2 py-0.5 rounded-full bg-black/30 border border-white/10 text-[11px] text-white/80">
                    {{ $t->user_id ?? '—' }}
                  </span>
                </div>
                <div class="mt-1 text-[13px] font-extrabold text-white truncate">
                  {{ $t->page_title ?? $t->page_url ?? '—' }}
                </div>
                <div class="mt-1 text-[11px] text-white/55 break-all">{{ $t->page_url ?? '—' }}</div>
              </div>

              <div class="text-left shrink-0">
                <div class="text-[11px] px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
                  {{ $t->device_type ?? 'device' }}
                </div>
                <div class="mt-2 text-[11px] px-2 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200">
                  {{ $t->browser ?? 'browser' }}
                </div>
              </div>
            </div>

            <div class="mt-3 flex flex-wrap gap-2">
              <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                IP: {{ $t->ip_address ?? '—' }}
              </span>
              @if(isset($t->load_time) && $t->load_time !== null)
                <span class="text-[11px] px-2 py-1 rounded-full bg-amber-500/10 border border-amber-400/20 text-amber-200">
                  load: {{ number_format((float)$t->load_time, 2) }}s
                </span>
              @endif
              <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                {{ $t->visited_at ?? '—' }}
              </span>
            </div>
          </div>
        @empty
          <div class="col-span-2 py-10 text-center text-white/60">لا يوجد تتبع ضمن الفترة.</div>
        @endforelse
      </div>
    </div>

    {{-- ========================= JOBS ========================= --}}
    <div id="tab-jobs" class="tab-panel hidden rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10">
        <div class="text-sm font-extrabold text-fuchsia-200">Jobs</div>
        <div class="text-[11px] text-white/60">آخر 15 (Queue)</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">ID</th>
              <th class="text-right py-2 px-3">Queue</th>
              <th class="text-right py-2 px-3">Attempts</th>
              <th class="text-right py-2 px-3">Available At</th>
              <th class="text-right py-2 px-3">Created At</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5">
            @forelse($jobs as $j)
              <tr class="hover:bg-white/5 transition">
                <td class="py-3 px-3 text-white/80">{{ $j->id ?? '—' }}</td>
                <td class="py-3 px-3 text-white">{{ $j->queue ?? '—' }}</td>
                <td class="py-3 px-3 text-white/70">{{ $j->attempts ?? '—' }}</td>
                <td class="py-3 px-3 text-white/60">{{ $j->available_at ?? '—' }}</td>
                <td class="py-3 px-3 text-white/60">{{ $j->created_at ?? '—' }}</td>
              </tr>
            @empty
              <tr><td colspan="5" class="py-8 text-center text-white/60">لا يوجد Jobs.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- ========================= FAILED ========================= --}}
    <div id="tab-failed" class="tab-panel hidden rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10">
        <div class="text-sm font-extrabold text-rose-200">Failed Jobs</div>
        <div class="text-[11px] text-white/60">آخر 15</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">ID</th>
              <th class="text-right py-2 px-3">Connection</th>
              <th class="text-right py-2 px-3">Queue</th>
              <th class="text-right py-2 px-3">Failed At</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5">
            @forelse($failed as $f)
              <tr class="hover:bg-white/5 transition">
                <td class="py-3 px-3 text-white/80">{{ $f->id ?? '—' }}</td>
                <td class="py-3 px-3 text-white/70">{{ $f->connection ?? '—' }}</td>
                <td class="py-3 px-3 text-white">{{ $f->queue ?? '—' }}</td>
                <td class="py-3 px-3 text-white/60">{{ $f->failed_at ?? '—' }}</td>
              </tr>
            @empty
              <tr><td colspan="4" class="py-8 text-center text-white/60">لا يوجد Failed Jobs.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- ========================= MEMBERS DEEP ========================= --}}
    <div id="tab-members" class="tab-panel hidden space-y-4">
      {{-- KPIs --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-amber-200">Members Deep</div>
          <div class="text-[11px] text-white/60">نظرة عميقة على الأعضاء (نشاط + خمول + غياب + تقييمات WoW)</div>
        </div>

        <div class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">عدد الأعضاء (مؤهلين)</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format((int)($membersDeep['total'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-emerald-400/15 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-white/60">نشطين آخر 7 أيام</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-200">{{ number_format((int)($membersDeep['active7'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-cyan-400/15 bg-cyan-500/5 p-4">
            <div class="text-[11px] text-white/60">نشطين آخر 30 يوم</div>
            <div class="mt-1 text-2xl font-extrabold text-cyan-200">{{ number_format((int)($membersDeep['active30'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-rose-400/15 bg-rose-500/5 p-4">
            <div class="text-[11px] text-white/60">خاملين 14 يوم</div>
            <div class="mt-1 text-2xl font-extrabold text-rose-200">{{ number_format((int)($membersDeep['dormant14'] ?? 0)) }}</div>
          </div>
        </div>
      </div>

      {{-- View Toggle for Members Lists --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 p-3 sm:p-4">
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="text-[12px] text-white/70 font-bold">
            طريقة العرض:
            <span class="text-white/50">(للجداول/الكروت داخل قسم الأعضاء)</span>
          </div>

          <div class="inline-flex items-center gap-2">
            <button type="button" onclick="setMembersView('cards')"
              class="membersViewBtn px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
              <i class="fa-solid fa-grid-2 ms-2 text-[11px]"></i> كروت
            </button>
            <button type="button" onclick="setMembersView('table')"
              class="membersViewBtn px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
              <i class="fa-solid fa-table ms-2 text-[11px]"></i> جدول
            </button>
          </div>
        </div>
      </div>

      {{-- Top Visitors 14 --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-cyan-200">أكثر الأعضاء زيارات (آخر 14 يوم)</div>
          <div class="text-[11px] text-white/60">زيارات + أيام ظهور</div>
        </div>

        {{-- Cards --}}
        <div id="membersCards-topVisitors" class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @forelse(($membersDeep['top_visitors_14'] ?? collect()) as $r)
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[12px] text-white/70">عضو</div>
                  <div class="text-[14px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                  <div class="mt-1 text-[11px] text-white/55">ID: {{ $r->user_id ?? '—' }}</div>
                </div>
                <div class="shrink-0 text-left">
                  <div class="text-[11px] px-2 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200">
                    visits: {{ number_format((int)($r->visits ?? 0)) }}
                  </div>
                  <div class="mt-2 text-[11px] px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
                    days: {{ number_format((int)($r->days ?? 0)) }}
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-3 py-10 text-center text-white/60">لا يوجد بيانات.</div>
          @endforelse
        </div>

        {{-- Table --}}
        <div id="membersTable-topVisitors" class="hidden 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">User</th>
                <th class="text-right py-2 px-3">ID</th>
                <th class="text-right py-2 px-3">Visits</th>
                <th class="text-right py-2 px-3">Days</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @forelse(($membersDeep['top_visitors_14'] ?? collect()) as $r)
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white font-bold">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</td>
                  <td class="py-3 px-3 text-white/70">{{ $r->user_id ?? '—' }}</td>
                  <td class="py-3 px-3 text-cyan-200 font-extrabold">{{ number_format((int)($r->visits ?? 0)) }}</td>
                  <td class="py-3 px-3 text-emerald-200 font-extrabold">{{ number_format((int)($r->days ?? 0)) }}</td>
                </tr>
              @empty
                <tr><td colspan="4" class="py-8 text-center text-white/60">لا يوجد بيانات.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- Last Seen --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-emerald-200">آخر ظهور للأعضاء</div>
          <div class="text-[11px] text-white/60">آخر 20 حسب آخر زيارة</div>
        </div>

        {{-- Cards --}}
        <div id="membersCards-lastSeen" class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @forelse(($membersDeep['last_seen'] ?? collect()) as $r)
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[12px] text-white/70">عضو</div>
                  <div class="text-[14px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                  <div class="mt-1 text-[11px] text-white/55">ID: {{ $r->user_id ?? '—' }}</div>
                  <div class="mt-2 text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70 inline-flex">
                    last: {{ $r->last_seen ?? '—' }}
                  </div>
                </div>
                <div class="shrink-0 text-left">
                  <div class="text-[11px] px-2 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200">
                    visits14: {{ number_format((int)($r->visits_14 ?? 0)) }}
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-3 py-10 text-center text-white/60">لا يوجد بيانات.</div>
          @endforelse
        </div>

        {{-- Table --}}
        <div id="membersTable-lastSeen" class="hidden 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">User</th>
                <th class="text-right py-2 px-3">ID</th>
                <th class="text-right py-2 px-3">Last Seen</th>
                <th class="text-right py-2 px-3">Visits (14)</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @forelse(($membersDeep['last_seen'] ?? collect()) as $r)
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white font-bold">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</td>
                  <td class="py-3 px-3 text-white/70">{{ $r->user_id ?? '—' }}</td>
                  <td class="py-3 px-3 text-white/70">{{ $r->last_seen ?? '—' }}</td>
                  <td class="py-3 px-3 text-cyan-200 font-extrabold">{{ number_format((int)($r->visits_14 ?? 0)) }}</td>
                </tr>
              @empty
                <tr><td colspan="4" class="py-8 text-center text-white/60">لا يوجد بيانات.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- Absences Top 30 --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 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">Top 12</div>
        </div>

        {{-- Cards --}}
        <div id="membersCards-absences" class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @forelse(($membersDeep['absence_top30'] ?? collect()) as $r)
            <div class="rounded-3xl border border-rose-400/15 bg-rose-500/5 p-4">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[12px] text-white/70">عضو</div>
                  <div class="text-[14px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                  <div class="mt-1 text-[11px] text-white/55">ID: {{ $r->user_id ?? '—' }}</div>
                </div>
                <div class="shrink-0 text-left">
                  <div class="text-[11px] px-2 py-1 rounded-full bg-rose-500/10 border border-rose-400/20 text-rose-200">
                    غيابات: {{ number_format((int)($r->c ?? 0)) }}
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-3 py-10 text-center text-white/60">لا يوجد بيانات.</div>
          @endforelse
        </div>

        {{-- Table --}}
        <div id="membersTable-absences" class="hidden 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">User</th>
                <th class="text-right py-2 px-3">ID</th>
                <th class="text-right py-2 px-3">Absences</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @forelse(($membersDeep['absence_top30'] ?? collect()) as $r)
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white font-bold">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</td>
                  <td class="py-3 px-3 text-white/70">{{ $r->user_id ?? '—' }}</td>
                  <td class="py-3 px-3 text-rose-200 font-extrabold">{{ number_format((int)($r->c ?? 0)) }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="py-8 text-center text-white/60">لا يوجد بيانات.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- Evaluations WoW --}}
      @php $ev = $membersDeep['eval'] ?? []; @endphp
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-emerald-200">التقييمات — Week over Week</div>
          <div class="text-[11px] text-white/60">متوسط عام + أفضل تحسّن/تراجع + شذوذ</div>
        </div>

        <div class="p-4 grid gap-3 sm:grid-cols-3">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">متوسط الأسبوع الحالي</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format((float)($ev['overall_avg_current'] ?? 0), 2) }}</div>
          </div>
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">متوسط الأسبوع السابق</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format((float)($ev['overall_avg_prev'] ?? 0), 2) }}</div>
          </div>
          @php
            $chg = (float)($ev['overall_change_pct'] ?? 0);
            $chgTone = $chg >= 0 ? 'emerald' : 'rose';
          @endphp
          <div class="rounded-3xl border border-{{ $chgTone }}-400/15 bg-{{ $chgTone }}-500/5 p-4">
            <div class="text-[11px] text-white/60">نسبة التغيّر</div>
            <div class="mt-1 text-2xl font-extrabold text-{{ $chgTone }}-200">{{ $chg }}%</div>
          </div>
        </div>

        <div class="p-4 grid gap-4 lg:grid-cols-3">
          {{-- Improvers --}}
          <div class="rounded-3xl border border-emerald-400/15 bg-emerald-500/5 overflow-hidden">
            <div class="px-4 py-3 border-b border-white/10">
              <div class="font-extrabold text-emerald-200 text-sm">أعلى تحسّن</div>
              <div class="text-[11px] text-white/60">Top 10</div>
            </div>
            <div class="p-3 space-y-2">
              @forelse(($ev['top_improvers'] ?? collect()) 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="font-extrabold text-white text-[13px] truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                      <div class="text-[11px] text-white/55">cur: {{ $r->cur_avg ?? '—' }} | prev: {{ $r->prev_avg ?? '—' }}</div>
                    </div>
                    <div class="text-[11px] px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
                      +{{ $r->change_pct ?? '—' }}%
                    </div>
                  </div>
                </div>
              @empty
                <div class="py-6 text-center text-white/60 text-sm">لا يوجد بيانات.</div>
              @endforelse
            </div>
          </div>

          {{-- Decliners --}}
          <div class="rounded-3xl border border-rose-400/15 bg-rose-500/5 overflow-hidden">
            <div class="px-4 py-3 border-b border-white/10">
              <div class="font-extrabold text-rose-200 text-sm">أعلى تراجع</div>
              <div class="text-[11px] text-white/60">Top 10</div>
            </div>
            <div class="p-3 space-y-2">
              @forelse(($ev['top_decliners'] ?? collect()) 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="font-extrabold text-white text-[13px] truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                      <div class="text-[11px] text-white/55">cur: {{ $r->cur_avg ?? '—' }} | prev: {{ $r->prev_avg ?? '—' }}</div>
                    </div>
                    <div class="text-[11px] px-2 py-1 rounded-full bg-rose-500/10 border border-rose-400/20 text-rose-200">
                      {{ $r->change_pct ?? '—' }}%
                    </div>
                  </div>
                </div>
              @empty
                <div class="py-6 text-center text-white/60 text-sm">لا يوجد بيانات.</div>
              @endforelse
            </div>
          </div>

          {{-- Anomalies --}}
          <div class="rounded-3xl border border-amber-400/15 bg-amber-500/5 overflow-hidden">
            <div class="px-4 py-3 border-b border-white/10">
              <div class="font-extrabold text-amber-200 text-sm">انحرافات شاذة</div>
              <div class="text-[11px] text-white/60">(|change| >= 40%)</div>
            </div>
            <div class="p-3 space-y-2">
              @forelse(($ev['anomalies'] ?? collect()) 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="font-extrabold text-white text-[13px] truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                      <div class="text-[11px] text-white/55">cur: {{ $r->cur_avg ?? '—' }} | prev: {{ $r->prev_avg ?? '—' }}</div>
                    </div>
                    <div class="text-[11px] px-2 py-1 rounded-full bg-amber-500/10 border border-amber-400/20 text-amber-200">
                      {{ $r->change_pct ?? '—' }}%
                    </div>
                  </div>
                </div>
              @empty
                <div class="py-6 text-center text-white/60 text-sm">لا يوجد بيانات.</div>
              @endforelse
            </div>
          </div>
        </div>
      </div>

    </div>

    {{-- ========================= PROMISSION (TABLE-BASED GOALS) ========================= --}}
    <div id="tab-promission" class="tab-panel hidden space-y-4">

      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-fuchsia-200">ProMission Goals</div>
          <div class="text-[11px] text-white/60">ملخص + أهداف عالقة + توقع التأخر + أعلى مُكلّفين (إن وجد)</div>
        </div>

        <div class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">أهداف مفتوحة</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format((int)($promission['open'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-emerald-400/15 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-white/60">مكتملة</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-200">{{ number_format((int)($promission['completed'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-rose-400/15 bg-rose-500/5 p-4">
            <div class="text-[11px] text-white/60">متأخرة</div>
            <div class="mt-1 text-2xl font-extrabold text-rose-200">{{ number_format((int)($promission['late'] ?? 0)) }}</div>
          </div>
          <div class="rounded-3xl border border-amber-400/15 bg-amber-500/5 p-4">
            <div class="text-[11px] text-white/60">نسبة الإكمال</div>
            <div class="mt-1 text-2xl font-extrabold text-amber-200">{{ (float)($promission['completion_rate'] ?? 0) }}%</div>
          </div>
        </div>
      </div>

      <div class="grid gap-4 lg:grid-cols-2">
        {{-- Stuck --}}
        <div class="rounded-3xl border border-white/10 bg-black/25 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">لم تُحدّث منذ 7 أيام + progress < 80%</div>
          </div>

          <div class="p-4 space-y-2">
            @forelse(($promission['stuck'] ?? collect()) as $g)
              <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="font-extrabold text-white text-[13px] truncate">{{ $g->title ?? ('#'.$g->id) }}</div>
                    <div class="text-[11px] text-white/55">آخر تحديث: {{ $g->updated_at ?? '—' }}</div>
                  </div>
                  <div class="text-[11px] px-2 py-1 rounded-full bg-amber-500/10 border border-amber-400/20 text-amber-200">
                    {{ number_format((float)($g->progress_percent ?? 0), 1) }}%
                  </div>
                </div>
              </div>
            @empty
              <div class="py-8 text-center text-white/60">لا يوجد أهداف عالقة.</div>
            @endforelse
          </div>
        </div>

        {{-- Forecast Bad --}}
        <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
          <div class="px-5 py-4 border-b border-white/10">
            <div class="text-sm font-extrabold text-rose-200">توقع تأخر قريب</div>
            <div class="text-[11px] text-white/60">time% مقابل progress% (gap)</div>
          </div>

          <div class="p-4 space-y-2">
            @forelse(($promission['forecast_bad'] ?? collect()) as $g)
              @php
                $gap = isset($g->risk_gap) ? (float)$g->risk_gap : ((float)($g->time_percent ?? 0) - (float)($g->progress_percent ?? 0));
              @endphp
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <div class="font-extrabold text-white text-[13px] truncate">{{ $g->title ?? ('#'.$g->id) }}</div>
                    <div class="mt-1 text-[11px] text-white/55">
                      progress: {{ number_format((float)($g->progress_percent ?? 0), 1) }}%
                      — time: {{ number_format((float)($g->time_percent ?? 0), 1) }}%
                    </div>
                    <div class="mt-1 text-[11px] text-white/55">
                      {{ $g->start_date ?? '—' }} → {{ $g->end_date ?? '—' }}
                    </div>
                  </div>
                  <div class="shrink-0 text-left">
                    <div class="text-[11px] px-2 py-1 rounded-full bg-rose-500/10 border border-rose-400/20 text-rose-200">
                      gap: {{ number_format($gap, 1) }}%
                    </div>
                  </div>
                </div>
              </div>
            @empty
              <div class="py-8 text-center text-white/60">لا يوجد توقعات خطر حالياً.</div>
            @endforelse
          </div>
        </div>
      </div>

      {{-- Top Assignees (optional) --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 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-cyan-200">أعلى مُكلّفين بالأهداف</div>
            <div class="text-[11px] text-white/60">يظهر فقط إذا جدول goal_assignments موجود</div>
          </div>
          <button type="button" onclick="toggleProAssigneesView()"
            class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
            <i class="fa-solid fa-table ms-2 text-[11px]"></i> تبديل العرض
          </button>
        </div>

        {{-- Cards --}}
        <div id="proAssigneesCards" class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @forelse(($promission['top_assignees'] ?? collect()) as $r)
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[12px] text-white/70">عضو</div>
                  <div class="text-[14px] font-extrabold text-white truncate">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</div>
                  <div class="mt-1 text-[11px] text-white/55">ID: {{ $r->user_id ?? '—' }}</div>
                </div>
                <div class="shrink-0 text-left space-y-2">
                  <div class="text-[11px] px-2 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200">
                    tasks: {{ number_format((int)($r->c ?? 0)) }}
                  </div>
                  <div class="text-[11px] px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
                    done: {{ number_format((float)($r->done_pct ?? 0), 1) }}%
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-3 py-10 text-center text-white/60">لا يوجد بيانات (أو الجدول غير موجود).</div>
          @endforelse
        </div>

        {{-- Table --}}
        <div id="proAssigneesTable" class="hidden 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">User</th>
                <th class="text-right py-2 px-3">ID</th>
                <th class="text-right py-2 px-3">Tasks</th>
                <th class="text-right py-2 px-3">Done%</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @forelse(($promission['top_assignees'] ?? collect()) as $r)
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white font-bold">{{ $r->name ?? ('#'.($r->user_id ?? '—')) }}</td>
                  <td class="py-3 px-3 text-white/70">{{ $r->user_id ?? '—' }}</td>
                  <td class="py-3 px-3 text-cyan-200 font-extrabold">{{ number_format((int)($r->c ?? 0)) }}</td>
                  <td class="py-3 px-3 text-emerald-200 font-extrabold">{{ number_format((float)($r->done_pct ?? 0), 1) }}%</td>
                </tr>
              @empty
                <tr><td colspan="4" class="py-8 text-center text-white/60">لا يوجد بيانات.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>

      </div>

    </div>

    {{-- ========================= PROMISSION ALGORITHM (NEW) ========================= --}}
    <div id="tab-promission_algo" class="tab-panel hidden space-y-4">

      {{-- Summary + Goals Progress --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
          <div>
            <div class="text-sm font-extrabold text-cyan-200">ProMission Algorithm</div>
            <div class="text-[11px] text-white/60">
              ساعات (لايف + سهرات + قست) + مقارنة + تحليل ذكي — للفترة {{ $promissionAlgo['from'] ?? $from }} → {{ $promissionAlgo['to'] ?? $to }}
            </div>
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
              Members: {{ number_format((int)($algoTeam['members'] ?? 0)) }}
            </span>
            @if($compareEnabled)
              <span class="text-[11px] px-2 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200">
                مقارنة: {{ $promissionAlgo['compare_from'] }} → {{ $promissionAlgo['compare_to'] }}
              </span>
            @else
              <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                بدون مقارنة
              </span>
            @endif
          </div>
        </div>

        {{-- Team KPIs --}}
        <div class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">إجمالي الساعات</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ $fmtH($algoTeam['total_hours'] ?? 0) }}</div>
            <div class="mt-2 text-[11px] text-white/55">
              هدف: {{ $fmtH($algoGoalsTeam['total_hours'] ?? 0) }}س
              <span class="ms-2 text-[10px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                {{ $pct($algoTeam['total_hours'] ?? 0, $algoGoalsTeam['total_hours'] ?? 0) }}%
              </span>
            </div>
          </div>

          <div class="rounded-3xl border border-cyan-400/15 bg-cyan-500/5 p-4">
            <div class="text-[11px] text-white/60">لايفات (بدون سهرات)</div>
            <div class="mt-1 text-2xl font-extrabold text-cyan-200">{{ $fmtH($algoTeam['live_hours'] ?? 0) }}</div>
            <div class="mt-2 text-[11px] text-white/55">
              هدف: {{ $fmtH($algoGoalsTeam['live_hours'] ?? 0) }}س
              <span class="ms-2 text-[10px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                {{ $pct($algoTeam['live_hours'] ?? 0, $algoGoalsTeam['live_hours'] ?? 0) }}%
              </span>
            </div>
          </div>

          <div class="rounded-3xl border border-fuchsia-400/15 bg-fuchsia-500/5 p-4">
            <div class="text-[11px] text-white/60">سهرات</div>
            <div class="mt-1 text-2xl font-extrabold text-fuchsia-200">{{ $fmtH($algoTeam['sahra_hours'] ?? 0) }}</div>
            <div class="mt-2 text-[11px] text-white/55">
              هدف: {{ $fmtH($algoGoalsTeam['sahra_hours'] ?? 0) }}س
              <span class="ms-2 text-[10px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                {{ $pct($algoTeam['sahra_hours'] ?? 0, $algoGoalsTeam['sahra_hours'] ?? 0) }}%
              </span>
            </div>
          </div>

          <div class="rounded-3xl border border-emerald-400/15 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-white/60">ساعات القست</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-200">{{ $fmtH($algoTeam['guest_hours'] ?? 0) }}</div>
            <div class="mt-2 text-[11px] text-white/55">
              (مرجع: score_records/guest)
            </div>
          </div>

          <div class="rounded-3xl border border-amber-400/15 bg-amber-500/5 p-4">
            <div class="text-[11px] text-white/60">عدد القستات</div>
            <div class="mt-1 text-2xl font-extrabold text-amber-200">{{ number_format((int)($algoTeam['guest_count'] ?? 0)) }}</div>
            <div class="mt-2 text-[11px] text-white/55">
              هدف: {{ number_format((int)($algoGoalsTeam['guest_count'] ?? 0)) }}
              <span class="ms-2 text-[10px] px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-white/70">
                {{ $pct($algoTeam['guest_count'] ?? 0, $algoGoalsTeam['guest_count'] ?? 0) }}%
              </span>
            </div>
          </div>
        </div>

        {{-- Compare deltas --}}
        @if($compareEnabled && $cmp)
          @php
            $dt = $cmp['delta_total'] ?? null;
            $pt = $cmp['pct_total'] ?? null;
            $toneT = $tone($dt);
          @endphp
          <div class="px-4 pb-4">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                  <div class="text-[13px] font-extrabold text-white">مقارنة الفترة السابقة</div>
                  <div class="text-[11px] text-white/60">نفس فريق الأعضاء — حسب compare_mode</div>
                </div>

                <div class="flex flex-wrap items-center gap-2">
                  <span class="text-[11px] px-2 py-1 rounded-full bg-{{ $toneT }}-500/10 border border-{{ $toneT }}-400/20 text-{{ $toneT }}-200">
                    Δ إجمالي: {{ is_null($dt) ? '—' : (($dt>=0?'+':'').$fmtH($dt)) }} س
                    @if(!is_null($pt)) ({{ $pt }}%) @endif
                  </span>
                  <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                    السابق: {{ $fmtH($cmp['total_hours'] ?? 0) }}س
                  </span>
                </div>
              </div>

              <div class="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4 text-[11px]">
                @php
                  $dLive = $cmp['delta_live'] ?? null; $tLive = $tone($dLive);
                  $dSah = $cmp['delta_sahra'] ?? null; $tSah = $tone($dSah);
                  $dGc  = $cmp['delta_guest_count'] ?? null; $tGc = $tone($dGc);
                @endphp
                <div class="rounded-2xl bg-black/25 border border-white/10 p-3 text-white/80">
                  <div class="text-white/60">Δ لايف</div>
                  <div class="mt-1 font-extrabold text-{{ $tLive }}-200">
                    {{ is_null($dLive) ? '—' : (($dLive>=0?'+':'').$fmtH($dLive)) }} س
                    @if(!is_null($cmp['pct_live'] ?? null)) ({{ $cmp['pct_live'] }}%) @endif
                  </div>
                </div>

                <div class="rounded-2xl bg-black/25 border border-white/10 p-3 text-white/80">
                  <div class="text-white/60">Δ سهرات</div>
                  <div class="mt-1 font-extrabold text-{{ $tSah }}-200">
                    {{ is_null($dSah) ? '—' : (($dSah>=0?'+':'').$fmtH($dSah)) }} س
                    @if(!is_null($cmp['pct_sahra'] ?? null)) ({{ $cmp['pct_sahra'] }}%) @endif
                  </div>
                </div>

                <div class="rounded-2xl bg-black/25 border border-white/10 p-3 text-white/80">
                  <div class="text-white/60">Δ ساعات قست</div>
                  @php $dGh = $cmp['delta_guest_hours'] ?? null; $tGh = $tone($dGh); @endphp
                  <div class="mt-1 font-extrabold text-{{ $tGh }}-200">
                    {{ is_null($dGh) ? '—' : (($dGh>=0?'+':'').$fmtH($dGh)) }} س
                  </div>
                  <div class="text-[10px] text-white/45">ملاحظة: delta_guest_hours غير محسوب بالكنترول الحالي (اختياري)</div>
                </div>

                <div class="rounded-2xl bg-black/25 border border-white/10 p-3 text-white/80">
                  <div class="text-white/60">Δ عدد القستات</div>
                  <div class="mt-1 font-extrabold text-{{ $tGc }}-200">
                    {{ is_null($dGc) ? '—' : (($dGc>=0?'+':'').$dGc) }}
                    @if(!is_null($cmp['pct_guest_count'] ?? null)) ({{ $cmp['pct_guest_count'] }}%) @endif
                  </div>
                </div>
              </div>

            </div>
          </div>
        @endif
      </div>

      {{-- AI Tips --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10">
          <div class="text-sm font-extrabold text-emerald-200">تحليل ذكي</div>
          <div class="text-[11px] text-white/60">{{ $algoAi['summary'] ?? '' }}</div>
        </div>
        <div class="p-4 space-y-2">
          @forelse(($algoAi['tips'] ?? []) as $tip)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-[12px] text-white/80">
              <i class="fa-solid fa-wand-magic-sparkles text-emerald-200 ms-2"></i>
              {{ $tip }}
            </div>
          @empty
            <div class="py-8 text-center text-white/60">لا يوجد تحليل حالياً.</div>
          @endforelse
        </div>
      </div>

      {{-- Members Rows --}}
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
          <div>
            <div class="text-sm font-extrabold text-cyan-200">تفصيل الأعضاء (خوارزمية)</div>
            <div class="text-[11px] text-white/60">Mix = (لايف بدون سهرات + قست) | Total = Mix + سهرات</div>
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <button type="button" onclick="setAlgoView('cards')"
              class="algoViewBtn px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
              <i class="fa-solid fa-grid-2 ms-2 text-[11px]"></i> كروت
            </button>
            <button type="button" onclick="setAlgoView('table')"
              class="algoViewBtn px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 text-[11px] hover:bg-white/15">
              <i class="fa-solid fa-table ms-2 text-[11px]"></i> جدول
            </button>
            <span class="text-[11px] px-2 py-1 rounded-full bg-black/30 border border-white/10 text-white/70">
              هدف العضو: Mix {{ $fmtH($algoGoalsMember['mix_hours'] ?? 0) }}س + سهرات {{ $fmtH($algoGoalsMember['sahra_hours'] ?? 0) }}س
            </span>
          </div>
        </div>

        {{-- Cards --}}
        <div id="algoCards" class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @forelse($algoRows as $r)
            @php
              $hitMix = $hitBadge($r['hit_member_mix'] ?? null);
              $hitSah = $hitBadge($r['hit_member_sahra'] ?? null);

              $delta = $r['delta_total'] ?? null;
              $toneD = $tone($delta);
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/20 text-cyan-100 grid place-items-center">
                      <i class="fa-solid fa-user-astronaut text-sm"></i>
                    </div>
                    <div class="min-w-0">
                      <div class="text-[14px] font-extrabold text-white truncate">{{ $r['name'] ?? ('#'.($r['id'] ?? '—')) }}</div>
                      <div class="text-[11px] text-white/55">
                        ID: {{ $r['id'] ?? '—' }}
                        @if(!empty($r['username']))
                          <span class="ms-2 px-2 py-0.5 rounded-full bg-black/30 border border-white/10 text-white/70">
                            {{ $r['username'] }}
                          </span>
                        @endif
                      </div>
                    </div>
                  </div>

                  <div class="mt-3 grid grid-cols-3 gap-2 text-[11px]">
                    <div class="rounded-2xl bg-black/25 border border-white/10 p-2">
                      <div class="text-white/55">لايف</div>
                      <div class="font-extrabold text-cyan-200">{{ $fmtH($r['live_non_sahra_hours'] ?? 0) }}س</div>
                    </div>
                    <div class="rounded-2xl bg-black/25 border border-white/10 p-2">
                      <div class="text-white/55">قست</div>
                      <div class="font-extrabold text-emerald-200">{{ $fmtH($r['guest_hours'] ?? 0) }}س</div>
                      <div class="text-[10px] text-white/45">({{ (int)($r['guest_count'] ?? 0) }} قست)</div>
                    </div>
                    <div class="rounded-2xl bg-black/25 border border-white/10 p-2">
                      <div class="text-white/55">سهرات</div>
                      <div class="font-extrabold text-fuchsia-200">{{ $fmtH($r['sahra_hours'] ?? 0) }}س</div>
                    </div>
                  </div>

                  <div class="mt-3 flex flex-wrap items-center gap-2">
                    <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/75">
                      Mix: <span class="font-extrabold text-white">{{ $fmtH($r['mix_hours'] ?? 0) }}</span>س
                    </span>
                    <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/75">
                      Total: <span class="font-extrabold text-white">{{ $fmtH($r['total_hours'] ?? 0) }}</span>س
                    </span>

                    <span class="text-[11px] px-2 py-1 rounded-full border {{ $hitMix['cls'] }}">
                      هدف Mix: {{ $hitMix['txt'] }}
                    </span>
                    <span class="text-[11px] px-2 py-1 rounded-full border {{ $hitSah['cls'] }}">
                      هدف سهرات: {{ $hitSah['txt'] }}
                    </span>

                    @if($compareEnabled)
                      <span class="text-[11px] px-2 py-1 rounded-full bg-{{ $toneD }}-500/10 border border-{{ $toneD }}-400/20 text-{{ $toneD }}-200">
                        Δ Total: {{ is_null($delta) ? '—' : (($delta>=0?'+':'').$fmtH($delta)) }}س
                        @if(!is_null($r['pct_total'] ?? null)) ({{ $r['pct_total'] }}%) @endif
                      </span>
                    @endif
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-3 py-10 text-center text-white/60">لا يوجد بيانات للفترة.</div>
          @endforelse
        </div>

        {{-- Table --}}
        <div id="algoTable" class="hidden 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>
                <th class="text-right py-2 px-3">Mix</th>
                <th class="text-right py-2 px-3">Total</th>
                <th class="text-right py-2 px-3">هدف Mix</th>
                <th class="text-right py-2 px-3">هدف سهرات</th>
                @if($compareEnabled)
                  <th class="text-right py-2 px-3">Δ Total</th>
                @endif
              </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
              @forelse($algoRows as $r)
                @php
                  $hitMix = $hitBadge($r['hit_member_mix'] ?? null);
                  $hitSah = $hitBadge($r['hit_member_sahra'] ?? null);
                  $delta = $r['delta_total'] ?? null;
                  $toneD = $tone($delta);
                @endphp
                <tr class="hover:bg-white/5">
                  <td class="py-3 px-3 text-white font-bold">
                    {{ $r['name'] ?? ('#'.($r['id'] ?? '—')) }}
                    <div class="text-[10px] text-white/45">ID: {{ $r['id'] ?? '—' }} @if(!empty($r['username'])) — {{ $r['username'] }} @endif</div>
                  </td>
                  <td class="py-3 px-3 text-cyan-200 font-extrabold">{{ $fmtH($r['live_non_sahra_hours'] ?? 0) }}</td>
                  <td class="py-3 px-3 text-emerald-200 font-extrabold">{{ $fmtH($r['guest_hours'] ?? 0) }}</td>
                  <td class="py-3 px-3 text-white/70">{{ number_format((int)($r['guest_count'] ?? 0)) }}</td>
                  <td class="py-3 px-3 text-fuchsia-200 font-extrabold">{{ $fmtH($r['sahra_hours'] ?? 0) }}</td>
                  <td class="py-3 px-3 text-white font-extrabold">{{ $fmtH($r['mix_hours'] ?? 0) }}</td>
                  <td class="py-3 px-3 text-white font-extrabold">{{ $fmtH($r['total_hours'] ?? 0) }}</td>
                  <td class="py-3 px-3">
                    <span class="text-[10px] px-2 py-1 rounded-full border {{ $hitMix['cls'] }}">{{ $hitMix['txt'] }}</span>
                  </td>
                  <td class="py-3 px-3">
                    <span class="text-[10px] px-2 py-1 rounded-full border {{ $hitSah['cls'] }}">{{ $hitSah['txt'] }}</span>
                  </td>
                  @if($compareEnabled)
                    <td class="py-3 px-3">
                      <span class="text-[10px] px-2 py-1 rounded-full bg-{{ $toneD }}-500/10 border border-{{ $toneD }}-400/20 text-{{ $toneD }}-200">
                        {{ is_null($delta) ? '—' : (($delta>=0?'+':'').$fmtH($delta)) }}
                        @if(!is_null($r['pct_total'] ?? null)) ({{ $r['pct_total'] }}%) @endif
                      </span>
                    </td>
                  @endif
                </tr>
              @empty
                <tr><td colspan="{{ $compareEnabled ? 10 : 9 }}" class="py-8 text-center text-white/60">لا يوجد بيانات.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>

      </div>

    </div>

  </div>
</div>

<script>
(function(){
  const btns = Array.from(document.querySelectorAll('[data-tab-btn]'));
  const panels = {
    audit: document.getElementById('tab-audit'),
    tracking: document.getElementById('tab-tracking'),
    jobs: document.getElementById('tab-jobs'),
    failed: document.getElementById('tab-failed'),
    members: document.getElementById('tab-members'),
    promission: document.getElementById('tab-promission'),
    promission_algo: document.getElementById('tab-promission_algo'),
  };

  function setActive(name){
    Object.entries(panels).forEach(([k, el]) => {
      if(!el) return;
      el.classList.toggle('hidden', k !== name);
    });

    btns.forEach(b=>{
      const n = b.getAttribute('data-tab-btn');
      const on = (n === name);
      b.classList.toggle('bg-cyan-500/10', on);
      b.classList.toggle('border-cyan-400/35', on);
      b.classList.toggle('ring-1', on);
      b.classList.toggle('ring-cyan-400/25', on);
      b.classList.toggle('bg-white/5', !on);
      b.classList.toggle('border-white/10', !on);
    });
  }

  btns.forEach(b => b.addEventListener('click', () => setActive(b.getAttribute('data-tab-btn'))));
  setActive('audit');

  // Members view default
  window.__membersView = 'cards';
  window.setMembersView = function(mode){
    window.__membersView = mode;
    const groups = [
      ['membersCards-topVisitors','membersTable-topVisitors'],
      ['membersCards-lastSeen','membersTable-lastSeen'],
      ['membersCards-absences','membersTable-absences'],
    ];
    groups.forEach(([cardsId, tableId])=>{
      const c = document.getElementById(cardsId);
      const t = document.getElementById(tableId);
      if(!c || !t) return;
      if(mode === 'table'){
        c.classList.add('hidden');
        t.classList.remove('hidden');
      }else{
        t.classList.add('hidden');
        c.classList.remove('hidden');
      }
    });
  };
  setMembersView('cards');

  // ProMission assignees toggle
  window.toggleProAssigneesView = function(){
    const cards = document.getElementById('proAssigneesCards');
    const table = document.getElementById('proAssigneesTable');
    if(!cards || !table) return;
    const tableOn = !table.classList.contains('hidden');
    if(tableOn){
      table.classList.add('hidden');
      cards.classList.remove('hidden');
    }else{
      cards.classList.add('hidden');
      table.classList.remove('hidden');
    }
  };

  // Algo view toggle
  window.__algoView = 'cards';
  window.setAlgoView = function(mode){
    window.__algoView = mode;
    const cards = document.getElementById('algoCards');
    const table = document.getElementById('algoTable');
    if(!cards || !table) return;
    if(mode === 'table'){
      cards.classList.add('hidden');
      table.classList.remove('hidden');
    }else{
      table.classList.add('hidden');
      cards.classList.remove('hidden');
    }
  };
  setAlgoView('cards');
})();
</script>
@endsection