@extends('layouts.superadmin')

@section('title', '🏆 أرشيف الإنجازات الذهبية')
@section('page-title', '🏆 أرشيف الإنجازات الذهبية — Golden Achievements Archive')

@section('content')
<div
    x-data="{ tab: 'guests' }"
    class="min-h-screen bg-gradient-to-b from-amber-50 via-slate-50 to-emerald-50 dark:from-slate-950 dark:via-slate-900 dark:to-black py-6 sm:py-8"
>
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-5 sm:space-y-6">

        {{-- هيرو — Golden UL V4 Ultra --}}
        <div class="relative overflow-hidden rounded-3xl border border-amber-200/70 dark:border-amber-500/20
                    bg-gradient-to-br from-amber-50 via-amber-100 to-emerald-50
                    dark:from-slate-900 dark:via-slate-950 dark:to-black
                    shadow-xl shadow-amber-200/40 dark:shadow-black/60">
            {{-- جلو خلفي --}}
            <div class="pointer-events-none absolute -top-24 -left-16 w-52 h-52 rounded-full
                        bg-amber-400/25 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-32 -right-10 w-72 h-72 rounded-full
                        bg-emerald-400/25 blur-3xl"></div>

            <div class="relative px-4 sm:px-8 py-6 sm:py-8">
                <div class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6">
                    <div class="flex items-center gap-4">
                        <div class="h-14 w-14 rounded-2xl grid place-items-center
                                    bg-gradient-to-br from-amber-400 via-yellow-400 to-emerald-400
                                    shadow-lg shadow-amber-300/60">
                            <span class="text-3xl">🏆</span>
                        </div>
                        <div>
                            <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight
                                       text-slate-900 dark:text-amber-100">
                                أرشيف الإنجازات الذهبية
                            </h1>
                            <p class="mt-1 text-sm sm:text-base text-slate-700/90 dark:text-slate-300">
                                هنا يتم توثيق أقوى لايفات، أقوى بروأكتيف، أقوى أعضاء في كل شهر وسنة —
                                نظام مدوّن كامل لأرشفة إنجازات
                                <span class="font-semibold text-emerald-700 dark:text-emerald-300">
                                    جيش الوفاء الذهبي
                                </span>.
                            </p>
                        </div>
                    </div>

                    <div class="mt-2 md:mt-0 md:ml-auto flex flex-col items-stretch gap-2">
                        <div class="flex items-center gap-2 md:justify-end">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                         bg-emerald-100 text-emerald-800
                                         dark:bg-emerald-900/40 dark:text-emerald-200 border border-emerald-300/60">
                                أرشيف سنة {{ $year }}
                            </span>
                        </div>
                        <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 md:text-right">
                            كل تبويب بالأسفل يركّز على نوع معيّن من الإنجازات
                            (قيستات، إثباتات، أنشطة لايف، بروأكتيف، طلبات لايف… إلخ)
                            مع عرضها شهريًا بشكل مرتب.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabs Head --}}
        <div class="overflow-x-auto">
            <div class="inline-flex items-center gap-2 rounded-2xl bg-white/90 dark:bg-slate-900/90
                        border border-slate-200/80 dark:border-slate-700 px-2 py-2
                        shadow-md shadow-slate-200/50 dark:shadow-black/60">
                @php
                    $tabs = [
                        'guests'   => 'القيستات (Guests)',
                        'submits'  => 'إثباتات الضيوف (Guest Submissions)',
                        'details'  => 'تفاصيل الضيوف (Guest Details)',
                        'activities' => 'الأنشطة المباشرة (Live Activities)',
                        'streams' => 'ليفات البث المباشر (Live Streams)',
                        'requests' => 'طلبات اللايف والجولات',
                        'proactive' => 'بروأكتيف (ProActive)'
                    ];
                @endphp

                @foreach($tabs as $key => $label)
                    <button
                        type="button"
                        @click="tab = '{{ $key }}'"
                        :class="tab === '{{ $key }}'
                            ? 'bg-gradient-to-r from-amber-400 via-yellow-400 to-emerald-400 text-slate-900 shadow-md'
                            : 'bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/80'"
                        class="px-3 sm:px-4 py-1.5 rounded-xl text-xs sm:text-sm font-semibold whitespace-nowrap
                               border border-transparent transition-all duration-150"
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </div>
        </div>

        {{-- تبويب: القيستات (guests) --}}
        <div x-show="tab === 'guests'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md shadow-slate-200/60 dark:shadow-black/60 p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    القيستات الرسمية للأعضاء (Guests Sessions)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    يعرض كل جلسة قيست تم تنفيذها واعتمادها مع تاريخها، المضيف، عدد الساعات الفعلية،
                    وحالة المراجعة من الإدارة العليا.
                </p>
            </div>

            @forelse($guestSessions as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                            shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-amber-50 to-emerald-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">📅</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} جلسة
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $g)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $g->title ?: 'جلسة بدون عنوان' }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-emerald-100 text-emerald-800
                                                     dark:bg-emerald-900/40 dark:text-emerald-200">
                                            {{ $g->user_name ?? 'عضو غير معروف' }}
                                            — {{ $g->rank ?? 'member' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $g->description ?: 'لا يوجد وصف للجلسة.' }}
                                    </p>

                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $g->scheduled_date }} — {{ $g->scheduled_time }}</span>
                                        @if($g->actual_hours)
                                            <span>⏱️ ساعات فعلية: {{ $g->actual_hours }}</span>
                                        @endif
                                        @if($g->earned_points)
                                            <span>🌟 نقاط مكتسبة: {{ $g->earned_points }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $g->status === 'completed',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => $g->status === 'pending',
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => $g->status === 'rejected',
                                                    'bg-slate-100 text-slate-800 dark:bg-slate-800/60 dark:text-slate-100' => ! in_array($g->status, ['completed','pending','rejected']),
                                                ])">
                                        حالة: {{ $g->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد جلسات قيست مكتملة لهذه السنة حتى الآن.
                </div>
            @endforelse
        </div>

        {{-- تبويب: إثباتات الضيوف --}}
        <div x-show="tab === 'submits'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    إثباتات الضيوف (Guest Submissions)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    هنا يتم توثيق كل إثبات تم رفعه بخصوص ضيوف اللايفات: تاريخ النشاط، الساعات الفعلية،
                    حالة المراجعة، والنقاط الإضافية التي منحتها الإدارة.
                </p>
            </div>

            @forelse($guestSubmissions as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-emerald-50 to-sky-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">🧾</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} إثبات
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $s)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            إثبات نشاط ضيوف — {{ $s->activity_date }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-sky-100 text-sky-800
                                                     dark:bg-sky-900/50 dark:text-sky-200">
                                            {{ $s->user_name ?? 'مُقدِّم غير معروف' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $s->guest_description ?: 'لا يوجد وصف مخصص للنشاط.' }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>⏱️ ساعات فعلية: {{ $s->actual_hours }}</span>
                                        <span>🧑‍🤝‍🧑 عدد الضيوف: {{ is_array(json_decode($s->guest_participants, true)) ? count(json_decode($s->guest_participants, true)) : 0 }}</span>
                                        @if($s->bonus_points)
                                            <span>🌟 نقاط إضافية: {{ $s->bonus_points }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $s->status === 'approved',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => $s->status === 'pending',
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => $s->status === 'rejected',
                                                 ])">
                                        حالة: {{ $s->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد إثباتات ضيوف مسجلة لهذه السنة.
                </div>
            @endforelse
        </div>

        {{-- تبويب: تفاصيل الضيوف --}}
        <div x-show="tab === 'details'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    تفاصيل الضيوف المرتبطة بأنشطة لايف (Guest Details)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    هذا القسم يوضح التفاصيل الدقيقة لكل ضيف شارك في نشاط لايف معيّن:
                    من العضو الذي استضافه، الساعات الفعلية، والملاحظات التي تمت كتابتها عنه.
                </p>
            </div>

            @forelse($guestDetails as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-sky-50 to-emerald-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">👥</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} ضيف
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $d)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $d->guest_name }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-violet-100 text-violet-800
                                                     dark:bg-violet-900/50 dark:text-violet-200">
                                            المستضيف: {{ $d->user_name ?? 'غير معروف' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $d->activity_notes ?: $d->guest_description ?: 'لا توجد ملاحظات إضافية.' }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $d->scheduled_date }} — {{ $d->scheduled_time }}</span>
                                        @if($d->actual_hours)
                                            <span>⏱️ {{ $d->actual_hours }} ساعة فعلية</span>
                                        @endif
                                        @if($d->bonus_points)
                                            <span>🌟 مكافأة: {{ $d->bonus_points }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد تفاصيل ضيوف مسجلة لهذه السنة.
                </div>
            @endforelse
        </div>

        {{-- تبويب: الأنشطة المباشرة --}}
        <div x-show="tab === 'activities'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    الأنشطة المباشرة (Live Activities)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    جدول رسمي لكل الأنشطة المباشرة المجدولة (لايف، جولات، سهرات…) مع نوع النشاط،
                    التاريخ، المدة المقررة، وحالة المتابعة من الإدارة.
                </p>
            </div>

            @forelse($liveActivities as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-amber-50 to-slate-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">🔥</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                أنشطة شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} نشاط مباشر
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $a)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $a->title ?: 'نشاط بدون عنوان' }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-slate-100 text-slate-800
                                                     dark:bg-slate-800/70 dark:text-slate-100">
                                            النوع: {{ $a->activity_type_id }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $a->description ?: 'لا يوجد وصف مخصص لهذا النشاط.' }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $a->scheduled_date }} — {{ $a->scheduled_time }}</span>
                                        <span>⏱️ المدة: {{ $a->duration_hours }} ساعة و {{ $a->duration_minutes }} دقيقة</span>
                                        <span>👤 منظم: {{ $a->user_name ?? 'غير معروف' }}</span>
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $a->status === 'confirmed' || $a->status === 'scheduled',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => str_contains($a->status, 'pending'),
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => str_contains($a->status, 'absent') || str_contains($a->status, 'rejected'),
                                                 ])">
                                        حالة: {{ $a->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد أنشطة مباشرة مسجلة لهذه السنة.
                </div>
            @endforelse
        </div>

        {{-- تبويب: ليفات البث المباشر --}}
        <div x-show="tab === 'streams'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    ليفات البث المباشر (Live Streams)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    أرشيف لكل ليف تم تكليفه لعضو معيّن: وقت البث، مدته، نوعه (قيست/جولات)،
                    الحالة النهائية، والنقاط المكتسبة أو الأعذار المقدّمة.
                </p>
            </div>

            @forelse($liveStreams as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">📡</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                ليفات شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} ليف
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $ls)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $ls->title ?: 'ليف بدون عنوان' }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-emerald-100 text-emerald-800
                                                     dark:bg-emerald-900/40 dark:text-emerald-200">
                                            {{ $ls->user_name ?? 'عضو غير معروف' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $ls->description ?: 'لا يوجد وصف مفصل للبث.' }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $ls->scheduled_date }} — {{ $ls->scheduled_time }}</span>
                                        <span>⏱️ المدة المتوقعة: {{ $ls->duration_hours }} س / {{ $ls->duration_minutes }} د</span>
                                        @if($ls->actual_duration)
                                            <span>⏱️ المدة الفعلية: {{ $ls->actual_duration }} دقيقة</span>
                                        @endif
                                        <span>🎯 النوع: {{ $ls->type }}</span>
                                        @if($ls->points_earned)
                                            <span>🌟 نقاط: {{ $ls->points_earned }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $ls->status === 'confirmed',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => $ls->status === 'pending_proof' || $ls->status === 'pending_excuse',
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => str_contains($ls->status, 'missed') || str_contains($ls->status, 'rejected'),
                                                 ])">
                                        حالة: {{ $ls->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد ليفات مجدولة في هذا الأرشيف للسنة المحددة.
                </div>
            @endforelse
        </div>

        {{-- تبويب: طلبات اللايف والجولات --}}
        <div x-show="tab === 'requests'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-amber-100 mb-1">
                    طلبات اللايف والجولات (Live Stream Requests)
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-400">
                    هذا الجدول يوضح كل طلب قدمه عضو لعمل لايف أو جولة: المنصة، المدة، نوع النشاط،
                    وحالة الموافقة من الإدارة العليا أو الصقر.
                </p>
            </div>

            @forelse($liveStreamRequests as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-slate-50 to-emerald-50 dark:from-slate-900 dark:to-slate-800">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">📨</span>
                            <span class="font-semibold text-slate-900 dark:text-amber-50">
                                طلبات شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400">
                            {{ $items->count() }} طلب
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $r)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            طلب {{ $r->request_type === 'tour' ? 'جولة' : 'لايف' }} — {{ $r->platform_name }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-slate-100 text-slate-800
                                                     dark:bg-slate-800/70 dark:text-slate-100">
                                            {{ $r->user_name ?? 'عضو غير معروف' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
                                        {{ $r->notes ?: 'لا توجد ملاحظات إضافية من العضو.' }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $r->requested_date }} — {{ $r->requested_time }}</span>
                                        <span>⏱️ مدة مطلوبة: {{ $r->duration_hours }} ساعة</span>
                                        <span>🎯 النوع المطلوب: {{ $r->requested_type }}</span>
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $r->status === 'approved',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => $r->status === 'pending',
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => $r->status === 'rejected',
                                                 ])">
                                        حالة: {{ $r->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-slate-300 dark:border-slate-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-400">
                    لا توجد طلبات لايف/جولات مسجلة في هذه السنة.
                </div>
            @endforelse
        </div>

        {{-- تبويب: بروأكتيف --}}
        <div x-show="tab === 'proactive'" x-cloak class="space-y-4 sm:space-y-5">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-emerald-300 dark:border-emerald-700
                        shadow-md p-4 sm:p-5">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-emerald-100 mb-1">
                    بروأكتيف (ProActive) — جولات ومهام تفاعلية
                </h2>
                <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                    هذا القسم يربط أنشطة البروأكتيف التي تم جدولتها وتنفيذها:
                    نوع الفعالية، المنصة، القائد المسؤول، عدد التقارير التي وصلت من الأعضاء،
                    والأسماء التي شاركت في رفع التقارير.
                </p>
            </div>

            @forelse($proactive as $month => $items)
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-emerald-300/60 dark:border-emerald-700/70 shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 sm:px-5 py-3
                                bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/40 dark:to-slate-900">
                        <div class="flex items-center gap-2">
                            <span class="text-lg">🚀</span>
                            <span class="font-semibold text-slate-900 dark:text-emerald-50">
                                بروأكتيف شهر {{ $month }}
                            </span>
                        </div>
                        <span class="text-xs text-slate-600 dark:text-emerald-200">
                            {{ $items->count() }} فعالية بروأكتيف
                        </span>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($items as $p)
                            <div class="px-4 sm:px-5 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-emerald-50">
                                            {{ $p->event_title ?: 'فعالية بروأكتيف' }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full
                                                     bg-emerald-100 text-emerald-800
                                                     dark:bg-emerald-900/50 dark:text-emerald-200">
                                            القائد: {{ $p->leader_name ?: 'غير محدد' }}
                                        </span>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-600 dark:text-slate-300 line-clamp-2">
                                        منصة: {{ $p->platform }} — نوع النشاط: {{ $p->event_type }}
                                    </p>
                                    <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span>📅 {{ $p->event_date }} — {{ $p->event_time }}</span>
                                        <span>⏱️ مدة تقريبية: {{ $p->duration_minutes }} دقيقة</span>
                                        <span>📝 تقارير مستلمة: {{ $p->reports_count }}</span>
                                        @if($p->report_creators)
                                            <span class="block w-full sm:w-auto">
                                                ✍️ من قدّم تقارير: {{ $p->report_creators }}
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex flex-row sm:flex-col items-end gap-2">
                                    <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold
                                                 @class([
                                                    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' => $p->status === 'finished' || $p->status === 'completed',
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200' => $p->status === 'upcoming' || $p->status === 'scheduled',
                                                    'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200' => $p->status === 'cancelled',
                                                 ])">
                                        حالة: {{ $p->status }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-dashed border-emerald-400/70 dark:border-emerald-700
                            p-4 sm:p-5 text-center text-sm text-slate-500 dark:text-slate-300">
                    لا توجد بيانات بروأكتيف متاحة في الأرشيف لهذه السنة حتى الآن.
                </div>
            @endforelse
        </div>

    </div>
</div>
@endsection