{{-- resources/views/advisor/monitor/partials/guest-submission-details.blade.php --}}

@php
    $statusLabel = [
        'pending'  => 'بانتظار المراجعة',
        'approved' => 'مقبول',
        'rejected' => 'مرفوض',
    ];

    $statusColor = [
        'pending'  => 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/40 dark:text-amber-100 dark:border-amber-500/60',
        'approved' => 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-100 dark:border-emerald-500/60',
        'rejected' => 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-900/40 dark:text-rose-100 dark:border-rose-500/60',
    ];

    $status = $submission->status ?? 'pending';
@endphp

<div class="space-y-4 sm:space-y-5">

    {{-- الهيدر --}}
    <div class="space-y-2">
        <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
                    bg-sky-50 text-sky-700 text-[11px] font-medium
                    dark:bg-sky-900/40 dark:text-sky-100">
            <i class="fa-solid fa-user-group text-[10px]"></i>
            <span>تفاصيل ترشيح القيست</span>
        </div>

        <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-slate-50 leading-tight">
            {{ $submission->guest_description ?: 'ترشيح قيست بدون عنوان' }}
        </h2>

        <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300 flex flex-wrap items-center gap-1.5">
            <span>مقدَّم بواسطة:</span>
            <span class="font-semibold text-slate-800 dark:text-slate-100">
                {{ $submission->submitter_name ?? 'عضو غير معروف' }}
            </span>

            @if(!empty($submission->submitter_username))
                <span class="text-slate-400 dark:text-slate-400">
                    {{ '@' . $submission->submitter_username }}
                </span>
            @endif
        </div>
    </div>

    {{-- التاريخ / الوقت + الحالة --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

        {{-- التاريخ والوقت --}}
        <div class="rounded-2xl border border-slate-200 bg-slate-50/60
                    dark:border-slate-700 dark:bg-slate-900/60 p-3 sm:p-4">
            <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300 mb-1.5">
                التاريخ / الوقت
            </div>
            <div class="space-y-0.5 text-[12px] sm:text-sm">
                <div class="font-semibold text-slate-900 dark:text-slate-50">
                    {{ \Carbon\Carbon::parse($submission->activity_date)->locale('ar')->isoFormat('dddd D MMMM YYYY') }}
                </div>
                <div class="text-slate-600 dark:text-slate-200">
                    الساعة {{ $submission->activity_time }}
                </div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">
                    المدة الفعلية: {{ $submission->actual_hours }} ساعة
                </div>
            </div>
        </div>

        {{-- حالة الترشيح --}}
        <div class="rounded-2xl border border-slate-200 bg-white
                    dark:border-slate-700 dark:bg-slate-900/60 p-3 sm:p-4">
            <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300 mb-1.5">
                حالة الترشيح
            </div>

            <div class="flex items-center gap-2 mb-2">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border
                             text-[11px] sm:text-xs {{ $statusColor[$status] ?? $statusColor['pending'] }}">
                    @if($status === 'approved')
                        <i class="fa-solid fa-circle-check text-[10px]"></i>
                    @elseif($status === 'rejected')
                        <i class="fa-solid fa-circle-xmark text-[10px]"></i>
                    @else
                        <i class="fa-solid fa-hourglass-half text-[10px]"></i>
                    @endif
                    <span>{{ $statusLabel[$status] ?? $status }}</span>
                </span>
            </div>

            @if($submission->reviewed_by && $submission->reviewed_at)
                <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300 space-y-0.5">
                    <div>
                        تمت المراجعة بواسطة:
                        <span class="font-semibold text-slate-800 dark:text-slate-100">
                            {{ $submission->reviewer_name }}
                        </span>
                    </div>
                    <div>
                        بتاريخ
                        {{ \Carbon\Carbon::parse($submission->reviewed_at)->locale('ar')->isoFormat('D MMM YYYY, h:mm a') }}
                    </div>
                </div>
            @else
                <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                    لم يتم مراجعة هذا الترشيح بعد.
                </div>
            @endif
        </div>

    </div>

    {{-- المستضيفون (الأعضاء) --}}
    <div class="rounded-2xl border border-emerald-200 bg-emerald-50/70
                dark:border-emerald-600/70 dark:bg-emerald-950/40 p-3 sm:p-4 space-y-2.5">
        <div class="flex items-center justify-between gap-2">
            <div class="text-sm font-semibold text-emerald-900 dark:text-emerald-100">
                المستضيفون (الأعضاء)
            </div>
            <div class="text-[11px] px-2 py-0.5 rounded-full bg-emerald-100/80 text-emerald-800
                        dark:bg-emerald-800/60 dark:text-emerald-50">
                {{ count($hosts) }} مستضيف
            </div>
        </div>

        <div class="space-y-1.5">
            @forelse($hosts as $host)
                <div class="flex items-center justify-between gap-2 rounded-xl bg-white/70 dark:bg-slate-900/60 px-2.5 py-1.5">
                    <div class="flex flex-col">
                        <span class="text-[12px] font-semibold text-slate-900 dark:text-slate-50">
                            {{ $host->name ?? 'عضو غير معروف' }}
                        </span>
                        @if(!empty($host->username))
                            <span class="text-[11px] text-slate-500 dark:text-slate-300">
                                {{ '@' . $host->username }}
                            </span>
                        @endif
                    </div>

                    @if(!empty($host->gender))
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]
                                   {{ $host->gender === 'female'
                                        ? 'bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-100'
                                        : 'bg-sky-50 text-sky-700 dark:bg-sky-900/40 dark:text-sky-100' }}">
                            {{ $host->gender === 'female' ? 'أنثى' : 'ذكر' }}
                        </span>
                    @endif
                </div>
            @empty
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    لا يوجد مستضيفون مسجّلون في هذا الترشيح.
                </div>
            @endforelse
        </div>
    </div>

    {{-- الضيوف المستضافون --}}
    <div class="rounded-2xl border border-sky-200 bg-sky-50/70
                dark:border-sky-600/70 dark:bg-sky-950/40 p-3 sm:p-4 space-y-2.5">
        <div class="flex items-center justify-between gap-2">
            <div class="text-sm font-semibold text-sky-900 dark:text-sky-100">
                الضيوف المستضافون
            </div>
            <div class="text-[11px] px-2 py-0.5 rounded-full bg-sky-100/80 text-sky-800
                        dark:bg-sky-800/60 dark:text-sky-50">
                {{ count($guests) }} ضيف
            </div>
        </div>

        <div class="space-y-1.5">
            @forelse($guests as $guest)
                <div class="flex items-center justify-between gap-2 rounded-xl bg-white/70 dark:bg-slate-900/60 px-2.5 py-1.5">
                    <div class="flex flex-col">
                        <span class="text-[12px] font-semibold text-slate-900 dark:text-slate-50">
                            {{ $guest->name ?? 'ضيف مجهول' }}
                        </span>
                        @if(!empty($guest->username))
                            <span class="text-[11px] text-slate-500 dark:text-slate-300">
                                {{ '@' . $guest->username }}
                            </span>
                        @endif
                    </div>

                    @if(!empty($guest->gender))
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]
                                   {{ $guest->gender === 'female'
                                        ? 'bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-100'
                                        : 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-100' }}">
                            {{ $guest->gender === 'female' ? 'أنثى' : 'ذكر' }}
                        </span>
                    @endif
                </div>
            @empty
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    لا يوجد ضيوف مسجّلون في هذا الترشيح.
                </div>
            @endforelse
        </div>
    </div>

    {{-- ملاحظات النشاط --}}
    <div class="rounded-2xl border border-slate-200 bg-slate-50/70
                dark:border-slate-700 dark:bg-slate-900/60 p-3 sm:p-4 space-y-1.5">
        <div class="text-[12px] font-semibold text-slate-800 dark:text-slate-100 mb-0.5">
            ملاحظات عن النشاط
        </div>
        <div class="text-[12px] sm:text-[13px] text-slate-700 dark:text-slate-200 leading-relaxed">
            {{ $submission->activity_notes ?: 'لا توجد ملاحظات إضافية.' }}
        </div>
    </div>

    {{-- إثبات القيست --}}
    <div class="rounded-2xl border border-slate-200 bg-slate-50/70
                dark:border-slate-700 dark:bg-slate-900/60 p-3 sm:p-4 space-y-2">
        <div class="text-[12px] font-semibold text-slate-800 dark:text-slate-100 mb-0.5">
            إثبات القيست
        </div>

        @if($submission->proof_image)
            <a href="{{ asset('storage/' . $submission->proof_image) }}"
               target="_blank"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl
                      bg-sky-500/10 text-sky-700 text-[12px] font-medium
                      border border-sky-400/60
                      dark:bg-sky-500/15 dark:text-sky-100 dark:border-sky-500/70">
                <i class="fa-solid fa-image text-[11px]"></i>
                <span>عرض صورة الإثبات في نافذة جديدة</span>
            </a>

            <div class="text-[11px] text-slate-500 dark:text-slate-400">
                تم رفع الإثبات بتاريخ
                {{ \Carbon\Carbon::parse($submission->proof_uploaded_at)->locale('ar')->isoFormat('D MMM YYYY, h:mm a') }}
            </div>
        @else
            <div class="text-[12px] text-slate-600 dark:text-slate-300">
                لم يتم رفع صورة إثبات لهذا الترشيح.
            </div>
        @endif
    </div>

    {{-- زر إغلاق كبير في أسفل المودال --}}
    <div class="pt-1 pb-1 sm:pb-0">
        <button type="button"
                onclick="closeGuestDetails()"
                class="w-full inline-flex items-center justify-center gap-1.5
                       px-4 py-2.5 rounded-2xl text-[13px] font-medium
                       bg-slate-900 text-white shadow-md shadow-slate-400/40
                       dark:bg-slate-100 dark:text-slate-900 dark:shadow-black/50">
            <i class="fa-solid fa-xmark text-sm"></i>
            <span>إغلاق التفاصيل</span>
        </button>
    </div>
</div>