<div class="space-y-8">

    {{-- ─── Progress Bar ─────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            @foreach($this->getStepLabels() as $step => $label)
                <button
                    wire:click="goToStep({{ $step }})"
                    @class([
                        'flex flex-col items-center gap-1.5 group transition-all duration-200',
                        'cursor-pointer' => $step <= $currentStep,
                        'cursor-not-allowed opacity-50' => $step > $currentStep,
                    ])
                    @if($step > $currentStep) disabled @endif
                >
                    <div @class([
                        'w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300',
                        'bg-gradient-to-br from-blue-600 to-indigo-700 text-white shadow-md shadow-blue-200' => $step === $currentStep,
                        'bg-green-500 text-white' => $step < $currentStep,
                        'bg-gray-200 text-gray-500' => $step > $currentStep,
                    ])>
                        @if($step < $currentStep)
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $step }}
                        @endif
                    </div>
                    <span @class([
                        'text-xs font-medium hidden sm:block',
                        'text-blue-700' => $step === $currentStep,
                        'text-green-600' => $step < $currentStep,
                        'text-gray-400' => $step > $currentStep,
                    ])>{{ $label }}</span>
                </button>

                @if(!$loop->last)
                    <div @class([
                        'flex-1 h-0.5 mx-1 rounded-full transition-all duration-500',
                        'bg-green-400' => $step < $currentStep,
                        'bg-gray-200' => $step >= $currentStep,
                    ])></div>
                @endif
            @endforeach
        </div>

        <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
            <div class="bg-gradient-to-l from-blue-600 to-indigo-600 h-full rounded-full transition-all duration-500 ease-out"
                 style="width: {{ (($currentStep - 1) / ($totalSteps - 1)) * 100 }}%"></div>
        </div>
    </div>

    {{-- ─── Step Content ─────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

        {{-- ═══ Step 1: Branches ═══ --}}
        @if($currentStep === 1)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('الفروع') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أضف فروع الأكاديمية وحدد أيام العمل لكل فرع') }}</p>
            </div>

            @error('branches') <p class="text-red-500 text-sm mb-4">{{ $message }}</p> @enderror

            <div class="space-y-6">
                @foreach($branches as $index => $branch)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors">
                    @if(count($branches) > 1)
                    <button wire:click="removeBranch({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                    @endif

                    <div class="flex items-center gap-2 mb-4">
                        <span class="inline-flex items-center justify-center w-7 h-7 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">{{ $index + 1 }}</span>
                        <span class="text-sm font-medium text-gray-600">
                            {{ $branch['is_main'] ? __('الفرع الرئيسي') : __('فرع') . ' ' . ($index + 1) }}
                        </span>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم الفرع بالعربية') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="branches.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("branches.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                            <input type="text" wire:model="branches.{{ $index }}.name" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الهاتف') }}</label>
                            <input type="text" wire:model="branches.{{ $index }}.phone" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('البريد الإلكتروني') }}</label>
                            <input type="email" wire:model="branches.{{ $index }}.email" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("branches.{$index}.email") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المدينة') }}</label>
                            <input type="text" wire:model="branches.{{ $index }}.city" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم المدير') }}</label>
                            <input type="text" wire:model="branches.{{ $index }}.manager_name" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div class="sm:col-span-2 lg:col-span-3">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('العنوان') }}</label>
                            <input type="text" wire:model="branches.{{ $index }}.address" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                    </div>

                    {{-- Working Days --}}
                    <div class="mt-4" x-data="{ days: @js($branch['working_days'] ?? [0,1,2,3,4]) }" x-init="$watch('days', v => $wire.set('branches.{{ $index }}.working_days', v))">
                        <label class="block text-xs font-medium text-gray-600 mb-2">{{ __('أيام العمل') }} <span class="text-red-500">*</span></label>
                        <div class="flex flex-wrap gap-2">
                            @foreach($this->getDayNames() as $dayNum => $dayName)
                            <button type="button"
                                @click="days.includes({{ $dayNum }}) ? days = days.filter(d => d !== {{ $dayNum }}) : days = [...days, {{ $dayNum }}]"
                                :class="days.includes({{ $dayNum }}) ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:border-blue-300'"
                                class="px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors">
                                {{ $dayName }}
                            </button>
                            @endforeach
                        </div>
                        @error("branches.{$index}.working_days") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addBranch" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة فرع') }}
            </button>
        </div>
        @endif

        {{-- ═══ Step 2: Activities ═══ --}}
        @if($currentStep === 2)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('الأنشطة') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('حدد الأنشطة التي تقدمها أكاديميتك (كرة قدم، سباحة، كاراتيه...)') }}</p>
            </div>

            @error('activities') <p class="text-red-500 text-sm mb-4">{{ $message }}</p> @enderror

            <div class="space-y-4">
                @foreach($activities as $index => $activity)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors">
                    <button wire:click="removeActivity({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم النشاط بالعربية') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="activities.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('مثال: كرة قدم') }}">
                            @error("activities.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                            <input type="text" wire:model="activities.{{ $index }}.name" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Football">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('التصنيف') }} <span class="text-red-500">*</span></label>
                            <select wire:model="activities.{{ $index }}.category" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($this->getActivityCategories() as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error("activities.{$index}.category") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addActivity" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة نشاط') }}
            </button>
        </div>
        @endif

        {{-- ═══ Step 3: Programs ═══ --}}
        @if($currentStep === 3)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('البرامج التدريبية') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أنشئ البرامج مع تحديد الأسعار والأعمار المستهدفة') }}</p>
            </div>

            @error('programs') <p class="text-red-500 text-sm mb-4">{{ $message }}</p> @enderror

            <div class="space-y-6">
                @foreach($programs as $index => $program)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors">
                    <button wire:click="removeProgram({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم البرنامج') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="programs.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('مثال: الناشئين') }}">
                            @error("programs.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('النشاط') }} <span class="text-red-500">*</span></label>
                            <select wire:model="programs.{{ $index }}.activity_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($activities as $aIdx => $act)
                                    <option value="{{ $aIdx }}">{{ $act['name_ar'] ?: __('نشاط') . ' ' . ($aIdx + 1) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المدة (أشهر)') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="programs.{{ $index }}.duration_months" dir="ltr" min="1" max="24" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("programs.{$index}.duration_months") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الرسوم الشهرية (ج.م)') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="programs.{{ $index }}.monthly_fee" dir="ltr" min="1" step="0.01" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="500">
                            @error("programs.{$index}.monthly_fee") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الحد الأقصى للمشتركين') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="programs.{{ $index }}.max_participants" dir="ltr" min="1" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("programs.{$index}.max_participants") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('حصص/أسبوع') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="programs.{{ $index }}.sessions_per_week" dir="ltr" min="1" max="7" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("programs.{$index}.sessions_per_week") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('العمر الأدنى') }}</label>
                            <input type="number" wire:model="programs.{{ $index }}.min_age" dir="ltr" min="3" max="80" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="6">
                            @error("programs.{$index}.min_age") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('العمر الأقصى') }}</label>
                            <input type="number" wire:model="programs.{{ $index }}.max_age" dir="ltr" min="3" max="80" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="14">
                            @error("programs.{$index}.max_age") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('رسوم التسجيل (ج.م)') }}</label>
                            <input type="number" wire:model="programs.{{ $index }}.registration_fee" dir="ltr" min="0" step="0.01" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="0">
                            @error("programs.{$index}.registration_fee") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('دورة الدفع') }} <span class="text-red-500">*</span></label>
                            <select wire:model="programs.{{ $index }}.payment_frequency" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($this->getPaymentFrequencies() as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error("programs.{$index}.payment_frequency") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="mt-3">
                        <p class="text-xs text-amber-600">{{ __('رسوم التسجيل تُحصّل مرة واحدة عند التسجيل') }}</p>
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addProgram" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة برنامج') }}
            </button>
        </div>
        @endif

        {{-- ═══ Step 4: Facilities ═══ --}}
        @if($currentStep === 4)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('المنشآت والملاعب') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أضف المنشآت وحدد تقسيم المساحات (الشبكة)') }}</p>
            </div>

            @error('facilities') <p class="text-red-500 text-sm mb-4">{{ $message }}</p> @enderror

            <div class="space-y-6">
                @foreach($facilities as $index => $facility)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors">
                    <button wire:click="removeFacility({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم المنشأة') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="facilities.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('مثال: الملعب الرئيسي') }}">
                            @error("facilities.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('النوع') }} <span class="text-red-500">*</span></label>
                            <select wire:model="facilities.{{ $index }}.type" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($this->getFacilityTypes() as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error("facilities.{$index}.type") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الفرع') }} <span class="text-red-500">*</span></label>
                            <select wire:model="facilities.{{ $index }}.branch_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($branches as $bIdx => $br)
                                    <option value="{{ $bIdx }}">{{ $br['name_ar'] ?: __('فرع') . ' ' . ($bIdx + 1) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('السعة') }}</label>
                            <input type="number" wire:model="facilities.{{ $index }}.capacity" dir="ltr" min="1" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الإيجار الشهري (ج.م)') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="facilities.{{ $index }}.monthly_cost" dir="ltr" min="0" step="0.01" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('0 إذا كانت ملك') }}">
                            @error("facilities.{$index}.monthly_cost") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('ساعات العمل') }}</label>
                            <div class="flex gap-2 items-center">
                                <input type="time" wire:model="facilities.{{ $index }}.operating_start" dir="ltr" class="flex-1 rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                <span class="text-gray-400">-</span>
                                <input type="time" wire:model="facilities.{{ $index }}.operating_end" dir="ltr" class="flex-1 rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            </div>
                        </div>
                    </div>

                    {{-- Grid Builder --}}
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <label class="block text-xs font-medium text-gray-600 mb-2">{{ __('تقسيم المساحة (الشبكة)') }}</label>
                        <div class="flex items-center gap-4 mb-3">
                            <div class="flex items-center gap-2">
                                <label class="text-xs text-gray-500">{{ __('صفوف') }}</label>
                                <input type="number" wire:model.live="facilities.{{ $index }}.grid_rows" dir="ltr" min="1" max="10" class="w-16 rounded-lg border-gray-300 shadow-sm text-sm text-center focus:border-blue-500 focus:ring-blue-500">
                            </div>
                            <span class="text-gray-400">×</span>
                            <div class="flex items-center gap-2">
                                <label class="text-xs text-gray-500">{{ __('أعمدة') }}</label>
                                <input type="number" wire:model.live="facilities.{{ $index }}.grid_cols" dir="ltr" min="1" max="10" class="w-16 rounded-lg border-gray-300 shadow-sm text-sm text-center focus:border-blue-500 focus:ring-blue-500">
                            </div>
                            <span class="text-xs text-gray-400">= {{ ($facility['grid_rows'] ?? 3) * ($facility['grid_cols'] ?? 3) }} {{ __('قطعة') }}</span>
                        </div>
                        <div class="inline-grid gap-1 bg-gray-50 p-3 rounded-lg" style="grid-template-columns: repeat({{ $facility['grid_cols'] ?? 3 }}, 2.5rem)">
                            @for($r = 1; $r <= ($facility['grid_rows'] ?? 3); $r++)
                                @for($c = 1; $c <= ($facility['grid_cols'] ?? 3); $c++)
                                    <div class="w-10 h-8 bg-green-100 border border-green-300 rounded flex items-center justify-center text-xs text-green-700 font-mono">
                                        {{ $r }}.{{ $c }}
                                    </div>
                                @endfor
                            @endfor
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addFacility" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة منشأة') }}
            </button>
        </div>
        @endif

        {{-- ═══ Step 5: Groups + Schedule ═══ --}}
        @if($currentStep === 5)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('المجموعات والجدول') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أنشئ مجموعات التدريب وحدد مواعيدها ومساحاتها — هذه الخطوة اختيارية') }}</p>
            </div>

            <div class="space-y-6">
                @foreach($groups as $index => $group)
                <div class="relative border border-gray-200 rounded-xl p-5 group/card hover:border-blue-200 transition-colors">
                    <button wire:click="removeGroup({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover/card:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم المجموعة') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="groups.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('مثال: مجموعة أ') }}">
                            @error("groups.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('البرنامج') }} <span class="text-red-500">*</span></label>
                            <select wire:model="groups.{{ $index }}.program_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($programs as $pIdx => $prog)
                                    <option value="{{ $pIdx }}">{{ $prog['name_ar'] ?: __('برنامج') . ' ' . ($pIdx + 1) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المنشأة') }} <span class="text-red-500">*</span></label>
                            <select wire:model="groups.{{ $index }}.facility_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($facilities as $fIdx => $fac)
                                    <option value="{{ $fIdx }}">{{ $fac['name_ar'] ?: __('منشأة') . ' ' . ($fIdx + 1) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('السعة القصوى') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="groups.{{ $index }}.max_capacity" dir="ltr" min="1" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("groups.{$index}.max_capacity") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('رئيس المدربين') }}</label>
                            <input type="text" wire:model="groups.{{ $index }}.head_trainer_name" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('اسم المدرب') }}">
                        </div>
                    </div>

                    {{-- Schedule Slots --}}
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between mb-3">
                            <label class="text-xs font-medium text-gray-600">{{ __('مواعيد التدريب') }}</label>
                            <button type="button" wire:click="addGroupScheduleSlot({{ $index }})" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                {{ __('إضافة موعد') }}
                            </button>
                        </div>

                        @if(!empty($group['schedule_days']))
                        <div class="space-y-2">
                            @foreach($group['schedule_days'] as $slotIdx => $slot)
                            <div class="flex items-center gap-2 bg-gray-50 rounded-lg p-2">
                                <select wire:model="groups.{{ $index }}.schedule_days.{{ $slotIdx }}.day" class="rounded-lg border-gray-300 shadow-sm text-xs focus:border-blue-500 focus:ring-blue-500">
                                    @foreach($this->getDayNames() as $dayNum => $dayName)
                                        <option value="{{ $dayNum }}">{{ $dayName }}</option>
                                    @endforeach
                                </select>
                                <input type="time" wire:model="groups.{{ $index }}.schedule_days.{{ $slotIdx }}.start_time" dir="ltr" class="rounded-lg border-gray-300 shadow-sm text-xs focus:border-blue-500 focus:ring-blue-500">
                                <span class="text-gray-400 text-xs">→</span>
                                <input type="time" wire:model="groups.{{ $index }}.schedule_days.{{ $slotIdx }}.end_time" dir="ltr" class="rounded-lg border-gray-300 shadow-sm text-xs focus:border-blue-500 focus:ring-blue-500">
                                <button type="button" wire:click="removeGroupScheduleSlot({{ $index }}, {{ $slotIdx }})" class="text-red-400 hover:text-red-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <p class="text-xs text-gray-400 italic">{{ __('لم تتم إضافة مواعيد بعد') }}</p>
                        @endif
                    </div>

                    {{-- Segment Selection --}}
                    @if(isset($facilities[$group['facility_index'] ?? 0]))
                    @php $fac = $facilities[$group['facility_index'] ?? 0]; @endphp
                    <div class="mt-4 pt-4 border-t border-gray-100" x-data="{ selected: @js($group['assigned_segments'] ?? []) }" x-init="$watch('selected', v => $wire.set('groups.{{ $index }}.assigned_segments', v))">
                        <label class="block text-xs font-medium text-gray-600 mb-2">{{ __('المساحات المخصصة (اضغط للاختيار)') }}</label>
                        <div class="inline-grid gap-1" style="grid-template-columns: repeat({{ $fac['grid_cols'] ?? 3 }}, 2.5rem)">
                            @for($r = 1; $r <= ($fac['grid_rows'] ?? 3); $r++)
                                @for($c = 1; $c <= ($fac['grid_cols'] ?? 3); $c++)
                                    @php $segCode = "R{$r}C{$c}"; @endphp
                                    <button type="button"
                                        @click="selected.includes('{{ $segCode }}') ? selected = selected.filter(s => s !== '{{ $segCode }}') : selected = [...selected, '{{ $segCode }}']"
                                        :class="selected.includes('{{ $segCode }}') ? 'bg-blue-500 text-white border-blue-600' : 'bg-gray-100 text-gray-600 border-gray-300'"
                                        class="w-10 h-8 border rounded flex items-center justify-center text-xs font-mono cursor-pointer transition-colors">
                                        {{ $r }}.{{ $c }}
                                    </button>
                                @endfor
                            @endfor
                        </div>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>

            <button wire:click="addGroup" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة مجموعة') }}
            </button>
        </div>
        @endif

        {{-- ═══ Step 6: Participants ═══ --}}
        @if($currentStep === 6)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('المشتركين') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أضف المشتركين الأوائل — يمكنك إضافة المزيد لاحقاً. هذه الخطوة اختيارية.') }}</p>
            </div>

            <div class="space-y-6">
                @foreach($participants as $index => $participant)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors">
                    <button wire:click="removeParticipant({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="participants.{{ $index }}.name_ar" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("participants.{$index}.name_ar") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                            <input type="text" wire:model="participants.{{ $index }}.name" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الهاتف') }}</label>
                            <input type="text" wire:model="participants.{{ $index }}.phone" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('تاريخ الميلاد') }}</label>
                            <input type="date" wire:model="participants.{{ $index }}.date_of_birth" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                            <select wire:model="participants.{{ $index }}.gender" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                <option value="male">{{ __('ذكر') }}</option>
                                <option value="female">{{ __('أنثى') }}</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('النشاط') }}</label>
                            <select wire:model="participants.{{ $index }}.activity_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                <option value="">{{ __('غير محدد') }}</option>
                                @foreach($activities as $aIdx => $act)
                                    <option value="{{ $aIdx }}">{{ $act['name_ar'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم ولي الأمر') }}</label>
                            <input type="text" wire:model="participants.{{ $index }}.guardian_name" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('هاتف ولي الأمر') }}</label>
                            <input type="text" wire:model="participants.{{ $index }}.guardian_phone" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('التصنيف') }} <span class="text-red-500">*</span></label>
                            <select wire:model="participants.{{ $index }}.classification" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($this->getClassifications() as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error("participants.{$index}.classification") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Extra Details (collapsible) --}}
                    <div class="mt-4" x-data="{ open: false }">
                        <button type="button" @click="open = !open" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                            <svg class="w-3.5 h-3.5 transition-transform" :class="open && 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            {{ __('بيانات إضافية') }}
                        </button>
                        <div x-show="open" x-collapse class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الرقم القومي') }}</label>
                                <input type="text" wire:model="participants.{{ $index }}.national_id" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('مستوى المهارة') }}</label>
                                <select wire:model="participants.{{ $index }}.skill_level" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">{{ __('غير محدد') }}</option>
                                    @foreach($this->getSkillLevels() as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المجموعة') }}</label>
                                <select wire:model="participants.{{ $index }}.group_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">{{ __('بدون مجموعة') }}</option>
                                    @foreach($groups as $gIdx => $gr)
                                        <option value="{{ $gIdx }}">{{ $gr['name_ar'] ?: __('مجموعة') . ' ' . ($gIdx + 1) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="sm:col-span-3">
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('ملاحظات طبية') }}</label>
                                <textarea wire:model="participants.{{ $index }}.medical_notes" rows="2" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('حساسية، أمراض مزمنة، إصابات سابقة...') }}"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addParticipant" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة مشترك') }}
            </button>

            @if(empty($participants))
            <div class="mt-4 bg-amber-50 border border-amber-100 rounded-lg p-3">
                <p class="text-sm text-amber-700">{{ __('يمكنك تخطي هذه الخطوة وإضافة المشتركين لاحقاً من القائمة الرئيسية') }}</p>
            </div>
            @endif
        </div>
        @endif

        {{-- ═══ Step 7: Staff & Users ═══ --}}
        @if($currentStep === 7)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('الطاقم والمستخدمين') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('أضف المدربين والموظفين — كلمة المرور الافتراضية: password (سيُطلب تغييرها عند أول دخول)') }}</p>
            </div>

            <div class="space-y-6">
                @foreach($users as $index => $user)
                <div class="relative border border-gray-200 rounded-xl p-5 group hover:border-blue-200 transition-colors" x-data="{ role: @js($user['role'] ?? 'trainer') }">
                    <button wire:click="removeUser({{ $index }})" class="absolute top-3 start-3 opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الاسم') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="users.{{ $index }}.name" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("users.{$index}.name") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('البريد الإلكتروني') }} <span class="text-red-500">*</span></label>
                            <input type="email" wire:model="users.{{ $index }}.email" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error("users.{$index}.email") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الدور') }} <span class="text-red-500">*</span></label>
                            <select wire:model="users.{{ $index }}.role" x-model="role" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($this->getUserRoles() as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error("users.{$index}.role") <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الفرع') }} <span class="text-red-500">*</span></label>
                            <select wire:model="users.{{ $index }}.branch_index" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @foreach($branches as $bIdx => $br)
                                    <option value="{{ $bIdx }}">{{ $br['name_ar'] ?: __('فرع') . ' ' . ($bIdx + 1) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الهاتف') }}</label>
                            <input type="text" wire:model="users.{{ $index }}.phone" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        </div>
                        <div x-show="role === 'trainer' || role === 'head_trainer'" x-transition>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('التخصص') }}</label>
                            <input type="text" wire:model="users.{{ $index }}.specialization" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500" placeholder="{{ __('مثال: لياقة بدنية، تكتيك') }}">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <button wire:click="addUser" class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gray-500 hover:text-blue-600 hover:border-blue-300 transition-colors flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                {{ __('إضافة مستخدم') }}
            </button>

            @if(empty($users))
            <div class="mt-4 bg-amber-50 border border-amber-100 rounded-lg p-3">
                <p class="text-sm text-amber-700">{{ __('يمكنك تخطي هذه الخطوة وإضافة المستخدمين لاحقاً') }}</p>
            </div>
            @endif
        </div>
        @endif

        {{-- ═══ Step 8: Financial & Pricing ═══ --}}
        @if($currentStep === 8)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('الإعدادات المالية والتسعير') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('اضبط الضرائب وطرق الدفع وسياسات الخصم') }}</p>
            </div>

            <div class="space-y-6 max-w-3xl">
                {{-- Tax Section --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('الضرائب') }}</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model.live="taxEnabled" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <span class="text-sm text-gray-700">{{ __('تفعيل الضرائب') }}</span>
                        </div>
                        @if($taxEnabled)
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('نسبة الضريبة %') }}</label>
                            <input type="number" wire:model="taxPercentage" dir="ltr" min="0" max="100" step="0.5" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('taxPercentage') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Invoicing Section --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('الفوترة') }}</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('بادئة الفاتورة') }}</label>
                            <input type="text" wire:model="invoicePrefix" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('invoicePrefix') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('بادئة الإيصال') }}</label>
                            <input type="text" wire:model="receiptPrefix" dir="ltr" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('receiptPrefix') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('مهلة السداد (أيام)') }}</label>
                            <input type="number" wire:model="paymentDueDays" dir="ltr" min="1" max="365" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('paymentDueDays') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                {{-- Payment & Discounts Section --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('المحفظة والخصومات') }}</h3>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model="walletEnabled" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <span class="text-sm text-gray-700">{{ __('تفعيل المحفظة الإلكترونية') }}</span>
                        </div>

                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-2">{{ __('طرق الدفع المقبولة') }}</label>
                            <div class="flex flex-wrap gap-3">
                                @foreach(['cash' => 'نقدي', 'card' => 'بطاقة', 'bank_transfer' => 'تحويل بنكي', 'wallet' => 'محفظة', 'online' => 'أونلاين'] as $method => $label)
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="acceptedPaymentMethods" value="{{ $method }}" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700">{{ __($label) }}</span>
                                </label>
                                @endforeach
                            </div>
                            @error('acceptedPaymentMethods') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الحد الأقصى للخصم %') }}</label>
                                <input type="number" wire:model="maxDiscountPercent" dir="ltr" min="0" max="100" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @error('maxDiscountPercent') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('فترة التجربة (أيام)') }}</label>
                                <input type="number" wire:model="trialPeriodDays" dir="ltr" min="0" max="90" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @error('trialPeriodDays') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('خصم العائلة من الطفل رقم') }}</label>
                                <input type="number" wire:model="familyDiscountStartChild" dir="ltr" min="2" max="10" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @error('familyDiscountStartChild') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="flex items-center gap-3 pt-2">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model="autoApplyFamilyDiscount" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <span class="text-sm text-gray-700">{{ __('تطبيق خصم العائلة تلقائياً') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- ═══ Step 9: Rules & Policies ═══ --}}
        @if($currentStep === 9)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('السياسات والقواعد') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('اضبط قواعد الحضور والتسجيل والإشعارات') }}</p>
            </div>

            <div class="space-y-6 max-w-3xl">
                {{-- Attendance Rules --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('الحضور والغياب') }}</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('فترة السماح للمشتركين (دقيقة)') }}</label>
                            <input type="number" wire:model="gracePeriodParticipant" dir="ltr" min="0" max="60" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('gracePeriodParticipant') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('فترة السماح للمدربين (دقيقة)') }}</label>
                            <input type="number" wire:model="gracePeriodTrainer" dir="ltr" min="0" max="60" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('gracePeriodTrainer') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('تغيب تلقائي بعد (ساعات)') }}</label>
                            <input type="number" wire:model="autoAbsentAfterHours" dir="ltr" min="1" max="24" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('autoAbsentAfterHours') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('إيقاف بعد غياب متتالي') }}</label>
                            <input type="number" wire:model="consecutiveAbsencesForSuspend" dir="ltr" min="1" max="30" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('consecutiveAbsencesForSuspend') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الحد الأدنى للحضور %') }}</label>
                            <input type="number" wire:model="minAttendancePercent" dir="ltr" min="0" max="100" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                            @error('minAttendancePercent') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                {{-- Enrollment Rules --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('التسجيل والعضوية') }}</h3>
                    <div class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div class="flex items-center gap-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" wire:model="requireMedicalReport" class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                                <span class="text-sm text-gray-700">{{ __('إلزام تقرير طبي') }}</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" wire:model="requireGuardianForMinors" class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                                <span class="text-sm text-gray-700">{{ __('إلزام ولي أمر للقاصرين') }}</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" wire:model="allowWaitlist" class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                                <span class="text-sm text-gray-700">{{ __('تفعيل قائمة الانتظار') }}</span>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('حد سن القاصر') }}</label>
                                <input type="number" wire:model="minorAgeThreshold" dir="ltr" min="12" max="21" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @error('minorAgeThreshold') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('أقصى أيام تجميد') }}</label>
                                <input type="number" wire:model="freezeMaxDays" dir="ltr" min="1" max="365" class="w-full rounded-lg border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                                @error('freezeMaxDays') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Notifications --}}
                <div class="bg-gray-50 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-700 mb-4">{{ __('الإشعارات') }}</h3>
                    <div class="flex flex-wrap gap-6">
                        <div class="flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model="emailEnabled" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <span class="text-sm text-gray-700">{{ __('تفعيل البريد الإلكتروني') }}</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model="smsEnabled" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none 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 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <span class="text-sm text-gray-700">{{ __('تفعيل الرسائل القصيرة') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- ═══ Step 10: General Settings ═══ --}}
        @if($currentStep === 10)
        <div class="p-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-800">{{ __('الإعدادات العامة') }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ __('اضبط الإعدادات الأساسية للنظام — يمكنك تعديلها لاحقاً') }}</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-3xl">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العملة الافتراضية') }}</label>
                    <select wire:model="defaultCurrency" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="EGP">{{ __('جنيه مصري (EGP)') }}</option>
                        <option value="SAR">{{ __('ريال سعودي (SAR)') }}</option>
                        <option value="AED">{{ __('درهم إماراتي (AED)') }}</option>
                        <option value="USD">{{ __('دولار أمريكي (USD)') }}</option>
                    </select>
                    @error('defaultCurrency') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنطقة الزمنية') }}</label>
                    <select wire:model="timezone" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="Africa/Cairo">{{ __('القاهرة (UTC+2)') }}</option>
                        <option value="Asia/Riyadh">{{ __('الرياض (UTC+3)') }}</option>
                        <option value="Asia/Dubai">{{ __('دبي (UTC+4)') }}</option>
                        <option value="Europe/Istanbul">{{ __('إسطنبول (UTC+3)') }}</option>
                    </select>
                    @error('timezone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بداية الأسبوع') }}</label>
                    <select wire:model="weekStartsOn" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="6">{{ __('السبت') }}</option>
                        <option value="0">{{ __('الأحد') }}</option>
                        <option value="1">{{ __('الإثنين') }}</option>
                    </select>
                    @error('weekStartsOn') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('صيغة التاريخ') }}</label>
                    <select wire:model="dateFormat" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="Y-m-d">2026-07-05</option>
                        <option value="d/m/Y">05/07/2026</option>
                    </select>
                    @error('dateFormat') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('صيغة الوقت') }}</label>
                    <select wire:model="timeFormat" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="H:i">14:30 ({{ __('24 ساعة') }})</option>
                        <option value="h:i A">02:30 PM ({{ __('12 ساعة') }})</option>
                    </select>
                    @error('timeFormat') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عناصر في الصفحة') }}</label>
                    <select wire:model="paginationSize" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    @error('paginationSize') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="mt-6 max-w-3xl">
                <div class="bg-blue-50 border border-blue-100 rounded-lg p-3">
                    <p class="text-sm text-blue-700">{{ __('يمكنك تعديل جميع هذه الإعدادات لاحقاً من صفحة إعدادات النظام') }}</p>
                </div>
            </div>
        </div>
        @endif

        {{-- ═══ Step 11: Summary & Complete ═══ --}}
        @if($currentStep === 11)
        <div class="p-8">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-green-50 rounded-2xl mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">{{ __('ملخص الإعداد') }}</h2>
                <p class="text-sm text-gray-500 mt-2">{{ __('راجع البيانات ثم اضغط "إكمال الإعداد" لبدء العمل') }}</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl mx-auto">
                {{-- Academy --}}
                <div class="bg-blue-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-blue-800 uppercase mb-2">{{ __('الأكاديمية') }}</h4>
                    <p class="text-sm font-medium text-gray-800">{{ $academy->name_ar }}</p>
                    <p class="text-xs text-gray-500">{{ $academy->name }}</p>
                </div>

                {{-- Branches --}}
                <div class="bg-indigo-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-indigo-800 uppercase mb-2">{{ __('الفروع') }}</h4>
                    <p class="text-2xl font-bold text-indigo-700">{{ count($branches) }}</p>
                    <p class="text-xs text-gray-500">{{ collect($branches)->pluck('name_ar')->filter()->implode('، ') }}</p>
                </div>

                {{-- Activities --}}
                <div class="bg-purple-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-purple-800 uppercase mb-2">{{ __('الأنشطة') }}</h4>
                    <p class="text-2xl font-bold text-purple-700">{{ count($activities) }}</p>
                    <p class="text-xs text-gray-500">{{ collect($activities)->pluck('name_ar')->filter()->implode('، ') }}</p>
                </div>

                {{-- Programs --}}
                <div class="bg-emerald-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-emerald-800 uppercase mb-2">{{ __('البرامج') }}</h4>
                    <p class="text-2xl font-bold text-emerald-700">{{ count($programs) }}</p>
                    @if(count($programs) > 0)
                    <p class="text-xs text-gray-500">{{ __('إجمالي الرسوم:') }} {{ number_format(collect($programs)->sum('monthly_fee'), 0) }} {{ __('ج.م/شهر') }}</p>
                    @endif
                </div>

                {{-- Facilities --}}
                <div class="bg-amber-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-amber-800 uppercase mb-2">{{ __('المنشآت') }}</h4>
                    <p class="text-2xl font-bold text-amber-700">{{ count($facilities) }}</p>
                    @php $totalSegments = collect($facilities)->sum(fn($f) => ($f['grid_rows'] ?? 3) * ($f['grid_cols'] ?? 3)); @endphp
                    <p class="text-xs text-gray-500">{{ $totalSegments }} {{ __('قطعة مساحة') }}</p>
                </div>

                {{-- Groups --}}
                <div class="bg-cyan-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-cyan-800 uppercase mb-2">{{ __('المجموعات') }}</h4>
                    <p class="text-2xl font-bold text-cyan-700">{{ count($groups) }}</p>
                    @php $totalCapacity = collect($groups)->sum('max_capacity'); @endphp
                    <p class="text-xs text-gray-500">{{ __('سعة إجمالية:') }} {{ $totalCapacity }}</p>
                </div>

                {{-- Participants --}}
                <div class="bg-rose-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-rose-800 uppercase mb-2">{{ __('المشتركين') }}</h4>
                    <p class="text-2xl font-bold text-rose-700">{{ count($participants) }}</p>
                </div>

                {{-- Users --}}
                <div class="bg-orange-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-orange-800 uppercase mb-2">{{ __('الطاقم') }}</h4>
                    <p class="text-2xl font-bold text-orange-700">{{ count($users) }}</p>
                </div>

                {{-- Key Settings --}}
                <div class="bg-gray-50 rounded-xl p-4">
                    <h4 class="text-xs font-semibold text-gray-800 uppercase mb-2">{{ __('إعدادات مهمة') }}</h4>
                    <ul class="space-y-1 text-xs text-gray-600">
                        <li>{{ __('العملة:') }} {{ $defaultCurrency }}</li>
                        <li>{{ __('الضرائب:') }} {{ $taxEnabled ? $taxPercentage . '%' : __('معطلة') }}</li>
                        <li>{{ __('مهلة السداد:') }} {{ $paymentDueDays }} {{ __('يوم') }}</li>
                        <li>{{ __('فترة السماح:') }} {{ $gracePeriodParticipant }} {{ __('دقيقة') }}</li>
                    </ul>
                </div>
            </div>

            <div class="mt-8 text-center">
                <button wire:click="completeSetup" wire:loading.attr="disabled" class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-l from-green-600 to-emerald-600 text-white font-bold rounded-xl shadow-lg shadow-green-200 hover:shadow-xl hover:shadow-green-300 transition-all duration-300 disabled:opacity-50">
                    <span wire:loading.remove wire:target="completeSetup">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </span>
                    <span wire:loading wire:target="completeSetup">
                        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    </span>
                    <span wire:loading.remove wire:target="completeSetup">{{ __('إكمال الإعداد وبدء العمل') }}</span>
                    <span wire:loading wire:target="completeSetup">{{ __('جارٍ الإعداد...') }}</span>
                </button>
            </div>
        </div>
        @endif

    </div>

    {{-- ─── Navigation Buttons ────────────────────────────────────── --}}
    @if($currentStep < $totalSteps)
    <div class="flex justify-between items-center">
        @if($currentStep > 1)
        <button wire:click="previousStep" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-colors">
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            {{ __('السابق') }}
        </button>
        @else
        <div></div>
        @endif

        <button wire:click="nextStep" wire:loading.attr="disabled" class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-l from-blue-600 to-indigo-600 text-white font-medium rounded-xl shadow-md shadow-blue-200 hover:shadow-lg hover:shadow-blue-300 transition-all duration-300 disabled:opacity-50">
            <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
            <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
            <svg class="w-4 h-4" wire:loading.remove wire:target="nextStep" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            <svg class="w-4 h-4 animate-spin" wire:loading wire:target="nextStep" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
        </button>
    </div>
    @endif

</div>
