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

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

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

  $section = $section ?? 'proactive';

  // Tabs
  $tab = $tab ?? request('tab','reports'); // reports|schedules
  if (!in_array($tab, ['reports','schedules'], true)) $tab = 'reports';

  // View
  $view = $view ?? request('view','table'); // table|cards
  if (!in_array($view, ['table','cards'], true)) $view = 'table';

  // UI time
  $ui = $ui ?? [
    'tz_mode' => request('tz','local'),
    'clock'   => request('clock','24'),
  ];

  $tzOptions = $tzOptions ?? [
    'local'  => 'توقيت النظام',
    'jordan' => 'توقيت الأردن',
  ];

  $clockOptions = $clockOptions ?? [
    '24' => '24 ساعة',
    '12' => '12 ساعة',
  ];

  // Filters
  $q      = $q ?? request('q','');
  $type   = $type ?? request('type','');
  $plat   = $plat ?? request('platform','');
  $from   = $from ?? request('from','');
  $to     = $to ?? request('to','');
  $status = $status ?? request('status','');

  $platforms = $platforms ?? [
    ''          => 'كل المنصّات',
    'tiktok'    => 'تيك توك',
    'instagram' => 'إنستغرام',
    'youtube'   => 'يوتيوب',
    'other'     => 'أخرى',
  ];

  // Controller: rows + stats
  $rows  = $rows  ?? collect();
  $stats = $stats ?? [];

  // labels
  $typeLabel = [
    'regular' => 'عادية',
    'plus'    => 'Plus',
  ];

  $statusLabelReports = [
    'pending'  => 'بانتظار',
    'approved' => 'مقبول',
    'rejected' => 'مرفوض',
  ];

  $statusLabelSchedules = [
    'upcoming'  => 'قادم',
    'active'    => 'نشط',
    'finished'  => 'منتهي',
    'cancelled' => 'ملغي',
  ];

  $gradeLabel = [
    'good'       => 'جيد',
    'very_good'  => 'جيد جدًا',
    'excellent'  => 'ممتاز',
  ];

  // safe create urls (بدون Route errors)
  $createReportUrl = null;
  if (Route::has('superadmin.proactive.reports.create')) $createReportUrl = route('superadmin.proactive.reports.create');
  elseif (Route::has('superadmin.proactive.report.create')) $createReportUrl = route('superadmin.proactive.report.create');

  $createScheduleUrl = null;
  if (Route::has('superadmin.proactive.schedules.create')) $createScheduleUrl = route('superadmin.proactive.schedules.create');
  elseif (Route::has('superadmin.proactive.schedule.create')) $createScheduleUrl = route('superadmin.proactive.schedule.create');

  $qs = request()->query();

  // header summary line
  $periodLine = ($from && $to) ? "{$from} → {$to}" : 'حسب الفلاتر الحالية';
@endphp

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

    {{-- Header (نفس روح members-marks) --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-10 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-10 w-96 h-96 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-6 space-y-4">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              ProActive • تقارير • مواعيد • تحليل
            </div>

            <h1 class="mt-2 text-xl sm:text-2xl font-extrabold text-white">
              ProActive — المواعيد والتقارير
            </h1>

            <p class="mt-1 text-sm text-white/60">
              الفترة: <span class="text-white/90 font-semibold">{{ $periodLine }}</span>
              • التوقيت: <span class="text-white/90 font-semibold">{{ $tzOptions[$ui['tz_mode']] ?? 'توقيت النظام' }}</span>
              • نظام الساعة: <span class="text-white/90 font-semibold">{{ $clockOptions[$ui['clock']] ?? '24 ساعة' }}</span>
            </p>
          </div>

          <div class="flex items-center gap-2">
            {{-- switch view --}}
            <a href="{{ request()->fullUrlWithQuery(['view'=>'table']) }}"
               class="px-3 py-2 rounded-xl text-xs font-semibold border {{ $view==='table' ? 'bg-white text-slate-900 border-white' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
              جدول
            </a>
            <a href="{{ request()->fullUrlWithQuery(['view'=>'cards']) }}"
               class="px-3 py-2 rounded-xl text-xs font-semibold border {{ $view==='cards' ? 'bg-white text-slate-900 border-white' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
              كروت
            </a>
          </div>
        </div>

        {{-- Tabs --}}
        <div class="flex flex-wrap items-center gap-2">
          <a href="{{ request()->fullUrlWithQuery(['tab'=>'reports']) }}"
             class="px-3 py-2 rounded-xl text-xs font-extrabold border
                    {{ $tab==='reports' ? 'bg-fuchsia-600 text-white border-fuchsia-500/40' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
            التقارير
          </a>
          <a href="{{ request()->fullUrlWithQuery(['tab'=>'schedules']) }}"
             class="px-3 py-2 rounded-xl text-xs font-extrabold border
                    {{ $tab==='schedules' ? 'bg-cyan-600 text-white border-cyan-500/40' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
            المواعيد
          </a>

          <div class="flex-1"></div>

          @if($tab==='reports')
            <a href="{{ $createReportUrl ?: '#' }}"
               class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 text-white/90 border border-white/10 hover:bg-white/15 text-xs font-extrabold">
              <i class="fa-solid fa-plus"></i>
              تقرير جديد
            </a>
          @else
            <a href="{{ $createScheduleUrl ?: '#' }}"
               class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 text-white/90 border border-white/10 hover:bg-white/15 text-xs font-extrabold">
              <i class="fa-solid fa-plus"></i>
              موعد جديد
            </a>
          @endif
        </div>

        {{-- Filters --}}
        <form method="GET" action="{{ url()->current() }}" class="grid grid-cols-1 sm:grid-cols-12 gap-2">
          <input type="hidden" name="section" value="{{ $section }}">
          <input type="hidden" name="tab" value="{{ $tab }}">
          <input type="hidden" name="view" value="{{ $view }}">

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">من</label>
            <input type="date" name="from" value="{{ $from }}"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">إلى</label>
            <input type="date" name="to" value="{{ $to }}"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">بحث</label>
            <input type="text" name="q" value="{{ $q }}" placeholder="مضيف / صاحب لايف / ملخص / ملاحظات…"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white placeholder:text-white/30 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">المنصة</label>
            <select name="platform"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              @foreach($platforms as $k=>$v)
                <option value="{{ $k }}" @selected((string)$plat===(string)$k)>{{ $v }}</option>
              @endforeach
            </select>
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">{{ $tab==='reports' ? 'نوع النشاط' : 'نوع الموعد' }}</label>
            <select name="type"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="">الكل</option>
              <option value="regular" @selected($type==='regular')>عادية</option>
              <option value="plus" @selected($type==='plus')>Plus</option>
            </select>
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">
              {{ $tab==='reports' ? 'حالة رد البرنامج' : 'حالة الموعد' }}
            </label>
            <select name="status"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="">الكل</option>
              @if($tab==='reports')
                <option value="pending"  @selected($status==='pending')>بانتظار</option>
                <option value="approved" @selected($status==='approved')>مقبول</option>
                <option value="rejected" @selected($status==='rejected')>مرفوض</option>
              @else
                <option value="upcoming"  @selected($status==='upcoming')>قادم</option>
                <option value="active"    @selected($status==='active')>نشط</option>
                <option value="finished"  @selected($status==='finished')>منتهي</option>
                <option value="cancelled" @selected($status==='cancelled')>ملغي</option>
              @endif
            </select>
          </div>

          <div class="sm:col-span-4 grid grid-cols-2 gap-2">
            <div>
              <label class="block text-xs text-white/60 mb-1">التوقيت</label>
              <select name="tz"
                      class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                @foreach($tzOptions as $k=>$v)
                  <option value="{{ $k }}" @selected(($ui['tz_mode'] ?? 'local')===$k)>{{ $v }}</option>
                @endforeach
              </select>
            </div>
            <div>
              <label class="block text-xs text-white/60 mb-1">نظام الساعة</label>
              <select name="clock"
                      class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                @foreach($clockOptions as $k=>$v)
                  <option value="{{ $k }}" @selected(($ui['clock'] ?? '24')===$k)>{{ $v }}</option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="sm:col-span-12 flex items-end gap-2">
            <button type="submit"
                    class="w-full sm:w-auto px-5 py-2.5 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90">
              تطبيق الفلاتر
            </button>

            <a href="{{ url()->current() . '?' . http_build_query(['section'=>$section,'tab'=>$tab,'view'=>$view]) }}"
               class="w-full sm:w-auto px-5 py-2.5 rounded-xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 text-center font-semibold">
              تصفير
            </a>

            <div class="hidden sm:flex flex-1 items-center justify-end text-xs text-white/40">
              كل تغيير بالتوقيت/الساعة ينعكس على العرض فقط ✅
            </div>
          </div>
        </form>
      </div>
    </div>

    {{-- Summary --}}
    <div class="grid grid-cols-2 sm:grid-cols-6 gap-2">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
        <div class="text-xs text-white/60">{{ $tab==='reports' ? 'إجمالي التقارير' : 'إجمالي المواعيد' }}</div>
        <div class="text-lg font-extrabold text-white">{{ (int)($stats['total'] ?? 0) }}</div>
      </div>

      @if($tab==='reports')
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">آخر 7 أيام</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['last7'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">عادية</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['regular'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">Plus</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['plus'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">فيها مشاكل</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['issues'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">فيها تقدم</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['progress'] ?? 0) }}</div>
        </div>
      @else
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">قادم</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['upcoming'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">نشط</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['active'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">منتهي</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['finished'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">ملغي</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['cancelled'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">عادي</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['regular'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">Plus</div>
          <div class="text-lg font-extrabold text-white">{{ (int)($stats['plus'] ?? 0) }}</div>
        </div>
      @endif
    </div>

    {{-- Content --}}
    @if(($rows->count() ?? 0) === 0)
      <div class="rounded-3xl border border-white/10 bg-white/5 p-6 text-center text-white/70">
        لا توجد نتائج ضمن هذه الفلاتر.
      </div>
    @else

      @if($view === 'cards')
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          @foreach($rows as $r)
            @php
              $platformText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
              $creator = $r->creator_name ?? '—';

              if($tab==='reports'){
                $rowType   = $typeLabel[$r->activity_type ?? 'regular'] ?? ($r->activity_type ?? '—');
                $rowStatus = $statusLabelReports[$r->program_status ?? ''] ?? ($r->program_status ?? '—');
                $rowGrade  = $gradeLabel[$r->live_grade ?? ''] ?? ($r->live_grade ?? '—');
                $when      = $r->activity_datetime_display ?? ($r->activity_date ?? '—');
              } else {
                $rowType   = $typeLabel[$r->event_type ?? 'regular'] ?? ($r->event_type ?? '—');
                $rowStatus = $statusLabelSchedules[$r->status ?? ''] ?? ($r->status ?? '—');
                $rowGrade  = '—';
                $when      = $r->event_datetime_display ?? (($r->event_date ?? '—') . ' • ' . ($r->event_time_display ?? ($r->event_time ?? '—')));
              }

              // payload for modal
              $payload = [
                'tab' => $tab,
                'id'  => $r->id ?? null,
                'when'=> $when,
                'platform' => $platformText,
                'type' => $rowType,
                'status' => $rowStatus,
                'creator' => $creator,

                // reports
                'live_host' => $r->live_host ?? null,
                'live_owner_name' => $r->live_owner_name ?? null,
                'live_link' => $r->live_link ?? null,
                'short_summary' => $r->short_summary ?? null,
                'grade' => $rowGrade,
                'had_issues' => (int)($r->had_issues ?? 0),
                'issues_text' => $r->issues_text ?? null,
                'had_progress' => (int)($r->had_progress ?? 0),
                'progress_text' => $r->progress_text ?? null,
                'positive_notes' => $r->positive_notes ?? null,
                'negative_notes' => $r->negative_notes ?? null,
                'general_issues' => $r->general_issues ?? null,
                'new_friends' => $r->new_friends ?? null,
                'invitations_sent' => $r->invitations_sent ?? null,

                // schedules
                'title' => $r->event_title ?? null,
                'leader_name' => $r->leader_name ?? null,
                'description' => $r->event_description ?? null,
                'notes' => $r->notes ?? null,
              ];
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-4 hover:bg-white/[0.07] transition">
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <div class="text-white font-extrabold truncate">
                    @if($tab==='reports')
                      {{ $r->live_host ?? '—' }}
                    @else
                      {{ $r->event_title ?? '—' }}
                    @endif
                  </div>
                  <div class="text-xs text-white/50 mt-1">
                    {{ $when }} • {{ $platformText }}
                  </div>
                </div>

                <span class="px-2.5 py-1 rounded-full text-[11px] font-extrabold border border-white/10 bg-black/30 text-white/80 whitespace-nowrap">
                  {{ $rowType }}
                </span>
              </div>

              <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
                <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                  <div class="text-xs text-white/60">الحالة</div>
                  <div class="text-white font-extrabold">{{ $rowStatus }}</div>
                </div>

                <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                  <div class="text-xs text-white/60">{{ $tab==='reports' ? 'التقدير' : 'القائد' }}</div>
                  <div class="text-white font-extrabold">
                    @if($tab==='reports')
                      {{ $rowGrade }}
                    @else
                      {{ $r->leader_name ?? '—' }}
                    @endif
                  </div>
                </div>
              </div>

              @if($tab==='reports')
                <div class="mt-3 text-sm text-white/80">
                  <span class="text-white/60">صاحب اللايف:</span>
                  <span class="font-semibold">{{ $r->live_owner_name ?? '—' }}</span>
                </div>

                <div class="mt-2 text-sm text-white/80 line-clamp-2">
                  <span class="text-white/60">ملخص:</span>
                  <span class="font-semibold">{{ $r->short_summary ?? '—' }}</span>
                </div>

                <div class="mt-3 flex items-center gap-2 text-xs">
                  @if((int)($r->had_issues ?? 0) === 1)
                    <span class="px-2 py-1 rounded-full border border-rose-400/25 bg-rose-500/12 text-rose-200 font-bold">مشاكل</span>
                  @endif
                  @if((int)($r->had_progress ?? 0) === 1)
                    <span class="px-2 py-1 rounded-full border border-indigo-400/25 bg-indigo-500/12 text-indigo-200 font-bold">تقدم</span>
                  @endif
                </div>
              @else
                <div class="mt-3 text-sm text-white/80 line-clamp-2">
                  <span class="text-white/60">ملاحظات:</span>
                  <span class="font-semibold">{{ $r->notes ?? '—' }}</span>
                </div>
              @endif

              <div class="mt-4 flex items-center justify-between">
                <div class="text-xs text-white/50">
                  مُسجّل: <span class="text-white/80 font-bold">{{ $creator }}</span>
                </div>

                <button type="button"
                        class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold"
                        data-iman-proactive-open
                        data-payload='@json($payload)'>
                  <i class="fa-solid fa-eye"></i>
                  عرض التفاصيل
                </button>
              </div>
            </div>
          @endforeach
        </div>

      @else
        <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="min-w-[1100px] w-full text-sm">
              <thead class="bg-black/40 text-white/70">
                <tr>
                  <th class="px-3 py-3 text-right">#</th>
                  <th class="px-3 py-3 text-right">{{ $tab==='reports' ? 'التاريخ/الوقت' : 'التاريخ/الوقت' }}</th>
                  <th class="px-3 py-3 text-right">{{ $tab==='reports' ? 'المضيف' : 'العنوان' }}</th>
                  <th class="px-3 py-3 text-right">{{ $tab==='reports' ? 'صاحب اللايف' : 'القائد' }}</th>
                  <th class="px-3 py-3 text-right">المنصة</th>
                  <th class="px-3 py-3 text-right">النوع</th>
                  <th class="px-3 py-3 text-right">الحالة</th>
                  <th class="px-3 py-3 text-right">{{ $tab==='reports' ? 'التقدير' : '—' }}</th>
                  <th class="px-3 py-3 text-right">مُسجّل</th>
                  <th class="px-3 py-3 text-right">إجراء</th>
                </tr>
              </thead>

              <tbody class="divide-y divide-white/5">
                @foreach($rows as $i => $r)
                  @php
                    $platformText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
                    $creator = $r->creator_name ?? '—';

                    if($tab==='reports'){
                      $rowType   = $typeLabel[$r->activity_type ?? 'regular'] ?? ($r->activity_type ?? '—');
                      $rowStatus = $statusLabelReports[$r->program_status ?? ''] ?? ($r->program_status ?? '—');
                      $rowGrade  = $gradeLabel[$r->live_grade ?? ''] ?? ($r->live_grade ?? '—');
                      $when      = $r->activity_datetime_display ?? ($r->activity_date ?? '—');
                      $main      = $r->live_host ?? '—';
                      $sub       = $r->live_owner_name ?? '—';
                    } else {
                      $rowType   = $typeLabel[$r->event_type ?? 'regular'] ?? ($r->event_type ?? '—');
                      $rowStatus = $statusLabelSchedules[$r->status ?? ''] ?? ($r->status ?? '—');
                      $rowGrade  = '—';
                      $when      = $r->event_datetime_display ?? (($r->event_date ?? '—') . ' • ' . ($r->event_time_display ?? ($r->event_time ?? '—')));
                      $main      = $r->event_title ?? '—';
                      $sub       = $r->leader_name ?? '—';
                    }

                    $payload = [
                      'tab' => $tab,
                      'id'  => $r->id ?? null,
                      'when'=> $when,
                      'platform' => $platformText,
                      'type' => $rowType,
                      'status' => $rowStatus,
                      'creator' => $creator,
                      'live_host' => $r->live_host ?? null,
                      'live_owner_name' => $r->live_owner_name ?? null,
                      'live_link' => $r->live_link ?? null,
                      'short_summary' => $r->short_summary ?? null,
                      'grade' => $rowGrade,
                      'had_issues' => (int)($r->had_issues ?? 0),
                      'issues_text' => $r->issues_text ?? null,
                      'had_progress' => (int)($r->had_progress ?? 0),
                      'progress_text' => $r->progress_text ?? null,
                      'positive_notes' => $r->positive_notes ?? null,
                      'negative_notes' => $r->negative_notes ?? null,
                      'general_issues' => $r->general_issues ?? null,
                      'new_friends' => $r->new_friends ?? null,
                      'invitations_sent' => $r->invitations_sent ?? null,
                      'title' => $r->event_title ?? null,
                      'leader_name' => $r->leader_name ?? null,
                      'description' => $r->event_description ?? null,
                      'notes' => $r->notes ?? null,
                    ];
                  @endphp

                  <tr class="text-white/80 hover:bg-white/5">
                    <td class="px-3 py-3 text-white/50">
                      {{ (method_exists($rows,'firstItem') ? ($rows->firstItem() ?? 1) : 1) + $i }}
                    </td>

                    <td class="px-3 py-3 whitespace-nowrap">
                      <div class="font-extrabold text-white">{{ $when }}</div>
                      @if(!empty($r->created_at_display ?? null))
                        <div class="text-xs text-white/40">سجّل: {{ $r->created_at_display }}</div>
                      @endif
                    </td>

                    <td class="px-3 py-3">
                      <div class="font-extrabold text-white">{{ $main }}</div>
                      @if($tab==='reports')
                        <div class="text-xs text-white/40 line-clamp-1">{{ $r->short_summary ?? '—' }}</div>
                      @else
                        <div class="text-xs text-white/40 line-clamp-1">{{ $r->notes ?? '—' }}</div>
                      @endif
                    </td>

                    <td class="px-3 py-3">
                      <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                        {{ $sub }}
                      </span>
                    </td>

                    <td class="px-3 py-3 whitespace-nowrap">{{ $platformText }}</td>

                    <td class="px-3 py-3">
                      <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                        {{ $rowType }}
                      </span>
                    </td>

                    <td class="px-3 py-3">
                      <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                        {{ $rowStatus }}
                      </span>
                    </td>

                    <td class="px-3 py-3">
                      @if($tab==='reports')
                        <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                          {{ $rowGrade }}
                        </span>
                        @if((int)($r->had_issues ?? 0)===1)
                          <span class="mr-2 px-2 py-1 rounded-full text-[11px] border border-rose-400/25 bg-rose-500/12 text-rose-200 font-bold">مشاكل</span>
                        @endif
                        @if((int)($r->had_progress ?? 0)===1)
                          <span class="mr-2 px-2 py-1 rounded-full text-[11px] border border-indigo-400/25 bg-indigo-500/12 text-indigo-200 font-bold">تقدم</span>
                        @endif
                      @else
                        <span class="text-white/40">—</span>
                      @endif
                    </td>

                    <td class="px-3 py-3 whitespace-nowrap">{{ $creator }}</td>

                    <td class="px-3 py-3 whitespace-nowrap">
                      <button type="button"
                              class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold"
                              data-iman-proactive-open
                              data-payload='@json($payload)'>
                        <i class="fa-solid fa-eye"></i>
                        عرض
                      </button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          @if(is_object($rows) && method_exists($rows,'links'))
            <div class="p-3 border-t border-white/10">
              {{ $rows->links() }}
            </div>
          @endif
        </div>
      @endif

    @endif

  </div>
</div>

{{-- ===========================
   مودال تفاصيل كامل (Reports/Schedules)
   =========================== --}}
<div id="imanProactiveModal"
     class="fixed inset-0 z-[9999] hidden"
     aria-hidden="true">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" data-iman-proactive-close></div>

  <div class="absolute inset-0 flex items-center justify-center p-3 sm:p-6">
    <div class="w-full max-w-3xl rounded-3xl border border-white/10 bg-gradient-to-b from-slate-950 via-slate-900 to-black shadow-2xl overflow-hidden">
      <div class="p-4 sm:p-5 border-b border-white/10 flex items-start justify-between gap-3">
        <div>
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 text-white/80 text-xs">
            <span class="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
            تفاصيل ProActive
          </div>
          <div id="ipmTitle" class="mt-2 text-lg sm:text-xl font-extrabold text-white">—</div>
          <div id="ipmMeta" class="mt-1 text-sm text-white/60">—</div>
        </div>

        <button type="button"
                class="shrink-0 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold"
                data-iman-proactive-close>
          إغلاق
        </button>
      </div>

      <div class="p-4 sm:p-5 space-y-4 max-h-[70vh] overflow-y-auto">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">الوقت/التاريخ</div>
            <div id="ipmWhen" class="text-white font-extrabold mt-1">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">المنصة</div>
            <div id="ipmPlatform" class="text-white font-extrabold mt-1">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">النوع</div>
            <div id="ipmType" class="text-white font-extrabold mt-1">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">الحالة</div>
            <div id="ipmStatus" class="text-white font-extrabold mt-1">—</div>
          </div>
        </div>

        {{-- Reports only --}}
        <div id="ipmReportsBlock" class="space-y-3 hidden">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">المضيف / صاحب اللايف</div>
            <div class="mt-1 text-white font-extrabold">
              <span id="ipmHost">—</span>
              <span class="text-white/30 mx-2">•</span>
              <span id="ipmOwner">—</span>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">التقدير</div>
            <div id="ipmGrade" class="text-white font-extrabold mt-1">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">رابط اللايف</div>
            <div class="mt-1">
              <a id="ipmLink" href="#" target="_blank"
                 class="text-cyan-200 font-bold underline underline-offset-4 break-all">—</a>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">ملخص</div>
            <div id="ipmSummary" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">إيجابيات / ملاحظات</div>
              <div id="ipmPositive" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">سلبيات</div>
              <div id="ipmNegative" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">مشاكل؟</div>
              <div id="ipmIssuesFlag" class="text-white font-extrabold mt-1">—</div>
              <div id="ipmIssuesText" class="text-white/80 mt-2 whitespace-pre-wrap hidden"></div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">تقدم؟</div>
              <div id="ipmProgressFlag" class="text-white font-extrabold mt-1">—</div>
              <div id="ipmProgressText" class="text-white/80 mt-2 whitespace-pre-wrap hidden"></div>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">مشاكل عامة / ملاحظات إضافية</div>
            <div id="ipmGeneralIssues" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">أصدقاء جدد</div>
              <div id="ipmFriends" class="text-white font-extrabold mt-1">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">دعوات مرسلة</div>
              <div id="ipmInv" class="text-white font-extrabold mt-1">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">مُسجّل التقرير</div>
              <div id="ipmCreator" class="text-white font-extrabold mt-1">—</div>
            </div>
          </div>
        </div>

        {{-- Schedules only --}}
        <div id="ipmSchedulesBlock" class="space-y-3 hidden">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">عنوان الموعد</div>
            <div id="ipmScheduleTitle" class="text-white font-extrabold mt-1 whitespace-pre-wrap">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">القائد</div>
            <div id="ipmLeader" class="text-white font-extrabold mt-1">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">وصف الموعد</div>
            <div id="ipmDesc" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">ملاحظات</div>
            <div id="ipmNotes" class="text-white/90 font-semibold mt-1 whitespace-pre-wrap">—</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-xs text-white/60">مُسجّل الموعد</div>
            <div id="ipmCreator2" class="text-white font-extrabold mt-1">—</div>
          </div>
        </div>

      </div>

      <div class="p-4 sm:p-5 border-t border-white/10 flex items-center justify-between">
        <div class="text-xs text-white/40">
          التفاصيل للعرض فقط — لا تغيّر بيانات قاعدة البيانات ✅
        </div>
        <button type="button"
                class="px-4 py-2 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90"
                data-iman-proactive-close>
          تم
        </button>
      </div>
    </div>
  </div>
</div>

{{-- Scoped JS (بدون تعارض) --}}
<script>
(() => {
  const modal = document.getElementById('imanProactiveModal');
  if (!modal) return;

  const qs = (s, el=document) => el.querySelector(s);
  const setText = (id, v) => { const el = qs('#'+id); if(el) el.textContent = (v===null || v===undefined || v==='') ? '—' : String(v); };
  const setLink = (id, v) => {
    const a = qs('#'+id);
    if(!a) return;
    const val = (v===null || v===undefined || v==='') ? '' : String(v);
    if(!val){ a.textContent = '—'; a.setAttribute('href','#'); a.classList.add('pointer-events-none','opacity-60'); return; }
    a.textContent = val; a.setAttribute('href', val); a.classList.remove('pointer-events-none','opacity-60');
  };

  const reportsBlock   = qs('#ipmReportsBlock');
  const schedulesBlock = qs('#ipmSchedulesBlock');

  const open = (payload) => {
    // base
    setText('ipmWhen', payload.when);
    setText('ipmPlatform', payload.platform);
    setText('ipmType', payload.type);
    setText('ipmStatus', payload.status);

    const title = payload.tab === 'reports'
      ? (payload.live_host || 'تفاصيل التقرير')
      : (payload.title || 'تفاصيل الموعد');

    setText('ipmTitle', title);
    setText('ipmMeta', `#${payload.id ?? '—'} • مُسجّل: ${payload.creator ?? '—'}`);

    if (payload.tab === 'reports') {
      reportsBlock?.classList.remove('hidden');
      schedulesBlock?.classList.add('hidden');

      setText('ipmHost', payload.live_host);
      setText('ipmOwner', payload.live_owner_name);
      setText('ipmGrade', payload.grade);
      setLink('ipmLink', payload.live_link);
      setText('ipmSummary', payload.short_summary);

      setText('ipmPositive', payload.positive_notes);
      setText('ipmNegative', payload.negative_notes);

      const issuesFlag = (payload.had_issues ?? 0) == 1 ? 'نعم' : 'لا';
      const progFlag   = (payload.had_progress ?? 0) == 1 ? 'نعم' : 'لا';
      setText('ipmIssuesFlag', issuesFlag);
      setText('ipmProgressFlag', progFlag);

      const it = qs('#ipmIssuesText');
      if(it){
        const t = payload.issues_text || '';
        if((payload.had_issues ?? 0) == 1 && t.trim() !== ''){
          it.textContent = t;
          it.classList.remove('hidden');
        } else {
          it.textContent = '';
          it.classList.add('hidden');
        }
      }

      const pt = qs('#ipmProgressText');
      if(pt){
        const t = payload.progress_text || '';
        if((payload.had_progress ?? 0) == 1 && t.trim() !== ''){
          pt.textContent = t;
          pt.classList.remove('hidden');
        } else {
          pt.textContent = '';
          pt.classList.add('hidden');
        }
      }

      setText('ipmGeneralIssues', payload.general_issues);
      setText('ipmFriends', payload.new_friends ?? 0);
      setText('ipmInv', payload.invitations_sent ?? 0);
      setText('ipmCreator', payload.creator);
    } else {
      schedulesBlock?.classList.remove('hidden');
      reportsBlock?.classList.add('hidden');

      setText('ipmScheduleTitle', payload.title);
      setText('ipmLeader', payload.leader_name);
      setText('ipmDesc', payload.description);
      setText('ipmNotes', payload.notes);
      setText('ipmCreator2', payload.creator);
    }

    modal.classList.remove('hidden');
    modal.setAttribute('aria-hidden','false');
    document.body.style.overflow = 'hidden';
  };

  const close = () => {
    modal.classList.add('hidden');
    modal.setAttribute('aria-hidden','true');
    document.body.style.overflow = '';
  };

  document.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-iman-proactive-open]');
    if (btn) {
      e.preventDefault();
      try {
        const payload = JSON.parse(btn.getAttribute('data-payload') || '{}');
        open(payload);
      } catch (err) {}
      return;
    }

    if (e.target.closest('[data-iman-proactive-close]')) {
      e.preventDefault();
      close();
    }
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') close();
  });
})();
</script>
@endsection