@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'التقييمات' : 'Evaluations')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'التقييمات والنتائج' : 'Evaluations & Results' }}</h1>
        <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'ملخص درجاتك في الاختبارات والواجبات وسجلات الدرجات المنشورة.' : 'A summary of your quiz scores, assignments, and published marks.' }}</p>
    </div>

    <div class="space-y-5">
        @foreach($evaluations as $courseId => $evaluation)
            <section class="student-card p-5">
                <div class="mb-5 flex flex-wrap items-center justify-between gap-4">
                    <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'مقرر رقم' : 'Course' }} {{ $courseId }}</h3>
                    <div class="flex flex-wrap gap-2 text-xs font-black">
                        <span class="rounded-full bg-primary-light px-3 py-2 text-primary">{{ app()->getLocale() === 'ar' ? 'اختبارات' : 'Quizzes' }}: {{ $evaluation['quizzes']->count() }}</span>
                        <span class="rounded-full bg-secondary-light px-3 py-2 text-secondary-dark">{{ app()->getLocale() === 'ar' ? 'واجبات' : 'Assignments' }}: {{ $evaluation['assignments']->count() }}</span>
                        <span class="rounded-full bg-tertiary-light px-3 py-2 text-tertiary-dark">{{ app()->getLocale() === 'ar' ? 'درجات' : 'Marks' }}: {{ $evaluation['marks']->count() }}</span>
                    </div>
                </div>

                <div class="grid gap-4 lg:grid-cols-3">
                    <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                        <div class="mb-3 text-sm font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'نتائج الاختبارات' : 'Quiz Results' }}</div>
                        <div class="space-y-3">
                            @foreach ($evaluation['quizzes'] as $quizAnswer)
                                <div class="rounded-xl bg-white p-3 dark:bg-zinc-900">
                                    <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $quizAnswer->quiz?->title ?: (app()->getLocale() === 'ar' ? 'اختبار' : 'Quiz') }}</div>
                                    <div class="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'الدرجة' : 'Score' }}: {{ $quizAnswer->student_score ?? 0 }}</div>
                                </div>
                            @endforeach
@if(empty($evaluation['quizzes']))
                                <div class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'لا توجد نتائج اختبارات بعد.' : 'No quiz results yet.' }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                        <div class="mb-3 text-sm font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'نتائج الواجبات' : 'Assignment Results' }}</div>
                        <div class="space-y-3">
                            @foreach($evaluation['assignments'] as $submission)
                                <div class="rounded-xl bg-white p-3 dark:bg-zinc-900">
                                    <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $submission->assignment?->title ?: (app()->getLocale() === 'ar' ? 'واجب' : 'Assignment') }}</div>
                                    <div class="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'الدرجة' : 'Score' }}: {{ $submission->score ?? 0 }}</div>
                                </div>
                            @endforeach
@if(empty($evaluation['assignments']))
                                <div class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'لا توجد نتائج واجبات بعد.' : 'No assignment results yet.' }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="rounded-2xl bg-zinc-50 p-4 dark:bg-zinc-950">
                        <div class="mb-3 text-sm font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'سجل الدرجات' : 'Published Marks' }}</div>
                        <div class="space-y-3">
                            @foreach($evaluation['marks'] as $studentMark)
                                <div class="rounded-xl bg-white p-3 dark:bg-zinc-900">
                                    <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $studentMark->getRelationValue('mark')?->title ?: (app()->getLocale() === 'ar' ? 'درجة منشورة' : 'Published Mark') }}</div>
                                    <div class="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'الدرجة' : 'Score' }}: {{ $studentMark->mark ?? 0 }}</div>
                                </div>
                            @endforeach
@if(empty($evaluation['marks']))
                                <div class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'لا توجد درجات منشورة بعد.' : 'No published marks yet.' }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        @endforeach
        @if(empty($evaluations))
            <div class="student-card p-10 text-center">
                <div class="text-5xl">📊</div>
                <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ app()->getLocale() === 'ar' ? 'لا توجد تقييمات متاحة' : 'No evaluations available' }}</h3>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ app()->getLocale() === 'ar' ? 'ستظهر نتائجك هنا عند توفرها.' : 'Your results will appear here once available.' }}</p>
            </div>
        @endif
    </div>
@endsection