@extends('layouts.superadmin')
@section('title', 'سجلات اللايفات')

@section('content')
@php
    use Illuminate\Support\Str;
    use Carbon\Carbon;
@endphp

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

    {{-- HERO / AERO --}}
    <div
        class="relative overflow-hidden rounded-3xl border border-sky-200/70 dark:border-sky-700/70
               bg-gradient-to-br from-sky-500 via-indigo-600 to-slate-900
               shadow-xl shadow-sky-500/30 dark:shadow-black/40 text-white px-4 sm:px-6 py-5 sm:py-6">

        {{-- طبقة زجاجية --}}
        <div class="absolute inset-0 bg-white/10 dark:bg-black/10 backdrop-blur-2xl pointer-events-none"></div>
        {{-- زخارف --}}
        <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-cyan-300/40 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-16 w-64 h-64 rounded-full bg-emerald-400/40 blur-3xl"></div>

        <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <div class="flex items-start gap-3 sm:gap-4">
                <div
                    class="w-11 h-11 sm:w-12 sm:h-12 rounded-2xl bg-black/25
                           border border-white/35 grid place-items-center shadow-lg shadow-black/40">
                    <i class="fa-solid fa-clock-rotate-left text-lg"></i>
                </div>
                <div class="space-y-1">
                    <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-0.5">
                        سجلات اللايفات
                    </h1>
                    <p class="text-xs sm:text-sm text-sky-50/90 leading-relaxed max-w-xl">
                        كل تغيير تم على اللايفات (إنشاء، تأكيد، عذر، حذف، تعديل نقاط وساعات)
                        في سجل واحد يمكن الرجوع له في أي وقت.
                    </p>
                </div>
            </div>

            <div class="flex flex-col items-start sm:items-end gap-2 text-xs sm:text-sm">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/25 border border-white/30">
                    <i class="fa-regular fa-calendar text-sky-50"></i>
                    <span class="font-medium">
                        الفترة الحالية:
                        <span class="font-semibold">{{ $from }} → {{ $to }}</span>
                    </span>
                </div>
                <p class="text-[10px] text-sky-100/80">
                    السجل يعرض العمليات حسب الفلاتر أدناه، مع دعم البحث بالمشرف أو صاحب اللايف.
                </p>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET"
          class="bg-white dark:bg-gray-900 rounded-2xl shadow-md shadow-slate-900/30
                 border border-gray-200 dark:border-gray-800
                 px-4 sm:px-6 py-4 sm:py-5 grid grid-cols-1 md:grid-cols-5 gap-3">

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">من تاريخ</label>
            <input type="date" name="from" value="{{ $from }}"
                   class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                          px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-sky-500">
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">إلى تاريخ</label>
            <input type="date" name="to" value="{{ $to }}"
                   class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                          px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-sky-500">
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">الحالة</label>
            <select name="status"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100">
                <option value="">الكل</option>
                <option value="scheduled"        {{ $status==='scheduled' ? 'selected' : '' }}>غير مؤكد</option>
                <option value="confirmed"        {{ $status==='confirmed' ? 'selected' : '' }}>مؤكد</option>
                <option value="missed_excuse"    {{ $status==='missed_excuse' ? 'selected' : '' }}>مع عذر</option>
                <option value="missed_no_excuse" {{ $status==='missed_no_excuse' ? 'selected' : '' }}>بدون عذر</option>
            </select>
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">نوع الإجراء</label>
            <select name="action"
                    class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                           px-3 py-2 text-sm text-gray-900 dark:text-gray-100">
                <option value="">الكل</option>
                <option value="created"        {{ $action==='created' ? 'selected' : '' }}>إنشاء</option>
                <option value="status_change"  {{ $action==='status_change' ? 'selected' : '' }}>تغيير حالة</option>
                <option value="deleted"        {{ $action==='deleted' ? 'selected' : '' }}>حذف</option>
            </select>
        </div>

        <div class="md:col-span-1 flex items-end gap-2">
            <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                           bg-sky-600 hover:bg-sky-700 text-white shadow-sm shadow-sky-500/30 w-full transition">
                <i class="fa-solid fa-magnifying-glass text-xs"></i>
                بحث
            </button>
        </div>

        <div class="md:col-span-2">
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                بحث بالعضو (صاحب اللايف)
            </label>
            <input type="text" name="member" value="{{ $member }}"
                   class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                          px-3 py-2 text-sm text-gray-900 dark:text-gray-100"
                   placeholder="الاسم أو اليوزر">
        </div>

        <div class="md:col-span-2">
            <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                بحث بالمنفّذ (المشرف / الإدارة)
            </label>
            <input type="text" name="actor" value="{{ $actor }}"
                   class="w-full rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700
                          px-3 py-2 text-sm text-gray-900 dark:text-gray-100"
                   placeholder="الاسم أو اليوزر">
        </div>
    </form>

    {{-- كروت السجلات --}}
    <div class="space-y-4">
        @forelse($logs as $log)
            @php
                $memberName = $log->member_name ?: $log->member_username;
                $actorName  = $log->actor_name ?: $log->actor_username;
                $statusLabel = $log->new_status ?? '-';
                $statusClass = match($log->new_status) {
                    'confirmed'        => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                    'missed_excuse'    => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                    'missed_no_excuse' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                    'scheduled'        => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100',
                    default            => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100',
                };

                $actionLabel = match($log->action) {
                    'created'       => 'إنشاء لايف',
                    'status_change' => 'تغيير حالة',
                    'deleted'       => 'حذف لايف',
                    default         => $log->action,
                };

                $note = $log->note ? Str::limit(strip_tags($log->note), 120) : null;

                $createdAt = Carbon::parse($log->created_at)->format('Y-m-d H:i');
                $liveTime  = substr((string)$log->scheduled_time, 0, 5);
            @endphp

            <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800
                        shadow-sm hover:shadow-md transition-shadow duration-150">
                {{-- هيدر الكرت --}}
                <div class="px-4 sm:px-5 py-3 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div class="flex items-center gap-2 sm:gap-3">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] sm:text-[11px]
                                     bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-200">
                            <i class="fa-regular fa-clock text-[10px]"></i>
                            <span>{{ $createdAt }}</span>
                        </span>
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] sm:text-[11px]
                                     bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-200">
                            <i class="fa-solid fa-bolt text-[10px]"></i>
                            <span>{{ $actionLabel }}</span>
                        </span>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] sm:text-[11px] {{ $statusClass }}">
                            حالة بعد الإجراء: {{ $statusLabel ?? '-' }}
                        </span>
                    </div>
                </div>

                {{-- جسم الكرت --}}
                <div class="px-4 sm:px-5 py-3.5 space-y-3">

                    {{-- العضو + تفاصيل اللايف --}}
                    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                        <div class="flex items-start gap-3">
                            <div class="w-9 h-9 rounded-full bg-sky-500/15 text-sky-600 dark:text-sky-300
                                        flex items-center justify-center text-xs">
                                <i class="fa-solid fa-user"></i>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $memberName }}
                                </div>
                                <div class="text-[11px] text-gray-500 dark:text-gray-400">
                                    لايف بتاريخ {{ $log->scheduled_date }}
                                    الساعة {{ $liveTime }}
                                    @if($log->is_sahra)
                                        <span class="text-amber-500 ml-1">🔥 سهرة</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="flex items-start gap-2 text-[11px] text-gray-600 dark:text-gray-300">
                            <i class="fa-solid fa-user-shield mt-[2px] text-xs text-gray-400"></i>
                            <div>
                                <div class="font-semibold">المنفّذ:</div>
                                <div>{{ $actorName ?: 'نظام / غير محدد' }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- النقاط والساعات --}}
                    <div class="flex flex-wrap items-center gap-2 text-[11px] sm:text-xs">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                     bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200">
                            <i class="fa-solid fa-stopwatch text-[10px]"></i>
                            <span>ساعات هذا اللايف: <span class="font-semibold">{{ $log->hours }}</span></span>
                        </span>

                        @if($log->points_delta > 0)
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200">
                                <i class="fa-solid fa-arrow-up text-[10px]"></i>
                                <span>تغيير النقاط: <span class="font-semibold">+{{ $log->points_delta }}</span></span>
                            </span>
                        @elseif($log->points_delta < 0)
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200">
                                <i class="fa-solid fa-arrow-down text-[10px]"></i>
                                <span>تغيير النقاط: <span class="font-semibold">{{ $log->points_delta }}</span></span>
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-gray-50 text-gray-600 dark:bg-gray-800/60 dark:text-gray-200">
                                <i class="fa-solid fa-minus text-[10px]"></i>
                                <span>لم يتم تعديل النقاط</span>
                            </span>
                        @endif

                        @if($log->old_status || $log->new_status)
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-slate-50 text-slate-700 dark:bg-slate-800/70 dark:text-slate-100">
                                <i class="fa-solid fa-right-left text-[10px]"></i>
                                <span>
                                    من
                                    <span class="font-semibold">{{ $log->old_status ?? '-' }}</span>
                                    إلى
                                    <span class="font-semibold">{{ $log->new_status ?? '-' }}</span>
                                </span>
                            </span>
                        @endif
                    </div>

                    {{-- الملاحظات --}}
                    <div class="pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                        <div class="text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">
                            ملاحظات / تفاصيل إضافية
                        </div>
                        <div class="text-[11px] sm:text-[12px] text-gray-700 dark:text-gray-200 leading-relaxed">
                            @if($note)
                                {{ $note }}
                            @else
                                <span class="text-gray-400 dark:text-gray-500">لا توجد ملاحظات مسجلة لهذا الإجراء.</span>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
        @empty
            <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-800 p-6 text-center">
                <p class="text-sm text-gray-600 dark:text-gray-300">
                    لا توجد سجلات ضمن الفلتر الحالي.
                </p>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($logs instanceof \Illuminate\Pagination\LengthAwarePaginator)
        <div class="pt-2">
            {{ $logs->links() }}
        </div>
    @endif

    {{-- فوتر ملحمي بسيط --}}
    <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-[11px] text-center text-gray-500 dark:text-gray-400">
        سجلات اللايفات — مرجع رسمي لكل إجراء يتم داخل <span class="font-semibold">غرفة الصقر</span> على حضور أعضاء
        <span class="font-semibold">فريق الوفاء الذهبي</span>.
    </div>

</div>
@endsection