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

@section('title','لوحة قرارات إيمان')
@section('page-title','لوحة قرارات إيمان')

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

  $section = $section ?? 'decisions_board';

  $view   = $view   ?? request('view','table'); // table|cards
  $q      = $q      ?? request('q','');
  $status = $status ?? request('status','all'); // all|active|cancelled
  $from   = $from   ?? request('from', now()->subDays(60)->format('Y-m-d'));
  $to     = $to     ?? request('to', now()->format('Y-m-d'));

  // Data tolerant
  $rows = $rows ?? $decisions ?? collect();

  // Route names (tolerant)
  $storeRouteName  = $storeRouteName  ?? 'superadmin.iman-room.decisions.store';
  $cancelRouteName = $cancelRouteName ?? 'superadmin.iman-room.decisions.cancel';

  $canStore  = Route::has($storeRouteName);
  $canCancel = Route::has($cancelRouteName);

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

  $statusMeta = [
    'active' => ['label'=>'نشط','cls'=>'border-emerald-400/30 bg-emerald-500/12 text-emerald-200','dot'=>'bg-emerald-400'],
    'cancelled' => ['label'=>'ملغي','cls'=>'border-rose-400/30 bg-rose-500/12 text-rose-200','dot'=>'bg-rose-400'],
  ];
@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl">
      <div class="pointer-events-none absolute -top-28 -right-16 w-96 h-96 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-[520px] h-[520px] rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-6 space-y-4">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
              <span class="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
              غرفة إيمان • قرارات • إشعارات
            </div>
            <h1 class="mt-2 text-xl sm:text-2xl font-extrabold text-white">لوحة قرارات إيمان</h1>
            <p class="mt-1 text-sm text-white/60">
              الفترة:
              <span class="text-white/90 font-semibold">{{ $from }}</span>
              → <span class="text-white/90 font-semibold">{{ $to }}</span>
              • الحالة:
              <span class="text-white/90 font-semibold">
                {{ $status === 'all' ? 'الكل' : ($statusMeta[$status]['label'] ?? $status) }}
              </span>
            </p>
          </div>

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

            <button type="button" data-iman-open-create
              class="px-3 py-2 rounded-xl text-xs font-extrabold border border-white/10 bg-gradient-to-r from-fuchsia-600 to-indigo-600 text-white hover:opacity-95">
              <i class="fa-solid fa-plus ml-1"></i> قرار جديد
            </button>
          </div>
        </div>

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

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

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

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

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">الحالة</label>
            <select name="status"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              <option value="all" @selected($status==='all')>الكل</option>
              <option value="active" @selected($status==='active')>نشط</option>
              <option value="cancelled" @selected($status==='cancelled')>ملغي</option>
            </select>
          </div>

          <div class="sm:col-span-12 flex items-end gap-2">
            <button type="submit"
                    class="flex-1 px-4 py-2.5 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90">
              تطبيق الفلاتر
            </button>
            <a href="{{ url()->current() . '?' . http_build_query(['section'=>$section,'view'=>$view]) }}"
               class="px-4 py-2.5 rounded-xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 text-center font-semibold">
              تصفير
            </a>
          </div>
        </form>
      </div>
    </div>

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

      {{-- CARDS --}}
      @if($view === 'cards')
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          @foreach($rows as $r)
            @php
              $st = (string)($r->status ?? 'active');
              $meta = $statusMeta[$st] ?? $statusMeta['active'];
              $createdAt = $r->created_at ?? null;
              $creatorName = $r->creator_name ?? $r->created_by_name ?? ('#'.($r->created_by ?? '—'));
              $desc = (string)($r->description ?? '');
              $short = mb_strlen($desc) > 140 ? (mb_substr($desc,0,140).'…') : $desc;
              $cancelReason = (string)($r->cancelled_reason ?? '');
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-4 hover:bg-white/[0.07] transition">
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <div class="text-white font-extrabold truncate">{{ $r->title ?? '—' }}</div>
                  <div class="mt-1 text-xs text-white/50">
                    بواسطة: <span class="text-white/80 font-semibold">{{ $creatorName }}</span>
                    @if($createdAt) • <span>{{ \Carbon\Carbon::parse($createdAt)->format('Y-m-d H:i') }}</span>@endif
                  </div>
                </div>

                <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full text-xs font-bold border {{ $meta['cls'] }}">
                  <span class="w-2 h-2 rounded-full {{ $meta['dot'] }}"></span>
                  {{ $meta['label'] }}
                </span>
              </div>

              <div class="mt-3 rounded-2xl border border-white/10 bg-black/30 p-3 text-sm text-white/80 leading-relaxed">
                {{ $short !== '' ? $short : '—' }}
              </div>

              @if($st === 'cancelled' && $cancelReason !== '')
                <div class="mt-2 text-xs text-rose-200/90">
                  سبب الإلغاء: <span class="text-white/80 font-semibold">{{ mb_strlen($cancelReason)>120 ? mb_substr($cancelReason,0,120).'…' : $cancelReason }}</span>
                </div>
              @endif

              <div class="mt-4 flex items-center justify-between gap-2">
                <button type="button"
                  data-iman-open-view
                  data-id="{{ (int)($r->id ?? 0) }}"
                  data-title="{{ e($r->title ?? '') }}"
                  data-description="{{ e($r->description ?? '') }}"
                  data-status="{{ e($st) }}"
                  data-created="{{ e($createdAt ? \Carbon\Carbon::parse($createdAt)->format('Y-m-d H:i') : '') }}"
                  data-creator="{{ e($creatorName) }}"
                  data-cancel-reason="{{ e($r->cancelled_reason ?? '') }}"
                  data-cancel-at="{{ e(!empty($r->cancelled_at) ? \Carbon\Carbon::parse($r->cancelled_at)->format('Y-m-d H:i') : '') }}"
                  class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold">
                  <i class="fa-solid fa-eye"></i> عرض
                </button>

                @if($canCancel && $st === 'active')
                  <button type="button"
                    data-iman-open-cancel
                    data-id="{{ (int)($r->id ?? 0) }}"
                    data-title="{{ e($r->title ?? '') }}"
                    class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-rose-500/15 hover:bg-rose-500/20 border border-rose-400/20 text-rose-200 text-xs font-extrabold">
                    <i class="fa-solid fa-ban"></i> إلغاء
                  </button>
                @endif
              </div>
            </div>
          @endforeach
        </div>

      {{-- TABLE --}}
      @else
        <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="min-w-[1100px] w-full text-sm">
              <thead class="bg-black/40 text-white/70">
                <tr>
                  <th class="px-3 py-3 text-right">#</th>
                  <th class="px-3 py-3 text-right">القرار</th>
                  <th class="px-3 py-3 text-right">الحالة</th>
                  <th class="px-3 py-3 text-right">الكاتب</th>
                  <th class="px-3 py-3 text-right">تاريخ الإنشاء</th>
                  <th class="px-3 py-3 text-right">إجراءات</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/5">
                @foreach($rows as $i => $r)
                  @php
                    $st = (string)($r->status ?? 'active');
                    $meta = $statusMeta[$st] ?? $statusMeta['active'];

                    $creatorName = $r->creator_name ?? $r->created_by_name ?? ('#'.($r->created_by ?? '—'));
                    $createdAt = $r->created_at ?? null;
                    $createdFmt = $createdAt ? \Carbon\Carbon::parse($createdAt)->format('Y-m-d H:i') : '—';

                    $desc = (string)($r->description ?? '');
                    $short = mb_strlen($desc) > 90 ? (mb_substr($desc,0,90).'…') : $desc;
                  @endphp

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

                    <td class="px-3 py-3">
                      <div class="font-extrabold text-white">{{ $r->title ?? '—' }}</div>
                      <div class="text-xs text-white/50 mt-1">{{ $short !== '' ? $short : '—' }}</div>
                      @if($st === 'cancelled' && !empty($r->cancelled_reason))
                        <div class="text-xs text-rose-200/80 mt-1">
                          سبب الإلغاء: <span class="text-white/70 font-semibold">{{ mb_strlen($r->cancelled_reason)>90 ? mb_substr($r->cancelled_reason,0,90).'…' : $r->cancelled_reason }}</span>
                        </div>
                      @endif
                    </td>

                    <td class="px-3 py-3">
                      <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full text-xs font-bold border {{ $meta['cls'] }}">
                        <span class="w-2 h-2 rounded-full {{ $meta['dot'] }}"></span>
                        {{ $meta['label'] }}
                      </span>
                    </td>

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

                    <td class="px-3 py-3 text-white/70">{{ $createdFmt }}</td>

                    <td class="px-3 py-3 whitespace-nowrap">
                      <button type="button"
                        data-iman-open-view
                        data-id="{{ (int)($r->id ?? 0) }}"
                        data-title="{{ e($r->title ?? '') }}"
                        data-description="{{ e($r->description ?? '') }}"
                        data-status="{{ e($st) }}"
                        data-created="{{ e($createdFmt) }}"
                        data-creator="{{ e($creatorName) }}"
                        data-cancel-reason="{{ e($r->cancelled_reason ?? '') }}"
                        data-cancel-at="{{ e(!empty($r->cancelled_at) ? \Carbon\Carbon::parse($r->cancelled_at)->format('Y-m-d H:i') : '') }}"
                        class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10 text-white text-xs font-extrabold">
                        <i class="fa-solid fa-eye"></i> عرض
                      </button>

                      @if($canCancel && $st === 'active')
                        <button type="button"
                          data-iman-open-cancel
                          data-id="{{ (int)($r->id ?? 0) }}"
                          data-title="{{ e($r->title ?? '') }}"
                          class="mr-2 inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-rose-500/15 hover:bg-rose-500/20 border border-rose-400/20 text-rose-200 text-xs font-extrabold">
                          <i class="fa-solid fa-ban"></i> إلغاء
                        </button>
                      @endif
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

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

    @endif

  </div>
</div>

{{-- =========================
   MODALS (Create / View / Cancel)
   ========================= --}}
<div id="imanDecisionsModalRoot" class="fixed inset-0 z-[80] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" data-iman-close></div>

  <div class="relative min-h-screen flex items-end sm:items-center justify-center p-3 sm:p-6">
    <div class="w-full sm:max-w-2xl 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 border-b border-white/10 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="inline-flex w-10 h-10 items-center justify-center rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/20 text-fuchsia-200">
            <i class="fa-solid fa-scroll text-sm"></i>
          </span>
          <div>
            <div id="imanModalTitle" class="text-white font-extrabold">—</div>
            <div id="imanModalSub" class="text-xs text-white/50">—</div>
          </div>
        </div>

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

      <div class="p-4 sm:p-5">
        {{-- CREATE --}}
        <div id="imanModalCreate" class="hidden space-y-3">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3 text-sm text-white/70">
            هذا القرار سيتم نشره داخل النظام (وممكن يكون مربوط بإشعار FCM حسب الكنترول عندك).
          </div>

          <form method="POST" action="{{ $canStore ? route($storeRouteName) : '#' }}" class="space-y-3">
            @csrf
            <input type="hidden" name="section" value="{{ $section }}">

            <div>
              <label class="block text-xs text-white/60 mb-1">عنوان القرار</label>
              <input name="title" required maxlength="255"
                     class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                     placeholder="مثال: تعديل آلية تقييم اللايفات">
            </div>

            <div>
              <label class="block text-xs text-white/60 mb-1">نص القرار</label>
              <textarea name="description" required rows="7"
                        class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
                        placeholder="اكتبي التفاصيل هنا…"></textarea>
            </div>

            <div class="flex items-center justify-between gap-2">
              <button type="button" data-iman-close
                      class="px-4 py-2.5 rounded-2xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 font-semibold">
                إلغاء
              </button>

              <button type="submit" {{ $canStore ? '' : 'disabled' }}
                      class="px-4 py-2.5 rounded-2xl bg-white text-slate-900 font-extrabold hover:bg-white/90 disabled:opacity-40 disabled:cursor-not-allowed">
                إصدار القرار
              </button>
            </div>

            @if(!$canStore)
              <div class="text-xs text-amber-200/80">
                تنبيه: Route <span class="text-white/80 font-bold">{{ $storeRouteName }}</span> غير موجود — عدّل الاسم أو عرف الروت.
              </div>
            @endif
          </form>
        </div>

        {{-- VIEW --}}
        <div id="imanModalView" class="hidden space-y-3">
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">الحالة</div>
              <div id="imanViewStatus" class="mt-1 text-white font-extrabold">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">الكاتب</div>
              <div id="imanViewCreator" class="mt-1 text-white font-extrabold truncate">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-xs text-white/60">تاريخ الإنشاء</div>
              <div id="imanViewCreated" class="mt-1 text-white font-extrabold">—</div>
            </div>
          </div>

          <div class="rounded-3xl border border-white/10 bg-black/30 p-4">
            <div class="text-xs text-white/60 mb-2">تفاصيل القرار</div>
            <div id="imanViewDesc" class="text-white/90 text-sm leading-relaxed whitespace-pre-wrap">—</div>
          </div>

          <div id="imanViewCancelBox" class="hidden rounded-3xl border border-rose-400/20 bg-rose-500/10 p-4">
            <div class="text-xs text-rose-200/80 mb-2">سبب الإلغاء</div>
            <div id="imanViewCancelReason" class="text-rose-100 text-sm leading-relaxed whitespace-pre-wrap">—</div>
            <div class="mt-2 text-xs text-rose-200/70">
              تم الإلغاء بتاريخ: <span id="imanViewCancelAt" class="text-white/80 font-semibold">—</span>
            </div>
          </div>

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

        {{-- CANCEL --}}
        <div id="imanModalCancel" class="hidden space-y-3">
          <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 p-3 text-sm text-rose-100/90">
            أنتِ على وشك إلغاء قرار: <span id="imanCancelTitle" class="font-extrabold text-white">—</span>
          </div>

          <form method="POST" action="{{ $canCancel ? route($cancelRouteName, ['id'=>0]) : '#' }}" id="imanCancelForm" class="space-y-3">
            @csrf
            @method('PATCH')

            <input type="hidden" name="section" value="{{ $section }}">
            <input type="hidden" name="id" id="imanCancelId" value="">

            <div>
              <label class="block text-xs text-white/60 mb-1">سبب الإلغاء</label>
              <textarea name="reason" required maxlength="500" rows="4"
                        class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-rose-500/40"
                        placeholder="اكتبي سبب واضح ومختصر…"></textarea>
            </div>

            <div class="flex items-center justify-between gap-2">
              <button type="button" data-iman-close
                      class="px-4 py-2.5 rounded-2xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 font-semibold">
                رجوع
              </button>

              <button type="submit" {{ $canCancel ? '' : 'disabled' }}
                      class="px-4 py-2.5 rounded-2xl bg-rose-500 text-white font-extrabold hover:bg-rose-500/90 disabled:opacity-40 disabled:cursor-not-allowed">
                تأكيد الإلغاء
              </button>
            </div>

            @if(!$canCancel)
              <div class="text-xs text-amber-200/80">
                تنبيه: Route <span class="text-white/80 font-bold">{{ $cancelRouteName }}</span> غير موجود — عدّل الاسم أو عرف الروت.
              </div>
            @endif
          </form>
        </div>

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

{{-- Scoped JS (no globals) --}}
<script>
(() => {
  const modalRoot = document.getElementById('imanDecisionsModalRoot');
  if(!modalRoot) return;

  const elTitle = document.getElementById('imanModalTitle');
  const elSub   = document.getElementById('imanModalSub');

  const boxCreate = document.getElementById('imanModalCreate');
  const boxView   = document.getElementById('imanModalView');
  const boxCancel = document.getElementById('imanModalCancel');

  const viewStatus = document.getElementById('imanViewStatus');
  const viewCreator= document.getElementById('imanViewCreator');
  const viewCreated= document.getElementById('imanViewCreated');
  const viewDesc   = document.getElementById('imanViewDesc');
  const cancelBox  = document.getElementById('imanViewCancelBox');
  const cancelReason = document.getElementById('imanViewCancelReason');
  const cancelAt     = document.getElementById('imanViewCancelAt');

  const cancelTitle = document.getElementById('imanCancelTitle');
  const cancelId    = document.getElementById('imanCancelId');
  const cancelForm  = document.getElementById('imanCancelForm');

  const closeAll = () => {
    modalRoot.classList.add('hidden');
    boxCreate?.classList.add('hidden');
    boxView?.classList.add('hidden');
    boxCancel?.classList.add('hidden');
  };

  const openBox = (which) => {
    modalRoot.classList.remove('hidden');
    boxCreate?.classList.add('hidden');
    boxView?.classList.add('hidden');
    boxCancel?.classList.add('hidden');
    which?.classList.remove('hidden');
  };

  modalRoot.querySelectorAll('[data-iman-close]').forEach(b => b.addEventListener('click', closeAll));
  document.addEventListener('keydown', (e) => { if(e.key === 'Escape') closeAll(); });

  // Open Create
  document.querySelectorAll('[data-iman-open-create]').forEach(btn => {
    btn.addEventListener('click', () => {
      elTitle.textContent = 'إصدار قرار جديد';
      elSub.textContent = 'لوحة قرارات إيمان';
      openBox(boxCreate);
    });
  });

  // Open View
  document.querySelectorAll('[data-iman-open-view]').forEach(btn => {
    btn.addEventListener('click', () => {
      const title = btn.dataset.title || '—';
      const desc  = btn.dataset.description || '—';
      const status= btn.dataset.status || 'active';
      const created = btn.dataset.created || '—';
      const creator = btn.dataset.creator || '—';

      const cReason = btn.dataset.cancelReason || '';
      const cAt     = btn.dataset.cancelAt || '';

      elTitle.textContent = title;
      elSub.textContent = 'تفاصيل القرار بالكامل';

      viewStatus.textContent = (status === 'cancelled') ? 'ملغي' : 'نشط';
      viewCreator.textContent = creator;
      viewCreated.textContent = created;
      viewDesc.textContent = desc;

      if(status === 'cancelled' && (cReason || cAt)) {
        cancelBox.classList.remove('hidden');
        cancelReason.textContent = cReason || '—';
        cancelAt.textContent = cAt || '—';
      } else {
        cancelBox.classList.add('hidden');
        cancelReason.textContent = '—';
        cancelAt.textContent = '—';
      }

      openBox(boxView);
    });
  });

  // Open Cancel
  document.querySelectorAll('[data-iman-open-cancel]').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.dataset.id || '';
      const title = btn.dataset.title || '—';

      elTitle.textContent = 'إلغاء قرار';
      elSub.textContent = 'يتطلب سبب الإلغاء';

      cancelTitle.textContent = title;
      if(cancelId) cancelId.value = id;

      // If route expects /{id} we can patch action dynamically if it ends with /0
      if(cancelForm && cancelForm.getAttribute('action')) {
        const action = cancelForm.getAttribute('action');
        // replace trailing "/0" or "0" at end with the id
        const patched = action.replace(/\/0(\b|$)/, '/' + id);
        cancelForm.setAttribute('action', patched);
      }

      openBox(boxCancel);
    });
  });

})();
</script>
@endsection