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

@section('title','ProActive — مراقبة المواعيد والمدة')
@section('page-title','⏱️ مراقبة مواعيد ProActive والمدة')

@section('content')
@php
    $filter       = $filter ?? [];
    $tz           = $tz ?? config('app.timezone','Asia/Jerusalem');
    $reportStats  = $reportStats ?? collect();

    $initialStep  = (int) request('step', 1);
    $initialStep  = max(1, min(4, $initialStep));

    $hasFilters   = !empty(array_filter($filter ?? [], fn($v) => !is_null($v) && $v !== ''));

    $pageItems = ($rows instanceof \Illuminate\Pagination\AbstractPaginator)
        ? $rows->getCollection()
        : collect($rows);

    $withReports = $pageItems->filter(function($it) use ($reportStats){
        $rep = $reportStats->get($it->id);
        return (int)($rep->reports_count ?? 0) > 0;
    })->count();

    $coverage = $pageItems->count() > 0 ? (int) round(($withReports / $pageItems->count()) * 100) : 0;

    $longestItem = $pageItems->sortByDesc(function($it){
        return (float)($it->runtime_minutes ?? 0);
    })->first();

    $topLeader = $pageItems
        ->filter(fn($it) => !empty($it->leader_name))
        ->groupBy('leader_name')
        ->map(fn($g) => $g->count())
        ->sortDesc()
        ->take(1)
        ->map(fn($cnt, $name) => ['name'=>$name,'count'=>$cnt])
        ->first();

@endphp

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

    {{-- ✅ PROGRESS STEPPER / WIZARD --}}
    <div id="wizardTop" class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-2xl overflow-hidden">
      <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between gap-3">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
            <i class="fa-regular fa-clock"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Wizard</div>
            <div class="font-extrabold text-white text-sm">مراقبة المواعيد — خطوة بخطوة</div>
          </div>
        </div>

        <div class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full" id="wizLabel">
          0/4 مكتمل
        </div>
      </div>

      <div class="px-4 sm:px-6 py-4">
        <div class="h-2 rounded-full bg-white/10 overflow-hidden">
          <div id="wizBar" class="h-full rounded-full bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200" style="width:0%"></div>
        </div>

        <div class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-3" id="wizSteps">
          <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                  data-step="1" onclick="setWizardStep(1)">
            <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">1</span>
            <div class="text-right min-w-0">
              <div class="font-extrabold truncate">لوحة المراقبة</div>
              <div class="text-[11px] text-white/50" data-status>قادم</div>
            </div>
          </button>

          <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                  data-step="2" onclick="setWizardStep(2)">
            <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">2</span>
            <div class="text-right min-w-0">
              <div class="font-extrabold truncate">الفلاتر الذكية</div>
              <div class="text-[11px] text-white/50" data-status>قادم</div>
            </div>
          </button>

          <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                  data-step="3" onclick="setWizardStep(3)">
            <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">3</span>
            <div class="text-right min-w-0">
              <div class="font-extrabold truncate">النتائج والتقارير</div>
              <div class="text-[11px] text-white/50" data-status>قادم</div>
            </div>
          </button>

          <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                  data-step="4" onclick="setWizardStep(4)">
            <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">4</span>
            <div class="text-right min-w-0">
              <div class="font-extrabold truncate">قراءة سريعة</div>
              <div class="text-[11px] text-white/50" data-status>قادم</div>
            </div>
          </button>
        </div>

        <div class="mt-3 text-[11px] text-white/50" id="wizHint">ابدأ من لوحة المراقبة.</div>
      </div>
    </div>

    {{-- ✅ SLIDES --}}
    <div class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-2xl overflow-hidden">
      <div dir="ltr" class="overflow-hidden">
        <div id="wizTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(0%);">

          {{-- ===================== SLIDE 1 ===================== --}}
          <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
            <div class="mb-4 rounded-3xl border border-emerald-300/20 bg-emerald-500/10 p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                  <i class="fa-solid fa-gauge-high"></i>
                </div>
                <div class="flex-1">
                  <div class="text-[11px] text-emerald-100/70">شرح الخطوة 1</div>
                  <div class="font-extrabold text-emerald-100">لوحة المراقبة + الإحصائيات السريعة</div>
                  <ul class="mt-2 text-[13px] text-emerald-100/85 space-y-1 list-disc pr-5">
                    <li>هنا تشوف وضع المواعيد بسرعة (إجمالي/نشطة/قادمة/متوسط المدة).</li>
                    <li>الترتيب: الأطول مدة أولًا، ثم الملغاة، ثم القادمة (0 دقيقة).</li>
                    <li>بعدها انتقل للفلاتر لو بدك تدقق على نوع/قائد/فترة زمنية.</li>
                  </ul>
                </div>
              </div>
            </div>

            {{-- HERO (ستايل سقراط) --}}
            <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white shadow-2xl">
              <div class="absolute inset-0 opacity-30 pointer-events-none"
                   style="background-image:
                       radial-gradient(50vmax 50vmax at 120% -10%, rgba(96,165,250,.35) 0, transparent 55%),
                       radial-gradient(40vmax 40vmax at -10% 120%, rgba(52,211,153,.28) 0, transparent 60%);">
              </div>

              <div class="relative p-5 md:p-7 space-y-4">
                <div class="flex flex-wrap items-start justify-between gap-4">
                  <div class="min-w-0">
                    <div class="flex items-center gap-3 mb-1">
                      <div class="grid h-10 w-10 place-items-center rounded-2xl bg-emerald-500/10 ring-1 ring-emerald-300/40">
                        <i class="fa-regular fa-clock text-emerald-300 text-lg"></i>
                      </div>
                      <div>
                        <h1 class="text-lg md:text-2xl font-extrabold">مراقبة مواعيد ProActive — الحالة والمدة</h1>
                        <p class="text-xs md:text-sm text-slate-200/90">
                          هنا تشوف كل مواعيد ProActive (عادي + بلس) مرتّبة من الأطول <b>مدة</b> إلى الأقل،
                          مع حالة كل فعالية، وعدد التقارير المرتبطة بها ومن مين 💡.
                        </p>
                      </div>
                    </div>
                  </div>

                  {{-- كروت إحصائيات سريعة --}}
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] md:text-xs">
                    <div class="rounded-2xl bg-white/10 px-3 py-2 text-center border border-white/10">
                      <div class="text-slate-200/80">إجمالي المواعيد</div>
                      <div class="mt-0.5 text-lg font-extrabold">{{ number_format($stats['total'] ?? 0) }}</div>
                    </div>
                    <div class="rounded-2xl bg-emerald-500/15 px-3 py-2 text-center border border-emerald-300/20">
                      <div class="text-emerald-100/80">نشطة الآن</div>
                      <div class="mt-0.5 text-lg font-extrabold">{{ number_format($stats['active'] ?? 0) }}</div>
                    </div>
                    <div class="rounded-2xl bg-cyan-500/15 px-3 py-2 text-center border border-cyan-300/20">
                      <div class="text-cyan-100/80">قادمة</div>
                      <div class="mt-0.5 text-lg font-extrabold">{{ number_format($stats['upcoming'] ?? 0) }}</div>
                    </div>
                    <div class="rounded-2xl bg-amber-500/15 px-3 py-2 text-center border border-amber-300/20">
                      <div class="text-amber-100/80">متوسط مدة المنتهية</div>
                      <div class="mt-0.5 text-lg font-extrabold">
                        @php
                          $avg = (int)($stats['avg_minutes'] ?? 0);
                          if($avg >= 60){
                              $h = (int) round($avg / 60);
                              echo $h.' س';
                          } else {
                              echo $avg.' د';
                          }
                        @endphp
                      </div>
                    </div>
                  </div>
                </div>

                <p class="text-[11px] md:text-xs text-slate-200/80">
                  * الترتيب كالتالي: أولاً الفعاليات اللي إلها مدة (نشطة/منتهية) من الأطول إلى الأقصر،
                  ثم الملغاة، ثم القادمة (0 دقيقة).
                </p>
              </div>
            </div>

            <div class="mt-5 flex items-center justify-end">
              <button type="button" onclick="wizardNext()"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                             bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                             hover:scale-[1.01] active:scale-100 transition">
                التالي
                <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
              </button>
            </div>
          </section>

          {{-- ===================== SLIDE 2 ===================== --}}
          <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
            <div class="mb-4 rounded-3xl border border-cyan-300/20 bg-cyan-500/10 p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                  <i class="fa-solid fa-filter"></i>
                </div>
                <div class="flex-1">
                  <div class="text-[11px] text-cyan-100/70">شرح الخطوة 2</div>
                  <div class="font-extrabold text-cyan-100">الفلاتر الذكية</div>
                  <ul class="mt-2 text-[13px] text-cyan-100/85 space-y-1 list-disc pr-5">
                    <li>حدّد النوع (عادي/بلس) أو الحالة (نشطة/قادمة/منتهية/ملغاة).</li>
                    <li>استخدم الفترة الزمنية لو بدك تقرير عن أسبوع/شهر محدد.</li>
                    <li>البحث يدعم (عنوان / قائد) عشان توصل بسرعة.</li>
                  </ul>
                </div>
              </div>
            </div>

            {{-- فلاتر (نفس المنطق GET — بس ستايل سقراط) --}}
            <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
              <div class="px-4 py-4 border-b border-white/10 flex items-center justify-between">
                <div class="flex items-center gap-2 text-white/90">
                  <span class="w-9 h-9 rounded-2xl bg-white/5 border border-white/10 grid place-items-center text-cyan-200">
                    <i class="fa-solid fa-sliders"></i>
                  </span>
                  <div>
                    <div class="text-[11px] text-white/60">Controls</div>
                    <div class="font-extrabold text-sm">فلاتر المراقبة</div>
                  </div>
                </div>

                <span class="text-[11px] text-white/60">
                  {{ $hasFilters ? 'يوجد فلاتر مفعّلة' : 'بدون فلاتر' }}
                </span>
              </div>

              <form method="GET" class="p-4 sm:p-5 space-y-3">
                {{-- ✅ حتى بعد تطبيق الفلاتر يرجعك على النتائج --}}
                <input type="hidden" name="step" value="3">

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 text-sm">
                  <div>
                    <label class="text-xs text-white/60">النوع</label>
                    @php $t = $filter['type'] ?? ''; @endphp
                    <select name="type"
                            class="mt-1 w-full rounded-2xl border border-white/15 bg-black/40 text-white px-3 py-2
                                   focus:outline-none focus:ring-2 focus:ring-cyan-500/25">
                      <option value="">الكل</option>
                      <option value="regular" {{ $t==='regular'?'selected':'' }}>عادي</option>
                      <option value="plus"    {{ $t==='plus'?'selected':'' }}>بلس</option>
                    </select>
                  </div>

                  <div>
                    <label class="text-xs text-white/60">الحالة</label>
                    @php $st = $filter['status'] ?? ''; @endphp
                    <select name="status"
                            class="mt-1 w-full rounded-2xl border border-white/15 bg-black/40 text-white px-3 py-2
                                   focus:outline-none focus:ring-2 focus:ring-cyan-500/25">
                      <option value="">الكل</option>
                      <option value="active"    {{ $st==='active'?'selected':'' }}>نشطة</option>
                      <option value="upcoming"  {{ $st==='upcoming'?'selected':'' }}>قادمة</option>
                      <option value="finished"  {{ $st==='finished'?'selected':'' }}>منتهية</option>
                      <option value="cancelled" {{ $st==='cancelled'?'selected':'' }}>ملغاة</option>
                    </select>
                  </div>

                  <div>
                    <label class="text-xs text-white/60">من تاريخ</label>
                    <input type="date" name="from" value="{{ $filter['from'] ?? '' }}"
                           class="mt-1 w-full rounded-2xl border border-white/15 bg-black/40 text-white px-3 py-2
                                  focus:outline-none focus:ring-2 focus:ring-cyan-500/25">
                  </div>

                  <div>
                    <label class="text-xs text-white/60">إلى تاريخ</label>
                    <input type="date" name="to" value="{{ $filter['to'] ?? '' }}"
                           class="mt-1 w-full rounded-2xl border border-white/15 bg-black/40 text-white px-3 py-2
                                  focus:outline-none focus:ring-2 focus:ring-cyan-500/25">
                  </div>

                  <div>
                    <label class="text-xs text-white/60">بحث (عنوان / قائد)</label>
                    <input type="text" name="q" value="{{ $filter['q'] ?? '' }}"
                           class="mt-1 w-full rounded-2xl border border-white/15 bg-black/40 text-white px-3 py-2
                                  focus:outline-none focus:ring-2 focus:ring-cyan-500/25"
                           placeholder="مثال: سهرة الجمعة / اسم القائد">
                  </div>
                </div>

                <div class="flex justify-end gap-2 pt-2 text-xs md:text-sm">
                  <a href="{{ route('superadmin.proactive.sessions.monitor') }}"
                     class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 hover:bg-white/15 transition">
                    تفريغ الفلاتر
                  </a>
                  <button class="px-4 py-2 rounded-2xl bg-gradient-to-r from-cyan-200 via-emerald-200 to-fuchsia-200 text-slate-950 font-extrabold">
                    تطبيق الفلاتر
                  </button>
                </div>
              </form>
            </div>

            <div class="mt-5 flex items-center justify-between">
              <button type="button" onclick="wizardPrev()"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                السابق
              </button>

              <button type="button" onclick="setWizardStep(3)"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                             bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                             hover:scale-[1.01] active:scale-100 transition">
                عرض النتائج
                <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
              </button>
            </div>
          </section>

          {{-- ===================== SLIDE 3 ===================== --}}
          <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
            <div class="mb-4 rounded-3xl border border-fuchsia-300/20 bg-fuchsia-500/10 p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                  <i class="fa-solid fa-table"></i>
                </div>
                <div class="flex-1">
                  <div class="text-[11px] text-fuchsia-100/70">شرح الخطوة 3</div>
                  <div class="font-extrabold text-fuchsia-100">النتائج + التقارير المرتبطة</div>
                  <ul class="mt-2 text-[13px] text-fuchsia-100/85 space-y-1 list-disc pr-5">
                    <li>كل صف = موعد ProActive.</li>
                    <li>الحالة توضّح (نشطة/قادمة/منتهية/ملغاة).</li>
                    <li>“التقارير المرتبطة” يبين كم تقرير ومن مين.</li>
                  </ul>
                </div>
              </div>
            </div>

            @if($rows->count())
              {{-- 💻 Desktop Table --}}
              <div class="hidden md:block rounded-3xl bg-black/30 border border-white/10 overflow-hidden">
                <div class="px-4 py-4 border-b border-white/10 flex items-center justify-between">
                  <h2 class="text-sm font-extrabold text-white">
                    {{ $rows->total() }} موعد ProActive
                  </h2>
                  <span class="text-[11px] text-white/55">
                    مرتّبة من الأطول مدة إلى الأقل، مع عدد التقارير المرتبطة بكل موعد.
                  </span>
                </div>

                <div class="overflow-x-auto">
                  <table class="min-w-full text-xs md:text-sm text-white/80">
                    <thead class="bg-white/5 text-white/70">
                      <tr>
                        <th class="px-3 py-3 text-right font-extrabold">التاريخ / الوقت</th>
                        <th class="px-3 py-3 text-right font-extrabold">العنوان</th>
                        <th class="px-3 py-3 text-right font-extrabold">النوع</th>
                        <th class="px-3 py-3 text-right font-extrabold">المنصّة</th>
                        <th class="px-3 py-3 text-right font-extrabold">القائد</th>
                        <th class="px-3 py-3 text-center font-extrabold">الحالة</th>
                        <th class="px-3 py-3 text-center font-extrabold">المدة</th>
                        <th class="px-3 py-3 text-right font-extrabold">التقارير المرتبطة</th>
                      </tr>
                    </thead>

                    <tbody class="divide-y divide-white/10">
                      @foreach($rows as $item)
                        @php
                          $status = $item->status ?? 'upcoming';
                          $statusText = ['upcoming'=>'قادمة','active'=>'نشطة','finished'=>'منتهية','cancelled'=>'ملغاة'][$status] ?? $status;

                          $statusClass = match($status){
                            'active'    => 'bg-cyan-500/15 text-cyan-200 border border-cyan-400/25',
                            'upcoming'  => 'bg-emerald-500/15 text-emerald-200 border border-emerald-400/25',
                            'finished'  => 'bg-slate-500/15 text-slate-200 border border-slate-400/25',
                            'cancelled' => 'bg-rose-500/15 text-rose-200 border border-rose-400/25',
                            default     => 'bg-slate-500/15 text-slate-200 border border-slate-400/25',
                          };

                          $isPlus = ($item->event_type === 'plus');

                          $raw  = $item->runtime_minutes ?? 0;
                          $mins = (int) floor(max(0, $raw));

                          if ($mins === 0) {
                              $durationText = '—';
                          } elseif ($mins >= 60) {
                              $hours = (int) round($mins / 60);
                              if ($hours === 1)      $durationText = 'ساعة واحدة';
                              elseif ($hours === 2)  $durationText = 'ساعتين';
                              elseif ($hours <= 10)  $durationText = $hours.' ساعات';
                              else                   $durationText = $hours.' ساعة';
                          } else {
                              $durationText = $mins.' دقيقة';
                          }

                          $rep = $reportStats->get($item->id);
                          $repCount   = $rep->reports_count ?? 0;
                          $repCreators = $rep->report_creators ?? '';
                        @endphp

                        <tr class="hover:bg-white/5">
                          <td class="px-3 py-3 whitespace-nowrap align-top">
                            <div class="text-white text-sm font-bold">
                              {{ $item->event_date }}
                              @if($item->event_time)
                                <span class="text-white/60 text-xs ms-1">
                                  {{ \Carbon\Carbon::parse($item->event_time)->format('H:i') }}
                                </span>
                              @endif
                            </div>
                          </td>

                          <td class="px-3 py-3 align-top">
                            <div class="font-extrabold text-white line-clamp-2">
                              {{ $item->event_title ?? 'موعد بدون عنوان' }}
                            </div>
                          </td>

                          <td class="px-3 py-3 align-top">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]
                              {{ $isPlus ? 'bg-violet-500/15 text-violet-200 border border-violet-400/25' : 'bg-cyan-500/15 text-cyan-200 border border-cyan-400/25' }}">
                              {{ $isPlus ? 'ProActive+ (بلس)' : 'ProActive عادي' }}
                            </span>
                          </td>

                          <td class="px-3 py-3 align-top">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] bg-white/5 text-white/75 border border-white/10">
                              {{ strtoupper($item->platform ?? '-') }}
                            </span>
                          </td>

                          <td class="px-3 py-3 align-top">
                            <div class="text-sm text-white/90">
                              {{ $item->leader_name ?? '—' }}
                            </div>
                          </td>

                          <td class="px-3 py-3 align-top text-center">
                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[11px] {{ $statusClass }}">
                              {{ $statusText }}
                            </span>
                          </td>

                          <td class="px-3 py-3 align-top text-center">
                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[11px]
                              {{ $mins > 0 ? 'bg-amber-500/15 text-amber-200 border border-amber-400/25' : 'bg-white/5 text-white/50 border border-white/10' }}">
                              {{ $durationText }}
                            </span>
                          </td>

                          <td class="px-3 py-3 align-top">
                            @if($repCount > 0)
                              <div class="text-[11px] text-white/85 space-y-1">
                                <div>
                                  <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-indigo-500/15 text-indigo-200 border border-indigo-400/25">
                                    <i class="fa-regular fa-file-lines ms-1"></i>
                                    {{ $repCount }} تقرير
                                  </span>
                                </div>
                                @if($repCreators)
                                  <div class="text-[11px] text-white/60">
                                    من: <span class="font-extrabold text-white/90">{{ $repCreators }}</span>
                                  </div>
                                @endif
                              </div>
                            @else
                              <span class="text-[11px] text-white/45">لا يوجد تقارير مرتبطة بعد</span>
                            @endif
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>

                {{-- Pagination --}}
                @if($rows->hasPages())
                  <div class="px-4 py-4 border-t border-white/10">
                    {{ $rows->appends(request()->query())->links() }}
                  </div>
                @endif
              </div>

              {{-- 📱 Mobile Cards --}}
              <div class="md:hidden space-y-3">
                @foreach($rows as $item)
                  @php
                    $status = $item->status ?? 'upcoming';
                    $statusText = ['upcoming'=>'قادمة','active'=>'نشطة','finished'=>'منتهية','cancelled'=>'ملغاة'][$status] ?? $status;

                    $statusClass = match($status){
                      'active'    => 'bg-cyan-500/15 text-cyan-200 border border-cyan-400/25',
                      'upcoming'  => 'bg-emerald-500/15 text-emerald-200 border border-emerald-400/25',
                      'finished'  => 'bg-slate-500/15 text-slate-200 border border-slate-400/25',
                      'cancelled' => 'bg-rose-500/15 text-rose-200 border border-rose-400/25',
                      default     => 'bg-slate-500/15 text-slate-200 border border-slate-400/25',
                    };

                    $isPlus = ($item->event_type === 'plus');

                    $raw  = $item->runtime_minutes ?? 0;
                    $mins = (int) floor(max(0, $raw));

                    if ($mins === 0) {
                        $durationText = '—';
                    } elseif ($mins >= 60) {
                        $hours = (int) round($mins / 60);
                        if ($hours === 1)      $durationText = 'ساعة واحدة';
                        elseif ($hours === 2)  $durationText = 'ساعتين';
                        elseif ($hours <= 10)  $durationText = $hours.' ساعات';
                        else                   $durationText = $hours.' ساعة';
                    } else {
                        $durationText = $mins.' دقيقة';
                    }

                    $rep = $reportStats->get($item->id);
                    $repCount   = $rep->reports_count ?? 0;
                    $repCreators= $rep->report_creators ?? '';
                  @endphp

                  <div class="rounded-3xl bg-black/30 border border-white/10 p-4 space-y-3">
                    <div class="flex items-start justify-between gap-2">
                      <div class="min-w-0">
                        <div class="text-[11px] text-white/55">
                          {{ $item->event_date }}
                          @if($item->event_time)
                            <span class="ms-1">{{ \Carbon\Carbon::parse($item->event_time)->format('H:i') }}</span>
                          @endif
                        </div>

                        <h3 class="text-sm font-extrabold text-white line-clamp-2">
                          {{ $item->event_title ?? 'موعد بدون عنوان' }}
                        </h3>

                        @if($item->leader_name)
                          <div class="text-[11px] text-white/55 mt-0.5">
                            القائد: <span class="font-bold text-white/80">{{ $item->leader_name }}</span>
                          </div>
                        @endif
                      </div>

                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] {{ $statusClass }}">
                        {{ $statusText }}
                      </span>
                    </div>

                    <div class="flex flex-wrap items-center gap-2 text-[11px]">
                      <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-white/5 text-white/75 border border-white/10">
                        <i class="fa-solid fa-signal ms-1 text-white/40"></i>
                        {{ strtoupper($item->platform ?? '-') }}
                      </span>

                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px]
                          {{ $isPlus ? 'bg-violet-500/15 text-violet-200 border border-violet-400/25' : 'bg-cyan-500/15 text-cyan-200 border border-cyan-400/25' }}">
                        {{ $isPlus ? 'ProActive+ (بلس)' : 'ProActive عادي' }}
                      </span>

                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px]
                          {{ $mins > 0 ? 'bg-amber-500/15 text-amber-200 border border-amber-400/25' : 'bg-white/5 text-white/50 border border-white/10' }}">
                        <i class="fa-regular fa-hourglass-half ms-1"></i>
                        {{ $durationText }}
                      </span>
                    </div>

                    {{-- تقارير --}}
                    <div class="text-[11px] text-white/80">
                      @if($repCount > 0)
                        <div class="rounded-2xl bg-emerald-500/10 border border-emerald-400/20 px-3 py-2 space-y-1">
                          <div class="flex items-center gap-2">
                            <i class="fa-regular fa-rectangle-list text-emerald-300"></i>
                            <span>تم تسجيل <b>{{ $repCount }}</b> تقرير مرتبط بهذا الموعد.</span>
                          </div>
                          @if($repCreators)
                            <div class="ms-6 text-white/70">
                              من: <b class="text-white/90">{{ $repCreators }}</b>
                            </div>
                          @endif
                        </div>
                      @else
                        <div class="rounded-2xl bg-white/5 border border-dashed border-white/15 px-3 py-2 flex items-center gap-2 text-white/60">
                          <i class="fa-regular fa-circle text-white/35"></i>
                          <span>لا يوجد تقارير مرتبطة بهذا الموعد حتى الآن.</span>
                        </div>
                      @endif
                    </div>
                  </div>
                @endforeach

                @if($rows->hasPages())
                  <div class="mt-2">
                    {{ $rows->appends(request()->query())->links() }}
                  </div>
                @endif
              </div>
            @else
              <div class="rounded-3xl bg-black/30 border border-dashed border-white/15 p-10 text-center text-sm text-white/60">
                لا توجد مواعيد ProActive لعرضها في هذه الصفحة حاليًا.
              </div>
            @endif

            <div class="mt-5 flex items-center justify-between">
              <button type="button" onclick="wizardPrev()"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                السابق
              </button>

              <button type="button" onclick="wizardNext()"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                             bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                             hover:scale-[1.01] active:scale-100 transition">
                قراءة سريعة
                <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
              </button>
            </div>
          </section>

          {{-- ===================== SLIDE 4 ===================== --}}
          <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
            <div class="mb-4 rounded-3xl border border-amber-300/20 bg-amber-500/10 p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
                  <i class="fa-solid fa-lightbulb"></i>
                </div>
                <div class="flex-1">
                  <div class="text-[11px] text-amber-100/70">شرح الخطوة 4</div>
                  <div class="font-extrabold text-amber-100">قراءة سريعة + مفاتيح فهم الصفحة</div>
                  <ul class="mt-2 text-[13px] text-amber-100/85 space-y-1 list-disc pr-5">
                    <li>هذه الخلاصة تساعدك تقرأ النتائج بسرعة بدون ما تغوص بكل صف.</li>
                    <li>مفيدة لملاحظة “تغطية التقارير” ولقطة عن أطول فعالية.</li>
                    <li>تقدر ترجع لأي سلايد من فوق من الـ Stepper.</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
              <div class="lg:col-span-2 rounded-3xl bg-black/30 border border-white/10 p-5">
                <div class="flex items-center justify-between gap-3">
                  <div class="text-white">
                    <div class="text-[11px] text-white/60">Quick Insight</div>
                    <div class="font-extrabold">ملخص الصفحة الحالية</div>
                  </div>
                  <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                    تغطية التقارير: {{ $coverage }}%
                  </span>
                </div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
                  <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                    <div class="text-[11px] text-white/60">مواعيد في الصفحة</div>
                    <div class="mt-1 text-lg font-extrabold text-white">{{ $pageItems->count() }}</div>
                  </div>
                  <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                    <div class="text-[11px] text-white/60">مواعيد معها تقارير</div>
                    <div class="mt-1 text-lg font-extrabold text-white">{{ $withReports }}</div>
                  </div>
                  <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                    <div class="text-[11px] text-white/60">فلاتر مفعّلة؟</div>
                    <div class="mt-1 text-lg font-extrabold text-white">{{ $hasFilters ? 'نعم' : 'لا' }}</div>
                  </div>
                </div>

                <div class="mt-4 rounded-2xl bg-white/5 border border-white/10 p-4">
                  <div class="text-[11px] text-white/60">أطول فعالية (ضمن الصفحة)</div>
                  @if($longestItem)
                    @php
                      $minsL = (int) floor(max(0, (float)($longestItem->runtime_minutes ?? 0)));
                      $textL = $minsL > 0 ? ($minsL >= 60 ? ((int) round($minsL/60)).' ساعة تقريبًا' : $minsL.' دقيقة') : '—';
                    @endphp
                    <div class="mt-1 font-extrabold text-white">
                      {{ $longestItem->event_title ?? 'موعد بدون عنوان' }}
                      <span class="text-white/60 font-normal text-sm">— {{ $textL }}</span>
                    </div>
                    <div class="mt-1 text-[12px] text-white/60">
                      {{ $longestItem->event_date ?? '—' }}
                      @if(!empty($longestItem->leader_name))
                        · القائد: <span class="text-white/80 font-bold">{{ $longestItem->leader_name }}</span>
                      @endif
                    </div>
                  @else
                    <div class="mt-1 text-white/60">—</div>
                  @endif
                </div>

                @if($topLeader)
                  <div class="mt-3 rounded-2xl bg-white/5 border border-white/10 p-4">
                    <div class="text-[11px] text-white/60">أكثر قائد تكرارًا (ضمن الصفحة)</div>
                    <div class="mt-1 font-extrabold text-white">
                      {{ $topLeader['name'] }}
                      <span class="text-white/60 font-normal text-sm">— {{ $topLeader['count'] }} موعد</span>
                    </div>
                  </div>
                @endif
              </div>

              <div class="rounded-3xl bg-black/30 border border-white/10 p-5">
                <div class="text-white">
                  <div class="text-[11px] text-white/60">Legend</div>
                  <div class="font-extrabold">مفاتيح فهم الحالات</div>
                </div>

                <div class="mt-4 space-y-2 text-[12px] text-white/75">
                  <div class="flex items-center justify-between gap-2">
                    <span>نشطة</span>
                    <span class="px-2 py-0.5 rounded-full bg-cyan-500/15 text-cyan-200 border border-cyan-400/25">Active</span>
                  </div>
                  <div class="flex items-center justify-between gap-2">
                    <span>قادمة</span>
                    <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-200 border border-emerald-400/25">Upcoming</span>
                  </div>
                  <div class="flex items-center justify-between gap-2">
                    <span>منتهية</span>
                    <span class="px-2 py-0.5 rounded-full bg-slate-500/15 text-slate-200 border border-slate-400/25">Finished</span>
                  </div>
                  <div class="flex items-center justify-between gap-2">
                    <span>ملغاة</span>
                    <span class="px-2 py-0.5 rounded-full bg-rose-500/15 text-rose-200 border border-rose-400/25">Cancelled</span>
                  </div>

                  <hr class="my-3 border-white/10">

                  <div class="text-white/60 text-[11px]">ملاحظة</div>
                  <p class="text-[12px] leading-relaxed text-white/70">
                    “المدة” تُحسب من <b>runtime_minutes</b>.  
                    الفعاليات القادمة غالبًا تظهر “—” لأن المدة = 0.
                  </p>
                </div>
              </div>
            </div>

            <div class="mt-5 flex items-center justify-between">
              <button type="button" onclick="wizardPrev()"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                السابق
              </button>

              <button type="button" onclick="setWizardStep(1)"
                      class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                             bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                             hover:scale-[1.01] active:scale-100 transition">
                رجّعني للبداية
                <i class="fa-solid fa-rotate-left ms-2 text-[11px]"></i>
              </button>
            </div>
          </section>

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

  </div>
</div>

@push('scripts')
<script>
  // ===================== Wizard (Slides + Stepper) =====================
  let __wizStep = 1;

  const __wizSignals = {
    hasFilters: @json($hasFilters),
    hasRows: @json($rows->count() > 0),
    coverage: @json($coverage),
    initialStep: @json($initialStep),
  };

  function setWizardStep(step){
    step = Math.max(1, Math.min(4, parseInt(step || 1, 10)));
    __wizStep = step;

    const track = document.getElementById('wizTrack');
    if(track){
      const pct = (step - 1) * 100;
      track.style.transform = `translateX(-${pct}%)`;
    }

    const top = document.getElementById('wizardTop');
    if(top) top.scrollIntoView({behavior:'smooth', block:'start'});

    updateWizardProgress();
  }

  function wizardPrev(){ setWizardStep(__wizStep - 1); }
  function wizardNext(){ setWizardStep(__wizStep + 1); }

  function updateWizardProgress(){
    // مفهوم "الاكتمال" هون مساعد للقراءة، مش إلزامي
    const step1Done = true; // لوحة موجودة دائمًا
    const step2Done = !!__wizSignals.hasFilters;
    const step3Done = !!__wizSignals.hasRows;
    const step4Done = (__wizSignals.coverage || 0) > 0;

    const doneArr = [step1Done, step2Done, step3Done, step4Done];
    const doneCount = doneArr.filter(Boolean).length;

    const bar = document.getElementById('wizBar');
    const lbl = document.getElementById('wizLabel');
    const hint = document.getElementById('wizHint');

    if(bar) bar.style.width = Math.round((doneCount/4)*100) + '%';
    if(lbl) lbl.textContent = `${doneCount}/4 مكتمل`;

    document.querySelectorAll('.wizStep').forEach(btn => {
      const s = parseInt(btn.getAttribute('data-step'), 10);
      const isActive = (s === __wizStep);
      const isDone = !!doneArr[s-1];

      btn.classList.remove(
        'ring-1','ring-cyan-400/30','border-cyan-400/35','bg-cyan-500/10','text-white',
        'border-emerald-400/25','bg-emerald-500/10','text-emerald-100'
      );
      btn.classList.add('border-white/10','bg-white/5','text-white/70');

      const st = btn.querySelector('[data-status]');

      if(isDone){
        btn.classList.remove('border-white/10','bg-white/5','text-white/70');
        btn.classList.add('border-emerald-400/25','bg-emerald-500/10','text-emerald-100');
        if(st) st.textContent = isActive ? 'هنا' : 'مكتمل';
      } else if(isActive){
        btn.classList.remove('border-white/10','bg-white/5','text-white/70');
        btn.classList.add('ring-1','ring-cyan-400/30','border-cyan-400/35','bg-cyan-500/10','text-white');
        if(st) st.textContent = 'الآن';
      } else {
        if(st) st.textContent = 'قادم';
      }
    });

    if(hint){
      let msg = 'ابدأ من لوحة المراقبة.';
      if(__wizStep === 1) msg = 'راجع الإحصائيات بسرعة ثم انتقل للفلاتر.';
      if(__wizStep === 2) msg = 'فعّل فلاتر لو بدك تضييق النتائج، ثم اعرض النتائج.';
      if(__wizStep === 3) msg = 'اقرأ النتائج: الحالة/المدة/التقارير المرتبطة.';
      if(__wizStep === 4) msg = 'خلاصة سريعة + مفاتيح فهم الصفحة.';
      hint.textContent = msg;
    }
  }

  document.addEventListener('DOMContentLoaded', function(){
    updateWizardProgress();
    setWizardStep(__wizSignals.initialStep || 1);

    // اختصار: ESC يرجع خطوة
    document.addEventListener('keydown', function(e){
      if(e.key === 'Escape') wizardPrev();
    });
  });
</script>
@endpush
@endsection