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

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

  // Map أسماء الأعضاء حسب ID عشان نطلع أسماء بدل IDs
  $membersMap = isset($members) ? $members->pluck('name','id') : collect();
@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-lightbulb 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">
            أنشئ تقرير مهمة بسرعة — واخزن كل شيء بسجل واضح.
          </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', 'reports_ideas') }}?view=table"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ ($viewMode ?? 'table') === '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', 'reports_ideas') }}?view=cards"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ ($viewMode ?? 'table') === '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="imanReports_openCreate"
               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-4">
      <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['avg_success'] ?? null) !== null ? ($stats['avg_success'].'%') : '—' }}</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>

    {{-- REPORTS (Table/Cards) --}}
    @if(($viewMode ?? 'table') === 'cards')
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($reports as $r)
          @php
            $att = $r->attachments ? (json_decode($r->attachments, true) ?: []) : [];
            $memberIds = $r->member_ids ? (json_decode($r->member_ids, true) ?: []) : [];
            $memberNames = collect($memberIds)->map(function($id) use ($membersMap) {
              $id = (string)$id;
              return $membersMap[$id] ?? $membersMap[(int)$id] ?? ('ID: '.$id);
            })->values();
            $dur = $r->duration_minutes ? round($r->duration_minutes/60, 2).' ساعة' : '—';
          @endphp

          {{-- JSON hidden per report (بدون أي global JS) --}}
          <script type="application/json" id="imanReports_json_{{ $r->id }}">
            {!! json_encode([
              'id' => $r->id,
              'report_title' => $r->report_title,
              'report_at' => $r->report_at,
              'period_from' => $r->period_from,
              'period_to' => $r->period_to,
              'duration_minutes' => $r->duration_minutes,
              'success_percent' => $r->success_percent,
              'has_followup' => (int)$r->has_followup,
              'followup_text' => $r->followup_text,
              'has_plan' => (int)$r->has_plan,
              'plan_text' => $r->plan_text,
              'member_ids' => $memberIds,
              'member_names' => $memberNames,
              'attachments' => $att,
              'created_at' => $r->created_at,
              'created_ip' => $r->ip ?? $r->created_ip ?? null,
            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
          </script>

          <button type="button"
                  class="text-right block 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:bg-white/[0.04] transition"
                  data-iman-report-open="{{ $r->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">{{ $r->report_title }}</div>
                <div class="text-[11px] text-white/55 mt-1">
                  {{ $r->report_at ? $r->report_at : 'بدون وقت محدد' }}
                </div>
              </div>

              <div class="text-left">
                <div class="text-[10px] text-white/60">نسبة النجاح</div>
                <div class="text-xl font-extrabold {{ ($r->success_percent ?? 0) >= 70 ? 'text-emerald-200' : (($r->success_percent ?? 0) >= 50 ? 'text-amber-200' : 'text-rose-200') }}">
                  {{ $r->success_percent !== null ? $r->success_percent.'%' : '—' }}
                </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">{{ $r->period_from ?? '—' }}</b> → <b class="text-white/90">{{ $r->period_to ?? '—' }}</b>
                <span class="text-white/50">•</span> المدة: <b class="text-white/90">{{ $dur }}</b>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                متابعة؟ <b class="{{ $r->has_followup ? 'text-amber-200' : 'text-emerald-200' }}">{{ $r->has_followup ? 'نعم' : 'لا' }}</b>
                <span class="text-white/50">•</span>
                خطة؟ <b class="{{ $r->has_plan ? 'text-fuchsia-200' : 'text-emerald-200' }}">{{ $r->has_plan ? 'نعم' : 'لا' }}</b>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                أعضاء: <b class="text-white/90">{{ $memberNames->count() }}</b>
                <span class="text-white/50">•</span>
                مرفقات: <b class="text-white/90">{{ is_array($att) ? count($att) : 0 }}</b>
              </div>
            </div>

            <div class="mt-4 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

            <div class="mt-4 flex items-center justify-between">
              <span class="text-[11px] text-white/50">اضغط لعرض التفاصيل</span>
              <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">
                <i class="fa-solid fa-up-right-from-square text-[10px]"></i>
                تفاصيل
              </span>
            </div>
          </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($reports as $r)
                @php
                  $att = $r->attachments ? (json_decode($r->attachments, true) ?: []) : [];
                  $memberIds = $r->member_ids ? (json_decode($r->member_ids, true) ?: []) : [];
                  $memberNames = collect($memberIds)->map(function($id) use ($membersMap) {
                    $id = (string)$id;
                    return $membersMap[$id] ?? $membersMap[(int)$id] ?? ('ID: '.$id);
                  })->values();
                  $dur = $r->duration_minutes ? round($r->duration_minutes/60, 2).'س' : '—';
                @endphp

                <script type="application/json" id="imanReports_json_{{ $r->id }}">
                  {!! json_encode([
                    'id' => $r->id,
                    'report_title' => $r->report_title,
                    'report_at' => $r->report_at,
                    'period_from' => $r->period_from,
                    'period_to' => $r->period_to,
                    'duration_minutes' => $r->duration_minutes,
                    'success_percent' => $r->success_percent,
                    'has_followup' => (int)$r->has_followup,
                    'followup_text' => $r->followup_text,
                    'has_plan' => (int)$r->has_plan,
                    'plan_text' => $r->plan_text,
                    'member_ids' => $memberIds,
                    'member_names' => $memberNames,
                    'attachments' => $att,
                    'created_at' => $r->created_at,
                    'created_ip' => $r->ip ?? $r->created_ip ?? null,
                  ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
                </script>

                <tr class="border-b border-white/5 hover:bg-white/5 transition cursor-pointer"
                    data-iman-report-open="{{ $r->id }}">
                  <td class="py-2 font-bold">{{ $r->report_title }}</td>
                  <td class="py-2 text-white/60">{{ $r->report_at ?? '—' }}</td>
                  <td class="py-2 text-white/60">{{ $r->period_from ?? '—' }} → {{ $r->period_to ?? '—' }}</td>
                  <td class="py-2">{{ $dur }}</td>
                  <td class="py-2 font-extrabold {{ ($r->success_percent ?? 0) >= 70 ? 'text-emerald-200' : (($r->success_percent ?? 0) >= 50 ? 'text-amber-200' : 'text-rose-200') }}">
                    {{ $r->success_percent !== null ? $r->success_percent.'%' : '—' }}
                  </td>
                  <td class="py-2">{{ $r->has_followup ? 'نعم' : 'لا' }}</td>
                  <td class="py-2">{{ $r->has_plan ? 'نعم' : 'لا' }}</td>
                  <td class="py-2">{{ is_array($att) ? count($att) : 0 }}</td>
                </tr>
              @empty
                <tr><td colspan="8" class="py-3 text-white/50">لا يوجد تقارير بعد.</td></tr>
              @endforelse
            </tbody>
          </table>
          <div class="mt-2 text-[11px] text-white/50">ملاحظة: اضغط على أي صف لعرض تفاصيل التقرير.</div>
        </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">Report 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->report_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 تفاصيل التقرير ============== --}}
  <div id="imanReports_drawerWrap" class="hidden fixed inset-0 z-[9999]">
    <div id="imanReports_drawerBackdrop" class="absolute inset-0 bg-black/70"></div>

    {{-- Drawer (RTL: يطلع من اليسار عشان ما يضرب الـ sidebar غالبًا) --}}
    <div id="imanReports_drawer"
         class="absolute top-0 left-0 h-full w-[92vw] sm:w-[520px] max-w-full
                bg-gradient-to-br from-slate-950/95 via-black/90 to-black/95
                border-r border-white/10 shadow-2xl
                translate-x-[-110%] transition-transform duration-200 ease-out">

      <div class="relative h-full flex flex-col">
        <div class="p-4 sm:p-5 border-b border-white/10">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[11px] text-white/60">تفاصيل التقرير</div>
              <div id="imanReports_dTitle" class="text-lg sm:text-xl font-extrabold text-white truncate">—</div>
              <div id="imanReports_dMeta" class="text-[12px] text-white/60 mt-1">—</div>
            </div>

            <button type="button" id="imanReports_drawerClose"
              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>

        <div class="p-4 sm:p-5 overflow-y-auto flex-1 space-y-4">

          {{-- KPI --}}
          <div class="grid gap-3 sm:grid-cols-3">
            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-[11px] text-white/60">نسبة النجاح</div>
              <div id="imanReports_dSuccess" class="text-xl font-extrabold text-cyan-200 mt-1">—</div>
            </div>
            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-[11px] text-white/60">مدة المهمة</div>
              <div id="imanReports_dDuration" class="text-xl font-extrabold text-amber-200 mt-1">—</div>
            </div>
            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-[11px] text-white/60">الفترة</div>
              <div id="imanReports_dPeriod" class="text-[13px] font-extrabold text-white mt-2">—</div>
            </div>
          </div>

          {{-- Members --}}
          <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>
              <div id="imanReports_dMembersCount" class="text-[12px] text-white/60">—</div>
            </div>
            <div id="imanReports_dMembers" class="mt-3 text-[13px] text-white/85 leading-relaxed">—</div>
          </div>

          {{-- Followup --}}
          <div id="imanReports_dFollowupBox" class="hidden rounded-3xl border border-amber-400/20 bg-amber-500/10 p-4">
            <div class="text-sm font-extrabold text-amber-100 mb-1">متابعة</div>
            <div id="imanReports_dFollowup" class="text-[13px] text-white/85 whitespace-pre-line">—</div>
          </div>

          {{-- Plan --}}
          <div id="imanReports_dPlanBox" class="hidden rounded-3xl border border-fuchsia-400/20 bg-fuchsia-500/10 p-4">
            <div class="text-sm font-extrabold text-fuchsia-100 mb-1">خطة</div>
            <div id="imanReports_dPlan" class="text-[13px] text-white/85 whitespace-pre-line">—</div>
          </div>

          {{-- Attachments --}}
          <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>
              <div id="imanReports_dAttCount" class="text-[12px] text-white/60">—</div>
            </div>

            <div id="imanReports_dAtt" class="mt-3 grid gap-3">
              {{-- injected --}}
            </div>

            <div id="imanReports_dAttEmpty" class="hidden mt-3 text-[12px] text-white/55">لا يوجد مرفقات.</div>
          </div>

          {{-- Footer meta --}}
          <div class="rounded-3xl border border-white/10 bg-black/20 p-4 text-[12px] text-white/60">
            <div>تم الإنشاء: <b id="imanReports_dCreatedAt" class="text-white/85">—</b></div>
            <div class="mt-1">IP: <b id="imanReports_dIP" class="text-white/85">—</b></div>
            <div class="mt-2 text-[11px] text-white/45">هذا Drawer لا يسبب تعارض لأنه لا يحقن أي متغيرات عامة.</div>
          </div>

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

  {{-- MODAL: Create Report (نفس تبعك بدون تغيير جذري) --}}
  <div id="imanReports_createModal" class="hidden fixed inset-0 z-[999]">
    <div class="absolute inset-0 bg-black/70" id="imanReports_createBackdrop"></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</div>
            </div>

            <button id="imanReports_closeCreate"
              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.reports.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="report_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="report_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">نسبة نجاح المهمة (0-100) (اختياري)</label>
                <input type="number" step="0.01" min="0" max="100" name="success_percent"
                  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"
                  placeholder="مثال: 86.5" />
              </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 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 ?? collect()) as $m)
                    <option value="{{ $m->id }}">{{ $m->name }} — {{ $m->membership_status }} ({{ $m->gender }})</option>
                  @endforeach
                </select>
                <div class="text-[10px] text-white/50 mt-1">تقدر تختار أكثر من عضو.</div>
              </div>
            </div>

            {{-- Followup --}}
            <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="imanReports_hasFollowup" type="checkbox" name="has_followup" value="1"
                    class="w-4 h-4 rounded border-white/20 bg-black/40" />
                  نعم
                </label>
              </div>
              <div id="imanReports_followupBox" 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>

            {{-- Plan --}}
            <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="imanReports_hasPlan" type="checkbox" name="has_plan" value="1"
                    class="w-4 h-4 rounded border-white/20 bg-black/40" />
                  نعم
                </label>
              </div>
              <div id="imanReports_planBox" class="hidden mt-3">
                <textarea name="plan_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-fuchsia-500/20"
                  placeholder="اكتب الخطة..."></textarea>
              </div>
            </div>

            {{-- Attachments Drag & Drop --}}
            <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="imanReports_filesInput" type="file" name="files[]" multiple class="hidden" />

              <div id="imanReports_dropZone"
                   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">حتى 10 ملفات — 8MB لكل ملف</div>
                  </div>
                </div>

                <div id="imanReports_filesPreview" 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>
(() => {
  "use strict";

  const $ = (sel, root=document) => root.querySelector(sel);

  // =============================
  // Drawer (تفاصيل التقرير)
  // =============================
  const wrap = $('#imanReports_drawerWrap');
  const drawer = $('#imanReports_drawer');
  const backdrop = $('#imanReports_drawerBackdrop');
  const closeBtn = $('#imanReports_drawerClose');

  const dTitle = $('#imanReports_dTitle');
  const dMeta = $('#imanReports_dMeta');
  const dSuccess = $('#imanReports_dSuccess');
  const dDuration = $('#imanReports_dDuration');
  const dPeriod = $('#imanReports_dPeriod');
  const dMembers = $('#imanReports_dMembers');
  const dMembersCount = $('#imanReports_dMembersCount');
  const dFollowupBox = $('#imanReports_dFollowupBox');
  const dFollowup = $('#imanReports_dFollowup');
  const dPlanBox = $('#imanReports_dPlanBox');
  const dPlan = $('#imanReports_dPlan');
  const dAtt = $('#imanReports_dAtt');
  const dAttCount = $('#imanReports_dAttCount');
  const dAttEmpty = $('#imanReports_dAttEmpty');
  const dCreatedAt = $('#imanReports_dCreatedAt');
  const dIP = $('#imanReports_dIP');

  const openDrawer = () => {
    wrap.classList.remove('hidden');
    requestAnimationFrame(() => drawer.classList.remove('translate-x-[-110%]'));
  };

  const closeDrawer = () => {
    drawer.classList.add('translate-x-[-110%]');
    setTimeout(() => wrap.classList.add('hidden'), 210);
  };

  backdrop?.addEventListener('click', closeDrawer);
  closeBtn?.addEventListener('click', closeDrawer);

  const safeText = (v) => (v === null || v === undefined || v === '' ? '—' : String(v));

  const isImageFile = (nameOrMime) => {
    const s = (nameOrMime || '').toLowerCase();
    return s.includes('image/') || s.endsWith('.png') || s.endsWith('.jpg') || s.endsWith('.jpeg') || s.endsWith('.gif') || s.endsWith('.webp');
  };

  const normalizeAttachment = (a) => {
    // يدعم:
    // 1) string path
    // 2) {path,name,size,mime}
    // 3) {url,...}
    if (!a) return null;

    if (typeof a === 'string') {
      return { name: a.split('/').pop(), path: a, url: a, mime: '' };
    }

    const path = a.path || a.file || a.url || '';
    const url  = a.url || path || '';
    const name = a.name || (path ? path.split('/').pop() : 'file');
    const size = a.size || a.bytes || null;
    const mime = a.mime || a.type || '';

    return { name, path, url, size, mime };
  };

  const resolveUrl = (u) => {
    if (!u) return null;
    // لو absolute
    if (/^https?:\/\//i.test(u)) return u;
    // لو يبدأ بـ /
    if (u.startsWith('/')) return u;
    // غير هيك: نخليه relative (Laravel public)
    return '/' + u;
  };

  const renderAttachments = (atts) => {
    dAtt.innerHTML = '';
    const list = Array.isArray(atts) ? atts.map(normalizeAttachment).filter(Boolean) : [];
    dAttCount.textContent = list.length ? (list.length + ' ملف') : '0';
    dAttEmpty.classList.toggle('hidden', list.length > 0);

    list.forEach((a) => {
      const url = resolveUrl(a.url);
      const isImg = isImageFile(a.mime || a.name);

      const sizeMB = (a.size && !isNaN(a.size)) ? (a.size / (1024*1024)).toFixed(2) + 'MB' : '';

      const card = document.createElement('div');
      card.className = 'rounded-3xl border border-white/10 bg-black/25 p-3 overflow-hidden';

      if (isImg && url) {
        card.innerHTML = `
          <a href="${url}" target="_blank" rel="noopener"
             class="block rounded-2xl overflow-hidden border border-white/10 bg-black/30">
            <img src="${url}" alt="${a.name}"
                 class="w-full h-44 object-cover" loading="lazy">
          </a>
          <div class="mt-2 flex items-center justify-between gap-2">
            <div class="min-w-0">
              <div class="text-[12px] font-extrabold text-white truncate">${a.name}</div>
              <div class="text-[11px] text-white/50 truncate">${sizeMB || (a.mime || 'image')}</div>
            </div>
            <a href="${url}" target="_blank" rel="noopener"
               class="shrink-0 px-3 py-1.5 rounded-2xl bg-white/10 border border-white/15 text-[11px] text-white/80 hover:bg-white/15 transition">
              فتح
            </a>
          </div>
        `;
      } else {
        card.innerHTML = `
          <div class="flex items-center justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[12px] font-extrabold text-white truncate">${a.name}</div>
              <div class="text-[11px] text-white/50 truncate">${sizeMB || (a.mime || 'file')}</div>
            </div>
            ${url ? `
              <a href="${url}" target="_blank" rel="noopener"
                 class="shrink-0 px-3 py-1.5 rounded-2xl bg-white/10 border border-white/15 text-[11px] text-white/80 hover:bg-white/15 transition">
                تنزيل/فتح
              </a>` : `
              <span class="text-[11px] text-white/40">بدون رابط</span>
            `}
          </div>
        `;
      }

      dAtt.appendChild(card);
    });
  };

  const fillDrawer = (data) => {
    dTitle.textContent = safeText(data.report_title);
    dMeta.textContent  = `ID: ${safeText(data.id)} • وقت التقرير: ${safeText(data.report_at)}`;

    const sp = (data.success_percent === null || data.success_percent === undefined || data.success_percent === '')
      ? '—'
      : (parseFloat(data.success_percent).toFixed(2) + '%');
    dSuccess.textContent = sp;

    const durMin = parseFloat(data.duration_minutes || 0);
    dDuration.textContent = (durMin && durMin > 0) ? (Math.round(durMin) + ' دقيقة') : '—';

    const pf = safeText(data.period_from);
    const pt = safeText(data.period_to);
    dPeriod.textContent = `${pf} → ${pt}`;

    const names = Array.isArray(data.member_names) ? data.member_names : [];
    dMembersCount.textContent = names.length ? (`عدد الأعضاء: ${names.length}`) : '—';
    dMembers.textContent = names.length ? names.join('، ') : '—';

    const hasFollow = parseInt(data.has_followup || 0, 10) === 1;
    const hasPlan   = parseInt(data.has_plan || 0, 10) === 1;

    dFollowupBox.classList.toggle('hidden', !(hasFollow && (data.followup_text || '').trim().length));
    dFollowup.textContent = safeText(data.followup_text);

    dPlanBox.classList.toggle('hidden', !(hasPlan && (data.plan_text || '').trim().length));
    dPlan.textContent = safeText(data.plan_text);

    renderAttachments(data.attachments || []);

    dCreatedAt.textContent = safeText(data.created_at);
    dIP.textContent = safeText(data.created_ip);
  };

  // Event delegation: أي عنصر فيه data-iman-report-open
  document.addEventListener('click', (e) => {
    const t = e.target.closest('[data-iman-report-open]');
    if (!t) return;

    e.preventDefault();
    const id = t.getAttribute('data-iman-report-open');
    const node = document.getElementById('imanReports_json_' + id);
    if (!node) return;

    try {
      const data = JSON.parse(node.textContent || node.innerText || '{}');
      fillDrawer(data);
      openDrawer();
    } catch (_) {
      // صامت
    }
  });

  // =============================
  // Create Modal (بدون تعارض)
  // =============================
  const createModal = $('#imanReports_createModal');
  const openCreate = $('#imanReports_openCreate');
  const closeCreate = $('#imanReports_closeCreate');
  const createBackdrop = $('#imanReports_createBackdrop');

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

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

  // Followup/Plan toggles
  const hasFollowup = $('#imanReports_hasFollowup');
  const followupBox = $('#imanReports_followupBox');
  hasFollowup?.addEventListener('change', () => followupBox.classList.toggle('hidden', !hasFollowup.checked));

  const hasPlan = $('#imanReports_hasPlan');
  const planBox = $('#imanReports_planBox');
  hasPlan?.addEventListener('change', () => planBox.classList.toggle('hidden', !hasPlan.checked));

  // Drag & Drop (create modal)
  const dropZone = $('#imanReports_dropZone');
  const filesInput = $('#imanReports_filesInput');
  const filesPreview = $('#imanReports_filesPreview');

  const renderFiles = (files) => {
    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;

    // Safari iOS قد يمنع set files، بس نحاول
    try { filesInput.files = dt.files; } catch (_) {}

    renderFiles(dt.files);
  });

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

})();
</script>
@endsection