@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الأدوية والموافقات' : 'Medications & Consents')
@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">
        <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الموافقات الدوائية والجرعات المدرسية' : 'Medication Consents & School Dosing' }}</h1>
    </section>

    <section class="grid gap-6 xl:grid-cols-3">
        <form action="{{ route('health-visitor.medications.consents.store') }}" method="POST" enctype="multipart/form-data" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
            @csrf
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'موافقة دوائية' : 'Medication consent' }}</h2>
            <div class="mt-5 space-y-4">
                <label for="medication-consent-student-id" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                <select id="medication-consent-student-id" name="student_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">@foreach($students as $student)<option value="{{ $student->id }}">{{ $student->name }}</option>@endforeach</select>
                <label for="medication-consent-parent-user-id" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ولي الأمر' : 'Parent' }}</label>
                <select id="medication-consent-parent-user-id" 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 ? 'ولي الأمر' : 'Parent' }}</option>@foreach($parents as $parent)<option value="{{ $parent->id }}">{{ $parent->name }}</option>@endforeach</select>
                <label for="medication-consent-medication-name" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'اسم الدواء' : 'Medication name' }}</label>
                <input id="medication-consent-medication-name" type="text" name="medication_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">
                <label for="medication-consent-dosage" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الجرعة' : 'Dosage' }}</label>
                <input id="medication-consent-dosage" type="text" name="dosage" 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">
                <label for="medication-consent-status" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'حالة الموافقة' : 'Consent status' }}</label>
                <select id="medication-consent-status" name="consent_status" 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="approved">{{ $isArabic ? 'معتمدة' : 'Approved' }}</option>
                    <option value="pending">{{ $isArabic ? 'قيد الانتظار' : 'Pending' }}</option>
                    <option value="expired">{{ $isArabic ? 'منتهية' : 'Expired' }}</option>
                </select>
                <label for="medication-consent-signed-at" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت التوقيع' : 'Signed at' }}</label>
                <input id="medication-consent-signed-at" type="datetime-local" name="signed_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">
                <label for="medication-consent-expires-at" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت الانتهاء' : 'Expires at' }}</label>
                <input id="medication-consent-expires-at" type="datetime-local" name="expires_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">
                <label for="medication-consent-file" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ملف الموافقة' : 'Consent file' }}</label>
                <input id="medication-consent-file" type="file" name="consent_file" 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">
                <label for="medication-consent-notes" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ملاحظات' : 'Notes' }}</label>
                <textarea id="medication-consent-notes" name="notes" rows="3" 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>
                <button type="submit" class="w-full rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ الموافقة' : 'Save consent' }}</button>
            </div>
        </form>

        <form action="{{ route('health-visitor.medications.schedules.store') }}" method="POST" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
            @csrf
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'جدول دوائي' : 'Medication schedule' }}</h2>
            <div class="mt-5 space-y-4">
                <label for="medication-schedule-student-id" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                <select id="medication-schedule-student-id" name="student_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">@foreach($students as $student)<option value="{{ $student->id }}">{{ $student->name }}</option>@endforeach</select>
                <label for="medication-schedule-consent-id" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الموافقة' : 'Consent' }}</label>
                <select id="medication-schedule-consent-id" name="medication_consent_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 consent' }}</option>
                    @foreach($consents as $c)
                        <option value="{{ $c->id }}">{{ $c->student?->name }} - {{ $c->medication_name }}</option>
                    @endforeach
                </select>
                <label for="medication-schedule-medication-name" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'اسم الدواء' : 'Medication name' }}</label>
                <input id="medication-schedule-medication-name" type="text" name="medication_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">
                <label for="medication-schedule-dosage" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الجرعة' : 'Dosage' }}</label>
                <input id="medication-schedule-dosage" type="text" name="dosage" 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">
                <label for="medication-schedule-time" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت الجرعة' : 'Schedule time' }}</label>
                <input id="medication-schedule-time" type="time" name="schedule_time" 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">
                <label for="medication-schedule-route" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'طريقة الإعطاء' : 'Administration route' }}</label>
                <input id="medication-schedule-route" type="text" name="administration_route" 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">
                <label for="medication-schedule-start-date" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ البداية' : 'Start date' }}</label>
                <input id="medication-schedule-start-date" type="date" name="start_date" 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">
                <label for="medication-schedule-end-date" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ النهاية' : 'End date' }}</label>
                <input id="medication-schedule-end-date" type="date" name="end_date" 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">
                <label for="medication-schedule-instructions" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تعليمات' : 'Instructions' }}</label>
                <textarea id="medication-schedule-instructions" name="instructions" rows="3" 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>
                <label for="medication-schedule-is-active" class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold dark:border-zinc-700"><input id="medication-schedule-is-active" type="checkbox" name="is_active" value="1" checked> {{ $isArabic ? 'مفعل' : 'Active' }}</label>
                <button type="submit" class="w-full rounded-2xl bg-sky-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ الجدول' : 'Save schedule' }}</button>
            </div>
        </form>

        <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 ? 'سجل الجرعات' : 'Dose log' }}</h2>
            <div class="mt-5 space-y-3">
                @foreach($medications as $medication)
                    <form action="{{ route('health-visitor.medications.logs.store', $medication) }}" method="POST" class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        @csrf
                        <div class="font-black text-zinc-900 dark:text-white">{{ $medication->student?->name }} • {{ $medication->medication_name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $medication->dosage }} • {{ $medication->schedule_time ? \Illuminate\Support\Carbon::parse($medication->schedule_time)->format('H:i') : '—' }}</div>
                        <div class="mt-3 grid gap-3">
                            <label for="medication-log-administered-at-{{ $medication->id }}" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت الصرف' : 'Administration time' }}</label>
                            <input id="medication-log-administered-at-{{ $medication->id }}" type="datetime-local" name="administered_at" 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">
                            <label for="medication-log-status-{{ $medication->id }}" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الحالة' : 'Status' }}</label>
                            <select id="medication-log-status-{{ $medication->id }}" 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">@foreach($medicationLogStatuses as $key => $label)<option value="{{ $key }}">{{ $label }}</option>@endforeach</select>
                            <label for="medication-log-notes-{{ $medication->id }}" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ملاحظات الجرعة' : 'Dose notes' }}</label>
                            <textarea id="medication-log-notes-{{ $medication->id }}" name="notes" rows="2" 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-zinc-900 px-5 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900">{{ $isArabic ? 'تسجيل الجرعة' : 'Log dose' }}</button>
                        </div>
                    </form>
                @endforeach
@if($medications->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>
    </section>

    <section class="grid gap-6 xl:grid-cols-3">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 xl:col-span-1">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الموافقات المحفوظة' : 'Saved consents' }}</h2>
            <div class="mt-5 space-y-3">
                @foreach($consents as $consent)
                    <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="font-black text-zinc-900 dark:text-white">{{ $consent->student?->name }} • {{ $consent->medication_name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $consent->consent_status }}{{ $consent->expires_at ? ' • ' . $consent->expires_at->format('Y-m-d') : '' }}</div>
                        @if($consent->consent_file_path)
                            <a href="{{ asset('storage/' . $consent->consent_file_path) }}" target="_blank" class="mt-2 inline-flex text-xs font-black text-emerald-600">{{ $isArabic ? 'فتح الملف' : 'Open file' }}</a>
                        @endif
                    </div>
                @endforeach
            </div>
            <div class="mt-5">{{ $consents->links() }}</div>
        </div>

        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 xl:col-span-1">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الجداول الدوائية' : 'Medication schedules' }}</h2>
            <div class="mt-5 space-y-3">
                @foreach($medications 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->student?->name }} • {{ $medication->medication_name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $medication->dosage }} • {{ $medication->schedule_time ? \Illuminate\Support\Carbon::parse($medication->schedule_time)->format('H:i') : '—' }}</div>
                    </div>
                @endforeach
            </div>
            <div class="mt-5">{{ $medications->links() }}</div>
        </div>

        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 xl:col-span-1">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر عمليات الصرف' : 'Recent administrations' }}</h2>
            <div class="mt-5 space-y-3">
                @foreach($logs as $log)
                    <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="font-black text-zinc-900 dark:text-white">{{ $log->medication?->student?->name }} • {{ $log->medication?->medication_name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $log->administered_at?->format('Y-m-d h:i A') }} • {{ $log->status }}</div>
                    </div>
                @endforeach
            </div>
            <div class="mt-5">{{ $logs->links() }}</div>
        </div>
    </section>
</div>
@endsection