@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الملاحظات الصحية' : 'Health Notes')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6" x-data="{ openCreateModal: false }">
    <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 class="max-w-3xl">
                <span class="inline-flex items-center gap-2 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">
                    <i class="fa-solid fa-notes-medical"></i>
                    {{ $isArabic ? 'الملاحظات الصحية' : 'Health Notes' }}
                </span>
                <h1 class="mt-4 text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تسجيل الملاحظات ومتابعة الحالات الصحية' : 'Health Notes & Case Tracking' }}</h1>
            </div>

            <div class="grid gap-3 sm:grid-cols-3">
                <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 ? 'إجمالي الملاحظات' : 'Total notes' }}</p>
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $noteStats['total'] }}</p>
                </div>
                <div class="rounded-2xl bg-emerald-50 px-5 py-4 dark:bg-emerald-500/10">
                    <p class="text-xs font-black text-emerald-700 dark:text-emerald-300">{{ $isArabic ? 'ملاحظات عاجلة' : 'Urgent notes' }}</p>
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $noteStats['urgent'] }}</p>
                </div>
                <div class="rounded-2xl bg-sky-50 px-5 py-4 dark:bg-sky-500/10">
                    <p class="text-xs font-black text-sky-700 dark:text-sky-300">{{ $isArabic ? 'مُرسلة لولي الأمر' : 'Shared with parent' }}</p>
                    <p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $noteStats['shared'] }}</p>
                </div>
            </div>
        </div>
        <div class="mt-5 flex justify-end">
            <button type="button" @click="openCreateModal = true" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white transition hover:bg-emerald-700">
                <i class="fa-solid fa-plus"></i>
                <span>{{ $isArabic ? 'إضافة ملاحظة صحية' : 'Add Health Note' }}</span>
            </button>
        </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 ? 'سجل الملاحظات' : 'Notes Log' }}</h2>
                </div>

                <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                    <form method="GET" class="grid gap-3 md:grid-cols-3">
                        <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="">{{ $isArabic ? 'كل الحالات' : 'All statuses' }}</option>
                            @foreach($statuses as $value => $label)
                                <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        <select name="priority" 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="">{{ $isArabic ? 'كل الأولويات' : 'All priorities' }}</option>
                            @foreach($priorities as $value => $label)
                                <option value="{{ $value }}" @selected(request('priority') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        <select name="category" 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="">{{ $isArabic ? 'كل التصنيفات' : 'All categories' }}</option>
                            @foreach($categories as $value => $label)
                                <option value="{{ $value }}" @selected(request('category') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="md:col-span-3 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-black text-white transition hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200">
                            <i class="fa-solid fa-filter"></i>
                            {{ $isArabic ? 'تطبيق الفلاتر' : 'Apply filters' }}
                        </button>
                    </form>
                </div>

                <div class="space-y-4 p-6">
                    @foreach($noteCards as $note)
                        <article class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
                            <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                                <div class="min-w-0 flex-1">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $note['title'] }}</h3>
                                        <span class="rounded-full px-3 py-1 text-xs font-black {{ $note['priority_classes'] }}">{{ $priorities[$note['model']->priority] ?? $note['model']->priority }}</span>
                                        <span class="rounded-full px-3 py-1 text-xs font-black {{ $note['status_classes'] }}">{{ $statuses[$note['model']->status] ?? $note['model']->status }}</span>
                                    </div>

                                    <div class="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-zinc-500 dark:text-zinc-400">
                                        <span>{{ $isArabic ? 'الطالب:' : 'Student:' }} {{ $note['student_name'] }}</span>
                                        <span>{{ $isArabic ? 'الفصل:' : 'Class:' }} {{ $note['class_name'] }}</span>
                                        <span>{{ $isArabic ? 'ولي الأمر:' : 'Parent:' }} {{ $note['parent_name'] }}</span>
                                        <span>{{ $isArabic ? 'المتابعة:' : 'Follow-up:' }} {{ $note['follow_up_label'] }}</span>
                                    </div>

                                    <p class="mt-4 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $note['note'] }}</p>
                                </div>

                                <div class="grid gap-3 sm:grid-cols-2 xl:w-48">
                                    <form action="{{ route('health-visitor.notes.status', $note['model']) }}" method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="status" value="{{ $note['model']->status === 'resolved' ? 'open' : 'resolved' }}">
                                        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl border border-zinc-200 px-4 py-3 text-xs font-black text-zinc-700 transition hover:border-emerald-300 hover:text-emerald-700 dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-emerald-500/30 dark:hover:text-emerald-300">
                                            <i class="fa-solid {{ $note['model']->status === 'resolved' ? 'fa-rotate-left' : 'fa-check-double' }}"></i>
                                            {{ $note['model']->status === 'resolved' ? ($isArabic ? 'إعادة فتح' : 'Re-open') : ($isArabic ? 'إغلاق' : 'Resolve') }}
                                        </button>
                                    </form>

                                    <form action="{{ route('health-visitor.notes.notify-parent', $note['model']) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-sky-600 px-4 py-3 text-xs font-black text-white transition hover:bg-sky-700">
                                            <i class="fa-solid fa-paper-plane"></i>
                                            {{ $isArabic ? 'إرسال لولي الأمر' : 'Notify parent' }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </article>
                    @endforeach
@if($noteCards->isEmpty())
                        <div class="rounded-2xl border border-dashed border-zinc-300 p-10 text-center dark:border-zinc-700">
                            <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'لا توجد ملاحظات صحية حاليًا' : 'No health notes right now' }}</h3>
                            <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أضيفي أول ملاحظة من النموذج الجانبي لتبدأي المتابعة.' : 'Add the first note from the side form to start tracking.' }}</p>
                        </div>
                    @endif
                </div>

                @if(method_exists($notes, 'links'))
                    <div class="border-t border-zinc-200 px-6 py-4 dark:border-zinc-800">
                        {{ $notes->links() }}
                    </div>
                @endif
        </div>
    </section>

    <div x-cloak x-show="openCreateModal" class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70 px-4 py-6">
        <div @click.away="openCreateModal = false" class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-[1.75rem] border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between 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 ? 'إضافة ملاحظة جديدة' : 'Add new note' }}</h2>
                <button type="button" @click="openCreateModal = false" class="inline-flex items-center justify-center rounded-[1.75rem] border border-zinc-200 px-3 py-2 text-sm font-black text-zinc-700 dark:border-zinc-700 dark:text-zinc-200">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <form action="{{ route('health-visitor.notes.store') }}" method="POST" class="space-y-4 p-6">
                    @csrf

                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                        <select name="student_id" required 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">
                            <option value="">{{ $isArabic ? 'اختاري طالبًا' : 'Select a student' }}</option>
                            @foreach($studentOptions as $student)
                                <option value="{{ $student['id'] }}" @selected(old('student_id') == $student['id'])>{{ $student['label'] }}</option>
                            @endforeach
                        </select>
                        @error('student_id')<p class="mt-2 text-xs font-bold text-rose-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ولي الأمر المستهدف' : 'Target parent' }}</label>
                        <select name="parent_user_id" 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">
                            <option value="">{{ $isArabic ? 'بدون إرسال مباشر' : 'No direct parent notification' }}</option>
                            @foreach($parents as $parent)
                                <option value="{{ $parent->id }}" @selected(old('parent_user_id') == $parent->id)>{{ $parent->name }} - {{ $parent->email }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'التصنيف' : 'Category' }}</label>
                            <select name="category" required 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">
                                @foreach($categories as $value => $label)
                                    <option value="{{ $value }}" @selected(old('category') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الأولوية' : 'Priority' }}</label>
                            <select name="priority" required 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">
                                @foreach($priorities as $value => $label)
                                    <option value="{{ $value }}" @selected(old('priority', 'normal') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'العنوان' : 'Title' }}</label>
                        <input type="text" name="title" value="{{ old('title') }}" required 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">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الملاحظة' : 'Note' }}</label>
                        <textarea name="note" rows="5" required 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('note') }}</textarea>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'موعد المتابعة' : 'Follow-up date' }}</label>
                        <input type="datetime-local" name="follow_up_at" value="{{ old('follow_up_at') }}" 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">
                    </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="action_required" value="1" @checked(old('action_required'))>
                        {{ $isArabic ? 'تستلزم إجراء أو متابعة إلزامية' : 'Requires action or mandatory follow-up' }}
                    </label>

                    <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="notify_parent" value="1" @checked(old('notify_parent'))>
                        {{ $isArabic ? 'إرسال الملاحظة مباشرة إلى ولي الأمر المحدد' : 'Send this note immediately to the selected parent' }}
                    </label>

                    <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white transition hover:bg-emerald-700">
                        <i class="fa-solid fa-floppy-disk"></i>
                        {{ $isArabic ? 'حفظ الملاحظة الصحية' : 'Save health note' }}
                    </button>
                </form>
        </div>
    </div>
</div>
@endsection