@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.School Classes') . ' | ' . __('dashboard.View School Class'))

@section('content')
<div class="space-y-8">
    <section class="flex flex-col gap-5 rounded-xl bg-gradient-to-br from-violet-600 via-indigo-700 to-surface-900 p-6 text-white shadow-xl lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-xs font-black uppercase tracking-[0.28em] text-violet-100/80">{{ __('dashboard.Class Profile') }}</p>
            <h1 class="mt-3 text-3xl font-black">{{ $schoolClass->name }}</h1>
            <p class="mt-3 max-w-2xl text-sm leading-7 text-violet-50/85">{{ $schoolClass->grade->stage->term->year->name }} / {{ $schoolClass->grade->stage->term->name }} / {{ $schoolClass->grade->stage->name }} / {{ $schoolClass->grade->name }}</p>
            <div class="mt-4 flex flex-wrap gap-4 text-xs font-black text-violet-100/90">
                <span>AR: {{ $schoolClass->getStoredTranslation('ar') ?? '—' }}</span>
                <span>EN: {{ $schoolClass->getStoredTranslation('en') ?: '—' }}</span>
            </div>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('admin.school-classes.edit', $schoolClass->id) }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-violet-700 transition hover:bg-violet-50">
                <i class="fa-solid fa-pen-to-square"></i>
                <span>{{ __('dashboard.Edit') }}</span>
            </a>
            <a href="{{ route('admin.school-classes.addStudentsForm', $schoolClass->id) }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/10 px-4 py-2 text-sm font-bold text-white transition hover:bg-white/20">
                <i class="fa-solid fa-user-plus"></i>
                <span>{{ __('dashboard.Add Students') }}</span>
            </a>
        </div>
    </section>

    <section class="grid gap-6 lg:grid-cols-[1fr_1.4fr]">
        <article class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Add Student') }}</h2>
            <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">أدخل رقم الطالب ثم أضفه مباشرة إلى هذا الصف.</p>

            <form id="add-student-form" action="{{ route('admin.school-classes.addStudent', $schoolClass->id) }}" method="POST" class="mt-6 space-y-4">
                @csrf
                <input type="hidden" name="student_id" id="student-id">
                <input type="text" id="student-id-input" placeholder="{{ __('dashboard.Enter Student ID') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <button type="button" id="add-student-button" class="inline-flex items-center gap-2 rounded-2xl bg-violet-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-violet-700">
                    <i class="fa-solid fa-user-plus"></i>
                    <span>{{ __('dashboard.Add Student') }}</span>
                </button>
                <div id="student-preview"></div>
            </form>
        </article>

        <article class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Students') }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $students->count() }} {{ __('dashboard.Student') }}</p>
            </div>

            @if($students->isEmpty())
                <div class="px-6 py-12 text-center text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
            @else
                <div class="divide-y divide-surface-200 dark:divide-surface-800">
                    @foreach($students as $student)
                        <article class="flex flex-col gap-4 px-6 py-5 transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20 lg:flex-row lg:items-center lg:justify-between">
                            <div class="flex items-center gap-4">
                                <div class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-300">
                                    @if($student->avatar)
                                        <img src="{{ $student->avatar }}" alt="{{ $student->name }}" class="h-full w-full object-cover">
                                    @else
                                        <i class="fa-solid fa-user-graduate"></i>
                                    @endif
                                </div>
                                <div>
                                    <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $student->name }}</h3>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">#{{ $student->id }} · {{ $student->email }}</p>
                                </div>
                            </div>

                            <form action="{{ route('admin.school-classes.removeStudent', ['classId' => $schoolClass->id, 'studentId' => $student->id]) }}" method="POST" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this Item?') }}');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-red-50 px-4 py-2.5 text-sm font-bold text-red-600 transition hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20">
                                    <i class="fa-solid fa-user-minus"></i>
                                    <span>{{ __('dashboard.Remove') }}</span>
                                </button>
                            </form>
                        </article>
                    @endforeach
                </div>
            @endif
        </article>
    </section>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('add-student-button').addEventListener('click', function () {
        const studentId = document.getElementById('student-id-input').value;
        const preview = document.getElementById('student-preview');

        if (!studentId) {
            preview.innerHTML = '<p class="mt-3 rounded-2xl bg-red-50 px-4 py-3 text-sm font-bold text-red-600 dark:bg-red-500/10 dark:text-red-300">يرجى إدخال رقم الطالب أولًا.</p>';
            return;
        }

        fetch(`/admin/students/${studentId}/getStudent`)
            .then(response => response.json())
            .then(data => {
                if (data.id) {
                    document.getElementById('student-id').value = data.id;
                    preview.innerHTML = `<p class="mt-3 rounded-2xl bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-300">${data.name}</p>`;
                    document.getElementById('add-student-form').submit();
                } else {
                    preview.innerHTML = '<p class="mt-3 rounded-2xl bg-red-50 px-4 py-3 text-sm font-bold text-red-600 dark:bg-red-500/10 dark:text-red-300">Student not found</p>';
                }
            });
    });
</script>
@endsection