@extends('layouts.superadmin')
@section('title','📊 إحصائيات فعاليات ProActive')
@section('page-title','📊 إحصائيات ProActive الرسمية')

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

  {{-- لوحة رقمية ملحمية --}}
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
    <div class="p-5 rounded-2xl bg-gradient-to-br from-indigo-600 to-indigo-800 text-white shadow-xl text-center">
      <div class="text-sm opacity-80">إجمالي الفعاليات</div>
      <div class="text-3xl font-extrabold mt-1">{{ $total }}</div>
    </div>
    <div class="p-5 rounded-2xl bg-gradient-to-br from-amber-500 to-amber-700 text-white shadow-xl text-center">
      <div class="text-sm opacity-80">القادمة</div>
      <div class="text-3xl font-extrabold mt-1">{{ $upcoming }}</div>
    </div>
    <div class="p-5 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 text-white shadow-xl text-center">
      <div class="text-sm opacity-80">النشطة</div>
      <div class="text-3xl font-extrabold mt-1">{{ $active }}</div>
    </div>
    <div class="p-5 rounded-2xl bg-gradient-to-br from-sky-500 to-blue-700 text-white shadow-xl text-center">
      <div class="text-sm opacity-80">المنتهية</div>
      <div class="text-3xl font-extrabold mt-1">{{ $finished }}</div>
    </div>
    <div class="p-5 rounded-2xl bg-gradient-to-br from-rose-500 to-rose-700 text-white shadow-xl text-center">
      <div class="text-sm opacity-80">الملغاة</div>
      <div class="text-3xl font-extrabold mt-1">{{ $cancelled }}</div>
    </div>
  </div>

  {{-- مقارنة أنواع الفعاليات --}}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200/60 dark:border-white/10 shadow-lg">
      <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-3">📈 مقارنة الأنواع</h3>
      <div class="grid grid-cols-2 gap-4 text-center">
        <div class="p-4 rounded-xl bg-indigo-100 dark:bg-indigo-900/30">
          <div class="text-sm text-indigo-800 dark:text-indigo-300">فعالية عادية</div>
          <div class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-200">{{ $regular }}</div>
        </div>
        <div class="p-4 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-900/30">
          <div class="text-sm text-fuchsia-800 dark:text-fuchsia-300">فعالية Plus+</div>
          <div class="text-2xl font-extrabold text-fuchsia-700 dark:text-fuchsia-200">{{ $plus }}</div>
        </div>
      </div>
    </div>

    {{-- منصة الاستخدام --}}
    <div class="p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200/60 dark:border-white/10 shadow-lg">
      <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-3">🌐 توزيع المنصات</h3>
      <ul class="space-y-2 text-sm">
        @forelse($byPlatform as $p)
          <li class="flex items-center justify-between px-2 py-1 rounded-lg bg-gray-50 dark:bg-gray-800/50">
            <span class="capitalize text-gray-700 dark:text-gray-200">{{ $p->platform }}</span>
            <span class="text-gray-900 dark:text-white font-bold">{{ $p->total }}</span>
          </li>
        @empty
          <li class="text-gray-500 dark:text-gray-400 text-center">لا توجد بيانات بعد</li>
        @endforelse
      </ul>
    </div>
  </div>

  {{-- تنبيه اليوم --}}
  @if($todayUpcoming > 0)
    <div class="rounded-2xl bg-gradient-to-br from-amber-100 via-amber-50 to-white dark:from-amber-900/20 dark:via-gray-900 dark:to-black border border-amber-300/40 shadow-xl p-5 flex items-center justify-between">
      <div>
        <h4 class="text-lg font-bold text-amber-700 dark:text-amber-300">📅 مواعيد اليوم</h4>
        <p class="text-sm text-gray-700 dark:text-gray-400 mt-1">
          يوجد <strong>{{ $todayUpcoming }}</strong> فعالية اليوم، منها
          <span class="text-emerald-600 dark:text-emerald-300">{{ $todayActive }}</span> نشطة الآن.
        </p>
      </div>
      <a href="{{ route('superadmin.proactive.schedules.grid') }}" class="px-4 py-2 rounded-lg bg-amber-500 hover:bg-amber-600 text-white font-semibold text-sm shadow">
        عرض الجدول
      </a>
    </div>
  @endif

</div>
@endsection