@extends('layout',['heading'=>__('ui.patient_records'),'clinic'=>$clinic])
@section('content')
<div class="space-y-6"><section class="flex flex-wrap justify-between items-end gap-4"><div><p class="section-kicker">{{ __('ui.patient_directory') }}</p><h2 class="text-2xl font-extrabold mt-1">{{ __('ui.patient_records') }}</h2><p class="text-slate-500 mt-1">{{ __('ui.patient_records_intro') }}</p></div><button class="btn" type="button" data-open="patientModal">+ {{ __('ui.add_new_patient') }}</button></section>
<section class="card p-5"><form class="flex flex-col sm:flex-row gap-3 mb-5"><label class="flex-1">{{ __('ui.search_patient') }}<input class="input" name="q" value="{{ $q }}" placeholder="{{ __('ui.search_patient_placeholder_full') }}"></label><button class="btn sm:self-end">{{ __('ui.search_patient_button') }}</button></form><div class="overflow-x-auto"><table class="w-full text-right"><thead class="border-b bg-slate-50"><tr><th class="p-3">{{ __('ui.patient') }}</th><th class="p-3">{{ __('ui.mobile') }}</th><th class="p-3">{{ __('ui.gender') }}</th><th class="p-3">{{ __('ui.insurance') }}</th><th class="p-3">{{ __('ui.access') }}</th></tr></thead><tbody>@forelse($patients as $p)<tr class="border-b hover:bg-teal-50/40"><td class="p-3"><div class="flex items-center gap-3"><span class="avatar">{{ mb_substr($p->name,0,1) }}</span><strong>{{ $p->name }}</strong></div></td><td class="p-3 text-slate-600">{{ $p->mobile ?: __('ui.not_registered') }}</td><td class="p-3">{{ $p->gender === 'male' ? __('ui.male') : ($p->gender === 'female' ? __('ui.female') : '—') }}</td><td class="p-3">{{ $p->insurance_company ?: '—' }}</td><td class="p-3"><a class="text-teal-700 font-bold" href="/patients/{{ $p->id }}/record">{{ __('ui.open_record') }} ←</a></td></tr>@empty<tr><td colspan="5" class="p-12 text-center"><div class="text-3xl mb-2">—</div><p class="font-bold">{{ __('ui.no_matching_records') }}</p><p class="text-sm text-slate-500 mt-1">{{ __('ui.try_search_or_create') }}</p></td></tr>@endforelse</tbody></table></div><div class="mt-5">{{ $patients->links() }}</div></section></div>
<div id="patientModal" class="modal-backdrop" hidden><div class="modal-panel"><div class="modal-head"><div><p class="section-kicker">{{ __('ui.new_patient') }}</p><h3>{{ __('ui.new_patient') }}</h3></div><button type="button" data-close>×</button></div><form method="post" class="space-y-3">@csrf<label>{{ __('ui.patient_name') }}<input class="input" name="name" required></label><div class="grid grid-cols-2 gap-3"><label>{{ __('ui.birth_date') }}<input class="input" type="date" name="birth_date"></label><label>{{ __('ui.mobile') }}<input class="input" name="mobile"></label></div><div class="grid grid-cols-2 gap-3"><label>{{ __('ui.gender') }}<select class="input" name="gender"><option value="">{{ __('ui.choose_gender') }}</option><option value="male">{{ __('ui.male') }}</option><option value="female">{{ __('ui.female') }}</option></select></label><label>{{ __('ui.blood_type') }}<select class="input" name="blood_type"><option value="">{{ __('ui.choose_blood_type') }}</option><option>A+</option><option>A-</option><option>B+</option><option>O+</option><option>O-</option></select></label></div><div class="grid grid-cols-2 gap-3"><label>{{ __('ui.weight') }}<input class="input" name="weight" placeholder="{{ __('ui.kg') }}"></label><label>{{ __('ui.height') }}<input class="input" name="height" placeholder="{{ __('ui.cm') }}"></label></div><label>{{ __('ui.insurance_company') }}<input class="input" name="insurance_company"></label><label>{{ __('ui.insurance_number') }}<input class="input" name="insurance_number"></label><label>{{ __('ui.insurance_load_percent') }}<input class="input" name="insurance_load_percent"></label><div class="modal-actions"><button type="button" class="btn-secondary" data-close>{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_patient') }}</button></div></form></div></div><style>.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem}.modal-backdrop[hidden]{display:none}.modal-panel{background:#fff;width:min(100%,620px);max-height:90vh;overflow-y:auto;border-radius:18px;padding:1.25rem;box-shadow:0 20px 50px rgba(15,23,42,.22)}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e6ebf2;padding-bottom:.8rem;margin-bottom:1rem}.modal-head h3{font-weight:800;font-size:1.15rem}.modal-head button{font-size:1.6rem;color:#64748b}.modal-actions{display:flex;gap:.5rem;justify-content:flex-start;padding-top:.4rem}.btn-secondary{border:1px solid #dbe3ec;border-radius:10px;padding:.6rem 1rem;color:#475569;background:#fff}</style><script>const pm=document.getElementById('patientModal');document.querySelectorAll('[data-open]').forEach(b=>b.onclick=()=>document.getElementById(b.dataset.open).hidden=false);document.querySelectorAll('[data-close]').forEach(b=>b.onclick=()=>b.closest('.modal-backdrop').hidden=true);pm?.addEventListener('click',e=>{if(e.target===pm)pm.hidden=true});</script>
@endsection