@extends('layouts.main_dashboard.app')

@php
    $isAr = app()->getLocale() === 'ar';
@endphp

@section('title', $evaluation->title)

@section('content')
<div class="max-w-full space-y-6 overflow-x-hidden pb-20">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col justify-between gap-6 md:flex-row md:items-center">
            <div class="min-w-0 space-y-4">
                <nav class="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-surface-400">
                    <a href="{{ route('admin.final_evaluations.index') }}" class="transition hover:text-surface-700 dark:hover:text-surface-200">{{ __('dashboard.Final Evaluations') }}</a>
                    <i class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[8px]"></i>
                    <span class="text-brand-600 dark:text-brand-300">{{ $evaluation->title }}</span>
                </nav>
                <h1 class="break-words text-3xl font-black leading-tight tracking-tight text-surface-900 dark:text-white lg:text-[2.5rem]">
                    {{ $evaluation->title }}
                </h1>
                <div class="flex flex-wrap gap-3 pt-2">
                    <span class="inline-flex items-center gap-2 rounded-xl bg-surface-100 px-4 py-2 text-xs font-black uppercase tracking-widest text-surface-600 dark:bg-surface-800 dark:text-surface-300">
                        <i class="fa-solid fa-layer-group text-brand-400"></i>
                        {{ $evaluation->grade->stage->name ?? '-' }}
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-xl bg-surface-100 px-4 py-2 text-xs font-black uppercase tracking-widest text-surface-600 dark:bg-surface-800 dark:text-surface-300">
                        <i class="fa-solid fa-graduation-cap text-brand-400"></i>
                        {{ $evaluation->grade->name ?? '-' }}
                    </span>
                </div>
            </div>
            
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.final_evaluations.index') }}" class="inline-flex h-12 items-center gap-3 rounded-xl border border-surface-200 px-5 text-sm font-black text-surface-700 transition hover:border-surface-300 dark:border-surface-700 dark:text-surface-200">
                    <i class="fa-solid fa-arrow-{{ $isAr ? 'right' : 'left' }}"></i>
                    <span>{{ $isAr ? 'العودة' : 'Back' }}</span>
                </a>
            </div>
        </div>
    </section>

    <div class="grid max-w-full gap-8 md:grid-cols-2">
        <div class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900 text-start">
            <div class="p-8 space-y-6">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-300">
                    <i class="fa-solid fa-file-excel"></i>
                </div>
                <div>
                    <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'الخطوة 1: تصدير القالب' : 'Step 1: Export Template' }}</h3>
                    <p class="mt-2 text-sm font-medium text-surface-500 dark:text-surface-400 leading-relaxed">
                        {{ $isAr ? "قم بتحميل ملف Excel الموحد للصف: " : "Download the standardized Excel sheet for: " }} 
                        <strong class="text-surface-900 dark:text-white">{{ $evaluation->grade->name }}</strong>. 
                        {{ $isAr ? "يرجى عدم تعديل عناوين الأعمدة." : "Please do not alter the header columns." }}
                    </p>
                </div>
                <a href="{{ route('admin.final_evaluations.download', $evaluation->id) }}" class="inline-flex items-center gap-3 rounded-2xl bg-emerald-600 px-8 py-4 font-black text-white transition hover:bg-emerald-700">
                    <i class="fa-solid fa-download"></i>
                    <span>{{ $isAr ? 'تحميل قالب Excel' : 'Download Excel Template' }}</span>
                </a>
            </div>
        </div>

        <div class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900 text-start">
            <div class="p-8 space-y-6">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                    <i class="fa-solid fa-cloud-arrow-up"></i>
                </div>
                <div>
                    <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'الخطوة 2: استيراد الدرجات' : 'Step 2: Import Marks' }}</h3>
                    <p class="mt-2 text-sm font-medium text-surface-500 dark:text-surface-400 leading-relaxed">
                        {{ $isAr ? 'قم برفع ملف Excel المكتمل لتحديث الدرجات تلقائياً. سيتم استبدال الدرجات الموجودة.' : 'Upload the filled Excel file to update marks automatically. Existing marks will be overwritten.' }}
                    </p>
                </div>
                <form action="{{ route('admin.final_evaluations.import', $evaluation->id) }}" method="POST" enctype="multipart/form-data" class="flex flex-col sm:flex-row gap-3">
                    @csrf
                    <div class="flex-1 relative group/file">
                        <input type="file" name="file" id="file_upload" class="hidden" accept=".xlsx,.xls" required>
                        <label for="file_upload" class="flex cursor-pointer items-center gap-3 rounded-2xl border-2 border-dashed border-surface-200 bg-surface-50 px-4 py-4 dark:border-surface-800 dark:bg-surface-950/50">
                            <i class="fa-solid fa-paperclip text-surface-400"></i>
                            <span class="text-xs font-bold text-surface-500 truncate" id="file_name">{{ $isAr ? 'اختر ملف...' : 'Choose file...' }}</span>
                        </label>
                    </div>
                    <button type="submit" class="inline-flex items-center justify-center gap-3 rounded-2xl bg-surface-900 px-8 py-4 font-black text-white transition hover:bg-surface-800">
                        <i class="fa-solid fa-upload"></i>
                        <span>{{ $isAr ? 'رفع' : 'Upload' }}</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="max-w-full overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900" x-data="{ query: '' }">
        <div class="flex flex-col justify-between gap-6 border-b border-surface-100 bg-surface-50/50 p-8 dark:border-surface-800 dark:bg-surface-800/50 lg:flex-row lg:items-center">
            <div class="flex items-center gap-4">
                <div class="h-10 w-10 rounded-xl bg-brand-100 dark:bg-brand-500/20 text-brand-600 flex items-center justify-center">
                    <i class="fa-solid fa-users"></i>
                </div>
                <div>
                    <h3 class="font-black text-surface-900 dark:text-white">{{ $isAr ? 'الطلاب والدرجات' : 'Students & Marks' }}</h3>
                    <p class="text-xs text-surface-500 font-medium">{{ $isAr ? 'إجمالي الطلاب:' : 'Total Students:' }} {{ $students->count() }}</p>
                </div>
            </div>
            
            <div class="relative w-full max-w-sm group">
                <i class="fa-solid fa-magnifying-glass absolute start-4 top-1/2 -translate-y-1/2 text-surface-400 group-focus-within:text-brand-500 transition-colors"></i>
                <input x-model="query" type="text" class="w-full rounded-2xl border border-surface-200 bg-white ps-11 pe-4 py-3.5 text-sm font-bold text-surface-900 outline-none focus:border-brand-500 focus:ring-4 focus:ring-brand-500/5 dark:border-surface-800 dark:bg-surface-900 dark:text-white transition" placeholder="{{ $isAr ? 'ابحث عن طالب باسمه أو رقمه...' : 'Search student by name or number...' }}">
            </div>
        </div>

        <div class="max-w-full overflow-x-auto overscroll-x-contain custom-scrollbar">
            <table class="min-w-max w-full border-collapse text-start">
                <thead>
                    <tr class="text-start border-b border-surface-100 dark:border-surface-800">
                        <th class="min-w-[250px] px-8 py-5 text-start text-[10px] font-black uppercase tracking-[0.2em] text-surface-400">{{ $isAr ? 'اسم الطالب' : 'Student Name' }}</th>
                        <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-start min-w-[120px]">{{ $isAr ? 'الفصل' : 'Class' }}</th>
                        @foreach($subjects as $sub)
                            <th class="px-6 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-center min-w-[140px] bg-surface-50/30 dark:bg-surface-800/10">
                                <div class="flex flex-col items-center gap-1">
                                    <span class="text-surface-900 dark:text-white">{{ $sub->name }}</span>
                                    <span class="text-[9px] text-surface-400">MAX: {{ $sub->total_marks }}</span>
                                </div>
                            </th>
                        @endforeach
                        <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-end min-w-[120px]">{{ $isAr ? 'الإجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50 dark:divide-surface-800/50">
                    @forelse($students as $student)
                        @php $class = $student->schoolClass->first(); @endphp
                        <tr x-show="'{{ strtolower($student->first_name . ' ' . $student->last_name . ' ' . $student->registration_number) }}'.includes(query.toLowerCase())" class="hover:bg-surface-50/50 dark:hover:bg-surface-800/30">
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-4">
                                    <div class="h-10 w-10 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-xs font-black text-surface-400 border border-surface-200 dark:border-surface-700">
                                        {{ substr($student->first_name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $student->first_name }} {{ $student->last_name }}</p>
                                        <p class="text-[10px] font-bold text-surface-400 mt-0.5 tracking-widest">{{ $student->registration_number }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-sm font-bold text-surface-600 dark:text-surface-300">
                                <span class="px-2 py-1 rounded-lg bg-surface-100 dark:bg-surface-800 text-[10px]">{{ $class->name ?? 'N/A' }}</span>
                            </td>
                            @foreach($subjects as $sub)
                                @php
                                    $markRecord = $student->finalEvaluationMarks->where('subject_id', $sub->id)->first();
                                    $markValue = $markRecord ? $markRecord->mark : null;
                                    $isFailing = is_numeric($markValue) && $markValue < ($sub->total_marks * 0.5);
                                @endphp
                                <td class="px-6 py-6 text-center">
                                    @if(is_numeric($markValue))
                                        <div class="inline-flex items-center justify-center px-3 py-1.5 rounded-xl font-black text-sm {{ $isFailing ? 'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400 border border-rose-100 dark:border-rose-500/20' : 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20' }}">
                                            {{ $markValue }}
                                        </div>
                                    @else
                                        <span class="text-surface-300 dark:text-surface-700">-</span>
                                    @endif
                                </td>
                            @endforeach
                            <td class="px-8 py-6 text-end">
                                <a href="{{ route('admin.final_evaluations.edit_student', [$evaluation->id, $student->id]) }}" class="flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200 bg-white text-surface-400 shadow-sm transition hover:border-brand-200 hover:text-brand-600 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/30" title="{{ $isAr ? 'تعديل الدرجات' : 'Edit Marks' }}">
                                    <i class="fa-solid fa-pen-to-square text-sm"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($subjects) + 3 }}" class="px-8 py-20 text-center">
                                <div class="w-16 h-16 rounded-3xl bg-surface-50 dark:bg-surface-800/50 flex items-center justify-center mx-auto mb-4">
                                    <i class="fa-solid fa-user-slash text-2xl text-surface-200 dark:text-surface-700"></i>
                                </div>
                                <p class="text-sm font-bold text-surface-400">{{ $isAr ? 'لا يوجد طلاب مسجلين لهذا الصف.' : 'No students found for this grade.' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('file_upload').addEventListener('change', function(e) {
        const fileName = e.target.files[0]?.name || '{{ $isAr ? "اختر ملف..." : "Choose file..." }}';
        document.getElementById('file_name').textContent = fileName;
    });
</script>
<style>
    .custom-scrollbar::-webkit-scrollbar { height: 8px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 10px; }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #27272a; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }
</style>
@endsection