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

@section('title', 'ProActive — مركز القيادة')
@section('page-title', 'ProActive Command Center')

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

if (!function_exists('safe_route')) {
    function safe_route(string $name, array $params = [], bool $absolute = true, string $fallback = '#'): string
    {
        try {
            return Route::has($name) ? route($name, $params, $absolute) : $fallback;
        } catch (\Throwable $e) {
            return $fallback;
        }
    }
}
@endphp
@php
  // Helpers
  $qs = request()->query();
  $q  = fn($k,$d=null) => request()->get($k,$d);

  $today           = $today ?? now()->toDateString();
  $todayTotal      = (int)($todayTotal ?? 0);
  $todayActiveNow  = (int)($todayActiveNow ?? 0);
  $lateCount       = (int)($lateCount ?? 0);
  $stuckCount      = (int)($stuckCount ?? 0);
  $todayList       = $todayList ?? collect();

  $proEscalationsDue = (int)($proEscalationsDue ?? ($lateCount + $stuckCount));
  $proConflictsCount = (int)($proConflictsCount ?? 0);

  $view = (string)($view ?? $q('view','table'));
  if(!in_array($view,['table','cards'],true)) $view = 'table';

  // روابط (بـsafe_route عندك)
  $rCommand    = safe_route('superadmin.proactive.command', [], true, url()->current());
  $rCommandData= safe_route('superadmin.proactive.command.data', [], true, '#');
  $rConflicts  = safe_route('superadmin.proactive.conflicts', [], true, '#');
  $rEscalations= safe_route('superadmin.proactive.escalations', [], true, '#');
  $rProofs     = safe_route('superadmin.proactive.proofs', [], true, '#');
  $rDecisions  = safe_route('superadmin.proactive.decisions', [], true, '#');
  $rCompliance = safe_route('superadmin.proactive.compliance', [], true, '#');
  $rTemplates  = safe_route('superadmin.proactive.templates', [], true, '#');
  $rRules      = safe_route('superadmin.proactive.rules', [], true, '#');

  // Badge style helper
  $chip = fn($cls) => "px-2.5 py-1 rounded-xl border text-[11px] font-extrabold $cls";
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl"
     x-data="proactiveCommandCenter()"
     x-init="init('{{ $today }}','{{ $rCommandData }}')">

  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

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

      <div class="p-5 sm:p-6 lg:p-7 flex flex-col gap-5">

        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div class="space-y-1">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
              <i class="fa-solid fa-bolt text-emerald-200"></i>
              <span class="text-[12px]">ProActive • القيادة العليا</span>
            </div>

            <h1 class="text-xl sm:text-2xl lg:text-3xl font-black text-white tracking-tight">
              مركز القيادة ProActive
              <span class="text-white/60 font-semibold text-sm sm:text-base">— Command Center</span>
            </h1>

            <p class="text-white/70 text-sm sm:text-[15px] leading-relaxed max-w-3xl">
              لوحة مراقبة فورية: <span class="text-white/85 font-bold">المواعيد</span> •
              <span class="text-white/85 font-bold">التعارضات</span> •
              <span class="text-white/85 font-bold">التصعيدات</span> •
              <span class="text-white/85 font-bold">الإثباتات</span>.
              <span class="text-white/55">الهدف: ما في ولا فعالية تضيع أو تتأخر بدون قرار.</span>
            </p>

            <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
              <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}">
                <i class="fa-regular fa-calendar ml-1"></i> اليوم: {{ $today }}
              </span>

              @if($proEscalationsDue > 0)
                <span class="{{ $chip('border-rose-400/25 bg-rose-500/15 text-rose-100') }}">
                  <i class="fa-solid fa-triangle-exclamation ml-1"></i> تصعيدات: {{ $proEscalationsDue }}
                </span>
              @endif

              @if($proConflictsCount > 0)
                <span class="{{ $chip('border-amber-400/25 bg-amber-500/15 text-amber-100') }}">
                  <i class="fa-solid fa-link-slash ml-1"></i> تعارضات: {{ $proConflictsCount }}
                </span>
              @endif

              <span class="{{ $chip('border-cyan-400/25 bg-cyan-500/10 text-cyan-100') }}">
                <i class="fa-solid fa-rotate ml-1"></i> تحديث مباشر (AJAX)
              </span>
            </div>
          </div>

          {{-- VIEW TOGGLES + QUICK LINKS --}}
          <div class="flex flex-col sm:flex-row sm:items-center gap-2">
            <div class="flex items-center gap-2">
              <a href="{{ $rCommand }}?{{ http_build_query(array_merge($qs, ['view'=>'table'])) }}"
                 class="px-3 py-2 rounded-2xl text-sm font-semibold border {{ $view==='table' ? 'border-emerald-400/40 bg-emerald-500/15 text-emerald-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
                <i class="fa-solid fa-table-list ml-1"></i> جدول
              </a>

              <a href="{{ $rCommand }}?{{ http_build_query(array_merge($qs, ['view'=>'cards'])) }}"
                 class="px-3 py-2 rounded-2xl text-sm font-semibold border {{ $view==='cards' ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-100' : 'border-white/10 bg-white/5 text-white/80 hover:text-white hover:bg-white/10' }}">
                <i class="fa-solid fa-id-card ml-1"></i> كروت
              </a>
            </div>

            <div class="flex items-center gap-2">
              <a href="{{ $rEscalations }}"
                 class="px-3 py-2 rounded-2xl bg-rose-600/70 hover:bg-rose-600 text-white font-extrabold border border-rose-400/25">
                <i class="fa-solid fa-siren-on ml-1"></i> التصعيدات
              </a>
              <a href="{{ $rConflicts }}"
                 class="px-3 py-2 rounded-2xl bg-amber-600/60 hover:bg-amber-600 text-white font-extrabold border border-amber-400/25">
                <i class="fa-solid fa-link-slash ml-1"></i> التعارضات
              </a>
            </div>
          </div>
        </div>

        {{-- STATS --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
            <div class="text-white/60 text-xs">إجمالي اليوم</div>
            <div class="mt-1 text-white text-2xl font-black">{{ $todayTotal }}</div>
          </div>

          <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-4">
            <div class="text-emerald-100/80 text-xs">نشِطة الآن</div>
            <div class="mt-1 text-emerald-50 text-2xl font-black">{{ $todayActiveNow }}</div>
          </div>

          <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 p-4">
            <div class="text-rose-100/80 text-xs">متأخرة</div>
            <div class="mt-1 text-rose-50 text-2xl font-black">{{ $lateCount }}</div>
          </div>

          <div class="rounded-2xl border border-fuchsia-400/20 bg-fuchsia-500/10 p-4">
            <div class="text-fuchsia-100/80 text-xs">عالقة</div>
            <div class="mt-1 text-fuchsia-50 text-2xl font-black">{{ $stuckCount }}</div>
          </div>

          <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-4">
            <div class="text-amber-100/80 text-xs">تعارضات اليوم</div>
            <div class="mt-1 text-amber-50 text-2xl font-black">{{ $proConflictsCount }}</div>
          </div>

          <div class="rounded-2xl border border-cyan-400/20 bg-cyan-500/10 p-4">
            <div class="text-cyan-100/80 text-xs">تصعيدات واجبة</div>
            <div class="mt-1 text-cyan-50 text-2xl font-black">{{ $proEscalationsDue }}</div>
          </div>
        </div>

        {{-- COMMAND TOOLBAR --}}
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
            <div class="space-y-1">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-radar text-cyan-200"></i>
                <span>أدوات القيادة السريعة</span>
              </div>
              <div class="text-white/60 text-xs">
                افتح التقارير الرسمية: الالتزام • الإثباتات • القرارات • القوالب • القواعد.
              </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
              <a href="{{ $rCompliance }}"
                 class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10">
                <i class="fa-solid fa-shield-halved ml-1 text-emerald-200"></i> الالتزام
              </a>

              <a href="{{ $rProofs }}"
                 class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10">
                <i class="fa-solid fa-file-circle-check ml-1 text-cyan-200"></i> الإثباتات
              </a>

              <a href="{{ $rDecisions }}"
                 class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10">
                <i class="fa-solid fa-gavel ml-1 text-amber-200"></i> القرارات
              </a>

              <a href="{{ $rTemplates }}"
                 class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10">
                <i class="fa-solid fa-clone ml-1 text-fuchsia-200"></i> القوالب
              </a>

              <a href="{{ $rRules }}"
                 class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10">
                <i class="fa-solid fa-gears ml-1 text-emerald-200"></i> القواعد
              </a>

              <button type="button"
                      @click="refresh()"
                      class="px-3 py-2 rounded-2xl bg-emerald-600/70 hover:bg-emerald-600 text-white font-extrabold border border-emerald-400/25">
                <i class="fa-solid fa-rotate ml-1"></i> تحديث الآن
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- LIVE PANELS (AJAX) --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">

      {{-- TODAY LIST (SERVER) --}}
      <div class="lg:col-span-7 rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
        <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
          <div class="text-white font-extrabold flex items-center gap-2">
            <i class="fa-solid fa-calendar-day text-emerald-200"></i>
            <span>مواعيد اليوم</span>
          </div>

          <div class="text-white/55 text-xs">
            عرض سريع — {{ $view==='cards' ? 'كروت' : 'جدول' }}
          </div>
        </div>

        @if($todayList instanceof \Illuminate\Support\Collection && $todayList->isNotEmpty())

          @if($view === 'cards')
            <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
              @foreach($todayList as $e)
                @php
                  $type   = (string)($e->event_type ?? 'regular');
                  $title  = (string)($e->event_title ?? '—');
                  $date   = (string)($e->event_date ?? '');
                  $time   = (string)($e->event_time ?? '');
                  $dur    = (int)($e->duration_minutes ?? 0);
                  $plat   = (string)($e->platform ?? 'other');
                  $leader = (string)($e->leader_name_safe ?? $e->leader_name ?? '-');
                  $status = (string)($e->status ?? 'upcoming');

                  $typeCls = $type==='plus'
                    ? 'border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100'
                    : 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100';

                  $stCls = $status==='active'
                    ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100'
                    : ($status==='finished'
                      ? 'border-slate-400/20 bg-slate-500/10 text-slate-100'
                      : ($status==='cancelled'
                        ? 'border-rose-400/25 bg-rose-500/10 text-rose-100'
                        : 'border-amber-400/25 bg-amber-500/10 text-amber-100'));
                @endphp

                <div class="rounded-3xl border border-white/10 bg-black/20 p-4">
                  <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                      <div class="text-white font-black truncate">{{ $title }}</div>
                      <div class="mt-1 text-white/60 text-xs truncate">
                        {{ $leader }} • {{ $plat }}
                      </div>
                    </div>

                    <div class="flex flex-col items-end gap-1">
                      <span class="{{ $chip($typeCls) }}">{{ $type==='plus' ? 'PLUS' : 'REG' }}</span>
                      <span class="{{ $chip($stCls) }}">{{ strtoupper($status) }}</span>
                    </div>
                  </div>

                  <div class="mt-3 grid grid-cols-3 gap-2 text-xs">
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-2">
                      <div class="text-white/55">الوقت</div>
                      <div class="text-white font-black">{{ $time }}</div>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-2">
                      <div class="text-white/55">المدة</div>
                      <div class="text-white font-black">{{ $dur }} د</div>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-2">
                      <div class="text-white/55">التاريخ</div>
                      <div class="text-white font-black">{{ $date }}</div>
                    </div>
                  </div>

                  @if(!empty($e->notes))
                    <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-3 text-white/75 text-sm leading-relaxed">
                      <i class="fa-regular fa-note-sticky ml-1 text-cyan-200"></i>
                      {{ $e->notes }}
                    </div>
                  @endif
                </div>
              @endforeach
            </div>
          @else
            <div class="overflow-x-auto">
              <table class="min-w-full text-sm">
                <thead class="bg-black/25 text-white/70">
                  <tr>
                    <th class="px-4 py-3 text-right font-bold">الفعالية</th>
                    <th class="px-4 py-3 text-right font-bold">نوع</th>
                    <th class="px-4 py-3 text-right font-bold">الوقت</th>
                    <th class="px-4 py-3 text-right font-bold">المدة</th>
                    <th class="px-4 py-3 text-right font-bold">المنصة</th>
                    <th class="px-4 py-3 text-right font-bold">القائد</th>
                    <th class="px-4 py-3 text-right font-bold">الحالة</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                  @foreach($todayList as $e)
                    @php
                      $type   = (string)($e->event_type ?? 'regular');
                      $status = (string)($e->status ?? 'upcoming');

                      $typeCls = $type==='plus'
                        ? 'border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100'
                        : 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100';

                      $stCls = $status==='active'
                        ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100'
                        : ($status==='finished'
                          ? 'border-slate-400/20 bg-slate-500/10 text-slate-100'
                          : ($status==='cancelled'
                            ? 'border-rose-400/25 bg-rose-500/10 text-rose-100'
                            : 'border-amber-400/25 bg-amber-500/10 text-amber-100'));
                    @endphp
                    <tr class="text-white/85 hover:bg-white/5">
                      <td class="px-4 py-3">
                        <div class="font-extrabold">{{ $e->event_title ?? '—' }}</div>
                        <div class="text-xs text-white/55 truncate max-w-[520px]">
                          {{ $e->event_description ?? '' }}
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <span class="{{ $chip($typeCls) }}">{{ $type==='plus' ? 'PLUS' : 'REG' }}</span>
                      </td>
                      <td class="px-4 py-3 font-black">{{ $e->event_time ?? '—' }}</td>
                      <td class="px-4 py-3 font-black">{{ (int)($e->duration_minutes ?? 0) }} د</td>
                      <td class="px-4 py-3">{{ $e->platform ?? '—' }}</td>
                      <td class="px-4 py-3">{{ $e->leader_name_safe ?? $e->leader_name ?? '—' }}</td>
                      <td class="px-4 py-3">
                        <span class="{{ $chip($stCls) }}">{{ strtoupper((string)$status) }}</span>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @endif

        @else
          <div class="p-5 text-white/70">
            <div class="rounded-3xl border border-white/10 bg-black/20 p-5">
              <div class="text-white font-extrabold flex items-center gap-2">
                <i class="fa-solid fa-circle-info text-cyan-200"></i>
                <span>لا توجد مواعيد لهذا اليوم</span>
              </div>
              <div class="mt-2 text-sm text-white/60">
                إذا عندك بيانات بالجدول، تأكد من <span class="text-white/80 font-bold">event_date</span> و <span class="text-white/80 font-bold">event_time</span>.
              </div>
            </div>
          </div>
        @endif
      </div>

      {{-- LIVE WATCH (AJAX: Late / Stuck / Upcoming) --}}
      <div class="lg:col-span-5 space-y-4">
        {{-- Late --}}
        <div class="rounded-3xl border border-rose-400/20 bg-rose-500/10 overflow-hidden">
          <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
            <div class="text-white font-extrabold flex items-center gap-2">
              <i class="fa-solid fa-triangle-exclamation text-rose-200"></i>
              <span>متأخرة (Live)</span>
            </div>
            <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}" x-text="late.length + ' عنصر'"></span>
          </div>

          <div class="p-4 space-y-2" x-show="loaded" x-cloak>
            <template x-if="late.length === 0">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
                لا يوجد عناصر متأخرة الآن ✅
              </div>
            </template>

            <template x-for="it in late.slice(0,8)" :key="it.id">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="flex items-start justify-between gap-2">
                  <div class="min-w-0">
                    <div class="text-white font-extrabold truncate" x-text="it.event_title || ('#'+it.id)"></div>
                    <div class="text-white/60 text-xs truncate">
                      <span x-text="(it.leader_name_safe || it.leader_name || '-')"></span>
                      <span class="mx-1">•</span>
                      <span x-text="it.platform || 'other'"></span>
                    </div>
                  </div>
                  <span class="{{ $chip('border-rose-400/25 bg-rose-500/15 text-rose-100') }}" x-text="(it.event_time || '--')"></span>
                </div>
              </div>
            </template>

            <a href="{{ $rEscalations }}" class="block text-center px-4 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-bold">
              فتح لوحة التصعيدات
              <i class="fa-solid fa-arrow-left-long mr-1"></i>
            </a>
          </div>

          <div class="p-4" x-show="!loaded">
            <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
              <i class="fa-solid fa-circle-notch fa-spin ml-1"></i> جارِ التحميل...
            </div>
          </div>
        </div>

        {{-- Stuck --}}
        <div class="rounded-3xl border border-fuchsia-400/20 bg-fuchsia-500/10 overflow-hidden">
          <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
            <div class="text-white font-extrabold flex items-center gap-2">
              <i class="fa-solid fa-hourglass-half text-fuchsia-200"></i>
              <span>عالقة (Live)</span>
            </div>
            <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}" x-text="stuck.length + ' عنصر'"></span>
          </div>

          <div class="p-4 space-y-2" x-show="loaded" x-cloak>
            <template x-if="stuck.length === 0">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
                لا يوجد عناصر عالقة ✅
              </div>
            </template>

            <template x-for="it in stuck.slice(0,8)" :key="it.id">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="flex items-start justify-between gap-2">
                  <div class="min-w-0">
                    <div class="text-white font-extrabold truncate" x-text="it.event_title || ('#'+it.id)"></div>
                    <div class="text-white/60 text-xs truncate">
                      <span x-text="(it.leader_name_safe || it.leader_name || '-')"></span>
                      <span class="mx-1">•</span>
                      <span x-text="it.platform || 'other'"></span>
                    </div>
                  </div>
                  <span class="{{ $chip('border-fuchsia-400/25 bg-fuchsia-500/15 text-fuchsia-100') }}" x-text="(it.started_at ? 'بدأت' : '--')"></span>
                </div>
              </div>
            </template>

            <a href="{{ $rEscalations }}" class="block text-center px-4 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-bold">
              فتح لوحة التصعيدات
              <i class="fa-solid fa-arrow-left-long mr-1"></i>
            </a>
          </div>

          <div class="p-4" x-show="!loaded">
            <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
              <i class="fa-solid fa-circle-notch fa-spin ml-1"></i> جارِ التحميل...
            </div>
          </div>
        </div>

        {{-- Upcoming (Preview) --}}
        <div class="rounded-3xl border border-cyan-400/20 bg-cyan-500/10 overflow-hidden">
          <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
            <div class="text-white font-extrabold flex items-center gap-2">
              <i class="fa-regular fa-clock text-cyan-200"></i>
              <span>قادم (Live)</span>
            </div>
            <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}" x-text="upcoming.length + ' عنصر'"></span>
          </div>

          <div class="p-4 space-y-2" x-show="loaded" x-cloak>
            <template x-if="upcoming.length === 0">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
                لا يوجد عناصر قادمة حالياً.
              </div>
            </template>

            <template x-for="it in upcoming.slice(0,8)" :key="it.id">
              <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                <div class="flex items-start justify-between gap-2">
                  <div class="min-w-0">
                    <div class="text-white font-extrabold truncate" x-text="it.event_title || ('#'+it.id)"></div>
                    <div class="text-white/60 text-xs truncate">
                      <span x-text="(it.leader_name_safe || it.leader_name || '-')"></span>
                      <span class="mx-1">•</span>
                      <span x-text="it.platform || 'other'"></span>
                    </div>
                  </div>
                  <span class="{{ $chip('border-cyan-400/25 bg-cyan-500/15 text-cyan-100') }}" x-text="(it.event_time || '--')"></span>
                </div>
              </div>
            </template>

            <a href="{{ $rCompliance }}" class="block text-center px-4 py-2 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-bold">
              فتح لوحة الالتزام
              <i class="fa-solid fa-arrow-left-long mr-1"></i>
            </a>
          </div>

          <div class="p-4" x-show="!loaded">
            <div class="rounded-2xl border border-white/10 bg-black/20 p-3 text-white/70 text-sm">
              <i class="fa-solid fa-circle-notch fa-spin ml-1"></i> جارِ التحميل...
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

{{-- ✅ JavaScript (AJAX Live) --}}
<script>
  function proactiveCommandCenter(){
    return {
      date: '',
      endpoint: '',
      loaded: false,

      late: [],
      stuck: [],
      upcoming: [],

      timer: null,

      init(date, endpoint){
        this.date = date;
        this.endpoint = endpoint;

        // أول تحميل
        this.refresh();

        // تحديث دوري خفيف (كل 45 ثانية)
        this.timer = setInterval(() => this.refresh(), 45000);

        // تنظيف عند مغادرة الصفحة
        window.addEventListener('beforeunload', () => {
          if(this.timer) clearInterval(this.timer);
        });
      },

      async refresh(){
        if(!this.endpoint || this.endpoint === '#') return;

        try{
          const url = new URL(this.endpoint, window.location.origin);
          url.searchParams.set('date', this.date);

          const res = await fetch(url.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
          });

          if(!res.ok) throw new Error('bad_response');
          const data = await res.json();

          this.late = Array.isArray(data.late) ? data.late : [];
          this.stuck = Array.isArray(data.stuck) ? data.stuck : [];
          this.upcoming = Array.isArray(data.upcoming) ? data.upcoming : [];

          this.loaded = true;
        }catch(e){
          // لا تكسر الصفحة
          this.loaded = true;
        }
      }
    }
  }
</script>
@endsection