<div x-data="{
    roleSlug: @entangle('selectedRoleSlug'),
    trainerOpen: true,
    employeeOpen: true,
    guardianOpen: true,
}">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? 'تعديل المستخدم' : 'إضافة مستخدم جديد' }}</h1>
        <a href="{{ route('users.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">&larr; {{ __('العودة') }}</a>
    </div>

    <form wire:submit="save" class="space-y-6">
        {{-- ─── User Information Section ─────────────────────────────── --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات المستخدم') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
                    <input type="text" wire:model="name_ar" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label>
                    <input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }} *</label>
                    <input type="email" wire:model="email" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500">{{ __('سيُستخدم كاسم مستخدم لتسجيل الدخول') }}</p>
                    @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الدور') }}</label>
                    <select wire:model.live="role_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">— {{ __('بدون دور') }} —</option>
                        @foreach($roles as $r)
                            <option value="{{ $r->id }}">{{ $r->name_ar }} ({{ $r->slug }})</option>
                        @endforeach
                    </select>
                    @error('role_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ $editing ? __('كلمة مرور جديدة (اتركها فارغة للإبقاء)') : __('كلمة المرور') . ' *' }}</label>
                    <input type="password" wire:model="password" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror">
                    @error('password') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تأكيد كلمة المرور') }}</label>
                    <input type="password" wire:model="password_confirmation" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحالة') }}</label>
                    <select wire:model="status" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="active">{{ __('نشط') }}</option>
                        <option value="inactive">{{ __('غير نشط') }}</option>
                        <option value="suspended">{{ __('موقوف') }}</option>
                        <option value="pending">{{ __('قيد الانتظار') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ربط بشخص (اختياري)') }}</label>
                    @if($person_id && $selectedPersonName)
                        <div class="flex items-center gap-2 px-4 py-2.5 bg-green-50 border border-green-200 rounded-lg">
                            <span class="text-sm font-medium text-green-800 flex-1">{{ $selectedPersonName }}</span>
                            <button type="button" wire:click="clearPerson" class="text-xs text-red-600 hover:text-red-800 font-medium">{{ __('إلغاء') }}</button>
                        </div>
                    @else
                        <div class="relative">
                            <input type="text" wire:model.live.debounce.300ms="personSearch"
                                   placeholder="{{ __('ابحث بالاسم أو رقم الهاتف...') }}"
                                   class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            @if($this->personSearchResults->isNotEmpty())
                                <div class="absolute z-20 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                                    @foreach($this->personSearchResults as $p)
                                        <button type="button" wire:click="selectPerson({{ $p->id }})"
                                                class="w-full text-start px-4 py-2.5 hover:bg-blue-50 transition-colors border-b border-gray-100 last:border-0">
                                            <div class="text-sm font-medium text-gray-800">{{ $p->name_ar ?? $p->name }}</div>
                                            <div class="text-xs text-gray-500" dir="ltr">{{ $p->phone ?? '' }}</div>
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif
                    <p class="mt-1 text-xs text-gray-500">{{ __('ابحث بالاسم أو رقم الهاتف لربط المستخدم بشخص موجود') }}</p>
                </div>
            </div>
        </div>

        {{-- ─── Trainer Setup Section ────────────────────────────────── --}}
        <div x-show="roleSlug === 'trainer' || roleSlug === 'head_trainer'"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-xl shadow-sm border border-emerald-200 p-4 sm:p-6">

            {{-- Header with collapse toggle --}}
            <button type="button" @click="trainerOpen = !trainerOpen" class="flex items-center justify-between w-full text-start">
                <div class="flex items-center gap-2">
                    <span class="flex items-center justify-center w-8 h-8 bg-emerald-100 text-emerald-700 rounded-lg">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </span>
                    <h2 class="text-base sm:text-lg font-semibold text-emerald-800">{{ __('إعداد المدرب') }}</h2>
                </div>
                <svg :class="trainerOpen ? 'rotate-180' : ''" class="w-5 h-5 text-gray-400 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>

            <div x-show="trainerOpen" x-transition class="mt-4">
                @if($editing && $hasExistingTrainer)
                    <div class="mb-4 p-3 bg-emerald-50 rounded-lg border border-emerald-200">
                        <p class="text-sm text-emerald-800 font-medium">✓ {{ __('يوجد سجل مدرب مربوط بهذا المستخدم') }}</p>
                        <p class="text-xs text-emerald-600 mt-1">{{ __('يمكنك تعديل بيانات المدرب من صفحة المدربين') }}</p>
                    </div>
                @elseif($editing && $missingRoleEntities && $this->shouldShowTrainerSection())
                    <div class="mb-4 p-3 bg-amber-50 rounded-lg border border-amber-200">
                        <p class="text-sm text-amber-800 font-medium">⚠️ {{ __('هذا المستخدم له دور مدرب لكن لا يوجد سجل مدرب') }}</p>
                        <p class="text-xs text-amber-600 mt-1">{{ __('أكمل البيانات أدناه لإنشاء السجل المطلوب') }}</p>
                    </div>
                @endif

                {{-- Toggle: Create trainer record --}}
                <label class="flex items-center gap-3 mb-4 cursor-pointer">
                    <input type="checkbox" wire:model.live="createTrainer" class="w-5 h-5 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500"
                           @if($editing && $hasExistingTrainer) disabled @endif>
                    <span class="text-sm font-medium text-gray-700">{{ __('إنشاء سجل مدرب؟') }}</span>
                </label>

                @if($createTrainer)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 pt-3 border-t border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نموذج التعويض') }} *</label>
                            <select wire:model="trainerCompensationModel" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 @error('trainerCompensationModel') border-red-500 @enderror">
                                @foreach($compensationModels as $cm)
                                    <option value="{{ $cm->value }}">{{ $cm->label() }}</option>
                                @endforeach
                            </select>
                            @error('trainerCompensationModel') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('قيمة المعدل (ج.م)') }} *</label>
                            <input type="number" wire:model="trainerRateAmount" dir="ltr" step="0.01" min="0" placeholder="0.00"
                                   class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 @error('trainerRateAmount') border-red-500 @enderror">
                            <p class="mt-1 text-xs text-gray-500">{{ __('المبلغ بالجنيه المصري') }}</p>
                            @error('trainerRateAmount') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                            {{-- Only an all-branches user chooses here; otherwise
                                 the topbar switcher already fixed the branch and a
                                 second picker would just be a way out of it. --}}
                            @if($branches->count() > 1)
                                <select wire:model="trainerBranchId" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                                    <option value="">— {{ __('جميع الفروع') }} —</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                                    @endforeach
                                </select>
                            @else
                                <p class="w-full px-4 py-2.5 text-sm border border-gray-200 bg-gray-50 rounded-lg text-gray-700">
                                    {{ $branches->first()?->name_ar ?? __('غير محدد') }}
                                </p>
                            @endif
                            @error('trainerBranchId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div class="mt-3 p-3 bg-emerald-50 rounded-lg border border-emerald-100">
                        <p class="text-xs text-emerald-700">
                            <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {{ __('يمكن إضافة المؤهلات وجدول التوافر لاحقاً من صفحة المدرب') }}
                        </p>
                    </div>
                @endif
            </div>
        </div>

        {{-- ─── Employee Setup Section (Staff Roles) ─────────────────── --}}
        <div x-show="roleSlug === 'receptionist' || roleSlug === 'accountant' || roleSlug === 'branch_manager' || roleSlug === 'academy_admin'"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-6">

            {{-- Header with collapse toggle --}}
            <button type="button" @click="employeeOpen = !employeeOpen" class="flex items-center justify-between w-full text-start">
                <div class="flex items-center gap-2">
                    <span class="flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-lg">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </span>
                    <h2 class="text-base sm:text-lg font-semibold text-blue-800">{{ __('إعداد الموظف') }}</h2>
                </div>
                <svg :class="employeeOpen ? 'rotate-180' : ''" class="w-5 h-5 text-gray-400 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>

            <div x-show="employeeOpen" x-transition class="mt-4">
                @if($editing && $hasExistingEmployee)
                    <div class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
                        <p class="text-sm text-blue-800 font-medium">✓ {{ __('يوجد سجل موظف مربوط بهذا المستخدم') }}</p>
                        <p class="text-xs text-blue-600 mt-1">{{ __('يمكنك تعديل بيانات الموظف من صفحة الموظفين') }}</p>
                    </div>
                @elseif($editing && $missingRoleEntities && $this->shouldShowEmployeeSection())
                    <div class="mb-4 p-3 bg-amber-50 rounded-lg border border-amber-200">
                        <p class="text-sm text-amber-800 font-medium">⚠️ {{ __('هذا المستخدم له دور موظف لكن لا يوجد سجل موظف') }}</p>
                        <p class="text-xs text-amber-600 mt-1">{{ __('أكمل البيانات أدناه لإنشاء السجل المطلوب') }}</p>
                    </div>
                @endif

                {{-- Toggle: Create employee record --}}
                <label class="flex items-center gap-3 mb-4 cursor-pointer">
                    <input type="checkbox" wire:model.live="createEmployee" class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                           @if($editing && $hasExistingEmployee) disabled @endif>
                    <span class="text-sm font-medium text-gray-700">{{ __('إنشاء سجل موظف؟') }}</span>
                </label>

                @if($createEmployee)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 pt-3 border-t border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التوظيف') }} *</label>
                            <select wire:model="employeeEmploymentType" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('employeeEmploymentType') border-red-500 @enderror">
                                @foreach($employmentTypes as $et)
                                    <option value="{{ $et->value }}">{{ $et->label() }}</option>
                                @endforeach
                            </select>
                            @error('employeeEmploymentType') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القسم') }}</label>
                            <input type="text" wire:model="employeeDepartment" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنصب') }}</label>
                            <input type="text" wire:model="employeePosition" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البدء') }} *</label>
                            <input type="date" wire:model="employeeStartDate" dir="ltr" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 @error('employeeStartDate') border-red-500 @enderror">
                            @error('employeeStartDate') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                            {{-- Same reasoning as the trainer branch above: one
                                 branch selectable means the choice was already
                                 made in the topbar. --}}
                            @if($branches->count() > 1)
                                <select wire:model="employeeBranchId" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                    <option value="">— {{ __('بدون فرع محدد') }} —</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                                    @endforeach
                                </select>
                            @else
                                <p class="w-full px-4 py-2.5 text-sm border border-gray-200 bg-gray-50 rounded-lg text-gray-700">
                                    {{ $branches->first()?->name_ar ?? __('غير محدد') }}
                                </p>
                            @endif
                            @error('employeeBranchId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- ─── Guardian Setup Section (Parent Role) ─────────────────── --}}
        <div x-show="roleSlug === 'parent'"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-xl shadow-sm border border-amber-200 p-4 sm:p-6">

            {{-- Header with collapse toggle --}}
            <button type="button" @click="guardianOpen = !guardianOpen" class="flex items-center justify-between w-full text-start">
                <div class="flex items-center gap-2">
                    <span class="flex items-center justify-center w-8 h-8 bg-amber-100 text-amber-700 rounded-lg">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </span>
                    <h2 class="text-base sm:text-lg font-semibold text-amber-800">{{ __('ربط ولي الأمر') }}</h2>
                </div>
                <svg :class="guardianOpen ? 'rotate-180' : ''" class="w-5 h-5 text-gray-400 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>

            <div x-show="guardianOpen" x-transition class="mt-4">
                @if($editing && $hasExistingGuardian)
                    <div class="mb-4 p-3 bg-amber-50 rounded-lg border border-amber-200">
                        <p class="text-sm text-amber-800 font-medium">✓ {{ __('يوجد سجل ولي أمر مربوط بهذا المستخدم') }}</p>
                        <p class="text-xs text-amber-600 mt-1">{{ __('يمكنك إدارة الأبناء المربوطين من صفحة أولياء الأمور') }}</p>
                    </div>
                @elseif($editing && $missingRoleEntities && $this->shouldShowGuardianSection())
                    <div class="mb-4 p-3 bg-red-50 rounded-lg border border-red-200">
                        <p class="text-sm text-red-800 font-medium">⚠️ {{ __('هذا المستخدم له دور ولي أمر لكن لا يوجد سجل ولي أمر') }}</p>
                        <p class="text-xs text-red-600 mt-1">{{ __('أكمل البيانات أدناه لربط ولي الأمر') }}</p>
                    </div>
                @endif

                {{-- Mode selector --}}
                <div class="flex gap-4 mb-4">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" wire:model.live="guardianMode" value="new" class="w-4 h-4 text-amber-600 border-gray-300 focus:ring-amber-500">
                        <span class="text-sm font-medium text-gray-700">{{ __('إنشاء سجل ولي أمر جديد') }}</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" wire:model.live="guardianMode" value="existing" class="w-4 h-4 text-amber-600 border-gray-300 focus:ring-amber-500">
                        <span class="text-sm font-medium text-gray-700">{{ __('ربط بولي أمر موجود') }}</span>
                    </label>
                </div>

                {{-- Existing guardian selection --}}
                @if($guardianMode === 'existing')
                    <div class="pt-3 border-t border-gray-100">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اختر ولي الأمر') }} *</label>
                        <select wire:model="existingGuardianId" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 @error('existingGuardianId') border-red-500 @enderror">
                            <option value="">— {{ __('اختر') }} —</option>
                            @foreach($guardians ?? [] as $g)
                                <option value="{{ $g['id'] }}">{{ $g['name'] }} {{ $g['phone'] ? '(' . $g['phone'] . ')' : '' }}</option>
                            @endforeach
                        </select>
                        @error('existingGuardianId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>
                @else
                    {{-- New guardian creation --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 pt-3 border-t border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('صلة القرابة') }} *</label>
                            <select wire:model="guardianRelationshipType" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 @error('guardianRelationshipType') border-red-500 @enderror">
                                <option value="father">{{ __('أب') }}</option>
                                <option value="mother">{{ __('أم') }}</option>
                                <option value="grandfather">{{ __('جد') }}</option>
                                <option value="grandmother">{{ __('جدة') }}</option>
                                <option value="uncle">{{ __('عم / خال') }}</option>
                                <option value="aunt">{{ __('عمة / خالة') }}</option>
                                <option value="sibling">{{ __('أخ / أخت') }}</option>
                                <option value="legal_guardian">{{ __('ولي أمر قانوني') }}</option>
                                <option value="other">{{ __('أخرى') }}</option>
                            </select>
                            @error('guardianRelationshipType') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ربط باللاعبين') }}</label>
                            <div class="max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3 space-y-2">
                                @forelse($participants ?? [] as $participant)
                                    <label class="flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1.5 rounded">
                                        <input type="checkbox" wire:model="guardianParticipantIds" value="{{ $participant['id'] }}" class="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
                                        <span class="text-sm text-gray-700">{{ $participant['name'] }}</span>
                                    </label>
                                @empty
                                    <p class="text-sm text-gray-500 text-center py-2">{{ __('لا يوجد لاعبين مسجلين') }}</p>
                                @endforelse
                            </div>
                            <p class="mt-1 text-xs text-gray-500">{{ __('اختر اللاعبين المرتبطين بولي الأمر هذا') }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- ─── Form Actions ─────────────────────────────────────────── --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('users.list') }}" wire:navigate class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">{{ __('إلغاء') }}</a>
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
                <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستخدم') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>

    {{-- Flash messages --}}
    @if(session('error'))
        <div class="fixed bottom-4 start-4 end-4 sm:start-auto sm:end-4 sm:w-96 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg z-50" x-data x-init="setTimeout(() => $el.remove(), 6000)">
            <p class="text-sm text-red-800">{{ session('error') }}</p>
        </div>
    @endif
</div>
