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

@section('title','خريطة المخاطر — غرفة إيمان')
@section('page-title','خريطة المخاطر — غرفة إيمان')

@section('content')
@php
  $section = $section ?? 'risk_map';

  $view   = $view   ?? request('view','table'); // table|cards
  $q      = $q      ?? request('q','');
  $status = $status ?? request('status','all');
  $level  = $level  ?? request('level','all'); // all|high|mid|low
  $from   = $from   ?? request('from','');
  $to     = $to     ?? request('to','');

  $stats  = $stats  ?? [];
  $members = $members ?? collect();

  $statusMeta = [
    'open'      => ['label'=>'مفتوح','cls'=>'border-rose-400/30 bg-rose-500/12 text-rose-200'],
    'watch'     => ['label'=>'مراقبة','cls'=>'border-amber-400/30 bg-amber-500/12 text-amber-200'],
    'mitigated' => ['label'=>'مخفف','cls'=>'border-sky-400/30 bg-sky-500/12 text-sky-200'],
    'closed'    => ['label'=>'مغلق','cls'=>'border-emerald-400/30 bg-emerald-500/12 text-emerald-200'],
  ];

  $levelMeta = [
    'high' => ['label'=>'خطر عالي','cls'=>'border-rose-400/30 bg-rose-500/12 text-rose-200'],
    'mid'  => ['label'=>'خطر متوسط','cls'=>'border-amber-400/30 bg-amber-500/12 text-amber-200'],
    'low'  => ['label'=>'خطر منخفض','cls'=>'border-emerald-400/30 bg-emerald-500/12 text-emerald-200'],
  ];

  $qs = request()->query();
@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-24 -right-10 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-10 w-96 h-96 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-6 space-y-4">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
              <span class="w-2 h-2 rounded-full bg-rose-400 animate-pulse"></span>
              غرفة إيمان • Risk Map • حلول ومتابعة
            </div>
            <h1 class="mt-2 text-xl sm:text-2xl font-extrabold text-white">خريطة المخاطر</h1>
            <p class="mt-1 text-sm text-white/60 max-w-3xl">
              سجّل المخاطر بشكل منظّم: <span class="text-white/90 font-semibold">شدة × احتمالية = Score</span>
              مع سبب جذري وخطة تخفيف ومتابعات — وكل شيء بنمط غرفة إيمان الملحمي.
            </p>
          </div>

          <div class="flex items-center gap-2">
            <a href="{{ url()->current() . '?' . http_build_query(['section'=>'iman_room']) }}"
               class="px-3 py-2 rounded-xl text-xs font-semibold border bg-white/5 text-white/80 border-white/10 hover:bg-white/10">
              ← رجوع لغرفة إيمان
            </a>

            <button type="button" data-iman-risk-open-create
               class="px-3 py-2 rounded-xl text-xs font-extrabold border bg-white text-slate-900 border-white hover:bg-white/90">
              + خطر جديد
            </button>
          </div>
        </div>

        {{-- Summary --}}
        <div class="grid grid-cols-2 sm:grid-cols-8 gap-2">
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">المجموع</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['total'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">مفتوح</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['open'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">مراقبة</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['watch'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">مخفف</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['mitigated'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">مغلق</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['closed'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">عالي</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['high'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">متوسط</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['mid'] ?? 0) }}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">منخفض</div>
            <div class="text-lg font-extrabold text-white">{{ (int)($stats['low'] ?? 0) }}</div>
          </div>
        </div>

        {{-- Filters + View --}}
        <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="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-fuchsia-500/40">
          </div>

          <div class="sm:col-span-2">
            <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="open" @selected($status==='open')>مفتوح</option>
              <option value="watch" @selected($status==='watch')>مراقبة</option>
              <option value="mitigated" @selected($status==='mitigated')>مخفف</option>
              <option value="closed" @selected($status==='closed')>مغلق</option>
            </select>
          </div>

          <div class="sm:col-span-2">
            <label class="block text-xs text-white/60 mb-1">مستوى الخطر</label>
            <select name="level"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="all" @selected($level==='all')>الكل</option>
              <option value="high" @selected($level==='high')>عالي</option>
              <option value="mid" @selected($level==='mid')>متوسط</option>
              <option value="low" @selected($level==='low')>منخفض</option>
            </select>
          </div>

          <div class="sm:col-span-2">
            <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-2">
            <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-1 flex items-end gap-2">
            <button type="submit"
                    class="w-full px-4 py-2.5 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90">
              تطبيق
            </button>
          </div>

          <div class="sm:col-span-12 flex items-center justify-between gap-2">
            <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>
            </div>

            <a href="{{ url()->current() . '?' . http_build_query(['section'=>$section,'view'=>$view]) }}"
               class="px-4 py-2 rounded-xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 text-center font-semibold text-xs">
              تصفير
            </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

      @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 = $statusMeta[$r->status ?? 'open'] ?? $statusMeta['open'];
              $score = (int)($r->score ?? ((int)($r->severity ?? 3) * (int)($r->likelihood ?? 3)));
              $lvl = $score >= 16 ? 'high' : ($score >= 9 ? 'mid' : 'low');
              $lv = $levelMeta[$lvl] ?? $levelMeta['mid'];

              $membersArr = [];
              if (!empty($r->members_json)) {
                try { $membersArr = json_decode($r->members_json, true) ?: []; } catch (\Throwable $e) { $membersArr = []; }
              }
              $ownerMini = collect($membersArr)->pluck('name')->filter()->take(2)->implode('، ');
              $ownerMini = $ownerMini ?: ($r->owner_name ?? '—');
            @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 truncate">
                    {{ $r->category ?? '—' }} • مُسجّل: {{ $r->creator_name ?? '—' }}
                  </div>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-bold border {{ $st['cls'] }}">{{ $st['label'] }}</span>
              </div>

              <div class="mt-3 grid grid-cols-3 gap-2 text-sm">
                <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                  <div class="text-xs text-white/60">الشدة</div>
                  <div class="text-white font-extrabold">{{ (int)$r->severity }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                  <div class="text-xs text-white/60">الاحتمال</div>
                  <div class="text-white font-extrabold">{{ (int)$r->likelihood }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                  <div class="text-xs text-white/60">Score</div>
                  <div class="text-white font-extrabold">{{ $score }}</div>
                </div>
              </div>

              <div class="mt-2">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold border {{ $lv['cls'] }}">
                  {{ $lv['label'] }}
                </span>
                @if((int)($r->followup_needed ?? 0) === 1)
                  <span class="mr-2 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold border border-fuchsia-400/30 bg-fuchsia-500/12 text-fuchsia-200">
                    بحاجة متابعة
                  </span>
                @endif
              </div>

              <div class="mt-3 text-sm text-white/80 line-clamp-2">
                <span class="text-white/60">خطة التخفيف:</span>
                {{ $r->mitigation_plan ?: '—' }}
              </div>

              <div class="mt-3 text-xs text-white/50">
                أصحاب/أعضاء: <span class="text-white/80 font-bold">{{ $ownerMini }}</span>
              </div>

              <div class="mt-4 flex items-center justify-between gap-2">
                <button type="button"
                        data-iman-risk-open-details
                        data-risk='@json($r)'
                        class="px-3 py-2 rounded-xl bg-white/10 text-white/90 border border-white/10 hover:bg-white/15 text-xs font-extrabold">
                  عرض التفاصيل
                </button>

                <form method="POST" action="{{ route('superadmin.iman-room.risk-map.status', $r->id) }}" class="flex items-center gap-2">
                  @csrf
                  <select name="status" class="rounded-xl bg-black/40 border border-white/10 text-white px-2 py-2 text-xs focus:outline-none">
                    @foreach(['open'=>'مفتوح','watch'=>'مراقبة','mitigated'=>'مخفف','closed'=>'مغلق'] as $k=>$v)
                      <option value="{{ $k }}" @selected(($r->status ?? 'open')===$k)>{{ $v }}</option>
                    @endforeach
                  </select>
                  <button class="px-3 py-2 rounded-xl bg-white text-slate-900 font-extrabold text-xs hover:bg-white/90">تحديث</button>
                </form>
              </div>
            </div>
          @endforeach
        </div>
      @else
        <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="min-w-[1100px] w-full text-sm">
              <thead class="bg-black/40 text-white/70">
                <tr>
                  <th class="px-3 py-3 text-right">#</th>
                  <th class="px-3 py-3 text-right">العنوان</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">Score</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 = $statusMeta[$r->status ?? 'open'] ?? $statusMeta['open'];
                    $score = (int)($r->score ?? ((int)($r->severity ?? 3) * (int)($r->likelihood ?? 3)));
                  @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 line-clamp-1">{{ $r->mitigation_plan ?: ($r->root_cause ?: '—') }}</div>
                    </td>
                    <td class="px-3 py-3">
                      <span class="px-2.5 py-1 rounded-full text-xs font-bold border {{ $st['cls'] }}">{{ $st['label'] }}</span>
                    </td>
                    <td class="px-3 py-3 font-extrabold text-white">{{ (int)$r->severity }}</td>
                    <td class="px-3 py-3 font-extrabold text-white">{{ (int)$r->likelihood }}</td>
                    <td class="px-3 py-3 font-extrabold text-white">{{ $score }}</td>
                    <td class="px-3 py-3 text-white/70">{{ $r->category ?? '—' }}</td>
                    <td class="px-3 py-3 text-white/70">{{ $r->creator_name ?? '—' }}</td>
                    <td class="px-3 py-3 whitespace-nowrap">
                      <button type="button"
                              data-iman-risk-open-details
                              data-risk='@json($r)'
                              class="px-3 py-2 rounded-xl bg-white/10 text-white/90 border border-white/10 hover:bg-white/15 text-xs font-extrabold">
                        عرض
                      </button>
                      <form method="POST" action="{{ route('superadmin.iman-room.risk-map.status', $r->id) }}" class="inline-flex items-center gap-2 mr-2">
                        @csrf
                        <select name="status" class="rounded-xl bg-black/40 border border-white/10 text-white px-2 py-2 text-xs focus:outline-none">
                          @foreach(['open'=>'مفتوح','watch'=>'مراقبة','mitigated'=>'مخفف','closed'=>'مغلق'] as $k=>$v)
                            <option value="{{ $k }}" @selected(($r->status ?? 'open')===$k)>{{ $v }}</option>
                          @endforeach
                        </select>
                        <button class="px-3 py-2 rounded-xl bg-white text-slate-900 font-extrabold text-xs hover:bg-white/90">تحديث</button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <div class="p-3 border-t border-white/10">
            {{ $rows->links() }}
          </div>
        </div>
      @endif
    @endif

  </div>
</div>

{{-- مودل إنشاء خطر --}}
<div id="imanRiskCreateModal" class="fixed inset-0 z-[80] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>

  <div class="absolute inset-0 flex items-end sm:items-center justify-center p-3">
    <div class="w-full sm:max-w-3xl 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="text-white font-extrabold">إضافة خطر جديد — غرفة إيمان</div>
        <button type="button" data-iman-risk-close-create class="w-10 h-10 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      <form method="POST" action="{{ route('superadmin.iman-room.risk-map.store') }}" class="p-4 sm:p-5 space-y-4">
        @csrf

        <div class="grid grid-cols-1 sm:grid-cols-12 gap-2.5">
          <div class="sm:col-span-7">
            <label class="block text-xs text-white/60 mb-1">عنوان الخطر</label>
            <input name="title" required
                   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 class="sm:col-span-5">
            <label class="block text-xs text-white/60 mb-1">الفئة</label>
            <input name="category"
                   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-cyan-500/40"
                   placeholder="واجهة / سيرفر / صلاحيات / أداء...">
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">الحالة</label>
            <select name="status"
                    class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
              <option value="open">مفتوح</option>
              <option value="watch">مراقبة</option>
              <option value="mitigated">مخفف</option>
              <option value="closed">مغلق</option>
            </select>
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">الشدة (1-5)</label>
            <input type="number" name="severity" min="1" max="5" value="3" required
                   class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">الاحتمالية (1-5)</label>
            <input type="number" name="likelihood" min="1" max="5" value="3" required
                   class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
          </div>

          <div class="sm:col-span-6">
            <label class="block text-xs text-white/60 mb-1">تاريخ الخطر</label>
            <input type="date" name="risk_date"
                   class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
          </div>

          <div class="sm:col-span-6">
            <label class="block text-xs text-white/60 mb-1">تاريخ الاستحقاق</label>
            <input type="date" name="due_date"
                   class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
          <div>
            <label class="block text-xs text-white/60 mb-1">الأعراض / كيف ظهر؟</label>
            <textarea name="symptoms" rows="3"
                      class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none"
                      placeholder="وصف سريع للأعراض..."></textarea>
          </div>
          <div>
            <label class="block text-xs text-white/60 mb-1">السبب الجذري</label>
            <textarea name="root_cause" rows="3"
                      class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none"
                      placeholder="ليش صار؟ السبب الحقيقي..."></textarea>
          </div>
        </div>

        <div>
          <label class="block text-xs text-white/60 mb-1">التأثير</label>
          <textarea name="impact" rows="3"
                    class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none"
                    placeholder="شو أثره على الفريق/النتائج/المستخدم؟"></textarea>
        </div>

        <div>
          <label class="block text-xs text-white/60 mb-1">خطة التخفيف (Mitigation)</label>
          <textarea name="mitigation_plan" rows="3"
                    class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none"
                    placeholder="الحل أو خطوات المعالجة..."></textarea>
        </div>

        {{-- members multi select --}}
        <div>
          <label class="block text-xs text-white/60 mb-1">الأعضاء (اختيار متعدد)</label>
          <select name="members_ids[]" multiple
                  class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none">
            @foreach($members as $m)
              <option value="{{ $m->id }}">{{ $m->name ?: $m->username }} — {{ $m->membership_status }}</option>
            @endforeach
          </select>
          <div class="mt-1 text-[11px] text-white/40">تقدر تختار أكثر من عضو (اضغط مطوّل بالموبايل).</div>
        </div>

        {{-- followup --}}
        <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
          <label class="flex items-center gap-2 text-white/80 text-sm font-bold">
            <input type="checkbox" name="followup_needed" value="1" class="rounded border-white/20 bg-black/40">
            بحاجة متابعة؟
          </label>
          <div class="mt-2">
            <textarea name="followup_plan" rows="2"
                      class="w-full rounded-2xl bg-black/40 border border-white/10 text-white px-3 py-2.5 text-sm focus:outline-none"
                      placeholder="لو نعم: شو خطة المتابعة؟"></textarea>
          </div>
        </div>

        {{-- attachments UI (disabled storage for now) --}}
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="flex items-center justify-between gap-2">
            <div class="text-white font-extrabold">المرفقات (قريبًا)</div>
            <span class="text-xs text-white/40">Drag & Drop — واجهة فقط</span>
          </div>

          <div class="mt-3 rounded-2xl border border-dashed border-white/20 bg-black/30 p-4 text-center text-white/60"
               data-iman-risk-dropzone>
            اسحب الملفات هون (حالياً معطّل)
            <div class="mt-1 text-xs text-white/40">رح نفعّل الرفع الحقيقي بعدين بدون ما نكسر أي JS.</div>
          </div>

          <input type="hidden" name="attachments_json" value="">
        </div>

        <div class="flex items-center justify-end gap-2">
          <button type="button" data-iman-risk-close-create
                  class="px-4 py-2.5 rounded-xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 font-semibold">
            إلغاء
          </button>
          <button
            class="px-5 py-2.5 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90">
            حفظ الخطر
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- مودل تفاصيل --}}
<div id="imanRiskDetailsModal" class="fixed inset-0 z-[90] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
  <div class="absolute inset-0 flex items-end sm:items-center justify-center p-3">
    <div class="w-full sm:max-w-3xl 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="text-white font-extrabold">تفاصيل الخطر</div>
        <button type="button" data-iman-risk-close-details class="w-10 h-10 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-white">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      <div class="p-4 sm:p-5 space-y-3" data-iman-risk-details-body>
        {{-- Filled by JS --}}
      </div>

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

{{-- Scoped JS (no globals, no conflicts) --}}
<script>
(() => {
  const $ = (sel, root=document) => root.querySelector(sel);
  const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));

  const createModal  = $('#imanRiskCreateModal');
  const detailsModal = $('#imanRiskDetailsModal');
  const detailsBody  = $('[data-iman-risk-details-body]');

  const openCreateBtns = $$('[data-iman-risk-open-create]');
  const closeCreateBtns = $$('[data-iman-risk-close-create]');

  const closeDetailsBtns = $$('[data-iman-risk-close-details]');

  const open = (el) => { if(el) el.classList.remove('hidden'); document.documentElement.classList.add('overflow-hidden'); };
  const close = (el) => { if(el) el.classList.add('hidden'); document.documentElement.classList.remove('overflow-hidden'); };

  openCreateBtns.forEach(b => b.addEventListener('click', () => open(createModal)));
  closeCreateBtns.forEach(b => b.addEventListener('click', () => close(createModal)));

  closeDetailsBtns.forEach(b => b.addEventListener('click', () => close(detailsModal)));

  // Open details
  $$('[data-iman-risk-open-details]').forEach(btn => {
    btn.addEventListener('click', () => {
      let r = null;
      try { r = JSON.parse(btn.getAttribute('data-risk') || 'null'); } catch(e){ r=null; }
      if(!r || !detailsBody) return;

      const stMap = {open:'مفتوح',watch:'مراقبة',mitigated:'مخفف',closed:'مغلق'};
      const score = (r.score ?? ((Number(r.severity||3) * Number(r.likelihood||3)))) | 0;

      let members = '—';
      try {
        const arr = r.members_json ? JSON.parse(r.members_json) : [];
        if (Array.isArray(arr) && arr.length) {
          members = arr.map(x => x.name || x.id).slice(0, 10).join('، ');
        }
      } catch(e){}

      detailsBody.innerHTML = `
        <div class="space-y-2">
          <div class="text-white text-xl font-extrabold">${escapeHtml(r.title || '—')}</div>
          <div class="text-white/60 text-sm">${escapeHtml(r.category || '—')} • الحالة: <span class="text-white/90 font-bold">${escapeHtml(stMap[r.status] || r.status || '—')}</span></div>
        </div>

        <div class="grid grid-cols-3 gap-2">
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">الشدة</div>
            <div class="text-white font-extrabold">${Number(r.severity||0)}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">الاحتمال</div>
            <div class="text-white font-extrabold">${Number(r.likelihood||0)}</div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/30 p-3">
            <div class="text-xs text-white/60">Score</div>
            <div class="text-white font-extrabold">${score}</div>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4 space-y-2">
          <div class="text-white/90 font-extrabold">الأعضاء</div>
          <div class="text-white/70 text-sm">${escapeHtml(members)}</div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-white/90 font-extrabold">الأعراض</div>
            <div class="mt-1 text-white/70 text-sm whitespace-pre-wrap">${escapeHtml(r.symptoms || '—')}</div>
          </div>
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-white/90 font-extrabold">السبب الجذري</div>
            <div class="mt-1 text-white/70 text-sm whitespace-pre-wrap">${escapeHtml(r.root_cause || '—')}</div>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/90 font-extrabold">التأثير</div>
          <div class="mt-1 text-white/70 text-sm whitespace-pre-wrap">${escapeHtml(r.impact || '—')}</div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/90 font-extrabold">خطة التخفيف</div>
          <div class="mt-1 text-white/70 text-sm whitespace-pre-wrap">${escapeHtml(r.mitigation_plan || '—')}</div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-black/30 p-4">
          <div class="text-white/90 font-extrabold">المتابعة</div>
          <div class="mt-1 text-white/70 text-sm whitespace-pre-wrap">
            ${(Number(r.followup_needed||0)===1) ? 'نعم ✅' : 'لا'}
            <div class="mt-2">${escapeHtml(r.followup_plan || '')}</div>
          </div>
        </div>
      `;

      open(detailsModal);
    });
  });

  // Close on ESC
  document.addEventListener('keydown', (e) => {
    if(e.key === 'Escape'){
      close(createModal);
      close(detailsModal);
    }
  });

  // click outside closes
  [createModal, detailsModal].forEach(modal => {
    if(!modal) return;
    modal.addEventListener('click', (e) => {
      if(e.target === modal) close(modal);
    });
  });

  function escapeHtml(str){
    return String(str ?? '').replace(/[&<>"']/g, (m) => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'
    }[m]));
  }
})();
</script>
@endsection