@extends('layouts.superadmin')
@section('title','ملف العضو - الغيابات')

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

    $from = $from ?? now()->subDays(90)->toDateString();
    $to   = $to   ?? now()->toDateString();

    $absences = $absences ?? collect();
    $evaluations = $evaluations ?? collect();

    $stats = $stats ?? [
        'approved' => $absences->where('status','approved')->count(),
        'pending'  => $absences->where('status','pending')->count(),
        'rejected' => $absences->where('status','rejected')->count(),
        'present'  => $evaluations->where('attendance_status','present')->count(),
        'excused'  => $evaluations->where('attendance_status','absent_with_excuse')->count(),
        'noexcuse' => $evaluations->where('attendance_status','absent_without_excuse')->count(),
    ];

    $uName = $user->name ?? $user->username ?? 'عضو';
    $uInitial = mb_substr($uName,0,1);

    // ===== ADD: LED state =====
    $led = $ledState ?? 'clear';
    $ledClass = $led === 'excused_today'
        ? 'bg-rose-500'
        : ($led === 'pending' ? 'bg-amber-500' : 'bg-emerald-500');
    // ===== END ADD =====
@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-sky-500/30 text-white">

        <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-sky-500/18 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-20 w-80 h-80 rounded-full bg-violet-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="flex items-start gap-3 min-w-0">
                    <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-sky-500 to-violet-600
                                text-white flex items-center justify-center font-extrabold text-xl shadow shadow-sky-500/25">
                        {{ $uInitial }}
                    </div>

                    <div class="space-y-1 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-id-badge text-sky-200"></i>
                            <span>نظام الغيابات — ملف عضو</span>
                        </div>

                        <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight truncate">
                            ملف العضو: {{ $uName }}
                        </h1>

                        <p class="text-[12px] sm:text-sm text-white/80 leading-relaxed max-w-3xl">
                            هنا تتابع الغيابات + التقييمات (الحضور) للعضو ضمن فترة محددة، مع كروت تلخيصية
                            وجدولين احترافيين، وإمكانية التبديل بين عرض <b>كروت</b> و <b>جدول</b>.
                        </p>
                    </div>
                </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.today') }}"
                       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-sun text-[11px]"></i>
                        <span>اليوم</span>
                    </a>
                </div>
            </div>

            {{-- AERO / Filters + Toggle --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                <div class="lg:col-span-2 rounded-2xl bg-white/5 border border-white/15 p-3 sm:p-4">

                    {{-- ===== ADD: اختيار عضو + LED + بحث ===== --}}
                    <div class="mb-3 rounded-2xl bg-white/5 border border-white/10 p-3">
                        <div class="flex items-center justify-between gap-3 flex-wrap">
                            <div class="flex items-center gap-2">
                                {{-- LED --}}
                                <span class="relative inline-flex h-3 w-3">
                                    <span class="absolute inline-flex h-full w-full rounded-full animate-ping opacity-40 {{ $ledClass }}"></span>
                                    <span class="relative inline-flex h-3 w-3 rounded-full {{ $ledClass }}"></span>
                                </span>

                                <div class="text-[12px] font-extrabold text-white">
                                    اختيار عضو
                                </div>

                                <div class="text-[11px] text-white/70">
                                    @if($led === 'excused_today')
                                        <span class="font-bold text-rose-200">غياب رسمي اليوم</span>
                                    @elseif($led === 'pending')
                                        <span class="font-bold text-amber-200">طلبات معلّقة</span>
                                    @else
                                        <span class="font-bold text-emerald-200">الوضع طبيعي</span>
                                    @endif
                                </div>
                            </div>

                            <div class="w-full sm:w-auto flex gap-2">
                                <input id="memberSearch" type="text" placeholder="ابحث بالاسم..."
                                       class="flex-1 sm:w-56 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-sky-500 focus:border-sky-500">
                                <select id="memberSwitch"
                                        class="flex-1 sm:w-64 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-sky-500 focus:border-sky-500">
                                    @foreach(($usersList ?? []) as $m)
                                        <option value="{{ route('superadmin.absences.member', $m->id) }}"
                                                data-name="{{ strtolower($m->name ?: $m->username) }}"
                                                @selected($m->id == $user->id)>
                                            {{ $m->name ?: ('@'.$m->username) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mt-2 text-[10px] text-white/70">
                            عند تغيير العضو سيتم الانتقال تلقائيًا مع الحفاظ على (من/إلى).
                        </div>
                    </div>
                    {{-- ===== END ADD ===== --}}

                    <form method="GET" action="{{ route('superadmin.absences.member', $user->id) }}"
                          class="grid grid-cols-1 sm:grid-cols-3 gap-2 items-end">
                        <div>
                            <label class="block text-[11px] font-semibold text-white/80 mb-1">من</label>
                            <input type="date" name="from" value="{{ $from }}"
                                   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-sky-500 focus:border-sky-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-semibold text-white/80 mb-1">إلى</label>
                            <input type="date" name="to" value="{{ $to }}"
                                   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-sky-500 focus:border-sky-500">
                        </div>
                        <div class="flex gap-2">
                            <button type="submit"
                                    class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl
                                           bg-sky-600 hover:bg-sky-500 text-white font-extrabold text-sm
                                           shadow-lg shadow-sky-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>

                    {{-- Key / Guide --}}
                    <div class="mt-3 rounded-2xl bg-white/5 border border-white/10 p-3 text-[12px] text-white/80">
                        <div class="font-extrabold text-sm flex items-center gap-2 mb-2">
                            <i class="fa-solid fa-compass text-sky-200"></i>
                            <span>مفتاح الإرشاد</span>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                            <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-[11px] text-emerald-100/80">present</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-[11px] text-amber-100/80">absent_with_excuse</div>
                            </div>
                            <div class="rounded-xl border border-rose-500/25 bg-rose-500/10 px-3 py-2">
                                <div class="font-bold text-rose-100">غياب بدون عذر</div>
                                <div class="text-[11px] text-rose-100/80">absent_without_excuse</div>
                            </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-violet-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 rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-[11px] text-white/70">
                        فترة العرض: <span class="font-extrabold text-white">{{ $from }}</span> → <span class="font-extrabold text-white">{{ $to }}</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- KPI Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-6 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">{{ $stats['present'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-amber-200/70 dark:border-amber-800/60 bg-amber-50/80 dark:bg-amber-900/20 p-4 shadow">
            <div class="text-[11px] font-bold text-amber-700/80 dark:text-amber-200/80">غياب بعذر</div>
            <div class="mt-1 text-2xl font-extrabold text-amber-900 dark:text-amber-100">{{ $stats['excused'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-rose-200/70 dark:border-rose-800/60 bg-rose-50/80 dark:bg-rose-900/20 p-4 shadow">
            <div class="text-[11px] font-bold text-rose-700/80 dark:text-rose-200/80">غياب بدون عذر</div>
            <div class="mt-1 text-2xl font-extrabold text-rose-900 dark:text-rose-100">{{ $stats['noexcuse'] ?? 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">{{ $stats['approved'] ?? 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">{{ $stats['pending'] ?? 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">{{ $stats['rejected'] ?? 0 }}</div>
        </div>
    </div>

    {{-- CARDS VIEW --}}
    <div id="cardsView" class="space-y-6">

        {{-- Absences Cards --}}
        <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">
                <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="p-4 sm:p-6">
                @if($absences->isEmpty())
                    <div class="text-center text-sm text-slate-500 dark:text-slate-400 py-10">لا يوجد غيابات ضمن الفترة.</div>
                @else
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                        @foreach($absences as $a)
                            @php
                                $badge = $a->status === 'approved' ? 'emerald' : ($a->status === 'pending' ? 'amber' : 'rose');
                                $badgeText = $a->status === 'approved' ? 'معتمد' : ($a->status === 'pending' ? 'معلّق' : 'مرفوض');
                            @endphp
                            <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-4">
                                <div class="flex items-start justify-between gap-3">
                                    <div>
                                        <div class="text-sm font-extrabold text-slate-900 dark:text-white">
                                            {{ Carbon::parse($a->from_date)->toDateString() }} → {{ Carbon::parse($a->to_date)->toDateString() }}
                                        </div>
                                        <div class="text-[12px] text-slate-600 dark:text-slate-300 mt-2 leading-relaxed">
                                            {{ $a->excuse_reason }}
                                        </div>
                                    </div>
                                    <span class="text-[11px] px-3 py-1.5 rounded-xl border
                                                 {{ $badge==='emerald' ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-500/20' : '' }}
                                                 {{ $badge==='amber'   ? 'bg-amber-500/10 text-amber-700 dark:text-amber-200 border-amber-500/20' : '' }}
                                                 {{ $badge==='rose'    ? 'bg-rose-500/10 text-rose-700 dark:text-rose-200 border-rose-500/20' : '' }}">
                                        {{ $badgeText }}
                                    </span>
                                </div>
                                <div class="mt-3 text-[11px] text-slate-500 dark:text-slate-400">
                                    ID: {{ $a->id }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Evaluations Cards --}}
        <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">
                <div class="text-sm font-extrabold text-slate-900 dark:text-white">تقييمات الحضور</div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">سجل حضور/غياب حسب جدول Evaluation.</div>
            </div>
            <div class="p-4 sm:p-6">
                @if($evaluations->isEmpty())
                    <div class="text-center text-sm text-slate-500 dark:text-slate-400 py-10">لا يوجد تقييمات ضمن الفترة.</div>
                @else
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                        @foreach($evaluations as $e)
                            @php
                                $st = $e->attendance_status;
                                $color = $st==='present' ? 'emerald' : ($st==='absent_with_excuse' ? 'amber' : 'rose');
                                $txt = $st==='present' ? 'حضور' : ($st==='absent_with_excuse' ? 'غياب بعذر' : 'غياب بدون عذر');
                            @endphp
                            <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-4">
                                <div class="flex items-center justify-between gap-3">
                                    <div class="font-extrabold text-slate-900 dark:text-white">
                                        {{ Carbon::parse($e->evaluation_date)->toDateString() }}
                                    </div>
                                    <span class="text-[11px] px-3 py-1.5 rounded-xl border
                                                 {{ $color==='emerald' ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-500/20' : '' }}
                                                 {{ $color==='amber'   ? 'bg-amber-500/10 text-amber-700 dark:text-amber-200 border-amber-500/20' : '' }}
                                                 {{ $color==='rose'    ? 'bg-rose-500/10 text-rose-700 dark:text-rose-200 border-rose-500/20' : '' }}">
                                        {{ $txt }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>

    {{-- TABLE VIEW --}}
    <div id="tableView" class="hidden space-y-6">

        {{-- Absences Table --}}
        <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">
                <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="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($absences 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">
                                    {{ Carbon::parse($a->from_date)->toDateString() }} → {{ Carbon::parse($a->to_date)->toDateString() }}
                                </td>
                                <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                    {{ $a->status }}
                                </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>

        {{-- Evaluations Table --}}
        <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">
                <div class="text-sm font-extrabold text-slate-900 dark:text-white">جدول التقييمات</div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">حضور/غياب حسب Evaluation.</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>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                        @forelse($evaluations as $e)
                            <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">
                                    {{ Carbon::parse($e->evaluation_date)->toDateString() }}
                                </td>
                                <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                    {{ $e->attendance_status }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="2" class="px-4 py-10 text-center text-slate-500 dark:text-slate-400">
                                    لا يوجد تقييمات ضمن الفترة.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

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

</div>

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

    function setMode(mode){
        const isCards = mode === 'cards';
        if (cards) cards.classList.toggle('hidden', !isCards);
        if (table) table.classList.toggle('hidden', isCards);

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

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

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

    setMode(localStorage.getItem('abs_member_view') || 'cards');

    // ===== ADD: member switch + keep from/to =====
    const sw = document.getElementById('memberSwitch');
    const search = document.getElementById('memberSearch');

    if (search && sw) {
        search.addEventListener('input', () => {
            const q = (search.value || '').trim().toLowerCase();
            Array.from(sw.options).forEach(opt => {
                const name = (opt.dataset.name || '').toLowerCase();
                opt.hidden = q !== '' && !name.includes(q);
            });
        });
    }

    if (sw) {
        sw.addEventListener('change', () => {
            const url = new URL(sw.value, window.location.origin);
            const params = new URLSearchParams(window.location.search);

            if (params.get('from')) url.searchParams.set('from', params.get('from'));
            if (params.get('to'))   url.searchParams.set('to', params.get('to'));

            window.location.href = url.toString();
        });
    }
    // ===== END ADD =====
});
</script>
@endsection