@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-emerald-400/20 shadow-2xl shadow-emerald-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-emerald-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-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-emerald-300/25 text-[11px] text-emerald-100">
            <i class="fa-solid fa-user-shield text-xs"></i>
            <span>متابعة شباب التيم • رقابة + حضور + نقاط</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-emerald-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-emerald-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-emerald-200 via-cyan-200 to-slate-200 shadow-lg shadow-emerald-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-emerald-400/20 to-transparent"></div>

    {{-- 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">{{ $kpi['boys_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-emerald-200 mt-1">{{ $kpi['evals_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-rose-200 mt-1">{{ $kpi['abs_no_excuse'] ?? '—' }}</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">
          {{ $kpi['avg_points'] !== null ? number_format($kpi['avg_points'], 2) : '—' }}
        </div>
      </div>
    </div>

    {{-- Alerts --}}
    @if(!empty($alerts))
      <div class="rounded-3xl border border-rose-400/20 bg-rose-500/10 p-5">
        <div class="flex items-center gap-2 text-rose-100 font-extrabold mb-3">
          <i class="fa-solid fa-triangle-exclamation"></i>
          تنبيهات سريعة
        </div>
        <div class="space-y-2">
          @foreach($alerts as $a)
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-rose-100/90">
              <span class="font-bold">• {{ $a['t'] }}:</span> {{ $a['v'] }}
            </div>
          @endforeach
        </div>
      </div>
    @endif

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

    {{-- Top + Risk tables --}}
    <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">أفضل 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($top as $m)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $m->name ?? '—' }}</td>
                  <td class="py-2 text-emerald-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">قائمة الخطر (غيابات)</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($risk as $m)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $m->name ?? '—' }}</td>
                  <td class="py-2 text-rose-200 font-extrabold">{{ (int)$m->abs_no_excuse }}</td>
                  <td class="py-2 text-amber-200 font-bold">{{ (int)$m->pts_sum }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="py-3 text-white/50">لا بيانات للفترة.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

    </div>

  </div>
</div>
@endsection