{{-- resources/views/superadmin/falcon-rola-notes/review.blade.php --}}
@extends('layouts.superadmin')

@section('title','مركز مراجعة الإدارة — ملاحظات الصقر/رولا + تقارير ProActive')
@section('page-title','🧠 مركز المراجعة الذكي — إدارة سريعة')

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

  $notesAgg = $notesAgg ?? null;
  $reportsAgg = $reportsAgg ?? null;

  $pendingNotes   = (int)($notesAgg->pending ?? 0);
  $pendingReports = (int)($reportsAgg->pending ?? 0);
  $staleNotes     = (int)($notesAgg->stale_pending ?? 0);
  $staleReports   = (int)($reportsAgg->stale_pending ?? 0);

  $totalPending = $pendingNotes + $pendingReports;
  $totalStale   = $staleNotes + $staleReports;
  $riskApprox   = (int)($reportsRiskApprox ?? 0);

  $src = $source ?? 'all';
  $viewerDefault = 'drawer'; // سيتم حفظه localStorage للمدير
@endphp

<div class="space-y-6" id="reviewHub"
     data-details-template="{{ $detailsUrl ? $detailsUrl : '' }}"
     data-default-viewer="{{ $viewerDefault }}"
     dir="rtl">

  {{-- HERO --}}
  <div class="relative overflow-hidden rounded-3xl border border-slate-200/70 dark:border-slate-800/70
              bg-gradient-to-r from-indigo-700 via-violet-700 to-sky-700 text-white p-6">

    <div class="absolute inset-0 opacity-20 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 800 400" fill="none">
        <defs>
          <linearGradient id="gR" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#A855F7"/>
            <stop offset="100%" stop-color="#38BDF8"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="160" fill="url(#gR)" />
        <circle cx="700" cy="300" r="220" fill="url(#gR)" opacity="0.6" />
      </svg>
    </div>

    <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
      <div class="flex items-start gap-4">
        <div class="flex items-center justify-center w-14 h-14 rounded-2xl bg-white/15 ring-1 ring-white/20">
          <i class="fa-solid fa-brain text-2xl"></i>
        </div>
        <div>
          <h1 class="text-2xl md:text-3xl font-extrabold">
            مركز المراجعة الذكي — Falcon/Rola + ProActive
          </h1>
          <p class="text-white/80 mt-1 leading-relaxed text-sm md:text-base">
            شاشة واحدة لتقييم سريع، اقتراحات رفض ذكية، وتفاصيل كاملة داخل Drawer/Modal/Panel حسب تفضيل المدير.
            <span class="font-bold">بدون تغيير أي خوارزمية.</span>
          </p>

          <div class="mt-3 flex flex-wrap items-center gap-2 text-xs">
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-lock"></i> وصول محمي
            </span>
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-wand-magic-sparkles"></i> اقتراحات رفض (Assist)
            </span>
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-chart-line"></i> KPI + تنبيهات
            </span>
          </div>
        </div>
      </div>

      {{-- Tabs Source --}}
      <div class="flex flex-wrap items-center gap-2">
        @php
          $tabCls = fn($on) => $on
            ? 'bg-white text-slate-900'
            : 'bg-white/10 text-white hover:bg-white/15';
        @endphp

        <a href="{{ request()->fullUrlWithQuery(['source'=>'all','notes_page'=>null,'reports_page'=>null]) }}"
           class="px-4 py-2 rounded-2xl text-xs font-extrabold {{ $tabCls($src==='all') }}">
          الكل
        </a>

        <a href="{{ request()->fullUrlWithQuery(['source'=>'notes','notes_page'=>null,'reports_page'=>null]) }}"
           class="px-4 py-2 rounded-2xl text-xs font-extrabold {{ $tabCls($src==='notes') }}">
          ملاحظات الصقر/رولا
        </a>

        <a href="{{ request()->fullUrlWithQuery(['source'=>'reports','notes_page'=>null,'reports_page'=>null]) }}"
           class="px-4 py-2 rounded-2xl text-xs font-extrabold {{ $tabCls($src==='reports') }}">
          تقارير ProActive
        </a>
      </div>
    </div>
  </div>

  {{-- TOOLBAR (Filters + Search + Viewer choice) --}}
  <form method="GET"
        class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70
               bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl p-4">

    <input type="hidden" name="source" value="{{ $src }}"/>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">

      {{-- Search --}}
      <div class="lg:col-span-5">
        <label class="block text-[11px] font-bold text-slate-600 dark:text-slate-300 mb-1">بحث سريع</label>
        <div class="relative">
          <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
          <input name="q" value="{{ $q ?? '' }}"
                 class="w-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-950/30
                        px-10 py-2 text-sm text-slate-900 dark:text-white"
                 placeholder="ابحث: عنوان/محتوى/لايف/صاحب لايف/منصة..." />
        </div>
      </div>

      {{-- Status --}}
      <div class="lg:col-span-2">
        <label class="block text-[11px] font-bold text-slate-600 dark:text-slate-300 mb-1">الحالة</label>
        <select name="status"
                class="w-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-950/30
                       px-3 py-2 text-sm text-slate-900 dark:text-white">
          <option value="">كل الحالات</option>
          <option value="pending"  @selected(($status ?? null) === 'pending')>🕓 Pending</option>
          <option value="approved" @selected(($status ?? null) === 'approved')>✅ Approved</option>
          <option value="rejected" @selected(($status ?? null) === 'rejected')>❌ Rejected</option>
        </select>
      </div>

      {{-- Risk --}}
      <div class="lg:col-span-2">
        <label class="block text-[11px] font-bold text-slate-600 dark:text-slate-300 mb-1">فلتر الخطر</label>
        <select name="risk"
                class="w-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-950/30
                       px-3 py-2 text-sm text-slate-900 dark:text-white">
          <option value="all"        @selected(($risk ?? 'all') === 'all')>الكل</option>
          <option value="risky"      @selected(($risk ?? '') === 'risky')>🚨 بخطر</option>
          <option value="duplicates" @selected(($risk ?? '') === 'duplicates')>🧬 مكرر</option>
          <option value="stale"      @selected(($risk ?? '') === 'stale')>⏱️ Pending قديم</option>
        </select>
      </div>

      {{-- Sort --}}
      <div class="lg:col-span-2">
        <label class="block text-[11px] font-bold text-slate-600 dark:text-slate-300 mb-1">ترتيب</label>
        <select name="sort"
                class="w-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-950/30
                       px-3 py-2 text-sm text-slate-900 dark:text-white">
          <option value="new"  @selected(($sort ?? 'new') === 'new')>الأحدث</option>
          <option value="old"  @selected(($sort ?? '') === 'old')>الأقدم</option>
          <option value="risk" @selected(($sort ?? '') === 'risk')>الأخطر أولاً</option>
        </select>
      </div>

      {{-- Apply --}}
      <div class="lg:col-span-1 flex items-end">
        <button type="submit"
                class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-900 text-white
                       px-4 py-2 text-sm font-extrabold hover:bg-slate-800
                       dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white">
          <i class="fa-solid fa-filter"></i> تطبيق
        </button>
      </div>
    </div>

    {{-- Viewer mode selector (saved locally) --}}
    <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-xs">
      <div class="text-slate-500 dark:text-slate-300">
        تلميح: اضغط “عرض التفاصيل” لفتح Drawer/Modal/Panel حسب تفضيلك.
      </div>

      <div class="flex items-center gap-2">
        <span class="text-slate-600 dark:text-slate-300 font-bold">وضع العرض:</span>
        <select id="viewerMode"
                class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-950/30 px-3 py-1.5">
          <option value="drawer">Drawer</option>
          <option value="modal">Modal</option>
          <option value="panel">Panel (Inline)</option>
        </select>
      </div>
    </div>
  </form>

  {{-- GLOBAL ALERTS --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <div class="rounded-3xl border border-amber-200/70 dark:border-amber-900/50 bg-amber-50/70 dark:bg-amber-950/20 p-4">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-[11px] text-amber-700/80 dark:text-amber-200/80 font-bold">تحت المراجعة</div>
          <div class="text-2xl font-extrabold text-amber-900 dark:text-amber-100">{{ $totalPending }}</div>
        </div>
        <span class="h-10 w-10 rounded-2xl grid place-items-center bg-amber-500/15 text-amber-700 dark:text-amber-200">
          <i class="fa-solid fa-hourglass-half"></i>
        </span>
      </div>
      <div class="mt-2 text-xs text-amber-700/80 dark:text-amber-200/80">
        Notes Pending: <b>{{ $pendingNotes }}</b> — Reports Pending: <b>{{ $pendingReports }}</b>
      </div>
    </div>

    <div class="rounded-3xl border border-orange-200/70 dark:border-orange-900/50 bg-orange-50/70 dark:bg-orange-950/20 p-4">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-[11px] text-orange-700/80 dark:text-orange-200/80 font-bold">Pending قديم (+24h)</div>
          <div class="text-2xl font-extrabold text-orange-900 dark:text-orange-100">{{ $totalStale }}</div>
        </div>
        <span class="h-10 w-10 rounded-2xl grid place-items-center bg-orange-500/15 text-orange-700 dark:text-orange-200">
          <i class="fa-solid fa-clock"></i>
        </span>
      </div>
      <div class="mt-2 text-xs text-orange-700/80 dark:text-orange-200/80">
        يحتاج قرار سريع أو طلب إعادة تعبئة.
      </div>
    </div>

    <div class="rounded-3xl border border-rose-200/70 dark:border-rose-900/50 bg-rose-50/70 dark:bg-rose-950/20 p-4">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-[11px] text-rose-700/80 dark:text-rose-200/80 font-bold">تقارير بخطر (تقريبي)</div>
          <div class="text-2xl font-extrabold text-rose-900 dark:text-rose-100">{{ $riskApprox }}</div>
        </div>
        <span class="h-10 w-10 rounded-2xl grid place-items-center bg-rose-500/15 text-rose-700 dark:text-rose-200">
          <i class="fa-solid fa-triangle-exclamation"></i>
        </span>
      </div>
      <div class="mt-2 text-xs text-rose-700/80 dark:text-rose-200/80">
        (Pending قديم + نقص بيانات) — التكرار يظهر بالـ Viewer كاقتراح رفض.
      </div>
    </div>
  </div>

  {{-- مكتب الاستعلامات (كما هو لكن أنظف) --}}
  <div id="status-help"
       class="rounded-3xl border border-indigo-200/50 dark:border-indigo-800/50
              bg-gradient-to-r from-indigo-50 to-sky-50 dark:from-slate-900/60 dark:to-slate-950/40
              p-6 shadow-sm">
    <div class="flex items-start gap-4">
      <div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-600 text-white shadow">
        <i class="fa-solid fa-circle-info text-xl"></i>
      </div>
      <div class="space-y-2">
        <h3 class="text-lg font-extrabold text-indigo-900 dark:text-indigo-200">
          📘 مكتب الاستعلامات — معنى حالة رد البرنامج
        </h3>

        <div class="space-y-2 text-sm leading-relaxed text-slate-700 dark:text-slate-200">
          <div class="flex items-start gap-2">
            <span class="font-extrabold text-amber-600">🕓 Pending:</span>
            <span>قيد المراجعة. يُفضل مراجعة العناصر القديمة (+24h) بسرعة.</span>
          </div>
          <div class="flex items-start gap-2">
            <span class="font-extrabold text-rose-600">❌ Rejected:</span>
            <span>رفض مع توضيح السبب. يفضل استخدام “اقتراحات الرفض” لتوحيد الأسباب.</span>
          </div>
          <div class="flex items-start gap-2">
            <span class="font-extrabold text-emerald-600">✅ Approved:</span>
            <span>تم القبول وسيُؤخذ بعين الاعتبار ضمن برنامج ProActive.</span>
          </div>

          <div class="mt-2 text-xs text-slate-500 dark:text-slate-300">
            قاعدة ذهبية: <b>وجود تاريخ/رقم واضح</b> يساعد التقييم السريع جدًا.
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Flash --}}
  @if (session('success'))
    <div class="rounded-2xl border border-emerald-300 bg-emerald-50 p-4 text-emerald-800 text-sm">
      {{ session('success') }}
    </div>
  @endif
  @if (session('error'))
    <div class="rounded-2xl border border-rose-300 bg-rose-50 p-4 text-rose-800 text-sm">
      {{ session('error') }}
    </div>
  @endif

  {{-- Risk Center --}}
  <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl p-5">
    <div class="flex items-center justify-between gap-3">
      <div>
        <div class="text-sm font-extrabold text-slate-900 dark:text-white">🚨 رادار الخطر</div>
        <div class="text-xs text-slate-500 dark:text-slate-300">
          عناصر تحتاج انتباه سريع (Pending قديم / تكرار / نقص بيانات).
        </div>
      </div>

      <a href="{{ request()->fullUrlWithQuery(['risk'=>'risky','sort'=>'risk','notes_page'=>null,'reports_page'=>null]) }}"
         class="text-xs font-extrabold text-rose-700 dark:text-rose-200 hover:underline">
        عرض كل “بخطر”
      </a>
    </div>

    <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-3">
      {{-- Risk Notes --}}
      <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800 p-4">
        <div class="flex items-center justify-between">
          <div class="text-xs font-extrabold text-slate-900 dark:text-white">ملاحظات</div>
          <div class="text-[11px] text-slate-500 dark:text-slate-300">{{ $riskNotesTop->count() }} عناصر</div>
        </div>

        <div class="mt-3 space-y-2">
          @forelse($riskNotesTop as $n)
            <button type="button"
                    class="w-full text-right rounded-2xl border border-amber-200/60 dark:border-amber-900/40 bg-amber-50/60 dark:bg-amber-950/10 px-3 py-2 hover:bg-amber-50"
                    data-open-details data-type="note" data-id="{{ $n->id }}">
              <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                  <div class="text-xs font-extrabold text-slate-900 dark:text-white truncate">{{ $n->title }}</div>
                  <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    {{ $n->creator_name ?? $n->creator_username ?? '—' }}
                    <span class="opacity-60">•</span>
                    {{ \Carbon\Carbon::parse($n->created_at)->diffForHumans() }}
                  </div>
                </div>
                <div class="flex items-center gap-1">
                  @if((int)$n->stale_pending === 1)
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-orange-100 text-orange-800">⏱️ قديم</span>
                  @endif
                  @if((int)$n->near_dup_count > 0)
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-rose-100 text-rose-800">🧬 مكرر</span>
                  @endif
                </div>
              </div>
            </button>
          @empty
            <div class="text-xs text-slate-500 dark:text-slate-300">لا يوجد عناصر خطر حالياً.</div>
          @endforelse
        </div>
      </div>

      {{-- Risk Reports --}}
      <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800 p-4">
        <div class="flex items-center justify-between">
          <div class="text-xs font-extrabold text-slate-900 dark:text-white">تقارير ProActive</div>
          <div class="text-[11px] text-slate-500 dark:text-slate-300">{{ $riskReportsTop->count() }} عناصر</div>
        </div>

        <div class="mt-3 space-y-2">
          @forelse($riskReportsTop as $r)
            <button type="button"
                    class="w-full text-right rounded-2xl border border-rose-200/60 dark:border-rose-900/40 bg-rose-50/60 dark:bg-rose-950/10 px-3 py-2 hover:bg-rose-50"
                    data-open-details data-type="report" data-id="{{ $r->id }}">
              <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                  <div class="text-xs font-extrabold text-slate-900 dark:text-white truncate">
                    #{{ $r->id }} — {{ $r->live_host }} ({{ $r->platform }}) — {{ $r->activity_type }}
                  </div>
                  <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    {{ $r->creator_name ?? $r->creator_username ?? '—' }}
                    <span class="opacity-60">•</span>
                    {{ \Carbon\Carbon::parse($r->created_at)->diffForHumans() }}
                  </div>
                </div>
                <div class="flex items-center gap-1">
                  @if((int)$r->stale_pending === 1)
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-orange-100 text-orange-800">⏱️ قديم</span>
                  @endif
                  @if((int)$r->missing_core === 1)
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-rose-100 text-rose-800">🚫 نقص</span>
                  @endif
                  @if((int)$r->near_dup_count > 0)
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-fuchsia-100 text-fuchsia-800">🧬 مكرر</span>
                  @endif
                </div>
              </div>
            </button>
          @empty
            <div class="text-xs text-slate-500 dark:text-slate-300">لا يوجد عناصر خطر حالياً.</div>
          @endforelse
        </div>
      </div>
    </div>
  </div>

  {{-- ========================= NOTES SECTION ========================= --}}
  @if($src === 'all' || $src === 'notes')
    <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white dark:bg-slate-950/45 overflow-hidden">
      <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800/70 flex items-center justify-between">
        <div>
          <h3 class="text-lg font-extrabold text-slate-900 dark:text-white">📚 ملاحظات الصقر ورولا</h3>
          <div class="text-xs text-slate-500 dark:text-slate-300">
            إجمالي (حسب الفلتر): {{ $notes->total() }}
          </div>
        </div>
      </div>

      @if($notes->count())
        <ul role="list" class="divide-y divide-slate-200/70 dark:divide-slate-800/70">
          @foreach($notes as $note)
            @php
              $ps = $note->program_status ?? 'pending';
              $badge = match($ps) {
                'approved' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                'rejected' => 'bg-rose-50 text-rose-700 border-rose-200',
                default    => 'bg-amber-50 text-amber-700 border-amber-200',
              };

              $isStale = ($ps === 'pending') && \Carbon\Carbon::parse($note->created_at)->lt(now()->subHours(24));
              $dupCnt  = (int)($note->near_dup_count ?? 0);
            @endphp

            <li class="p-6" id="note-{{ $note->id }}">
              <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">

                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2 flex-wrap">
                    <h4 class="text-base font-extrabold text-slate-900 dark:text-white">
                      {{ $note->title }}
                    </h4>

                    @if($note->category)
                      <span class="px-2 py-0.5 text-xs rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200">
                        {{ $note->category }}
                      </span>
                    @endif

                    <span class="px-2 py-0.5 text-[11px] rounded-full border {{ $badge }}">
                      {{ $ps === 'pending' ? '🕓 قيد المراجعة' : ($ps === 'approved' ? '✅ تم القبول' : '❌ مرفوض') }}
                    </span>

                    @if($isStale)
                      <span class="px-2 py-0.5 text-[11px] rounded-full bg-orange-100 text-orange-800 font-extrabold">
                        ⏱️ Pending قديم
                      </span>
                    @endif

                    @if($dupCnt > 0)
                      <span class="px-2 py-0.5 text-[11px] rounded-full bg-fuchsia-100 text-fuchsia-800 font-extrabold">
                        🧬 مكرر قريبًا ({{ $dupCnt }})
                      </span>
                    @endif
                  </div>

                  <p class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-relaxed line-clamp-3">
                    {{ $note->body }}
                  </p>

                  @if($ps === 'rejected' && $note->rejection_reason)
                    <div class="mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
                      <b>سبب الرفض:</b> {{ $note->rejection_reason }}
                    </div>
                  @endif

                  <div class="mt-3 text-xs text-slate-500 dark:text-slate-300 flex flex-wrap items-center gap-3">
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-regular fa-clock"></i>
                      {{ \Carbon\Carbon::parse($note->created_at)->diffForHumans() }}
                    </span>
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-regular fa-user"></i>
                      {{ $note->creator_name ?? $note->creator_username ?? 'الإدارة' }}
                    </span>
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-solid fa-hashtag"></i>
                      #{{ $note->id }}
                    </span>
                  </div>

                  <div class="mt-4 flex flex-wrap items-center gap-2">
                    <button type="button"
                            class="px-3 py-2 rounded-2xl text-xs font-extrabold bg-slate-900 text-white hover:bg-slate-800
                                   dark:bg-slate-100 dark:text-slate-900"
                            data-open-details data-type="note" data-id="{{ $note->id }}">
                      <i class="fa-solid fa-up-right-from-square ml-1"></i>
                      عرض التفاصيل + اقتراحات الرفض
                    </button>

                    <a href="#status-help" class="text-xs text-indigo-600 dark:text-indigo-300 hover:underline">
                      مكتب الاستعلامات
                    </a>
                  </div>
                </div>

                {{-- Controls --}}
                <div class="w-full lg:w-[340px] space-y-3">
                  <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800/70 bg-slate-50/60 dark:bg-slate-950/30 p-3">
                    <div class="text-xs font-extrabold text-slate-700 dark:text-slate-200 mb-2">
                      تحديث حالة رد البرنامج
                    </div>

                    <form method="POST" action="{{ route('superadmin.falconRolaNotes.updateStatus', $note->id) }}" class="space-y-2">
                      @csrf
                      <select name="program_status" class="w-full text-xs rounded-xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60">
                        <option value="pending"  @selected($ps==='pending')>🕓 قيد المراجعة</option>
                        <option value="approved" @selected($ps==='approved')>✅ تم القبول</option>
                        <option value="rejected" @selected($ps==='rejected')>❌ مرفوض</option>
                      </select>

                      <textarea name="rejection_reason" rows="2"
                                class="w-full text-xs rounded-xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60"
                                placeholder="سبب الرفض (عند اختيار مرفوض فقط)">{{ $note->rejection_reason }}</textarea>

                      <button type="submit"
                              class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 text-white text-xs px-3 py-2 hover:bg-indigo-700">
                        <i class="fa-solid fa-floppy-disk text-[11px]"></i>
                        حفظ الحالة
                      </button>
                    </form>
                  </div>

                  <form action="{{ route('superadmin.falconRolaNotes.destroy', $note->id) }}" method="POST"
                        onsubmit="return confirm('هل أنت متأكد من حذف هذه الملاحظة؟');">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-rose-600 text-white px-4 py-2 text-xs hover:bg-rose-700">
                      <i class="fa-solid fa-trash-can"></i>
                      حذف الملاحظة
                    </button>
                  </form>
                </div>
              </div>

              {{-- Inline Panel viewer (لو المدير اختار Panel) --}}
              <div class="mt-4 hidden" data-inline-panel="note-{{ $note->id }}"></div>
            </li>
          @endforeach
        </ul>

        <div class="px-6 py-4">
          {{ $notes->appends(request()->except('notes_page'))->onEachSide(1)->links() }}
        </div>
      @else
        <div class="p-8 text-center text-slate-500 dark:text-slate-300 text-sm">
          لا توجد ملاحظات مطابقة للفلاتر الحالية.
        </div>
      @endif
    </div>
  @endif

  {{-- ========================= REPORTS SECTION ========================= --}}
  @if(($src === 'all' || $src === 'reports'))
    <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white dark:bg-slate-950/45 overflow-hidden">
      <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800/70 flex items-center justify-between">
        <div>
          <h3 class="text-lg font-extrabold text-slate-900 dark:text-white">⚡ تقارير ProActive</h3>
          <div class="text-xs text-slate-500 dark:text-slate-300">
            @if($reports) إجمالي (حسب الفلتر): {{ $reports->total() }} @else لا توجد بيانات @endif
          </div>
        </div>
        <a href="#status-help" class="text-xs text-indigo-600 dark:text-indigo-300 hover:underline">
          مكتب الاستعلامات
        </a>
      </div>

      @if($reports && $reports->count())
        <ul role="list" class="divide-y divide-slate-200/70 dark:divide-slate-800/70">
          @foreach($reports as $r)
            @php
              $ps = $r->program_status ?? 'pending';
              if ($ps === null) $ps = 'pending';

              $badge = match($ps) {
                'approved' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                'rejected' => 'bg-rose-50 text-rose-700 border-rose-200',
                default    => 'bg-amber-50 text-amber-700 border-amber-200',
              };

              $isStale = ((int)($r->stale_pending ?? 0) === 1);
              $missing = ((int)($r->missing_core ?? 0) === 1);
              $dupCnt  = (int)($r->near_dup_count ?? 0);

              $platformAr = ['tiktok'=>'تيك توك','instagram'=>'انستغرام','youtube'=>'يوتيوب','other'=>'أخرى'][$r->platform] ?? $r->platform;
              $typeAr = ($r->activity_type ?? '') === 'plus' ? 'PLUS' : 'عادية';
            @endphp

            <li class="p-6" id="report-{{ $r->id }}">
              <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">

                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2 flex-wrap">
                    <h4 class="text-base font-extrabold text-slate-900 dark:text-white">
                      #{{ $r->id }} — لايف: {{ $r->live_host }} — صاحب اللايف: {{ $r->live_owner_name }}
                    </h4>

                    <span class="px-2 py-0.5 text-[11px] rounded-full border {{ $badge }}">
                      {{ $ps === 'pending' ? '🕓 قيد المراجعة' : ($ps === 'approved' ? '✅ تم القبول' : '❌ مرفوض') }}
                    </span>

                    <span class="px-2 py-0.5 text-[11px] rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200">
                      {{ $typeAr }}
                    </span>

                    <span class="px-2 py-0.5 text-[11px] rounded-full bg-slate-50 text-slate-700 dark:bg-slate-900/30 dark:text-slate-200">
                      {{ $platformAr }}
                    </span>

                    @if($isStale)
                      <span class="px-2 py-0.5 text-[11px] rounded-full bg-orange-100 text-orange-800 font-extrabold">⏱️ Pending قديم</span>
                    @endif
                    @if($missing)
                      <span class="px-2 py-0.5 text-[11px] rounded-full bg-rose-100 text-rose-800 font-extrabold">🚫 نقص بيانات</span>
                    @endif
                    @if($dupCnt > 0)
                      <span class="px-2 py-0.5 text-[11px] rounded-full bg-fuchsia-100 text-fuchsia-800 font-extrabold">🧬 مكرر قريبًا ({{ $dupCnt }})</span>
                    @endif
                  </div>

                  <div class="mt-2 text-xs text-slate-500 dark:text-slate-300 flex flex-wrap items-center gap-3">
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-regular fa-calendar"></i>
                      تاريخ النشاط: {{ $r->activity_date ? \Carbon\Carbon::parse($r->activity_date)->timezone($tz)->format('Y-m-d') : '—' }}
                    </span>
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-regular fa-clock"></i>
                      أُنشئ: {{ $r->created_at ? \Carbon\Carbon::parse($r->created_at)->diffForHumans() : '—' }}
                    </span>
                    <span class="inline-flex items-center gap-1">
                      <i class="fa-regular fa-user"></i>
                      بواسطة: {{ $r->creator_name ?? $r->creator_username ?? '—' }}
                    </span>
                  </div>

                  @if($ps === 'rejected' && $r->rejection_reason)
                    <div class="mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
                      <b>سبب الرفض:</b> {{ $r->rejection_reason }}
                    </div>
                  @endif

                  <div class="mt-4 flex flex-wrap items-center gap-2">
                    <button type="button"
                            class="px-3 py-2 rounded-2xl text-xs font-extrabold bg-slate-900 text-white hover:bg-slate-800
                                   dark:bg-slate-100 dark:text-slate-900"
                            data-open-details data-type="report" data-id="{{ $r->id }}">
                      <i class="fa-solid fa-up-right-from-square ml-1"></i>
                      عرض التفاصيل + تحليل + اقتراحات الرفض
                    </button>
                  </div>
                </div>

                {{-- Controls (تبقى كما عندك لكن منظمة) --}}
                <div class="w-full lg:w-[340px]">
                  <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800/70 bg-slate-50/60 dark:bg-slate-950/30 p-3">
                    <div class="text-xs font-extrabold text-slate-700 dark:text-slate-200 mb-2">
                      تحديث حالة التقرير
                    </div>

                    {{-- انتبه: اسم الراوت عندك ممكن يكون مختلف --}}
                    <form method="POST"
                          action="{{ route('superadmin.proactiveReports.programStatus', $r->id) }}"
                          class="space-y-2">
                      @csrf

                      <select name="program_status"
                              class="w-full text-xs rounded-xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60">
                        <option value="pending"  @selected($ps==='pending')>🕓 قيد المراجعة</option>
                        <option value="approved" @selected($ps==='approved')>✅ تم القبول</option>
                        <option value="rejected" @selected($ps==='rejected')>❌ مرفوض</option>
                      </select>

                      <textarea name="rejection_reason" rows="2"
                                class="w-full text-xs rounded-xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60"
                                placeholder="سبب الرفض (عند اختيار مرفوض فقط)">{{ $r->rejection_reason }}</textarea>

                      <button type="submit"
                              class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 text-white text-xs px-3 py-2 hover:bg-indigo-700">
                        <i class="fa-solid fa-floppy-disk text-[11px]"></i>
                        حفظ الحالة
                      </button>
                    </form>
                  </div>
                </div>
              </div>

              {{-- Inline Panel viewer --}}
              <div class="mt-4 hidden" data-inline-panel="report-{{ $r->id }}"></div>
            </li>
          @endforeach
        </ul>

        <div class="px-6 py-4">
          {{ $reports->appends(request()->except('reports_page'))->onEachSide(1)->links() }}
        </div>
      @else
        <div class="p-8 text-center text-slate-500 dark:text-slate-300 text-sm">
          لا توجد تقارير ProActive مطابقة للفلاتر الحالية.
        </div>
      @endif
    </div>
  @endif


  {{-- ================= Viewer Overlay (Drawer + Modal) ================= --}}
  <div id="viewerOverlay" class="fixed inset-0 z-[9999] hidden">
    <div class="absolute inset-0 bg-black/50" data-close-viewer></div>

    {{-- Drawer --}}
    <div id="viewerDrawer"
         class="absolute top-0 right-0 h-full w-full sm:w-[560px]
                bg-white dark:bg-slate-950
                shadow-2xl border-l border-slate-200/70 dark:border-slate-800/70
                translate-x-full transition-transform duration-200">
      <div class="h-full flex flex-col">
        <div class="p-4 border-b border-slate-200/70 dark:border-slate-800/70 flex items-center justify-between">
          <div class="min-w-0">
            <div id="viewerTitle" class="text-sm font-extrabold text-slate-900 dark:text-white truncate">—</div>
            <div id="viewerSub" class="text-xs text-slate-500 dark:text-slate-300 truncate">—</div>
          </div>
          <button type="button" class="h-10 w-10 rounded-2xl border border-slate-200 dark:border-slate-800"
                  data-close-viewer>
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>

        <div class="p-4 overflow-auto" id="viewerBody">
          {{-- dynamic --}}
        </div>
      </div>
    </div>

    {{-- Modal --}}
    <div id="viewerModal"
         class="absolute inset-0 flex items-center justify-center p-4 hidden">
      <div class="w-full max-w-3xl rounded-3xl bg-white dark:bg-slate-950
                  border border-slate-200/70 dark:border-slate-800/70 shadow-2xl overflow-hidden">
        <div class="p-4 border-b border-slate-200/70 dark:border-slate-800/70 flex items-center justify-between">
          <div class="min-w-0">
            <div id="viewerTitleM" class="text-sm font-extrabold text-slate-900 dark:text-white truncate">—</div>
            <div id="viewerSubM" class="text-xs text-slate-500 dark:text-slate-300 truncate">—</div>
          </div>
          <button type="button" class="h-10 w-10 rounded-2xl border border-slate-200 dark:border-slate-800"
                  data-close-viewer>
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
        <div class="p-4 max-h-[75vh] overflow-auto" id="viewerBodyM"></div>
      </div>
    </div>
  </div>

</div>

{{-- ================= JS: Viewer + Suggestion Chips ================= --}}
<script>
(function(){
  const hub = document.getElementById('reviewHub');
  const detailsTpl = hub?.dataset?.detailsTemplate || '';
  const viewerModeSel = document.getElementById('viewerMode');

  const overlay = document.getElementById('viewerOverlay');
  const drawer  = document.getElementById('viewerDrawer');
  const modal   = document.getElementById('viewerModal');

  const titleD  = document.getElementById('viewerTitle');
  const subD    = document.getElementById('viewerSub');
  const bodyD   = document.getElementById('viewerBody');

  const titleM  = document.getElementById('viewerTitleM');
  const subM    = document.getElementById('viewerSubM');
  const bodyM   = document.getElementById('viewerBodyM');

  function getCSRF() {
    const m = document.querySelector('meta[name="csrf-token"]');
    return m ? m.getAttribute('content') : '';
  }

  function escapeHtml(str) {
    return String(str ?? '')
      .replaceAll('&','&amp;')
      .replaceAll('<','&lt;')
      .replaceAll('>','&gt;')
      .replaceAll('"','&quot;')
      .replaceAll("'","&#039;");
  }

  function kvTable(obj) {
    const entries = Object.entries(obj || {});
    if (!entries.length) return '<div class="text-xs text-slate-500">لا توجد بيانات</div>';

    return `
      <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800/70 overflow-hidden">
        <table class="w-full text-xs">
          <tbody class="divide-y divide-slate-200/70 dark:divide-slate-800/70">
            ${entries.map(([k,v]) => `
              <tr class="align-top">
                <td class="w-40 bg-slate-50 dark:bg-slate-900/40 px-3 py-2 font-extrabold text-slate-700 dark:text-slate-200">${escapeHtml(k)}</td>
                <td class="px-3 py-2 text-slate-700 dark:text-slate-200 break-words">${escapeHtml(v)}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      </div>
    `;
  }

  function flagsBlock(flags) {
    flags = flags || [];
    if (!flags.length) {
      return `<div class="rounded-2xl border border-emerald-200/70 bg-emerald-50/60 px-3 py-2 text-xs text-emerald-800">
        ✅ لا توجد إشارات خطر واضحة — يبدو التقرير/الملاحظة طبيعي.
      </div>`;
    }

    const levelCls = (lvl) => {
      if (lvl === 'high') return 'bg-rose-50 border-rose-200 text-rose-800';
      if (lvl === 'medium') return 'bg-amber-50 border-amber-200 text-amber-800';
      return 'bg-sky-50 border-sky-200 text-sky-800';
    };

    return `
      <div class="space-y-2">
        ${flags.map(f => `
          <div class="rounded-2xl border px-3 py-2 text-xs ${levelCls(f.level)}">
            <div class="font-extrabold">⚑ ${escapeHtml(f.title || f.key || '')}</div>
            ${f.suggested_reason ? `
              <button type="button"
                      class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-900 text-white text-[11px]"
                      data-suggest-reason="${escapeHtml(f.suggested_reason)}">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
                استخدام كسبب رفض
              </button>
              <div class="mt-1 text-[11px] opacity-80">المقترح: ${escapeHtml(f.suggested_reason)}</div>
            ` : ''}
          </div>
        `).join('')}
      </div>
    `;
  }

  function statusBadge(status) {
    status = status || 'pending';
    if (status === 'approved') return `<span class="px-2 py-0.5 rounded-full text-[11px] border bg-emerald-50 text-emerald-700 border-emerald-200">✅ تم القبول</span>`;
    if (status === 'rejected') return `<span class="px-2 py-0.5 rounded-full text-[11px] border bg-rose-50 text-rose-700 border-rose-200">❌ مرفوض</span>`;
    return `<span class="px-2 py-0.5 rounded-full text-[11px] border bg-amber-50 text-amber-700 border-amber-200">🕓 قيد المراجعة</span>`;
  }

  function buildViewerHTML(payload) {
    const item = payload.item || {};
    const type = payload.type;
    const flags = payload.flags || [];
    const actions = payload.actions || {};
    const history = payload.history || [];

    const creator = [
      item.creator_name || '',
      item.creator_username ? '@'+item.creator_username : ''
    ].filter(Boolean).join(' ');

    const heading = (type === 'note')
      ? `ملاحظة #${item.id ?? ''} — ${item.title ?? ''}`
      : `تقرير #${item.id ?? ''} — ${item.live_host ?? ''}`;

    const sub = [
      statusBadge(item.program_status || 'pending'),
      creator ? `<span class="text-[11px] text-slate-500 dark:text-slate-300">بواسطة: <b>${escapeHtml(creator)}</b></span>` : ''
    ].join(' ');

    const coreBlock = `
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/60 dark:bg-slate-950/30 p-4">
        <div class="flex items-center justify-between gap-2">
          <div class="text-sm font-extrabold text-slate-900 dark:text-white">ملخص سريع</div>
          <div class="text-xs">${statusBadge(item.program_status || 'pending')}</div>
        </div>

        <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
          <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">ID</div>
            <div class="font-extrabold text-slate-900 dark:text-white">#${escapeHtml(item.id)}</div>
          </div>
          <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">Created At</div>
            <div class="font-extrabold text-slate-900 dark:text-white">${escapeHtml(item.created_at || '—')}</div>
          </div>
        </div>

        ${type === 'note' ? `
          <div class="mt-3">
            <div class="text-xs font-extrabold text-slate-700 dark:text-slate-200 mb-1">المحتوى الكامل</div>
            <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800/70 bg-slate-50/60 dark:bg-slate-900/20 p-3 text-sm leading-7 text-slate-800 dark:text-slate-100 whitespace-pre-wrap">${escapeHtml(item.body || '')}</div>
          </div>
        ` : `
          <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
            <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
              <div class="text-[11px] text-slate-500 dark:text-slate-300">Activity Date</div>
              <div class="font-extrabold text-slate-900 dark:text-white">${escapeHtml(item.activity_date || '—')}</div>
            </div>
            <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/40 p-3 border border-slate-200/70 dark:border-slate-800/70">
              <div class="text-[11px] text-slate-500 dark:text-slate-300">Platform / Type</div>
              <div class="font-extrabold text-slate-900 dark:text-white">${escapeHtml(item.platform || '—')} — ${escapeHtml(item.activity_type || '—')}</div>
            </div>
          </div>
        `}
      </div>
    `;

    const suggestBlock = `
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/60 dark:bg-slate-950/30 p-4">
        <div class="text-sm font-extrabold text-slate-900 dark:text-white mb-2">🧩 تحليل + اقتراحات رفض</div>
        ${flagsBlock(flags)}
        <div class="mt-3 text-[11px] text-slate-500 dark:text-slate-300">
          ملاحظة: هذه الاقتراحات “مساعدة” فقط ولا تغيّر أي خوارزمية أو قرار تلقائي.
        </div>
      </div>
    `;

    const fullDataBlock = `
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/60 dark:bg-slate-950/30 p-4">
        <div class="text-sm font-extrabold text-slate-900 dark:text-white mb-2">📦 تفاصيل كاملة (كل الحقول)</div>
        ${kvTable(item)}
      </div>
    `;

    const historyBlock = history && history.length ? `
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/60 dark:bg-slate-950/30 p-4">
        <div class="text-sm font-extrabold text-slate-900 dark:text-white mb-2">🧾 سجل القرارات</div>
        <div class="space-y-2">
          ${history.map(h => `
            <div class="rounded-2xl border border-slate-200/70 dark:border-slate-800/70 bg-slate-50/60 dark:bg-slate-900/20 p-3 text-xs">
              <div class="font-extrabold text-slate-900 dark:text-white">${escapeHtml(h.decision_type || '—')}</div>
              <div class="text-[11px] text-slate-500 dark:text-slate-300">
                ${escapeHtml(h.decided_by_name || '—')} • ${escapeHtml(h.created_at || '—')}
              </div>
              ${h.note ? `<div class="mt-1 text-slate-700 dark:text-slate-200">${escapeHtml(h.note)}</div>` : ''}
            </div>
          `).join('')}
        </div>
      </div>
    ` : '';

    // Quick action form inside viewer (optional)
    const updateUrl = actions.update_url || '';
    const quickForm = updateUrl ? `
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-white/60 dark:bg-slate-950/30 p-4">
        <div class="text-sm font-extrabold text-slate-900 dark:text-white mb-2">⚙️ قرار سريع</div>

        <form method="POST" action="${escapeHtml(updateUrl)}" class="space-y-2" data-quick-form>
          <input type="hidden" name="_token" value="${escapeHtml(getCSRF())}">
          <select name="program_status" class="w-full text-xs rounded-2xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60 px-3 py-2">
            <option value="pending">🕓 قيد المراجعة</option>
            <option value="approved">✅ تم القبول</option>
            <option value="rejected">❌ مرفوض</option>
          </select>

          <textarea name="rejection_reason" rows="2"
                    class="w-full text-xs rounded-2xl border-slate-200 dark:border-slate-800 dark:bg-slate-950/60 px-3 py-2"
                    placeholder="سبب الرفض (عند اختيار مرفوض فقط)"></textarea>

          <button type="submit"
                  class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-indigo-600 text-white text-xs px-3 py-2 hover:bg-indigo-700">
            <i class="fa-solid fa-floppy-disk"></i> حفظ
          </button>

          <div class="text-[11px] text-slate-500 dark:text-slate-300">
            تقدر تضغط “استخدام كسبب رفض” من الاقتراحات فوق وسيتم تعبئة الحقل تلقائياً.
          </div>
        </form>
      </div>
    ` : '';

    return { heading, sub, html: [coreBlock, suggestBlock, quickForm, historyBlock, fullDataBlock].filter(Boolean).join('<div class="h-3"></div>') };
  }

  function openViewer(mode, payload, inlineTargetId) {
    const built = buildViewerHTML(payload);

    if (mode === 'panel' && inlineTargetId) {
      const panel = document.querySelector(`[data-inline-panel="${inlineTargetId}"]`);
      if (panel) {
        panel.innerHTML = built.html;
        panel.classList.remove('hidden');

        // bind suggestion -> textarea
        bindSuggestButtons(panel);

        // scroll a bit
        panel.scrollIntoView({behavior:'smooth', block:'start'});
        return;
      }
    }

    overlay.classList.remove('hidden');

    if (mode === 'modal') {
      modal.classList.remove('hidden');
      drawer.classList.add('translate-x-full');

      titleM.textContent = built.heading;
      subM.innerHTML = built.sub;
      bodyM.innerHTML = built.html;

      bindSuggestButtons(bodyM);
      return;
    }

    // default drawer
    modal.classList.add('hidden');
    drawer.classList.remove('translate-x-full');

    titleD.textContent = built.heading;
    subD.innerHTML = built.sub;
    bodyD.innerHTML = built.html;

    bindSuggestButtons(bodyD);
  }

  function closeViewer() {
    overlay.classList.add('hidden');
    modal.classList.add('hidden');
    drawer.classList.add('translate-x-full');
    bodyD.innerHTML = '';
    bodyM.innerHTML = '';
  }

  function bindSuggestButtons(container) {
    container.querySelectorAll('[data-suggest-reason]').forEach(btn => {
      btn.addEventListener('click', () => {
        const reason = btn.getAttribute('data-suggest-reason') || '';
        const form = container.querySelector('form[data-quick-form]');
        if (!form) return;

        const statusSel = form.querySelector('select[name="program_status"]');
        const ta = form.querySelector('textarea[name="rejection_reason"]');

        if (statusSel) statusSel.value = 'rejected';
        if (ta) {
          const current = ta.value.trim();
          ta.value = current ? (current + "\n" + reason) : reason;
          ta.focus();
        }
      });
    });
  }

  async function fetchDetails(type, id) {
    if (!detailsTpl) throw new Error('Details route not configured.');
    const url = detailsTpl.replace('TYPE', encodeURIComponent(type)).replace('ID', encodeURIComponent(id));
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    const json = await res.json();
    if (!json.ok) throw new Error(json.msg || 'Failed');
    return json;
  }

  function currentViewerMode() {
    const saved = localStorage.getItem('review_viewer_mode');
    return saved || (viewerModeSel?.value || 'drawer');
  }

  // init viewer mode from localStorage
  if (viewerModeSel) {
    const saved = localStorage.getItem('review_viewer_mode');
    viewerModeSel.value = saved || viewerModeSel.value || 'drawer';

    viewerModeSel.addEventListener('change', () => {
      localStorage.setItem('review_viewer_mode', viewerModeSel.value);
    });
  }

  // open buttons
  document.querySelectorAll('[data-open-details]').forEach(btn => {
    btn.addEventListener('click', async () => {
      const type = btn.getAttribute('data-type');
      const id   = btn.getAttribute('data-id');

      const mode = currentViewerMode();

      // inline target id
      let inlineTarget = null;
      if (mode === 'panel') {
        inlineTarget = (type === 'note') ? `note-${id}` : `report-${id}`;
      }

      // show loading
      if (mode !== 'panel') {
        overlay.classList.remove('hidden');
        modal.classList.add('hidden');
        drawer.classList.remove('translate-x-full');
        titleD.textContent = '... جاري التحميل';
        subD.textContent = '';
        bodyD.innerHTML = `<div class="text-sm text-slate-600 dark:text-slate-300">يرجى الانتظار...</div>`;
      }

      try {
        const payload = await fetchDetails(type, id);
        openViewer(mode, payload, inlineTarget);
      } catch (e) {
        console.error(e);
        if (mode === 'panel') {
          const panel = document.querySelector(`[data-inline-panel="${inlineTarget}"]`);
          if (panel) {
            panel.classList.remove('hidden');
            panel.innerHTML = `<div class="rounded-2xl border border-rose-200 bg-rose-50 p-3 text-xs text-rose-800">
              فشل تحميل التفاصيل: ${escapeHtml(e.message || 'خطأ')}
            </div>`;
          }
        } else {
          bodyD.innerHTML = `<div class="rounded-2xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800">
            فشل تحميل التفاصيل: ${escapeHtml(e.message || 'خطأ')}
          </div>`;
        }
      }
    });
  });

  // close
  document.querySelectorAll('[data-close-viewer]').forEach(el => el.addEventListener('click', closeViewer));
  overlay?.addEventListener('click', (e) => {
    if (e.target && e.target.hasAttribute('data-close-viewer')) closeViewer();
  });
  document.querySelectorAll('[data-close-viewer], [data-close-viewer] *').forEach(()=>{});

  // close if click on backdrop
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeViewer(); });

  // Backdrop click
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);

  // Also close if click on black layer
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);

  // clean: close when click on black overlay (data-close-viewer موجود على backdrop)
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);
  overlay?.querySelector('[data-close-viewer]')?.addEventListener('click', closeViewer);

  // simplest: any element with [data-close-viewer]
  document.addEventListener('click', (e) => {
    const t = e.target;
    if (t && t.closest && t.closest('[data-close-viewer]')) closeViewer();
    if (t && t.hasAttribute && t.hasAttribute('data-close-viewer')) closeViewer();
  });
})();
</script>
@endsection