<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Flash Messages --}}
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">{{ session('error') }}</div>
    @endif

    @if($completed)
        {{-- Success State --}}
        <div class="bg-white rounded-xl border border-gray-200 p-12 text-center">
            <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center 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="2" d="M5 13l4 4L19 7"/></svg>
            </div>
            <h2 class="text-xl font-bold text-gray-800 mb-2">{{ $editing ? __('تم تحديث الحدث') : __('تم إنشاء الحدث بنجاح') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('يمكنك نشر الحدث أو تعديله من صفحة التفاصيل') }}</p>
            <div class="flex items-center justify-center gap-3">
                <a href="{{ route('events.show', $event) }}" wire:navigate class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                    {{ __('عرض الحدث') }}
                </a>
                <a href="{{ route('events.list') }}" wire:navigate class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                    {{ __('قائمة الأحداث') }}
                </a>
            </div>
        </div>
    @else
        {{-- Wizard Header --}}
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $editing ? __('تعديل الحدث') : __('إنشاء حدث جديد') }}</h1>

            {{-- Steps Indicator --}}
            <div class="flex items-center gap-2">
                @foreach([1 => 'التفاصيل', 2 => 'نموذج التسجيل', 3 => 'الصور', 4 => 'المراجعة'] as $step => $label)
                    <button wire:click="goToStep({{ $step }})" @if($step > $currentStep) disabled @endif
                            class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors
                            {{ $currentStep === $step ? 'bg-blue-600 text-white' : ($step < $currentStep ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-gray-100 text-gray-400') }}">
                        <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold
                            {{ $currentStep === $step ? 'bg-white/20' : ($step < $currentStep ? 'bg-green-200' : 'bg-gray-200') }}">
                            @if($step < $currentStep)
                                <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="3" d="M5 13l4 4L19 7"/></svg>
                            @else
                                {{ $step }}
                            @endif
                        </span>
                        <span class="hidden sm:inline">{{ __($label) }}</span>
                    </button>
                    @if($step < $totalSteps)
                        <div class="flex-1 h-px bg-gray-200"></div>
                    @endif
                @endforeach
            </div>
        </div>

        {{-- Step 1: Details --}}
        @if($currentStep === 1)
            <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
                <h2 class="text-lg font-semibold text-gray-800">{{ __('تفاصيل الحدث') }}</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md: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="title" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 @enderror">
                        @error('title') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان بالإنجليزية') }}</label>
                        <input type="text" wire:model="titleEn" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الحدث') }} <span class="text-red-500">*</span></label>
                        <select wire:model="type" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
                            <option value="">{{ __('اختر النوع') }}</option>
                            @foreach($eventTypes as $t)
                                <option value="{{ $t->value }}">{{ $t->label() }}</option>
                            @endforeach
                        </select>
                        @error('type') <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="maxCapacity" dir="ltr" min="1" placeholder="{{ __('غير محدود') }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label>
                        <input type="datetime-local" wire:model="startsAt" dir="ltr"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('startsAt') border-red-500 @enderror">
                        @error('startsAt') <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="datetime-local" wire:model="endsAt" dir="ltr"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('endsAt') border-red-500 @enderror">
                        @error('endsAt') <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="datetime-local" wire:model="registrationOpensAt" dir="ltr"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إغلاق التسجيل') }}</label>
                        <input type="datetime-local" wire:model="registrationClosesAt" dir="ltr"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                {{-- Location --}}
                <div class="border-t pt-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الموقع') }} <span class="text-red-500">*</span></label>
                    <div class="flex gap-4 mb-4">
                        @foreach($locationTypes as $lt)
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" wire:model.live="locationType" value="{{ $lt->value }}" class="text-blue-600 focus:ring-blue-500">
                                <span class="text-sm text-gray-700">{{ $lt->label() }}</span>
                            </label>
                        @endforeach
                    </div>

                    @if($locationType === 'facility')
                        <select wire:model="facilityId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('facilityId') border-red-500 @enderror">
                            <option value="">{{ __('اختر المنشأة') }}</option>
                            @foreach($facilities as $f)
                                <option value="{{ $f->id }}">{{ $f->name_ar }}</option>
                            @endforeach
                        </select>
                        @error('facilityId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    @else
                        <div class="space-y-3">
                            <input type="text" wire:model="locationName" placeholder="{{ __('اسم الموقع') }}"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('locationName') border-red-500 @enderror">
                            @error('locationName') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                            <textarea wire:model="locationAddress" rows="2" placeholder="{{ __('العنوان التفصيلي') }}"
                                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                        </div>
                    @endif
                </div>

                {{-- Google Maps Locations --}}
                <div class="border-t pt-4">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">{{ __('مواقع على الخريطة') }}</label>
                            <p class="text-xs text-gray-500">{{ __('أضف إحداثيات ليتم عرضها على خرائط جوجل في صفحة الحدث') }}</p>
                        </div>
                        <button wire:click="addMapLocation" type="button" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ {{ __('إضافة موقع') }}</button>
                    </div>

                    @foreach($mapLocations as $locIndex => $loc)
                        <div class="flex items-start gap-3 mb-3 p-3 bg-gray-50 rounded-lg border border-gray-200" wire:key="map-loc-{{ $locIndex }}">
                            <div class="flex-1 grid grid-cols-1 sm:grid-cols-4 gap-2">
                                <input type="text" wire:model="mapLocations.{{ $locIndex }}.title" placeholder="{{ __('عنوان الموقع') }}"
                                       class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                                <input type="text" wire:model="mapLocations.{{ $locIndex }}.lat" placeholder="{{ __('خط العرض (Lat)') }}" dir="ltr"
                                       class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                                <input type="text" wire:model="mapLocations.{{ $locIndex }}.lng" placeholder="{{ __('خط الطول (Lng)') }}" dir="ltr"
                                       class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                                <input type="text" wire:model="mapLocations.{{ $locIndex }}.address" placeholder="{{ __('العنوان (اختياري)') }}"
                                       class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            </div>
                            <button wire:click="removeMapLocation({{ $locIndex }})" type="button" class="p-1.5 text-red-400 hover:text-red-600 mt-1">
                                <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
                    <p class="text-xs text-gray-400 mt-1">{{ __('يمكنك الحصول على الإحداثيات من Google Maps بالنقر بزر الماوس الأيمن على الموقع') }}</p>
                </div>

                {{-- Description --}}
                <div class="border-t pt-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وصف الحدث') }}</label>
                    <textarea wire:model="description" rows="4" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
            </div>
        @endif

        {{-- Step 2: Form Builder --}}
        @if($currentStep === 2)
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-800">{{ __('نموذج التسجيل') }}</h2>
                        <p class="text-sm text-gray-500">{{ __('حدد الحقول التي سيملأها المسجلون — الحقول الفريدة تمنع التسجيل المكرر') }}</p>
                    </div>
                    <button wire:click="addField" type="button" class="inline-flex items-center gap-1.5 px-3 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        <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="M12 4v16m8-8H4"/></svg>
                        {{ __('إضافة حقل') }}
                    </button>
                </div>

                @if(empty($formFields))
                    <div class="text-center py-8 text-gray-400">
                        <p>{{ __('لا توجد حقول. أضف حقولاً ليملأها المسجلون.') }}</p>
                    </div>
                @else
                    <div class="space-y-4">
                        @foreach($formFields as $index => $field)
                            <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 {{ $field['type'] === 'section_divider' ? 'border-dashed border-blue-300 bg-blue-50/30' : '' }}" wire:key="field-{{ $index }}">

                                {{-- Row 1: Main config --}}
                                <div class="flex items-start justify-between gap-3">
                                    <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-3">
                                        <div class="md:col-span-2">
                                            <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('العنوان') }} <span class="text-red-500">*</span></label>
                                            <input type="text" wire:model="formFields.{{ $index }}.label"
                                                   placeholder="{{ $field['type'] === 'section_divider' ? __('عنوان القسم') : __('مثال: الاسم الكامل') }}"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('النوع') }}</label>
                                            <select wire:model.live="formFields.{{ $index }}.type"
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                @foreach($fieldTypes as $ft)
                                                    <option value="{{ $ft->value }}">{{ $ft->label() }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('العرض') }}</label>
                                            <select wire:model="formFields.{{ $index }}.width"
                                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                <option value="full">{{ __('كامل') }}</option>
                                                <option value="half">{{ __('نصف') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Actions --}}
                                    <div class="flex items-center gap-0.5 pt-5">
                                        <button wire:click="duplicateField({{ $index }})" type="button" title="{{ __('نسخ') }}" class="p-1.5 text-gray-400 hover:text-blue-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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                        </button>
                                        <button wire:click="moveFieldUp({{ $index }})" type="button" @if($index === 0) disabled @endif
                                                class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                                            <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="M5 15l7-7 7 7"/></svg>
                                        </button>
                                        <button wire:click="moveFieldDown({{ $index }})" type="button" @if($index === count($formFields) - 1) disabled @endif
                                                class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                                            <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="M19 9l-7 7-7-7"/></svg>
                                        </button>
                                        <button wire:click="removeField({{ $index }})" type="button" class="p-1.5 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="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>
                                    </div>
                                </div>

                                {{-- Row 2: Toggles (skip for section_divider) --}}
                                @if($field['type'] !== 'section_divider')
                                    <div class="flex flex-wrap items-center gap-4 mt-3 pt-3 border-t border-gray-200">
                                        <label class="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer">
                                            <input type="checkbox" wire:model="formFields.{{ $index }}.is_required" class="rounded text-blue-600 focus:ring-blue-500">
                                            {{ __('مطلوب') }}
                                        </label>
                                        @if(in_array($field['type'], ['text', 'email', 'phone', 'national_id', 'number']))
                                            <label class="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer">
                                                <input type="checkbox" wire:model="formFields.{{ $index }}.is_unique" class="rounded text-orange-600 focus:ring-orange-500">
                                                {{ __('فريد (لا يتكرر)') }}
                                            </label>
                                        @endif
                                        @if(in_array($field['type'], ['select', 'multi_select', 'radio']))
                                            <label class="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer">
                                                <input type="checkbox" wire:model="formFields.{{ $index }}.allow_other" class="rounded text-purple-600 focus:ring-purple-500">
                                                {{ __('السماح بـ "أخرى"') }}
                                            </label>
                                        @endif
                                    </div>

                                    {{-- Row 3: Expandable advanced settings --}}
                                    <div x-data="{ showAdvanced: false }" class="mt-2">
                                        <button @click="showAdvanced = !showAdvanced" type="button" class="text-xs text-gray-400 hover:text-gray-600 flex items-center gap-1">
                                            <svg class="w-3 h-3 transition-transform" :class="showAdvanced ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                            {{ __('إعدادات متقدمة') }}
                                        </button>
                                        <div x-show="showAdvanced" x-transition class="mt-2 grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-gray-100">
                                            <div>
                                                <label class="block text-xs text-gray-500 mb-1">{{ __('وصف / مساعدة') }}</label>
                                                <input type="text" wire:model="formFields.{{ $index }}.description" placeholder="{{ __('نص يظهر أسفل الحقل') }}"
                                                       class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-gray-500 mb-1">{{ __('نص توضيحي (placeholder)') }}</label>
                                                <input type="text" wire:model="formFields.{{ $index }}.placeholder" placeholder="{{ __('مثال: أدخل اسمك') }}"
                                                       class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-gray-500 mb-1">{{ __('قيمة افتراضية') }}</label>
                                                <input type="text" wire:model="formFields.{{ $index }}.default_value" placeholder="{{ __('قيمة مسبقة') }}"
                                                       class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                            </div>

                                            @if(in_array($field['type'], ['text', 'textarea']))
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('الحد الأدنى (حروف)') }}</label>
                                                    <input type="number" wire:model="formFields.{{ $index }}.min_length" dir="ltr" min="0"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('الحد الأقصى (حروف)') }}</label>
                                                    <input type="number" wire:model="formFields.{{ $index }}.max_length" dir="ltr" min="0"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                            @endif

                                            @if($field['type'] === 'number')
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('أقل قيمة') }}</label>
                                                    <input type="number" wire:model="formFields.{{ $index }}.min_value" dir="ltr"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('أعلى قيمة') }}</label>
                                                    <input type="number" wire:model="formFields.{{ $index }}.max_value" dir="ltr"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                            @endif

                                            @if(in_array($field['type'], ['text', 'phone', 'national_id']))
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('نمط التحقق (Regex)') }}</label>
                                                    <input type="text" wire:model="formFields.{{ $index }}.pattern" dir="ltr" placeholder="^[0-9]{11}$"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs font-mono focus:ring-1 focus:ring-blue-500">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('رسالة خطأ النمط') }}</label>
                                                    <input type="text" wire:model="formFields.{{ $index }}.pattern_message" placeholder="{{ __('يجب أن يكون 11 رقم') }}"
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                            @endif

                                            @if($field['type'] === 'terms')
                                                <div class="md:col-span-3">
                                                    <label class="block text-xs text-gray-500 mb-1">{{ __('رابط الشروط والأحكام') }}</label>
                                                    <input type="url" wire:model="formFields.{{ $index }}.terms_url" dir="ltr" placeholder="https://..."
                                                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                            @endif

                                            {{-- Conditional Visibility --}}
                                            <div class="md:col-span-3 border-t border-gray-100 pt-2 mt-1">
                                                <label class="block text-xs text-gray-500 mb-1">{{ __('إظهار هذا الحقل فقط إذا...') }}</label>
                                                <div class="grid grid-cols-2 gap-2">
                                                    <select wire:model="formFields.{{ $index }}.condition_field"
                                                            class="px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                        <option value="">{{ __('بدون شرط (يظهر دائماً)') }}</option>
                                                        @foreach($formFields as $ci => $cf)
                                                            @if($ci !== $index && $cf['type'] !== 'section_divider')
                                                                <option value="{{ $cf['key'] }}">{{ $cf['label'] ?: 'حقل ' . ($ci + 1) }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                    <input type="text" wire:model="formFields.{{ $index }}.condition_value" placeholder="{{ __('يساوي هذه القيمة') }}"
                                                           class="px-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-blue-500">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- Options for select/multi_select/radio --}}
                                @if(in_array($field['type'], ['select', 'multi_select', 'radio']))
                                    <div class="mt-3 pt-3 border-t border-gray-200">
                                        <label class="block text-xs font-medium text-gray-500 mb-2">
                                            {{ __('الخيارات') }}
                                            @if($field['type'] === 'radio')
                                                <span class="text-gray-400">({{ __('إجابة واحدة فقط') }})</span>
                                            @elseif($field['type'] === 'multi_select')
                                                <span class="text-gray-400">({{ __('يمكن اختيار أكثر من إجابة') }})</span>
                                            @endif
                                        </label>
                                        <div class="space-y-2">
                                            @foreach($field['options'] ?? [] as $optIndex => $option)
                                                <div class="flex items-center gap-2">
                                                    @if($field['type'] === 'radio')
                                                        <span class="w-4 h-4 rounded-full border-2 border-gray-300 shrink-0"></span>
                                                    @elseif($field['type'] === 'multi_select')
                                                        <span class="w-4 h-4 rounded border-2 border-gray-300 shrink-0"></span>
                                                    @endif
                                                    <input type="text" wire:model="formFields.{{ $index }}.options.{{ $optIndex }}.label"
                                                           placeholder="{{ __('نص الخيار') }}"
                                                           class="flex-1 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    <input type="text" wire:model="formFields.{{ $index }}.options.{{ $optIndex }}.value"
                                                           placeholder="{{ __('القيمة (تلقائي)') }}" dir="ltr"
                                                           class="w-28 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    <button wire:click="removeOption({{ $index }}, {{ $optIndex }})" type="button" class="p-1 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
                                            <button wire:click="addOption({{ $index }})" type="button" class="text-xs text-blue-600 hover:text-blue-800 font-medium">
                                                + {{ __('إضافة خيار') }}
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        {{-- Step 3: Media --}}
        @if($currentStep === 3)
            <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
                <h2 class="text-lg font-semibold text-gray-800">{{ __('صور الحدث') }}</h2>

                {{-- Cover Photo --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('صورة الغلاف') }}</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors">
                        @if($coverPhoto)
                            <img src="{{ $coverPhoto->temporaryUrl() }}" class="max-h-48 mx-auto rounded-lg mb-3">
                        @elseif($editing && $event->cover)
                            <img src="{{ $event->cover->url }}" class="max-h-48 mx-auto rounded-lg mb-3">
                        @endif
                        <input type="file" wire:model="coverPhoto" accept="image/*" class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <p class="text-xs text-gray-400 mt-2">{{ __('يفضل 1920×600 بكسل') }}</p>
                        @error('coverPhoto') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Gallery --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('معرض الصور') }}</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors">
                        @if(!empty($galleryPhotos))
                            <div class="grid grid-cols-3 gap-3 mb-3">
                                @foreach($galleryPhotos as $photo)
                                    <img src="{{ $photo->temporaryUrl() }}" class="w-full h-auto object-contain rounded-lg">
                                @endforeach
                            </div>
                        @endif
                        <input type="file" wire:model="galleryPhotos" accept="image/*" multiple class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <p class="text-xs text-gray-400 mt-2">{{ __('يمكنك رفع عدة صور') }}</p>
                    </div>
                </div>
            </div>
        @endif

        {{-- Step 4: Review --}}
        @if($currentStep === 4)
            <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
                <h2 class="text-lg font-semibold text-gray-800">{{ __('مراجعة البيانات') }}</h2>

                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div><span class="text-gray-500">{{ __('العنوان') }}:</span> <span class="font-medium">{{ $title }}</span></div>
                    <div><span class="text-gray-500">{{ __('النوع') }}:</span> <span class="font-medium">{{ \App\Domain\Event\Enums\EventType::tryFrom($type)?->label() ?? '—' }}</span></div>
                    <div><span class="text-gray-500">{{ __('البداية') }}:</span> <span class="font-medium" dir="ltr">{{ $startsAt }}</span></div>
                    <div><span class="text-gray-500">{{ __('النهاية') }}:</span> <span class="font-medium" dir="ltr">{{ $endsAt }}</span></div>
                    <div><span class="text-gray-500">{{ __('السعة') }}:</span> <span class="font-medium">{{ $maxCapacity ?? __('غير محدود') }}</span></div>
                    <div><span class="text-gray-500">{{ __('حقول النموذج') }}:</span> <span class="font-medium">{{ count($formFields) }} {{ __('حقل') }}</span></div>
                    @if(!empty($mapLocations))
                        <div><span class="text-gray-500">{{ __('مواقع الخريطة') }}:</span> <span class="font-medium">{{ count($mapLocations) }}</span></div>
                    @endif
                </div>

                @if(!empty($formFields))
                    <div class="border-t pt-4">
                        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ __('حقول التسجيل') }}</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($formFields as $field)
                                <span class="px-2.5 py-1 bg-gray-100 text-gray-700 rounded-full text-xs inline-flex items-center gap-1">
                                    {{ $field['label'] ?: __('بدون عنوان') }}
                                    @if($field['is_required'] ?? false) <span class="text-red-500">*</span> @endif
                                    @if($field['is_unique'] ?? false) <span class="text-orange-500 text-[10px]">(فريد)</span> @endif
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        @endif

        {{-- Navigation --}}
        <div class="flex items-center justify-between mt-6">
            @if($currentStep > 1)
                <button wire:click="previousStep" type="button" class="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                    {{ __('السابق') }}
                </button>
            @else
                <div></div>
            @endif

            @if($currentStep < $totalSteps)
                <button wire:click="nextStep" type="button" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                    {{ __('التالي') }}
                </button>
            @else
                <button wire:click="save" wire:loading.attr="disabled" wire:target="save" type="button"
                        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="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء الحدث') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
            @endif
        </div>
    @endif
</div>
