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

@section('title', 'علامات حسب كل اختبار 📘')
@section('page-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-24 -left-16 w-48 h-48 rounded-full bg-emerald-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-20 w-64 h-64 rounded-full bg-indigo-500/18 blur-3xl"></div>

            <div class="relative px-6 py-7 space-y-3">
                <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-list-check text-indigo-400"></i>
                            علامات حسب كل اختبار
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-xs sm:text-sm mt-1">
                            هنا تقدر تشوف أداء التيم في كل اختبار لوحده:
                            المعدّل، نسبة النجاح والفشل، ومتوسط الشباب والبنات في نفس الاختبار.
                        </p>
                    </div>

                    <div class="text-xs sm:text-sm flex flex-col items-start sm:items-end gap-1">
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900 text-slate-100">
                            حدّ النجاح المعتمد:
                            <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-300 border border-emerald-500/40">
                                {{ $passScore }}%
                            </span>
                        </span>
                        <span class="text-slate-500 dark:text-slate-400">
                            يمكن تغييره من الكنترولر لو احتجت.
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- جدول الاختبارات --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-4 sm:p-6">
            <div class="flex items-center justify-between gap-2 mb-4">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-table-list text-indigo-400"></i>
                    قائمة الاختبارات وعلاماتها
                </h2>
                <span class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                    المعدّل هنا محسوب كنسبة مئوية صحيحة لكل محاولة قبل المتوسط 🔍
                </span>
            </div>

            @if($tests->isEmpty())
                <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-xs sm:text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
                            <tr>
                                <th class="px-3 py-2 text-right">#</th>
                                <th class="px-3 py-2 text-right">الاختبار</th>
                                <th class="px-3 py-2 text-right">الجمهور</th>
                                <th class="px-3 py-2 text-right">عدد الأسئلة</th>
                                <th class="px-3 py-2 text-right">المحاولات</th>
                                <th class="px-3 py-2 text-right">المعدل</th>
                                <th class="px-3 py-2 text-right">نجاح</th>
                                <th class="px-3 py-2 text-right">فشل</th>
                                <th class="px-3 py-2 text-right">معدل الشباب / البنات</th>
                            </tr>
                        </thead>
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
    @foreach($tests as $i => $test)
        @php
            $m = $test->marks;
            $audMap = [
                'all'        => 'لكل الأعضاء',
                'moderators' => 'المشرفون فقط',
                'beta'       => 'أعضاء بيتا',
                'male'       => 'الذكور',
                'female'     => 'الإناث',
            ];
            $audienceText = $audMap[$test->audience] ?? 'غير محدد';

            $avg  = $m->avg !== null ? $m->avg : 0;
            $cls  = $avg >= 85 ? 'text-emerald-400'
                 : ($avg >= 60 ? 'text-amber-400' : 'text-rose-300');
        @endphp
        <tr class="hover:bg-slate-50/90 dark:hover:bg-slate-800/60 transition cursor-pointer"
            onclick="openTestMarksPanel({{ $test->id }}, '{{ e($test->title) }}')">
            <td class="px-3 py-2 text-slate-400">{{ $i + 1 }}</td>
            <td class="px-3 py-2">
                <div class="flex flex-col">
                    <span class="font-semibold text-slate-900 dark:text-slate-50">
                        {{ $test->title }}
                    </span>
                    <span class="text-[10px] text-slate-500 dark:text-slate-400">
                        ID: #{{ $test->id }}
                    </span>
                </div>
            </td>
            <td class="px-3 py-2 text-slate-600 dark:text-slate-300">
                {{ $audienceText }}
            </td>
            <td class="px-3 py-2 text-slate-600 dark:text-slate-200">
                {{ $test->questions_count }}
            </td>
            <td class="px-3 py-2 text-slate-600 dark:text-slate-200">
                {{ $m->attempts }}
            </td>
            <td class="px-3 py-2 font-bold {{ $cls }}">
                {{ $m->avg !== null ? $m->avg.'%' : '—' }}
            </td>
            <td class="px-3 py-2">
                <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border border-emerald-500/30">
                    {{ $m->pass_rate }}%
                </span>
            </td>
            <td class="px-3 py-2">
                <span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-600 dark:text-rose-300 border border-rose-500/30">
                    {{ $m->fail_rate }}%
                </span>
            </td>
            <td class="px-3 py-2">
                <div class="flex flex-col gap-0.5 text-[11px] sm:text-xs">
                    <span>
                        الشباب:
                        <span class="font-semibold">
                            {{ $m->male_avg !== null ? $m->male_avg.'%' : '—' }}
                        </span>
                    </span>
                    <span>
                        البنات:
                        <span class="font-semibold">
                            {{ $m->female_avg !== null ? $m->female_avg.'%' : '—' }}
                        </span>
                    </span>
                </div>
            </td>
        </tr>
    @endforeach
</tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- شرح بسيط في آخر الصفحة --}}
        <div class="rounded-3xl bg-slate-900 text-slate-50 border border-slate-700 shadow-sm p-6 text-xs sm:text-sm leading-relaxed">
            <h2 class="text-base sm:text-lg font-bold flex items-center gap-2 mb-3">
                <i class="fa-solid fa-circle-question text-indigo-300"></i>
                كيف نقرأ هذه الأرقام؟
            </h2>
            <ul class="list-disc pr-5 space-y-1 text-slate-200">
                <li>المعدل لكل اختبار هو متوسط النسبة المئوية لكل محاولة في هذا الاختبار فقط.</li>
                <li>نسبة النجاح = (عدد المحاولات التي ≥ {{ $passScore }}% ÷ كل محاولات الاختبار) × 100.</li>
                <li>نسبة الفشل = (عدد المحاولات التي أقل من {{ $passScore }}% ÷ كل محاولات الاختبار) × 100.</li>
                <li>معدل الشباب والبنات يساعدك تعرف إذا في اختبار معيّن صعب أكثر على فئة معيّنة.</li>
            </ul>
        </div>

    </div>
</div>

{{-- بانيل عرض الأعضاء الذين جاوبوا اختبار معيّن --}}
<div id="test-marks-panel"
     class="fixed inset-0 z-[9999] hidden">
    {{-- خلفية غامقة --}}
    <div class="absolute inset-0 bg-black/50" onclick="closeTestMarksPanel()"></div>

    {{-- السلايد من الأسفل (مناسب للموبايل) --}}
    <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-0 sm:left-auto
                w-full sm:w-[460px] bg-white dark:bg-slate-900 border-t sm:border-t-0 sm:border-l
                border-slate-200 dark:border-slate-700 rounded-t-3xl sm:rounded-l-3xl shadow-2xl
                transform translate-y-full sm:translate-x-full transition-transform duration-300"
         id="test-marks-panel-inner">
        <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between gap-3">
            <div>
                <h3 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                    <i class="fa-solid fa-users-line text-indigo-400"></i>
                    <span id="test-marks-panel-title">تفاصيل الاختبار</span>
                </h3>
                <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
                    تعرض هذه القائمة الأعضاء الذين شاركوا في هذا الاختبار، نسبة النجاح وعدد الأسئلة الخاطئة.
                </p>
            </div>
            <button onclick="closeTestMarksPanel()" class="text-slate-400 hover:text-rose-400">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        <div id="test-marks-panel-body"
             class="p-4 max-h-[70vh] sm:max-h-[calc(100vh-5rem)] overflow-auto text-sm text-slate-800 dark:text-slate-100">
            جارِ التحميل...
        </div>
    </div>
</div>

@push('scripts')
<script>
    function openTestMarksPanel(testId, title) {
        const panel      = document.getElementById('test-marks-panel');
        const inner      = document.getElementById('test-marks-panel-inner');
        const body       = document.getElementById('test-marks-panel-body');
        const titleSpan  = document.getElementById('test-marks-panel-title');

        titleSpan.textContent = 'تفاصيل الاختبار: ' + title;
        body.innerHTML = 'جارِ التحميل...';

        panel.classList.remove('hidden');
        // تشغيل الأنيميشن
        requestAnimationFrame(() => {
            inner.classList.remove('translate-y-full', 'sm:translate-x-full');
        });

        const url = "{{ route('tests.marks.per-test.show', ':id') }}".replace(':id', testId);

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
            .then(res => res.text())
            .then(html => body.innerHTML = html)
            .catch(() => body.innerHTML = '<div class="text-rose-500 text-sm">فشل تحميل البيانات.</div>');
    }

    function closeTestMarksPanel() {
        const panel = document.getElementById('test-marks-panel');
        const inner = document.getElementById('test-marks-panel-inner');

        inner.classList.add('translate-y-full', 'sm:translate-x-full');

        setTimeout(() => {
            panel.classList.add('hidden');
        }, 250);
    }
</script>
@endpush




@endsection