@extends('layouts.superadmin')

@section('title','نظام الجاجي Chiken — الإحصائيات')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-fuchsia-950/40 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">

    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-xl sm:text-2xl font-extrabold text-white">
          إحصائيات الجاجي <span class="text-rose-200">Analytics</span>
        </h1>
        <p class="text-[12px] text-white/60">
          الفترة: {{ $from }} → {{ $to }}
          {{ $gender==='female' ? '• (وضع الصبايا 🎀)' : ($gender==='male' ? '• (وضع الشباب)' : '') }}
        </p>
      </div>

      <div class="flex gap-2">
        {{-- ✅ داشبورد الجاجي --}}
        <a href="{{ route('superadmin.chiken.dashboard', request()->query()) }}"
          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-house"></i>
          الداشبورد
        </a>

        {{-- ✅ Wizard الجاجي --}}
        <a href="{{ route('superadmin.chiken.broadcast') }}"
          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-bullhorn"></i>
          إشعار Wizard
        </a>
      </div>
    </div>

    {{-- INDICES (معادلات حقيقية) --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
            <i class="fa-solid fa-user-check"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Member Index</div>
            <div class="text-2xl font-extrabold text-white">{{ $indices['memberIndex'] ?? '—' }}</div>
            <div class="text-[11px] text-white/50">معادلة: (Approved%) - (Rejected×5) + (WA×1.2) + (TT×1.2)</div>
          </div>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
            <i class="fa-solid fa-video"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Live Index</div>
            <div class="text-2xl font-extrabold text-white">{{ $indices['liveIndex'] ?? '—' }}</div>
            <div class="text-[11px] text-white/50">معادلة: Confirmed% - (NoExcuse×8) - (Rejected×3) - (Late×0.7)</div>
          </div>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
            <i class="fa-solid fa-user-group"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Guest Index</div>
            <div class="text-2xl font-extrabold text-white">{{ $indices['guestIndex'] ?? '—' }}</div>
            <div class="text-[11px] text-white/50">معادلة: Approved% - (Rejected×6) + (Hours×2.0)</div>
          </div>
        </div>
      </div>
    </div>

    {{-- RISK TABLES --}}
    <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 mb-3">
          <div class="text-sm font-extrabold text-amber-200">أكثر غياب بدون عذر (لايفات)</div>
          <div class="text-[11px] text-white/60">Missed No Excuse</div>
        </div>

        <div class="overflow-x-auto">
          <table class="min-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/85">
              @forelse($riskLives as $r)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $r->name }} <span class="text-white/50 text-[11px]">{{ $r->username ? '@'.$r->username : '' }}</span></td>
                  <td class="py-2">
                    @if($r->gender === 'female')
                      <span class="px-2 py-0.5 rounded-full bg-rose-200/10 border border-rose-300/20 text-rose-100 text-[11px]">صبايا</span>
                    @else
                      <span class="px-2 py-0.5 rounded-full bg-cyan-200/10 border border-cyan-300/20 text-cyan-100 text-[11px]">شباب</span>
                    @endif
                  </td>
                  <td class="py-2 font-extrabold text-amber-200">{{ (int)$r->misses }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="py-6 text-center text-white/60">لا يوجد</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center justify-between mb-3">
          <div class="text-sm font-extrabold text-rose-200">أكثر غياب بدون عذر (تقييمات)</div>
          <div class="text-[11px] text-white/60">Absence</div>
        </div>

        <div class="overflow-x-auto">
          <table class="min-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/85">
              @forelse($riskEval as $r)
                <tr class="border-b border-white/5">
                  <td class="py-2 font-bold">{{ $r->name }} <span class="text-white/50 text-[11px]">{{ $r->username ? '@'.$r->username : '' }}</span></td>
                  <td class="py-2">
                    @if($r->gender === 'female')
                      <span class="px-2 py-0.5 rounded-full bg-rose-200/10 border border-rose-300/20 text-rose-100 text-[11px]">صبايا</span>
                    @else
                      <span class="px-2 py-0.5 rounded-full bg-cyan-200/10 border border-cyan-300/20 text-cyan-100 text-[11px]">شباب</span>
                    @endif
                  </td>
                  <td class="py-2 font-extrabold text-rose-200">{{ (int)$r->absences }}</td>
                </tr>
              @empty
                <tr><td colspan="3" class="py-6 text-center text-white/60">لا يوجد</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection