@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'النتائج النهائية' : 'Final Results')

@section('content')
@php
    $isAr = app()->getLocale() === 'ar';
    $published = $termResults->filter(fn($r) => $r['marks']->isNotEmpty())->count();
@endphp

<div class="flex flex-col gap-6">

    {{-- Header --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 lg:p-7">
        <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <p class="text-[11px] font-black uppercase tracking-[0.2em] text-brand-600 dark:text-brand-400">
                    {{ $currentYear?->name ?? ($isAr ? 'السنة الحالية' : 'Current Year') }}
                </p>
                <h1 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white">
                    {{ $isAr ? 'النتائج النهائية' : 'Final Results' }}
                </h1>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">
                    {{ $isAr ? 'نتائجك النهائية حسب الفصول الدراسية.' : 'Your final results by academic term.' }}
                </p>
            </div>
            <div class="flex shrink-0 flex-wrap gap-3">
                <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-5 py-3 text-center dark:border-zinc-700 dark:bg-zinc-950">
                    <p class="text-[11px] font-black uppercase tracking-widest text-zinc-400">{{ $isAr ? 'الفصول' : 'Terms' }}</p>
                    <p class="mt-1 text-2xl font-black text-zinc-900 dark:text-white">{{ $termResults->count() }}</p>
                </div>
                <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-3 text-center dark:border-emerald-500/20 dark:bg-emerald-500/10">
                    <p class="text-[11px] font-black uppercase tracking-widest text-emerald-500">{{ $isAr ? 'منشورة' : 'Published' }}</p>
                    <p class="mt-1 text-2xl font-black text-emerald-700 dark:text-emerald-400">{{ $published }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Empty --}}
    @if($termResults->isEmpty())
        <div class="rounded-[2rem] border border-dashed border-zinc-300 bg-white p-16 text-center dark:border-zinc-700 dark:bg-zinc-900">
            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-zinc-100 text-zinc-400 dark:bg-zinc-800">
                <i class="fa-solid fa-file-signature text-2xl"></i>
            </div>
            <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'لا توجد نتائج متاحة' : 'No results available' }}</h3>
            <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isAr ? 'ستظهر النتائج بعد نشر ملفات التقييم النهائي.' : 'Results will appear after final evaluation files are published.' }}</p>
        </div>
    @else
        <div class="flex flex-col gap-5">
            @foreach($termResults as $result)
            @php
                $hasMarks = $result['marks']->isNotEmpty();
                $avg = $result['average'];
                $avgColor = !$avg ? 'text-zinc-400'
                    : ($avg >= 90 ? 'text-emerald-600 dark:text-emerald-400'
                    : ($avg >= 75 ? 'text-brand-600 dark:text-brand-400'
                    : ($avg >= 60 ? 'text-amber-600 dark:text-amber-400'
                    : 'text-red-600 dark:text-red-400')));
                $barColor = !$avg ? 'bg-zinc-300'
                    : ($avg >= 90 ? 'bg-emerald-500' : ($avg >= 75 ? 'bg-brand-600' : ($avg >= 60 ? 'bg-amber-500' : 'bg-red-500')));
            @endphp
            <section class="rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">

                {{-- Term Header --}}
                <div class="flex flex-wrap items-center justify-between gap-4 border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <div>
                        <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ __($result['term']->name) }}</h2>
                        @if($result['evaluation']?->title)
                            <p class="mt-0.5 text-xs text-zinc-400">{{ $result['evaluation']->title }}</p>
                        @endif
                    </div>
                    @if($hasMarks)
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-center dark:border-zinc-700 dark:bg-zinc-950">
                            <p class="text-[10px] font-black uppercase text-zinc-400">{{ $isAr ? 'المواد' : 'Subjects' }}</p>
                            <p class="text-lg font-black text-zinc-900 dark:text-white">{{ $result['marks']->count() }}</p>
                        </div>
                        <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-center dark:border-zinc-700 dark:bg-zinc-950">
                            <p class="text-[10px] font-black uppercase text-zinc-400">{{ $isAr ? 'المجموع' : 'Total' }}</p>
                            <p class="text-lg font-black text-zinc-900 dark:text-white">{{ $result['total'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-center dark:border-zinc-700 dark:bg-zinc-950">
                            <p class="text-[10px] font-black uppercase text-zinc-400">{{ $isAr ? 'المتوسط' : 'Average' }}</p>
                            <p class="text-lg font-black {{ $avgColor }}">{{ $avg ?? '—' }}</p>
                        </div>
                    </div>
                    @endif
                </div>

                {{-- No marks --}}
                @if(!$hasMarks)
                    <div class="p-6 text-sm text-zinc-400">
                        {{ $isAr ? 'لا توجد درجات منشورة لهذا الفصل حتى الآن.' : 'No published marks for this term yet.' }}
                    </div>
                @else
                    {{-- Average bar --}}
                    @if($avg)
                    <div class="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800">
                        <div class="flex items-center justify-between text-xs mb-1.5">
                            <span class="font-bold text-zinc-400">{{ $isAr ? 'المتوسط العام' : 'Overall average' }}</span>
                            <span class="font-black {{ $avgColor }}">{{ $avg }}%</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"
                             role="progressbar" aria-valuenow="{{ $avg }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="h-full rounded-full {{ $barColor }}" style="width: {{ min(100, $avg) }}%"></div>
                        </div>
                    </div>
                    @endif

                    {{-- Marks table --}}
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-zinc-100 dark:border-zinc-800">
                                    <th class="px-6 py-3 text-start text-[11px] font-black uppercase tracking-widest text-zinc-400">#</th>
                                    <th class="px-6 py-3 text-start text-[11px] font-black uppercase tracking-widest text-zinc-400">{{ $isAr ? 'المادة' : 'Subject' }}</th>
                                    <th class="px-6 py-3 text-end text-[11px] font-black uppercase tracking-widest text-zinc-400">{{ $isAr ? 'الدرجة' : 'Mark' }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                                @foreach($result['marks'] as $mark)
                                @php
                                    $m = (float) $mark->mark;
                                    $mc = $m >= 90 ? 'text-emerald-600 dark:text-emerald-400'
                                        : ($m >= 75 ? 'text-brand-600 dark:text-brand-400'
                                        : ($m >= 60 ? 'text-amber-600 dark:text-amber-400'
                                        : 'text-red-600 dark:text-red-400'));
                                @endphp
                                <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                                    <td class="px-6 py-3.5 text-sm font-bold text-zinc-400">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-3.5 text-sm font-bold text-zinc-800 dark:text-zinc-200">{{ $mark->subject?->name ?: '—' }}</td>
                                    <td class="px-6 py-3.5 text-end text-sm font-black {{ $mc }}">{{ $mark->mark }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </section>
            @endforeach
        </div>
    @endif

</div>
@endsection