@extends('layout',['heading'=>__('ui.appointments'),'clinic'=>$clinic])
@section('content')
<div class="flex flex-wrap justify-between items-end gap-4 mb-6"><div><p class="section-kicker">{{ __('ui.appointment_flow') }}</p><h2 class="text-2xl font-extrabold mt-1">{{ __('ui.appointments') }}</h2><p class="text-slate-500 mt-1">{{ __('ui.appointments_intro') }}</p></div><button class="btn" type="button" onclick="showModal('addAppointmentModal')">+ {{ __('ui.add_appointment') }}</button></div>
@if(session('ok'))<div class="mb-4 rounded-lg bg-emerald-50 text-emerald-700 p-3">{{ session('ok') }}</div>@endif
@if($errors->any())<div class="mb-4 rounded-lg bg-red-50 text-red-700 p-3">{{ $errors->first() }}</div>@endif
<div class="card p-0 overflow-x-auto"><div class="p-5 border-b border-slate-100 flex items-center justify-between"><div><b class="text-lg">{{ __('ui.today_schedule') }}</b><p class="text-xs text-slate-400 mt-1">{{ __('ui.update_status_hint') }}</p></div><span class="text-xs text-slate-400">{{ __('ui.appointment_count', ['count' => $appointments->total()]) }}</span></div><table class="min-w-full text-right text-sm"><thead class="bg-slate-50"><tr><th class="p-3">{{ __('ui.queue') }}</th><th class="p-3">{{ __('ui.patient') }}</th><th class="p-3">{{ __('ui.date_time') }}</th><th class="p-3">{{ __('ui.visit_type') }}</th><th class="p-3">{{ __('ui.status') }}</th><th class="p-3">{{ __('ui.actions') }}</th></tr></thead><tbody>@forelse($appointments as $a)<tr class="border-t align-top"><td class="p-3 font-bold text-cyan-700">#{{ $a->queue_number }}</td><td class="p-3">{{ $a->patient_name }}</td><td class="p-3">{{ $a->scheduled_at }}</td><td class="p-3">{{ ['normal'=>__('ui.regular_exam'),'urgent'=>__('ui.urgent_exam'),'follow_up'=>__('ui.follow_up')][$a->visit_type] ?? $a->visit_type }}</td><td class="p-3"><span class="inline-flex rounded-full px-2.5 py-1 text-xs font-bold {{ $a->status==='completed'?'bg-emerald-50 text-emerald-700':($a->status==='cancelled'?'bg-rose-50 text-rose-700':($a->status==='confirmed'?'bg-teal-50 text-teal-700':'bg-amber-50 text-amber-700')) }}">{{ ['booked'=>__('ui.booked'),'confirmed'=>__('ui.confirmed'),'completed'=>__('ui.completed'),'cancelled'=>__('ui.cancelled')][$a->status] ?? $a->status }}</span></td><td class="p-3"><div class="flex flex-wrap gap-2">@if($a->status==='booked')<form method="post" action="/appointments/{{ $a->id }}/confirm">@csrf<button class="text-emerald-700">{{ __('ui.confirm') }}</button></form>@endif @if(!in_array($a->status,['completed','cancelled']))<button class="text-amber-700" type="button" onclick="openAction('rescheduleModal',{{ $a->id }})">{{ __('ui.reschedule') }}</button><button class="text-red-700" type="button" onclick="openAction('cancelModal',{{ $a->id }})">{{ __('ui.cancel') }}</button>@endif<a class="text-cyan-700" href="/appointments/{{ $a->id }}/visit">{{ __('ui.open_visit') }}</a></div></td></tr>@empty<tr><td colspan="6" class="p-8 text-center text-slate-500">{{ __('ui.no_appointments') }}</td></tr>@endforelse</tbody></table><div class="p-4">{{ $appointments->links() }}</div></div>
<div id="addAppointmentModal" class="modal hidden"><div class="panel"><h2>{{ __('ui.new_appointment') }}</h2><form method="post" action="/appointments" class="grid gap-3">@csrf<label class="relative">{{ __('ui.patient') }}<input class="input" id="patientSearch" type="search" placeholder="{{ __('ui.search_patient_placeholder') }}" autocomplete="off"><input type="hidden" name="patient_id" id="patientId" required><div id="patientResults" class="absolute z-20 hidden mt-1 w-full max-h-48 overflow-y-auto rounded-xl border border-slate-200 bg-white shadow-xl"></div><small class="text-slate-500">{{ __('ui.search_patient_hint') }}</small></label><label>{{ __('ui.appointment_date_time') }}<input class="input" type="datetime-local" name="scheduled_at" required></label><label>{{ __('ui.visit_type') }}<select class="input" name="visit_type"><option value="normal">{{ __('ui.regular_exam') }}</option><option value="urgent">{{ __('ui.urgent_exam') }}</option><option value="follow_up">{{ __('ui.follow_up') }}</option></select></label><label>{{ __('ui.exam_type_price') }}<select class="input" name="exam_type_id" id="examTypeSelect" required><option value="">{{ __('ui.choose_exam_type') }}</option>@forelse($examTypes as $exam)<option value="{{ $exam->id }}" data-price="{{ $exam->price }}">{{ $exam->name }}{{ $exam->doctor_name ? ' — '.__('ui.doctor_prefix').$exam->doctor_name : '' }} — {{ number_format($exam->price,2) }} {{ __('ui.currency') }}</option>@empty<option value="" disabled>{{ __('ui.no_exam_types') }}</option>@endforelse</select><small class="text-slate-500">{{ __('ui.auto_exam_price_hint') }}</small></label><label>{{ __('ui.exam_price') }}<input class="input bg-slate-50 font-bold" type="text" id="examFeeDisplay" readonly placeholder="{{ __('ui.auto_exam_price_hint') }}"><input type="hidden" name="fee" id="examFee"><small class="text-slate-500">{{ __('ui.auto_exam_price_hint') }}</small></label><script>document.getElementById('examTypeSelect')?.addEventListener('change',function(){const price=this.options[this.selectedIndex]?.dataset.price||'';document.getElementById('examFee').value=price;document.getElementById('examFeeDisplay').value=price?Number(price).toFixed(2)+' {{ __('ui.currency') }}':''});const patients=@json($patients->map(fn($p)=>['id'=>$p->id,'name'=>$p->name,'mobile'=>$p->mobile]));const patientSearch=document.getElementById('patientSearch'),patientId=document.getElementById('patientId'),patientResults=document.getElementById('patientResults');patientSearch?.addEventListener('input',function(){patientId.value='';const term=this.value.trim().toLowerCase();const matches=patients.filter(p=>(p.name+' '+(p.mobile||'')).toLowerCase().includes(term)).slice(0,20);patientResults.innerHTML=matches.length?matches.map(p=>'<button type="button" class="block w-full px-3 py-2 text-right hover:bg-cyan-50 border-b border-slate-100" data-id="'+p.id+'">'+p.name+' — '+((p.mobile)||'{{ __('ui.no_phone') }}')+'</button>').join(''):'<div class="px-3 py-2 text-slate-500">{{ __('ui.search_no_results') }}</div>';patientResults.classList.remove('hidden')});patientResults?.addEventListener('click',function(e){const button=e.target.closest('button[data-id]');if(!button)return;patientId.value=button.dataset.id;patientSearch.value=button.textContent.trim();patientResults.classList.add('hidden')});patientSearch?.addEventListener('focus',()=>{if(patientSearch.value&&!patientId.value)patientSearch.dispatchEvent(new Event('input'))});document.addEventListener('click',e=>{if(!e.target.closest('#patientSearch')&&!e.target.closest('#patientResults'))patientResults?.classList.add('hidden')});document.querySelector('#addAppointmentModal form')?.addEventListener('submit',e=>{if(!patientId.value){e.preventDefault();patientSearch.focus();patientSearch.setCustomValidity('{{ __('ui.select_patient_error') }}');patientSearch.reportValidity()}else patientSearch.setCustomValidity('')});</script><label>{{ __('ui.payment_method') }}<select class="input" name="payment_method"><option value="">{{ __('ui.pay_at_visit') }}</option><option value="cash">{{ __('ui.cash') }}</option><option value="instapay">{{ __('ui.instapay') }}</option></select></label><div class="actions"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_appointment') }}</button></div></form></div></div>
<div id="cancelModal" class="modal hidden"><div class="panel"><h2>{{ __('ui.cancel_appointment') }}</h2><form method="post" id="cancelForm" class="grid gap-3">@csrf<label>{{ __('ui.cancel_reason') }}<textarea class="input" name="reason" required></textarea></label><div class="actions"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.confirm_cancellation') }}</button></div></form></div></div>
<div id="rescheduleModal" class="modal hidden"><div class="panel"><h2>{{ __('ui.reschedule_appointment') }}</h2><form method="post" id="rescheduleForm" class="grid gap-3">@csrf<label>{{ __('ui.new_appointment_time') }}<input class="input" type="datetime-local" name="scheduled_at" required></label><label>{{ __('ui.reschedule_reason') }}<textarea class="input" name="reason"></textarea></label><div class="actions"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.confirm_reschedule') }}</button></div></form></div></div>
<style>.modal{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem}.modal.hidden{display:none}.panel{background:#fff;border:1px solid #e6ebf2;border-radius:18px;padding:1.25rem;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(15,23,42,.22)}.panel h2{font-weight:800;font-size:1.15rem;margin-bottom:1rem}.actions{display:flex;gap:.5rem;justify-content:flex-start}.btn-secondary{border:1px solid #dbe3ec;background:#fff;color:#334155;border-radius:10px;padding:.6rem .9rem;font-size:13px}</style>
<script>function showModal(id){document.getElementById(id).classList.remove('hidden')}function closeModals(){document.querySelectorAll('.modal').forEach(x=>x.classList.add('hidden'))}function openAction(modal,id){document.getElementById(modal).classList.remove('hidden');document.getElementById(modal==='cancelModal'?'cancelForm':'rescheduleForm').action='/appointments/'+id+'/'+(modal==='cancelModal'?'cancel':'reschedule')}</script>
@endsection