@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-cyan-400/20 shadow-2xl shadow-cyan-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-cyan-400/15 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-cyan-300/25 text-[11px] text-cyan-100">
            <i class="fa-solid fa-chart-pie text-xs"></i>
            <span>Socratic Room • إحصائيات التيم</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">
            AI + עוגות ותרשמים + نصايح + مؤشرات — بيانات حقيقية حسب الفترة.
          </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>
          </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-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-fuchsia-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-cyan-200 via-fuchsia-200 to-emerald-200 shadow-lg shadow-cyan-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>

    {{-- HR ملحمي --}}
    <div class="h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent"></div>

    {{-- ✅ STATS CARDS --}}
    <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">{{ $users['total'] ?? '—' }}</div>
      </div>
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">أعضاء Active</div>
        <div class="text-2xl font-extrabold text-emerald-200 mt-1">{{ $users['active'] ?? '—' }}</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">{{ $eval['total'] ?? '—' }}</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-fuchsia-200 mt-1">
          {{ $eval['avg_points'] !== null ? number_format($eval['avg_points'], 2) : '—' }}
        </div>
      </div>
    </div>

    {{-- HR ملحمي --}}
    <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

    {{-- ✅ Attendance + Split --}}
    <div class="grid gap-4 lg:grid-cols-2">
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center justify-between">
          <div class="text-sm font-extrabold text-white">الحضور (٪)</div>
          <div class="text-[11px] text-white/50">present / excuse / no excuse</div>
        </div>

        <div class="mt-4 space-y-3">
          <div>
            <div class="flex items-center justify-between text-[12px] text-white/80">
              <span>حاضر</span>
              <span class="font-bold text-cyan-200">{{ $attendancePct['present'] ?? 0 }}%</span>
            </div>
            <div class="h-2 rounded-full bg-white/10 overflow-hidden mt-1">
              <div class="h-full bg-cyan-300/60" style="width: {{ $attendancePct['present'] ?? 0 }}%"></div>
            </div>
          </div>

          <div>
            <div class="flex items-center justify-between text-[12px] text-white/80">
              <span>غائب بعذر</span>
              <span class="font-bold text-amber-200">{{ $attendancePct['excuse'] ?? 0 }}%</span>
            </div>
            <div class="h-2 rounded-full bg-white/10 overflow-hidden mt-1">
              <div class="h-full bg-amber-300/60" style="width: {{ $attendancePct['excuse'] ?? 0 }}%"></div>
            </div>
          </div>

          <div>
            <div class="flex items-center justify-between text-[12px] text-white/80">
              <span>غائب بدون عذر</span>
              <span class="font-bold text-rose-200">{{ $attendancePct['no_excuse'] ?? 0 }}%</span>
            </div>
            <div class="h-2 rounded-full bg-white/10 overflow-hidden mt-1">
              <div class="h-full bg-rose-300/60" style="width: {{ $attendancePct['no_excuse'] ?? 0 }}%"></div>
            </div>
          </div>
        </div>

        <div class="mt-4 text-[11px] text-white/50">
          ملاحظة: النسب محسوبة من تقييمات الفترة حسب evaluation_date.
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center justify-between">
          <div class="text-sm font-extrabold text-white">تقسيم الأعضاء</div>
          <div class="text-[11px] text-white/50">boys / girls</div>
        </div>

        <div class="mt-4 grid grid-cols-2 gap-3">
          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="text-[11px] text-white/60">شباب</div>
            <div class="text-xl font-extrabold text-emerald-200 mt-1">{{ $users['boys'] ?? '—' }}</div>
          </div>
          <div class="rounded-3xl border border-pink-400/20 bg-pink-500/10 p-4">
            <div class="text-[11px] text-white/70">صبايا</div>
            <div class="text-xl font-extrabold text-pink-200 mt-1">{{ $users['girls'] ?? '—' }}</div>
          </div>
        </div>

        <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[11px] text-white/60 mb-1">ProActive (تقارير بالفترة)</div>
          <div class="text-[12px] text-white/80">الإجمالي: <span class="font-extrabold text-cyan-200">{{ $pro['reports_total'] ?? '—' }}</span></div>
          <div class="text-[12px] text-white/80">تيكتوك: <span class="font-extrabold text-fuchsia-200">{{ $pro['tiktok_reports'] ?? '—' }}</span></div>
          <div class="text-[12px] text-white/80">واتساب: <span class="font-extrabold text-emerald-200">{{ $pro['whatsapp_reports'] ?? '—' }}</span></div>
        </div>
      </div>
    </div>

    {{-- HR ملحمي --}}
    <div class="h-px bg-gradient-to-r from-transparent via-fuchsia-400/15 to-transparent"></div>

    {{-- ✅ TOP / LOW --}}
    <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">أفضل أداء (Top)</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($topMembers as $m)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $m->name ?? '—' }}</td>
                  <td class="py-2 text-cyan-200 font-extrabold">{{ (int)$m->pts_sum }}</td>
                  <td class="py-2 text-rose-200 font-bold">{{ (int)$m->abs_no_excuse }}</td>
                </tr>
              @empty
                <tr><td colspan="3" 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">أقل أداء (Low)</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($lowMembers as $m)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $m->name ?? '—' }}</td>
                  <td class="py-2 text-amber-200 font-extrabold">{{ (int)$m->pts_sum }}</td>
                  <td class="py-2 text-rose-200 font-bold">{{ (int)$m->abs_no_excuse }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="py-3 text-white/50">لا بيانات للفترة.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection