<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء منشأة جديدة') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('إضافة منشأة رياضية جديدة للنظام') }}</p>
        </div>
    </div>

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

    {{-- Step Indicator --}}
    @if(!$completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php $steps = $this->getStepLabels(); @endphp
            @foreach($steps as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <button wire:click="goToStep({{ $num }})"
                        @if($num >= $currentStep) disabled @endif
                        class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors
                        {{ $num === $currentStep ? 'bg-blue-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $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" d="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs font-medium hidden sm:inline
                        {{ $num === $currentStep ? 'text-blue-600' : '' }}
                        {{ $num < $currentStep ? 'text-green-600' : '' }}
                        {{ $num > $currentStep ? 'text-gray-400' : '' }}">
                        {{ __($label) }}
                    </span>
                </button>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">

        {{-- Step 1: Basic Info --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('المعلومات الأساسية') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Name Arabic --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنشأة بالعربية') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="nameAr"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('مثال: ملعب 1') }}">
                    @error('nameAr') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Name English --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنشأة بالإنجليزية') }}</label>
                    <input type="text" wire:model="name" dir="ltr"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Field 1">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Type --}}
                <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 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('-- اختر النوع --') }}</option>
                        <option value="field">{{ __('ملعب') }}</option>
                        <option value="court">{{ __('كورت') }}</option>
                        <option value="pool">{{ __('حمام سباحة') }}</option>
                        <option value="gym">{{ __('صالة رياضية') }}</option>
                        <option value="track">{{ __('مضمار') }}</option>
                        <option value="hall">{{ __('قاعة') }}</option>
                        <option value="room">{{ __('غرفة') }}</option>
                        <option value="outdoor">{{ __('مساحة خارجية') }}</option>
                        <option value="other">{{ __('أخرى') }}</option>
                    </select>
                    @error('type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Branch --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }} <span class="text-red-500">*</span></label>
                    <select wire:model="branchId"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('-- اختر الفرع --') }}</option>
                        @foreach($branches as $branch)
                        <option value="{{ $branch['id'] }}">{{ $branch['name_ar'] }}</option>
                        @endforeach
                    </select>
                    @error('branchId') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Capacity --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السعة') }}</label>
                    <input type="number" wire:model="capacity" dir="ltr" min="1"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="50">
                    @error('capacity') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Description --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
                    <textarea wire:model="descriptionAr" rows="3"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="{{ __('وصف مختصر للمنشأة...') }}"></textarea>
                    @error('descriptionAr') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @endif

        {{-- Step 2: Specs --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('المواصفات') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Surface Type --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع السطح') }}</label>
                    <input type="text" wire:model="surfaceType"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('مثال: نجيل صناعي، خشب، تارتان') }}">
                    @error('surfaceType') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Area --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المساحة (م²)') }}</label>
                    <input type="number" wire:model="areaSqm" dir="ltr" step="0.01" min="0"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="500">
                    @error('areaSqm') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Length --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (م)') }}</label>
                    <input type="number" wire:model="lengthM" dir="ltr" step="0.01" min="0"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="100">
                    @error('lengthM') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Width --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العرض (م)') }}</label>
                    <input type="number" wire:model="widthM" dir="ltr" step="0.01" min="0"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="50">
                    @error('widthM') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Boolean Options --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('الخصائص') }}</label>
                    <div class="flex flex-wrap gap-6">
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="isIndoor"
                                   class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('مغطى (داخلي)') }}</span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="hasLighting"
                                   class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('إضاءة') }}</span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="hasAc"
                                   class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('تكييف') }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

            {{-- Sports hosted + starting grid --}}
            <div class="mt-6 pt-6 border-t border-gray-200 space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرياضات في هذه المنشأة') }}</label>
                    <p class="text-xs text-gray-500 mb-3">
                        {{ __('تُصفّي المجموعات المعروضة عند الجدولة — اتركها فارغة لعرض كل الرياضات') }}
                    </p>
                    <div class="flex flex-wrap gap-2">
                        @foreach($activities as $activity)
                            <label class="cursor-pointer">
                                <input type="checkbox" value="{{ $activity->id }}" wire:model="activityIds" class="peer sr-only">
                                <span class="inline-block px-3 py-1.5 rounded-full border-2 text-sm font-medium
                                             border-gray-200 text-gray-600
                                             peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700">
                                    {{ $activity->name_ar }}
                                </span>
                            </label>
                        @endforeach
                        @if($activities->isEmpty())
                            <p class="text-sm text-gray-400">{{ __('لا توجد أنشطة معرّفة بعد') }}</p>
                        @endif
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تقسيم المساحة') }}</label>
                    <p class="text-xs text-gray-500 mb-3">
                        {{ __('اتركها 1×1 إذا كانت المنشأة مساحة واحدة — يمكن تغييرها لاحقاً من إعدادات المنشأة') }}
                    </p>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">{{ __('صفوف') }}</label>
                            <input type="number" wire:model.live="gridRows" min="1" dir="ltr"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">{{ __('أعمدة') }}</label>
                            <input type="number" wire:model.live="gridColumns" min="1" dir="ltr"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                        </div>
                        <div class="flex items-end">
                            <p class="text-sm text-gray-600 pb-2">
                                {{ max(1, (int) $gridRows) * max(1, (int) $gridColumns) }} {{ __('قطعة') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Step 3: Operating Hours --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('ساعات التشغيل') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Operating Start --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت الافتتاح') }}</label>
                    <input type="time" wire:model="operatingStart" dir="ltr"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('operatingStart') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Operating End --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وقت الإغلاق') }}</label>
                    <input type="time" wire:model="operatingEnd" dir="ltr"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('operatingEnd') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Rental Cost --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تكلفة الإيجار بالساعة') }}</label>
                    <div class="relative">
                        <input type="number" wire:model="rentalCostPerHour" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 pe-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('rentalCostPerHour') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Address --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label>
                    <textarea wire:model="address" rows="2"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="{{ __('العنوان التفصيلي للمنشأة...') }}"></textarea>
                    @error('address') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @endif

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

            <div class="space-y-4">
                {{-- Basic Info Section --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('المعلومات الأساسية') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('الاسم بالعربية') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $nameAr }}</dd>
                        </div>
                        @if($name)
                        <div>
                            <dt class="text-gray-500">{{ __('الاسم بالإنجليزية') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $name }}</dd>
                        </div>
                        @endif
                        <div>
                            <dt class="text-gray-500">{{ __('النوع') }}</dt>
                            <dd class="font-medium text-gray-800">
                                @php
                                    $typeLabels = ['field'=>'ملعب','court'=>'كورت','pool'=>'حمام سباحة','gym'=>'صالة رياضية','track'=>'مضمار','hall'=>'قاعة','room'=>'غرفة','outdoor'=>'مساحة خارجية','other'=>'أخرى'];
                                @endphp
                                {{ $typeLabels[$type] ?? $type }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">{{ __('الفرع') }}</dt>
                            <dd class="font-medium text-gray-800">{{ collect($branches)->firstWhere('id', $branchId)['name_ar'] ?? '-' }}</dd>
                        </div>
                        @if($capacity)
                        <div>
                            <dt class="text-gray-500">{{ __('السعة') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $capacity }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Specs Section --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('المواصفات') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        @if($surfaceType)
                        <div>
                            <dt class="text-gray-500">{{ __('نوع السطح') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $surfaceType }}</dd>
                        </div>
                        @endif
                        @if($areaSqm)
                        <div>
                            <dt class="text-gray-500">{{ __('المساحة') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $areaSqm }} {{ __('م²') }}</dd>
                        </div>
                        @endif
                        @if($lengthM)
                        <div>
                            <dt class="text-gray-500">{{ __('الطول') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $lengthM }} {{ __('م') }}</dd>
                        </div>
                        @endif
                        @if($widthM)
                        <div>
                            <dt class="text-gray-500">{{ __('العرض') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $widthM }} {{ __('م') }}</dd>
                        </div>
                        @endif
                        <div class="sm:col-span-2">
                            <dt class="text-gray-500 mb-1">{{ __('الخصائص') }}</dt>
                            <dd class="flex flex-wrap gap-2">
                                @if($isIndoor) <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">{{ __('مغطى') }}</span> @endif
                                @if($hasLighting) <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs">{{ __('إضاءة') }}</span> @endif
                                @if($hasAc) <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">{{ __('تكييف') }}</span> @endif
                                @if(!$isIndoor && !$hasLighting && !$hasAc) <span class="text-gray-400 text-xs">{{ __('لا توجد خصائص إضافية') }}</span> @endif
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Operating Hours Section --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('ساعات التشغيل') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        @if($operatingStart && $operatingEnd)
                        <div>
                            <dt class="text-gray-500">{{ __('ساعات العمل') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $operatingStart }} - {{ $operatingEnd }}</dd>
                        </div>
                        @endif
                        @if($rentalCostPerHour)
                        <div>
                            <dt class="text-gray-500">{{ __('تكلفة الإيجار بالساعة') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ number_format((float)$rentalCostPerHour, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($address)
                        <div class="sm:col-span-2">
                            <dt class="text-gray-500">{{ __('العنوان') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $address }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
        @endif

        {{-- Success State --}}
        @if($completed)
        <div class="text-center py-8">
            <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">{{ __('تم إنشاء المنشأة بنجاح') }}</h2>
            <p class="text-gray-500 mb-6">{{ __('يمكنك الآن إدارة المنشأة وإضافة تخطيطات المساحة') }}</p>
        </div>
        @endif

        {{-- Navigation Buttons --}}
        @if(!$completed)
        <div class="flex items-center justify-between mt-8 pt-4 border-t border-gray-200">
            @if($currentStep > 1)
            <button wire:click="previousStep" type="button"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium text-sm 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

            @if($currentStep < $totalSteps)
            <button wire:click="nextStep" type="button"
                    wire:loading.attr="disabled" wire:target="nextStep"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-white bg-blue-600 rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                <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="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            @else
            <button wire:click="confirm" type="button"
                    wire:loading.attr="disabled" wire:target="confirm"
                    class="inline-flex items-center gap-2 px-6 py-2.5 text-white bg-green-600 rounded-lg hover:bg-green-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="confirm">{{ __('تأكيد الإنشاء') }}</span>
                <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
            </button>
            @endif
        </div>
        @endif
    </div>
</div>
