<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إضافة مدرب جديد') }}</h1>
    </div>

    {{-- Step Indicator --}}
    <div class="flex items-center justify-center gap-1 sm:gap-2 mb-8 overflow-x-auto pb-2">
        @foreach($stepLabels as $num => $label)
            <button wire:click="goToStep({{ $num }})"
                    class="flex items-center gap-1 sm:gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }} shrink-0">
                <span class="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-xs sm:text-sm font-bold
                    {{ $num < $currentStep ? 'bg-green-500 text-white' : ($num === $currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($num < $currentStep)
                        <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    @else
                        {{ $num }}
                    @endif
                </span>
                <span class="hidden lg:inline text-xs sm:text-sm {{ $num === $currentStep ? 'text-blue-700 font-medium' : 'text-gray-500' }}">{{ $label }}</span>
            </button>
            @if(!$loop->last)
                <div class="w-4 sm:w-6 h-0.5 {{ $num < $currentStep ? 'bg-green-400' : 'bg-gray-200' }} shrink-0"></div>
            @endif
        @endforeach
    </div>

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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">

        {{-- Step 1: Person --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات الشخص') }}</h2>

            @if(!$createNewPerson && !$personId)
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث عن شخص موجود') }}</label>
                    <input type="text" wire:model.live.debounce.300ms="personSearch"
                           placeholder="{{ __('ابحث بالاسم أو رقم الهاتف أو الرقم القومي...') }}"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                </div>

                @if($this->personResults->isNotEmpty())
                    <div class="border border-gray-200 rounded-lg divide-y divide-gray-100 mb-4 max-h-48 overflow-y-auto">
                        @foreach($this->personResults as $person)
                            <button wire:click="selectPerson({{ $person->id }})"
                                    class="w-full text-start px-4 py-3 hover:bg-blue-50 transition-colors">
                                <div class="font-medium text-gray-800">{{ $person->name_ar ?? $person->name }}</div>
                                <div class="text-xs text-gray-500">{{ $person->phone }} @if($person->national_id) - {{ $person->national_id }} @endif</div>
                            </button>
                        @endforeach
                    </div>
                @endif

                <button wire:click="toggleCreateNew" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                    {{ __('+ إنشاء شخص جديد') }}
                </button>
            @endif

            @if($personId && !$createNewPerson)
                <div class="p-4 bg-green-50 border border-green-200 rounded-lg mb-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="font-medium text-green-800">{{ $personNameAr }}</p>
                            <p class="text-sm text-green-600">{{ $personPhone }}</p>
                            @if($personEmail)
                                <p class="text-sm text-green-600" dir="ltr">{{ $personEmail }}</p>
                            @endif
                        </div>
                        <button wire:click="$set('personId', null)" class="text-sm text-red-600 hover:text-red-800">{{ __('تغيير') }}</button>
                    </div>
                </div>
            @endif

            @if($createNewPerson)
                <div class="space-y-4 border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-sm font-medium text-gray-700">{{ __('بيانات الشخص الجديد') }}</h3>
                        <button wire:click="toggleCreateNew" class="text-sm text-red-600 hover:text-red-800">{{ __('إلغاء') }}</button>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربي') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="personNameAr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            @error('personNameAr') <p class="mt-1 text-xs 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="personName" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                            <input type="email" wire:model="personEmail" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="personPhone" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            @error('personPhone') <p class="mt-1 text-xs 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="personNationalId" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                            <input type="date" wire:model="personDateOfBirth" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                            <select wire:model="personGender" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                <option value="">{{ __('اختر...') }}</option>
                                <option value="male">{{ __('ذكر') }}</option>
                                <option value="female">{{ __('أنثى') }}</option>
                            </select>
                            @error('personGender') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>
            @endif

            @error('personId') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 2: Employment --}}
        @if($currentStep === 2)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات التوظيف') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القسم') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="department" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('department') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المسمى الوظيفي') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="position" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('position') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التوظيف') }} <span class="text-red-500">*</span></label>
                    <select wire:model="employmentType" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر...') }}</option>
                        @foreach($employmentTypes as $type)
                            <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </select>
                    @error('employmentType') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البدء') }} <span class="text-red-500">*</span></label>
                    <input type="date" wire:model="startDate" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('startDate') <p class="mt-1 text-xs 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">{{ __('الفرع') }} <span class="text-red-500">*</span></label>
                    <select wire:model="branchId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر الفرع...') }}</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('branchId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        @endif

        {{-- Step 3: Activities & Sports --}}
        @if($currentStep === 3)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الأنشطة والرياضات') }}</h2>
            <p class="text-sm text-gray-600 mb-4">{{ __('اختر الأنشطة التي يتخصص فيها المدرب وحدد التخصص الأساسي') }}</p>

            @if($activities->isEmpty())
                <div class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                    </svg>
                    <p>{{ __('لا توجد أنشطة مُفعّلة. يرجى إضافة أنشطة أولاً.') }}</p>
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($activities as $activity)
                        @php $isSelected = in_array($activity->id, $selectedActivities); @endphp
                        <div wire:click="toggleActivity({{ $activity->id }})"
                             class="relative p-4 border-2 rounded-xl cursor-pointer transition-all
                                {{ $isSelected ? 'border-blue-500 bg-blue-50 shadow-sm' : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50' }}">
                            <div class="flex items-center gap-3">
                                @if($activity->icon)
                                    <span class="text-2xl">{{ $activity->icon }}</span>
                                @else
                                    <span class="flex items-center justify-center w-10 h-10 rounded-lg text-white text-sm font-bold"
                                          style="background-color: {{ $activity->color ?? '#6B7280' }}">
                                        {{ mb_substr($activity->name_ar, 0, 1) }}
                                    </span>
                                @endif
                                <div class="flex-1">
                                    <p class="font-medium text-gray-800 text-sm">{{ $activity->name_ar }}</p>
                                    @if($activity->name)
                                        <p class="text-xs text-gray-500" dir="ltr">{{ $activity->name }}</p>
                                    @endif
                                </div>
                                @if($isSelected)
                                    <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                @endif
                            </div>

                            {{-- Primary indicator --}}
                            @if($isSelected && $primaryActivityId === $activity->id)
                                <span class="absolute top-1 start-1 px-2 py-0.5 bg-blue-600 text-white text-[10px] font-bold rounded-full">
                                    {{ __('أساسي') }}
                                </span>
                            @endif
                        </div>
                    @endforeach
                </div>

                {{-- Primary selection --}}
                @if(count($selectedActivities) > 1)
                    <div class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('التخصص الأساسي') }} <span class="text-red-500">*</span></label>
                        <select wire:model="primaryActivityId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            @foreach($activities->whereIn('id', $selectedActivities) as $activity)
                                <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            @endif

            @error('selectedActivities') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
            @error('primaryActivityId') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 4: User Account --}}
        @if($currentStep === 4)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('حساب الدخول') }}</h2>
            <p class="text-sm text-gray-600 mb-4">{{ __('إنشاء حساب دخول يتيح للمدرب تسجيل الحضور وعرض جدول التدريبات والتعيين للمجموعات') }}</p>

            <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4">
                <div class="flex items-start gap-2">
                    <svg class="w-5 h-5 text-amber-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    <p class="text-sm text-amber-800">{{ __('بدون حساب دخول، لن يتمكن المدرب من تسجيل الدخول للنظام أو التعيين كمدرب رئيسي لمجموعة.') }}</p>
                </div>
            </div>

            <label class="flex items-center gap-3 p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors mb-4">
                <input type="checkbox" wire:model.live="createUserAccount"
                       class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                <div>
                    <span class="font-medium text-gray-800">{{ __('إنشاء حساب دخول للمدرب') }}</span>
                    <p class="text-xs text-gray-500 mt-0.5">{{ __('سيتمكن المدرب من تسجيل الدخول وإدارة المجموعات المُعيّن لها') }}</p>
                </div>
            </label>

            @if($createUserAccount)
                <div class="space-y-4 border border-gray-200 rounded-lg p-4" x-data>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }} <span class="text-red-500">*</span></label>
                        <input type="email" wire:model="userEmail" dir="ltr"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                               placeholder="trainer@example.com">
                        @error('userEmail') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="flex items-center gap-2 mb-2">
                            <input type="checkbox" wire:model.live="autoGeneratePassword"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('توليد كلمة مرور تلقائياً') }}</span>
                        </label>

                        <div class="relative">
                            <input type="{{ $autoGeneratePassword ? 'text' : 'password' }}"
                                   wire:model="userPassword" dir="ltr"
                                   {{ $autoGeneratePassword ? 'readonly' : '' }}
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm font-mono {{ $autoGeneratePassword ? 'bg-gray-50' : '' }}"
                                   placeholder="{{ __('كلمة المرور') }}">
                        </div>
                        @error('userPassword') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <label class="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-lg cursor-pointer">
                        <input type="checkbox" wire:model="sendCredentials"
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <div>
                            <span class="text-sm font-medium text-blue-800">{{ __('إرسال بيانات الدخول بالبريد الإلكتروني') }}</span>
                            <p class="text-xs text-blue-600 mt-0.5">{{ __('سيتم إرسال رسالة تحتوي على البريد وكلمة المرور') }}</p>
                        </div>
                    </label>
                </div>
            @endif
        @endif

        {{-- Step 5: Compensation --}}
        @if($currentStep === 5)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('التعويض') }}</h2>
            <div class="space-y-4">
                <div>
                    <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-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر...') }}</option>
                        @foreach($compensationModels as $model)
                            <option value="{{ $model->value }}">{{ $model->label() }}</option>
                        @endforeach
                    </select>
                    @error('compensationModel') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                @if($compensationModel === 'salary')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('الراتب الشهري') }} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="monthlySalary" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12 @error('monthlySalary') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-xs text-gray-400">{{ __('ج.م') }}</span>
                    </div>
                    @error('monthlySalary') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if(in_array($compensationModel, ['hourly', 'hybrid']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('سعر الساعة') }}
                        @if($compensationModel === 'hourly') <span class="text-red-500">*</span> @endif
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="hourlyRate" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12 @error('hourlyRate') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('hourlyRate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if(in_array($compensationModel, ['per_session', 'hybrid', 'contract']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('سعر الحصة') }}
                        @if(in_array($compensationModel, ['per_session', 'hybrid', 'contract'])) <span class="text-red-500">*</span> @endif
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="sessionRate" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12 @error('sessionRate') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('sessionRate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if(in_array($compensationModel, ['per_group', 'hybrid']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('سعر المجموعة') }}
                        @if($compensationModel === 'per_group') <span class="text-red-500">*</span> @endif
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="groupRate" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12 @error('groupRate') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('groupRate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if(in_array($compensationModel, ['per_player', 'hybrid']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('سعر اللاعب') }}
                        @if($compensationModel === 'per_player') <span class="text-red-500">*</span> @endif
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="playerRate" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12 @error('playerRate') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('playerRate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if(in_array($compensationModel, ['revenue_share', 'hybrid']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('نسبة الإيرادات') }}
                        @if($compensationModel === 'revenue_share') <span class="text-red-500">*</span> @endif
                    </label>
                    <div class="relative">
                        <input type="number" wire:model="revenueSharePercent" dir="ltr" step="0.1" min="0" max="100"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-8 @error('revenueSharePercent') border-red-500 @enderror">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">%</span>
                    </div>
                    @error('revenueSharePercent') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
        @endif

        {{-- Step 6: Availability --}}
        @if($currentStep === 6)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('أوقات التوفر') }}</h2>
            <p class="text-sm text-gray-600 mb-4">{{ __('حدد الأيام والأوقات التي يكون فيها المدرب متاحاً للتدريب') }}</p>
            <div class="space-y-3">
                @foreach($availabilities as $index => $day)
                    <div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg {{ $day['enabled'] ? 'bg-blue-50 border-blue-200' : '' }}">
                        <label class="flex items-center gap-2 min-w-[100px]">
                            <input type="checkbox" wire:model="availabilities.{{ $index }}.enabled"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm font-medium text-gray-700">{{ $day['day_name'] }}</span>
                        </label>
                        @if($day['enabled'])
                            <input type="time" wire:model="availabilities.{{ $index }}.start_time" dir="ltr"
                                   class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <span class="text-sm text-gray-500">{{ __('إلى') }}</span>
                            <input type="time" wire:model="availabilities.{{ $index }}.end_time" dir="ltr"
                                   class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <select wire:model="availabilities.{{ $index }}.type"
                                    class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                @foreach($availabilityTypes as $type)
                                    <option value="{{ $type->value }}">{{ $type->label() }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Step 7: Qualifications --}}
        @if($currentStep === 7)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('المؤهلات والشهادات') }}</h2>
            <div class="space-y-4">
                @foreach($qualifications as $index => $qual)
                    <div class="p-4 border border-gray-200 rounded-lg">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-medium text-gray-700">{{ __('شهادة') }} {{ $index + 1 }}</span>
                            @if(count($qualifications) > 1)
                                <button wire:click="removeQualification({{ $index }})" class="text-sm text-red-600 hover:text-red-800">{{ __('حذف') }}</button>
                            @endif
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم الشهادة') }}</label>
                                <input type="text" wire:model="qualifications.{{ $index }}.name"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('جهة الإصدار') }}</label>
                                <input type="text" wire:model="qualifications.{{ $index }}.issuer"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('تاريخ الإصدار') }}</label>
                                <input type="date" wire:model="qualifications.{{ $index }}.issue_date" dir="ltr"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('تاريخ الانتهاء') }}</label>
                                <input type="date" wire:model="qualifications.{{ $index }}.expiry_date" dir="ltr"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                    </div>
                @endforeach

                <button wire:click="addQualification" class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-600 transition-colors">
                    {{ __('+ إضافة شهادة أخرى') }}
                </button>
            </div>
        @endif

        {{-- Step 8: Initial Assignment --}}
        @if($currentStep === 8)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('التعيين المبدئي') }}</h2>
            <p class="text-sm text-gray-600 mb-4">{{ __('يمكنك تعيين المدرب لمجموعة تدريبية حالية (اختياري)') }}</p>

            @if(!$createUserAccount)
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4">
                    <div class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-amber-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                        <p class="text-sm text-amber-800">{{ __('لم يتم إنشاء حساب دخول للمدرب. التعيين للمجموعات يتطلب حساب مستخدم. يمكنك تخطي هذه الخطوة وتعيينه لاحقاً بعد إنشاء الحساب.') }}</p>
                    </div>
                </div>
            @else
                <label class="flex items-center gap-3 p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors mb-4">
                    <input type="checkbox" wire:model.live="assignToGroup"
                           class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <div>
                        <span class="font-medium text-gray-800">{{ __('تعيين المدرب لمجموعة حالية') }}</span>
                        <p class="text-xs text-gray-500 mt-0.5">{{ __('سيتم إنشاء تعيين نشط للمدرب في المجموعة المختارة') }}</p>
                    </div>
                </label>

                @if($assignToGroup)
                    <div class="space-y-4 border border-gray-200 rounded-lg p-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة') }} <span class="text-red-500">*</span></label>
                            @if($this->availableGroups->isEmpty())
                                <div class="p-3 bg-gray-50 rounded-lg text-sm text-gray-500 text-center">
                                    {{ __('لا توجد مجموعات متاحة للأنشطة المختارة') }}
                                </div>
                            @else
                                <select wire:model="assignToGroupId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                    <option value="">{{ __('اختر المجموعة...') }}</option>
                                    @foreach($this->availableGroups as $group)
                                        <option value="{{ $group->id }}">
                                            {{ $group->name_ar }}
                                            ({{ $group->program?->name_ar }})
                                            — {{ $group->current_count }}/{{ $group->max_capacity }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                            @error('assignToGroupId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نطاق التعيين') }} <span class="text-red-500">*</span></label>
                            <select wire:model="assignmentScope" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                @foreach($assignmentScopes as $scope)
                                    <option value="{{ $scope->value }}">{{ $scope->label() }}</option>
                                @endforeach
                            </select>
                            @error('assignmentScope') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                @endif
            @endif
        @endif

        {{-- Step 9: Review --}}
        @if($currentStep === 9 && !$completed)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('مراجعة وتأكيد') }}</h2>

            {{-- Personal Info Card --}}
            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/></svg>
                    {{ __('البيانات الشخصية') }}
                </h3>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('الاسم') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ $personNameAr }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('الهاتف') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $personPhone }}</dd>
                    </div>
                    @if($personGender)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('الجنس') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ $personGender === 'male' ? __('ذكر') : __('أنثى') }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            {{-- Employment Card --}}
            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm-2 5a1 1 0 100 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>
                    {{ __('التوظيف') }}
                </h3>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('المسمى الوظيفي') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ $position }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('نوع التوظيف') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ \App\Domain\HR\Enums\EmploymentType::from($employmentType)->label() }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('تاريخ البدء') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $startDate }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('القسم') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ $department }}</dd>
                    </div>
                </dl>
            </div>

            {{-- Activities Card --}}
            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/></svg>
                    {{ __('الأنشطة والرياضات') }}
                </h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($activities->whereIn('id', $selectedActivities) as $activity)
                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm
                            {{ $activity->id === $primaryActivityId ? 'bg-blue-100 text-blue-800 font-medium' : 'bg-gray-200 text-gray-700' }}">
                            @if($activity->icon) {{ $activity->icon }} @endif
                            {{ $activity->name_ar }}
                            @if($activity->id === $primaryActivityId)
                                <span class="text-[10px] bg-blue-600 text-white px-1.5 py-0.5 rounded-full">{{ __('أساسي') }}</span>
                            @endif
                        </span>
                    @endforeach
                </div>
            </div>

            {{-- User Account Card --}}
            <div class="mb-4 p-4 rounded-lg border {{ $createUserAccount ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"/></svg>
                    {{ __('حساب الدخول') }}
                </h3>
                @if($createUserAccount)
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <div>
                            <dt class="text-xs text-gray-500">{{ __('البريد الإلكتروني') }}</dt>
                            <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $userEmail }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-500">{{ __('إرسال البيانات') }}</dt>
                            <dd class="text-sm font-medium text-gray-800">{{ $sendCredentials ? __('نعم') : __('لا') }}</dd>
                        </div>
                    </dl>
                @else
                    <p class="text-sm text-gray-500">{{ __('لن يتم إنشاء حساب دخول') }}</p>
                @endif
            </div>

            {{-- Compensation Card --}}
            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/><path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"/></svg>
                    {{ __('التعويض') }}
                </h3>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('نموذج التعويض') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">{{ \App\Domain\HR\Enums\CompensationModel::from($compensationModel)->label() }}</dd>
                    </div>
                    @if($hourlyRate)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('سعر الساعة') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$hourlyRate, 2) }} {{ __('ج.م') }}</dd>
                    </div>
                    @endif
                    @if($sessionRate)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('سعر الحصة') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$sessionRate, 2) }} {{ __('ج.م') }}</dd>
                    </div>
                    @endif
                    @if($groupRate)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('سعر المجموعة') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$groupRate, 2) }} {{ __('ج.م') }}</dd>
                    </div>
                    @endif
                    @if($playerRate)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('سعر اللاعب') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$playerRate, 2) }} {{ __('ج.م') }}</dd>
                    </div>
                    @endif
                    @if($revenueSharePercent)
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('نسبة الإيرادات') }}</dt>
                        <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $revenueSharePercent }}%</dd>
                    </div>
                    @endif
                </dl>
            </div>

            {{-- Availability & Qualifications Summary --}}
            <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>
                    {{ __('التوفر والمؤهلات') }}
                </h3>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('أيام التوفر') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">
                            {{ collect($availabilities)->filter(fn($a) => $a['enabled'])->pluck('day_name')->join('، ') ?: __('لم يتم التحديد') }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500">{{ __('المؤهلات') }}</dt>
                        <dd class="text-sm font-medium text-gray-800">
                            {{ collect($qualifications)->filter(fn($q) => !empty($q['name']))->count() }} {{ __('شهادة') }}
                        </dd>
                    </div>
                </dl>
            </div>

            {{-- Assignment Card --}}
            @if($createUserAccount && $assignToGroup && $assignToGroupId)
                <div class="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <h3 class="text-sm font-bold text-gray-700 mb-2 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/></svg>
                        {{ __('التعيين المبدئي') }}
                    </h3>
                    @php $selectedGroup = $this->availableGroups->firstWhere('id', $assignToGroupId); @endphp
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <div>
                            <dt class="text-xs text-gray-500">{{ __('المجموعة') }}</dt>
                            <dd class="text-sm font-medium text-gray-800">{{ $selectedGroup?->name_ar ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-500">{{ __('نطاق التعيين') }}</dt>
                            <dd class="text-sm font-medium text-gray-800">{{ \App\Domain\Scheduling\Enums\AssignmentScope::from($assignmentScope)->label() }}</dd>
                        </div>
                    </dl>
                </div>
            @endif
        @endif

        {{-- Success State --}}
        @if($completed)
            <div class="text-center py-8">
                <div class="mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ __('تم إضافة المدرب بنجاح') }}</h3>
                <p class="text-sm text-gray-600 mb-6">
                    @if($createUserAccount)
                        {{ __('تم إنشاء حساب الدخول بنجاح. يمكن للمدرب تسجيل الدخول الآن.') }}
                    @else
                        {{ __('يمكنك إنشاء حساب دخول للمدرب لاحقاً من صفحة التعديل.') }}
                    @endif
                </p>
                <div class="flex items-center justify-center gap-3">
                    <a href="{{ route('trainers.list') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        {{ __('قائمة المدربين') }}
                    </a>
                    <button wire:click="$refresh" onclick="window.location.reload()" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        {{ __('إضافة مدرب آخر') }}
                    </button>
                </div>
            </div>
        @endif
    </div>

    {{-- Navigation Buttons --}}
    @if(!$completed)
        <div class="flex items-center justify-between mt-6">
            <div>
                @if($currentStep > 1)
                    <button wire:click="previousStep" class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        {{ __('السابق') }}
                    </button>
                @endif
            </div>
            <div>
                @if($currentStep < $totalSteps)
                    <button wire:click="nextStep" wire:loading.attr="disabled" wire:target="nextStep"
                            class="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors disabled:opacity-50">
                        <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                        <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                    </button>
                @elseif($currentStep === $totalSteps)
                    <button wire:click="confirm" wire:loading.attr="disabled" wire:target="confirm"
                            class="px-5 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors disabled:opacity-50">
                        <span wire:loading.remove wire:target="confirm">{{ __('تأكيد وإنشاء المدرب') }}</span>
                        <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
                    </button>
                @endif
            </div>
        </div>
    @endif
</div>
