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

@section('title', 'متابعة الضيوف')
@section('page-title', '🎙️ متابعة الضيوف — Guests Monitor')

@section('content')
@php
    $statusLabels = [
        'pending'   => 'بانتظار المراجعة',
        'confirmed' => 'تمت الموافقة',
        'rejected'  => 'مرفوض',
        'completed' => 'تم تنفيذ الاستضافة',
    ];

    $statusColors = [
        'pending'   => 'bg-amber-50 text-amber-700 border-amber-300 dark:bg-amber-900/40 dark:text-amber-100 dark:border-amber-500/60',
        'confirmed' => 'bg-sky-50 text-sky-700 border-sky-300 dark:bg-sky-900/40 dark:text-sky-100 dark:border-sky-500/60',
        'rejected'  => 'bg-rose-50 text-rose-700 border-rose-300 dark:bg-rose-900/40 dark:text-rose-100 dark:border-rose-500/60',
        'completed' => 'bg-emerald-50 text-emerald-700 border-emerald-300 dark:bg-emerald-900/40 dark:text-emerald-100 dark:border-emerald-500/60',
    ];

    $totalAll       = $stats['total_all']        ?? 0;
    $pendingCount   = $stats['status_pending']   ?? 0;
    $confirmedCount = $stats['status_confirmed'] ?? 0;
    $rejectedCount  = $stats['status_rejected']  ?? 0;
    $completedCount = $stats['status_completed'] ?? 0;

    $typeOrigin      = $stats['type_origin']         ?? 0;
    $typeMemberReq   = $stats['type_member_request'] ?? 0;
    $hostMale        = $stats['host_male']   ?? 0;
    $hostFemale      = $stats['host_female'] ?? 0;
    $todayGuests     = $stats['today_guests'] ?? 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/30 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-10 w-44 h-44 rounded-full bg-emerald-300/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-8 w-52 h-52 rounded-full bg-violet-400/20 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-emerald-50 text-emerald-700 text-[11px] font-medium dark:bg-emerald-500/15 dark:text-emerald-200">
                        <i class="fa-solid fa-user-tie 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-3 lg:grid-cols-6 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="{{ $dateFrom }}"
                               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="{{ $dateTo }}"
                               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>
                            @foreach($statusLabels as $key => $label)
                                <option value="{{ $key }}" {{ $status === $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </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="request_type"
                                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="origin" {{ $requestType === 'origin' ? 'selected' : '' }}>مبادرة من الإدارة</option>
                            <option value="member_request" {{ $requestType === 'member_request' ? '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="host_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" {{ $hostGender === 'male' ? 'selected' : '' }}>مشرف (ذكور)</option>
                            <option value="female" {{ $hostGender === 'female' ? 'selected' : '' }}>مشرفة (إناث)</option>
                        </select>
                    </div>

                    {{-- بحث عام --}}
                    <div class="flex flex-col gap-1 col-span-2 sm:col-span-3 lg:col-span-2">
                        <label class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">بحث بالضيف / العنوان / المستضيف</label>
                        <input type="text" name="search" value="{{ $search }}"
                               placeholder="مثال: ضيف إعلامي / د. أحمد / رولا / سيف..."
                               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-violet-500/90 hover:bg-violet-500 text-xs sm:text-sm font-medium text-white
                                       shadow-md shadow-violet-400/40">
                            <i class="fa-solid fa-magnifying-glass text-[10px] sm:text-xs"></i>
                            <span>تطبيق الفلاتر</span>
                        </button>

                        <a href="{{ route('advisor.monitor.guests') }}"
                           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">{{ $totalAll }}</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-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">إجمالي الضيوف</span>
                    <i class="fa-solid fa-users-viewfinder text-[12px] text-emerald-300"></i>
                </div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-300">
                    {{ $totalAll }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-slate-300">
                    كل الضيوف المجدولين ضمن مجال التاريخ المحدد.
                </p>
            </div>

            {{-- ضيوف اليوم --}}
            <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-calendar-day 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">
                    {{ $todayGuests }}
                </div>
                <p class="mt-1 text-[10px] sm:text-[11px] text-emerald-900/70 dark:text-emerald-100/80">
                    عدد الضيوف المجدولين لتاريخ اليوم.
                </p>
            </div>

            {{-- حسب نوع المصدر --}}
            <div class="rounded-2xl bg-gradient-to-br from-sky-50 via-white to-sky-50 border border-sky-200 shadow-sm p-3 sm:p-4
                        dark:from-slate-900 dark:to-sky-950/30 dark:border-sky-500/40">
                <div class="flex items-center justify-between gap-2 mb-1">
                    <span class="text-[11px] sm:text-xs text-sky-900 dark:text-sky-100">مصدر الضيف</span>
                    <i class="fa-solid fa-diagram-project text-[12px] text-sky-500 dark:text-sky-300"></i>
                </div>
                <div class="space-y-0.5 text-[10px] sm:text-[11px] text-slate-700 dark:text-slate-200">
                    <div class="flex items-center justify-between gap-2">
                        <span>مبادرة من الإدارة</span>
                        <span class="font-semibold text-sky-700 dark:text-sky-200">
                            {{ $typeOrigin }}
                        </span>
                    </div>
                    <div class="flex items-center justify-between gap-2">
                        <span>ترشيحات من الأعضاء</span>
                        <span class="font-semibold text-sky-700 dark:text-sky-200">
                            {{ $typeMemberReq }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- جنس المستضيفين --}}
            <div class="rounded-2xl bg-gradient-to-br from-rose-50 via-white to-indigo-50 border border-rose-200/80 shadow-sm p-3 sm:p-4
                        dark:from-slate-900 dark:to-rose-950/40 dark:border-rose-500/60">
                <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-group text-[12px] text-rose-500 dark:text-rose-300"></i>
                </div>
                <div class="space-y-0.5 text-[10px] sm:text-[11px] text-slate-700 dark:text-slate-200">
                    <div class="flex items-center justify-between gap-2">
                        <span>مشرفين ذكور</span>
                        <span class="font-semibold text-rose-700 dark:text-rose-200">
                            {{ $hostMale }}
                        </span>
                    </div>
                    <div class="flex items-center justify-between gap-2">
                        <span>مشرفات إناث</span>
                        <span class="font-semibold text-indigo-700 dark:text-indigo-200">
                            {{ $hostFemale }}
                        </span>
                    </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/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>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 bg-white/90 dark:divide-slate-700 dark:bg-slate-950/40">
                        @forelse($guests as $guest)
                            @php
                                $statusKey = $guest->status ?? 'pending';
                                $label     = $statusLabels[$statusKey] ?? $statusKey;
                                $color     = $statusColors[$statusKey] ?? $statusColors['pending'];

                                $dateStr = $guest->scheduled_date
                                    ? \Carbon\Carbon::parse($guest->scheduled_date)->locale('ar')->isoFormat('D MMM YYYY')
                                    : 'غير محدد';

                                $timeStr = $guest->scheduled_time
                                    ? \Carbon\Carbon::parse($guest->scheduled_time)->format('H:i')
                                    : '--:--';

                                $duration = '';
                                if (!empty($guest->duration_minutes)) {
                                    $duration = $guest->duration_minutes . ' دقيقة';
                                }

                                $reqLabel = match ($guest->request_type) {
                                    'origin'         => 'مبادرة من الإدارة',
                                    'member_request' => 'ترشيح من عضو',
                                    default          => 'غير محدد',
                                };

                                $hostBadge = $guest->host_gender === 'female'
                                    ? 'bg-fuchsia-500/10 text-fuchsia-700 border-fuchsia-400/60 dark:bg-fuchsia-500/15 dark:text-fuchsia-100 dark:border-fuchsia-400/60'
                                    : 'bg-sky-500/10 text-sky-700 border-sky-400/60 dark:bg-sky-500/15 dark:text-sky-100 dark:border-sky-400/60';

                                $hasProof     = !empty($guest->proof_image) || !empty($guest->proof_uploaded_at);
                                $hasExecNotes = !empty($guest->execution_notes);

                                $guestNames = $guest->guest_participants_list ?? [];
                                $hostNames  = $guest->host_participants_list  ?? [];
                            @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 whitespace-nowrap">
                                    <div class="flex flex-col gap-0.5">
                                        <span class="font-semibold text-[11px] sm:text-xs text-slate-900 dark:text-white">
                                            {{ $dateStr }}
                                        </span>
                                        <span class="text-[10px] text-slate-500 dark:text-slate-300">
                                            الساعة {{ $timeStr }}
                                        </span>
                                        @if($duration)
                                            <span class="text-[10px] text-slate-400 dark:text-slate-400">
                                                المدة المتوقعة: {{ $duration }}
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                {{-- الضيف / الجلسة --}}
                                <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 line-clamp-2">
                                            {{ $guest->title ?? 'جلسة بدون عنوان' }}
                                        </span>

                                        @if($guest->guest_name)
                                            <span class="text-[10px] text-slate-600 dark:text-slate-200">
                                                الضيف: <span class="font-semibold">{{ $guest->guest_name }}</span>
                                            </span>
                                        @endif

                                        @if($guest->guest_contact)
                                            <span class="text-[10px] text-slate-500 dark:text-slate-300">
                                                وسيلة التواصل: {{ $guest->guest_contact }}
                                            </span>
                                        @endif

                                        @if($guest->description)
                                            <span class="text-[10px] text-slate-400 dark:text-slate-400 line-clamp-2">
                                                {{ $guest->description }}
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                {{-- المستضيف --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <div class="flex flex-col gap-0.5 text-[10px] sm:text-[11px]">
                                        <span class="font-semibold text-slate-800 dark:text-slate-100">
                                            {{ $guest->host_name ?? 'لم يحدد مستضيف' }}
                                        </span>
                                        @if($guest->host_username)
                                            <span class="text-slate-500 dark:text-slate-300">
                                                @{{ $guest->host_username }}
                                            </span>
                                        @endif

                                        @if($guest->host_name)
                                            <span class="inline-flex items-center gap-1 w-fit mt-0.5 px-2 py-0.5 rounded-full border {{ $hostBadge }}">
                                                @if($guest->host_gender === 'female')
                                                    <i class="fa-solid fa-venus text-[9px]"></i>
                                                    <span>مشرفة</span>
                                                @else
                                                    <i class="fa-solid fa-mars text-[9px]"></i>
                                                    <span>مشرف</span>
                                                @endif
                                            </span>
                                        @endif

                                        @if($guest->creator_name && $guest->creator_name !== $guest->host_name)
                                            <span class="text-[10px] text-slate-400 dark:text-slate-400 mt-0.5">
                                                مُقدَّم من: {{ $guest->creator_name }}
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                {{-- المصدر --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top">
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] sm:text-[11px] border
                                        {{ $guest->request_type === 'member_request'
                                            ? 'bg-indigo-500/10 text-indigo-700 border-indigo-400/60 dark:bg-indigo-500/15 dark:text-indigo-100 dark:border-indigo-400/60'
                                            : 'bg-emerald-500/10 text-emerald-700 border-emerald-400/60 dark:bg-emerald-500/15 dark:text-emerald-100 dark:border-emerald-400/60' }}">
                                        @if($guest->request_type === 'member_request')
                                            <i class="fa-solid fa-user-tag text-[10px]"></i>
                                        @else
                                            <i class="fa-solid fa-shield-heart text-[10px]"></i>
                                        @endif
                                        <span>{{ $reqLabel }}</span>
                                    </span>
                                </td>

                                {{-- التنفيذ والمشاركون --}}
                                <td class="px-2 sm:px-3 py-2.5 align-top text-[10px] sm:text-[11px]">
                                    <div class="space-y-0.5">
                                        {{-- حالة الإثبات --}}
                                        @if($hasProof)
                                            <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-700 border border-emerald-400/60 dark:bg-emerald-500/15 dark:text-emerald-100 dark:border-emerald-400/60">
                                                <i class="fa-solid fa-circle-check text-[9px]"></i>
                                                <span>إثبات مرفوع</span>
                                            </div>
                                        @else
                                            <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 border border-slate-300 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-600">
                                                <i class="fa-regular fa-circle text-[9px]"></i>
                                                <span>لا يوجد إثبات بعد</span>
                                            </div>
                                        @endif

                                        @if($guest->proof_uploaded_at)
                                            <div class="text-slate-500 dark:text-slate-300">
                                                تم الرفع:
                                                {{ \Carbon\Carbon::parse($guest->proof_uploaded_at)->locale('ar')->isoFormat('D MMM, h:mm a') }}
                                            </div>
                                        @endif

                                        @if($hasExecNotes)
                                            <div class="text-slate-500 dark:text-slate-300 line-clamp-2">
                                                ملاحظات التنفيذ:
                                                <span class="text-slate-600 dark:text-slate-200">
                                                    {{ $guest->execution_notes }}
                                                </span>
                                            </div>
                                        @endif

                                        @if($guest->rejection_reason && $guest->status === 'rejected')
                                            <div class="text-rose-600 dark:text-rose-300 line-clamp-2">
                                                سبب الرفض:
                                                <span class="font-semibold">{{ $guest->rejection_reason }}</span>
                                            </div>
                                        @endif

                                        @if($guest->admin_notes && $guest->status !== 'rejected')
                                            <div class="text-[10px] text-slate-500 dark:text-slate-300 line-clamp-2">
                                                ملاحظات الإدارة:
                                                <span class="text-slate-700 dark:text-slate-100">
                                                    {{ $guest->admin_notes }}
                                                </span>
                                            </div>
                                        @endif

                                        {{-- المشاركون في القيست --}}
                                        @if(!empty($hostNames) || !empty($guestNames))
                                            <div class="mt-1.5 pt-1.5 border-t border-dashed border-slate-200 dark:border-slate-700 space-y-1">
                                                <div class="flex items-center gap-1 text-[10px] font-semibold text-slate-700 dark:text-slate-100">
                                                    <i class="fa-solid fa-users-line text-[9px] text-emerald-500"></i>
                                                    <span>المشاركون في القيست</span>
                                                </div>

                                                @if(!empty($hostNames))
                                                    <div class="flex items-start gap-1.5">
                                                        <span class="mt-0.5 text-[9px] text-sky-500">
                                                            <i class="fa-solid fa-user-tie"></i>
                                                        </span>
                                                        <div class="flex flex-wrap gap-1">
                                                            @foreach($hostNames as $name)
                                                                <span class="px-2 py-0.5 rounded-full bg-sky-500/8 text-sky-700 border border-sky-300/60 dark:bg-sky-500/10 dark:text-sky-100 dark:border-sky-500/50 text-[10px]">
                                                                    {{ $name }}
                                                                </span>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif

                                                @if(!empty($guestNames))
                                                    <div class="flex items-start gap-1.5">
                                                        <span class="mt-0.5 text-[9px] text-amber-500">
                                                            <i class="fa-solid fa-user"></i>
                                                        </span>
                                                        <div class="flex flex-wrap gap-1">
                                                            @foreach($guestNames as $name)
                                                                <span class="px-2 py-0.5 rounded-full bg-amber-500/8 text-amber-700 border border-amber-300/60 dark:bg-amber-500/10 dark:text-amber-100 dark:border-amber-500/50 text-[10px]">
                                                                    {{ $name }}
                                                                </span>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </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] {{ $color }}">
                                        @if($statusKey === 'completed')
                                            <i class="fa-solid fa-circle-check text-[10px]"></i>
                                        @elseif($statusKey === 'confirmed')
                                            <i class="fa-solid fa-badge-check text-[10px]"></i>
                                        @elseif($statusKey === 'rejected')
                                            <i class="fa-solid fa-circle-xmark text-[10px]"></i>
                                        @else
                                            <i class="fa-solid fa-hourglass-half text-[10px]"></i>
                                        @endif
                                        <span>{{ $label }}</span>
                                    </span>

                                    @if($guest->reviewed_at)
                                        <div class="mt-1 text-[9px] text-slate-500 dark:text-slate-400">
                                            آخر مراجعة:
                                            {{ \Carbon\Carbon::parse($guest->reviewed_at)->locale('ar')->isoFormat('D MMM, h:mm a') }}
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" 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">
                {{ $guests->links() }}
            </div>
        </div>
    </div>
</div>
@endsection