@extends('layouts.main_dashboard.app')

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

@section('title', ($isAr ? 'تعديل درجات الطالب' : 'Edit Student Marks') . ' | ' . $student->name)

@section('content')
<div class="space-y-8 pb-20">
    <!-- Modern Header -->
    <div class="relative overflow-hidden rounded-xl bg-surface-900 p-8 lg:p-12 text-white shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/20 via-transparent to-transparent opacity-50"></div>
        <div class="absolute -end-12 -top-12 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl"></div>
        
        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-8">
            <div class="space-y-4">
                <nav class="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-surface-500">
                    <a href="{{ route('admin.final_evaluations.index') }}" class="hover:text-white transition-colors">{{ __('dashboard.Final Evaluations') }}</a>
                    <i class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[8px]"></i>
                    <a href="{{ route('admin.final_evaluations.show', $evaluation->id) }}" class="hover:text-white transition-colors">{{ $evaluation->title }}</a>
                    <i class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[8px]"></i>
                    <span class="text-indigo-400">{{ $isAr ? 'تعديل الدرجات' : 'Edit Marks' }}</span>
                </nav>
                <div class="flex items-center gap-6">
                    <div class="h-20 w-20 rounded-3xl bg-white/5 border border-white/10 flex items-center justify-center text-3xl font-black text-indigo-400 shadow-inner backdrop-blur-sm">
                        {{ substr($student->first_name, 0, 1) }}
                    </div>
                    <div>
                        <h1 class="text-3xl lg:text-4xl font-black tracking-tight leading-tight">
                            {{ $student->first_name }} {{ $student->last_name }}
                        </h1>
                        <p class="text-surface-400 font-medium mt-1">{{ $student->registration_number }}</p>
                    </div>
                </div>
            </div>
            
            <div class="flex flex-wrap gap-3">
                @php $class = $student->schoolClass->first(); @endphp
                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-black uppercase tracking-widest text-surface-300">
                    <i class="fa-solid fa-layer-group text-indigo-400"></i>
                    {{ $evaluation->grade->stage->name ?? '-' }}
                </span>
                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-black uppercase tracking-widest text-surface-300">
                    <i class="fa-solid fa-graduation-cap text-indigo-400"></i>
                    {{ $class->name ?? '-' }}
                </span>
            </div>
        </div>
    </div>

    <!-- Marks Entry Form -->
    <div class="bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-800 shadow-sm overflow-hidden">
        <div class="p-8 border-b border-surface-100 dark:border-surface-800 flex items-center gap-4 bg-surface-50/50 dark:bg-surface-800/50">
            <div class="h-12 w-12 rounded-2xl bg-white dark:bg-surface-900 border border-surface-100 dark:border-surface-800 flex items-center justify-center text-indigo-600 shadow-sm">
                <i class="fa-solid fa-pen-to-square text-xl"></i>
            </div>
            <div>
                <h3 class="font-black text-xl text-surface-900 dark:text-white">{{ $isAr ? 'رصد الدرجات النهائية' : 'Record Final Marks' }}</h3>
                <p class="text-xs text-surface-500 font-medium">{{ $isAr ? 'أدخل الدرجات لكل مادة دراسية، سيتم حساب التقدير تلقائياً.' : 'Enter marks for each subject, rating will be calculated automatically.' }}</p>
            </div>
        </div>

        <form action="{{ route('admin.final_evaluations.update_student', [$evaluation->id, $student->id]) }}" method="POST">
            @csrf
            <div class="overflow-x-auto">
                <table class="w-full text-start">
                    <thead>
                        <tr class="text-start border-b border-surface-100 dark:border-surface-800">
                            <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-start">{{ $isAr ? 'المادة الدراسية' : 'Subject' }}</th>
                            <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-center w-40">{{ $isAr ? 'الدرجة' : 'Mark' }}</th>
                            <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-center w-48">{{ $isAr ? 'التقدير المتوقع' : 'Estimated Rating' }}</th>
                            <th class="px-8 py-5 text-[10px] font-black uppercase tracking-[0.2em] text-surface-400 text-center w-24">{{ $isAr ? 'الحالة' : 'Status' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-50 dark:divide-surface-800/50">
                        @foreach($subjects as $subject)
                            @php $currentMark = $marks[$subject->id] ?? ''; @endphp
                            <tr class="group hover:bg-surface-50/30 dark:hover:bg-surface-800/20 transition-colors">
                                <td class="px-8 py-6">
                                    <div class="flex items-center gap-3">
                                        <div class="h-8 w-8 rounded-lg bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-xs font-black text-surface-400">
                                            {{ $loop->iteration }}
                                        </div>
                                        <div>
                                            <p class="text-sm font-black text-surface-900 dark:text-white">{{ $subject->name }}</p>
                                            <p class="text-[10px] font-bold text-surface-400 uppercase tracking-widest mt-0.5">{{ $isAr ? 'الدرجة العظمى' : 'Max Mark' }}: {{ $subject->total_marks }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6">
                                    <div class="relative group/input">
                                        <input type="number" step="0.01" min="0" max="{{ $subject->total_marks }}" 
                                               name="marks[{{ $subject->id }}]" 
                                               class="mark-input w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-center text-sm font-black text-surface-900 outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 dark:border-surface-800 dark:bg-surface-950 dark:text-white transition-all" 
                                               value="{{ $currentMark }}" placeholder="0.00" 
                                               data-subject-id="{{ $subject->id }}"
                                               data-max-mark="{{ $subject->total_marks }}">
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-center">
                                    <span id="rating_text_{{ $subject->id }}" class="text-xs font-black uppercase tracking-widest">-</span>
                                </td>
                                <td class="px-8 py-6">
                                    <div id="rating_color_{{ $subject->id }}" class="mx-auto h-3 w-3 rounded-full bg-surface-200 dark:bg-surface-800 transition-colors duration-300 shadow-sm"></div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="p-8 border-t border-surface-100 dark:border-surface-800 flex items-center justify-end gap-4 bg-surface-50/30 dark:bg-surface-800/10">
                <a href="{{ route('admin.final_evaluations.show', $evaluation->id) }}" class="px-8 py-4 rounded-2xl text-sm font-black text-surface-500 hover:text-surface-700 dark:text-surface-400 dark:hover:text-surface-200 transition-colors">
                    {{ $isAr ? 'إلغاء' : 'Discard' }}
                </a>
                <button type="submit" class="inline-flex items-center gap-3 rounded-2xl bg-surface-900 px-10 py-4 font-black text-white transition-all hover:bg-surface-800 hover:scale-105 shadow-xl shadow-surface-900/20 group">
                    <i class="fa-solid fa-floppy-disk transition-transform group-hover:scale-110"></i>
                    <span>{{ $isAr ? 'حفظ التغييرات' : 'Save Changes' }}</span>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.mark-input');

        function updateRating(input) {
            const subjectId = input.getAttribute('data-subject-id');
            const maxMark = parseFloat(input.getAttribute('data-max-mark')) || 100;
            const score = parseFloat(input.value);
            const textEl = document.getElementById(`rating_text_${subjectId}`);
            const colorEl = document.getElementById(`rating_color_${subjectId}`);

            let text = '-';
            let colorClass = 'bg-surface-200 dark:bg-surface-800';
            let textClass = 'text-surface-400';
            
            const percentage = (score / maxMark) * 100;

            if (!isNaN(score)) {
                if (percentage >= 85) {
                    text = '{{ $isAr ? "ممتاز" : "Excellent" }}';
                    colorClass = 'bg-emerald-500 shadow-emerald-500/50';
                    textClass = 'text-emerald-600 dark:text-emerald-400';
                } else if (percentage >= 75) {
                    text = '{{ $isAr ? "جيد جداً" : "V.Good" }}';
                    colorClass = 'bg-blue-500 shadow-blue-500/50';
                    textClass = 'text-blue-600 dark:text-blue-400';
                } else if (percentage >= 65) {
                    text = '{{ $isAr ? "جيد" : "Good" }}';
                    colorClass = 'bg-amber-500 shadow-amber-500/50';
                    textClass = 'text-amber-600 dark:text-amber-400';
                } else if (percentage >= 50) {
                    text = '{{ $isAr ? "مقبول" : "Pass" }}';
                    colorClass = 'bg-orange-500 shadow-orange-500/50';
                    textClass = 'text-orange-600 dark:text-orange-400';
                } else {
                    text = '{{ $isAr ? "ضعيف" : "Fail" }}';
                    colorClass = 'bg-rose-500 shadow-rose-500/50';
                    textClass = 'text-rose-600 dark:text-rose-400';
                }
            }

            textEl.textContent = text;
            textEl.className = `text-xs font-black uppercase tracking-widest transition-colors duration-300 ${textClass}`;
            colorEl.className = `mx-auto h-3 w-3 rounded-full transition-all duration-300 shadow-lg ${colorClass}`;
        }

        inputs.forEach(input => {
            updateRating(input);
            input.addEventListener('input', function() {
                updateRating(this);
            });
        });
    });
</script>
@endsection