@php
  // ready: $from,$to,$stats,$positives,$negatives,$recommend
@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-fuchsia-400/30 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 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-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-compass-drafting text-xs"></i>
            <span>نظام البوصلة القيادية • SuperAdmin</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            البوصلة <span class="text-fuchsia-300">القيادية</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            إيجابيات وسلبيات من التقارير + قرارات فورية. الفترة: {{ $from }} → {{ $to }}
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <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">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              تقارير: {{ number_format($stats['reports_count'] ?? 0) }}
            </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">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              إيجابيات: {{ number_format($stats['positives_count'] ?? 0) }}
            </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">
              <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
              سلبيات: {{ number_format($stats['negatives_count'] ?? 0) }}
            </span>
          </div>
        </div>

        {{-- FILTER --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-fuchsia-500/20 text-fuchsia-200 grid place-items-center">
                <i class="fa-solid fa-filter"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">فلترة الفترة</div>
                <div class="font-bold text-sm truncate">تحليل البوصلة</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-2">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              </div>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 shadow-lg shadow-fuchsia-500/25 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                تحديث المؤشرات
              </button>
            </form>
          </div>
        </div>

      </div>
    </div>

    {{-- ✅ أول شي: الإيجابيات والسلبيات --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div class="rounded-3xl border border-emerald-400/20 bg-emerald-500/8 p-4">
        <div class="text-white font-extrabold mb-3">
          <i class="fa-solid fa-thumbs-up ms-2 text-emerald-200"></i> الإيجابيات (مستخرجة من التقارير)
        </div>

        <div class="space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($positives as $t)
            <div class="p-3 rounded-2xl border border-white/10 bg-black/20 text-[12px] text-white/85 leading-relaxed">
              {{ $t }}
            </div>
          @empty
            <div class="text-xs text-white/70">لا يوجد إيجابيات موثّقة ضمن الفترة.</div>
          @endforelse
        </div>
      </div>

      <div class="rounded-3xl border border-rose-400/20 bg-rose-500/8 p-4">
        <div class="text-white font-extrabold mb-3">
          <i class="fa-solid fa-thumbs-down ms-2 text-rose-200"></i> السلبيات (مشاكل/عدم ترحيب/دعم)
        </div>

        <div class="space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($negatives as $t)
            <div class="p-3 rounded-2xl border border-white/10 bg-black/20 text-[12px] text-white/85 leading-relaxed">
              {{ $t }}
            </div>
          @empty
            <div class="text-xs text-white/70">لا يوجد سلبيات موثّقة ضمن الفترة ✅</div>
          @endforelse
        </div>
      </div>
    </div>

    {{-- ✅ قسم ثاني من ذوقي: خريطة القرار السريع --}}
    <div class="rounded-3xl border border-white/12 bg-white/5 p-4 sm:p-5">
      <div class="flex items-center justify-between">
        <div class="text-white font-extrabold text-lg">
          <i class="fa-solid fa-bolt ms-2 text-amber-200"></i>
          خريطة القرار السريع
        </div>
        <span class="text-[11px] px-2 py-1 rounded-full border border-amber-400/20 bg-amber-500/10 text-amber-100">جاهز للتنفيذ</span>
      </div>

      <div class="mt-4 grid grid-cols-1 lg:grid-cols-3 gap-3">
        @foreach($recommend as $i => $rec)
          <div class="p-4 rounded-3xl border border-white/10 bg-black/25">
            <div class="text-[12px] text-white/60">قرار #{{ $i+1 }}</div>
            <div class="mt-2 text-white font-black leading-relaxed">{{ $rec }}</div>
          </div>
        @endforeach
      </div>

      <div class="mt-4 text-xs text-white/60 leading-relaxed">
        ملاحظة: أي قرار “قيادي” لازم يربط بين (الترحيب) + (التوثيق) + (النقاط)، عشان ما تنخدع بنقاط بدون سلوك.
      </div>
    </div>

  </div>
</div>