@extends('layout',['heading'=>__('ui.lab_radiology_catalog'),'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">MEDICAL SERVICES</p><h2 class="text-2xl font-extrabold mt-1">{{ __('ui.lab_radiology_services') }}</h2><p class="text-slate-500 mt-1">{{ __('ui.manage_names_prices') }}.</p></div><button class="btn" type="button" onclick="openMedical('addMedical')">+ {{ __('ui.add_lab_radiology_service') }}</button></section><section class="card p-0 overflow-x-auto"><table class="w-full text-right"><thead class="bg-slate-50 border-b"><tr><th class="p-3">{{ __('ui.type') }}</th><th class="p-3">{{ __('ui.service_name') }}</th><th class="p-3">{{ __('ui.category') }}</th><th class="p-3">{{ __('ui.price') }}</th><th class="p-3">{{ __('ui.actions') }}</th></tr></thead><tbody>@forelse($items as $item)<tr class="border-b"><td class="p-3"><span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $item->type==='lab'?'bg-indigo-50 text-indigo-700':'bg-cyan-50 text-cyan-700' }}">{{ $item->type === 'lab' ? __('ui.analysis') : __('ui.radiology') }}</span></td><td class="p-3 font-bold">{{ $item->name }}</td><td class="p-3">{{ $item->category ?: '—' }}</td><td class="p-3 text-teal-700 font-bold">{{ number_format($item->price,2) }} {{ __('ui.currency') }}</td><td class="p-3"><button type="button" class="text-teal-700 ml-3" onclick="openMedical('editMedical{{ $item->id }}')">{{ __('ui.edit') }}</button><form method="post" action="/medical-catalog/{{ $item->id }}" class="inline" onsubmit="return confirm('{{ __('ui.disable_service_confirm') }}')">@csrf @method('DELETE')<button class="text-rose-700">{{ __('ui.disable') }}</button></form></td></tr>@empty<tr><td colspan="5" class="p-12 text-center text-slate-500">{{ __('ui.no_lab_radiology') }}.</td></tr>@endforelse</tbody></table></section></div>
<div id="addMedical" class="medical-modal"><div class="medical-panel"><h3>{{ __('ui.add_lab_radiology_service') }}</h3><form method="post" action="/medical-catalog" class="space-y-3">@csrf<label>{{ __('ui.service_type') }}<select class="input" name="type" required><option value="lab">{{ __('ui.lab_test') }}</option><option value="radiology">{{ __('ui.radiology_service') }}</option></select></label><label>{{ __('ui.service_name') }}<input class="input" name="name" required></label><label>{{ __('ui.category') }}<input class="input" name="category"></label><label>{{ __('ui.price') }}<input class="input" type="number" name="price" min="0" step=".01" required></label><button class="btn">{{ __('ui.save') }}</button></form></div></div>@foreach($items as $item)<div id="editMedical{{ $item->id }}" class="medical-modal"><div class="medical-panel"><h3>{{ __('ui.edit') }} {{ __('ui.medical_service') }}</h3><form method="post" action="/medical-catalog/{{ $item->id }}" class="space-y-3">@csrf<label>{{ __('ui.service_type') }}<select class="input" name="type" required><option value="lab" {{ $item->type==='lab'?'selected':'' }}>{{ __('ui.lab_test') }}</option><option value="radiology" {{ $item->type==='radiology'?'selected':'' }}>{{ __('ui.radiology_service') }}</option></select></label><label>{{ __('ui.service_name') }}<input class="input" name="name" value="{{ $item->name }}" required></label><label>{{ __('ui.category') }}<input class="input" name="category" value="{{ $item->category }}"></label><label>{{ __('ui.price') }}<input class="input" type="number" name="price" value="{{ $item->price }}" min="0" step=".01" required></label><button class="btn">{{ __('ui.save_edit') }}</button></form></div></div>@endforeach
<style>.medical-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0f172a99;padding:1rem;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}.medical-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}.medical-panel{background:white;width:min(100%,500px);padding:1.25rem;border-radius:18px;box-shadow:0 20px 55px #0f172a33}.medical-panel h3{font-weight:800;font-size:1.1rem;margin-bottom:1rem}.medical-panel form{display:grid;gap:.75rem}</style><script>function openMedical(id){document.getElementById(id)?.classList.add('is-open')}document.querySelectorAll('.medical-modal').forEach(x=>x.addEventListener('click',e=>{if(e.target===x)x.classList.remove('is-open')}));document.addEventListener('keydown',e=>{if(e.key==='Escape')document.querySelectorAll('.medical-modal.is-open').forEach(x=>x.classList.remove('is-open'))});</script>
@endsection