@extends('layouts.superadmin')

@section('title', 'إحصائيات الغيابات')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6 rtl">

    {{-- العنوان --}}
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-extrabold text-slate-800 dark:text-slate-100">
            📊 إحصائيات طلبات الغياب
        </h1>

        <a href="{{ route('superadmin.absences.index') }}"
           class="px-4 py-2 rounded-xl bg-slate-200 hover:bg-slate-300
                  dark:bg-slate-800 dark:hover:bg-slate-700 text-sm font-semibold">
            رجوع للقائمة
        </a>
    </div>

    {{-- البطاقات --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="rounded-2xl p-4 bg-emerald-100 dark:bg-emerald-900/30">
            <div class="text-sm text-emerald-700 dark:text-emerald-300">إجمالي الطلبات</div>
            <div class="text-2xl font-extrabold">{{ $stats['total'] ?? 0 }}</div>
        </div>

        <div class="rounded-2xl p-4 bg-amber-100 dark:bg-amber-900/30">
            <div class="text-sm text-amber-700 dark:text-amber-300">قيد المراجعة</div>
            <div class="text-2xl font-extrabold">{{ $stats['pending'] ?? 0 }}</div>
        </div>

        <div class="rounded-2xl p-4 bg-sky-100 dark:bg-sky-900/30">
            <div class="text-sm text-sky-700 dark:text-sky-300">موافق عليها</div>
            <div class="text-2xl font-extrabold">{{ $stats['approved'] ?? 0 }}</div>
        </div>

        <div class="rounded-2xl p-4 bg-rose-100 dark:bg-rose-900/30">
            <div class="text-sm text-rose-700 dark:text-rose-300">مرفوضة</div>
            <div class="text-2xl font-extrabold">{{ $stats['rejected'] ?? 0 }}</div>
        </div>
    </div>

    {{-- أكثر الأعضاء غياباً --}}
    @if(!empty($topAbsentUsers))
    <div class="rounded-2xl bg-white dark:bg-slate-900 shadow p-5">
        <h2 class="text-lg font-bold mb-4">👥 أكثر الأعضاء طلباً للغياب</h2>

        <table class="w-full text-sm">
            <thead>
                <tr class="text-right text-slate-500">
                    <th class="py-2">العضو</th>
                    <th class="py-2">عدد الطلبات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($topAbsentUsers as $row)
                    <tr class="border-t border-slate-200 dark:border-slate-800">
                        <td class="py-2 font-semibold">
                            {{ $row->user->name ?? '—' }}
                        </td>
                        <td class="py-2">
                            {{ $row->cnt }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

</div>
@endsection