@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'إدارة العيادة' : 'Clinic Management')
@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 ? 'الزيارات والإعفاءات والإجازات المرضية' : 'Visits, Exemptions & Sick Leaves' }}</h1>
    </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-2">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'سجل زيارات العيادة' : 'Clinic visit log' }}</h2>
            <div class="mt-5 space-y-3">
                @foreach($visits as $visit)
                    <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div>
                                <div class="font-black text-zinc-900 dark:text-white">{{ $visit->student?->name }}</div>
                                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $visit->checked_in_at?->format('Y-m-d h:i A') }}{{ $visit->checked_out_at ? ' → ' . $visit->checked_out_at->format('h:i A') : '' }}</div>
                                <div class="mt-2 text-sm text-zinc-600 dark:text-zinc-300">{{ $visit->symptoms }}</div>
                                @if($visit->treatment_provided)
                                    <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'العلاج:' : 'Treatment:' }} {{ $visit->treatment_provided }}</div>
                                @endif
                            </div>
                            <div class="flex flex-col items-end gap-2">
                                <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>
                                @if(!$visit->checked_out_at)
                                    <form method="POST" action="{{ route('health-visitor.clinic.visits.checkout', $visit) }}">
                                        @csrf @method('PATCH')
                                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-xl bg-amber-500 px-3 py-1.5 text-xs font-black text-white hover:bg-amber-600">
                                            <i class="fa-solid fa-right-from-bracket text-xs"></i>
                                            {{ $isArabic ? 'تسجيل خروج' : 'Check out' }}
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
@if($visits->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 logged.' }}</div>
                @endif
            </div>
            <div class="mt-5">{{ $visits->links() }}</div>
        </div>

        <div class="space-y-6">
            <form action="{{ route('health-visitor.clinic.visits.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 ? 'زيارة جديدة' : 'New visit' }}</h2>
                <div class="mt-5 space-y-4">
                    <label for="clinic-visit-student-id" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                    <select id="clinic-visit-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="clinic-visit-checked-in-at" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت الدخول' : 'Check-in time' }}</label>
                    <input id="clinic-visit-checked-in-at" type="datetime-local" name="checked_in_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="clinic-visit-checked-out-at" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'وقت الخروج' : 'Check-out time' }}</label>
                    <input id="clinic-visit-checked-out-at" type="datetime-local" name="checked_out_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="clinic-visit-symptoms" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الأعراض' : 'Symptoms' }}</label>
                    <textarea id="clinic-visit-symptoms" name="symptoms" 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="clinic-visit-assessment" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'التقييم' : 'Assessment' }}</label>
                    <textarea id="clinic-visit-assessment" name="assessment" 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="clinic-visit-treatment-provided" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'العلاج المقدم' : 'Treatment provided' }}</label>
                    <textarea id="clinic-visit-treatment-provided" name="treatment_provided" 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="clinic-visit-disposition" class="block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'نتيجة الزيارة' : 'Disposition' }}</label>
                    <select id="clinic-visit-disposition" name="disposition" 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($dispositions as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <label for="clinic-visit-follow-up-required" 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="clinic-visit-follow-up-required" type="checkbox" name="follow_up_required" value="1"> {{ $isArabic ? 'تتطلب متابعة' : 'Requires follow-up' }}</label>
                    <button type="submit" class="w-full rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-black text-white">{{ $isArabic ? 'حفظ الزيارة' : 'Save visit' }}</button>
                </div>
            </form>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-2">
        <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 ? 'الإعفاءات الطبية' : 'Medical exemptions' }}</h2>
            <form action="{{ route('health-visitor.clinic.exemptions.store') }}" method="POST" class="mt-5 grid gap-4 md:grid-cols-2">
                @csrf
                <div>
                    <label for="medical-exemption-student-id" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                    <select id="medical-exemption-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>
                </div>
                <div>
                    <label for="medical-exemption-type" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'نوع الإعفاء' : 'Exemption type' }}</label>
                    <select id="medical-exemption-type" name="exemption_type" 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($exemptionTypes as $key => $label)<option value="{{ $key }}">{{ $label }}</option>@endforeach</select>
                </div>
                <div>
                    <label for="medical-exemption-starts-on" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ البداية' : 'Start date' }}</label>
                    <input id="medical-exemption-starts-on" type="date" name="starts_on" 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 for="medical-exemption-ends-on" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ النهاية' : 'End date' }}</label>
                    <input id="medical-exemption-ends-on" type="date" name="ends_on" 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 class="md:col-span-2">
                    <label for="medical-exemption-reason" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'سبب الإعفاء' : 'Reason' }}</label>
                    <textarea id="medical-exemption-reason" name="reason" rows="3" 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>
                </div>
                <div class="md:col-span-2">
                    <label for="medical-exemption-notes" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ملاحظات' : 'Notes' }}</label>
                    <textarea id="medical-exemption-notes" 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 md:col-span-2"></textarea>
                </div>
                <button type="submit" class="rounded-2xl bg-sky-600 px-5 py-3 text-sm font-black text-white md:col-span-2">{{ $isArabic ? 'إصدار إعفاء' : 'Issue exemption' }}</button>
            </form>
            <div class="mt-5 space-y-3">
                @foreach($exemptions as $exemption)
                    <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="font-black text-zinc-900 dark:text-white">{{ $exemption->student?->name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $exemption->exemption_type }} • {{ $exemption->starts_on?->format('Y-m-d') }} - {{ $exemption->ends_on?->format('Y-m-d') }}</div>
                        <div class="mt-2 text-xs font-bold text-amber-600">{{ $isArabic ? 'الإدارة:' : 'Admin:' }} {{ $exemption->administration_status }}</div>
                    </div>
                @endforeach
            </div>
            <div class="mt-5">{{ $exemptions->links() }}</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 ? 'الإجازات المرضية' : 'Sick leaves' }}</h2>
            <form action="{{ route('health-visitor.clinic.sick-leaves.store') }}" method="POST" class="mt-5 grid gap-4 md:grid-cols-2">
                @csrf
                <div>
                    <label for="sick-leave-student-id" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الطالب' : 'Student' }}</label>
                    <select id="sick-leave-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>
                </div>
                <div>
                    <label for="sick-leave-medical-exemption-id" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الإعفاء الطبي' : 'Medical exemption' }}</label>
                    <select id="sick-leave-medical-exemption-id" name="medical_exemption_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 exemption' }}</option>
                        @foreach($exemptions as $ex)
                            <option value="{{ $ex->id }}">{{ $ex->student?->name }} - {{ $ex->exemption_type }} ({{ $ex->starts_on?->format('Y-m-d') }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="sick-leave-start-date" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ البداية' : 'Start date' }}</label>
                    <input id="sick-leave-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">
                </div>
                <div>
                    <label for="sick-leave-end-date" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'تاريخ النهاية' : 'End date' }}</label>
                    <input id="sick-leave-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">
                </div>
                <div class="md:col-span-2">
                    <label for="sick-leave-reason" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'سبب الإجازة' : 'Reason' }}</label>
                    <textarea id="sick-leave-reason" name="reason" rows="3" 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>
                </div>
                <div class="md:col-span-2">
                    <label for="sick-leave-notes" class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'ملاحظات' : 'Notes' }}</label>
                    <textarea id="sick-leave-notes" 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 md:col-span-2"></textarea>
                </div>
                <button type="submit" class="rounded-2xl bg-rose-600 px-5 py-3 text-sm font-black text-white md:col-span-2">{{ $isArabic ? 'إنشاء إجازة' : 'Create sick leave' }}</button>
            </form>
            <div class="mt-5 space-y-3">
                @foreach($sickLeaves as $leave)
                    <div class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                        <div class="font-black text-zinc-900 dark:text-white">{{ $leave->student?->name }}</div>
                        <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $leave->start_date?->format('Y-m-d') }} - {{ $leave->end_date?->format('Y-m-d') }}</div>
                        <div class="mt-2 text-xs font-bold text-amber-600">{{ $isArabic ? 'الإدارة:' : 'Admin:' }} {{ $leave->administration_status }}</div>
                    </div>
                @endforeach
            </div>
            <div class="mt-5">{{ $sickLeaves->links() }}</div>
        </div>
    </section>
</div>
@endsection