<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>

                {{-- 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" 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" wire:key="field-{{ $index }}">
                                <div class="flex items-start justify-between gap-4">
                                    {{-- Field Config --}}
                                    <div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-3">
                                        <div>
                                            <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="{{ __('مثال: الاسم الكامل') }}"
                                                   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-1 pt-5">
                                        <label class="flex items-center gap-1 text-xs text-gray-500 me-2">
                                            <input type="checkbox" wire:model="formFields.{{ $index }}.is_required" class="rounded text-blue-600 focus:ring-blue-500">
                                            {{ __('مطلوب') }}
                                        </label>
                                        <button wire:click="moveFieldUp({{ $index }})" @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 }})" @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 }})" 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>

                                {{-- Options for select/multi_select --}}
                                @if(in_array($field['type'], ['select', 'multi_select']))
                                    <div class="mt-3 pt-3 border-t border-gray-200">
                                        <label class="block text-xs font-medium text-gray-500 mb-2">{{ __('الخيارات') }}</label>
                                        <div class="space-y-2">
                                            @foreach($field['options'] ?? [] as $optIndex => $option)
                                                <div class="flex items-center gap-2">
                                                    <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-32 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 }})" 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 }})" 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-24 object-cover 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>
                </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">
                                    {{ $field['label'] ?: __('بدون عنوان') }}
                                    @if($field['is_required']) <span class="text-red-500">*</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" 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" 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"
                        class="px-6 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                    <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء الحدث') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
            @endif
        </div>
    @endif
</div>
