@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الزائرة الصحية' : 'Health Visitor Dashboard')

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

<div class="space-y-6">
    <section class="student-card p-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الرعاية الصحية' : 'Health monitoring' }}</h1>
                <p class="mt-2 text-sm font-semibold text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'متابعة الغيابات ذات الصلة بصحة الطلاب والفصول المستقبلية.' : 'Track health-related absences and upcoming sessions.' }}
                </p>
            </div>
            <div class="rounded-2xl bg-rose-500 px-5 py-3 text-white">
                <div class="text-xs font-semibold uppercase tracking-[0.4em]">{{ $isArabic ? 'حالات الصحية' : 'Health cases' }}</div>
                <div class="text-3xl font-black font-numbers">{{ $caseCount }}</div>
            </div>
        </div>
        <div class="mt-6 grid gap-4 md:grid-cols-3">
            <div class="rounded-2xl bg-surface-50 p-4 dark:bg-surface-950">
                <div class="text-xs font-semibold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'غيابات المدرسة' : 'School absences' }}</div>
                <div class="mt-3 text-2xl font-black text-surface-900 dark:text-white font-numbers">{{ $attendanceCount }}</div>
                <p class="text-[11px] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'آخر سجلات الحضور' : 'Latest attendance logs' }}</p>
            </div>
            <div class="rounded-2xl bg-surface-50 p-4 dark:bg-surface-950">
                <div class="text-xs font-semibold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'جلسات افتراضية' : 'Virtual sessions' }}</div>
                <div class="mt-3 text-2xl font-black text-surface-900 dark:text-white font-numbers">{{ $upcomingSessionCount }}</div>
                <p class="text-[11px] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'جلسات مبرمجة قادمة' : 'Scheduled meetings ahead' }}</p>
            </div>
            <div class="rounded-2xl bg-surface-50 p-4 dark:bg-surface-950">
                <div class="text-xs font-semibold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تنبيهات النظام' : 'System alerts' }}</div>
                <div class="mt-3 text-2xl font-black text-surface-900 dark:text-white font-numbers">{{ $alertCount }}</div>
                <p class="text-[11px] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'رسائل الصحة الحرجة' : 'Critical messages' }}</p>
            </div>
        </div>
    </section>

    <section class="student-card p-6">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'حالات صحية حديثة' : 'Recent health cases' }}</h2>
            <span class="rounded-full bg-rose-100 px-3 py-1 text-xs font-black text-rose-600">{{ $caseCount }}</span>
        </div>
        <div class="mt-5 space-y-3">
            @forelse ($healthCaseCards as $case)
                <article class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-950">
                    <div>
                        <div class="text-sm font-black text-surface-900 dark:text-white">{{ $case['student_name'] }}</div>
                        <p class="text-xs text-surface-500 dark:text-surface-400">{{ $case['course_name'] }}</p>
                        <p class="text-[11px] text-surface-500 dark:text-surface-400">{{ $case['recorded_at'] }}</p>
                    </div>
                    <span class="rounded-full bg-rose-50 px-3 py-1 text-xs font-black text-rose-600">{{ $isArabic ? 'متابعة طبية' : 'Medical follow-up' }}</span>
                </article>
            @empty
                <div class="rounded-2xl border border-dashed border-surface-300 p-6 text-center text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                    {{ $isArabic ? 'لا توجد حالات صحية جديدة.' : 'No new health cases recorded.' }}
                </div>
            @endforelse
        </div>
    </section>

    <section class="student-card p-6">
        <header class="flex items-center justify-between">
            <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'جلسات افتراضية قادمة' : 'Upcoming virtual sessions' }}</h3>
            <span class="text-xs font-semibold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مستمر' : 'Upcoming' }}</span>
        </header>
        <div class="mt-4 space-y-3">
            @forelse ($upcomingSessionCards as $session)
                <article class="flex items-center justify-between rounded-2xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-950">
                    <div>
                        <div class="text-sm font-black text-surface-900 dark:text-white">{{ $session['title'] }}</div>
                        <p class="text-xs text-surface-500 dark:text-surface-400">{{ $session['course_name'] }}</p>
                    </div>
                    <div class="text-right text-[11px] text-surface-400 dark:text-surface-500">{{ $session['start_label'] }}</div>
                </article>
            @empty
                <div class="rounded-2xl border border-dashed border-surface-300 p-6 text-center text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                    {{ $isArabic ? 'لا توجد جلسات افتراضية مجدولة.' : 'No virtual sessions scheduled.' }}
                </div>
            @endforelse
        </div>
    </section>
</div>
@endsection