@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'لوحة الرعاية الصحية' : 'Health Care Dashboard')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6">

    {{-- ═══ Hero ═══ --}}
    <section class="rounded-[1.75rem] border border-teal-100 bg-gradient-to-br from-slate-50 via-teal-50 to-emerald-50 p-6 dark:border-teal-900/30 dark:from-zinc-900 dark:via-teal-950/40 dark:to-zinc-900 lg:p-8">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <span class="inline-flex items-center gap-2 rounded-full border border-teal-200 bg-white px-3 py-1 text-xs font-black text-teal-700 dark:border-teal-800 dark:bg-teal-950/50 dark:text-teal-300">
                    <i class="fa-solid fa-stethoscope text-teal-500"></i>
                    {{ $isArabic ? 'بوابة الزائرة الصحية' : 'Health Visitor Portal' }}
                </span>
                <h1 class="mt-3 text-2xl font-black tracking-tight text-zinc-900 dark:text-white md:text-3xl">
                    {{ $isArabic ? 'لوحة الرعاية الصحية' : 'Health Care Dashboard' }}
                </h1>
                <p class="mt-2 max-w-xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                    {{ $isArabic ? 'متابعة شاملة للحالات الصحية، العيادة، الأدوية، والتواصل مع أولياء الأمور.' : 'Comprehensive tracking of health cases, clinic, medications, and parent communication.' }}
                </p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('health-visitor.profiles.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-teal-200 bg-white px-4 py-2.5 text-sm font-bold text-teal-700 transition hover:border-teal-300 hover:bg-teal-50 dark:border-teal-800 dark:bg-teal-950/40 dark:text-teal-300 dark:hover:bg-teal-900/40">
                    <i class="fa-solid fa-id-card-clip text-xs"></i>{{ $isArabic ? 'الملفات' : 'Profiles' }}
                </a>
                <a href="{{ route('health-visitor.clinic.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-teal-200 bg-white px-4 py-2.5 text-sm font-bold text-teal-700 transition hover:border-teal-300 hover:bg-teal-50 dark:border-teal-800 dark:bg-teal-950/40 dark:text-teal-300 dark:hover:bg-teal-900/40">
                    <i class="fa-solid fa-house-medical text-xs"></i>{{ $isArabic ? 'العيادة' : 'Clinic' }}
                </a>
                <a href="{{ route('health-visitor.medications.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-teal-200 bg-white px-4 py-2.5 text-sm font-bold text-teal-700 transition hover:border-teal-300 hover:bg-teal-50 dark:border-teal-800 dark:bg-teal-950/40 dark:text-teal-300 dark:hover:bg-teal-900/40">
                    <i class="fa-solid fa-pills text-xs"></i>{{ $isArabic ? 'الأدوية' : 'Medications' }}
                </a>
                <a href="{{ route('health-visitor.inventory.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-teal-200 bg-white px-4 py-2.5 text-sm font-bold text-teal-700 transition hover:border-teal-300 hover:bg-teal-50 dark:border-teal-800 dark:bg-teal-950/40 dark:text-teal-300 dark:hover:bg-teal-900/40">
                    <i class="fa-solid fa-box-open text-xs"></i>{{ $isArabic ? 'المخزون' : 'Inventory' }}
                </a>
                <a href="{{ route('health-visitor.reports.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-teal-200 bg-white px-4 py-2.5 text-sm font-bold text-teal-700 transition hover:border-teal-300 hover:bg-teal-50 dark:border-teal-800 dark:bg-teal-950/40 dark:text-teal-300 dark:hover:bg-teal-900/40">
                    <i class="fa-solid fa-chart-line text-xs"></i>{{ $isArabic ? 'التقارير' : 'Reports' }}
                </a>
            </div>
        </div>
    </section>

    {{-- ═══ Stats Row 1 ═══ --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'طلاب تحت المتابعة' : 'Tracked students' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"><i class="fa-solid fa-user-check text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $trackedStudentsCount }}</p>
            <a href="{{ route('health-visitor.profiles.index') }}" class="mt-2 block text-xs font-bold text-emerald-600 dark:text-emerald-400">{{ $isArabic ? 'عرض الملفات ←' : 'View profiles →' }}</a>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'ملاحظات عاجلة مفتوحة' : 'Open urgent notes' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400"><i class="fa-solid fa-triangle-exclamation text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black {{ $urgentNotesCount > 0 ? 'text-rose-600 dark:text-rose-400' : 'text-zinc-900 dark:text-white' }}">{{ $urgentNotesCount }}</p>
            <a href="{{ route('health-visitor.notes') }}" class="mt-2 block text-xs font-bold text-rose-600 dark:text-rose-400">{{ $isArabic ? 'عرض الملاحظات ←' : 'View notes →' }}</a>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'زيارات اليوم' : "Today's visits" }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 dark:bg-cyan-500/10 dark:text-cyan-400"><i class="fa-solid fa-house-medical text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $clinicVisitsTodayCount }}</p>
            <a href="{{ route('health-visitor.clinic.index') }}" class="mt-2 block text-xs font-bold text-cyan-600 dark:text-cyan-400">{{ $isArabic ? 'إدارة العيادة ←' : 'Manage clinic →' }}</a>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تنبيهات المخزون' : 'Inventory alerts' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"><i class="fa-solid fa-box-open text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black {{ $inventoryAlertsCount > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-zinc-900 dark:text-white' }}">{{ $inventoryAlertsCount }}</p>
            <a href="{{ route('health-visitor.inventory.index') }}" class="mt-2 block text-xs font-bold text-amber-600 dark:text-amber-400">{{ $isArabic ? 'عرض المخزون ←' : 'View inventory →' }}</a>
        </article>
    </div>

    {{-- ═══ Stats Row 2 ═══ --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الملفات الصحية' : 'Health profiles' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400"><i class="fa-solid fa-id-card-clip text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $profilesCount }}</p>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أدوية نشطة' : 'Active medications' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"><i class="fa-solid fa-pills text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $activeMedicationCount }}</p>
            <a href="{{ route('health-visitor.medications.index') }}" class="mt-2 block text-xs font-bold text-indigo-600 dark:text-indigo-400">{{ $isArabic ? 'إدارة الأدوية ←' : 'Manage medications →' }}</a>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'إجمالي الملاحظات' : 'Total notes' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400"><i class="fa-solid fa-notes-medical text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $notesCount }}</p>
            <a href="{{ route('health-visitor.notes') }}" class="mt-2 block text-xs font-bold text-sky-600 dark:text-sky-400">{{ $isArabic ? 'عرض الكل ←' : 'View all →' }}</a>
        </article>

        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex items-center justify-between">
                <p class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'إشعارات أولياء الأمور' : 'Parent notifications' }}</p>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-fuchsia-50 text-fuchsia-600 dark:bg-fuchsia-500/10 dark:text-fuchsia-400"><i class="fa-solid fa-bell text-sm"></i></div>
            </div>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $parentNotificationsCount }}</p>
            <a href="{{ route('health-visitor.alerts') }}" class="mt-2 block text-xs font-bold text-fuchsia-600 dark:text-fuchsia-400">{{ $isArabic ? 'إرسال تنبيه ←' : 'Send alert →' }}</a>
        </article>
    </div>

    {{-- ═══ Main Content Grid ═══ --}}
    <div class="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(22rem,0.9fr)]">

        {{-- Recent Health Cases --}}
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <div>
                    <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أحدث حالات الغياب الصحي' : 'Recent health-related absences' }}</h2>
                    <p class="mt-0.5 text-xs text-zinc-400">{{ $isArabic ? 'آخر 8 حالات غياب مسجلة' : 'Last 8 logged absence cases' }}</p>
                </div>
                <a href="{{ route('health-visitor.profiles.index') }}" class="text-xs font-black text-emerald-600 dark:text-emerald-400">{{ $isArabic ? 'عرض الكل' : 'View all' }}</a>
            </div>
            <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @forelse($healthCaseCards as $case)
                    <div class="flex items-center justify-between gap-4 px-6 py-4">
                        <div class="min-w-0">
                            <p class="font-bold text-zinc-900 dark:text-white truncate">{{ $case['student_name'] }}</p>
                            <p class="mt-0.5 text-xs text-zinc-400">{{ $case['class_name'] }}{{ $case['subject_name'] !== ($isArabic ? 'بدون مادة' : 'No subject') ? ' · ' . $case['subject_name'] : '' }}</p>
                        </div>
                        <span class="shrink-0 rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
                            {{ $isArabic ? 'متابعة' : 'Follow-up' }}
                        </span>
                    </div>
                @empty
                    <div class="px-6 py-10 text-center text-sm text-zinc-400">
                        <i class="fa-solid fa-circle-check mb-2 text-2xl text-emerald-300"></i>
                        <p>{{ $isArabic ? 'لا توجد حالات غياب صحية حديثة.' : 'No recent health absences.' }}</p>
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Right Column --}}
        <div class="space-y-6">

            {{-- Quick Actions --}}
            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="mb-4 text-sm font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'إجراءات سريعة' : 'Quick Actions' }}</h2>
                <div class="grid grid-cols-2 gap-3">
                    <a href="{{ route('health-visitor.notes') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-4 text-center transition hover:border-emerald-300 hover:bg-emerald-50 dark:border-zinc-700 dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/5">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"><i class="fa-solid fa-notes-medical"></i></div>
                        <span class="text-xs font-bold text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'ملاحظة صحية' : 'Health Note' }}</span>
                    </a>
                    <a href="{{ route('health-visitor.clinic.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-4 text-center transition hover:border-cyan-300 hover:bg-cyan-50 dark:border-zinc-700 dark:hover:border-cyan-500/30 dark:hover:bg-cyan-500/5">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 dark:bg-cyan-500/10 dark:text-cyan-400"><i class="fa-solid fa-house-medical"></i></div>
                        <span class="text-xs font-bold text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'زيارة عيادة' : 'Clinic Visit' }}</span>
                    </a>
                    <a href="{{ route('health-visitor.alerts') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-4 text-center transition hover:border-sky-300 hover:bg-sky-50 dark:border-zinc-700 dark:hover:border-sky-500/30 dark:hover:bg-sky-500/5">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400"><i class="fa-solid fa-paper-plane"></i></div>
                        <span class="text-xs font-bold text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'تنبيه لولي الأمر' : 'Parent Alert' }}</span>
                    </a>
                    <a href="{{ route('health-visitor.reports.index') }}" class="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 p-4 text-center transition hover:border-rose-300 hover:bg-rose-50 dark:border-zinc-700 dark:hover:border-rose-500/30 dark:hover:bg-rose-500/5">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400"><i class="fa-solid fa-chart-line"></i></div>
                        <span class="text-xs font-bold text-zinc-700 dark:text-zinc-300">{{ $isArabic ? 'التقارير' : 'Reports' }}</span>
                    </a>
                </div>
            </div>

            {{-- Recent Notes --}}
            <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
                <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                    <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'أحدث الملاحظات' : 'Latest notes' }}</h2>
                    <a href="{{ route('health-visitor.notes') }}" class="text-xs font-black text-emerald-600 dark:text-emerald-400">{{ $isArabic ? 'عرض الكل' : 'View all' }}</a>
                </div>
                <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @forelse($recentNoteCards as $note)
                        <div class="flex items-center justify-between gap-4 px-6 py-3">
                            <div class="min-w-0">
                                <p class="text-sm font-bold text-zinc-900 truncate dark:text-white">{{ $note['title'] }}</p>
                                <p class="mt-0.5 text-xs text-zinc-400">{{ $note['student_name'] }}</p>
                            </div>
                            <span class="shrink-0 rounded-full px-2.5 py-1 text-[10px] font-black
                                {{ $note['priority'] === 'urgent' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300' }}">
                                {{ $note['priority'] }}
                            </span>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد ملاحظات.' : 'No notes yet.' }}</div>
                    @endforelse
                </div>
            </div>

            {{-- Recent Alerts --}}
            <div class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
                <div class="flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                    <h2 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر التنبيهات المرسلة' : 'Latest sent alerts' }}</h2>
                    <a href="{{ route('health-visitor.alerts') }}" class="text-xs font-black text-sky-600 dark:text-sky-400">{{ $isArabic ? 'عرض السجل' : 'View history' }}</a>
                </div>
                <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @forelse($recentAlertCards as $alert)
                        <div class="flex items-center justify-between gap-4 px-6 py-3">
                            <div class="min-w-0">
                                <p class="text-sm font-bold text-zinc-900 truncate dark:text-white">{{ $alert['title'] }}</p>
                                <p class="mt-0.5 text-xs text-zinc-400">{{ $alert['summary'] }}</p>
                            </div>
                            <span class="shrink-0 rounded-full bg-sky-100 px-2.5 py-1 text-[10px] font-black text-sky-700 dark:bg-sky-500/10 dark:text-sky-400">
                                {{ $alert['priority'] }}
                            </span>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-sm text-zinc-400">{{ $isArabic ? 'لم يتم إرسال تنبيهات بعد.' : 'No alerts sent yet.' }}</div>
                    @endforelse
                </div>
            </div>

        </div>
    </div>

</div>
@endsection