@extends('layout',['heading'=>__('ui.services'),'clinic'=>$clinic])
@section('content')
<div class="space-y-6">
    <div class="card p-5 bg-slate-50 flex items-center justify-between gap-4">
        <div><h2 class="font-bold text-lg">{{ __('ui.services_procedures_separate') }}</h2><p class="text-sm text-slate-600 mt-1">{{ __('ui.services_procedures_hint') }}</p></div>
        <div class="flex gap-2"><button type="button" class="btn" data-modal-open="addServiceModal">{{ __('ui.add_service') }}</button><button type="button" class="btn" data-modal-open="addProcedureModal">{{ __('ui.add_procedure') }}</button></div>
    </div>
    <div class="grid xl:grid-cols-2 gap-6">
        <section class="card p-5">
            <div class="flex items-center justify-between mb-4"><h2 class="font-bold text-lg">{{ __('ui.services_prices') }}</h2><span class="text-sm text-slate-500">{{ __('ui.service_count', ['count' => $services->count()]) }}</span></div>
            <div class="overflow-x-auto"><table class="w-full text-right text-sm"><thead class="border-b text-slate-500"><tr><th class="p-2">{{ __('ui.name') }}</th><th class="p-2">{{ __('ui.category') }}</th><th class="p-2">{{ __('ui.price') }}</th><th class="p-2">{{ __('ui.actions_short') }}</th></tr></thead><tbody>
            @forelse($services as $s)
            <tr class="border-b"><td class="p-2">{{ $s->name }}</td><td class="p-2">{{ $s->category ?: '—' }}</td><td class="p-2">{{ number_format($s->price,2) }} {{ __('ui.currency') }}</td><td class="p-2 whitespace-nowrap"><button type="button" class="text-cyan-700 ml-2" data-modal-open="editService{{ $s->id }}">{{ __('ui.edit') }}</button><form method="post" action="/services/{{ $s->id }}" class="inline" onsubmit="return confirm('{{ __('ui.delete_service_confirm') }}')">@csrf @method('DELETE')<button class="text-red-600">{{ __('ui.delete') }}</button></form></td></tr>
            @empty<tr><td colspan="4" class="p-4 text-center text-slate-500">{{ __('ui.no_services') }}</td></tr>@endforelse
            </tbody></table></div>
        </section>
        <section class="card p-5">
            <div class="flex items-center justify-between mb-4"><h2 class="font-bold text-lg">{{ __('ui.medical_procedures') }}</h2><span class="text-sm text-slate-500">{{ __('ui.procedure_count', ['count' => $procedures->count()]) }}</span></div>
            <div class="overflow-x-auto"><table class="w-full text-right text-sm"><thead class="border-b text-slate-500"><tr><th class="p-2">{{ __('ui.name') }}</th><th class="p-2">{{ __('ui.category') }}</th><th class="p-2">{{ __('ui.price') }}</th><th class="p-2">{{ __('ui.actions_short') }}</th></tr></thead><tbody>
            @forelse($procedures as $p)
            <tr class="border-b"><td class="p-2">{{ $p->name }}</td><td class="p-2">{{ $p->category ?: '—' }}</td><td class="p-2">{{ number_format($p->price,2) }} {{ __('ui.currency') }}</td><td class="p-2 whitespace-nowrap"><button type="button" class="text-cyan-700 ml-2" data-modal-open="editProcedure{{ $p->id }}">{{ __('ui.edit') }}</button><form method="post" action="/procedures/{{ $p->id }}" class="inline" onsubmit="return confirm('{{ __('ui.delete_procedure_confirm') }}')">@csrf @method('DELETE')<button class="text-red-600">{{ __('ui.delete') }}</button></form></td></tr>
            @empty<tr><td colspan="4" class="p-4 text-center text-slate-500">{{ __('ui.no_procedures') }}</td></tr>@endforelse
            </tbody></table></div>
        </section>
    </div>
</div>

<div id="addServiceModal" class="modal-backdrop"><div class="modal-panel"><div class="modal-head"><h3>{{ __('ui.new_service') }}</h3><button type="button" data-modal-close>×</button></div><form method="post" action="/services" class="space-y-3">@csrf<label>{{ __('ui.service_name') }}<input class="input" name="name" required></label><label>{{ __('ui.service_category') }}<select class="input" name="catalog_category_id"><option value="">{{ __('ui.without_category') }}</option>@foreach($serviceCategories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select></label><label>{{ __('ui.price') }}<input class="input" type="number" step=".01" min="0" name="price" required></label><div class="modal-actions"><button type="button" class="btn-secondary" data-modal-close>{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_service') }}</button></div></form></div></div>
<div id="addProcedureModal" class="modal-backdrop"><div class="modal-panel"><div class="modal-head"><h3>{{ __('ui.add_medical_procedure') }}</h3><button type="button" data-modal-close>×</button></div><form method="post" action="/procedures" class="space-y-3">@csrf<label>{{ __('ui.procedure_name') }}<input class="input" name="name" required></label><label>{{ __('ui.procedure_category') }}<select class="input" name="catalog_category_id"><option value="">{{ __('ui.without_category') }}</option>@foreach($procedureCategories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select></label><label>{{ __('ui.price') }}<input class="input" type="number" step=".01" min="0" name="price" required></label><div class="modal-actions"><button type="button" class="btn-secondary" data-modal-close>{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_procedure') }}</button></div></form></div></div>
@foreach($services as $s)<div id="editService{{ $s->id }}" class="modal-backdrop"><div class="modal-panel"><div class="modal-head"><h3>{{ __('ui.edit_service') }}</h3><button type="button" data-modal-close>×</button></div><form method="post" action="/services/{{ $s->id }}" class="space-y-3">@csrf<label>{{ __('ui.service_name') }}<input class="input" name="name" value="{{ $s->name }}" required></label><label>{{ __('ui.service_category') }}<select class="input" name="catalog_category_id"><option value="">{{ __('ui.without_category') }}</option>@foreach($serviceCategories as $category)<option value="{{ $category->id }}" {{ ($s->catalog_category_id ?? null) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>@endforeach</select></label><label>{{ __('ui.price') }}<input class="input" type="number" step=".01" min="0" name="price" value="{{ $s->price }}" required></label><div class="modal-actions"><button type="button" class="btn-secondary" data-modal-close>{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_edit') }}</button></div></form></div></div>@endforeach
@foreach($procedures as $p)<div id="editProcedure{{ $p->id }}" class="modal-backdrop"><div class="modal-panel"><div class="modal-head"><h3>{{ __('ui.edit_medical_procedure') }}</h3><button type="button" data-modal-close>×</button></div><form method="post" action="/procedures/{{ $p->id }}" class="space-y-3">@csrf<label>{{ __('ui.procedure_name') }}<input class="input" name="name" value="{{ $p->name }}" required></label><label>{{ __('ui.procedure_category') }}<select class="input" name="catalog_category_id"><option value="">{{ __('ui.without_category') }}</option>@foreach($procedureCategories as $category)<option value="{{ $category->id }}" {{ ($p->catalog_category_id ?? null) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>@endforeach</select></label><label>{{ __('ui.price') }}<input class="input" type="number" step=".01" min="0" name="price" value="{{ $p->price }}" required></label><div class="modal-actions"><button type="button" class="btn-secondary" data-modal-close>{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_edit') }}</button></div></form></div></div>@endforeach

<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;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}.modal-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}.modal-panel{background:#fff;width:min(100%,32rem);max-height:90vh;overflow-y:auto;border-radius:1rem;padding:1.25rem;box-shadow:0 20px 50px rgba(15,23,42,.25);transform:translateY(10px) scale(.97);transition:transform .22s cubic-bezier(.23,1,.32,1)}.modal-backdrop.is-open .modal-panel{transform:translateY(0) scale(1)}.modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;padding-bottom:.75rem;margin-bottom:1rem}.modal-head h3{font-weight:700;font-size:1.1rem}.modal-head button{font-size:1.6rem;line-height:1;color:#64748b}.modal-actions{display:flex;justify-content:flex-start;gap:.5rem;padding-top:.5rem}.btn-secondary{border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem 1rem;color:#334155;background:#fff}
</style>
<script>
const closeModalSmooth=modal=>{if(!modal)return;modal.classList.remove('is-open')};document.querySelectorAll('[data-modal-open]').forEach(button=>button.addEventListener('click',()=>{const modal=document.getElementById(button.dataset.modalOpen);if(modal)requestAnimationFrame(()=>modal.classList.add('is-open'));}));document.querySelectorAll('[data-modal-close]').forEach(button=>button.addEventListener('click',()=>closeModalSmooth(button.closest('.modal-backdrop'))));document.querySelectorAll('.modal-backdrop').forEach(modal=>modal.addEventListener('click',event=>{if(event.target===modal)closeModalSmooth(modal)}));document.addEventListener('keydown',event=>{if(event.key==='Escape')document.querySelectorAll('.modal-backdrop.is-open').forEach(closeModalSmooth);});
</script>
@endsection