@extends('layouts.superadmin')
@section('title','متابعة صقر للشباب — الداشبورد')
@section('page-title','متابعة صقر للشباب — الداشبورد')

@section('content')
<div class="p-6 space-y-6">

  {{-- كروت إحصائية --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    <x-stat title="إجمالي الشباب"  value="{{ number_format($stats['boys_total']) }}"   color="cyan"/>
    <x-stat title="المتواجدون الآن" value="{{ number_format($stats['online_now']) }}"  color="emerald"/>
    <x-stat title="نشط اليوم"       value="{{ number_format($stats['active_today']) }}" color="violet"/>
    <x-stat title="نقاط اليوم"      value="{{ number_format($stats['points_today']) }}" color="amber"/>
  </div>

  {{-- ملحوظة --}}
  <div class="text-xs text-gray-500 dark:text-gray-400">
    * الإحصائيات ممزوجة آمنًا من الجداول المتاحة، وتعمل حتى لو بعض الأعمدة غير موجودة.
  </div>

  {{-- أكثر شبابًا نشاطًا اليوم (hits بسيطة من user_tracking) --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
    <h3 class="font-bold mb-3">🔥 أكثر الشباب نشاطًا اليوم</h3>
    @if($topToday->isEmpty())
      <div class="text-gray-500 text-sm">لا توجد بيانات كافية اليوم.</div>
    @else
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
        @foreach($topToday as $row)
          <div class="rounded-xl p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/20 dark:to-cyan-800/20 border-r-4 border-cyan-400">
            <div class="flex items-center justify-between">
              <div class="font-bold truncate">{{ $row->name }}</div>
              <span class="px-2 py-0.5 text-xs rounded bg-black/5 dark:bg-white/10">{{ $row->hits }} زيارة</span>
            </div>
            @if(Route::has('superadmin.admin-messages.index'))
              <div class="mt-3">
                <a href="{{ route('superadmin.admin-messages.index',['to'=>$row->id]) }}"
                   class="inline-flex items-center gap-2 px-3 py-1.5 rounded bg-primary-600 text-white text-xs hover:bg-primary-700">
                  ✉️ إرسال رسالة
                </a>
              </div>
            @endif
          </div>
        @endforeach
      </div>
    @endif
  </div>

</div>
@endsection