@extends('layouts.superadmin')
@section('title','مشاكل وحلول — غرفة إيمان الملكاوي')

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

  $members = collect($members ?? [])->map(fn($m) => is_array($m) ? (object)$m : $m);
  $membersMap = $members->keyBy('id');

  $decode = function ($json) {
      if (!$json) return [];
      $arr = json_decode($json, true);
      return is_array($arr) ? $arr : [];
  };

  $safeAvatar = function ($avatar) {
      if (!$avatar) return null;
      if (Str::startsWith($avatar, ['http://','https://','//'])) return $avatar;
      if (Str::startsWith($avatar, ['storage/','/storage/'])) return Str::startsWith($avatar,'/') ? $avatar : '/'.$avatar;
      if (Str::startsWith($avatar, ['public/'])) return '/storage/'.Str::after($avatar,'public/');
      if (Str::contains($avatar,'/')) return '/'.$avatar;
      return null;
  };

  $severityMeta = [
    'low'      => ['t'=>'منخفضة','cls'=>'border-emerald-400/20 bg-emerald-500/10 text-emerald-200','ic'=>'fa-leaf'],
    'medium'   => ['t'=>'متوسطة','cls'=>'border-sky-400/20 bg-sky-500/10 text-sky-200','ic'=>'fa-wave-square'],
    'high'     => ['t'=>'عالية','cls'=>'border-amber-400/20 bg-amber-500/10 text-amber-100','ic'=>'fa-triangle-exclamation'],
    'critical' => ['t'=>'حرجة','cls'=>'border-rose-400/20 bg-rose-500/10 text-rose-100','ic'=>'fa-skull-crossbones'],
  ];

  $statusMeta = [
    'open'        => ['t'=>'مفتوحة','cls'=>'border-white/10 bg-white/5 text-white/80','ic'=>'fa-circle-dot'],
    'in_progress' => ['t'=>'قيد العمل','cls'=>'border-cyan-400/20 bg-cyan-500/10 text-cyan-200','ic'=>'fa-spinner'],
    'resolved'    => ['t'=>'تم الحل','cls'=>'border-emerald-400/20 bg-emerald-500/10 text-emerald-200','ic'=>'fa-circle-check'],
    'blocked'     => ['t'=>'معلّقة','cls'=>'border-amber-400/20 bg-amber-500/10 text-amber-100','ic'=>'fa-ban'],
  ];

  $fmtSize = function ($bytes) {
      $b = (float)($bytes ?? 0);
      if ($b <= 0) return null;
      $units = ['B','KB','MB','GB'];
      $i=0; while ($b>=1024 && $i<3) { $b/=1024; $i++; }
      return number_format($b,2).$units[$i];
  };

@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-amber-400/20 shadow-2xl shadow-amber-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-amber-400/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-fuchsia-400/10 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
        <div class="space-y-2">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-amber-300/25 text-[11px] text-amber-100">
            <i class="fa-solid fa-screwdriver-wrench text-xs"></i>
            <span>مشاكل + حلول + سجلات توثيق</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            مشاكل وحلول
          </h1>

          <div class="text-[12px] sm:text-[14px] text-slate-200/80">
            سجّل المشكلة، وضّح الحل، وراقب التقدم بسجل واضح — والضغط على أي عنصر يفتح تفاصيله في Drawer.
          </div>

          <div class="mt-3 flex flex-wrap gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              الفترة: {{ $from }} → {{ $to }}
            </span>
          </div>
        </div>

        <div class="w-full lg:w-auto space-y-2">
          <div class="flex items-center justify-end gap-2">
            <a href="{{ route('superadmin.iman.section', 'issues_solutions') }}?view=table"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $viewMode === 'table' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
              <i class="fa-solid fa-table ms-2"></i> جدول
            </a>
            <a href="{{ route('superadmin.iman.section', 'issues_solutions') }}?view=cards"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $viewMode === 'cards' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
              <i class="fa-solid fa-grip ms-2"></i> كروت
            </a>

            <button id="isOpenCreate"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
               bg-gradient-to-r from-amber-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-amber-500/15 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-plus ms-2"></i>
              مشكلة جديدة
            </button>
          </div>

          <div class="flex items-center justify-end">
            <a href="{{ route('superadmin.iman.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
              <i class="fa-solid fa-arrow-left-long"></i>
              رجوع للغرفة
            </a>
          </div>
        </div>

      </div>
    </div>

    {{-- FLASH --}}
    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif
    @if($errors->any())
      <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-100 px-4 py-3 text-sm">
        <b class="block mb-1">في أخطاء:</b>
        <ul class="list-disc pr-5 space-y-1">
          @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    {{-- STATS --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-6">
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">عدد العناصر</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['total'] ?? 0 }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">مفتوحة/قيد العمل</div>
        <div class="text-2xl font-extrabold text-cyan-200 mt-1">{{ $stats['open'] ?? 0 }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">تم الحل</div>
        <div class="text-2xl font-extrabold text-emerald-200 mt-1">{{ $stats['resolved'] ?? 0 }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">حرجة</div>
        <div class="text-2xl font-extrabold text-rose-200 mt-1">{{ $stats['critical'] ?? 0 }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">بحاجة متابعة</div>
        <div class="text-2xl font-extrabold text-amber-200 mt-1">{{ $stats['with_followup'] ?? 0 }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">مع مرفقات</div>
        <div class="text-2xl font-extrabold text-fuchsia-200 mt-1">{{ $stats['with_attachments'] ?? 0 }}</div>
      </div>
    </div>

    {{-- LIST --}}
    @if($viewMode === 'cards')
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($issues as $i)
          @php
            $sev = $i->severity ?? 'medium';
            $st  = $i->status ?? 'open';
            $sevM = $severityMeta[$sev] ?? $severityMeta['medium'];
            $stM  = $statusMeta[$st] ?? $statusMeta['open'];

            $memberIds = $decode($i->member_ids ?? null);
            $att = $decode($i->attachments ?? null);

            $dur = $i->duration_minutes ? round(($i->duration_minutes/60),2).' ساعة' : '—';

            $issueAt = $i->issue_at ?? ($i->created_at ?? null);
            $pFrom = $i->period_from ?? '—';
            $pTo   = $i->period_to ?? '—';
          @endphp

          <button type="button"
                  class="text-left w-full relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/60 via-black/30 to-black/40 p-5 shadow-2xl hover:border-amber-300/25 hover:bg-white/5 transition"
                  data-is-open-drawer="1"
                  data-is-template="is_tpl_{{ $i->id }}">
            <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-amber-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[11px] text-white/60">مشكلة</div>
                <div class="text-[14px] font-extrabold text-white truncate">{{ $i->issue_title }}</div>
                <div class="text-[11px] text-white/55 mt-1">
                  {{ $issueAt ? $issueAt : 'بدون وقت' }}
                </div>

                <div class="mt-2 flex flex-wrap gap-2">
                  <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $sevM['cls'] }}">
                    <i class="fa-solid {{ $sevM['ic'] }} text-[11px]"></i>
                    {{ $sevM['t'] }}
                  </span>
                  <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $stM['cls'] }}">
                    <i class="fa-solid {{ $stM['ic'] }} text-[11px]"></i>
                    {{ $stM['t'] }}
                  </span>
                </div>
              </div>

              <div class="text-right">
                <div class="text-[10px] text-white/60">المدة</div>
                <div class="text-xl font-extrabold text-white">{{ $dur }}</div>
              </div>
            </div>

            <div class="mt-4 grid gap-2 text-[11px] text-white/70">
              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                الفترة: <b class="text-white/90">{{ $pFrom }}</b> → <b class="text-white/90">{{ $pTo }}</b>
                <span class="text-white/50">•</span>
                أعضاء: <b class="text-white/90">{{ is_array($memberIds) ? count($memberIds) : 0 }}</b>
                <span class="text-white/50">•</span>
                مرفقات: <b class="text-white/90">{{ is_array($att) ? count($att) : 0 }}</b>
              </div>

              @if(($i->has_followup ?? 0) == 1)
                <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3">
                  متابعة: <b class="text-amber-100">نعم</b>
                </div>
              @endif
            </div>

            {{-- TEMPLATE (تفاصيل كاملة للـ Drawer) --}}
            <template id="is_tpl_{{ $i->id }}">
              <div class="space-y-4">

                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <div class="text-[11px] text-white/60">تفاصيل المشكلة</div>
                    <div class="text-xl font-extrabold text-white break-words">{{ $i->issue_title }}</div>
                    <div class="text-[12px] text-white/60 mt-1">
                      {{ $issueAt ? $issueAt : 'بدون وقت' }}
                    </div>
                  </div>

                  <div class="flex flex-col items-end gap-2">
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $sevM['cls'] }}">
                      <i class="fa-solid {{ $sevM['ic'] }} text-[11px]"></i>
                      {{ $sevM['t'] }}
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $stM['cls'] }}">
                      <i class="fa-solid {{ $stM['ic'] }} text-[11px]"></i>
                      {{ $stM['t'] }}
                    </span>
                  </div>
                </div>

                <div class="grid gap-2 text-[12px] text-white/80">
                  <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                    <b class="text-white/90">الفترة:</b>
                    {{ $pFrom }} → {{ $pTo }}
                    <span class="text-white/50">•</span>
                    <b class="text-white/90">المدة:</b> {{ $dur }}
                  </div>
                </div>

                @if($i->issue_text)
                  <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                    <div class="text-[11px] text-white/60 mb-1">وصف المشكلة</div>
                    <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->issue_text }}</div>
                  </div>
                @endif

                @if($i->solution_text)
                  <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3">
                    <div class="text-[11px] text-emerald-200/90 mb-1">الحل / المعالجة</div>
                    <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->solution_text }}</div>
                  </div>
                @endif

                @if(($i->has_followup ?? 0) == 1 && $i->followup_text)
                  <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3">
                    <div class="text-[11px] text-amber-100 mb-1">المتابعات</div>
                    <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->followup_text }}</div>
                  </div>
                @endif

                {{-- Members --}}
                @if(is_array($memberIds) && count($memberIds))
                  <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                    <div class="text-[11px] text-white/60 mb-2">الأعضاء المرتبطين</div>
                    <div class="flex flex-wrap gap-2">
                      @foreach($memberIds as $mid)
                        @php
                          $m = $membersMap->get((int)$mid);
                          $mName = $m?->name ?? ('#'.$mid);
                          $mAv = $safeAvatar($m?->avatar ?? null);
                        @endphp
                        <div class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl border border-white/10 bg-white/5">
                          <div class="w-8 h-8 rounded-2xl bg-black/40 border border-white/10 overflow-hidden grid place-items-center">
                            @if($mAv)
                              <img src="{{ $mAv }}" class="w-full h-full object-cover" alt="avatar">
                            @else
                              <i class="fa-solid fa-user text-white/60 text-xs"></i>
                            @endif
                          </div>
                          <div class="text-[12px] font-bold text-white/90">{{ $mName }}</div>
                        </div>
                      @endforeach
                    </div>
                  </div>
                @endif

                {{-- Attachments --}}
                @if(is_array($att) && count($att))
                  <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                    <div class="text-[11px] text-white/60 mb-2">المرفقات</div>
                    <div class="space-y-2">
                      @foreach($att as $a)
                        @php
                          $p = $a['path'] ?? null;
                          $name = $a['name'] ?? 'file';
                          $mime = $a['mime'] ?? null;
                          $size = $fmtSize($a['size'] ?? null);
                          $url = $p ? (Str::startsWith($p,'public/') ? Storage::url($p) : (Str::startsWith($p,'/storage') ? $p : $p)) : null;
                          $isImg = $mime ? Str::startsWith($mime,'image/') : Str::endsWith(strtolower($name), ['.png','.jpg','.jpeg','.webp','.gif']);
                        @endphp
                        <div class="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                          <div class="flex items-center justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[12px] font-extrabold text-white truncate">{{ $name }}</div>
                              <div class="text-[11px] text-white/50">
                                {{ $mime ?? 'file' }} @if($size) • {{ $size }} @endif
                              </div>
                            </div>
                            @if($url)
                              <a href="{{ $url }}" target="_blank"
                                 class="px-3 py-2 rounded-2xl bg-black/40 border border-white/10 text-[11px] text-white/80 hover:bg-white/10 transition">
                                فتح
                              </a>
                            @endif
                          </div>

                          @if($url && $isImg)
                            <div class="mt-3 overflow-hidden rounded-2xl border border-white/10">
                              <img src="{{ $url }}" class="w-full max-h-64 object-cover" alt="attachment">
                            </div>
                          @endif
                        </div>
                      @endforeach
                    </div>
                  </div>
                @endif

              </div>
            </template>
          </button>
        @empty
          <div class="rounded-3xl border border-white/10 bg-black/25 p-6 text-white/60">
            لا يوجد عناصر بعد.
          </div>
        @endforelse
      </div>
    @else
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5 overflow-hidden">
        <div class="text-sm font-extrabold text-white mb-3">جدول المشاكل والحلول</div>
        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="text-[11px] text-white/60">
              <tr class="border-b border-white/10">
                <th class="py-2 text-right">العنوان</th>
                <th class="py-2 text-right">الوقت</th>
                <th class="py-2 text-right">الخطورة</th>
                <th class="py-2 text-right">الحالة</th>
                <th class="py-2 text-right">الفترة</th>
                <th class="py-2 text-right">المدة</th>
                <th class="py-2 text-right">متابعة</th>
                <th class="py-2 text-right">مرفقات</th>
              </tr>
            </thead>
            <tbody class="text-[12px] text-white/80">
              @forelse($issues as $i)
                @php
                  $sev = $i->severity ?? 'medium';
                  $st  = $i->status ?? 'open';
                  $sevM = $severityMeta[$sev] ?? $severityMeta['medium'];
                  $stM  = $statusMeta[$st] ?? $statusMeta['open'];

                  $att = $decode($i->attachments ?? null);
                  $dur = $i->duration_minutes ? round(($i->duration_minutes/60),2).'س' : '—';
                  $issueAt = $i->issue_at ?? ($i->created_at ?? null);
                  $pFrom = $i->period_from ?? '—';
                  $pTo   = $i->period_to ?? '—';
                @endphp

                <tr class="border-b border-white/5 hover:bg-white/5 transition cursor-pointer"
                    data-is-open-drawer="1"
                    data-is-template="is_tpl_{{ $i->id }}">
                  <td class="py-2 font-bold text-white/90">{{ $i->issue_title }}</td>
                  <td class="py-2 text-white/60">{{ $issueAt ?? '—' }}</td>
                  <td class="py-2">
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $sevM['cls'] }}">
                      <i class="fa-solid {{ $sevM['ic'] }} text-[11px]"></i>
                      {{ $sevM['t'] }}
                    </span>
                  </td>
                  <td class="py-2">
                    <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $stM['cls'] }}">
                      <i class="fa-solid {{ $stM['ic'] }} text-[11px]"></i>
                      {{ $stM['t'] }}
                    </span>
                  </td>
                  <td class="py-2 text-white/60">{{ $pFrom }} → {{ $pTo }}</td>
                  <td class="py-2">{{ $dur }}</td>
                  <td class="py-2">{{ ($i->has_followup ?? 0) == 1 ? 'نعم' : 'لا' }}</td>
                  <td class="py-2">{{ is_array($att) ? count($att) : 0 }}</td>
                </tr>

                {{-- Template للتفاصيل --}}
                <template id="is_tpl_{{ $i->id }}">
                  @php
                    $memberIds = $decode($i->member_ids ?? null);
                  @endphp
                  <div class="space-y-4">

                    <div class="flex items-start justify-between gap-3">
                      <div class="min-w-0">
                        <div class="text-[11px] text-white/60">تفاصيل المشكلة</div>
                        <div class="text-xl font-extrabold text-white break-words">{{ $i->issue_title }}</div>
                        <div class="text-[12px] text-white/60 mt-1">{{ $issueAt ?? '—' }}</div>
                      </div>
                      <div class="flex flex-col items-end gap-2">
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $sevM['cls'] }}">
                          <i class="fa-solid {{ $sevM['ic'] }} text-[11px]"></i>
                          {{ $sevM['t'] }}
                        </span>
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] border {{ $stM['cls'] }}">
                          <i class="fa-solid {{ $stM['ic'] }} text-[11px]"></i>
                          {{ $stM['t'] }}
                        </span>
                      </div>
                    </div>

                    <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-white/80">
                      <b class="text-white/90">الفترة:</b> {{ $pFrom }} → {{ $pTo }}
                      <span class="text-white/50">•</span>
                      <b class="text-white/90">المدة:</b> {{ $dur }}
                    </div>

                    @if($i->issue_text)
                      <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                        <div class="text-[11px] text-white/60 mb-1">وصف المشكلة</div>
                        <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->issue_text }}</div>
                      </div>
                    @endif

                    @if($i->solution_text)
                      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3">
                        <div class="text-[11px] text-emerald-200/90 mb-1">الحل / المعالجة</div>
                        <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->solution_text }}</div>
                      </div>
                    @endif

                    @if(($i->has_followup ?? 0) == 1 && $i->followup_text)
                      <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3">
                        <div class="text-[11px] text-amber-100 mb-1">المتابعات</div>
                        <div class="whitespace-pre-line text-[13px] text-white/90">{{ $i->followup_text }}</div>
                      </div>
                    @endif

                    @if(is_array($memberIds) && count($memberIds))
                      <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                        <div class="text-[11px] text-white/60 mb-2">الأعضاء المرتبطين</div>
                        <div class="flex flex-wrap gap-2">
                          @foreach($memberIds as $mid)
                            @php
                              $m = $membersMap->get((int)$mid);
                              $mName = $m?->name ?? ('#'.$mid);
                              $mAv = $safeAvatar($m?->avatar ?? null);
                            @endphp
                            <div class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl border border-white/10 bg-white/5">
                              <div class="w-8 h-8 rounded-2xl bg-black/40 border border-white/10 overflow-hidden grid place-items-center">
                                @if($mAv)
                                  <img src="{{ $mAv }}" class="w-full h-full object-cover" alt="avatar">
                                @else
                                  <i class="fa-solid fa-user text-white/60 text-xs"></i>
                                @endif
                              </div>
                              <div class="text-[12px] font-bold text-white/90">{{ $mName }}</div>
                            </div>
                          @endforeach
                        </div>
                      </div>
                    @endif

                    @if(is_array($att) && count($att))
                      <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                        <div class="text-[11px] text-white/60 mb-2">المرفقات</div>
                        <div class="space-y-2">
                          @foreach($att as $a)
                            @php
                              $p = $a['path'] ?? null;
                              $name = $a['name'] ?? 'file';
                              $mime = $a['mime'] ?? null;
                              $size = $fmtSize($a['size'] ?? null);
                              $url = $p ? (Str::startsWith($p,'public/') ? Storage::url($p) : (Str::startsWith($p,'/storage') ? $p : $p)) : null;
                              $isImg = $mime ? Str::startsWith($mime,'image/') : Str::endsWith(strtolower($name), ['.png','.jpg','.jpeg','.webp','.gif']);
                            @endphp
                            <div class="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                              <div class="flex items-center justify-between gap-3">
                                <div class="min-w-0">
                                  <div class="text-[12px] font-extrabold text-white truncate">{{ $name }}</div>
                                  <div class="text-[11px] text-white/50">
                                    {{ $mime ?? 'file' }} @if($size) • {{ $size }} @endif
                                  </div>
                                </div>
                                @if($url)
                                  <a href="{{ $url }}" target="_blank"
                                     class="px-3 py-2 rounded-2xl bg-black/40 border border-white/10 text-[11px] text-white/80 hover:bg-white/10 transition">
                                    فتح
                                  </a>
                                @endif
                              </div>

                              @if($url && $isImg)
                                <div class="mt-3 overflow-hidden rounded-2xl border border-white/10">
                                  <img src="{{ $url }}" class="w-full max-h-64 object-cover" alt="attachment">
                                </div>
                              @endif
                            </div>
                          @endforeach
                        </div>
                      </div>
                    @endif

                  </div>
                </template>

              @empty
                <tr><td colspan="8" class="py-3 text-white/50">لا يوجد عناصر بعد.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    @endif

    {{-- LOGS TABLE --}}
    <div class="rounded-3xl border border-white/10 bg-black/25 p-5 overflow-hidden">
      <div class="text-sm font-extrabold text-white mb-3">السجلات (آخر 80)</div>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="text-[11px] text-white/60">
            <tr class="border-b border-white/10">
              <th class="py-2 text-right">الوقت</th>
              <th class="py-2 text-right">الإجراء</th>
              <th class="py-2 text-right">Issue ID</th>
              <th class="py-2 text-right">Actor</th>
              <th class="py-2 text-right">IP</th>
            </tr>
          </thead>
          <tbody class="text-[12px] text-white/80">
            @forelse($logs as $l)
              <tr class="border-b border-white/5">
                <td class="py-2 text-white/60">{{ $l->created_at ?? '—' }}</td>
                <td class="py-2 font-bold">{{ $l->action ?? '—' }}</td>
                <td class="py-2">{{ $l->issue_id ?? '—' }}</td>
                <td class="py-2">{{ $l->actor_id ?? '—' }}</td>
                <td class="py-2 text-white/60">{{ $l->ip ?? '—' }}</td>
              </tr>
            @empty
              <tr><td colspan="5" class="py-3 text-white/50">لا يوجد سجلات.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

  </div>

  {{-- DRAWER: DETAILS --}}
  <div id="isDrawer" class="hidden fixed inset-0 z-[9999]">
    <div class="absolute inset-0 bg-black/70" id="isDrawerBackdrop"></div>

    <div class="absolute inset-y-0 left-0 w-full sm:w-[520px] bg-gradient-to-br from-slate-950/95 via-black/90 to-black/95 border-r border-white/10 shadow-2xl">
      <div class="h-full flex flex-col">
        <div class="p-4 border-b border-white/10 flex items-start justify-between gap-3">
          <div>
            <div class="text-[11px] text-white/60">Drawer تفاصيل</div>
            <div class="text-lg font-extrabold text-white">مشاكل وحلول</div>
            <div class="text-[11px] text-white/50">اضغط على أي عنصر من القائمة لعرض التفاصيل هنا</div>
          </div>
          <button id="isDrawerClose"
            class="w-10 h-10 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition grid place-items-center">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>

        <div id="isDrawerBody" class="p-4 overflow-y-auto space-y-4">
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-white/70 text-sm">
            اختر عنصرًا لعرض تفاصيله.
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- MODAL: CREATE --}}
  <div id="isCreateModal" class="hidden fixed inset-0 z-[9998]">
    <div class="absolute inset-0 bg-black/70" id="isCreateBackdrop"></div>

    <div class="relative max-w-3xl mx-auto mt-6 sm:mt-10 px-3">
      <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/95 via-black/90 to-black/95 shadow-2xl">
        <div class="pointer-events-none absolute -top-20 -right-10 w-72 h-72 rounded-full bg-amber-400/10 blur-3xl"></div>

        <div class="p-4 sm:p-6 max-h-[82vh] overflow-y-auto">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="text-[11px] text-white/60">إنشاء مشكلة/حل</div>
              <div class="text-xl font-extrabold text-white">عنصر جديد</div>
              <div class="text-[12px] text-white/60 mt-1">مودل سكرول — مناسب للهاتف — JS Scoped</div>
            </div>

            <button id="isCloseCreate"
              class="w-10 h-10 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition grid place-items-center">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>

          <form class="mt-5 space-y-4"
                method="POST"
                action="{{ route('superadmin.iman.issues.store') }}"
                enctype="multipart/form-data">
            @csrf

            <div class="grid gap-3 sm:grid-cols-2">
              <div class="sm:col-span-2">
                <label class="text-[11px] text-white/70">عنوان المشكلة *</label>
                <input name="issue_title" required
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500/30"
                  placeholder="مثال: تعارض جافا سكربت في صفحة التقارير..." />
              </div>

              <div>
                <label class="text-[11px] text-white/70">وقت المشكلة (اختياري)</label>
                <input type="datetime-local" name="issue_at"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25" />
              </div>

              <div>
                <label class="text-[11px] text-white/70">الخطورة</label>
                <select name="severity"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500/25">
                  <option value="low">منخفضة</option>
                  <option value="medium" selected>متوسطة</option>
                  <option value="high">عالية</option>
                  <option value="critical">حرجة</option>
                </select>
              </div>

              <div>
                <label class="text-[11px] text-white/70">الفترة من (اختياري)</label>
                <input type="date" name="period_from"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-white/10" />
              </div>

              <div>
                <label class="text-[11px] text-white/70">الفترة إلى (اختياري)</label>
                <input type="date" name="period_to"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-white/10" />
              </div>

              <div>
                <label class="text-[11px] text-white/70">الحالة</label>
                <select name="status"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500/25">
                  <option value="open" selected>مفتوحة</option>
                  <option value="in_progress">قيد العمل</option>
                  <option value="resolved">تم الحل</option>
                  <option value="blocked">معلّقة</option>
                </select>
              </div>

              <div class="sm:col-span-2">
                <label class="text-[11px] text-white/70">الأعضاء (اختيار متعدد) (اختياري)</label>
                <select name="member_ids[]" multiple
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500/25">
                  @foreach($members as $m)
                    @php
                      $mName = $m->name ?? ('#'.$m->id);
                      $mRole = $m->membership_status ?? '';
                      $mGen  = $m->gender ?? '';
                    @endphp
                    <option value="{{ $m->id }}">{{ $mName }} @if($mRole) — {{ $mRole }} @endif @if($mGen) ({{ $mGen }}) @endif</option>
                  @endforeach
                </select>
                <div class="text-[10px] text-white/50 mt-1">تقدر تختار أكثر من عضو.</div>
              </div>
            </div>

            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-sm font-extrabold text-white mb-2">وصف المشكلة (اختياري)</div>
              <textarea name="issue_text" rows="4"
                class="w-full rounded-2xl bg-black/35 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-white/10"
                placeholder="اكتب تفاصيل المشكلة..."></textarea>
            </div>

            <div class="rounded-3xl border border-emerald-400/20 bg-emerald-500/10 p-4">
              <div class="text-sm font-extrabold text-emerald-200 mb-2">الحل / المعالجة (اختياري)</div>
              <textarea name="solution_text" rows="4"
                class="w-full rounded-2xl bg-black/35 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
                placeholder="اكتب الحل المقترح أو ما تم فعله..."></textarea>
            </div>

            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="flex items-center justify-between gap-2">
                <div class="text-sm font-extrabold text-white">هل هناك متابعات؟</div>
                <label class="inline-flex items-center gap-2 text-xs text-white/70">
                  <input id="isHasFollowup" type="checkbox" name="has_followup" value="1"
                    class="w-4 h-4 rounded border-white/20 bg-black/40" />
                  نعم
                </label>
              </div>
              <div id="isFollowupBox" class="hidden mt-3">
                <textarea name="followup_text" rows="4"
                  class="w-full rounded-2xl bg-black/35 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500/25"
                  placeholder="اكتب المتابعات المطلوبة..."></textarea>
              </div>
            </div>

            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-sm font-extrabold text-white mb-2">مرفقات (اختياري)</div>

              <input id="isFilesInput" type="file" name="attachments[]" multiple class="hidden" />

              <div id="isDropZone"
                   class="group cursor-pointer rounded-3xl border border-dashed border-white/20 bg-gradient-to-br from-slate-900/40 via-black/30 to-black/40
                          p-5 hover:border-amber-300/40 transition">
                <div class="flex items-center gap-3">
                  <div class="w-11 h-11 rounded-3xl bg-amber-500/15 border border-amber-400/20 grid place-items-center text-amber-200">
                    <i class="fa-solid fa-cloud-arrow-up"></i>
                  </div>
                  <div class="min-w-0">
                    <div class="text-[13px] font-extrabold text-white">اسحب الملفات هون أو اضغط للاختيار</div>
                    <div class="text-[11px] text-white/60">حتى 10MB لكل ملف</div>
                  </div>
                </div>

                <div id="isFilesPreview" class="mt-4 space-y-2"></div>
              </div>
            </div>

            <button class="w-full inline-flex items-center justify-center px-4 py-3 rounded-2xl text-sm font-extrabold text-slate-950
              bg-gradient-to-r from-amber-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-amber-500/20 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-floppy-disk ms-2"></i>
              حفظ
            </button>

          </form>

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

</div>

<script>
(() => {
  // =========================================================
  // Scoped JS (no conflicts)
  // =========================================================
  const $ = (id) => document.getElementById(id);

  // Drawer
  const drawer = $('isDrawer');
  const drawerBackdrop = $('isDrawerBackdrop');
  const drawerClose = $('isDrawerClose');
  const drawerBody = $('isDrawerBody');

  const openDrawer = () => drawer && drawer.classList.remove('hidden');
  const closeDrawer = () => drawer && drawer.classList.add('hidden');

  drawerBackdrop?.addEventListener('click', closeDrawer);
  drawerClose?.addEventListener('click', closeDrawer);

  // Delegate click for opening drawer (table rows & card buttons)
  document.addEventListener('click', (e) => {
    const el = e.target?.closest?.('[data-is-open-drawer="1"]');
    if (!el) return;

    const tplId = el.getAttribute('data-is-template');
    const tpl = tplId ? document.getElementById(tplId) : null;
    if (!tpl || !tpl.content) return;

    if (drawerBody) {
      drawerBody.innerHTML = '';
      drawerBody.appendChild(tpl.content.cloneNode(true));
    }
    openDrawer();
  }, { passive: true });

  // Create Modal
  const createModal = $('isCreateModal');
  const openCreate = $('isOpenCreate');
  const closeCreate = $('isCloseCreate');
  const createBackdrop = $('isCreateBackdrop');

  const openCreateModal = () => createModal && createModal.classList.remove('hidden');
  const closeCreateModal = () => createModal && createModal.classList.add('hidden');

  openCreate?.addEventListener('click', openCreateModal);
  closeCreate?.addEventListener('click', closeCreateModal);
  createBackdrop?.addEventListener('click', closeCreateModal);

  // Followup toggle
  const hasFollow = $('isHasFollowup');
  const followBox = $('isFollowupBox');
  hasFollow?.addEventListener('change', () => {
    followBox?.classList.toggle('hidden', !hasFollow.checked);
  });

  // Drag & Drop
  const dropZone = $('isDropZone');
  const filesInput = $('isFilesInput');
  const filesPreview = $('isFilesPreview');

  const renderFiles = (files) => {
    if (!filesPreview) return;
    filesPreview.innerHTML = '';
    if (!files || !files.length) {
      filesPreview.innerHTML = `<div class="text-[11px] text-white/55">لا يوجد ملفات مختارة.</div>`;
      return;
    }
    [...files].forEach((f) => {
      const sizeMB = (f.size / (1024*1024)).toFixed(2);
      filesPreview.insertAdjacentHTML('beforeend', `
        <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-white/80 flex items-center justify-between gap-2">
          <div class="truncate"><b class="text-white">${f.name}</b> <span class="text-white/50">(${sizeMB}MB)</span></div>
          <div class="text-white/50 text-[11px]">${f.type || 'file'}</div>
        </div>
      `);
    });
  };

  renderFiles([]);

  dropZone?.addEventListener('click', () => filesInput?.click());

  ['dragenter','dragover'].forEach(ev => {
    dropZone?.addEventListener(ev, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropZone.classList.add('ring-2','ring-amber-400/20');
    });
  });

  ['dragleave','drop'].forEach(ev => {
    dropZone?.addEventListener(ev, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropZone.classList.remove('ring-2','ring-amber-400/20');
    });
  });

  dropZone?.addEventListener('drop', (e) => {
    const dt = e.dataTransfer;
    if (!dt || !dt.files) return;
    try { filesInput.files = dt.files; } catch(_) {}
    renderFiles(dt.files);
  });

  filesInput?.addEventListener('change', () => {
    renderFiles(filesInput.files);
  });

  // Auto open create: ?create=1
  const url = new URL(window.location.href);
  if (url.searchParams.get('create') === '1') openCreateModal();
})();
</script>
@endsection