@php
    $user = auth()->user();

    if ($user->hasRole('super-admin')) {
        $layout = 'layouts.superadmin';
    } elseif ($user->hasRole('advisor')) {
        $layout = 'layouts.advisor';
    } elseif ($user->hasRole('moderator')) {
        $layout = 'layouts.moderator';
    } else {
        $layout = 'layouts.member';
    }
@endphp

@extends($layout)
@section('title','القستات المشتركة')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-3 sm:px-6 py-6 rtl">
    <div class="max-w-5xl mx-auto space-y-5">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl border border-sky-500/25
                    bg-gradient-to-br from-slate-950 via-sky-950/60 to-slate-950
                    shadow-xl shadow-sky-500/10 p-5 sm:p-6 text-white">
            <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-sky-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-fuchsia-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
                <div class="space-y-1">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15 text-[11px] font-bold">
                        <i class="fa-solid fa-users"></i>
                        <span>صفحة مشتركة للمشاركين</span>
                    </div>
                    <h1 class="text-xl sm:text-2xl font-extrabold">القستات المشتركة</h1>
                    <p class="text-[12px] sm:text-sm text-white/75">
                        تعرض القستات التي شاركت بها (هوست/ضيف/مرسل/مستلم). المرفوض لا يظهر.
                    </p>
                </div>

                <div class="text-right">
                    <div class="text-[11px] text-white/60">العناصر</div>
                    <div class="text-2xl font-extrabold">{{ $submissions->total() }}</div>
                </div>
            </div>

            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-2">
                <select name="status" class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                    <option value="all" @selected(($status ?? 'all')=='all')>الكل</option>
                    <option value="pending" @selected(($status ?? 'all')=='pending')>قيد المراجعة</option>
                    <option value="approved" @selected(($status ?? 'all')=='approved')>مقبول</option>
                </select>

                <input name="from" type="date" value="{{ $from ?? '' }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <input name="to" type="date" value="{{ $to ?? '' }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <div class="flex gap-2">
                    <input name="q" value="{{ $q ?? '' }}" placeholder="بحث.."
                           class="flex-1 rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                    <button class="px-4 py-2 rounded-xl bg-sky-500 hover:bg-sky-600 text-white text-sm font-bold">
                        تطبيق
                    </button>
                </div>
            </form>
        </div>

        {{-- LIST --}}
        @if($submissions->count())
            <div class="space-y-4">
                @foreach($submissions as $s)
                    @php
                        $isPending  = $s->status === 'pending';
                        $isApproved = $s->status === 'approved';

                        $badge = $isApproved ? 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200'
                              : 'bg-amber-500/15 border-amber-400/25 text-amber-200';

                        $roleLine = 'أنت مشارك في هذا القست';
                        if (($s->me_role_in_guest ?? 'other') === 'host') {
                            $roleLine = "أنت كنت ضمن الهوست: " . ($s->host_names ?: 'غير محدد');
                        } elseif (($s->me_role_in_guest ?? 'other') === 'guest') {
                            $roleLine = "أنت كنت ضمن الضيوف. الهوست: " . ($s->host_names ?: 'غير محدد');
                        } else {
                            $roleLine = "الهوست: " . ($s->host_names ?: 'غير محدد');
                        }
                    @endphp

                    <div class="relative overflow-hidden rounded-3xl border border-white/10
                                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                                shadow-lg shadow-black/30">
                        <div class="absolute inset-0 bg-white/[0.03] pointer-events-none"></div>

                        <div class="p-4 sm:p-5 text-white">
                            <div class="flex items-start justify-between gap-3">
                                <div class="space-y-1 min-w-0">
                                    <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $badge }} text-[11px] font-bold">
                                        <i class="fa-solid {{ $isApproved ? 'fa-circle-check' : 'fa-clock' }}"></i>
                                        <span>{{ $isApproved ? 'مقبول' : 'قيد المراجعة' }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/80 truncate">
                                        <span class="text-white/60">المرسل:</span>
                                        <span class="font-bold">{{ $s->submitter?->name ?? 'غير معروف' }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">المستلم:</span>
                                        <span class="font-bold">{{ $s->recipient?->name ?? 'غير محدد' }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">قست بتاريخ:</span>
                                        <span class="font-extrabold">{{ optional($s->activity_date)->format('Y-m-d') }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">الوقت:</span>
                                        <span class="font-extrabold">{{ $s->activity_time ?? '—' }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">ساعات:</span>
                                        <span class="font-extrabold">{{ $s->actual_hours ?? '0.00' }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-sky-200/90 font-semibold">
                                        {{ $roleLine }}
                                    </div>
                                </div>

                                <div class="text-right text-[11px] text-white/60">
                                    <div>رقم</div>
                                    <div class="text-white font-extrabold">#{{ $s->id }}</div>
                                </div>
                            </div>

                            {{-- Proof --}}
                            <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-3">
                                <div class="flex items-center justify-between gap-2 mb-2">
                                    <div class="text-xs font-extrabold text-white/90 inline-flex items-center gap-2">
                                        <i class="fa-solid fa-image text-sky-300"></i>
                                        صورة الإثبات
                                    </div>
                                    @if($s->proof_image)
                                        <span class="text-[10px] px-2 py-1 rounded-full border border-white/10 bg-black/20 text-white/70">
                                            {{ $s->proof_exists ? 'موجودة' : 'مفقودة (اسم موجود لكن الملف غير موجود)' }}
                                        </span>
                                    @endif
                                </div>

                                @if($s->proof_image && $s->proof_exists && $s->proof_image_url)
                                    <a href="{{ $s->proof_image_url }}" target="_blank" class="block">
                                        <img src="{{ $s->proof_image_url }}"
                                             class="w-full max-h-[420px] object-contain rounded-xl border border-white/10 bg-black/20">
                                    </a>
                                @else
                                    <div class="rounded-xl border border-white/10 bg-black/10 p-6 text-center text-white/60 text-sm">
                                        لا توجد صورة إثبات
                                    </div>
                                @endif
                            </div>

                            {{-- Comments disabled --}}
                            <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-3">
                                <div class="text-xs font-extrabold text-white/90 mb-1">تعليقات (معطلة حالياً)</div>
                                <div class="text-[12px] text-white/60">سيتم تفعيل التعليقات لاحقاً…</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-2">
                {{ $submissions->links() }}
            </div>
        @else
            <div class="rounded-3xl border border-white/10 bg-white/5 p-10 text-center text-white/70">
                لا يوجد بيانات ضمن هذه الفلاتر.
            </div>
        @endif

    </div>
</div>
@endsection