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

@section('content')
<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/20 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/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/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-fuchsia-300/25 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-ranking-star text-xs"></i>
            <span>نتائج الأعضاء • Weekly Tests Analytics</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            نتائج الأعضاء
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/80 leading-relaxed">
            متوسط لكل عضو (متوسط نسب المحاولات) + نجاح/رسوب + تقسيم شباب/صبايا + مودل التفاصيل.
          </p>

          <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">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              الفترة: {{ $from }} → {{ $to }}
            </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">
              حد النجاح: <b class="text-emerald-200">{{ $passScore }}%</b>
            </span>
          </div>
        </div>

        {{-- FILTER + BACK --}}
        <div class="w-full lg:w-auto space-y-2">
          <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 class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3">
            <form method="get" class="grid grid-cols-2 gap-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-extrabold text-slate-950
                bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-slate-200 shadow-lg shadow-fuchsia-500/15 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>

    @if(!empty($emptyReason))
      <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 text-amber-100 px-4 py-3 text-sm">
        {{ $emptyReason }}
      </div>
    @endif

    {{-- KPIs --}}
    <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">{{ $globalStats->total_attempts ?? 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">{{ $globalStats->avg_score !== null ? $globalStats->avg_score.'%' : '—' }}</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-emerald-200 mt-1">
          {{ $globalStats->pass_count ?? 0 }} <span class="text-[12px] text-white/60">({{ $globalStats->pass_rate ?? 0 }}%)</span>
        </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-rose-200 mt-1">
          {{ $globalStats->fail_count ?? 0 }} <span class="text-[12px] text-white/60">({{ $globalStats->fail_rate ?? 0 }}%)</span>
        </div>
      </div>
    </div>

    {{-- Extra Stats --}}
    <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
      <div class="text-sm font-extrabold text-white mb-3">معدلات إضافية (حسب النوع/الرتبة)</div>
      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-5 text-[12px]">
        <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white/80">
          أعضاء: <b class="text-emerald-200">{{ $extraStats->members_avg !== null ? $extraStats->members_avg.'%' : '—' }}</b>
        </div>
        <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white/80">
          شباب: <b class="text-cyan-200">{{ $extraStats->male_avg !== null ? $extraStats->male_avg.'%' : '—' }}</b>
        </div>
        <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white/80">
          صبايا: <b class="text-pink-200">{{ $extraStats->female_avg !== null ? $extraStats->female_avg.'%' : '—' }}</b>
        </div>
        <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white/80">
          Moderators: <b class="text-amber-200">{{ $extraStats->moderators_avg !== null ? $extraStats->moderators_avg.'%' : '—' }}</b>
        </div>
        <div class="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white/80">
          Super-Admins: <b class="text-fuchsia-200">{{ $extraStats->super_admins_avg !== null ? $extraStats->super_admins_avg.'%' : '—' }}</b>
        </div>
      </div>
    </div>

    {{-- Tabs --}}
    <div class="flex flex-wrap gap-2">
      <button id="tab-boys" class="px-4 py-2 rounded-2xl text-xs font-extrabold bg-emerald-500/15 border border-emerald-400/25 text-emerald-100 hover:bg-emerald-500/20 transition">
        شباب التيم
      </button>
      <button id="tab-girls" class="px-4 py-2 rounded-2xl text-xs font-extrabold bg-pink-500/15 border border-pink-400/25 text-pink-100 hover:bg-pink-500/20 transition">
        صبايا التيم
      </button>
    </div>

    {{-- BOYS PANEL --}}
    <div id="panel-boys" class="space-y-4">
      <div class="grid gap-4 lg:grid-cols-2">
        <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">أفضل 20 شباب (حسب المتوسط)</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>
                </tr>
              </thead>
              <tbody class="text-[12px] text-white/80">
                @forelse($perUsersBoys->take(20) as $row)
                  @php
                    $u = $row['user'];
                    $payload = [
                      'name' => $u->name,
                      'gender' => $u->gender,
                      'membership' => $u->membership_status,
                      'avg' => $row['avg'],
                      'attempts' => $row['attempts'],
                      'items' => $row['items'],
                    ];
                  @endphp
                  <tr class="border-b border-white/5 hover:bg-white/5 cursor-pointer openMemberModal"
                      data-member='@json($payload)'>
                    <td class="py-2 font-bold">{{ $u->name }}</td>
                    <td class="py-2 text-emerald-200 font-extrabold">{{ $row['avg'] }}%</td>
                    <td class="py-2">{{ $row['attempts'] }}</td>
                    <td class="py-2 text-white/60">{{ $row['last_at'] }}</td>
                  </tr>
                @empty
                  <tr><td colspan="4" class="py-3 text-white/50">لا بيانات.</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>

        <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">أضعف 10 شباب</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>
                </tr>
              </thead>
              <tbody class="text-[12px] text-white/80">
                @forelse($weakBoys as $row)
                  @php
                    $u = $row['user'];
                    $payload = [
                      'name' => $u->name,
                      'gender' => $u->gender,
                      'membership' => $u->membership_status,
                      'avg' => $row['avg'],
                      'attempts' => $row['attempts'],
                      'items' => $row['items'],
                    ];
                  @endphp
                  <tr class="border-b border-white/5 hover:bg-white/5 cursor-pointer openMemberModal"
                      data-member='@json($payload)'>
                    <td class="py-2 font-bold">{{ $u->name }}</td>
                    <td class="py-2 text-rose-200 font-extrabold">{{ $row['avg'] }}%</td>
                    <td class="py-2">{{ $row['attempts'] }}</td>
                  </tr>
                @empty
                  <tr><td colspan="3" class="py-3 text-white/50">لا بيانات.</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {{-- GIRLS PANEL --}}
    <div id="panel-girls" class="space-y-4 hidden">
      <div class="grid gap-4 lg:grid-cols-2">
        <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">أفضل 20 صبايا (حسب المتوسط)</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>
                </tr>
              </thead>
              <tbody class="text-[12px] text-white/80">
                @forelse($perUsersGirls->take(20) as $row)
                  @php
                    $u = $row['user'];
                    $payload = [
                      'name' => $u->name,
                      'gender' => $u->gender,
                      'membership' => $u->membership_status,
                      'avg' => $row['avg'],
                      'attempts' => $row['attempts'],
                      'items' => $row['items'],
                    ];
                  @endphp
                  <tr class="border-b border-white/5 hover:bg-white/5 cursor-pointer openMemberModal"
                      data-member='@json($payload)'>
                    <td class="py-2 font-bold">{{ $u->name }}</td>
                    <td class="py-2 text-pink-200 font-extrabold">{{ $row['avg'] }}%</td>
                    <td class="py-2">{{ $row['attempts'] }}</td>
                    <td class="py-2 text-white/60">{{ $row['last_at'] }}</td>
                  </tr>
                @empty
                  <tr><td colspan="4" class="py-3 text-white/50">لا بيانات.</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>

        <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">أضعف 10 صبايا</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>
                </tr>
              </thead>
              <tbody class="text-[12px] text-white/80">
                @forelse($weakGirls as $row)
                  @php
                    $u = $row['user'];
                    $payload = [
                      'name' => $u->name,
                      'gender' => $u->gender,
                      'membership' => $u->membership_status,
                      'avg' => $row['avg'],
                      'attempts' => $row['attempts'],
                      'items' => $row['items'],
                    ];
                  @endphp
                  <tr class="border-b border-white/5 hover:bg-white/5 cursor-pointer openMemberModal"
                      data-member='@json($payload)'>
                    <td class="py-2 font-bold">{{ $u->name }}</td>
                    <td class="py-2 text-rose-200 font-extrabold">{{ $row['avg'] }}%</td>
                    <td class="py-2">{{ $row['attempts'] }}</td>
                  </tr>
                @empty
                  <tr><td colspan="3" class="py-3 text-white/50">لا بيانات.</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {{-- Top Fail Tests --}}
    <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">أكثر 5 اختبارات فشلًا</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>
            </tr>
          </thead>
          <tbody class="text-[12px] text-white/80">
            @forelse($topFailTests as $t)
              <tr class="border-b border-white/5">
                <td class="py-2 font-bold">{{ $t->title ?? ('#'.$t->id) }}</td>
                <td class="py-2">{{ $t->stats->total_attempts }}</td>
                <td class="py-2 text-cyan-200 font-extrabold">{{ $t->stats->avg_score !== null ? $t->stats->avg_score.'%' : '—' }}</td>
                <td class="py-2 text-rose-200 font-bold">{{ $t->stats->fail_count }}</td>
                <td class="py-2 text-rose-200 font-extrabold">{{ $t->stats->fail_rate }}%</td>
              </tr>
            @empty
              <tr><td colspan="5" class="py-3 text-white/50">لا يوجد.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

  </div>

  {{-- MODAL --}}
  <div id="memberModal" class="hidden fixed inset-0 z-[999]">
    <div class="absolute inset-0 bg-black/70" id="memberModalBackdrop"></div>

    <div class="relative max-w-2xl mx-auto mt-10 sm:mt-16 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-fuchsia-400/10 blur-3xl"></div>

        <div class="p-5 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="text-[11px] text-white/60">تفاصيل العضو</div>
              <div id="mmName" class="text-xl font-extrabold text-white">—</div>
              <div id="mmMeta" class="text-[12px] text-white/60 mt-1">—</div>
            </div>

            <button id="memberModalClose"
              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="grid gap-3 sm:grid-cols-3 mt-4">
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-white/60">المتوسط</div>
              <div id="mmAvg" class="text-lg font-extrabold text-cyan-200 mt-1">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-white/60">عدد المحاولات</div>
              <div id="mmAttempts" class="text-lg font-extrabold text-emerald-200 mt-1">—</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-white/60">حد النجاح</div>
              <div class="text-lg font-extrabold text-white mt-1">{{ $passScore }}%</div>
            </div>
          </div>

          <div class="mt-4 rounded-3xl border border-white/10 bg-black/20 p-4">
            <div class="text-sm font-extrabold text-white mb-3">المحاولات</div>
            <div id="mmList" class="space-y-2"></div>
          </div>

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

</div>

<script>
  // Tabs
  const tabB = document.getElementById('tab-boys');
  const tabG = document.getElementById('tab-girls');
  const panelB = document.getElementById('panel-boys');
  const panelG = document.getElementById('panel-girls');

  tabB?.addEventListener('click', () => {
    panelB.classList.remove('hidden');
    panelG.classList.add('hidden');
  });
  tabG?.addEventListener('click', () => {
    panelG.classList.remove('hidden');
    panelB.classList.add('hidden');
  });

  // Modal
  const modal = document.getElementById('memberModal');
  const closeBtn = document.getElementById('memberModalClose');
  const backdrop = document.getElementById('memberModalBackdrop');

  const mmName = document.getElementById('mmName');
  const mmMeta = document.getElementById('mmMeta');
  const mmAvg = document.getElementById('mmAvg');
  const mmAttempts = document.getElementById('mmAttempts');
  const mmList = document.getElementById('mmList');

  function openModal(data){
    mmName.textContent = data.name || '—';
    mmMeta.textContent = (data.gender || '—') + ' • ' + (data.membership || '—');
    mmAvg.textContent = (data.avg ?? '—') + '%';
    mmAttempts.textContent = data.attempts ?? '—';

    mmList.innerHTML = '';
    const items = Array.isArray(data.items) ? data.items : [];
    if(items.length === 0){
      mmList.innerHTML = `<div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-white/60">لا توجد محاولات.</div>`;
    } else {
      items.forEach(it => {
        const q = it.q ? it.q : '—';
        const raw = (it.raw ?? '—');
        const p = (it.percent ?? '—');
        const at = (it.at ?? '—');
        mmList.insertAdjacentHTML('beforeend', `
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-white/80 flex flex-col gap-1">
            <div class="flex items-center justify-between">
              <div class="font-bold text-white/90">Test #${it.test_id}</div>
              <div class="font-extrabold ${p >= {{ $passScore }} ? 'text-emerald-200' : 'text-rose-200'}">${p}%</div>
            </div>
            <div class="text-[11px] text-white/60">النتيجة الخام: ${raw} / ${q} • ${at}</div>
          </div>
        `);
      });
    }

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

  function closeModal(){
    modal.classList.add('hidden');
  }

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

  document.querySelectorAll('.openMemberModal').forEach(el => {
    el.addEventListener('click', () => {
      try {
        const data = JSON.parse(el.getAttribute('data-member') || '{}');
        openModal(data);
      } catch(e){}
    });
  });
</script>
@endsection