@extends('layouts.superadmin')
@section('title','غيابات اليوم + القادم')

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

    $tz = config('app.timezone','Asia/Jerusalem');
    $todayLabel = Carbon::parse($today ?? now($tz)->toDateString(), $tz)->format('Y-m-d');
    $to7Label   = Carbon::parse($to7 ?? now($tz)->addDays(7)->toDateString(), $tz)->format('Y-m-d');

    $todayAbsences = $todayAbsences ?? collect();
    $upcoming      = $upcoming ?? collect();

    $counts = $counts ?? [
        'today' => $todayAbsences->count(),
        'upcoming_7' => $upcoming->count(),
        'unique_today' => $todayAbsences->pluck('user_id')->unique()->count(),
    ];
@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-indigo-500/30 text-white">

        <div class="pointer-events-none absolute -top-24 -left-14 w-72 h-72 rounded-full bg-indigo-500/18 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-16 w-80 h-80 rounded-full bg-fuchsia-500/18 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-6 space-y-4">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                <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-sun text-indigo-200"></i>
                        <span>نظام الغيابات — لوحة اليوم + القادم</span>
                    </div>

                    <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight">
                        غيابات اليوم + القادم (7 أيام)
                    </h1>

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

                <div class="flex flex-col sm:flex-row gap-2">
                    <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.weekly') }}"
                       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-calendar-week text-[11px]"></i>
                        <span>الجدول الأسبوعي</span>
                    </a>
                </div>
            </div>

            {{-- AERO / Guide + Toggle --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                {{-- Guide / Key --}}
                <div class="lg:col-span-2 rounded-2xl bg-white/5 border border-white/15 p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div class="font-extrabold text-sm flex items-center gap-2">
                            <i class="fa-solid fa-compass text-indigo-200"></i>
                            <span>مفتاح الإرشاد</span>
                        </div>
                        <div class="text-[11px] text-white/70">
                            اليوم: <span class="font-bold text-white">{{ $todayLabel }}</span>
                            <span class="mx-1">•</span>
                            القادم حتى: <span class="font-bold text-white">{{ $to7Label }}</span>
                        </div>
                    </div>

                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2 text-[12px]">
                        <div class="rounded-xl border border-emerald-500/25 bg-emerald-500/10 px-3 py-2">
                            <div class="font-bold text-emerald-100">غياب اليوم</div>
                            <div class="text-emerald-100/80">يغطي تاريخ اليوم (معتمد)</div>
                        </div>
                        <div class="rounded-xl border border-cyan-500/25 bg-cyan-500/10 px-3 py-2">
                            <div class="font-bold text-cyan-100">القادم</div>
                            <div class="text-cyan-100/80">يبدأ خلال 7 أيام</div>
                        </div>
                        <div class="rounded-xl border border-amber-500/25 bg-amber-500/10 px-3 py-2">
                            <div class="font-bold text-amber-100">عرض/جدول</div>
                            <div class="text-amber-100/80">تبديل فوري بدون إعادة تحميل</div>
                        </div>
                    </div>
                </div>

                {{-- Toggle --}}
                <div class="rounded-2xl bg-white/5 border border-white/15 p-4">
                    <div class="font-extrabold text-sm flex items-center gap-2">
                        <i class="fa-solid fa-layer-group text-fuchsia-200"></i>
                        <span>طريقة العرض</span>
                    </div>

                    <div class="mt-3 grid grid-cols-2 gap-2">
                        <button type="button" id="btnCards"
                                class="px-3 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-id-card ml-1"></i>
                            كروت
                        </button>
                        <button type="button" id="btnTable"
                                class="px-3 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-table ml-1"></i>
                            جدول
                        </button>
                    </div>

                    <div class="mt-3 text-[11px] text-white/70 leading-relaxed">
                        التبديل يؤثر على قسم “غيابات اليوم” و “الغيابات القادمة”.
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- KPI Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <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] font-bold text-emerald-700/80 dark:text-emerald-200/80">عدد الغيابات اليوم</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-900 dark:text-emerald-100">{{ $counts['today'] ?? 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] font-bold text-cyan-700/80 dark:text-cyan-200/80">عدد الغيابات القادمة (7 أيام)</div>
            <div class="mt-1 text-2xl font-extrabold text-cyan-900 dark:text-cyan-100">{{ $counts['upcoming_7'] ?? 0 }}</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] font-bold text-slate-500 dark:text-slate-400">عدد الأعضاء الفريدين (اليوم)</div>
            <div class="mt-1 text-2xl font-extrabold text-slate-900 dark:text-white">{{ $counts['unique_today'] ?? 0 }}</div>
        </div>
    </div>

    {{-- SECTION: Today --}}
    <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-start justify-between gap-3">
            <div>
                <div class="text-sm font-extrabold text-slate-900 dark:text-white">
                    غيابات اليوم (معتمدة) — {{ $todayLabel }}
                </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-emerald-500/10 text-emerald-700 dark:text-emerald-200 border border-emerald-500/20">
                {{ $todayAbsences->count() }} عنصر
            </div>
        </div>

        {{-- Cards view --}}
        <div id="todayCards" class="p-4 sm:p-6">
            @if($todayAbsences->isEmpty())
                <div class="text-center text-sm text-slate-500 dark:text-slate-400 py-10">
                    لا يوجد غيابات رسمية تغطي تاريخ اليوم.
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($todayAbsences as $a)
                        <div class="rounded-2xl border border-emerald-200/70 dark:border-emerald-800/60 bg-emerald-50/70 dark:bg-emerald-900/20 p-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-500 to-cyan-600
                                            text-white flex items-center justify-center font-extrabold">
                                    {{ mb_substr($a->user->name ?? $a->user->username ?? '؟',0,1) }}
                                </div>
                                <div class="min-w-0">
                                    <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                        {{ $a->user->name ?? $a->user->username }}
                                    </div>
                                    <div class="text-[11px] text-slate-600 dark:text-slate-300 truncate">
                                        {{ $a->from_date }} → {{ $a->to_date }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-[12px] text-slate-700 dark:text-slate-200 leading-relaxed">
                                {{ $a->excuse_reason }}
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Table view --}}
        <div id="todayTable" class="hidden 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>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    @forelse($todayAbsences as $a)
                        <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">
                                {{ $a->user->name ?? $a->user->username }}
                            </td>
                            <td class="px-4 py-3 text-slate-600 dark:text-slate-300">
                                {{ $a->from_date }} → {{ $a->to_date }}
                            </td>
                            <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                {{ $a->excuse_reason }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-10 text-center text-slate-500 dark:text-slate-400">
                                لا يوجد غيابات رسمية تغطي تاريخ اليوم.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- SECTION: Upcoming --}}
    <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-start justify-between gap-3">
            <div>
                <div class="text-sm font-extrabold text-slate-900 dark:text-white">
                    الغيابات القادمة (7 أيام)
                </div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">
                    يعرض الغيابات التي يبدأ تاريخها خلال الفترة: {{ $todayLabel }} → {{ $to7Label }}.
                </div>
            </div>
            <div class="text-[11px] px-3 py-1.5 rounded-xl bg-cyan-500/10 text-cyan-700 dark:text-cyan-200 border border-cyan-500/20">
                {{ $upcoming->count() }} عنصر
            </div>
        </div>

        {{-- Cards view --}}
        <div id="upcomingCards" class="p-4 sm:p-6">
            @if($upcoming->isEmpty())
                <div class="text-center text-sm text-slate-500 dark:text-slate-400 py-10">
                    لا يوجد غيابات قادمة خلال 7 أيام.
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($upcoming as $a)
                        <div class="rounded-2xl border border-cyan-200/70 dark:border-cyan-800/60 bg-cyan-50/70 dark:bg-cyan-900/20 p-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-indigo-600
                                            text-white flex items-center justify-center font-extrabold">
                                    {{ mb_substr($a->user->name ?? $a->user->username ?? '؟',0,1) }}
                                </div>
                                <div class="min-w-0">
                                    <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                        {{ $a->user->name ?? $a->user->username }}
                                    </div>
                                    <div class="text-[11px] text-slate-600 dark:text-slate-300 truncate">
                                        {{ $a->from_date }} → {{ $a->to_date }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-[12px] text-slate-700 dark:text-slate-200 leading-relaxed">
                                {{ $a->excuse_reason }}
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Table view --}}
        <div id="upcomingTable" class="hidden 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>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    @forelse($upcoming as $a)
                        <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">
                                {{ $a->user->name ?? $a->user->username }}
                            </td>
                            <td class="px-4 py-3 text-slate-600 dark:text-slate-300">
                                {{ $a->from_date }} → {{ $a->to_date }}
                            </td>
                            <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                {{ $a->excuse_reason }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-10 text-center text-slate-500 dark:text-slate-400">
                                لا يوجد غيابات قادمة خلال 7 أيام.
                            </td>
                        </tr>
                    @endforelse
                </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 Today Monitor
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnCards = document.getElementById('btnCards');
    const btnTable = document.getElementById('btnTable');

    const todayCards = document.getElementById('todayCards');
    const todayTable = document.getElementById('todayTable');

    const upcomingCards = document.getElementById('upcomingCards');
    const upcomingTable = document.getElementById('upcomingTable');

    function setMode(mode){
        const isCards = mode === 'cards';

        // Today
        if (todayCards) todayCards.classList.toggle('hidden', !isCards);
        if (todayTable) todayTable.classList.toggle('hidden', isCards);

        // Upcoming
        if (upcomingCards) upcomingCards.classList.toggle('hidden', !isCards);
        if (upcomingTable) upcomingTable.classList.toggle('hidden', isCards);

        // Buttons style
        if (btnCards) btnCards.classList.toggle('bg-white/20', isCards);
        if (btnTable) btnTable.classList.toggle('bg-white/20', !isCards);

        localStorage.setItem('abs_today_view', mode);
    }

    if (btnCards) btnCards.addEventListener('click', () => setMode('cards'));
    if (btnTable) btnTable.addEventListener('click', () => setMode('table'));

    const saved = localStorage.getItem('abs_today_view') || 'cards';
    setMode(saved);
});
</script>
@endsection