@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/50 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">
                        تظهر لك فقط القستات التي كنت فيها <span class="font-bold">هوست</span> أو <span class="font-bold">قاست</span>. القستات المرفوضة لا تظهر.
                    </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>
{{-- ✅ مقطع الإحصائيات + أهمية الإثبات (ملخص سريع للعضو) --}}
@php
    $col = $submissions instanceof \Illuminate\Pagination\AbstractPaginator
        ? $submissions->getCollection()
        : collect($submissions);

    $meId = auth()->id();

    // احصائيات شخصية (فقط القستات المعروضة/المفلترة)
    $totalItems   = $submissions->total() ?? $col->count();

    $hostCount = $col->filter(function($s) use ($meId){
        $hosts = (array)($s->host_participants ?? []);
        return in_array($meId, $hosts, true);
    })->count();

    $guestCount = $col->filter(function($s) use ($meId){
        $guests = (array)($s->guest_participants ?? []);
        return in_array($meId, $guests, true);
    })->count();

    $hoursTotal = (float) $col->sum(function($s){
        return (float)($s->actual_hours ?? 0);
    });

    // إثباتاتك (حسب اللي جهزناه بالكنترول: proof_url + proof_state)
    $withProof = $col->filter(fn($s) => !empty($s->proof_url) || (($s->proof_state ?? '') === 'ok'))->count();
    $missingProofName = $col->filter(fn($s) => (($s->proof_state ?? '') === 'missing_file'))->count(); // اسم موجود لكن الملف مش موجود
    $noProof = max(0, $col->count() - $withProof);

    $proofRate = $col->count() ? round(($withProof / $col->count()) * 100) : 0;
@endphp


            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
                <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">
                    <button class="flex-1 px-4 py-2 rounded-xl bg-sky-500 hover:bg-sky-600 text-white text-sm font-bold">
                        تطبيق
                    </button>
                    <a href="{{ url()->current() }}"
                       class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-white text-sm font-bold">
                        مسح
                    </a>
                </div>
            </form>
        </div>
<div class="relative overflow-hidden rounded-3xl border border-emerald-500/20
            bg-gradient-to-br from-slate-950 via-emerald-950/30 to-slate-950
            shadow-xl shadow-emerald-500/10 p-4 sm:p-6 text-white">

    <div class="pointer-events-none absolute -top-20 -right-20 w-72 h-72 rounded-full bg-emerald-400/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-16 w-72 h-72 rounded-full bg-sky-400/10 blur-3xl"></div>

    <div class="flex flex-col sm:flex-row sm:items-center sm: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-shield-heart text-emerald-300"></i>
                <span>أهمية الإثبات</span>
            </div>
            <h2 class="text-base sm:text-lg font-extrabold">الإثبات هو “دليل ساعاتك”</h2>
            <p class="text-[12px] sm:text-sm text-white/75 leading-relaxed">
                كل قست بدون صورة إثبات = ساعاتك غير مثبتة بشكل رسمي داخل النظام.
                الهدف حماية حقك، وتوثيق تواجدك، ومنع أي لخبطة أو ظلم لاحقًا.
            </p>
        </div>

        <div class="text-right">
            <div class="text-[11px] text-white/60">نسبة الإثبات ضمن النتائج الحالية</div>
            <div class="text-2xl font-extrabold">
                {{ $proofRate }}%
            </div>
        </div>
    </div>

    {{-- بطاقات إحصائيات شخصية --}}
    <div class="mt-4 grid grid-cols-2 lg:grid-cols-4 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-[11px] text-white/60">إجمالي القستات</div>
            <div class="text-xl font-extrabold">{{ $totalItems }}</div>
        </div>

        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-[11px] text-white/60">ساعاتك (ضمن النتائج)</div>
            <div class="text-xl font-extrabold">{{ number_format($hoursTotal, 2) }}</div>
        </div>

        <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-3">
            <div class="text-[11px] text-emerald-200/80">قستات بإثبات</div>
            <div class="text-xl font-extrabold text-emerald-200">{{ $withProof }}</div>
        </div>

        <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-3">
            <div class="text-[11px] text-amber-200/80">بدون إثبات</div>
            <div class="text-xl font-extrabold text-amber-200">{{ $noProof }}</div>
        </div>
    </div>

    {{-- تفاصيل دورك --}}
    <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-500/10 border border-sky-400/20 text-sky-200">
            <i class="fa-solid fa-user-tie"></i>
            هوست: <span class="font-extrabold">{{ $hostCount }}</span>
        </span>

        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/10 border border-fuchsia-400/20 text-fuchsia-200">
            <i class="fa-solid fa-user-group"></i>
            ضيف: <span class="font-extrabold">{{ $guestCount }}</span>
        </span>

        @if($missingProofName > 0)
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-400/20 text-red-200">
                <i class="fa-solid fa-triangle-exclamation"></i>
                تنبيه: يوجد <span class="font-extrabold">{{ $missingProofName }}</span> قست “اسم إثبات موجود لكن الصورة غير موجودة”
            </span>
        @endif
    </div>

    {{-- ملاحظة قصيرة جداً --}}
    <div class="mt-3 rounded-2xl border border-white/10 bg-black/20 p-3 text-[12px] text-white/70 leading-relaxed">
        ✅ نعرض فقط القستات التي شاركت بها (هوست/ضيف) — والمرفوض لا يظهر.  
        🖼️ صورة الإثبات هي اللي تثبت ساعاتك فعليًا داخل النظام.
    </div>
</div>
        {{-- LIST --}}
        @if($submissions->count())
            <div class="space-y-4">
                @foreach($submissions as $s)
                    @php
                        $isApproved = $s->status === 'approved';

                        $badge = 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200';
                        $roleChip = 'bg-white/10 border-white/15 text-white/85';

                        $meRole = $s->me_role_in_guest ?? 'other';
                        $roleText = $meRole === 'host' ? 'أنت (هوست)' : ($meRole === 'guest' ? 'أنت (قاست)' : 'مشارك');
                        if($meRole === 'host') $roleChip = 'bg-sky-500/15 border-sky-400/25 text-sky-200';
                        if($meRole === 'guest') $roleChip = 'bg-fuchsia-500/15 border-fuchsia-400/25 text-fuchsia-200';
                    @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="flex flex-wrap items-center gap-2">
                                        <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $badge }} text-[11px] font-bold">
                                            <i class="fa-solid fa-circle-check"></i>
                                            <span>مقبول</span>
                                        </span>

                                        <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $roleChip }} text-[11px] font-bold">
                                            <i class="fa-solid fa-user-tag"></i>
                                            <span>{{ $roleText }}</span>
                                        </span>
                                    </div>

                                    {{-- هوست (مش مستلم) --}}
                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">الهوست:</span>
                                        <span class="font-extrabold text-sky-200">{{ $s->host_names ?? 'غير محدد' }}</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>

                                <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_state ?? 'none') === 'missing')
                                        <span class="text-[11px] px-2 py-1 rounded-full bg-red-500/15 border border-red-400/25 text-red-200 font-bold">
                                            اسم الصورة موجود لكن الملف غير موجود
                                        </span>
                                    @endif
                                </div>

                                @if(!empty($s->proof_url))
                                    <button type="button" onclick="openImageModal('{{ $s->proof_url }}')"
                                            class="block w-full">
                                        <img src="{{ $s->proof_url }}"
                                             class="w-full max-h-[420px] object-contain rounded-xl border border-white/10 bg-black/20">
                                    </button>
                                    @if(!empty($s->proof_uploaded_at))
                                        <div class="mt-2 text-[11px] text-white/60">
                                            تاريخ رفع الإثبات: <span class="text-white/80 font-bold">{{ optional($s->proof_uploaded_at)->format('Y-m-d H:i') }}</span>
                                        </div>
                                    @endif
                                @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->withQueryString()->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>

{{-- Image Modal --}}
<div id="imgModal" class="fixed inset-0 z-[9999] hidden">
    <div class="absolute inset-0 bg-black/80 backdrop-blur-sm" onclick="closeImageModal()"></div>
    <div class="relative z-10 max-w-5xl mx-auto px-3 py-10">
        <div class="rounded-3xl border border-white/10 bg-slate-950 shadow-2xl overflow-hidden">
            <div class="flex items-center justify-between p-3 border-b border-white/10">
                <div class="text-white/80 text-xs font-bold">معاينة صورة الإثبات</div>
                <button type="button" onclick="closeImageModal()"
                        class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/15 text-white text-xs font-bold">
                    إغلاق
                </button>
            </div>
            <div class="p-3">
                <img id="imgModalSrc" src="" class="w-full max-h-[80vh] object-contain rounded-2xl bg-black/30 border border-white/10">
            </div>
        </div>
    </div>
</div>

<script>
function openImageModal(src){
    const m = document.getElementById('imgModal');
    const i = document.getElementById('imgModalSrc');
    if(!m || !i) return;
    i.src = src;
    m.classList.remove('hidden');
}
function closeImageModal(){
    const m = document.getElementById('imgModal');
    const i = document.getElementById('imgModalSrc');
    if(i) i.src = '';
    if(m) m.classList.add('hidden');
}
document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeImageModal();
});
</script>
@endsection