@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الملف الصحي' : 'Health Profile')
@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-start lg:justify-between">
            <div>
                <a href="{{ route('health-visitor.profiles.index') }}" class="text-xs font-black uppercase tracking-[0.24em] text-emerald-600">{{ $isArabic ? 'العودة للملفات' : 'Back to profiles' }}</a>
                <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $student->name }}</h1>
                <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $studentClassName }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
                <div class="rounded-2xl bg-zinc-50 px-5 py-4 dark:bg-zinc-900">
                    <p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الحالة الحرجة' : 'Severe condition' }}</p>
                    <p class="mt-2 text-lg font-black {{ $profile->severe_condition_flag ? 'text-rose-600' : 'text-emerald-600' }}">{{ $profile->severe_condition_flag ? ($isArabic ? 'نشطة' : 'Active') : ($isArabic ? 'لا يوجد' : 'None') }}</p>
                </div>
                <div class="rounded-2xl bg-zinc-50 px-5 py-4 dark:bg-zinc-900">
                    <p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'بطاقة الطوارئ' : 'Emergency card' }}</p>
                    <p class="mt-2 text-sm font-black text-zinc-900 dark:text-white">{{ $profile->emergency_contact_name ?: ($isArabic ? 'غير مكتملة' : 'Incomplete') }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(22rem,0.9fr)]">
        <div class="space-y-6">
            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الملف الصحي الأساسي' : 'Core health profile' }}</h2>
                <form action="{{ route('health-visitor.profiles.update', $student) }}" method="POST" class="mt-5 space-y-4">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="severe_condition_flag" value="0">
                    <div class="grid gap-4 md:grid-cols-3">
                        <input type="text" name="blood_type" value="{{ old('blood_type', $profile->blood_type) }}" placeholder="{{ $isArabic ? 'فصيلة الدم' : 'Blood type' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        <input type="number" step="0.01" name="height_cm" value="{{ old('height_cm', $profile->height_cm) }}" placeholder="{{ $isArabic ? 'الطول سم' : 'Height cm' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        <input type="number" step="0.01" name="weight_kg" value="{{ old('weight_kg', $profile->weight_kg) }}" placeholder="{{ $isArabic ? 'الوزن كجم' : 'Weight kg' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    </div>
                    <textarea name="medical_history" rows="4" placeholder="{{ $isArabic ? 'التاريخ الطبي' : 'Medical history' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ old('medical_history', $profile->medical_history) }}</textarea>
                    <textarea name="chronic_diseases" rows="3" placeholder="{{ $isArabic ? 'الأمراض المزمنة' : 'Chronic diseases' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ old('chronic_diseases', $profile->chronic_diseases) }}</textarea>
                    <textarea name="doctor_notes" rows="3" placeholder="{{ $isArabic ? 'ملاحظات طبية' : 'Doctor notes' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ old('doctor_notes', $profile->doctor_notes) }}</textarea>
                    <div class="grid gap-4 md:grid-cols-2">
                        <input type="text" name="preferred_hospital" value="{{ old('preferred_hospital', $profile->preferred_hospital) }}" placeholder="{{ $isArabic ? 'المستشفى المفضل' : 'Preferred hospital' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        <input type="text" name="teacher_alert_note" value="{{ old('teacher_alert_note', $profile->teacher_alert_note) }}" placeholder="{{ $isArabic ? 'تنبيه يظهر للمعلمين' : 'Teacher alert note' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    </div>
                    <label class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold text-zinc-700 dark:border-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" name="severe_condition_flag" value="1" @checked(old('severe_condition_flag', $profile->severe_condition_flag))>
                        {{ $isArabic ? 'تفعيل تحذير صحي شديد للمعلمين' : 'Enable severe condition alert for teachers' }}
                    </label>
                    <button type="submit" class="rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ الملف' : 'Save profile' }}</button>
                </form>
            </div>

            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'سجل الحساسية' : 'Allergy registry' }}</h2>
                <form action="{{ route('health-visitor.profiles.allergies.store', $student) }}" method="POST" class="mt-5 grid gap-4 md:grid-cols-2">
                    @csrf
                    <input type="text" name="allergen" placeholder="{{ $isArabic ? 'اسم المادة المسببة' : 'Allergen' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <select name="severity" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        <option value="low">{{ $isArabic ? 'منخفضة' : 'Low' }}</option>
                        <option value="moderate">{{ $isArabic ? 'متوسطة' : 'Moderate' }}</option>
                        <option value="high">{{ $isArabic ? 'مرتفعة' : 'High' }}</option>
                        <option value="severe">{{ $isArabic ? 'شديدة' : 'Severe' }}</option>
                    </select>
                    <textarea name="reaction_details" rows="3" placeholder="{{ $isArabic ? 'رد الفعل أو الأعراض' : 'Reaction details' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white md:col-span-2"></textarea>
                    <textarea name="action_plan" rows="3" placeholder="{{ $isArabic ? 'خطة التصرف' : 'Action plan' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white md:col-span-2"></textarea>
                    <label class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold dark:border-zinc-700 md:col-span-2"><input type="checkbox" name="teacher_visible" value="1" checked> {{ $isArabic ? 'إظهارها للمعلمين' : 'Visible to teachers' }}</label>
                    <button type="submit" class="rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900 md:col-span-2">{{ $isArabic ? 'إضافة الحساسية' : 'Add allergy' }}</button>
                </form>
                <div class="mt-5 space-y-3">
                    @foreach($allergyCards as $allergy)
                        <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <div class="font-black text-zinc-900 dark:text-white">{{ $allergy['allergen'] }}</div>
                                    <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $allergy['reaction_details'] }}</div>
                                </div>
                                <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">{{ $allergy['severity'] }}</span>
                            </div>
                        </div>
                    @endforeach
@if($allergyCards->isEmpty())
                        <div class="rounded-2xl border border-dashed border-zinc-300 p-5 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد حساسيات مسجلة.' : 'No allergies recorded.' }}</div>
                    @endif
                </div>
            </div>

            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'التطعيمات' : 'Vaccinations' }}</h2>
                <form action="{{ route('health-visitor.profiles.vaccinations.store', $student) }}" method="POST" class="mt-5 grid gap-4 md:grid-cols-2">
                    @csrf
                    <input type="text" name="vaccine_name" placeholder="{{ $isArabic ? 'اسم التطعيم' : 'Vaccine name' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <input type="text" name="dose_name" placeholder="{{ $isArabic ? 'الجرعة' : 'Dose name' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <input type="date" name="administered_on" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <input type="date" name="due_on" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <select name="status" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        <option value="pending">{{ $isArabic ? 'معلق' : 'Pending' }}</option>
                        <option value="completed">{{ $isArabic ? 'مكتمل' : 'Completed' }}</option>
                        <option value="overdue">{{ $isArabic ? 'متأخر' : 'Overdue' }}</option>
                    </select>
                    <textarea name="notes" rows="3" placeholder="{{ $isArabic ? 'ملاحظات' : 'Notes' }}" class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"></textarea>
                    <button type="submit" class="rounded-2xl bg-sky-600 px-5 py-3 text-sm font-black text-white md:col-span-2">{{ $isArabic ? 'إضافة تطعيم' : 'Add vaccination' }}</button>
                </form>
                <div class="mt-5 space-y-3">
                    @foreach($vaccinationCards as $vaccination)
                        <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <div class="font-black text-zinc-900 dark:text-white">{{ $vaccination['title'] }}</div>
                                    <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'الاستحقاق:' : 'Due:' }} {{ $vaccination['due_on'] }}</div>
                                </div>
                                <span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">{{ $vaccination['status'] }}</span>
                            </div>
                        </div>
                    @endforeach
@if($vaccinationCards->isEmpty())
                        <div class="rounded-2xl border border-dashed border-zinc-300 p-5 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد تطعيمات مسجلة.' : 'No vaccinations recorded.' }}</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'بطاقة الطوارئ' : 'Emergency card' }}</h2>
                <form action="{{ route('health-visitor.profiles.update', $student) }}" method="POST" class="mt-5 space-y-4">
                    @csrf
                    @method('PUT')
                    <input type="text" name="emergency_contact_name" value="{{ old('emergency_contact_name', $profile->emergency_contact_name) }}" placeholder="{{ $isArabic ? 'اسم جهة الاتصال' : 'Emergency contact name' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <input type="text" name="emergency_contact_phone" value="{{ old('emergency_contact_phone', $profile->emergency_contact_phone) }}" placeholder="{{ $isArabic ? 'رقم الجوال' : 'Emergency contact phone' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <input type="text" name="emergency_contact_relation" value="{{ old('emergency_contact_relation', $profile->emergency_contact_relation) }}" placeholder="{{ $isArabic ? 'صلة القرابة' : 'Relation' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <textarea name="emergency_notes" rows="4" placeholder="{{ $isArabic ? 'إرشادات الطوارئ' : 'Emergency instructions' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ old('emergency_notes', $profile->emergency_notes) }}</textarea>
                    <button type="submit" class="rounded-2xl bg-rose-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ بطاقة الطوارئ' : 'Save emergency card' }}</button>
                </form>
                <div class="mt-5 rounded-2xl bg-zinc-50 p-5 text-sm leading-7 dark:bg-zinc-900 dark:text-zinc-200">
                    <div><strong>{{ $isArabic ? 'المستشفى:' : 'Hospital:' }}</strong> {{ $profile->preferred_hospital ?: '—' }}</div>
                    <div class="mt-2"><strong>{{ $isArabic ? 'ولي الأمر/الجهة:' : 'Contact:' }}</strong> {{ $profile->emergency_contact_name ?: '—' }}</div>
                    <div class="mt-2"><strong>{{ $isArabic ? 'الهاتف:' : 'Phone:' }}</strong> {{ $profile->emergency_contact_phone ?: '—' }}</div>
                    <div class="mt-2"><strong>{{ $isArabic ? 'ملاحظات:' : 'Notes:' }}</strong> {{ $profile->emergency_notes ?: '—' }}</div>
                </div>
            </div>

            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر زيارات العيادة' : 'Recent clinic visits' }}</h2>
                <div class="mt-5 space-y-3">
                    @foreach($visitCards as $visit)
                        <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <div class="font-black text-zinc-900 dark:text-white">{{ $visit['checked_in_label'] }}</div>
                                    <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $visit['symptoms'] }}</div>
                                </div>
                                <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">{{ $visit['disposition'] }}</span>
                            </div>
                        </div>
                    @endforeach
@if($visitCards->isEmpty())
                        <div class="rounded-2xl border border-dashed border-zinc-300 p-5 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد زيارات عيادة بعد.' : 'No clinic visits yet.' }}</div>
                    @endif
                </div>
            </div>

            <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الأدوية أثناء اليوم الدراسي' : 'School-hour medications' }}</h2>
                <div class="mt-5 space-y-3">
                    @foreach($medicationCards as $medication)
                        <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <div class="font-black text-zinc-900 dark:text-white">{{ $medication['name'] }}</div>
                            <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $medication['schedule_summary'] }}</div>
                        </div>
                    @endforeach
@if($medicationCards->isEmpty())
                        <div class="rounded-2xl border border-dashed border-zinc-300 p-5 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد أدوية مجدولة.' : 'No scheduled medications.' }}</div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>
@endsection