<div>
    <div class="max-w-3xl mx-auto">
        {{-- Header --}}
        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('trainers.list') }}" wire:navigate class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l5-5-5-5M18 12H4"/></svg>
            </a>
            <h1 class="text-2xl font-bold text-gray-900">{{ $editing ? __('تعديل مدرب') : __('إضافة مدرب جديد') }}</h1>
        </div>

        {{-- Flash messages --}}
        @if(session('error'))
            <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">{{ session('error') }}</div>
        @endif

        <form wire:submit="save" class="space-y-6">
            {{-- Employee Selection --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الموظف') }}</h2>

                @if($employeeId)
                    <div class="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <span class="font-medium text-blue-900">{{ $selectedEmployeeName }}</span>
                        @unless($editing)
                        <button type="button" wire:click="$set('employeeId', null)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تغيير') }}</button>
                        @endunless
                    </div>
                @else
                    <div class="relative">
                        <input type="text" wire:model.live.debounce.300ms="employeeSearch"
                               placeholder="{{ __('ابحث عن موظف (يجب أن يكون موظف أولاً)...') }}"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

                        @if(count($searchResults) > 0)
                            <div class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                                @foreach($searchResults as $emp)
                                    <button type="button" wire:click="selectEmployee({{ $emp->id }})"
                                            class="w-full px-4 py-3 text-start hover:bg-gray-50 border-b border-gray-100 last:border-0">
                                        <p class="font-medium text-gray-900">{{ $emp->person->name_ar }}</p>
                                        <p class="text-xs text-gray-500 mt-0.5">{{ $emp->employee_number }} - {{ $emp->position ?? $emp->employment_type->label() }}</p>
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <p class="text-xs text-gray-500 mt-2">{{ __('يجب إضافة الشخص كموظف أولاً من صفحة الموظفين') }}</p>
                @endif
                @error('employeeId') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Activities (Required) --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الأنشطة') }} <span class="text-red-500">*</span></h2>
                <p class="text-sm text-gray-500 mb-3">{{ __('اختر نشاط واحد على الأقل يدربه هذا المدرب') }}</p>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                    @foreach($activities as $activity)
                        <label class="flex items-center gap-2 p-2.5 rounded-lg border cursor-pointer transition-colors
                            {{ in_array($activity->id, $sports) ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:bg-gray-50' }}">
                            <input type="checkbox" wire:model="sports" value="{{ $activity->id }}"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <div class="flex items-center gap-1.5">
                                <div class="w-3 h-3 rounded-full shrink-0" style="background-color: {{ $activity->color }}"></div>
                                <span class="text-sm font-medium text-gray-700">{{ $activity->name_ar }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
                @error('sports') <p class="text-sm text-red-600 mt-2">{{ $message }}</p> @enderror
            </div>

            {{-- Compensation Model --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('نموذج التعويض') }}</h2>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نموذج الدفع') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="compensationModel" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        @foreach($compensationModels as $cm)
                            <option value="{{ $cm->value }}">{{ $cm->label() }}</option>
                        @endforeach
                    </select>
                    @error('compensationModel') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @if(in_array($compensationModel, ['hourly', 'hybrid']))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر الساعة (ج.م)') }}</label>
                        <input type="number" wire:model="hourlyRate" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="0.00">
                    </div>
                    @endif

                    @if(in_array($compensationModel, ['per_session', 'hybrid']))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر الحصة (ج.م)') }}</label>
                        <input type="number" wire:model="sessionRate" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="0.00">
                    </div>
                    @endif

                    @if(in_array($compensationModel, ['per_group', 'hybrid']))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر المجموعة (ج.م)') }}</label>
                        <input type="number" wire:model="groupRate" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="0.00">
                    </div>
                    @endif

                    @if(in_array($compensationModel, ['per_player', 'hybrid']))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر اللاعب (ج.م)') }}</label>
                        <input type="number" wire:model="playerRate" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="0.00">
                    </div>
                    @endif

                    @if(in_array($compensationModel, ['revenue_share', 'hybrid']))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الإيرادات (%)') }}</label>
                        <input type="number" wire:model="revenueSharePercent" step="0.01" min="0" max="100" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="0.00">
                    </div>
                    @endif
                </div>
            </div>

            {{-- Bio & Limits --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('معلومات إضافية') }}</h2>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للحصص/يوم') }}</label>
                        <input type="number" wire:model="maxDailySessions" min="1" max="20" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="4">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للساعات/أسبوع') }}</label>
                        <input type="number" wire:model="maxWeeklyHours" step="0.5" min="1" max="168" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="40">
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السيرة الذاتية (عربي)') }}</label>
                    <textarea wire:model="bioAr" rows="3" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="{{ __('نبذة عن المدرب...') }}"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السيرة الذاتية (إنجليزي)') }}</label>
                    <textarea wire:model="bio" rows="2" dir="ltr" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="Bio in English..."></textarea>
                </div>
            </div>

            {{-- Qualifications --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('المؤهلات والشهادات') }}</h2>

                @if(count($qualifications) > 0)
                    <div class="space-y-2 mb-4">
                        @foreach($qualifications as $idx => $qual)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <p class="font-medium text-gray-900 text-sm">{{ $qual['name'] }}</p>
                                    <p class="text-xs text-gray-500">
                                        {{ $qual['issuer'] ?? '' }}
                                        @if($qual['expiry_date']) — {{ __('تنتهي') }}: {{ $qual['expiry_date'] }} @endif
                                    </p>
                                </div>
                                <button type="button" wire:click="removeQualification({{ $idx }})"
                                        class="text-red-500 hover:text-red-700 text-xs">{{ __('حذف') }}</button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="border border-gray-200 rounded-lg p-3">
                    <p class="text-sm font-medium text-gray-600 mb-2">{{ __('إضافة شهادة') }}</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <input type="text" wire:model="newQualName" placeholder="{{ __('اسم الشهادة *') }}"
                               class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        <input type="text" wire:model="newQualIssuer" placeholder="{{ __('الجهة المانحة') }}"
                               class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        <input type="date" wire:model="newQualIssueDate" dir="ltr"
                               class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        <input type="date" wire:model="newQualExpiryDate" dir="ltr"
                               class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                    </div>
                    <button type="button" wire:click="addQualification"
                            class="mt-3 px-4 py-2 text-sm font-medium text-blue-600 border border-blue-300 rounded-lg hover:bg-blue-50">
                        {{ __('+ إضافة') }}
                    </button>
                </div>
            </div>

            {{-- Submit --}}
            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('trainers.list') }}" wire:navigate class="px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100">{{ __('إلغاء') }}</a>
                <button type="submit" wire:loading.attr="disabled" wire:target="save"
                        class="px-6 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
                    <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التغييرات') : __('إضافة المدرب') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>
