@php
  // ready: $from,$to,$stats,$rows,$topWelcomers,$nonWelcomers,$nextStepsText
@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 ?? 'r-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 r-glow"
           style="background:radial-gradient(circle, rgba(var(--r-cyan), .22) 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-blue), .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-cyan),.95)"></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-scale-balanced 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>

        {{-- 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-cyan-500/20 text-cyan-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-cyan-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-blue-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-cyan-200 via-cyan-100 to-blue-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>

    {{-- ✅ قسم الإيجابيات والسلبيات (مصغر داخل الميزان) --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold"><i class="fa-solid fa-users ms-2 text-cyan-200"></i> أعضاء التيم الفعّالين</div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-white/10 bg-white/5 text-white/80">
            {{ number_format($stats['team_total'] ?? 0) }}
          </span>
        </div>
        <div class="mt-2 text-xs text-white/70">المتفاعلين خلال الفترة: {{ number_format($stats['team_involved'] ?? 0) }}</div>
      </div>

      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold"><i class="fa-solid fa-hands-clapping 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($stats['welcome_reports'] ?? 0) }}
          </span>
        </div>
        <div class="mt-2 text-xs text-white/70">تقارير بدون ترحيب: {{ number_format($stats['no_welcome_reports'] ?? 0) }}</div>
      </div>

      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold"><i class="fa-solid fa-shield-check ms-2 text-fuchsia-200"></i> تأثير التوثيق</div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-fuchsia-400/20 bg-fuchsia-500/10 text-fuchsia-100 font-black">
            {{ number_format($stats['verified_count'] ?? 0) }} موثّق قوي
          </span>
        </div>
        <div class="mt-2 text-xs text-white/70">
          متوسط الذكاء: <span class="font-black text-white">{{ $stats['avg_intelligence'] ?? 0 }}</span>
          • إثبات: {{ number_format($stats['proof_count'] ?? 0) }}
        </div>
      </div>
    </div>

    {{-- ✅ القسم الأول: الترحيب (مين رحّب / مين ما برحب) --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="flex items-center justify-between">
          <div class="text-white font-extrabold"><i class="fa-solid fa-star 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">Top</span>
        </div>

        <div class="mt-3 space-y-2">
          @forelse($topWelcomers as $uid)
            @php
              $m = collect($rows)->firstWhere('id', (int)$uid);
            @endphp
            <div class="flex items-center justify-between gap-3 p-2 rounded-2xl border border-white/10 bg-white/5">
              <div class="min-w-0">
                <div class="text-white font-black truncate">{{ $m['name'] ?? ('User#'.$uid) }}</div>
                <div class="text-[11px] text-white/60">ترحيبات: {{ (int)($m['welcomes'] ?? 0) }}</div>
              </div>
              <span class="text-[11px] px-2 py-1 rounded-full bg-amber-500/12 border border-amber-400/25 text-amber-200 font-black">
                {{ (int)($m['welcomes'] ?? 0) }}
              </span>
            </div>
          @empty
            <div class="text-xs text-white/70">لا يوجد بيانات ترحيب كافية ضمن الفترة.</div>
          @endforelse
        </div>
      </div>

      <div class="{{ $card ?? 'r-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> المتفاعلين بدون ترحيب</div>
          <span class="text-[11px] px-2 py-1 rounded-full border border-rose-400/20 bg-rose-500/10 text-rose-100">
            {{ number_format(count($nonWelcomers ?? [])) }}
          </span>
        </div>

        <div class="mt-3 space-y-2 max-h-[360px] overflow-auto r-scroll pr-1">
          @forelse($nonWelcomers as $uid)
            @php
              $m = collect($rows)->firstWhere('id', (int)$uid);
            @endphp
            <div class="flex items-center justify-between gap-3 p-2 rounded-2xl border border-white/10 bg-black/20">
              <div class="min-w-0">
                <div class="text-white font-black truncate">{{ $m['name'] ?? ('User#'.$uid) }}</div>
                <div class="text-[11px] text-white/60">متفاعل: نعم • ترحيب: 0</div>
              </div>
              <span class="text-[11px] px-2 py-1 rounded-full bg-rose-500/12 border border-rose-400/25 text-rose-200 font-black">
                0
              </span>
            </div>
          @empty
            <div class="text-xs text-white/70">لا يوجد أعضاء متفاعلين بدون ترحيب ضمن الفترة ✅</div>
          @endforelse
        </div>
      </div>
    </div>

    {{-- ✅ القسم: نقاط 9/10 + مودل بالنص (موبايل) --}}
    <div class="{{ $card ?? 'r-card' }} p-4 sm:p-5">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <div class="text-white font-extrabold text-lg">
            <i class="fa-solid fa-ranking-star ms-2 text-cyan-200"></i>
            نقاط الأعضاء — مسابقة 9 / 10
          </div>
          <div class="text-xs text-white/60">اضغط على أي عضو لفتح مودل تفاصيل بالنص (ملائم للهواتف).</div>
        </div>

        <button type="button" class="r-btn r-btn-soft" id="openNextSteps">
          <i class="fa-solid fa-list-check"></i> الخطوات القادمة
        </button>
      </div>

      <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        @foreach(array_slice($rows, 0, 24) as $m)
          <button type="button"
            class="text-right p-3 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition"
            data-member='@json($m, JSON_UNESCAPED_UNICODE)'
            onclick="RS_openMember(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">
                  ترحيب: <span class="text-emerald-200 font-black">{{ $m['welcomes'] }}</span>
                  • متفاعل: <span class="text-cyan-200 font-black">{{ $m['involved'] ? 'نعم' : 'لا' }}</span>
                </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">
                {{ $m['points_total'] }}
              </span>
            </div>

            <div class="mt-2 grid grid-cols-2 gap-2 text-[11px]">
              <div class="px-2 py-1 rounded-xl border border-white/10 bg-black/20 text-white/80">
                #9: <span class="font-black text-white">{{ $m['points9'] }}</span>
              </div>
              <div class="px-2 py-1 rounded-xl border border-white/10 bg-black/20 text-white/80">
                #10: <span class="font-black text-white">{{ $m['points10'] }}</span>
              </div>
            </div>
          </button>
        @endforeach
      </div>

      <div class="mt-4 text-xs text-white/55">
        عرضنا أعلى 24 عضو حسب مجموع نقاط (9+10). والباقي موجود بالبيانات (تقدر توسّعها لاحقًا بسهولة).
      </div>
    </div>

    {{-- ✅ قسم ثاني من ذوقي: رادار الالتزام --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="text-white font-extrabold">
          <i class="fa-solid fa-radar ms-2 text-fuchsia-200"></i>
          رادار الالتزام (ملخص قيادي)
        </div>
        <div class="mt-3 grid grid-cols-2 gap-3 text-[12px]">
          <div class="p-3 rounded-2xl border border-white/10 bg-black/20">
            <div class="text-white/70">تقارير الفترة</div>
            <div class="text-white text-xl font-black">{{ number_format($stats['reports_count'] ?? 0) }}</div>
          </div>
          <div class="p-3 rounded-2xl border border-white/10 bg-black/20">
            <div class="text-white/70">مؤشرات تأثير</div>
            <div class="text-white text-xl font-black">
              {{ number_format(($stats['impact']['progress'] ?? 0) + ($stats['impact']['issues'] ?? 0) + ($stats['impact']['needs_support'] ?? 0)) }}
            </div>
          </div>
        </div>

        <div class="mt-3 text-xs text-white/65 leading-relaxed">
          • تقدّم: <span class="text-emerald-200 font-black">{{ number_format($stats['impact']['progress'] ?? 0) }}</span>
          • مشاكل: <span class="text-rose-200 font-black">{{ number_format($stats['impact']['issues'] ?? 0) }}</span>
          • يحتاج دعم: <span class="text-amber-200 font-black">{{ number_format($stats['impact']['needs_support'] ?? 0) }}</span>
        </div>
      </div>

      <div class="{{ $card ?? 'r-card' }} p-4">
        <div class="text-white font-extrabold">
          <i class="fa-solid fa-brain ms-2 text-cyan-200"></i>
          تفسير ذكي سريع
        </div>
        <div class="mt-3 text-xs text-white/70 leading-relaxed space-y-2">
          <div class="p-3 rounded-2xl border border-white/10 bg-white/5">
            لو **التوثيق قوي** (إثبات + ذكاء ≥ 55) ⇒ تأثير التقارير يرتفع ويصير القرار الإداري أدق.
          </div>
          <div class="p-3 rounded-2xl border border-white/10 bg-white/5">
            لو **تقارير بدون ترحيب** كثيرة ⇒ لازم “مناوبة ترحيب” + توجيه مباشر للأعضاء المتفاعلين بدون ترحيب.
          </div>
          <div class="p-3 rounded-2xl border border-white/10 bg-white/5">
            النقاط (#9/#10) تُستخدم كمرآة التزام، بس القرار النهائي لازم يمر على “التوثيق + الترحيب”.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

{{-- =========================
   MODALS (centered + mobile)
========================= --}}
<div id="RS_memberModal" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="RS_closeMember()"></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-cyan-200"></i> تفاصيل العضو</div>
        <button class="r-btn r-btn-soft" onclick="RS_closeMember()"><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="RS_m_name">—</div>
          <div class="text-[12px] text-white/60" id="RS_m_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="RS_m_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="RS_m_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="RS_m_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="RS_m_wel">0</span>
          • متفاعل بالفترة: <span class="text-cyan-200 font-black" id="RS_m_inv">—</span>
        </div>

        <div class="p-3 rounded-2xl border border-fuchsia-400/15 bg-fuchsia-500/8 text-[12px] text-fuchsia-100/90">
          نصيحة قيادية: لو نقاط عالية + ترحيب منخفض ⇒ ركّز على “مناوبة الترحيب” لهذا العضو.
        </div>
      </div>
    </div>
  </div>
</div>

<div id="RS_stepsModal" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="RS_closeSteps()"></div>

  <div class="absolute inset-0 flex items-center justify-center p-3">
    <div class="w-full max-w-xl 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-list-check ms-2 text-amber-200"></i> الخطوات القادمة (من التقارير)</div>
        <button class="r-btn r-btn-soft" onclick="RS_closeSteps()"><i class="fa-solid fa-xmark"></i></button>
      </div>

      <div class="p-4">
        <pre class="whitespace-pre-wrap text-[12px] text-white/80 leading-relaxed p-3 rounded-2xl border border-white/10 bg-white/5">{{ $nextStepsText !== '' ? $nextStepsText : 'لا توجد خطوات قادمة مكتوبة ضمن الفترة.' }}</pre>
      </div>
    </div>
  </div>
</div>

<script>
  function RS_openMember(btn){
    try{
      const m = JSON.parse(btn.getAttribute('data-member') || '{}');
      document.getElementById('RS_m_name').textContent = m.name || '—';
      document.getElementById('RS_m_meta').textContent = `الحالة: ${m.membership_status || '—'}`;
      document.getElementById('RS_m_p9').textContent  = String(m.points9 || 0);
      document.getElementById('RS_m_p10').textContent = String(m.points10 || 0);
      document.getElementById('RS_m_pt').textContent  = String(m.points_total || 0);
      document.getElementById('RS_m_wel').textContent = String(m.welcomes || 0);
      document.getElementById('RS_m_inv').textContent = (m.involved ? 'نعم' : 'لا');
      document.getElementById('RS_memberModal').classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }catch(e){}
  }
  function RS_closeMember(){
    document.getElementById('RS_memberModal').classList.add('hidden');
    document.body.style.overflow = '';
  }
  document.getElementById('openNextSteps')?.addEventListener('click', function(){
    document.getElementById('RS_stepsModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  });
  function RS_closeSteps(){
    document.getElementById('RS_stepsModal').classList.add('hidden');
    document.body.style.overflow = '';
  }
</script>