@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'تنبيهات صحية للطلاب' : 'Student Health Alerts')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6">
    <section class="grid gap-4 md:grid-cols-3">
        <div class="rounded-3xl border border-surface-200 bg-white p-6 dark:border-surface-800 dark:bg-surface-950"><div class="text-sm font-black text-surface-500 dark:text-surface-400">{{ $isArabic ? 'طلاب لديهم تنبيهات' : 'Students with alerts' }}</div><div class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $summary['total_alerts'] }}</div></div>
        <div class="rounded-3xl border border-surface-200 bg-white p-6 dark:border-surface-800 dark:bg-surface-950"><div class="text-sm font-black text-surface-500 dark:text-surface-400">{{ $isArabic ? 'حالات شديدة' : 'Severe conditions' }}</div><div class="mt-3 text-3xl font-black text-rose-600">{{ $summary['severe_conditions'] }}</div></div>
        <div class="rounded-3xl border border-surface-200 bg-white p-6 dark:border-surface-800 dark:bg-surface-950"><div class="text-sm font-black text-surface-500 dark:text-surface-400">{{ $isArabic ? 'حساسيات شديدة' : 'Severe allergies' }}</div><div class="mt-3 text-3xl font-black text-amber-600">{{ $summary['severe_allergies'] }}</div></div>
    </section>

    <section class="rounded-3xl border border-surface-200 bg-white p-6 dark:border-surface-800 dark:bg-surface-950">
        <h1 class="text-2xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تنبيهات صحية ظاهرة للمعلمين' : 'Teacher-visible health alerts' }}</h1>
        <div class="mt-5 space-y-4">
            @forelse($studentAlertCards as $student)
                <div class="rounded-2xl border border-surface-200 p-5 dark:border-surface-800">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div>
                            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $student['name'] }}</h2>
                            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $student['class_name'] }}</p>
                            @if($student['teacher_alert_note'])
                                <p class="mt-3 rounded-2xl bg-rose-50 px-4 py-3 text-sm font-bold text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $student['teacher_alert_note'] }}</p>
                            @endif
                        </div>
                        @if($student['severe_condition_flag'])
                            <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">{{ $isArabic ? 'تحذير شديد' : 'Severe alert' }}</span>
                        @endif
                    </div>
                    <div class="mt-4 grid gap-3 md:grid-cols-2">
                        <div class="rounded-2xl bg-surface-50 p-4 dark:bg-surface-900">
                            <div class="text-xs font-black text-surface-500 dark:text-surface-400">{{ $isArabic ? 'بطاقة الطوارئ' : 'Emergency card' }}</div>
                            <div class="mt-2 text-sm text-surface-900 dark:text-white">{{ $student['emergency_contact'] }}</div>
                            <div class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $student['preferred_hospital'] }}</div>
                        </div>
                        <div class="rounded-2xl bg-surface-50 p-4 dark:bg-surface-900">
                            <div class="text-xs font-black text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الحساسيات الظاهرة' : 'Visible allergies' }}</div>
                            <div class="mt-2 text-sm text-surface-900 dark:text-white">{{ $student['visible_allergies'] }}</div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-2xl border border-dashed border-surface-300 p-6 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">{{ $isArabic ? 'لا توجد تنبيهات صحية ضمن صفوفك الحالية.' : 'There are no health alerts in your current classes.' }}</div>
            @endforelse
        </div>
    </section>
</div>
@endsection