{{-- 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';
    $tab     = $tab ?? request('tab', 'reports'); // reports | schedules
    if (!in_array($tab, ['reports','schedules'], true)) $tab = 'reports';

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

    // from controller:
    // - reports tab: rows=reports (pagination), stats=reports stats
    // - schedules tab: rows=schedules (pagination), stats=schedules stats
    $rows  = $rows ?? null;
    $stats = $stats ?? [];

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

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

    $ui = $ui ?? [
        'tz_mode' => request('tz','local'), // local | jordan
        'clock'   => request('clock','24'), // 24 | 12
    ];

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

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

    // Safe URLs (no hard dependency on routes)
    $baseUrl = url()->current();

    // Optional: if you have separate proactive routes, we use them safely
    $reportsCreateUrl = (Route::has('superadmin.proactive.reports.create'))
        ? route('superadmin.proactive.reports.create')
        : null;

    $schedulesCreateUrl = (Route::has('superadmin.proactive.schedules.create'))
        ? route('superadmin.proactive.schedules.create')
        : null;
@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl border border-fuchsia-400/25 bg-gradient-to-br from-slate-950/95 via-slate-900/95 to-black/95 shadow-2xl shadow-fuchsia-500/10">
      <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">
        <div class="flex items-start justify-between gap-4">
          <div>
            <div class="flex items-center gap-3">
              <span class="inline-flex items-center justify-center w-11 h-11 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200 shadow">
                <i class="fa-solid fa-bolt text-sm"></i>
              </span>
              <div class="space-y-0.5">
                <div class="text-white text-xl sm:text-2xl font-extrabold tracking-tight">ProActive — مركز المواعيد والتقارير</div>
                <div class="text-white/65 text-sm">
                  إدارة التقارير + المواعيد — مع عرض التوقيت (الأردن/النظام) ونظام الساعة 12/24 بدون لمس قاعدة البيانات.
                </div>
              </div>
            </div>
          </div>

          <div class="hidden sm:flex items-center gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/5 border border-white/10 text-white/80 text-xs">
              <i class="fa-regular fa-clock"></i>
              <span>{{ $tzOptions[$ui['tz_mode']] ?? 'توقيت النظام' }}</span>
              <span class="opacity-60">•</span>
              <span>{{ $clockOptions[$ui['clock']] ?? '24 ساعة' }}</span>
            </span>

            <a href="{{ url()->previous() }}"
               class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 text-white text-sm font-bold">
              <i class="fa-solid fa-arrow-right"></i>
              رجوع
            </a>
          </div>
        </div>

        {{-- STATS --}}
        <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
          @php
            $cards = [];

            if ($tab === 'reports') {
              $cards = [
                ['k'=>'total','t'=>'إجمالي التقارير','i'=>'fa-solid fa-layer-group'],
                ['k'=>'last7','t'=>'آخر 7 أيام','i'=>'fa-solid fa-calendar-week'],
                ['k'=>'regular','t'=>'عادية','i'=>'fa-solid fa-circle'],
                ['k'=>'plus','t'=>'Plus','i'=>'fa-solid fa-circle-plus'],
                ['k'=>'issues','t'=>'فيها مشاكل','i'=>'fa-solid fa-triangle-exclamation'],
                ['k'=>'progress','t'=>'فيها تقدم','i'=>'fa-solid fa-arrow-trend-up'],
              ];
            } else {
              $cards = [
                ['k'=>'total','t'=>'إجمالي المواعيد','i'=>'fa-solid fa-calendar-days'],
                ['k'=>'upcoming','t'=>'قادمة','i'=>'fa-solid fa-clock'],
                ['k'=>'active','t'=>'نشطة','i'=>'fa-solid fa-bolt'],
                ['k'=>'finished','t'=>'منتهية','i'=>'fa-solid fa-check'],
                ['k'=>'cancelled','t'=>'ملغاة','i'=>'fa-solid fa-ban'],
                ['k'=>'plus','t'=>'Plus','i'=>'fa-solid fa-circle-plus'],
              ];
            }
          @endphp

          @foreach($cards as $c)
            <div class="rounded-2xl bg-white/5 border border-white/10 px-3 py-3">
              <div class="flex items-center justify-between">
                <div class="text-white/70 text-[12px] font-semibold">{{ $c['t'] }}</div>
                <i class="{{ $c['i'] }} text-white/35 text-sm"></i>
              </div>
              <div class="mt-1 text-white text-lg font-extrabold">{{ (int)($stats[$c['k']] ?? 0) }}</div>
            </div>
          @endforeach
        </div>
      </div>
    </div>

    {{-- TOP CONTROLS --}}
    <div class="rounded-3xl bg-white/5 border border-white/10 p-3 sm:p-4">
      <form id="imanProactiveFilters" method="GET" action="{{ $baseUrl }}" class="space-y-3">
        <input type="hidden" name="section" value="{{ $section }}">
        <input type="hidden" name="tab" value="{{ $tab }}">
        <input type="hidden" name="view" value="{{ $view }}">

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-2.5">
          {{-- Search --}}
          <div class="lg:col-span-4">
            <label class="block text-[12px] font-bold text-white/80 mb-1">بحث</label>
            <div class="relative">
              <i class="fa-solid fa-magnifying-glass absolute top-1/2 -translate-y-1/2 right-3 text-white/30"></i>
              <input name="q" value="{{ $q }}"
                     class="w-full rounded-2xl border border-white/10 bg-black/30 px-10 py-2.5 text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30"
                     placeholder="مضيف… صاحب اللايف… ملخص… ملاحظات…">
            </div>
          </div>

          {{-- Type --}}
          <div class="lg:col-span-2">
            <label class="block text-[12px] font-bold text-white/80 mb-1">النوع</label>
            <select name="type"
                    class="w-full rounded-2xl border border-white/10 bg-black/30 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
              <option value="">الكل</option>
              <option value="regular" @selected($type==='regular')>عادي</option>
              <option value="plus" @selected($type==='plus')>Plus</option>
            </select>
          </div>

          {{-- Platform --}}
          <div class="lg:col-span-2">
            <label class="block text-[12px] font-bold text-white/80 mb-1">المنصّة</label>
            <select name="platform"
                    class="w-full rounded-2xl border border-white/10 bg-black/30 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
              @foreach($platforms as $k=>$v)
                <option value="{{ $k }}" @selected((string)$plat===(string)$k)>{{ $v }}</option>
              @endforeach
            </select>
          </div>

          {{-- Status (reports) --}}
          <div class="lg:col-span-2">
            <label class="block text-[12px] font-bold text-white/80 mb-1">
              {{ $tab==='reports' ? 'حالة رد البرنامج' : 'الحالة' }}
            </label>
            <select name="status"
                    class="w-full rounded-2xl border border-white/10 bg-black/30 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
              @if($tab==='reports')
                <option value="">الكل</option>
                <option value="pending"  @selected($status==='pending')>بانتظار</option>
                <option value="approved" @selected($status==='approved')>مقبول</option>
                <option value="rejected" @selected($status==='rejected')>مرفوض</option>
              @else
                <option value="">الكل</option>
                <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>

          {{-- Dates --}}
          <div class="lg:col-span-2 grid grid-cols-2 gap-2">
            <div>
              <label class="block text-[12px] font-bold text-white/80 mb-1">من</label>
              <input type="date" name="from" value="{{ $from }}"
                     class="w-full rounded-2xl border border-white/10 bg-black/30 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
            </div>
            <div>
              <label class="block text-[12px] font-bold text-white/80 mb-1">إلى</label>
              <input type="date" name="to" value="{{ $to }}"
                     class="w-full rounded-2xl border border-white/10 bg-black/30 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
            </div>
          </div>

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

          {{-- Tabs + View --}}
          <div class="lg:col-span-3 grid grid-cols-2 gap-2">
            <div>
              <label class="block text-[12px] font-bold text-white/80 mb-1">المحتوى</label>
              <div class="flex items-center gap-2">
                <button type="button" data-iman-proactive-settab="reports"
                        class="flex-1 px-3 py-2.5 rounded-2xl border text-sm font-extrabold
                        {{ $tab==='reports' ? 'bg-white/15 text-white border-white/15' : 'bg-black/30 text-white/70 border-white/10 hover:bg-white/10' }}">
                  تقارير
                </button>
                <button type="button" data-iman-proactive-settab="schedules"
                        class="flex-1 px-3 py-2.5 rounded-2xl border text-sm font-extrabold
                        {{ $tab==='schedules' ? 'bg-white/15 text-white border-white/15' : 'bg-black/30 text-white/70 border-white/10 hover:bg-white/10' }}">
                  مواعيد
                </button>
              </div>
            </div>

            <div>
              <label class="block text-[12px] font-bold text-white/80 mb-1">العرض</label>
              <div class="flex items-center gap-2">
                <button type="button" data-iman-proactive-setview="table"
                        class="flex-1 px-3 py-2.5 rounded-2xl border text-sm font-extrabold
                        {{ $view==='table' ? 'bg-fuchsia-600 text-white border-fuchsia-500/40' : 'bg-black/30 text-white/70 border-white/10 hover:bg-white/10' }}">
                  جدول
                </button>
                <button type="button" data-iman-proactive-setview="cards"
                        class="flex-1 px-3 py-2.5 rounded-2xl border text-sm font-extrabold
                        {{ $view==='cards' ? 'bg-fuchsia-600 text-white border-fuchsia-500/40' : 'bg-black/30 text-white/70 border-white/10 hover:bg-white/10' }}">
                  كروت
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-2 pt-1">
          <div class="text-xs text-white/55 flex items-center gap-2">
            <i class="fa-solid fa-circle-info"></i>
            <span>التوقيت/نظام الساعة يؤثر على العرض فقط.</span>
          </div>

          <div class="flex items-center gap-2">
            <a href="{{ $baseUrl }}?section={{ $section }}&tab={{ $tab }}"
               class="px-3 py-2 rounded-2xl bg-black/30 hover:bg-white/10 border border-white/10 text-white/80 text-sm font-bold">
              تصفير
            </a>

            <button type="submit"
                    class="px-4 py-2 rounded-2xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 text-white text-sm font-extrabold shadow-lg shadow-fuchsia-600/20 hover:opacity-95">
              تطبيق
            </button>

            @if($tab==='reports' && $reportsCreateUrl)
              <a href="{{ $reportsCreateUrl }}"
                 class="px-4 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-sm font-extrabold">
                <i class="fa-solid fa-plus ml-1"></i> تقرير جديد
              </a>
            @endif

            @if($tab==='schedules' && $schedulesCreateUrl)
              <a href="{{ $schedulesCreateUrl }}"
                 class="px-4 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-sm font-extrabold">
                <i class="fa-solid fa-plus ml-1"></i> موعد جديد
              </a>
            @endif
          </div>
        </div>
      </form>
    </div>

    {{-- CONTENT --}}
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/95 via-slate-900/95 to-black/95 shadow-2xl overflow-hidden">
      <div class="p-4 sm:p-5 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <span class="inline-flex w-10 h-10 items-center justify-center rounded-2xl
                      {{ $tab==='reports' ? 'bg-cyan-500/15 border-cyan-400/20 text-cyan-200' : 'bg-amber-500/15 border-amber-400/20 text-amber-200' }}
                      border shadow">
            <i class="{{ $tab==='reports' ? 'fa-solid fa-file-lines' : 'fa-solid fa-calendar-check' }} text-sm"></i>
          </span>
          <div>
            <div class="text-white font-extrabold">
              {{ $tab==='reports' ? 'تقارير ProActive' : 'مواعيد ProActive' }}
            </div>
            <div class="text-white/60 text-xs">
              {{ $tzOptions[$ui['tz_mode']] ?? '' }} • {{ $clockOptions[$ui['clock']] ?? '' }}
            </div>
          </div>
        </div>
      </div>

      <div class="px-4 sm:px-5 pb-5">
        @if(!$rows || (method_exists($rows,'count') && $rows->count()===0))
          <div class="rounded-3xl bg-white/5 border border-white/10 p-6 text-center">
            <div class="text-white font-extrabold text-lg">لا يوجد بيانات ضمن هذه الفلاتر</div>
            <div class="text-white/60 text-sm mt-1">جرّب تغيّر الفترة أو البحث.</div>
          </div>
        @else

          {{-- TABLE --}}
          @if($view === 'table')
            <div class="overflow-x-auto rounded-3xl border border-white/10 bg-white/5">
              <table class="min-w-full text-sm">
                <thead class="bg-black/35 text-white/80">
                  <tr>
                    @if($tab==='reports')
                      <th class="px-3 py-3 text-right font-extrabold whitespace-nowrap">التاريخ/الوقت</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 whitespace-nowrap">المنصّة</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 whitespace-nowrap">إجراءات</th>
                    @else
                      <th class="px-3 py-3 text-right font-extrabold whitespace-nowrap">التاريخ/الوقت</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 whitespace-nowrap">المنصّة</th>
                      <th class="px-3 py-3 text-right font-extrabold">الحالة</th>
                      <th class="px-3 py-3 text-right font-extrabold">مسجّل الموعد</th>
                    @endif
                  </tr>
                </thead>

                <tbody class="divide-y divide-white/10">
                  @foreach($rows as $r)
                    @if($tab==='reports')
                      @php
                        $platText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
                        $gradeMap = ['good'=>'جيد','very_good'=>'جيد جدًا','excellent'=>'ممتاز'];
                        $gradeText = $gradeMap[$r->live_grade ?? ''] ?? ($r->live_grade ?? '—');
                        $dtDisp = $r->activity_datetime_display ?? (($r->activity_date ?? '—'));
                        $creator = $r->creator_name ?? '—';

                        $payload = [
                          'id' => $r->id ?? null,
                          'dt' => $dtDisp,
                          'created' => $r->created_at_display ?? ($r->created_at ?? '—'),
                          'host' => $r->live_host ?? '—',
                          'owner' => $r->live_owner_name ?? '—',
                          'platform' => $platText,
                          'grade' => $gradeText,
                          'summary' => $r->short_summary ?? '—',
                          'positive' => $r->positive_notes ?? '—',
                          'negative' => $r->negative_notes ?? '—',
                          'issues' => ((int)($r->had_issues ?? 0)===1) ? ($r->issues_text ?? '—') : null,
                          'progress' => ((int)($r->had_progress ?? 0)===1) ? ($r->progress_text ?? '—') : null,
                          'general_issues' => $r->general_issues ?? null,
                          'creator' => $creator,
                          'link' => $r->live_link ?? null,
                          'type' => $r->activity_type ?? null,
                          'status' => $r->program_status ?? null,
                          'friends' => $r->new_friends ?? null,
                          'inv' => $r->invitations_sent ?? null,
                        ];
                      @endphp

                      <tr class="hover:bg-white/5">
                        <td class="px-3 py-3 text-white/90 whitespace-nowrap">
                          <div class="font-extrabold">{{ $dtDisp }}</div>
                          <div class="text-xs text-white/50">سجّل: {{ $r->created_at_display ?? ($r->created_at ?? '—') }}</div>
                        </td>
                        <td class="px-3 py-3 text-white font-semibold">{{ $r->live_host ?? '—' }}</td>
                        <td class="px-3 py-3 text-white/80">{{ $r->live_owner_name ?? '—' }}</td>
                        <td class="px-3 py-3 text-white/80 whitespace-nowrap">{{ $platText }}</td>
                        <td class="px-3 py-3">
                          <span class="inline-flex items-center px-2.5 py-1 rounded-2xl text-xs font-extrabold
                            @class([
                              'bg-emerald-500/15 text-emerald-200 border border-emerald-400/20' => ($r->live_grade ?? '')==='excellent',
                              'bg-sky-500/15 text-sky-200 border border-sky-400/20' => ($r->live_grade ?? '')==='very_good',
                              'bg-amber-500/15 text-amber-200 border border-amber-400/20' => ($r->live_grade ?? '')==='good',
                              'bg-white/10 text-white/70 border border-white/10' => !in_array(($r->live_grade ?? ''), ['good','very_good','excellent'], true),
                            ])">
                            {{ $gradeText }}
                          </span>

                          @if((int)($r->had_issues ?? 0)===1)
                            <span class="mr-2 inline-flex items-center px-2 py-1 rounded-2xl text-[11px] font-bold bg-rose-500/15 text-rose-200 border border-rose-400/20">مشاكل</span>
                          @endif
                          @if((int)($r->had_progress ?? 0)===1)
                            <span class="mr-2 inline-flex items-center px-2 py-1 rounded-2xl text-[11px] font-bold bg-indigo-500/15 text-indigo-200 border border-indigo-400/20">تقدّم</span>
                          @endif
                        </td>
                        <td class="px-3 py-3 text-white/80">{{ $creator }}</td>
                        <td class="px-3 py-3 whitespace-nowrap">
                          <button type="button"
                                  data-iman-proactive-open-report='@json($payload)'
                                  class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold">
                            <i class="fa-solid fa-eye"></i>
                            عرض
                          </button>
                        </td>
                      </tr>
                    @else
                      @php
                        $platText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
                        $dtDisp = $r->event_datetime_display ?? (($r->event_date ?? '—') . ' • ' . ($r->event_time_display ?? ($r->event_time ?? '—')));
                        $creator = $r->creator_name ?? '—';
                      @endphp

                      <tr class="hover:bg-white/5">
                        <td class="px-3 py-3 text-white/90 whitespace-nowrap font-extrabold">{{ $dtDisp }}</td>
                        <td class="px-3 py-3 text-white font-semibold">{{ $r->event_title ?? '—' }}</td>
                        <td class="px-3 py-3 text-white/80">{{ $r->leader_name ?? '—' }}</td>
                        <td class="px-3 py-3 text-white/80 whitespace-nowrap">{{ $platText }}</td>
                        <td class="px-3 py-3">
                          <span class="inline-flex items-center px-2.5 py-1 rounded-2xl text-xs font-extrabold
                            @class([
                              'bg-sky-500/15 text-sky-200 border border-sky-400/20' => ($r->status ?? '')==='upcoming',
                              'bg-emerald-500/15 text-emerald-200 border border-emerald-400/20' => ($r->status ?? '')==='active',
                              'bg-slate-500/15 text-slate-200 border border-slate-400/20' => ($r->status ?? '')==='finished',
                              'bg-rose-500/15 text-rose-200 border border-rose-400/20' => ($r->status ?? '')==='cancelled',
                              'bg-white/10 text-white/70 border border-white/10' => !in_array(($r->status ?? ''), ['upcoming','active','finished','cancelled'], true),
                            ])">
                            {{ match($r->status ?? '') {
                              'upcoming' => 'قادم',
                              'active' => 'نشط',
                              'finished' => 'منتهي',
                              'cancelled' => 'ملغي',
                              default => ($r->status ?? '—'),
                            } }}
                          </span>
                        </td>
                        <td class="px-3 py-3 text-white/80">{{ $creator }}</td>
                      </tr>
                    @endif
                  @endforeach
                </tbody>
              </table>
            </div>

          {{-- CARDS --}}
          @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              @foreach($rows as $r)
                @if($tab==='reports')
                  @php
                    $platText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
                    $gradeMap = ['good'=>'جيد','very_good'=>'جيد جدًا','excellent'=>'ممتاز'];
                    $gradeText = $gradeMap[$r->live_grade ?? ''] ?? ($r->live_grade ?? '—');
                    $dtDisp = $r->activity_datetime_display ?? (($r->activity_date ?? '—'));
                    $creator = $r->creator_name ?? '—';

                    $payload = [
                      'id' => $r->id ?? null,
                      'dt' => $dtDisp,
                      'created' => $r->created_at_display ?? ($r->created_at ?? '—'),
                      'host' => $r->live_host ?? '—',
                      'owner' => $r->live_owner_name ?? '—',
                      'platform' => $platText,
                      'grade' => $gradeText,
                      'summary' => $r->short_summary ?? '—',
                      'positive' => $r->positive_notes ?? '—',
                      'negative' => $r->negative_notes ?? '—',
                      'issues' => ((int)($r->had_issues ?? 0)===1) ? ($r->issues_text ?? '—') : null,
                      'progress' => ((int)($r->had_progress ?? 0)===1) ? ($r->progress_text ?? '—') : null,
                      'general_issues' => $r->general_issues ?? null,
                      'creator' => $creator,
                      'link' => $r->live_link ?? null,
                      'type' => $r->activity_type ?? null,
                      'status' => $r->program_status ?? null,
                      'friends' => $r->new_friends ?? null,
                      'inv' => $r->invitations_sent ?? null,
                    ];
                  @endphp

                  <div class="rounded-3xl bg-white/5 border border-white/10 p-4 hover:bg-white/[0.07] transition">
                    <div class="flex items-start justify-between gap-2">
                      <div class="text-white font-extrabold">{{ $r->live_host ?? '—' }}</div>
                      <span class="inline-flex items-center px-2.5 py-1 rounded-2xl text-[11px] font-extrabold
                        @class([
                          'bg-emerald-500/15 text-emerald-200 border border-emerald-400/20' => ($r->live_grade ?? '')==='excellent',
                          'bg-sky-500/15 text-sky-200 border border-sky-400/20' => ($r->live_grade ?? '')==='very_good',
                          'bg-amber-500/15 text-amber-200 border border-amber-400/20' => ($r->live_grade ?? '')==='good',
                          'bg-white/10 text-white/70 border border-white/10' => !in_array(($r->live_grade ?? ''), ['good','very_good','excellent'], true),
                        ])">
                        {{ $gradeText }}
                      </span>
                    </div>

                    <div class="mt-1 text-white/60 text-xs">{{ $dtDisp }} • {{ $platText }}</div>

                    <div class="mt-3 space-y-2 text-sm">
                      <div class="text-white/80">
                        <span class="text-white/50">صاحب اللايف:</span>
                        <span class="font-semibold">{{ $r->live_owner_name ?? '—' }}</span>
                      </div>
                      <div class="text-white/80">
                        <span class="text-white/50">ملخص:</span>
                        <span class="font-semibold">{{ $r->short_summary ?? '—' }}</span>
                      </div>
                      <div class="text-white/60 text-xs">
                        مسجّل التقرير: <span class="text-white font-semibold">{{ $creator }}</span>
                      </div>
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                      <div class="flex items-center gap-2">
                        @if((int)($r->had_issues ?? 0)===1)
                          <span class="inline-flex items-center px-2 py-1 rounded-2xl text-[11px] font-bold bg-rose-500/15 text-rose-200 border border-rose-400/20">مشاكل</span>
                        @endif
                        @if((int)($r->had_progress ?? 0)===1)
                          <span class="inline-flex items-center px-2 py-1 rounded-2xl text-[11px] font-bold bg-indigo-500/15 text-indigo-200 border border-indigo-400/20">تقدّم</span>
                        @endif
                      </div>

                      <button type="button"
                              data-iman-proactive-open-report='@json($payload)'
                              class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold">
                        <i class="fa-solid fa-eye"></i>
                        عرض
                      </button>
                    </div>
                  </div>
                @else
                  @php
                    $platText = $platforms[$r->platform ?? ''] ?? ($r->platform ?? '—');
                    $dtDisp = $r->event_datetime_display ?? (($r->event_date ?? '—') . ' • ' . ($r->event_time_display ?? ($r->event_time ?? '—')));
                    $statusText = match($r->status ?? '') {
                      'upcoming' => 'قادم',
                      'active' => 'نشط',
                      'finished' => 'منتهي',
                      'cancelled' => 'ملغي',
                      default => ($r->status ?? '—'),
                    };
                  @endphp

                  <div class="rounded-3xl bg-white/5 border border-white/10 p-4 hover:bg-white/[0.07] transition">
                    <div class="flex items-start justify-between gap-2">
                      <div class="text-white font-extrabold">{{ $r->event_title ?? '—' }}</div>
                      <span class="inline-flex items-center px-2.5 py-1 rounded-2xl text-[11px] font-extrabold bg-white/10 border border-white/10 text-white/80">
                        {{ $statusText }}
                      </span>
                    </div>

                    <div class="mt-1 text-white/60 text-xs">{{ $dtDisp }} • {{ $platText }}</div>

                    <div class="mt-3 text-sm text-white/80">
                      <span class="text-white/50">القائد:</span>
                      <span class="font-semibold">{{ $r->leader_name ?? '—' }}</span>
                    </div>

                    @if(!empty($r->notes))
                      <div class="mt-2 text-xs text-white/60 line-clamp-3">{{ $r->notes }}</div>
                    @endif
                  </div>
                @endif
              @endforeach
            </div>
          @endif

          {{-- Pagination --}}
          @if(is_object($rows) && method_exists($rows,'links'))
            <div class="mt-4">
              <div class="rounded-3xl bg-white/5 border border-white/10 px-3 py-3">
                {!! $rows->links() !!}
              </div>
            </div>
          @endif

        @endif
      </div>
    </div>

  </div>

  {{-- REPORT VIEW MODAL --}}
  <div id="imanProactiveReportModal" class="hidden fixed inset-0 z-[9999]">
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" data-iman-proactive-close></div>

    <div class="relative max-w-3xl mx-auto mt-6 sm:mt-10 px-3">
      <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950 via-slate-900 to-black shadow-2xl overflow-hidden">
        <div class="p-4 sm:p-5 flex items-start justify-between gap-3 border-b border-white/10">
          <div class="flex items-center gap-3">
            <span class="inline-flex w-10 h-10 items-center justify-center rounded-2xl bg-cyan-500/15 border border-cyan-400/20 text-cyan-200">
              <i class="fa-solid fa-eye text-sm"></i>
            </span>
            <div>
              <div class="text-white font-extrabold text-lg">عرض تقرير ProActive</div>
              <div class="text-white/60 text-xs" id="imanProactiveReportModalSub">—</div>
            </div>
          </div>

          <button type="button" class="px-3 py-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 text-white"
                  data-iman-proactive-close>
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>

        <div class="p-4 sm:p-5 space-y-4 max-h-[72vh] overflow-auto">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-xs font-bold">التاريخ/الوقت</div>
              <div class="text-white font-extrabold mt-1" id="rp_dt">—</div>
              <div class="text-white/50 text-xs mt-1">سجّل: <span id="rp_created">—</span></div>
            </div>
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-xs font-bold">مسجّل التقرير</div>
              <div class="text-white font-extrabold mt-1" id="rp_creator">—</div>
              <div class="text-white/50 text-xs mt-1" id="rp_meta">—</div>
            </div>
          </div>

          <div class="rounded-2xl bg-white/5 border border-white/10 p-3 space-y-2">
            <div class="flex flex-wrap items-center justify-between gap-2">
              <div class="text-white font-extrabold text-base" id="rp_host">—</div>
              <div class="inline-flex items-center gap-2">
                <span class="px-2.5 py-1 rounded-2xl text-xs font-extrabold bg-white/10 border border-white/10 text-white/80" id="rp_platform">—</span>
                <span class="px-2.5 py-1 rounded-2xl text-xs font-extrabold bg-white/10 border border-white/10 text-white/80" id="rp_grade">—</span>
              </div>
            </div>

            <div class="text-white/70 text-sm">
              <span class="text-white/50">صاحب اللايف:</span>
              <span class="font-semibold" id="rp_owner">—</span>
            </div>

            <a id="rp_link_wrap" href="#" target="_blank" class="hidden text-xs font-bold text-cyan-200 hover:text-cyan-100">
              <i class="fa-solid fa-link ml-1"></i> رابط اللايف
            </a>
          </div>

          <div class="grid grid-cols-1 gap-3">
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-xs font-bold mb-1">الملخص</div>
              <div class="text-white text-sm leading-relaxed" id="rp_summary">—</div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-xs font-bold mb-1">إيجابيات</div>
              <div class="text-white text-sm leading-relaxed" id="rp_positive">—</div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-xs font-bold mb-1">سلبيات</div>
              <div class="text-white text-sm leading-relaxed" id="rp_negative">—</div>
            </div>

            <div class="rounded-2xl bg-rose-500/10 border border-rose-400/15 p-3 hidden" id="rp_issues_box">
              <div class="text-rose-200 text-xs font-extrabold mb-1"><i class="fa-solid fa-triangle-exclamation ml-1"></i> مشاكل</div>
              <div class="text-white text-sm leading-relaxed" id="rp_issues">—</div>
            </div>

            <div class="rounded-2xl bg-indigo-500/10 border border-indigo-400/15 p-3 hidden" id="rp_progress_box">
              <div class="text-indigo-200 text-xs font-extrabold mb-1"><i class="fa-solid fa-arrow-trend-up ml-1"></i> تقدّم</div>
              <div class="text-white text-sm leading-relaxed" id="rp_progress">—</div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 p-3 hidden" id="rp_general_issues_box">
              <div class="text-white/60 text-xs font-bold mb-1">ملاحظات/مشاكل عامة</div>
              <div class="text-white text-sm leading-relaxed" id="rp_general_issues">—</div>
            </div>
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-[11px] font-bold">أصدقاء جدد</div>
              <div class="text-white font-extrabold mt-1" id="rp_friends">—</div>
            </div>
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-[11px] font-bold">دعوات</div>
              <div class="text-white font-extrabold mt-1" id="rp_inv">—</div>
            </div>
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-[11px] font-bold">نوع النشاط</div>
              <div class="text-white font-extrabold mt-1" id="rp_type">—</div>
            </div>
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-white/60 text-[11px] font-bold">حالة البرنامج</div>
              <div class="text-white font-extrabold mt-1" id="rp_status">—</div>
            </div>
          </div>

        </div>

        <div class="p-4 sm:p-5 border-t border-white/10 flex items-center justify-end gap-2">
          <button type="button" class="px-4 py-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-extrabold"
                  data-iman-proactive-close>
            إغلاق
          </button>
        </div>
      </div>
    </div>
  </div>

</div>

{{-- Scoped JS (NO GLOBALS, NO conflicts) --}}
<script>
(() => {
  const root = document.getElementById('iman-proactive-root');
  if (!root) return;

  const form = root.querySelector('#imanProactiveFilters');
  if (!form) return;

  const viewInput = form.querySelector('input[name="view"]');
  const tabInput  = form.querySelector('input[name="tab"]');

  root.querySelectorAll('[data-iman-proactive-setview]').forEach(btn => {
    btn.addEventListener('click', () => {
      if (viewInput) viewInput.value = btn.getAttribute('data-iman-proactive-setview') || 'table';
      form.requestSubmit();
    }, { passive: true });
  });

  root.querySelectorAll('[data-iman-proactive-settab]').forEach(btn => {
    btn.addEventListener('click', () => {
      if (tabInput) tabInput.value = btn.getAttribute('data-iman-proactive-settab') || 'reports';
      form.requestSubmit();
    }, { passive: true });
  });

  // Report modal
  const modal = root.querySelector('#imanProactiveReportModal');
  const closeBtns = root.querySelectorAll('[data-iman-proactive-close]');
  const openBtns  = root.querySelectorAll('[data-iman-proactive-open-report]');

  const $ = (id) => modal ? modal.querySelector('#'+id) : null;

  function setText(el, val) {
    if (!el) return;
    el.textContent = (val === null || val === undefined || val === '') ? '—' : String(val);
  }

  function showBox(boxId, textId, val) {
    const box = modal.querySelector('#' + boxId);
    const txt = modal.querySelector('#' + textId);
    if (!box || !txt) return;
    if (val === null || val === undefined || val === '') {
      box.classList.add('hidden');
    } else {
      box.classList.remove('hidden');
      txt.textContent = String(val);
    }
  }

  function openModal(payload) {
    if (!modal) return;

    setText($('imanProactiveReportModalSub'), payload.dt || '—');
    setText($('rp_dt'), payload.dt);
    setText($('rp_created'), payload.created);
    setText($('rp_creator'), payload.creator);
    setText($('rp_meta'), (payload.platform ? (payload.platform + ' • ') : '') + (payload.grade ? payload.grade : ''));

    setText($('rp_host'), payload.host);
    setText($('rp_owner'), payload.owner);
    setText($('rp_platform'), payload.platform);
    setText($('rp_grade'), payload.grade);

    const linkWrap = modal.querySelector('#rp_link_wrap');
    if (linkWrap && payload.link) {
      linkWrap.classList.remove('hidden');
      linkWrap.setAttribute('href', payload.link);
    } else if (linkWrap) {
      linkWrap.classList.add('hidden');
      linkWrap.setAttribute('href', '#');
    }

    setText($('rp_summary'), payload.summary);
    setText($('rp_positive'), payload.positive);
    setText($('rp_negative'), payload.negative);

    showBox('rp_issues_box', 'rp_issues', payload.issues);
    showBox('rp_progress_box', 'rp_progress', payload.progress);
    showBox('rp_general_issues_box', 'rp_general_issues', payload.general_issues);

    setText($('rp_friends'), payload.friends);
    setText($('rp_inv'), payload.inv);
    setText($('rp_type'), payload.type);
    setText($('rp_status'), payload.status);

    modal.classList.remove('hidden');
    document.documentElement.classList.add('overflow-hidden');
  }

  function closeModal() {
    if (!modal) return;
    modal.classList.add('hidden');
    document.documentElement.classList.remove('overflow-hidden');
  }

  openBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      try {
        const raw = btn.getAttribute('data-iman-proactive-open-report');
        const payload = raw ? JSON.parse(raw) : null;
        if (payload) openModal(payload);
      } catch (e) {}
    });
  });

  closeBtns.forEach(btn => btn.addEventListener('click', closeModal));
  window.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); }, { passive: true });
})();
</script>
@endsection