@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الحالات والطلاب' : 'Students and Cases')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6">
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.24em] text-rose-600">{{ $isArabic ? 'الحالات والطلاب' : 'Students & Cases' }}</p>
                <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'متابعة الحالات الفردية ذات الأولوية' : 'Track high-priority individual cases' }}</h1>
                <p class="mt-3 max-w-3xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'صفحة عملية تضع الطلاب الأكثر احتياجًا في مقدمة المشهد، مع أحدث الحالات المسجلة داخل نطاقك.' : 'A practical page that keeps the highest-need students in focus, alongside the latest recorded cases in your scope.' }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
                <div class="rounded-2xl bg-rose-50 px-5 py-4 dark:bg-rose-500/10">
                    <p class="text-xs font-black text-rose-700 dark:text-rose-300">{{ $isArabic ? 'طلاب بحاجة متابعة' : 'Students needing follow-up' }}</p>
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $flaggedStudentsCount }}</p>
                </div>
                <div class="rounded-2xl bg-zinc-100 px-5 py-4 dark:bg-zinc-900">
                    <p class="text-xs font-black text-zinc-600 dark:text-zinc-400">{{ $isArabic ? 'حالات حديثة' : 'Recent cases' }}</p>
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $recentCaseCards->count() }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="space-y-6">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الطلاب الأكثر احتياجًا للدعم' : 'Students needing the most support' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تجميع تلقائي بحسب تكرار الغياب ودرجة الأولوية.' : 'Automatically grouped by absence frequency and intervention priority.' }}</p>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
                    <thead class="bg-zinc-50 dark:bg-zinc-900/60">
                        <tr class="text-start text-xs font-black uppercase tracking-[0.2em] text-zinc-500 dark:text-zinc-400">
                            <th class="px-6 py-4">{{ $isArabic ? 'الطالب' : 'Student' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الصف' : 'Class' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'عدد الغياب' : 'Absences' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'آخر غياب' : 'Last absence' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الأولوية' : 'Priority' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                        @foreach($flaggedStudentRows as $row)
                            <tr>
                                <td class="px-6 py-4">
                                    <a href="{{ route('social-worker.students.show', $row['id']) }}" class="text-sm font-black text-zinc-900 hover:text-rose-600 dark:text-white dark:hover:text-rose-300">{{ $row['name'] }}</a>
                                    <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $row['registration_number'] }}</div>
                                </td>
                                <td class="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">{{ $row['class_name'] }}</td>
                                <td class="px-6 py-4 text-sm font-black text-zinc-900 dark:text-white font-numbers">{{ $row['absences_count'] }}</td>
                                <td class="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">{{ $row['last_absence_label'] }}</td>
                                <td class="px-6 py-4">
                                    <span class="rounded-full bg-rose-100 px-3 py-1 text-xs font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $row['risk_label'] }}</span>
                                </td>
                            </tr>
                        @endforeach
                        @if($flaggedStudentRows->isEmpty())
                            <tr>
                                <td colspan="5" class="px-6 py-10 text-center text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'لا توجد حالات طلابية حرجة حتى الآن.' : 'No critical student cases yet.' }}</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أحدث الحالات المسجلة' : 'Latest recorded cases' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'آخر وقائع الغياب التي تم رصدها في الفصول المسندة.' : 'The most recent absence records captured in assigned classes.' }}</p>
            </div>
            <div class="space-y-3 p-6">
                @foreach($recentCaseCards as $case)
                    <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h3 class="text-sm font-black text-zinc-900 dark:text-white">{{ $case['student_name'] }}</h3>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $case['class_name'] }}</p>
                            </div>
                            <span class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $case['date_label'] }}</span>
                        </div>
                        <div class="mt-4 flex items-center justify-between text-sm">
                            <span class="text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المادة' : 'Subject' }}</span>
                            <span class="font-bold text-zinc-900 dark:text-white">{{ $case['subject_name'] }}</span>
                        </div>
                    </article>
                @endforeach
                @if($recentCaseCards->isEmpty())
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد حالات حديثة.' : 'No recent cases.' }}</div>
                @endif
            </div>
        </div>
    </section>
</div>
@endsection