@extends('layout',['heading'=>__('ui.edit_clinic')])
@section('content')
<div class="max-w-6xl mx-auto space-y-5">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div><p class="text-xs text-slate-500">{{ __('ui.clinics_subscriptions') }} / {{ $clinic->code }}</p><h1 class="text-2xl font-extrabold">{{ __('ui.edit_clinic') }}: {{ $clinic->name }}</h1></div>
        <a class="btn-secondary" href="/admin/clinics">{{ __('ui.back') }}</a>
    </div>
    @if($errors->any())<div class="rounded-lg bg-red-50 text-red-700 p-4">{{ $errors->first() }}</div>@endif
    <form method="post" action="/admin/clinics/{{ $clinic->id }}/update" class="space-y-5" onsubmit="syncEditSpecialties()">@csrf
        <section class="card p-5"><h2 class="font-bold text-lg mb-4">{{ __('ui.clinic_data') }}</h2><div class="grid md:grid-cols-2 gap-4">
            <label>{{ __('ui.clinic_name') }}<input class="input" name="name" value="{{ old('name',$clinic->name) }}" required></label>
            <label>{{ __('ui.clinic_type') }}<select class="input" name="clinic_type" id="editClinicType" required><option value="normal" @selected($clinic->clinic_type==='normal')>{{ __('ui.normal_clinic') }}</option><option value="multi_branch" @selected($clinic->clinic_type==='multi_branch')>{{ __('ui.multi_branch_clinic') }}</option><option value="multi_specialty" @selected($clinic->clinic_type==='multi_specialty')>{{ __('ui.multi_specialty_clinic') }}</option><option value="multi_branch_specialty" @selected($clinic->clinic_type==='multi_branch_specialty')>{{ __('ui.multi_branch_specialty_clinic') }}</option></select></label>
            <label>{{ __('ui.address') }}<input class="input" name="address" value="{{ old('address',$clinic->address) }}"></label><label>{{ __('ui.phone') }}<input class="input" name="phone" value="{{ old('phone',$clinic->phone) }}"></label><label>{{ __('ui.phone2') }}<input class="input" name="phone2" value="{{ old('phone2',$clinic->phone2) }}"></label>
        </div></section>
        <section class="card p-5" id="branchesSection"><div class="flex items-center justify-between gap-3 mb-4"><div><h2 class="font-bold text-lg">{{ __('ui.branches_and_doctors') }}</h2><p class="text-sm text-slate-500">{{ __('ui.branch_update_hint') }}</p></div><button type="button" class="btn" onclick="addBranch()">+ {{ __('ui.add_branch') }}</button></div><div class="grid md:grid-cols-2 gap-3"><label>{{ __('ui.branch_count') }}<input class="input" id="editBranchCount" type="number" name="branch_count" min="1" max="100" value="{{ old('branch_count',$clinic->branch_count) }}" required></label></div><div id="branchRows" class="grid md:grid-cols-2 gap-3 mt-4">@foreach($branches as $branch)<label>{{ $branch->name }} — {{ __('ui.doctors_count') }}<input class="input" type="number" name="branch_doctors[]" min="0" max="1000" value="{{ $branch->doctor_count }}"></label>@endforeach</div></section>
        <section class="card p-5" id="specialtiesSection"><div class="flex items-center justify-between gap-3 mb-4"><div><h2 class="font-bold text-lg">{{ __('ui.specialties_and_doctors') }}</h2><p class="text-sm text-slate-500">{{ __('ui.specialty_update_hint') }}</p></div><button type="button" class="btn" onclick="addSpecialty()">+ {{ __('ui.add_specialty') }}</button></div><div id="specialtyRows" class="space-y-3">@foreach($specialties as $item)<div class="grid md:grid-cols-[1fr_160px] gap-3 specialty-row"><input class="input specialty-name" value="{{ $item['specialty'] ?? '' }}" placeholder="{{ __('ui.specialty_name') }}"><input class="input specialty-doctors" type="number" min="1" max="1000" value="{{ $item['doctors'] ?? 1 }}" placeholder="{{ __('ui.doctors_count') }}"></div>@endforeach</div><input type="hidden" name="specialties_config" id="editSpecialtiesConfig"></section>
        <div class="flex justify-end gap-3"><a class="btn-secondary" href="/admin/clinics">{{ __('ui.cancel') }}</a><button class="btn" type="submit">{{ __('ui.save_changes') }}</button></div>
    </form>
</div>
<script>
const specialtyRows=document.getElementById('specialtyRows'), branchRows=document.getElementById('branchRows');
function addSpecialty(){specialtyRows.insertAdjacentHTML('beforeend','<div class="grid md:grid-cols-[1fr_160px] gap-3 specialty-row"><input class="input specialty-name" placeholder="{{ __('ui.specialty_name') }}"><input class="input specialty-doctors" type="number" min="1" max="1000" value="1" placeholder="{{ __('ui.doctors_count') }}"></div>')}
function addBranch(){const n=branchRows.querySelectorAll('label').length+1;branchRows.insertAdjacentHTML('beforeend','<label>{{ __('ui.branch') }} '+n+' — {{ __('ui.doctors_count') }}<input class="input" type="number" name="branch_doctors[]" min="0" max="1000" value="0"></label>');document.getElementById('editBranchCount').value=n}
function syncEditSpecialties(){const rows=[...document.querySelectorAll('.specialty-row')];document.getElementById('editSpecialtiesConfig').value=JSON.stringify(rows.map(r=>({specialty:r.querySelector('.specialty-name').value.trim(),doctors:Math.max(1,Number(r.querySelector('.specialty-doctors').value||1)),requirements:null})).filter(x=>x.specialty))}
function refreshEditSections(){const v=document.getElementById('editClinicType').value;document.getElementById('branchesSection').classList.toggle('hidden',!['multi_branch','multi_branch_specialty'].includes(v));document.getElementById('specialtiesSection').classList.toggle('hidden',!['multi_specialty','multi_branch_specialty'].includes(v))}document.getElementById('editClinicType').addEventListener('change',refreshEditSections);refreshEditSections();
</script>
@endsection
<style>.input{border:1px solid #cbd5e1;border-radius:.5rem;padding:.65rem;width:100%;font-size:13px;background:#fff}.card{background:#fff;border-radius:1rem;box-shadow:0 8px 30px #0f172a12}.btn,.btn-secondary{display:inline-flex;align-items:center;border-radius:.55rem;padding:.6rem .85rem;font-size:13px}.btn{background:#0e7490;color:#fff}.btn-secondary{background:#e2e8f0;color:#334155}</style>