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

@section('title', 'متابعة ترشيحات القِسْت')
@section('page-title', '📋 متابعة ترشيحات القِسْت — Guest Submissions')

@section('content')
<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 dark:border-slate-700 shadow-lg">
            <div class="absolute -top-20 -left-10 w-40 h-40 bg-emerald-300/20 blur-3xl rounded-full"></div>
            <div class="absolute -bottom-24 -right-8 w-48 h-48 bg-sky-400/20 blur-3xl rounded-full"></div>

            <div class="relative p-5 sm:p-6 lg:p-7 flex flex-col gap-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-handshake-angle text-[11px]"></i>
                    <span>قسم المتابعة — ترشيحات القِسْت</span>
                </div>

                <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold 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>

        {{-- فلاتر --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm p-4 space-y-3">

            <form method="GET" class="space-y-3">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 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 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </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 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </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 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-[11px] sm:text-xs px-2.5">
                            <option value="">الكل</option>
                            <option value="pending"  {{ $status=='pending' ? 'selected' : '' }}>بانتظار المراجعة</option>
                            <option value="approved" {{ $status=='approved' ? 'selected' : '' }}>مقبول</option>
                            <option value="rejected" {{ $status=='rejected' ? 'selected' : '' }}>مرفوض</option>
                        </select>
                    </div>

                    {{-- بحث --}}
                    <div class="flex flex-col gap-1 col-span-2 sm:col-span-2 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 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-xs px-2.5">
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-2 pt-1">
                    <div class="flex gap-2">
                        <button class="px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-sky-500 hover:bg-sky-600 text-white text-xs sm:text-sm shadow-sm shadow-sky-400/50">
                            <i class="fa-solid fa-magnifying-glass text-[10px] sm:text-xs ml-1"></i>
                            بحث
                        </button>

                        <a href="{{ route('advisor.monitor.guest-submissions') }}"
                           class="text-[11px] sm:text-xs px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700">
                            إعادة ضبط
                        </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">{{ $stats['total'] ?? 0 }}</span>
                    </div>
                </div>

            </form>
        </div>

        {{-- إحصائيات --}}
        <div class="grid grid-cols-3 gap-3 sm:gap-4">

            <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-600 p-3 text-center">
                <div class="text-[11px] sm:text-xs text-amber-700 dark:text-amber-200">بانتظار</div>
                <div class="text-2xl sm:text-3xl font-extrabold text-amber-700 dark:text-amber-200">{{ $stats['pending'] }}</div>
            </div>

            <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-600 p-3 text-center">
                <div class="text-[11px] sm:text-xs text-emerald-700 dark:text-emerald-200">مقبول</div>
                <div class="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-200">{{ $stats['approved'] }}</div>
            </div>

            <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-600 p-3 text-center">
                <div class="text-[11px] sm:text-xs text-rose-700 dark:text-rose-200">مرفوض</div>
                <div class="text-2xl sm:text-3xl font-extrabold text-rose-700 dark:text-rose-200">{{ $stats['rejected'] }}</div>
            </div>

        </div>

        {{-- الجدول --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm p-4 space-y-3">

            <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white mb-2 flex items-center gap-1.5">
                🗂️ <span>قائمة ترشيحات القِسْت</span>
            </h2>

            <div class="overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-700">
                <table class="min-w-full text-[11px] sm:text-xs text-right">
                    <thead class="bg-slate-50 dark:bg-slate-900/95">
                        <tr>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">التاريخ</th>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">المستضيف</th>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">الوصف</th>
                            <th class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 font-medium">الحالة</th>
                            <th class="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 dark:divide-slate-700 bg-white/90 dark:bg-slate-950/40">
                        @forelse($submissions as $s)
                            <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-900/80">

                                {{-- التاريخ --}}
                                <td class="px-3 py-2.5 whitespace-nowrap align-top">
                                    <div class="font-semibold text-slate-800 dark:text-slate-100">
                                        {{ \Carbon\Carbon::parse($s->activity_date)->locale('ar')->isoFormat('D MMM YYYY') }}
                                    </div>
                                    <div class="text-[10px] text-slate-500 dark:text-slate-400">
                                        {{ $s->activity_time }}
                                    </div>
                                </td>

                                {{-- المستضيف --}}
<td class="px-3 py-2.5 align-top">
    <div class="font-semibold text-slate-800 dark:text-slate-100">
        {{ $s->submitter_name ?? 'غير معروف' }}
    </div>

    @if(!empty($s->submitter_username))
        <div class="text-[10px] text-slate-500 dark:text-slate-300 flex items-center gap-1">
            <span class="text-slate-400">المعرف:</span>

            {{-- اليوزرنيم بشكل رسمي وواضح --}}
            <span class="font-mono text-slate-600 dark:text-slate-200">
                {{ '@' . $s->submitter_username }}
            </span>
        </div>
    @endif
</td>

                                {{-- الوصف --}}
                                <td class="px-3 py-2.5 align-top">
                                    <div class="line-clamp-2 text-slate-600 dark:text-slate-300">
                                        {{ $s->guest_description ?? '—' }}
                                    </div>
                                </td>

                                {{-- الحالة --}}
                                <td class="px-3 py-2.5 align-top">
                                    @if($s->status == 'approved')
                                        <span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-200 rounded-full text-[10px] sm:text-xs">
                                            مقبول
                                        </span>
                                    @elseif($s->status == 'rejected')
                                        <span class="px-3 py-1 bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-200 rounded-full text-[10px] sm:text-xs">
                                            مرفوض
                                        </span>
                                    @else
                                        <span class="px-3 py-1 bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200 rounded-full text-[10px] sm:text-xs">
                                            بانتظار
                                        </span>
                                    @endif
                                </td>

                                {{-- زر عرض --}}
                                <td class="px-3 py-2.5 align-top">
                                    <button type="button"
                                            onclick="openGuestDetails({{ $s->id }})"
                                            class="px-3 py-1.5 rounded-xl bg-sky-500 hover:bg-sky-600 text-white text-[11px] sm:text-xs shadow-sm">
                                        عرض التفاصيل
                                    </button>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                    لا توجد نتائج مطابقة.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="pt-2">
                {{ $submissions->links() }}
            </div>
        </div>

        {{-- بانيل تفاصيل القيست --}}
        <div id="guestDetailsWrapper" class="hidden">
            <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-lg p-4 sm:p-5 space-y-3">
                <div class="flex items-center justify-between gap-2 border-b border-slate-200 dark:border-slate-700 pb-2 mb-2">
                    <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 rounded-2xl bg-sky-500/10 text-sky-600 dark:text-sky-300 dark:bg-sky-500/20 items-center justify-center text-xs">
                            <i class="fa-solid fa-user-group"></i>
                        </span>
                        <div>
                            <h3 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-slate-50">
                                تفاصيل ترشيح القِسْت
                            </h3>
                            <p class="text-[10px] sm:text-xs text-slate-500 dark:text-slate-400">
                                معلومات الضيوف، المستضيفين، الملاحظات، والإثبات.
                            </p>
                        </div>
                    </div>

                    <button type="button"
                            onclick="closeGuestDetails()"
                            class="inline-flex items-center justify-center h-8 w-8 rounded-full
                                   bg-slate-100 hover:bg-slate-200 text-slate-600
                                   dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200">
                        <i class="fa-solid fa-xmark text-sm"></i>
                    </button>
                </div>

                <div id="guestDetailsBody" class="space-y-3 text-[12px] sm:text-sm text-slate-800 dark:text-slate-100">
                    <div class="flex items-center justify-center py-10 text-slate-500 dark:text-slate-300 text-sm">
                        اختر ترشيحاً من الجدول لعرض التفاصيل.
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
    function openGuestDetails(id) {
        const wrapper = document.getElementById('guestDetailsWrapper');
        const bodyEl  = document.getElementById('guestDetailsBody');

        if (!wrapper || !bodyEl) return;

        // إظهار البانيل
        wrapper.classList.remove('hidden');
        bodyEl.innerHTML = `
            <div class="flex items-center justify-center py-10 text-slate-500 dark:text-slate-300 text-sm">
                تحميل...
            </div>
        `;

        fetch("{{ route('advisor.monitor.guest-submissions.show', ':id') }}".replace(':id', id))
            .then(res => {
                if (!res.ok) throw new Error('خطأ في الجلب');
                return res.text();
            })
            .then(html => {
                bodyEl.innerHTML = html;

                // ننزل للبانيل بشكل ناعم
                wrapper.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            })
            .catch(() => {
                bodyEl.innerHTML = `
                    <div class="p-4 text-center text-sm text-rose-600 dark:text-rose-300">
                        حدث خطأ أثناء تحميل تفاصيل القيست، جرّب مرة أخرى لاحقاً.
                    </div>
                `;
            });
    }

    function closeGuestDetails() {
        const wrapper = document.getElementById('guestDetailsWrapper');
        if (!wrapper) return;
        wrapper.classList.add('hidden');
    }
</script>
@endpush