{{-- resources/views/tests/answers/show.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'تفاصيل الاختبار 📘')
@section('page-title', '📘 تفاصيل الاختبار: ' . $test->title)

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">

    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر ملحمي --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-52 h-52 rounded-full bg-indigo-500/18 blur-3xl"></div>

            <div class="relative px-6 py-7 space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <h1 class="text-2xl lg:text-3xl font-black tracking-tight text-slate-900 dark:text-white flex items-center gap-2">
                            <i class="fa-solid fa-file-circle-check text-emerald-400"></i>
                            تفاصيل الاختبار
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-sm mt-1">
                            عرض الأسئلة، الإجابات النموذجية، وكل محاولات الأعضاء لهذا الاختبار.
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-2 text-xs sm:text-sm">
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200 border border-emerald-100 dark:border-emerald-500/40">
                            <i class="fa-solid fa-circle-info text-[11px]"></i>
                            اختبار: {{ $test->title }}
                        </span>
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900 text-slate-100 text-[11px]">
                            حالة الاختبار:
                            @if($test->is_active)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-300 border border-emerald-500/40">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                                    مفعّل
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-300 border border-rose-500/40">
                                    غير مفعّل
                                </span>
                            @endif
                        </span>
                    </div>
                </div>

                {{-- بطاقات سريعة --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-1">
                    <div class="rounded-2xl bg-slate-900 text-slate-100 px-4 py-3 flex flex-col justify-between">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs text-slate-300">عدد الأسئلة</span>
                            <i class="fa-solid fa-list-ol text-yellow-300 text-sm"></i>
                        </div>
                        <div class="mt-2 text-2xl font-extrabold">
                            {{ $questionsCount }}
                            <span class="text-xs font-normal text-slate-300">سؤال</span>
                        </div>
                    </div>

                    <div class="rounded-2xl bg-emerald-500/10 text-emerald-800 dark:text-emerald-200 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs">محاولات الأعضاء</span>
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div class="mt-2 text-2xl font-extrabold">
                            {{ $submissionsCount }}
                            <span class="text-xs font-normal opacity-80">محاولة</span>
                        </div>
                    </div>

                    <div class="rounded-2xl bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs">نوع الجمهور</span>
                            <i class="fa-solid fa-user-group"></i>
                        </div>
                        <div class="mt-2 text-sm font-semibold">
                            @php
                                $map = [
                                    'all'        => 'لكل الأعضاء',
                                    'moderators' => 'المشرفون فقط',
                                    'beta'       => 'أعضاء بيتا',
                                    'male'       => 'الذكور',
                                    'female'     => 'الإناث',
                                ];
                            @endphp
                            {{ $map[$test->audience] ?? 'غير محدد' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- الأسئلة والإجابات --}}
        <div class="relative rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-6">
            <div class="flex items-center justify-between gap-2 mb-4">
                <h2 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-list-ol text-yellow-300"></i>
                    الأسئلة والإجابات النموذجية
                </h2>
                <span class="text-xs text-slate-500 dark:text-slate-400">
                    إجمالي الأسئلة: {{ $questionsCount }}
                </span>
            </div>

            @if($questionsCount === 0)
                <div class="rounded-2xl border border-dashed border-slate-300/70 dark:border-slate-600/70 bg-slate-50/80 dark:bg-slate-800/40 px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-300">
                    لا توجد أسئلة مسجلة لهذا الاختبار.
                </div>
            @else
                <div class="space-y-6">
                    @foreach ($test->questions as $qIndex => $question)
                        <div class="rounded-2xl bg-slate-50/90 dark:bg-slate-900/70 border border-slate-200/80 dark:border-slate-700 px-4 py-4 sm:px-5 sm:py-5">
                            <p class="font-bold text-slate-900 dark:text-white text-base sm:text-lg mb-3 flex gap-2">
                                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-indigo-500/10 text-indigo-500 text-xs font-extrabold mt-0.5">
                                    {{ $qIndex + 1 }}
                                </span>
                                <span>{{ $question->question_text }}</span>
                            </p>

                            <div class="space-y-2">
                                @foreach ($question->answers as $answer)
                                    <div class="px-3 py-2 rounded-xl border text-sm
                                        @if($answer->is_correct)
                                            bg-emerald-500/10 border-emerald-400/50 text-emerald-200
                                        @else
                                            bg-white/70 dark:bg-slate-800/70 border-slate-200/70 dark:border-slate-700
                                            text-slate-800 dark:text-slate-200
                                        @endif">
                                        {{ $answer->answer_text }}
                                        @if($answer->is_correct)
                                            <i class="fa-solid fa-check ms-2 text-emerald-300"></i>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- محاولات الأعضاء --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-6">
            <div class="flex items-center justify-between gap-2 mb-4">
                <h2 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-users text-sky-400"></i>
                    محاولات الأعضاء
                </h2>
                <span class="text-xs text-slate-500 dark:text-slate-400">
                    إجمالي المحاولات: {{ $submissionsCount }}
                </span>
            </div>

            @if($submissionsCount === 0)
                <div class="rounded-2xl border border-dashed border-slate-300/70 dark:border-slate-600/70 bg-slate-50/80 dark:bg-slate-800/40 px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-300">
                    لا توجد محاولات بعد لهذا الاختبار.
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
                            <tr>
                                <th class="px-4 py-3 text-right text-xs font-semibold">#</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold">المستخدم</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold">النتيجة</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold">وقت الإرسال</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold">التفاصيل</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach ($submissions as $index => $sub)
                                <tr class="hover:bg-slate-50/90 dark:hover:bg-slate-800/60 transition">
                                    <td class="px-4 py-3 text-slate-400">{{ $index + 1 }}</td>

                                    <td class="px-4 py-3 text-slate-900 dark:text-slate-50 font-semibold">
                                        {{ $sub->user->name ?? '—' }}
                                    </td>

                                    <td class="px-4 py-3">
                                        @php
                                            $cls =
                                                $sub->score >= 85 ? 'text-emerald-400' :
                                                ($sub->score >= 60 ? 'text-yellow-300' : 'text-rose-300');
                                        @endphp
                                        <span class="font-bold {{ $cls }}">
                                            {{ $sub->score }}%
                                        </span>
                                    </td>

                                    <td class="px-4 py-3 text-slate-500 dark:text-slate-300 text-xs">
                                        {{ optional($sub->submitted_at)->format('Y/m/d H:i') }}
                                    </td>

                                    <td class="px-4 py-3">
                                        <button type="button"
                                                class="px-3 py-1.5 rounded-lg bg-sky-600/90 hover:bg-sky-600 text-white text-xs sm:text-sm border border-sky-400/40"
                                                data-url="{{ route('tests.answers.submission', $sub->id) }}"
                                                onclick="openSubmission(this)">
                                            عرض الإجابات
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </div>
</div>

{{-- مودال عرض محاولة واحدة --}}
<div id="modalSub" class="fixed inset-0 z-[9999] hidden">
    <div class="absolute inset-0 bg-black/60" onclick="closeSub()"></div>

    <div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
        <div class="pointer-events-auto w-full max-w-3xl rounded-2xl bg-slate-900 text-slate-50 border border-slate-700 overflow-hidden shadow-2xl">
            <div class="p-4 border-b border-slate-700 flex justify-between items-center">
                <h3 class="text-lg font-bold flex items-center gap-2">
                    <i class="fa-solid fa-user-check text-emerald-400"></i>
                    إجابات المستخدم
                </h3>
                <button onclick="closeSub()" class="text-slate-300 hover:text-rose-400">
                    <i class="fa-solid fa-xmark text-xl"></i>
                </button>
            </div>

            <div id="modalContent" class="p-4 max-h-[70vh] overflow-auto text-slate-100 text-sm">
                جاري التحميل...
            </div>
        </div>
    </div>
</div>

<script>
    function openSubmission(button) {
        const modal   = document.getElementById('modalSub');
        const content = document.getElementById('modalContent');
        const url     = button.getAttribute('data-url');

        modal.classList.remove('hidden');
        content.innerHTML = 'جاري التحميل...';

        fetch(url)
            .then(res  => res.text())
            .then(html => content.innerHTML = html)
            .catch(()  => content.innerHTML = 'فشل تحميل البيانات.');
    }

    function closeSub() {
        document.getElementById('modalSub').classList.add('hidden');
    }
</script>
@endsection