@php
  // ready: $from,$to,$watchStats,$highPointsNoWelcome,$highWelcomeLowPoints,$involvedZeroPoints,$notInvolved
@endphp

<div class="ramadan-shell r-appear">
  <div class="ramadan-bg"></div>

  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 space-y-5">

    {{-- HERO --}}
    <div class="{{ $card }} p-4 sm:p-6 r-shine relative overflow-hidden">
      <div class="absolute -top-24 -right-24 w-96 h-96 rounded-full blur-3xl"
           style="background:radial-gradient(circle, rgba(var(--r-fuchsia), .18) 0%, transparent 70%);"></div>
      <div class="absolute -bottom-28 -left-28 w-[520px] h-[520px] rounded-full blur-3xl"
           style="background:radial-gradient(circle, rgba(var(--r-indigo), .16) 0%, transparent 70%);"></div>

      <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="min-w-0">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
            <span class="w-2 h-2 rounded-full" style="background:rgba(var(--r-indigo),.9)"></span>
            <span class="font-black">نظام الرادار السيادي للأعضاء</span>
            <span class="text-white/40">•</span>
            <span>الأعضاء تحت الضوء • قرارات فورية</span>
          </div>

          <div class="mt-3 flex items-center gap-3">
            <div class="w-12 h-12 rounded-2xl border border-white/10 bg-white/5 flex items-center justify-center r-float">
              <i class="fa-solid fa-radar text-white/90 text-xl"></i>
            </div>
            <div class="min-w-0">
              <div class="text-white text-2xl sm:text-3xl font-extrabold leading-tight">
                الرادار السيادي ✨
              </div>
              <div class="r-sub">الفترة: {{ $from }} → {{ $to }} (توقيت الأردن)</div>
            </div>
          </div>

          <div class="mt-4 flex flex-wrap gap-2">
            <span class="px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-white/80 font-black text-xs">
              أعضاء التيم: {{ number_format($watchStats['team_total'] ?? 0) }}
            </span>
            <span class="px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-white/80 font-black text-xs">
              تقارير الفترة: {{ number_format($watchStats['reports_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-indigo-500/20 text-indigo-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-indigo-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-fuchsia-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-indigo-200 via-fuchsia-200 to-cyan-200 shadow-lg 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>

    {{-- BUCKETS --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

      {{-- 1 --}}
      <div class="{{ $card }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold">
            <i class="fa-solid fa-triangle-exclamation ms-2 text-rose-200"></i>
            نقاط عالية + ترحيب (0)
          </div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-rose-400/20 bg-rose-500/10 text-rose-100 font-black">
            {{ number_format($watchStats['bucket1'] ?? 0) }}
          </span>
        </div>
        <div class="mt-1 text-xs text-white/60">خطر سلوكي: يحتاج توجيه فوري.</div>

        <div class="mt-3 space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($highPointsNoWelcome as $m)
            <button type="button"
              class="w-full text-right p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition"
              data-member='@json($m, JSON_UNESCAPED_UNICODE)'
              onclick="MR_open(this)">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-white font-black truncate">{{ $m['name'] }}</div>
                  <div class="text-[11px] text-white/60">ترحيب: 0 • متفاعل: {{ $m['involved'] ? 'نعم' : 'لا' }}</div>
                </div>
                <span class="shrink-0 text-[11px] px-2 py-1 rounded-full border border-rose-400/25 bg-rose-500/12 text-rose-200 font-black">
                  {{ $m['points_total'] }}
                </span>
              </div>
            </button>
          @empty
            <div class="text-xs text-white/70">لا يوجد ✅</div>
          @endforelse
        </div>
      </div>

      {{-- 2 --}}
      <div class="{{ $card }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold">
            <i class="fa-solid fa-handshake ms-2 text-emerald-200"></i>
            ترحيب عالي + نقاط قليلة
          </div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-emerald-400/20 bg-emerald-500/10 text-emerald-100 font-black">
            {{ number_format($watchStats['bucket2'] ?? 0) }}
          </span>
        </div>
        <div class="mt-1 text-xs text-white/60">عضو داعم ممتاز: يحتاج تحفيز بالنقاط/تكريم.</div>

        <div class="mt-3 space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($highWelcomeLowPoints as $m)
            <button type="button"
              class="w-full text-right p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition"
              data-member='@json($m, JSON_UNESCAPED_UNICODE)'
              onclick="MR_open(this)">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-white font-black truncate">{{ $m['name'] }}</div>
                  <div class="text-[11px] text-white/60">ترحيب: {{ $m['welcomes'] }} • نقاط: {{ $m['points_total'] }}</div>
                </div>
                <span class="shrink-0 text-[11px] px-2 py-1 rounded-full border border-emerald-400/25 bg-emerald-500/12 text-emerald-200 font-black">
                  {{ $m['welcomes'] }}
                </span>
              </div>
            </button>
          @empty
            <div class="text-xs text-white/70">لا يوجد ✅</div>
          @endforelse
        </div>
      </div>

      {{-- 3 --}}
      <div class="{{ $card }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold">
            <i class="fa-solid fa-circle-dot ms-2 text-cyan-200"></i>
            متفاعل + نقاط (0)
          </div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-cyan-400/20 bg-cyan-500/10 text-cyan-100 font-black">
            {{ number_format($watchStats['bucket3'] ?? 0) }}
          </span>
        </div>
        <div class="mt-1 text-xs text-white/60">موجود لكنه بدون رصيد 9/10: يحتاج توجيه للمهام/المنافسات.</div>

        <div class="mt-3 space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($involvedZeroPoints as $m)
            <button type="button"
              class="w-full text-right p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition"
              data-member='@json($m, JSON_UNESCAPED_UNICODE)'
              onclick="MR_open(this)">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-white font-black truncate">{{ $m['name'] }}</div>
                  <div class="text-[11px] text-white/60">متفاعل: نعم • نقاط: 0</div>
                </div>
                <span class="shrink-0 text-[11px] px-2 py-1 rounded-full border border-cyan-400/25 bg-cyan-500/12 text-cyan-200 font-black">
                  0
                </span>
              </div>
            </button>
          @empty
            <div class="text-xs text-white/70">لا يوجد ✅</div>
          @endforelse
        </div>
      </div>

      {{-- 4 --}}
      <div class="{{ $card }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold">
            <i class="fa-solid fa-user-slash 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 font-black">
            {{ number_format($watchStats['bucket4'] ?? 0) }}
          </span>
        </div>
        <div class="mt-1 text-xs text-white/60">غياب كامل عن التقارير/المشاركة ضمن الفترة.</div>

        <div class="mt-3 space-y-2 max-h-[420px] overflow-auto r-scroll pr-1">
          @forelse($notInvolved as $m)
            <button type="button"
              class="w-full text-right p-3 rounded-2xl border border-white/10 bg-black/20 hover:bg-white/5 transition"
              data-member='@json($m, JSON_UNESCAPED_UNICODE)'
              onclick="MR_open(this)">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-white font-black truncate">{{ $m['name'] }}</div>
                  <div class="text-[11px] text-white/60">متفاعل: لا • نقاط: {{ $m['points_total'] }}</div>
                </div>
                <span class="shrink-0 text-[11px] px-2 py-1 rounded-full border border-amber-400/25 bg-amber-500/12 text-amber-200 font-black">
                  —
                </span>
              </div>
            </button>
          @empty
            <div class="text-xs text-white/70">لا يوجد ✅</div>
          @endforelse
        </div>
      </div>

    </div>

  </div>
</div>

{{-- MODAL (Centered + Mobile) --}}
<div id="MR_modal" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="MR_close()"></div>
  <div class="absolute inset-0 flex items-center justify-center p-3">
    <div class="w-full max-w-md rounded-3xl border border-white/12 bg-gradient-to-b from-slate-950 via-slate-950 to-black shadow-2xl">
      <div class="p-4 border-b border-white/10 flex items-center justify-between">
        <div class="text-white font-extrabold"><i class="fa-solid fa-user-astronaut ms-2 text-indigo-200"></i> بطاقة العضو</div>
        <button class="r-btn r-btn-soft" onclick="MR_close()"><i class="fa-solid fa-xmark"></i></button>
      </div>

      <div class="p-4 space-y-3 text-sm">
        <div class="p-3 rounded-2xl border border-white/10 bg-white/5">
          <div class="text-white font-black" id="MR_name">—</div>
          <div class="text-[12px] text-white/60" id="MR_meta">—</div>
        </div>

        <div class="grid grid-cols-3 gap-2 text-[12px]">
          <div class="p-3 rounded-2xl border border-white/10 bg-black/30 text-white/80">
            #9 <div class="text-white font-black text-base" id="MR_p9">0</div>
          </div>
          <div class="p-3 rounded-2xl border border-white/10 bg-black/30 text-white/80">
            #10 <div class="text-white font-black text-base" id="MR_p10">0</div>
          </div>
          <div class="p-3 rounded-2xl border border-white/10 bg-black/30 text-white/80">
            المجموع <div class="text-white font-black text-base" id="MR_pt">0</div>
          </div>
        </div>

        <div class="p-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70">
          ترحيب: <span class="text-emerald-200 font-black" id="MR_wel">0</span>
          • متفاعل: <span class="text-cyan-200 font-black" id="MR_inv">—</span>
        </div>

        <div class="p-3 rounded-2xl border border-fuchsia-400/15 bg-fuchsia-500/8 text-[12px] text-fuchsia-100/90" id="MR_tip">
          —
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function MR_open(btn){
    try{
      const m = JSON.parse(btn.getAttribute('data-member') || '{}');
      document.getElementById('MR_name').textContent = m.name || '—';
      document.getElementById('MR_meta').textContent = `الحالة: ${m.membership_status || '—'} • ID: ${m.id || '—'}`;
      document.getElementById('MR_p9').textContent  = String(m.points9 || 0);
      document.getElementById('MR_p10').textContent = String(m.points10 || 0);
      document.getElementById('MR_pt').textContent  = String(m.points_total || 0);
      document.getElementById('MR_wel').textContent = String(m.welcomes || 0);
      document.getElementById('MR_inv').textContent = (m.involved ? 'نعم' : 'لا');

      // tip
      let tip = "توصية: متابعة عامة.";
      if ((m.points_total||0) >= 30 && (m.welcomes||0) <= 0) tip = "توصية: نقاط عالية بدون ترحيب — توجيه سلوكي مباشر + مناوبة ترحيب.";
      else if ((m.welcomes||0) >= 2 && (m.points_total||0) <= 10) tip = "توصية: عضو داعم ممتاز — تحفيز/تكريم + رفع نقاطه بمهمة واضحة.";
      else if ((m.involved||0) === 1 && (m.points_total||0) === 0) tip = "توصية: متفاعل بدون رصيد — توجيه نحو مسابقات 9/10 أو مهمة رمضانية.";
      else if ((m.involved||0) === 0) tip = "توصية: غير متفاعل — تنبيه/متابعة التزام.";
      document.getElementById('MR_tip').textContent = tip;

      document.getElementById('MR_modal').classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }catch(e){}
  }
  function MR_close(){
    document.getElementById('MR_modal').classList.add('hidden');
    document.body.style.overflow = '';
  }
</script>