{{-- resources/views/tests/marks/ai-analysis.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="rounded-3xl bg-white/95 dark:bg-slate-900/95 shadow-lg border border-slate-200/70 dark:border-slate-700 p-6">
            <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-brain text-indigo-400"></i>
                تحليل ذكاء — فحص أداء كل عضو
            </h1>
            <p class="text-slate-600 dark:text-slate-300 text-sm mt-2">
                هنا يقوم الذكاء الاصطناعي بفحص إجابات كل عضو في كل اختبار: الإجابات الصحيحة، الخاطئة، الأخطاء المتكررة، ونسبة النجاح.
            </p>
        </div>

        {{-- قائمة الأعضاء --}}
        @if($users->isEmpty())
            <div class="rounded-2xl bg-slate-100 dark:bg-slate-800 border border-slate-300/50 dark:border-slate-700 p-6 text-center text-slate-500 dark:text-slate-300">
                لا توجد بيانات بعد — لا أحد حل الاختبارات.
            </div>
        @else
            @foreach($users as $user)
                <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 shadow-md border border-slate-200/70 dark:border-slate-700 p-6 space-y-5">

                    {{-- معلومات العضو --}}
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <h2 class="font-bold text-xl text-slate-900 dark:text-white flex items-center gap-2">
                                <i class="fa-solid fa-user text-indigo-400"></i>
                                {{ $user['name'] }}
                            </h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                الجنس: <span class="font-semibold">{{ $user['gender'] ?? 'غير محدد' }}</span> •
                                الرتبة: <span class="font-semibold">{{ $user['membership'] }}</span>
                            </p>
                        </div>

                        {{-- نسبة النجاح --}}
                        <div class="text-right">
                            <span class="text-sm text-slate-500 dark:text-slate-400">نسبة النجاح:</span>
                            <div class="text-2xl font-black
                                {{ $user['success_rate'] >= 85 ? 'text-emerald-400' :
                                   ($user['success_rate'] >= 60 ? 'text-amber-400' : 'text-rose-400') }}">
                                {{ $user['success_rate'] !== null ? $user['success_rate'].'%' : '—' }}
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-200/70 dark:border-slate-700 pt-4"></div>

                    {{-- قائمة الاختبارات --}}
                    @foreach($user['tests'] as $test)
                        <details class="group bg-slate-50/80 dark:bg-slate-800/40 border border-slate-200/70 dark:border-slate-700 rounded-2xl overflow-hidden">
                            <summary class="list-none cursor-pointer p-4 flex justify-between items-center">
                                <div>
                                    <h3 class="font-semibold text-slate-800 dark:text-white">
                                        {{ $test['title'] }}
                                    </h3>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">
                                        عدد الأسئلة: {{ count($test['questions']) }}
                                    </p>
                                </div>

                                <i class="fa-solid fa-chevron-down text-slate-400 group-open:rotate-180 transition"></i>
                            </summary>

                            <div class="border-t border-slate-200/70 dark:border-slate-700 p-4 space-y-4">

                                @foreach($test['questions'] as $q)
                                    <div class="rounded-xl p-4 border
                                        {{ $q['is_correct'] ? 'border-emerald-300 bg-emerald-50/60 dark:border-emerald-700 dark:bg-emerald-900/30'
                                                            : 'border-rose-300 bg-rose-50/60 dark:border-rose-700 dark:bg-rose-900/30' }}">

                                        <p class="text-sm font-semibold text-slate-800 dark:text-white">
                                            {{ $q['question_text'] }}
                                        </p>

                                        <div class="mt-2 text-xs space-y-1">
                                            <p class="text-slate-700 dark:text-slate-200">
                                                إجابتك:
                                                <span class="font-semibold">{{ $q['user_answer'] }}</span>
                                            </p>

                                            <p class="text-slate-700 dark:text-slate-200">
                                                الإجابة الصحيحة:
                                                <span class="font-semibold text-emerald-500">
                                                    {{ $q['correct_answer'] }}
                                                </span>
                                            </p>

                                            <p>
                                                الحالة:
                                                @if($q['is_correct'])
                                                    <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-300 border border-emerald-500/30">
                                                        صحيح
                                                    </span>
                                                @else
                                                    <span class="px-2 py-0.5 rounded-full bg-rose-500/15 text-rose-600 dark:text-rose-300 border border-rose-500/30">
                                                        خطأ
                                                    </span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </details>
                    @endforeach

                </div>
            @endforeach
        @endif

    </div>
</div>
@endsection