@extends('layouts.member')
@section('title','متابعة حالة طلبات حذف اللايفات')

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

    $pendingCount  = $requests->where('status','pending')->count();
    $approvedCount = $requests->where('status','approved')->count();
    $rejectedCount = $requests->where('status','rejected')->count();
@endphp

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

    {{-- هيدر ملحمي --}}
    <section class="relative overflow-hidden rounded-2xl sm:rounded-3xl
                    bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                    border border-cyan-500/40 text-white shadow-2xl">
        <div class="pointer-events-none absolute -top-24 -left-16 w-64 h-64 rounded-full bg-cyan-500/25 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-20 w-72 h-72 rounded-full bg-emerald-500/25 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-5 space-y-2">
            <div class="flex flex-col gap-1">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                            bg-slate-900/70 border border-cyan-400/60 text-[10px] sm:text-[11px] font-semibold">
                    <i class="fa-solid fa-trash-can text-[10px] text-cyan-300"></i>
                    <span>نظام طلبات حذف اللايفات — لوحة العضو</span>
                </div>

                <h1 class="text-lg sm:text-2xl font-extrabold">
                    متابعة حالة طلبات الحذف
                </h1>

                <p class="text-[11px] sm:text-xs text-cyan-50/90 leading-relaxed">
                    هنا تشاهد جميع طلبات حذف اللايفات التي أرسلتها، مع حالة كل طلب:
                    <span class="font-semibold text-amber-200">قيد المراجعة</span>،
                    <span class="font-semibold text-emerald-200">موافق عليه</span>،
                    أو <span class="font-semibold text-rose-200">مرفوض</span>، بالإضافة إلى ملاحظات الإدارة إن وُجدت.
                </p>
            </div>
        </div>
    </section>

    {{-- كروت إحصائيات صغيرة --}}
    <section class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 p-3 shadow-sm">
            <div class="flex items-center justify-between gap-2">
                <div>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400">طلبات قيد المراجعة</p>
                    <p class="text-xl font-extrabold text-amber-600 dark:text-amber-300">{{ $pendingCount }}</p>
                </div>
                <div class="h-9 w-9 rounded-full bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
                    <i class="fa-solid fa-hourglass-half text-amber-500 text-sm"></i>
                </div>
            </div>
        </div>

        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 p-3 shadow-sm">
            <div class="flex items-center justify-between gap-2">
                <div>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400">طلبات تم قبولها</p>
                    <p class="text-xl font-extrabold text-emerald-600 dark:text-emerald-300">{{ $approvedCount }}</p>
                </div>
                <div class="h-9 w-9 rounded-full bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center">
                    <i class="fa-solid fa-circle-check text-emerald-500 text-sm"></i>
                </div>
            </div>
        </div>

        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 p-3 shadow-sm">
            <div class="flex items-center justify-between gap-2">
                <div>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400">طلبات مرفوضة</p>
                    <p class="text-xl font-extrabold text-rose-600 dark:text-rose-300">{{ $rejectedCount }}</p>
                </div>
                <div class="h-9 w-9 rounded-full bg-rose-50 dark:bg-rose-900/30 flex items-center justify-center">
                    <i class="fa-solid fa-circle-xmark text-rose-500 text-sm"></i>
                </div>
            </div>
        </div>
    </section>

    {{-- المحتوى الرئيسي --}}
    @if($requests->isEmpty())
        <section class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200 dark:border-slate-700 p-6 text-center text-sm text-slate-500 dark:text-slate-400">
            لم ترسل أي طلبات حذف حتى الآن.
            <br class="hidden sm:block">
            <span class="text-[11px] block mt-1 text-slate-400 dark:text-slate-500">
                يمكنك إرسال طلب جديد من صفحة "طلب حذف لايفاتك".
            </span>
        </section>
    @else
        {{-- Timeline للطلبات --}}
        <section class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 shadow-sm p-3 sm:p-4">
            <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-slate-50 mb-3">
                سجل طلباتك
            </h2>

            <div class="space-y-3 sm:space-y-4">
                @foreach($requests as $r)
                    @php
                        $date = $r->scheduled_date ?? '—';
                        $time = $r->scheduled_time ? Carbon::parse($r->scheduled_time)->format('H:i') : '—';
                        $created = $r->created_at ? Carbon::parse($r->created_at)->diffForHumans() : '';
                        $reviewedAt = $r->reviewed_at ? Carbon::parse($r->reviewed_at)->diffForHumans() : null;

                        $typeLabel = match($r->type) {
                            'guests' => 'قستات',
                            'tours'  => 'تحديات',
                            'both'   => 'كلاهما',
                            default  => $r->type,
                        };

                        $statusLabel = match($r->status) {
                            'pending'  => 'قيد المراجعة',
                            'approved' => 'تمت الموافقة والحذف',
                            'rejected' => 'مرفوض',
                            default    => $r->status,
                        };

                        $statusClass = match($r->status) {
                            'pending'  => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                            'approved' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                            'rejected' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                            default    => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
                        };

                        $statusIcon = match($r->status) {
                            'pending'  => 'fa-solid fa-hourglass-half',
                            'approved' => 'fa-solid fa-circle-check',
                            'rejected' => 'fa-solid fa-circle-xmark',
                            default    => 'fa-solid fa-circle-info',
                        };
                    @endphp

                    <article class="relative flex gap-3 sm:gap-4">
                        {{-- خط التايم لاين --}}
                        <div class="flex flex-col items-center">
                            <span class="w-3 h-3 rounded-full border-2 border-slate-200 dark:border-slate-700
                                         bg-white dark:bg-slate-900 mt-1 flex items-center justify-center">
                                <span class="w-2 h-2 rounded-full bg-slate-400 dark:bg-slate-500"></span>
                            </span>
                            <span class="flex-1 w-[2px] bg-slate-100 dark:bg-slate-800 mt-1"></span>
                        </div>

                        {{-- الكارد نفسه --}}
                        <div class="flex-1 rounded-2xl border border-slate-200 dark:border-slate-700
                                    bg-white dark:bg-slate-900 px-3 sm:px-4 py-3 shadow-sm">
                            <div class="flex items-center justify-between gap-2">
                                <div class="flex flex-col">
                                    <div class="text-[12px] sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                        لايف {{ $date }} • {{ $time }}
                                    </div>
                                    <div class="text-[11px] text-slate-500 dark:text-slate-400">
                                        النوع: {{ $typeLabel }} • الخانة: {{ $r->slot_label ?: '—' }}
                                    </div>
                                </div>

                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] sm:text-[11px] font-semibold {{ $statusClass }}">
                                    <i class="{{ $statusIcon }} text-[9px]"></i>
                                    {{ $statusLabel }}
                                </span>
                            </div>

                            @if($r->reason)
                                <div class="mt-2 text-[12px] text-slate-800 dark:text-slate-100">
                                    <span class="font-semibold">سبب الطلب:</span>
                                    {{ $r->reason }}
                                </div>
                            @endif

                            @if($r->review_note)
                                <div class="mt-1 text-[12px] text-slate-800 dark:text-slate-100">
                                    <span class="font-semibold">ملاحظة الإدارة:</span>
                                    {{ $r->review_note }}
                                </div>
                            @endif

                            <div class="mt-2 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 text-[11px] text-slate-500 dark:text-slate-400">
                                <span>
                                    <i class="fa-regular fa-clock text-[10px] ml-1"></i>
                                    أُرسِل: {{ $created }}
                                </span>
                                @if($reviewedAt)
                                    <span>
                                        <i class="fa-solid fa-scale-balanced text-[10px] ml-1"></i>
                                        تمّت المعالجة: {{ $reviewedAt }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </section>
    @endif
</div>
@endsection