@extends('layout',['heading'=>__('ui.medical_visit'),'clinic'=>$clinic]) @section('content')<div class="card p-6 max-w-5xl"><div class="border-b pb-4 mb-5 flex justify-between"><div><h2 class="text-xl font-bold text-cyan-800">{{ $clinic->name }}</h2><p class="text-sm text-slate-500">{{ $clinic->address }} — {{ $clinic->phone }} @if($clinic->phone2) — {{ $clinic->phone2 }} @endif</p></div>@if($clinic->logo_path)<img src="{{ $clinic->logo_path }}" alt="{{ __('ui.clinic_logo') }}" class="h-16 max-w-32 object-contain">@endif</div><div class="flex justify-between mb-5"><div><h2 class="text-xl font-bold">{{ $a->patient_name }}</h2><p class="text-slate-500">{{ __('ui.queue_position') }}: #{{ $a->queue_number }} — {{ $a->scheduled_at }}</p></div><button onclick="window.print()" class="btn">{{ __('ui.print_prescription') }}</button></div><form method="post" id="visitForm" class="space-y-4">@csrf<div><label>{{ __('ui.symptoms_and_problems') }}</label><textarea class="input" name="symptoms" rows="4"></textarea></div><div><label>{{ __('ui.diagnosis') }}</label><textarea class="input" name="diagnosis" rows="3"></textarea></div><div><label>{{ __('ui.doctor_notes') }}</label><textarea class="input" name="notes" rows="3"></textarea></div>@if($isEyeClinic)<div class="border rounded-xl p-4 bg-sky-50"><h3 class="font-bold text-sky-800 mb-3">{{ __('ui.eye_exam') }}</h3><div class="grid md:grid-cols-2 gap-4"><div class="bg-white rounded-lg p-3 text-center"><div class="eye-shape mx-auto"><span></span></div><b>{{ __('ui.right_eye') }}</b></div><div class="bg-white rounded-lg p-3 text-center"><div class="eye-shape mx-auto"><span></span></div><b>{{ __('ui.left_eye') }}</b></div></div><table class="w-full mt-4 text-right bg-white rounded"><thead><tr class="border-b"><th class="p-2">{{ __('ui.eye') }}</th><th class="p-2">{{ __('ui.visual_acuity') }}</th><th class="p-2">SPH</th><th class="p-2">CYL</th><th class="p-2">AXIS</th></tr></thead><tbody><tr><td class="p-2">{{ __('ui.right') }}</td><td><label>{{ __('ui.visual_acuity') }} — {{ __('ui.right') }}<input class="input eye-field" data-eye="right" data-key="acuity" placeholder="6/6"></label></td><td><label>SPH — {{ __('ui.right') }}<input class="input eye-field" data-eye="right" data-key="sph"></label></td><td><label>CYL — {{ __('ui.right') }}<input class="input eye-field" data-eye="right" data-key="cyl"></label></td><td><label>AXIS — {{ __('ui.right') }}<input class="input eye-field" data-eye="right" data-key="axis"></label></td></tr><tr><td class="p-2">{{ __('ui.left') }}</td><td><label>{{ __('ui.visual_acuity') }} — {{ __('ui.left') }}<input class="input eye-field" data-eye="left" data-key="acuity" placeholder="6/6"></label></td><td><label>SPH — {{ __('ui.left') }}<input class="input eye-field" data-eye="left" data-key="sph"></label></td><td><label>CYL — {{ __('ui.left') }}<input class="input eye-field" data-eye="left" data-key="cyl"></label></td><td><label>AXIS — {{ __('ui.left') }}<input class="input eye-field" data-eye="left" data-key="axis"></label></td></tr></tbody></table><input type="hidden" name="eye_exam_data" id="eyeExamData"></div>@endif @if($isDentalClinic)<div class="border rounded-xl p-4 bg-amber-50"><h3 class="font-bold text-amber-800 mb-2">{{ __('ui.dental_chart_and_treatment') }}</h3><p class="text-sm text-slate-600 mb-3">{{ __('ui.dental_instructions') }}</p><div class="teeth-grid">@for($i=1;$i<=32;$i++)<button type="button" class="tooth" data-tooth="{{ $i }}">{{ $i }}</button>@endfor</div><div class="grid md:grid-cols-4 gap-3 mt-4"><label>{{ __('ui.tooth_number') }}<select id="dentalTooth" class="input">@for($i=1;$i<=32;$i++)<option value="{{ $i }}">{{ __('ui.tooth') }} {{ $i }}</option>@endfor</select></label><label>{{ __('ui.procedure') }}<select id="dentalProcedureType" class="input"><option value="cleaning">{{ __('ui.cleaning') }}</option><option value="extraction">{{ __('ui.extraction') }}</option><option value="filling">{{ __('ui.filling') }}</option><option value="crown">{{ __('ui.crown') }}</option></select></label><label>{{ __('ui.used_item') }}<select id="dentalInventory" class="input"><option value="">{{ __('ui.no_inventory_item') }}</option>@foreach($inventoryItems as $item)<option value="{{ $item->id }}">{{ $item->name }} — {{ __('ui.available') }} {{ $item->quantity }}</option>@endforeach</select></label><label>{{ __('ui.quantity') }}<input id="dentalQuantity" class="input" type="number" min="1" value="1"></label></div><label class="block mt-3">{{ __('ui.procedure_notes') }}<textarea id="dentalProcedureNotes" class="input" rows="2"></textarea></label><button type="button" class="btn mt-3" onclick="addDentalProcedure()">{{ __('ui.add_procedure') }}</button><div id="dentalProcedureList" class="mt-4 space-y-2"></div><div id="dentalProcedureInputs"></div><input type="hidden" name="dental_teeth_data" id="dentalTeethData"></div>@endif<div class="border rounded-xl p-4 bg-emerald-50"><h3 class="font-bold text-emerald-800 mb-2">{{ __('ui.doctor_procedures') }}</h3><p class="text-sm text-slate-600 mb-3">{{ __('ui.doctor_procedure_intro') }}</p><div class="grid md:grid-cols-4 gap-3"><label class="md:col-span-2">{{ __('ui.medical_procedure') }}<select id="procedureService" class="input"><option value="">{{ __('ui.custom_procedure') }}</option>@foreach($clinicProcedures as $procedure)<option value="{{ $procedure->id }}" data-name="{{ $procedure->name }}">{{ $procedure->name }}{{ $procedure->category ? ' — '.$procedure->category : '' }}</option>@endforeach</select></label><label>{{ __('ui.custom_procedure_name') }}<input id="procedureName" class="input" maxlength="190" placeholder="{{ __('ui.enter_procedure_if_not_selected') }}"></label><label>{{ __('ui.quantity') }}<input id="procedureQuantity" class="input" type="number" min="1" value="1"></label></div><label class="block mt-3">{{ __('ui.procedure_notes') }}<textarea id="procedureNotes" class="input" rows="2"></textarea></label><button type="button" class="btn mt-3" onclick="addProcedure()">{{ __('ui.add_procedure') }}</button><div id="procedureList" class="mt-4 space-y-2"></div><div id="procedureInputs"></div></div><div class="border rounded-xl p-4 bg-violet-50"><h3 class="font-bold text-violet-800 mb-3">{{ __('ui.previous_patient_documents') }}</h3>@forelse($documents as $oldDocument)<p class="text-sm border-b py-1">{{ $oldDocument->type === 'radiology' ? __('ui.radiology') : __('ui.lab_test') }} — {{ $oldDocument->title }} — <a class="accent" href="/patients/{{ $a->pid }}/documents/{{ $oldDocument->id }}/download">{{ __('ui.secure_download') }}</a></p>@empty<p class="text-sm text-slate-500">{{ __('ui.no_previous_documents') }}</p>@endforelse<h3 class="font-bold text-violet-800 mb-3 mt-4">{{ __('ui.attach_document_to_visit') }}</h3><label>{{ __('ui.document_type') }}<select class="input" name="type" form="documentUploadForm"><option value="radiology">{{ __('ui.radiology') }}</option><option value="lab">{{ __('ui.lab_test') }}</option></select></label><label>{{ __('ui.exam_name') }}<input class="input" name="title" form="documentUploadForm"></label><label>{{ __('ui.exam_date') }}<input class="input" type="date" name="exam_date" form="documentUploadForm"></label><label>{{ __('ui.attached_file') }}<input class="input" type="file" name="file" form="documentUploadForm" accept="application/pdf,image/jpeg,image/png"></label><label>{{ __('ui.document_notes') }}<textarea class="input" name="notes" form="documentUploadForm"></textarea></label><button class="btn" type="submit" form="documentUploadForm">{{ __('ui.upload_and_link_to_visit') }}</button></div><hr><h3 class="font-bold text-cyan-800">{{ __('ui.prescription_and_tests') }}</h3><div class="border rounded-xl p-4 bg-slate-50"><div class="grid md:grid-cols-4 gap-3"><label>{{ __('ui.item_type') }}<select id="medicalType" class="input"><option value="medicine">{{ __('ui.medicine') }}</option><option value="lab">{{ __('ui.lab_test') }}</option><option value="radiology">{{ __('ui.radiology') }}</option></select></label><label class="md:col-span-2">{{ __('ui.search_items') }}<input id="medicalSearch" class="input" type="search" placeholder="{{ __('ui.search_medicine_lab_radiology') }}"></label><label>{{ __('ui.available_item') }}<select id="medicalInventory" class="input"><option value="">{{ __('ui.choose_from_list') }}</option>@foreach($inventoryItems as $item)<option value="{{ $item->id }}" data-type="medicine" data-name="{{ $item->name }}" data-category="{{ $item->category }}">{{ $item->name }} — {{ __('ui.available') }} {{ $item->quantity }}</option>@endforeach @foreach($medicalCatalog as $catalog)<option value="catalog:{{ $catalog->id }}" data-type="{{ $catalog->type }}" data-name="{{ $catalog->name }}" data-category="{{ $catalog->category }}">{{ $catalog->type === 'lab' ? __('ui.lab_test') : __('ui.radiology') }}: {{ $catalog->name }} — {{ number_format($catalog->price,2) }} {{ __('ui.currency') }}</option>@endforeach</select></label></div><div id="medicineFields" class="grid md:grid-cols-4 gap-3 mt-3"><label>{{ __('ui.alternative_medicine') }}<input id="medicineAlternative" class="input" placeholder="{{ __('ui.enter_alternative_name') }}"></label><label>{{ __('ui.hours_between_doses') }}<input id="frequencyHours" class="input" type="number" min="1" max="168" placeholder="{{ __('ui.example_8') }}"></label><label>{{ __('ui.first_dose') }}<input id="firstDoseAt" class="input" type="datetime-local"></label><label>{{ __('ui.dose_count') }}<input id="doseCount" class="input" type="number" min="1" max="100" placeholder="{{ __('ui.example_6') }}"></label><label>{{ __('ui.dispensed_quantity') }}<input id="medicalQuantity" class="input" type="number" min="1" placeholder="{{ __('ui.optional') }}"></label><label class="flex items-center gap-2 mt-6"><input id="deductMedicalStock" type="checkbox" value="1"> {{ __('ui.deduct_from_stock') }}</label></div><label class="block mt-3">{{ __('ui.item_notes') }}<textarea id="medicalNotes" class="input" rows="2" placeholder="{{ __('ui.after_meal_notes') }}"></textarea></label><button type="button" class="btn mt-3" onclick="addMedicalItem()">{{ __('ui.add_item') }}</button><div id="medicalItemList" class="mt-4 space-y-2"></div><div id="medicalItemInputs"></div></div><div class="grid md:grid-cols-3 gap-3 mt-4"><label>{{ __('ui.follow_up_date') }}<input class="input" type="date" name="follow_up_date"></label><label>{{ __('ui.old_radiology') }}<input class="input" name="radiology" placeholder="{{ __('ui.previous_radiology_compatibility') }}"></label><label>{{ __('ui.old_labs') }}<input class="input" name="labs" placeholder="{{ __('ui.previous_radiology_compatibility') }}"></label></div><button class="btn">{{ __('ui.save_visit_prescription') }}</button></form><form id="documentUploadForm" method="post" action="/patients/{{ $a->pid }}/documents" enctype="multipart/form-data">@csrf<input type="hidden" name="visit_id" value="{{ $a->id }}"></form></div><style>.eye-shape{width:105px;height:58px;border:3px solid #0e7490;border-radius:70% 10%;transform:rotate(45deg);display:flex;align-items:center;justify-content:center}.eye-shape span{width:25px;height:25px;border-radius:50%;background:#0e7490;border:6px solid #bae6fd}.teeth-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;max-width:520px}.tooth{background:#fff;border:1px solid #d6b477;border-radius:8px;padding:8px;font-weight:bold}.tooth.selected{background:#dc2626;color:#fff;border-color:#991b1b}.procedure-row,.medical-row{background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:.65rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}.remove-row{background:#fee2e2;color:#991b1b;border:0;border-radius:5px;padding:.25rem .5rem}</style><script>const deleteLabel=@json(__('ui.delete'));const toothLabel=@json(__('ui.tooth'));const noItemLabel=@json(__('ui.no_inventory_item'));const quantityLabel=@json(__('ui.quantity'));const hourLabel=@json(__('ui.hour'));const eye={right:{},left:{}};document.querySelectorAll('.eye-field').forEach(x=>x.addEventListener('input',()=>{eye[x.dataset.eye][x.dataset.key]=x.value;document.getElementById('eyeExamData').value=JSON.stringify(eye);}));const teeth=[];document.querySelectorAll('.tooth').forEach(x=>x.addEventListener('click',()=>{const n=Number(x.dataset.tooth),i=teeth.indexOf(n);if(i<0){teeth.push(n);x.classList.add('selected')}else{teeth.splice(i,1);x.classList.remove('selected')}document.getElementById('dentalTeethData').value=JSON.stringify({affected_teeth:teeth});}));let dentalIndex=0;function addDentalProcedure(){const tooth=document.getElementById('dentalTooth').value,type=document.getElementById('dentalProcedureType').value,inventory=document.getElementById('dentalInventory'),inventoryId=inventory.value,name=inventory.options[inventory.selectedIndex].textContent,quantity=document.getElementById('dentalQuantity').value,notes=document.getElementById('dentalProcedureNotes').value;const labels={cleaning:@json(__('ui.cleaning')),extraction:@json(__('ui.extraction')),filling:@json(__('ui.filling')),crown:@json(__('ui.crown'))};const i=dentalIndex++;document.getElementById('dentalProcedureList').insertAdjacentHTML('beforeend','<div class="procedure-row" data-row="d'+i+'"><span>'+toothLabel+' '+tooth+' — '+labels[type]+' — '+(inventoryId?name:noItemLabel)+' — '+quantityLabel+' '+quantity+'</span><button type="button" class="remove-row" onclick="removeRow(\'d'+i+'\')">'+deleteLabel+'</button></div>');const box=document.getElementById('dentalProcedureInputs');[['tooth_number',tooth],['procedure_type',type],['inventory_item_id',inventoryId],['quantity',quantity],['notes',notes]].forEach(([k,v])=>box.insertAdjacentHTML('beforeend','<input type="hidden" name="dental_procedures['+i+']['+k+']" value="'+escapeHtml(v)+'">'));document.getElementById('dentalProcedureNotes').value='';}let procedureIndex=0;function addProcedure(){const select=document.getElementById('procedureService'),serviceId=select.value,name=(serviceId?select.options[select.selectedIndex].dataset.name:document.getElementById('procedureName').value.trim()),quantity=document.getElementById('procedureQuantity').value,notes=document.getElementById('procedureNotes').value;if(!name){alert(@json(__('ui.choose_procedure_or_enter_name')));return}const i=procedureIndex++;document.getElementById('procedureList').insertAdjacentHTML('beforeend','<div class="procedure-row" data-row="p'+i+'"><span>'+escapeHtml(name)+' — '+quantityLabel+' '+escapeHtml(quantity)+(notes?' — '+escapeHtml(notes):'')+'</span><button type="button" class="remove-row" onclick="removeRow(\'p'+i+'\')">'+deleteLabel+'</button></div>');const box=document.getElementById('procedureInputs');[['procedure_id',serviceId],['name',name],['quantity',quantity],['notes',notes]].forEach(([k,v])=>box.insertAdjacentHTML('beforeend','<input type="hidden" name="procedures['+i+']['+k+']" value="'+escapeHtml(v)+'">'));document.getElementById('procedureName').value='';document.getElementById('procedureQuantity').value=1;document.getElementById('procedureNotes').value='';}let medicalIndex=0;function addMedicalItem(){const type=document.getElementById('medicalType').value,select=document.getElementById('medicalInventory'),selectedValue=select.value,inventoryId=selectedValue.startsWith('catalog:')?'':selectedValue,catalogId=selectedValue.startsWith('catalog:')?selectedValue.replace('catalog:',''):'',itemName=selectedValue?select.options[select.selectedIndex].dataset.name:'',name=itemName||document.getElementById('medicalSearch').value.trim();if(!name){alert(@json(__('ui.choose_item_or_enter_search_name')));return}const i=medicalIndex++,alternative=document.getElementById('medicineAlternative').value,frequency=document.getElementById('frequencyHours').value,first=document.getElementById('firstDoseAt').value,count=document.getElementById('doseCount').value,quantity=document.getElementById('medicalQuantity').value,notes=document.getElementById('medicalNotes').value,deduct=document.getElementById('deductMedicalStock').checked?1:0;const labels={medicine:@json(__('ui.medicine')),lab:@json(__('ui.lab_test')),radiology:@json(__('ui.radiology'))};document.getElementById('medicalItemList').insertAdjacentHTML('beforeend','<div class="medical-row" data-row="m'+i+'"><span>'+labels[type]+' — '+escapeHtml(name)+(frequency?' — '+frequency+' '+hourLabel:'')+(notes?' — '+escapeHtml(notes):'')+'</span><button type="button" class="remove-row" onclick="removeRow(\'m'+i+'\')">'+deleteLabel+'</button></div>');const box=document.getElementById('medicalItemInputs');[['item_type',type],['item_name',name],['inventory_item_id',inventoryId],['medical_catalog_id',catalogId],['alternative_name',alternative],['frequency_hours',frequency],['first_dose_at',first],['dose_count',count],['quantity',quantity],['deduct_stock',deduct],['notes',notes]].forEach(([k,v])=>box.insertAdjacentHTML('beforeend','<input type="hidden" name="medical_items['+i+']['+k+']" value="'+escapeHtml(v)+'">'));document.getElementById('medicineAlternative').value='';document.getElementById('frequencyHours').value='';document.getElementById('firstDoseAt').value='';document.getElementById('doseCount').value='';document.getElementById('medicalQuantity').value='';document.getElementById('medicalNotes').value='';}function removeRow(id){document.querySelector('[data-row="'+id+'"]').remove();document.querySelectorAll('[name^="'+(id[0]==='d'?'dental_procedures':'medical_items')+'['+id.slice(1)+']"]').forEach(x=>x.remove());}function escapeHtml(value){return String(value??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c]));}function filterMedicalInventory(){const q=document.getElementById('medicalSearch').value.toLowerCase(),type=document.getElementById('medicalType').value;Array.from(document.getElementById('medicalInventory').options).forEach(o=>{if(!o.value)return;const text=(o.dataset.name+' '+(o.dataset.category||'')).toLowerCase();const category=(o.dataset.category||'').toLowerCase();const optionType=o.dataset.type||'';const typeMatch=optionType ? optionType===type : (!category||category.includes(type)||(type==='medicine'&&category.includes('{{ __('ui.medicine') }}'))||(type==='lab'&&category.includes('{{ __('ui.lab_test') }}'))||(type==='radiology'&&category.includes('{{ __('ui.radiology') }}')));o.hidden=!typeMatch||(q&&!text.includes(q));});}document.getElementById('medicalSearch').addEventListener('input',filterMedicalInventory);document.getElementById('medicalType').addEventListener('change',function(){document.getElementById('medicineFields').style.display=this.value==='medicine'?'grid':'none';filterMedicalInventory();});filterMedicalInventory();</script>@endsection