<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 flex-shrink-0 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                <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 flex-shrink-0 {{ $num < $currentStep ? 'bg-green-400' : 'bg-gray-200' }}"></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: Basic Info
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('المعلومات الأساسية') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('أدخل بيانات البرنامج التدريبي الأساسية') }}</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <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>
                    <input type="text" wire:model="nameAr" 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('nameAr') <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">{{ __('اسم البرنامج بالإنجليزي') }}</label>
                    <input type="text" wire:model="name" 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="activityId" 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($activities as $activity)
                            <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('activityId') <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.live="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>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label>
                    <select wire:model="skillLevel" 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="beginner">{{ __('مبتدئ') }}</option>
                        <option value="intermediate">{{ __('متوسط') }}</option>
                        <option value="advanced">{{ __('متقدم') }}</option>
                        <option value="professional">{{ __('محترف') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
                    <select wire:model="gender" 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>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للعمر') }}</label>
                    <input type="number" wire:model="ageMin" dir="ltr" min="2" max="99"
                           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('ageMin') <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="number" wire:model="ageMax" dir="ltr" min="2" max="99"
                           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('ageMax') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Duration & Capacity --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة البرنامج (أسابيع)') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="programDurationWeeks" dir="ltr" min="1" max="104"
                           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('programDurationWeeks') <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="number" wire:model="sessionDurationMinutes" dir="ltr" min="15" max="300" step="5"
                           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('sessionDurationMinutes') <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="number" wire:model="minParticipants" dir="ltr" min="1"
                           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('minParticipants') <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="number" wire:model="maxParticipants" dir="ltr" min="1"
                           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('maxParticipants') <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">{{ __('الوصف') }}</label>
                    <textarea wire:model="descriptionAr" rows="3"
                              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"></textarea>
                </div>
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 2: Head Trainer
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 2)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('المدرب الرئيسي') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('من هو المدرب الرئيسي لهذا البرنامج؟') }}</p>

            <div class="max-w-lg">
                @if(!$skipTrainer)
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اختر المدرب') }} <span class="text-red-500">*</span></label>
                    <select wire:model="headTrainerId" 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($trainers as $trainer)
                            <option value="{{ $trainer->id }}">{{ $trainer->name_ar ?: $trainer->name }}</option>
                        @endforeach
                    </select>
                    @error('headTrainerId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror

                    @if($headTrainerId)
                        <div class="mt-3 p-3 bg-blue-50 border border-blue-100 rounded-lg">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-blue-700" 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>
                                </div>
                                <span class="text-sm font-medium text-blue-800">{{ $trainers->firstWhere('id', $headTrainerId)?->name_ar ?: $trainers->firstWhere('id', $headTrainerId)?->name }}</span>
                            </div>
                        </div>
                    @endif
                @else
                    <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                        <p class="text-sm text-amber-800">{{ __('سيتم تخطي تعيين المدرب الرئيسي. يمكنك تعيينه لاحقاً من إعدادات المجموعة.') }}</p>
                    </div>
                @endif

                <div class="mt-4">
                    <button wire:click="toggleSkipTrainer" type="button"
                            class="text-sm text-gray-600 hover:text-gray-800 underline underline-offset-2 transition-colors">
                        {{ $skipTrainer ? __('تعيين مدرب الآن') : __('تخطي - سأعين المدرب لاحقاً') }}
                    </button>
                </div>
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 3: Schedule Template
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 3)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('جدول التدريب') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('حدد أيام ومواعيد التدريب الأسبوعية') }}</p>

            <div class="space-y-3">
                @foreach($scheduleRows as $index => $row)
                    <div class="flex flex-wrap items-end gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg" wire:key="schedule-{{ $index }}">
                        <div class="flex-1 min-w-[140px]">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اليوم') }}</label>
                            <select wire:model="scheduleRows.{{ $index }}.day_of_week"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                <option value="0">{{ __('الأحد') }}</option>
                                <option value="1">{{ __('الاثنين') }}</option>
                                <option value="2">{{ __('الثلاثاء') }}</option>
                                <option value="3">{{ __('الأربعاء') }}</option>
                                <option value="4">{{ __('الخميس') }}</option>
                                <option value="5">{{ __('الجمعة') }}</option>
                                <option value="6">{{ __('السبت') }}</option>
                            </select>
                        </div>
                        <div class="w-32">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('من') }}</label>
                            <input type="time" wire:model="scheduleRows.{{ $index }}.start_time" dir="ltr"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div class="w-32">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('إلى') }}</label>
                            <input type="time" wire:model="scheduleRows.{{ $index }}.end_time" dir="ltr"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        </div>
                        <div>
                            @if(count($scheduleRows) > 1)
                                <button wire:click="removeScheduleRow({{ $index }})" type="button"
                                        class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

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

            <button wire:click="addScheduleRow" type="button"
                    class="mt-4 flex items-center gap-2 px-4 py-2 text-sm text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                {{ __('إضافة يوم تدريب') }}
            </button>

            <div class="mt-4 p-3 bg-gray-100 rounded-lg">
                <p class="text-xs text-gray-600">
                    {{ __('عدد الحصص في الأسبوع:') }} <span class="font-bold">{{ count($scheduleRows) }}</span>
                    {{ __('حصة') }}
                </p>
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 4: Initial Group
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 4)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('المجموعة التدريبية الأولى') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('إنشاء مجموعة تدريب أولى للبرنامج') }}</p>

            <div class="mb-5">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" wire:model.live="createInitialGroup" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700">{{ __('إنشاء مجموعة تدريب أولى') }}</span>
                </label>
            </div>

            @if($createInitialGroup)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 bg-blue-50/50 border border-blue-100 rounded-lg">
                    <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>
                        <input type="text" wire:model="groupName"
                               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 bg-white">
                        @error('groupName') <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="groupCode" dir="ltr" maxlength="10"
                               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 bg-white font-mono uppercase">
                        @error('groupCode') <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="number" wire:model="groupCapacity" dir="ltr" min="1"
                               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 bg-white">
                        @error('groupCapacity') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    @if($headTrainerId)
                        <div class="sm:col-span-2">
                            <div class="flex items-center gap-2 p-2 bg-green-50 border border-green-100 rounded-lg">
                                <svg class="w-4 h-4 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>
                                <span class="text-xs text-green-800">{{ __('المدرب الرئيسي سيتم تعيينه تلقائياً من الخطوة السابقة') }}</span>
                            </div>
                        </div>
                    @endif
                </div>
            @else
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <p class="text-sm text-gray-600">{{ __('لن يتم إنشاء مجموعة. يمكنك إنشاء مجموعات لاحقاً من شاشة المجموعات.') }}</p>
                </div>
            @endif
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 5: Pricing
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 5)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('التسعير') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('حدد السعر الأساسي للاشتراك في البرنامج') }}</p>

            <div class="max-w-md">
                <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="basePrice" 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">
                    <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                </div>
                @error('basePrice') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror

                <div class="mt-4 p-3 bg-amber-50 border border-amber-100 rounded-lg">
                    <p class="text-xs text-amber-800 font-medium mb-1">{{ __('هذا هو السعر الأساسي قبل أي خصومات') }}</p>
                    <p class="text-xs text-amber-700">{{ __('قواعد التسعير والخصومات يتم إعدادها بشكل منفصل من شاشة محرك التسعير') }}</p>
                </div>

                @if($basePrice && is_numeric($basePrice) && $basePrice > 0)
                    <div class="mt-3 p-3 bg-green-50 border border-green-100 rounded-lg">
                        <p class="text-xs text-green-800">
                            {{ __('سيتم حفظ السعر:') }}
                            <span class="font-bold" dir="ltr">{{ number_format((float)$basePrice, 2) }} {{ __('ج.م') }}</span>
                            <span class="text-green-600">({{ number_format((float)$basePrice * 100, 0) }} {{ __('قرش') }})</span>
                        </p>
                    </div>
                @endif
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 6: Facility
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 6)
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('المنشأة الرياضية') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('هل تريد تحديد المنشأة الرياضية لهذا البرنامج؟') }}</p>

            <div class="mb-5">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" wire:model.live="assignFacility" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700">{{ __('تحديد منشأة للتدريب') }}</span>
                </label>
            </div>

            @if($assignFacility)
                <div class="max-w-lg">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنشأة') }} <span class="text-red-500">*</span></label>
                    <select wire:model="facilityId" 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($facilities as $facility)
                            <option value="{{ $facility->id }}">{{ $facility->name_ar }} ({{ $facility->type?->value }})</option>
                        @endforeach
                    </select>
                    @error('facilityId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror

                    @if($facilities->isEmpty())
                        <p class="mt-2 text-xs text-amber-600">{{ __('لا توجد منشآت نشطة في الفرع المختار') }}</p>
                    @endif
                </div>
            @else
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <p class="text-sm text-gray-600">{{ __('يمكنك تحديد المنشأة لاحقاً عند تعديل الجدول التدريبي.') }}</p>
                </div>
            @endif
        @endif

        {{-- ═══════════════════════════════════════════════════════════════════
             Step 7: Review & Confirm
        ═══════════════════════════════════════════════════════════════════ --}}
        @if($currentStep === 7 && !$completed)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('مراجعة وتأكيد') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('راجع جميع البيانات قبل الإنشاء') }}</p>

            <div class="space-y-4">
                {{-- Program Info Card --}}
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/></svg>
                        {{ __('البرنامج التدريبي') }}
                    </h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الاسم:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $nameAr }}</dd>
                        </div>
                        @if($activityId)
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('النشاط:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $activities->firstWhere('id', $activityId)?->name_ar }}</dd>
                        </div>
                        @endif
                        @if($branchId)
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الفرع:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $branches->firstWhere('id', $branchId)?->name_ar }}</dd>
                        </div>
                        @endif
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('المدة:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $programDurationWeeks }} {{ __('أسبوع') }}</dd>
                        </div>
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('المشتركين:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $minParticipants }} - {{ $maxParticipants }}</dd>
                        </div>
                        @if($gender && $gender !== 'all')
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الجنس:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $gender === 'male' ? __('ذكور') : __('إناث') }}</dd>
                        </div>
                        @endif
                        @if($ageMin || $ageMax)
                        <div class="flex justify-between sm:justify-start sm:gap-2">
                            <dt class="text-xs text-gray-500">{{ __('العمر:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $ageMin ?: '?' }} - {{ $ageMax ?: '?' }} {{ __('سنة') }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Trainer Card --}}
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-green-600" 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>
                    @if($headTrainerId)
                        <p class="text-sm text-gray-800 font-medium">{{ $trainers->firstWhere('id', $headTrainerId)?->name_ar ?: $trainers->firstWhere('id', $headTrainerId)?->name }}</p>
                    @else
                        <p class="text-sm text-amber-600">{{ __('لم يتم تعيين مدرب - سيتم التعيين لاحقاً') }}</p>
                    @endif
                </div>

                {{-- Schedule Card --}}
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-purple-600" 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>
                        {{ __('جدول التدريب') }} ({{ count($scheduleRows) }} {{ __('حصة/أسبوع') }})
                    </h3>
                    @php
                        $dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
                    @endphp
                    <div class="space-y-1">
                        @foreach($scheduleRows as $row)
                            <div class="flex items-center gap-3 text-sm">
                                <span class="text-gray-700 font-medium w-20">{{ $dayNames[(int)$row['day_of_week']] ?? '' }}</span>
                                <span class="text-gray-600" dir="ltr">{{ $row['start_time'] }} - {{ $row['end_time'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Group Card --}}
                @if($createInitialGroup)
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-indigo-600" 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 0v1h8v-1zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-1a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 17v1h-3zM4.75 14.094A5.973 5.973 0 004 17v1H1v-1a3 3 0 013.75-2.906z"/></svg>
                        {{ __('المجموعة الأولى') }}
                    </h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
                        <div class="flex gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الاسم:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $groupName }}</dd>
                        </div>
                        <div class="flex gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الكود:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800 font-mono" dir="ltr">{{ $groupCode }}</dd>
                        </div>
                        <div class="flex gap-2">
                            <dt class="text-xs text-gray-500">{{ __('السعة:') }}</dt>
                            <dd class="text-xs font-medium text-gray-800">{{ $groupCapacity }} {{ __('مشترك') }}</dd>
                        </div>
                        <div class="flex gap-2">
                            <dt class="text-xs text-gray-500">{{ __('الحالة:') }}</dt>
                            <dd class="text-xs font-medium text-blue-700">{{ __('قيد التشكيل') }}</dd>
                        </div>
                    </dl>
                </div>
                @endif

                {{-- Pricing Card --}}
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/></svg>
                        {{ __('السعر الأساسي') }}
                    </h3>
                    <p class="text-lg font-bold text-gray-800" dir="ltr">{{ number_format((float)$basePrice, 2) }} {{ __('ج.م') }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ __('شهرياً - قبل الخصومات') }}</p>
                </div>

                {{-- Facility Card --}}
                @if($assignFacility && $facilityId)
                <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-orange-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"/></svg>
                        {{ __('المنشأة') }}
                    </h3>
                    <p class="text-sm text-gray-800 font-medium">{{ $facilities->firstWhere('id', $facilityId)?->name_ar }}</p>
                </div>
                @endif
            </div>

            {{-- Summary Banner --}}
            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <h4 class="text-sm font-semibold text-blue-800 mb-2">{{ __('سيتم إنشاء:') }}</h4>
                <ul class="space-y-1 text-xs text-blue-700">
                    <li class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-blue-500" 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>
                        {{ __('برنامج تدريبي جديد') }}
                    </li>
                    @if($createInitialGroup)
                    <li class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-blue-500" 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>
                        {{ __('مجموعة تدريبية أولى') }}
                    </li>
                    @endif
                    <li class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-blue-500" 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>
                        {{ count($scheduleRows) }} {{ __('جدول تدريب أسبوعي') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-blue-500" 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>
                        {{ __('سعر أساسي للاشتراك') }}
                    </li>
                </ul>
            </div>
        @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-2">{{ __('تم إنشاء البرنامج مع جميع الإعدادات المطلوبة:') }}</p>
                <ul class="text-sm text-gray-600 mb-6 space-y-1">
                    <li>{{ __('البرنامج + السعر الأساسي') }}</li>
                    @if($createInitialGroup)
                        <li>{{ __('المجموعة الأولى + الجدول التدريبي') }}</li>
                    @endif
                    @if($headTrainerId)
                        <li>{{ __('المدرب الرئيسي معين') }}</li>
                    @endif
                </ul>
                <div class="flex items-center justify-center gap-3">
                    <a href="{{ route('programs.index') }}" 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 class="flex items-center gap-2">
                <span class="text-xs text-gray-400">{{ $currentStep }}/{{ $totalSteps }}</span>
                @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-6 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>
