{{-- resources/views/advisor/analytics/attendance.blade.php --}}
@extends('layouts.advisor')

@section('title', 'تحليلات الحضور والغياب')
@section('page-title', '📊 تحليلات الحضور والغياب')

@section('content')
@php
    $totalRecords      = $stats['total_records']      ?? 0;
    $presentDays       = $stats['present_days']       ?? 0;
    $excusedAbsences   = $stats['excused_absences']   ?? 0;
    $unexcusedAbsences = $stats['unexcused_absences'] ?? 0;
    $attendanceRate    = $stats['attendance_rate']    ?? 0;
    $absenceRate       = $stats['absence_rate']       ?? 0;
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6">

        {{-- هيدر ناعم --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-20 -right-10 w-48 h-48 rounded-full bg-sky-400/15 blur-3xl"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-50 text-sky-700 text-[11px] font-medium dark:bg-sky-500/15 dark:text-sky-200">
                        <i class="fa-solid fa-user-check text-[11px]"></i>
                        <span>لوحة مراقبة الالتزام — حضور & غياب</span>
                    </div>
                    <h1 class="text-lg sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        تحليلات الحضور والغياب في التيم
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 max-w-xl">
                        من هنا تتابع مستوى التزام الأعضاء: من يحافظ على الحضور؟ من يغيب بعذر؟ ومن يحتاج
                        زيارة لطيفة من المستشار ليذكّره بروح العائلة الذهبية 💛.
                    </p>
                </div>

                <div class="self-stretch sm:self-auto flex sm:block justify-end">
                    <div class="rounded-2xl bg-slate-900 text-slate-100 px-4 py-3 text-xs sm:text-sm shadow-md dark:bg-black/70">
                        <div class="text-[11px] text-slate-300 mb-1">المستشار المسؤول</div>
                        <div class="font-semibold text-sm sm:text-base">
                            {{ $advisor->name }}
                        </div>
                        <div class="text-[10px] text-slate-400 mt-1">
                            {{ now()->locale('ar')->timezone(config('app.timezone'))->isoFormat('dddd D MMM YYYY, h:mm a') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- فلاتر --}}
        <div class="rounded-3xl bg-white/95 border border-slate-200 shadow-sm p-4 sm:p-5 space-y-3 dark:bg-slate-900/90 dark:border-slate-700">
            <form method="GET" class="space-y-3">
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5 sm:gap-3">
                    {{-- من تاريخ --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">من تاريخ</label>
                        <input type="date" name="from" value="{{ $from }}"
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-xs sm:text-sm px-2.5 focus:outline-none focus:ring-1 focus:ring-sky-400/70 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                    </div>

                    {{-- إلى تاريخ --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">إلى تاريخ</label>
                        <input type="date" name="to" value="{{ $to }}"
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-xs sm:text-sm px-2.5 focus:outline-none focus:ring-1 focus:ring-sky-400/70 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                    </div>

                    {{-- حالة الحضور --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">نوع الحالة</label>
                        <select name="status"
                                class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-[11px] sm:text-xs px-2.5 focus:outline-none focus:ring-1 focus:ring-emerald-400/70 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                            <option value="">كل الحالات</option>
                            <option value="present" {{ $status === 'present' ? 'selected' : '' }}>حضور</option>
                            <option value="absent_with_excuse" {{ $status === 'absent_with_excuse' ? 'selected' : '' }}>غياب بعذر</option>
                            <option value="absent_without_excuse" {{ $status === 'absent_without_excuse' ? 'selected' : '' }}>غياب بدون عذر</option>
                        </select>
                    </div>

                    {{-- الجنس --}}
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">الجنس</label>
                        <select name="gender"
                                class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-[11px] sm:text-xs px-2.5 focus:outline-none focus:ring-1 focus:ring-emerald-400/70 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                            <option value="">الجميع</option>
                            <option value="male"   {{ $gender === 'male' ? 'selected' : '' }}>ذكور</option>
                            <option value="female" {{ $gender === 'female' ? 'selected' : '' }}>إناث</option>
                        </select>
                    </div>

                    {{-- بحث باسم العضو --}}
                    <div class="flex flex-col gap-1 col-span-2 sm:col-span-2">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">بحث باسم العضو / اليوزر</label>
                        <input type="text" name="user_search" value="{{ $userSearch }}"
                               placeholder="مثال: أحمد / سارة / ahmad.123"
                               class="h-9 sm:h-10 rounded-xl bg-slate-50 border border-slate-200 text-xs sm:text-sm px-2.5 focus:outline-none focus:ring-1 focus:ring-sky-400/70 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-50">
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-2 pt-1">
                    <div class="flex gap-2">
                        <button type="submit"
                                class="inline-flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-sky-500/90 hover:bg-sky-500 text-xs sm:text-sm font-medium text-white shadow-md shadow-sky-400/40">
                            <i class="fa-solid fa-magnifying-glass text-[10px] sm:text-xs"></i>
                            <span>تطبيق الفلاتر</span>
                        </button>

                        <a href="{{ route('advisor.analytics.attendance') }}"
                           class="inline-flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-[11px] sm:text-xs text-slate-700 border border-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-100 dark:border-slate-600">
                            <i class="fa-solid fa-rotate-left text-[10px] sm:text-xs"></i>
                            <span>إعادة ضبط</span>
                        </a>
                    </div>

                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                        مجموع سجلات الحضور/الغياب في الفترة:
                        <span class="font-semibold text-slate-900 dark:text-white">{{ $totalRecords }}</span>
                    </div>
                </div>
            </form>
        </div>

        {{-- كروت إحصائيات رئيسية --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
            <div class="rounded-2xl bg-gradient-to-br from-emerald-50 via-white to-emerald-50 border border-emerald-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:to-emerald-950/30 dark:border-emerald-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-emerald-900 dark:text-emerald-100">
                        أيام الحضور
                    </span>
                    <i class="fa-solid fa-user-check text-[12px] text-emerald-500 dark:text-emerald-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-200">
                    {{ $presentDays }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-emerald-900/70 dark:text-emerald-100/80">
                    كل يوم تم تسجيله كـ <span class="font-semibold">حضور</span> في الفترة المحددة.
                </p>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-amber-50 via-white to-amber-50 border border-amber-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:to-amber-950/30 dark:border-amber-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-amber-900 dark:text-amber-100">
                        غياب بعذر
                    </span>
                    <i class="fa-solid fa-user-clock text-[12px] text-amber-500 dark:text-amber-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-amber-700 dark:text-amber-200">
                    {{ $excusedAbsences }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-amber-900/70 dark:text-amber-100/80">
                    حالات غياب تم قبول عذرها من الإدارة / المشرفين.
                </p>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-rose-50 via-white to-rose-50 border border-rose-200 shadow-sm p-3 sm:p-4 dark:from-slate-900 dark:to-rose-950/30 dark:border-rose-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-rose-900 dark:text-rose-100">
                        غياب بدون عذر
                    </span>
                    <i class="fa-solid fa-user-xmark text-[12px] text-rose-500 dark:text-rose-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-rose-700 dark:text-rose-200">
                    {{ $unexcusedAbsences }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-rose-900/70 dark:text-rose-100/80">
                    هذه الفئة الأخطر، وغالباً تحتاج متابعة خاصة من المستشار.
                </p>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 border border-slate-700 shadow-sm p-3 sm:p-4 text-slate-100">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-slate-100">
                        نسبة الالتزام
                    </span>
                    <i class="fa-solid fa-gauge-high text-[12px] text-emerald-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-300">
                    {{ $attendanceRate }}%
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-300">
                    نسبة الحضور من إجمالي الأيام المسجلة.
                    <span class="block text-[10px] text-slate-400 mt-0.5">
                        نسبة الغياب (بعذر + بدون عذر): {{ $absenceRate }}%
                    </span>
                </p>
            </div>
        </div>

        {{-- جدول تفصيلي لكل عضو --}}
        <div class="rounded-3xl bg-white/95 border border-slate-200 shadow-sm p-4 sm:p-5 space-y-3 dark:bg-slate-900/95 dark:border-slate-700">
            <div class="flex items-center justify-between gap-2 mb-2 sm:mb-3">
                <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white">
                    🧾 ملخص الحضور والغياب لكل عضو
                </h2>
                <div class="text-[10px] sm:text-xs text-slate-500 dark:text-slate-300">
                    مرتبة حسب عدد الغيابات بدون عذر (من الأعلى للأقل)
                </div>
            </div>

            <div class="overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-700">
                <table class="min-w-full text-right text-[11px] sm:text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-900/95">
                        <tr>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">العضو</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">النوع</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">حضور</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">بعذر</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">بدون عذر</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">مستوى الخطورة</th>
                            <th class="px-2 sm:px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">آخر تقييم</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 bg-white/80 dark:divide-slate-700 dark:bg-slate-950/40">
                        @forelse($attendanceRows as $row)
                            @php
                                $total = $row->present_days + $row->excused_absences + $row->unexcused_absences;
                                $risk = 'low';
                                if ($row->unexcused_absences >= 10) {
                                    $risk = 'high';
                                } elseif ($row->unexcused_absences >= 5) {
                                    $risk = 'medium';
                                }

                                $riskLabel = match($risk) {
                                    'high'   => 'خطر عالي',
                                    'medium' => 'متوسط',
                                    default  => 'منخفض',
                                };

                                $riskClass = match($risk) {
                                    'high'   => 'bg-rose-500/10 text-rose-700 border-rose-400/70 dark:bg-rose-500/15 dark:text-rose-100 dark:border-rose-400/60',
                                    'medium' => 'bg-amber-500/10 text-amber-700 border-amber-400/70 dark:bg-amber-500/15 dark:text-amber-100 dark:border-amber-400/60',
                                    default  => 'bg-emerald-500/10 text-emerald-700 border-emerald-400/70 dark:bg-emerald-500/15 dark:text-emerald-100 dark:border-emerald-400/60',
                                };

                                $typeLabel = match($row->membership_status) {
                                    'beta'            => 'عضو بيتا',
                                    'official'        => 'عضو رسمي',
                                    'official-member' => 'عضو رسمي',
                                    'moderator'       => 'مشرف',
                                    default           => $row->membership_status ?? 'عضو',
                                };
                            @endphp
                            <tr class="hover:bg-slate-50/70 dark:hover:bg-slate-900/70">
                                {{-- العضو --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="flex flex-col gap-0.5">
                                        <span class="font-semibold text-[11px] sm:text-xs text-slate-900 dark:text-white">
                                            {{ $row->name ?? '—' }}
                                        </span>
                                        <span class="text-[10px] text-slate-500 dark:text-slate-400">
                                            رقم العضو: #{{ $row->user_id }}
                                        </span>
                                    </div>
                                </td>

                                {{-- النوع --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="space-y-0.5 text-[10px] sm:text-[11px] text-slate-700 dark:text-slate-200">
                                        <div>
                                            <span class="text-slate-400 dark:text-slate-400">الصفة: </span>
                                            <span>{{ $typeLabel }}</span>
                                        </div>
                                        <div>
                                            <span class="text-slate-400 dark:text-slate-400">الجنس: </span>
                                            <span>
                                                @if($row->gender === 'male')
                                                    ذكر
                                                @elseif($row->gender === 'female')
                                                    أنثى
                                                @else
                                                    غير محدد
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </td>

                                {{-- حضور --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-center text-[11px] sm:text-xs">
                                    <span class="inline-flex items-center justify-center min-w-[2.5rem] px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-700 border border-emerald-400/60 dark:bg-emerald-500/20 dark:text-emerald-100 dark:border-emerald-400/70">
                                        {{ $row->present_days }}
                                    </span>
                                </td>

                                {{-- بعذر --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-center text-[11px] sm:text-xs">
                                    <span class="inline-flex items-center justify-center min-w-[2.5rem] px-2 py-1 rounded-full bg-amber-500/10 text-amber-700 border border-amber-400/60 dark:bg-amber-500/20 dark:text-amber-100 dark:border-amber-400/70">
                                        {{ $row->excused_absences }}
                                    </span>
                                </td>

                                {{-- بدون عذر --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-center text-[11px] sm:text-xs">
                                    <span class="inline-flex items-center justify-center min-w-[2.5rem] px-2 py-1 rounded-full bg-rose-500/10 text-rose-700 border border-rose-400/60 dark:bg-rose-500/20 dark:text-rose-100 dark:border-rose-400/70">
                                        {{ $row->unexcused_absences }}
                                    </span>
                                </td>

                                {{-- مستوى الخطورة --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-center">
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full border text-[10px] sm:text-[11px] {{ $riskClass }}">
                                        @if($risk === 'high')
                                            <i class="fa-solid fa-triangle-exclamation text-[10px]"></i>
                                        @elseif($risk === 'medium')
                                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i>
                                        @else
                                            <i class="fa-solid fa-circle-check text-[10px]"></i>
                                        @endif
                                        <span>{{ $riskLabel }}</span>
                                    </span>
                                </td>

                                {{-- آخر تقييم --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-[10px] sm:text-[11px] text-slate-600 dark:text-slate-200">
                                    @if($row->last_evaluation_date)
                                        {{ \Carbon\Carbon::parse($row->last_evaluation_date)->locale('ar')->timezone(config('app.timezone'))->isoFormat('D MMM YYYY') }}
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 py-4 text-center text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                    لا يوجد سجلات حضور/غياب وفق الفلاتر الحالية.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- ترقيم الصفحات --}}
            <div class="pt-2">
                {{ $attendanceRows->links() }}
            </div>
        </div>

    </div>
</div>
@endsection