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

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

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

  $fmtDate = function ($dt) {
    if (!$dt) return '—';
    try { return \Carbon\Carbon::parse($dt)->format('Y-m-d H:i'); } catch (\Throwable $e) { return (string)$dt; }
  };
@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-indigo-400/20 shadow-2xl shadow-indigo-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-indigo-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-indigo-300/25 text-[11px] text-indigo-100">
            <i class="fa-solid fa-book text-xs"></i>
            <span>يوميات + أفكار + تذكير + AI مساعد</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','iman_diary') }}?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','iman_diary') }}?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 data-id-open-create
               class="px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
               bg-gradient-to-r from-indigo-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-indigo-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 + AI CENTER --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="lg:col-span-1 grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
        <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">مع Tags</div>
          <div class="text-2xl font-extrabold text-fuchsia-200 mt-1">{{ $stats['with_tags'] ?? 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_spell_issues'] ?? 0 }}</div>
        </div>
      </div>

      <div class="lg:col-span-2 relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl p-5">
        <div class="pointer-events-none absolute -top-20 -right-10 w-72 h-72 rounded-full bg-cyan-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3 mb-3">
          <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
            <i class="fa-solid fa-brain"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">AI Guidance Center</div>
            <div class="text-base font-extrabold text-white">{{ $ai['headline'] ?? 'مركز الإرشادات' }}</div>
          </div>
        </div>

        <div class="space-y-2">
          @foreach(($ai['tips'] ?? []) as $tip)
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/90 leading-relaxed">
              <span class="text-cyan-200 font-bold">•</span> {{ $tip }}
            </div>
          @endforeach
          <div class="rounded-2xl border border-indigo-400/20 bg-indigo-500/10 px-4 py-3 text-[12px] text-indigo-100/90">
            <b>فحص الإملاء:</b> {{ $ai['spelling_note'] ?? '' }}
          </div>
        </div>
      </div>
    </div>

    {{-- LIST --}}
    @if($viewMode === '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">جدول اليوميات</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">Tags</th>
                <th class="py-2 text-right">إملاء</th>
              </tr>
            </thead>
            <tbody class="text-[12px] text-white/80">
              @forelse($entries as $e)
                @php
                  $e = is_array($e) ? (object)$e : $e;
                  $tags = $decode($e->tags ?? null);
                  $spell = $decode($e->spell_report ?? null);
                  $hasSpell = is_array($spell) && !empty($spell);
                @endphp
                <tr class="border-b border-white/5 hover:bg-white/5 transition cursor-pointer"
                    data-id-open-details
                    data-id-tpl="id_tpl_{{ $e->id }}">
                  <td class="py-2 font-bold">{{ $e->entry_title }}</td>
                  <td class="py-2 text-white/60">{{ $fmtDate($e->entry_at ?? $e->created_at ?? null) }}</td>
                  <td class="py-2 text-white/70">{{ $e->mood ?? '—' }}</td>
                  <td class="py-2 text-white/70">{{ is_array($tags) ? count($tags) : 0 }}</td>
                  <td class="py-2">
                    @if($hasSpell)
                      <span class="inline-flex px-3 py-1 rounded-full border border-amber-400/25 bg-amber-500/10 text-amber-100 text-[11px] font-extrabold">
                        تنبيهات
                      </span>
                    @else
                      <span class="inline-flex px-3 py-1 rounded-full border border-emerald-400/25 bg-emerald-500/10 text-emerald-100 text-[11px] font-extrabold">
                        ممتاز
                      </span>
                    @endif
                  </td>
                </tr>

                <template id="id_tpl_{{ $e->id }}">
                  @php
                    $preview = $e->entry_text ? Str::limit($e->entry_text, 400) : 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">{{ $e->entry_title }}</div>
                        <div class="text-[12px] text-white/60 mt-1">{{ $fmtDate($e->entry_at ?? $e->created_at ?? null) }}</div>
                      </div>
                      <div class="text-right shrink-0 space-y-2">
                        <div class="inline-flex px-3 py-1 rounded-full border border-indigo-400/25 bg-indigo-500/10 text-indigo-100 text-[11px] font-extrabold">
                          مزاج: {{ $e->mood ?? '—' }}
                        </div>
                        <div class="inline-flex px-3 py-1 rounded-full border border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100 text-[11px] font-extrabold">
                          Tags: {{ is_array($tags) ? count($tags) : 0 }}
                        </div>
                      </div>
                    </div>

                    <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="text-[13px] text-white/85 whitespace-pre-line">{{ $e->entry_text ?? '—' }}</div>
                    </div>

                    <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                      <div class="text-[11px] text-white/60 mb-2">Tags</div>
                      @if(is_array($tags) && count($tags))
                        <div class="flex flex-wrap gap-2">
                          @foreach($tags as $t)
                            <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[12px] text-white/80">{{ $t }}</span>
                          @endforeach
                        </div>
                      @else
                        <div class="text-[12px] text-white/50">لا يوجد Tags.</div>
                      @endif
                    </div>

                    <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3">
                      <div class="text-[11px] text-amber-100/90 font-extrabold mb-1">فحص الإملاء</div>
                      @if($hasSpell && isset($spell['issues']) && is_array($spell['issues']))
                        <div class="space-y-2">
                          @foreach($spell['issues'] as $it)
                            <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-[12px] text-white/85">
                              • {{ $it['msg'] ?? 'تنبيه' }}
                            </div>
                          @endforeach
                          @if(isset($spell['score']))
                            <div class="text-[12px] text-white/70">Score: <b class="text-white">{{ $spell['score'] }}</b>/100</div>
                          @endif
                        </div>
                      @else
                        <div class="text-[12px] text-white/85">لا توجد تنبيهات.</div>
                      @endif
                    </div>

                    <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="rounded-2xl border border-dashed border-white/20 bg-white/5 px-4 py-4 text-[12px] text-white/60">
                        Drag & Drop معطّل حالياً — سيتم تفعيله قريباً.
                      </div>
                    </div>
                  </div>
                </template>
              @empty
                <tr><td colspan="5" class="py-3 text-white/50">لا يوجد يوميات بعد.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    @else
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($entries as $e)
          @php
            $e = is_array($e) ? (object)$e : $e;
            $tags = $decode($e->tags ?? null);
            $spell = $decode($e->spell_report ?? null);
            $hasSpell = is_array($spell) && !empty($spell);
          @endphp
          <button type="button"
            class="text-left 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-white/15 transition"
            data-id-open-details
            data-id-tpl="id_tpl_{{ $e->id }}">
            <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-indigo-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">{{ $e->entry_title }}</div>
                <div class="text-[11px] text-white/55 mt-1">{{ $fmtDate($e->entry_at ?? $e->created_at ?? null) }}</div>
              </div>
              <div class="text-right shrink-0 space-y-2">
                <div class="inline-flex px-3 py-1 rounded-full border border-indigo-400/25 bg-indigo-500/10 text-indigo-100 text-[11px] font-extrabold">
                  {{ $e->mood ?? '—' }}
                </div>
                <div class="inline-flex px-3 py-1 rounded-full border {{ $hasSpell ? 'border-amber-400/25 bg-amber-500/10 text-amber-100' : 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100' }} text-[11px] font-extrabold">
                  {{ $hasSpell ? 'تنبيهات إملاء' : 'ممتاز' }}
                </div>
              </div>
            </div>

            <div class="mt-4 text-[12px] text-white/60 line-clamp-3">
              {{ $e->entry_text ? Str::limit($e->entry_text, 160) : '— لا يوجد نص —' }}
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
              @if(is_array($tags) && count($tags))
                @foreach(array_slice($tags,0,4) as $t)
                  <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/75">{{ $t }}</span>
                @endforeach
                @if(count($tags) > 4)
                  <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/50">+{{ count($tags)-4 }}</span>
                @endif
              @else
                <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/50">بدون Tags</span>
              @endif
            </div>
          </button>

          {{-- نفس template المستخدم بالجدول --}}
          <template id="id_tpl_{{ $e->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">{{ $e->entry_title }}</div>
                  <div class="text-[12px] text-white/60 mt-1">{{ $fmtDate($e->entry_at ?? $e->created_at ?? null) }}</div>
                </div>
                <div class="text-right shrink-0 space-y-2">
                  <div class="inline-flex px-3 py-1 rounded-full border border-indigo-400/25 bg-indigo-500/10 text-indigo-100 text-[11px] font-extrabold">
                    مزاج: {{ $e->mood ?? '—' }}
                  </div>
                  <div class="inline-flex px-3 py-1 rounded-full border border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100 text-[11px] font-extrabold">
                    Tags: {{ is_array($tags) ? count($tags) : 0 }}
                  </div>
                </div>
              </div>

              <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="text-[13px] text-white/85 whitespace-pre-line">{{ $e->entry_text ?? '—' }}</div>
              </div>

              <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3">
                <div class="text-[11px] text-amber-100/90 font-extrabold mb-1">فحص الإملاء</div>
                @if($hasSpell && isset($spell['issues']) && is_array($spell['issues']))
                  <div class="space-y-2">
                    @foreach($spell['issues'] as $it)
                      <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-[12px] text-white/85">
                        • {{ $it['msg'] ?? 'تنبيه' }}
                      </div>
                    @endforeach
                    @if(isset($spell['score']))
                      <div class="text-[12px] text-white/70">Score: <b class="text-white">{{ $spell['score'] }}</b>/100</div>
                    @endif
                  </div>
                @else
                  <div class="text-[12px] text-white/85">لا توجد تنبيهات.</div>
                @endif
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
                <div class="text-[11px] text-white/60 mb-2">Tags</div>
                @if(is_array($tags) && count($tags))
                  <div class="flex flex-wrap gap-2">
                    @foreach($tags as $t)
                      <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[12px] text-white/80">{{ $t }}</span>
                    @endforeach
                  </div>
                @else
                  <div class="text-[12px] text-white/50">لا يوجد Tags.</div>
                @endif
              </div>

              <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="rounded-2xl border border-dashed border-white/20 bg-white/5 px-4 py-4 text-[12px] text-white/60">
                  Drag & Drop معطّل حالياً — سيتم تفعيله قريباً.
                </div>
              </div>
            </div>
          </template>

        @empty
          <div class="rounded-3xl border border-white/10 bg-black/25 p-6 text-white/60">
            لا يوجد يوميات بعد.
          </div>
        @endforelse
      </div>
    @endif

    {{-- LOGS --}}
    <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">Entry 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)
              @php $l = is_array($l) ? (object)$l : $l; @endphp
              <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->entry_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>

  {{-- CREATE MODAL --}}
  <div id="id_create_modal" class="hidden fixed inset-0 z-[9999]">
    <div class="absolute inset-0 bg-black/70" data-id-close-create></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-indigo-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">مودل سكرول — آمن للجافاسكربت</div>
            </div>

            <button type="button" data-id-close-create
              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.diary.store') }}">
            @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="entry_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-indigo-500/30"
                  placeholder="مثال: اليوم صار معي..." />
              </div>

              <div>
                <label class="text-[11px] text-white/70">وقت اليوميّة (اختياري)</label>
                <input type="datetime-local" name="entry_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="mood"
                  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="">—</option>
                  <option value="happy">سعيدة</option>
                  <option value="calm">هادية</option>
                  <option value="tired">تعبانة</option>
                  <option value="stressed">متوترة</option>
                  <option value="excited">متحمسة</option>
                </select>
              </div>

              <div class="sm:col-span-2">
                <label class="text-[11px] text-white/70">Tags (اختياري) — افصليهم بفاصلة</label>
                <input name="tags"
                  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"
                  placeholder="مثال: تيم, لايف, قرار, تذكير" />
              </div>

              <div class="sm:col-span-2">
                <label class="text-[11px] text-white/70">النص (اختياري)</label>
                <textarea name="entry_text" rows="7"
                  class="w-full mt-1 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-indigo-500/25"
                  placeholder="اكتبي الحدث → الشعور → السبب → الدرس/القرار..."></textarea>
                <div class="text-[10px] text-white/50 mt-1">سيتم حفظ اليوميّة مع فحص إملاء بسيط تلقائياً.</div>
              </div>
            </div>

            {{-- Drag Disabled --}}
            <div class="rounded-3xl border border-white/10 bg-black/25 p-4">
              <div class="text-sm font-extrabold text-white mb-2">رفع صورة (قريباً)</div>
              <div class="rounded-3xl border border-dashed border-white/20 bg-gradient-to-br from-slate-900/40 via-black/30 to-black/40 p-5">
                <div class="flex items-center gap-3">
                  <div class="w-11 h-11 rounded-3xl bg-white/10 border border-white/10 grid place-items-center text-white/70">
                    <i class="fa-solid fa-image"></i>
                  </div>
                  <div class="min-w-0">
                    <div class="text-[13px] font-extrabold text-white">Drag & Drop معطّل حالياً</div>
                    <div class="text-[11px] text-white/60">سيتم تفعيله قريباً (صور + مستندات)</div>
                  </div>
                </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-indigo-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-indigo-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>

  {{-- DETAILS DRAWER --}}
  <div id="id_drawer" class="hidden fixed inset-0 z-[9998]">
    <div class="absolute inset-0 bg-black/70" data-id-close-drawer></div>

    <div class="absolute left-0 top-0 h-full 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="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between gap-2">
        <div class="min-w-0">
          <div class="text-[11px] text-white/60">تفاصيل اليوميّة</div>
          <div class="text-white font-extrabold truncate" id="id_drawer_title">—</div>
        </div>
        <button type="button" data-id-close-drawer
          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 class="p-4 sm:p-5 max-h-[calc(100vh-72px)] overflow-y-auto" id="id_drawer_body">
        <div class="text-white/60 text-sm">—</div>
      </div>
    </div>
  </div>

</div>

<script>
(() => {
  // ===== Create Modal
  const createModal = document.getElementById('id_create_modal');
  const openCreateBtns = document.querySelectorAll('[data-id-open-create]');
  const closeCreateEls = document.querySelectorAll('[data-id-close-create]');

  const openCreate = () => createModal?.classList.remove('hidden');
  const closeCreate = () => createModal?.classList.add('hidden');

  openCreateBtns.forEach(b => b.addEventListener('click', openCreate));
  closeCreateEls.forEach(b => b.addEventListener('click', closeCreate));

  // ===== Drawer
  const drawer = document.getElementById('id_drawer');
  const drawerTitle = document.getElementById('id_drawer_title');
  const drawerBody  = document.getElementById('id_drawer_body');
  const closeDrawerEls = document.querySelectorAll('[data-id-close-drawer]');

  const openDrawer = (tplId, fallbackTitle) => {
    const tpl = document.getElementById(tplId);
    if (!tpl) return;

    drawerTitle.textContent = fallbackTitle || 'تفاصيل';
    drawerBody.innerHTML = '';
    drawerBody.appendChild(tpl.content.cloneNode(true));

    drawer.classList.remove('hidden');
  };

  const closeDrawer = () => drawer?.classList.add('hidden');
  closeDrawerEls.forEach(b => b.addEventListener('click', closeDrawer));

  // click handlers
  document.querySelectorAll('[data-id-open-details]').forEach(row => {
    row.addEventListener('click', (e) => {
      const tplId = row.getAttribute('data-id-tpl');
      // title: حاول نجيب أول عنصر bold من الصف/الكرت
      let title = '';
      const b = row.querySelector('td.font-bold, .font-extrabold');
      if (b) title = (b.textContent || '').trim();
      openDrawer(tplId, title || 'تفاصيل اليوميّة');
    });
  });

  // escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeCreate();
      closeDrawer();
    }
  });

  // URL helpers
  const url = new URL(window.location.href);
  if (url.searchParams.get('create') === '1') openCreate();
})();
</script>
@endsection