@extends('layouts.superadmin')
@section('title','غيابات أسبوعية')

@section('content')
@php
    use Carbon\Carbon;

    // تجهيز أسماء الأيام (السبت كبداية)
    $dayNames = [
        'Saturday'  => 'السبت',
        'Sunday'    => 'الأحد',
        'Monday'    => 'الإثنين',
        'Tuesday'   => 'الثلاثاء',
        'Wednesday' => 'الأربعاء',
        'Thursday'  => 'الخميس',
        'Friday'    => 'الجمعة',
    ];

    $daysArr = $days ?? [];
@endphp

<div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6 rtl space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-emerald-500/30 text-white">

        <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-emerald-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-20 w-80 h-80 rounded-full bg-cyan-500/15 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-6 flex flex-col gap-4">
            <div class="flex items-start justify-between gap-3 flex-wrap">
                <div class="space-y-2 min-w-0">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-[11px] font-semibold">
                        <i class="fa-solid fa-calendar-week text-emerald-200"></i>
                        <span>نظام الغيابات — جدول أسبوعي</span>
                    </div>

                    <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight">
                        الغيابات الأسبوعية (جدول)
                    </h1>

                    <p class="text-[12px] sm:text-sm text-white/80 max-w-3xl leading-relaxed">
                        هنا ترى كل الغيابات المعتمدة خلال الأسبوع المحدد، مع كروت سريعة وإحصائيات،
                        وجدول يومي يوضح الأعضاء الغائبين بكل يوم.
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
                    <a href="{{ route('superadmin.absences.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-xl
                              bg-white/10 hover:bg-white/15 border border-white/20 text-[12px] font-bold transition">
                        <i class="fa-solid fa-list-check text-[11px]"></i>
                        <span>طلبات الغياب</span>
                    </a>

                    <a href="{{ route('superadmin.absences.stats') }}"
                       class="inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-xl
                              bg-white/10 hover:bg-white/15 border border-white/20 text-[12px] font-bold transition">
                        <i class="fa-solid fa-chart-simple text-[11px]"></i>
                        <span>إحصائيات</span>
                    </a>
                </div>
            </div>

            {{-- AERO / Controls --}}
            <div class="rounded-2xl bg-white/5 border border-white/15 p-3 sm:p-4">
                <form method="GET" action="{{ route('superadmin.absences.weekly') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
                    <div class="sm:col-span-1">
                        <label class="block text-[11px] font-semibold text-white/80 mb-1">اختر تاريخ ضمن الأسبوع</label>
                        <input type="date" name="week" value="{{ $week ?? now()->toDateString() }}"
                               class="w-full rounded-xl bg-slate-950/60 border border-white/20 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <p class="mt-1 text-[10px] text-white/60">سيتم حساب الأسبوع بدءًا من السبت.</p>
                    </div>

                    <div class="sm:col-span-2 flex flex-col sm:flex-row gap-2 sm:justify-end">
                        <button type="submit"
                                class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl
                                       bg-emerald-600 hover:bg-emerald-500 text-white font-extrabold text-sm
                                       shadow-lg shadow-emerald-500/25 transition">
                            <i class="fa-solid fa-rotate text-[12px]"></i>
                            تحديث الأسبوع
                        </button>

                        <button type="button" onclick="window.print()"
                                class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl
                                       bg-white/10 hover:bg-white/15 border border-white/20 text-white font-bold text-sm transition">
                            <i class="fa-solid fa-print text-[12px]"></i>
                            طباعة
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    {{-- Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 p-4 shadow">
            <div class="text-[11px] text-slate-500 dark:text-slate-400 font-semibold">بداية الأسبوع</div>
            <div class="mt-1 text-lg font-extrabold text-slate-900 dark:text-white">
                {{ $start ?? '-' }}
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 p-4 shadow">
            <div class="text-[11px] text-slate-500 dark:text-slate-400 font-semibold">نهاية الأسبوع</div>
            <div class="mt-1 text-lg font-extrabold text-slate-900 dark:text-white">
                {{ $end ?? '-' }}
            </div>
        </div>

        <div class="rounded-2xl border border-emerald-200/70 dark:border-emerald-800/60 bg-emerald-50/80 dark:bg-emerald-900/20 p-4 shadow">
            <div class="text-[11px] text-emerald-700/80 dark:text-emerald-200/80 font-semibold">عدد الغيابات المعتمدة</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-900 dark:text-emerald-100">
                {{ $absences?->count() ?? 0 }}
            </div>
        </div>

        <div class="rounded-2xl border border-cyan-200/70 dark:border-cyan-800/60 bg-cyan-50/80 dark:bg-cyan-900/20 p-4 shadow">
            <div class="text-[11px] text-cyan-700/80 dark:text-cyan-200/80 font-semibold">عدد الأعضاء الفريدين</div>
            <div class="mt-1 text-2xl font-extrabold text-cyan-900 dark:text-cyan-100">
                {{ $weeklyStats['unique_users'] ?? ($absences?->pluck('user_id')->unique()->count() ?? 0) }}
            </div>
        </div>
    </div>

    {{-- Table by day --}}
    <div class="rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 shadow overflow-hidden">
        <div class="px-4 sm:px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
            <div>
                <div class="text-sm font-extrabold text-slate-900 dark:text-white">جدول الغيابات حسب اليوم</div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">يعرض الأعضاء الغائبين في كل يوم من الأسبوع.</div>
            </div>
            <div class="text-[11px] px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700">
                أسبوع: {{ $start }} → {{ $end }}
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-950/40 text-slate-600 dark:text-slate-300">
                    <tr>
                        <th class="text-right px-4 py-3 font-bold">اليوم</th>
                        <th class="text-right px-4 py-3 font-bold">التاريخ</th>
                        <th class="text-right px-4 py-3 font-bold">الأعضاء</th>
                        <th class="text-right px-4 py-3 font-bold">عدد</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    @foreach($daysArr as $d)
                        @php
                            $dayLabel = $dayNames[Carbon::parse($d)->format('l')] ?? Carbon::parse($d)->format('l');
                            $list = $byDay[$d] ?? collect();
                        @endphp
                        <tr class="hover:bg-slate-50/70 dark:hover:bg-slate-950/30 transition">
                            <td class="px-4 py-3 font-bold text-slate-900 dark:text-white">{{ $dayLabel }}</td>
                            <td class="px-4 py-3 text-slate-600 dark:text-slate-300">{{ $d }}</td>
                            <td class="px-4 py-3">
                                @if($list->isEmpty())
                                    <span class="text-slate-400">لا يوجد</span>
                                @else
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($list as $a)
                                            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                                                         bg-emerald-500/10 text-emerald-700 dark:text-emerald-200
                                                         border border-emerald-500/20 text-[12px]">
                                                <span class="w-6 h-6 rounded-full bg-gradient-to-br from-emerald-500 to-cyan-600
                                                             text-white flex items-center justify-center font-extrabold text-[11px]">
                                                    {{ mb_substr($a->user->name ?? $a->user->username ?? '؟',0,1) }}
                                                </span>
                                                <span class="font-semibold">
                                                    {{ $a->user->name ?? $a->user->username }}
                                                </span>
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-3 font-extrabold text-slate-900 dark:text-white">
                                {{ $list->count() }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Footer --}}
    <div class="text-center text-[11px] text-slate-500 dark:text-slate-400 pt-2">
        Golden Loyalty Army · Falcon Room · Absences Weekly Board
    </div>

</div>
@endsection