@extends('layout',['heading'=>__('ui.clinic_users'),'clinic'=>$clinic])
@section('content')
<div class="flex flex-wrap justify-between items-center gap-3 mb-5"><div><p class="text-slate-500">{{ __('ui.users_intro') }} {{ $clinic->name }}.</p></div><button class="btn" type="button" onclick="document.getElementById('addUserModal').classList.remove('hidden')">{{ __('ui.add_user') }}</button></div>
@if($errors->any())<div class="mb-4 rounded-lg bg-red-50 text-red-700 p-4">{{ $errors->first() }}</div>@endif
<div class="card p-0 overflow-x-auto"><table class="min-w-full text-sm"><thead class="bg-slate-100"><tr><th class="p-3 text-right">{{ __('ui.name') }}</th><th class="p-3 text-right">{{ __('ui.username') }} / {{ __('ui.email') }}</th><th class="p-3 text-right">{{ __('ui.role') }}</th><th class="p-3 text-right">{{ __('ui.status') }}</th><th class="p-3 text-right">{{ __('ui.actions') }}</th></tr></thead><tbody>@forelse($users as $user)<tr class="border-t align-top"><td class="p-3 font-semibold">{{ $user->name }}@if($user->role === 'clinic_doctor' && $user->specialty)<span class="block text-xs text-slate-500">{{ $user->specialty }}</span>@endif</td><td class="p-3">{{ $user->username ?? $user->email }} <span class="text-slate-400">{{ $user->email }}</span></td><td class="p-3">{{ ['clinic_admin'=>__('ui.clinic_admin'),'clinic_doctor'=>__('ui.doctor'),'clinic_receptionist'=>__('ui.receptionist'),'clinic_inventory'=>__('ui.inventory_manager')][$user->role] ?? $user->role }}</td><td class="p-3"><span class="rounded-full px-2 py-1 text-xs {{ $user->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-600' }}">{{ $user->is_active ? __('ui.active') : __('ui.inactive') }}</span></td><td class="p-3"><div class="flex flex-wrap gap-2"><button class="btn-secondary" type="button" onclick="openEdit({{ $user->id }}, @js($user->name), @js($user->username ?? $user->email), @js($user->role), @js($user->specialty))">{{ __('ui.edit') }}</button><button class="btn-secondary" type="button" onclick="openPassword({{ $user->id }}, @js($user->name))">{{ __('ui.password') }}</button>@if($user->role !== 'clinic_admin')<form method="post" action="/clinic-users/{{ $user->id }}/toggle" class="inline">@csrf<button class="btn-secondary" type="submit">{{ $user->is_active ? __('ui.disable') : __('ui.enable') }}</button></form>@endif</div></td></tr>@empty<tr><td colspan="5" class="p-8 text-center text-slate-500">{{ __('ui.no_users') }}</td></tr>@endforelse</tbody></table></div>
  <div id="addUserModal" class="modal hidden"><div class="panel panel-wide"><div class="modal-head"><div><p class="eyebrow">{{ __('ui.user_management') }}</p><h2>{{ __('ui.add_clinic_user') }}</h2></div><button type="button" class="close-btn" aria-label="{{ __('ui.close') }}" onclick="closeModals()">×</button></div><form method="post" action="/clinic-users" class="user-form">@csrf<div class="form-section user-data-section"><div class="section-title"><span class="section-number">1</span><div><h3>{{ __('ui.user_data') }}</h3><p>{{ __('ui.user_data_intro') }}.</p></div></div><div class="section-fields"><label>{{ __('ui.employee_name') }}<input class="input" name="name" required></label><label>{{ __('ui.username') }}<input class="input" name="username" required><label>{{ __('ui.email') }} ({{ __('ui.optional') }})<input class="input" type="email" name="email"></label></label><label>{{ __('ui.role') }}<select class="input" name="role" id="addUserRole" required><option value="clinic_doctor">{{ __('ui.doctor') }}</option><option value="clinic_receptionist">{{ __('ui.receptionist') }}</option><option value="clinic_inventory">{{ __('ui.inventory_manager') }}</option></select></label><label id="addDoctorSpecialtyField">{{ __('ui.doctor_specialty') }}<select class="input" name="specialty"><option value="">{{ __('ui.choose_specialty') }}</option>@foreach($clinicSpecialties as $specialty)<option value="{{ $specialty }}">{{ $specialty }} — {{ $clinicSpecialtyDoctorLimits[$specialty] ?? 0 }} {{ __('ui.doctors') }}</option>@endforeach</select></label><label>{{ __('ui.password') }}<input class="input" type="password" name="password" required minlength="8"></label><label>{{ __('ui.confirm_password') }}<input class="input" type="password" name="password_confirmation" required minlength="8"></label></div></div><div class="form-section permissions-section"><div class="section-title"><span class="section-number">2</span><div><h3>{{ __('ui.permissions') }}</h3><p>{{ __('ui.access_level') }}. {{ __('ui.empty_denies') }}.</p></div></div><div class="permissions-grid">@foreach(['dashboard'=>__('ui.dashboard'),'patients'=>__('ui.patients_files'),'appointments'=>__('ui.appointments'),'visits'=>__('ui.appointments_visits'),'reports'=>__('ui.reports'),'services'=>__('ui.services_prices'),'insurance'=>__('ui.insurance'),'inventory'=>__('ui.inventory'),'settings'=>__('ui.clinic_settings'),'users'=>__('ui.clinic_users')] as $key=>$label)<label>{{ $label }}<select class="input" name="clinic_permissions[{{ $key }}]"><option value="">{{ __('ui.no_permission') }}</option><option value="view">{{ __('ui.view_only') }}</option><option value="edit">{{ __('ui.view_edit') }}</option><option value="cancel">{{ __('ui.view_edit_delete') }}</option></select></label>@endforeach</div></div><div class="form-actions"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_user') }}</button></div></form></div></div>
<div id="editUserModal" class="modal hidden"><div class="panel"><h2>{{ __('ui.edit_user') }}</h2><form method="post" id="editForm" class="grid gap-3">@csrf<input class="input" name="name" id="editName" required><input class="input" name="username" id="editUsername" required><input class="input" name="email" id="editEmail" type="email"><select class="input" name="role" id="editRole" required><option value="clinic_admin">{{ __('ui.clinic_admin') }}</option><option value="clinic_doctor">{{ __('ui.doctor') }}</option><option value="clinic_receptionist">{{ __('ui.receptionist') }}</option><option value="clinic_inventory">{{ __('ui.inventory_manager') }}</option></select><label id="editDoctorSpecialtyField">{{ __('ui.doctor_specialty') }}<select class="input" name="specialty" id="editSpecialty"><option value="">{{ __('ui.choose_specialty') }}</option>@foreach($clinicSpecialties as $specialty)<option value="{{ $specialty }}">{{ $specialty }} — {{ $clinicSpecialtyDoctorLimits[$specialty] ?? 0 }} {{ __('ui.doctors') }}</option>@endforeach</select></label><div class="flex gap-2 justify-end"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_edit') }}</button></div></form></div></div>
<div id="passwordModal" class="modal hidden"><div class="panel"><h2 id="passwordTitle">{{ __('ui.change_password') }}</h2><form method="post" id="passwordForm" class="grid gap-3">@csrf<input class="input" type="password" name="password" required minlength="8" placeholder="{{ __('ui.new_password') }}"><input class="input" type="password" name="password_confirmation" required minlength="8" placeholder="{{ __('ui.confirm_password') }}"><div class="flex gap-2 justify-end"><button type="button" class="btn-secondary" onclick="closeModals()">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_password') }}</button></div></form></div></div>
<style>.modal{position:fixed;inset:0;background:#0f172aaa;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem}.modal.hidden{display:none}.panel{background:#fff;border-radius:1rem;padding:1.25rem;width:min(440px,100%);box-shadow:0 20px 50px #0004}.panel-wide{width:min(900px,100%);max-height:92vh;overflow:auto}.panel h2{font-weight:700;font-size:1.15rem;margin-bottom:1rem}.input{border:1px solid #cbd5e1;border-radius:.5rem;padding:.6rem;width:100%;font-size:13px;background:#fff}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.eyebrow{font-size:11px;color:#0e7490;font-weight:700;margin:0 0 .2rem}.close-btn{font-size:1.5rem;color:#64748b;line-height:1}.user-form{display:grid;grid-template-columns:1fr 1.35fr;gap:1rem}.form-section{border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem}.section-title{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:1rem}.section-number{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:999px;background:#0e7490;color:#fff;font-weight:700;font-size:12px;flex:none}.section-title h3{font-size:1rem;font-weight:700;margin:0}.section-title p{font-size:11px;color:#64748b;margin:.2rem 0 0}.section-fields{display:grid;gap:.7rem}.permissions-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.user-form label{display:grid;gap:.3rem;font-size:12px;color:#334155;font-weight:600}.form-actions{grid-column:1/-1;display:flex;gap:.5rem;justify-content:flex-end;padding-top:.25rem}.btn{background:#0e7490;color:white;border-radius:.5rem;padding:.55rem .8rem;font-size:13px}.btn-secondary{background:#e2e8f0;color:#334155;border-radius:.5rem;padding:.5rem .7rem;font-size:12px}@media(max-width:700px){.user-form{grid-template-columns:1fr}.permissions-grid{grid-template-columns:1fr}.form-actions{grid-column:auto}}</style>
<script>function closeModals(){document.querySelectorAll('.modal').forEach(x=>x.classList.add('hidden'))}function toggleDoctorSpecialty(role,field){field.classList.toggle('hidden',role!=='clinic_doctor')}function openEdit(id,name,username,role,specialty){document.getElementById('editForm').action='/clinic-users/'+id;document.getElementById('editName').value=name;document.getElementById('editUsername').value=username;document.getElementById('editEmail').value='';document.getElementById('editRole').value=role;document.getElementById('editSpecialty').value=specialty||'';toggleDoctorSpecialty(role,document.getElementById('editDoctorSpecialtyField'));document.getElementById('editUserModal').classList.remove('hidden')}function openPassword(id,name){document.getElementById('passwordTitle').textContent=@json(__('ui.change_password'))+' '+name;document.getElementById('passwordForm').action='/clinic-users/'+id+'/password';document.getElementById('passwordModal').classList.remove('hidden')}document.getElementById('addUserRole')?.addEventListener('change',e=>toggleDoctorSpecialty(e.target.value,document.getElementById('addDoctorSpecialtyField')));toggleDoctorSpecialty(document.getElementById('addUserRole')?.value,document.getElementById('addDoctorSpecialtyField'));document.getElementById('editRole')?.addEventListener('change',e=>toggleDoctorSpecialty(e.target.value,document.getElementById('editDoctorSpecialtyField')))</script>
@endsection