<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء برنامج تدريبي') }}</h1>
    </div>

    {{-- Step Indicator --}}
    <div class="flex items-center justify-center gap-2 mb-8">
        @foreach($stepLabels as $num => $label)
            <button wire:click="goToStep({{ $num }})"
                    class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                <span class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold
                    {{ $num < $currentStep ? 'bg-green-500 text-white' : ($num === $currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($num < $currentStep)
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    @else
                        {{ $num }}
                    @endif
                </span>
                <span class="hidden sm:inline text-sm {{ $num === $currentStep ? 'text-blue-700 font-medium' : 'text-gray-500' }}">{{ $label }}</span>
            </button>
            @if(!$loop->last)
                <div class="w-8 h-0.5 {{ $num < $currentStep ? 'bg-green-400' : 'bg-gray-200' }}"></div>
            @endif
        @endforeach
    </div>

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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">

        {{-- Step 1: Basic Info --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('المعلومات الأساسية') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالعربي') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="nameAr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('nameAr') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البرنامج بالإنجليزي') }}</label>
                    <input type="text" wire:model="name" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط') }} <span class="text-red-500">*</span></label>
                    <select wire:model="activityId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر النشاط...') }}</option>
                        @foreach($activities as $activity)
                            <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('activityId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }} <span class="text-red-500">*</span></label>
                    <select wire:model="branchId" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر الفرع...') }}</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('branchId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label>
                    <select wire:model="skillLevel" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('جميع المستويات') }}</option>
                        <option value="beginner">{{ __('مبتدئ') }}</option>
                        <option value="intermediate">{{ __('متوسط') }}</option>
                        <option value="advanced">{{ __('متقدم') }}</option>
                        <option value="professional">{{ __('محترف') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
                    <select wire:model="gender" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('مختلط') }}</option>
                        <option value="male">{{ __('ذكور فقط') }}</option>
                        <option value="female">{{ __('إناث فقط') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للعمر') }}</label>
                    <input type="number" wire:model="ageMin" dir="ltr" min="2" max="99"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('ageMin') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للعمر') }}</label>
                    <input type="number" wire:model="ageMax" dir="ltr" min="2" max="99"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('ageMax') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
                    <textarea wire:model="descriptionAr" rows="3"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"></textarea>
                </div>
            </div>
        @endif

        {{-- Step 2: Schedule & Duration --}}
        @if($currentStep === 2)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الجدول والمدة') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الحصص في الأسبوع') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="sessionsPerWeek" dir="ltr" min="1" max="14"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('sessionsPerWeek') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة الحصة (بالدقائق)') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="sessionDurationMinutes" dir="ltr" min="15" max="300" step="5"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('sessionDurationMinutes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مدة البرنامج (بالأسابيع)') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="programDurationWeeks" dir="ltr" min="1" max="104"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('programDurationWeeks') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    {{-- Spacer --}}
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمشتركين') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="minParticipants" dir="ltr" min="1"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('minParticipants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للمشتركين') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="maxParticipants" dir="ltr" min="1"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    @error('maxParticipants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        @endif

        {{-- Step 3: Pricing --}}
        @if($currentStep === 3)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('التسعير') }}</h2>
            <div class="max-w-md">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السعر الأساسي') }} <span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="number" wire:model="basePrice" dir="ltr" step="0.01" min="0"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pe-12">
                    <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                </div>
                @error('basePrice') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                <p class="mt-2 text-xs text-gray-500">{{ __('هذا هو السعر الأساسي للاشتراك الشهري. يمكن تعديل السعر لاحقاً من إعدادات التسعير.') }}</p>
            </div>
        @endif

        {{-- Step 4: Review --}}
        @if($currentStep === 4 && !$completed)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('مراجعة وتأكيد') }}</h2>
            <dl class="space-y-3">
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('اسم البرنامج') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $nameAr }}</dd>
                </div>
                @if($activityId)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('النشاط') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $activities->firstWhere('id', $activityId)?->name_ar }}</dd>
                </div>
                @endif
                @if($branchId)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $branches->firstWhere('id', $branchId)?->name_ar }}</dd>
                </div>
                @endif
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الحصص') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $sessionsPerWeek }} {{ __('حصة/أسبوع') }} - {{ $sessionDurationMinutes }} {{ __('دقيقة') }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('مدة البرنامج') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $programDurationWeeks }} {{ __('أسبوع') }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('المشتركين') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $minParticipants }} - {{ $maxParticipants }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('السعر الأساسي') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$basePrice, 2) }} {{ __('ج.م') }}</dd>
                </div>
                @if($gender)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الجنس') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $gender === 'male' ? __('ذكور فقط') : __('إناث فقط') }}</dd>
                </div>
                @endif
                @if($ageMin || $ageMax)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الفئة العمرية') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $ageMin ?: '?' }} - {{ $ageMax ?: '?' }} {{ __('سنة') }}</dd>
                </div>
                @endif
            </dl>
        @endif

        {{-- Success State --}}
        @if($completed)
            <div class="text-center py-8">
                <div class="mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ __('تم إنشاء البرنامج التدريبي بنجاح') }}</h3>
                <p class="text-sm text-gray-600 mb-6">{{ __('يمكنك الآن إنشاء مجموعات للبرنامج أو إنشاء برنامج آخر') }}</p>
                <div class="flex items-center justify-center gap-3">
                    <a href="{{ route('programs.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        {{ __('قائمة البرامج') }}
                    </a>
                    <button wire:click="$refresh" onclick="window.location.reload()" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        {{ __('إنشاء برنامج آخر') }}
                    </button>
                </div>
            </div>
        @endif
    </div>

    {{-- Navigation Buttons --}}
    @if(!$completed)
        <div class="flex items-center justify-between mt-6">
            <div>
                @if($currentStep > 1)
                    <button wire:click="previousStep" class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        {{ __('السابق') }}
                    </button>
                @endif
            </div>
            <div>
                @if($currentStep < $totalSteps)
                    <button wire:click="nextStep" class="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        {{ __('التالي') }}
                    </button>
                @elseif($currentStep === $totalSteps)
                    <button wire:click="confirm" wire:loading.attr="disabled" wire:target="confirm"
                            class="px-5 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors disabled:opacity-50">
                        <span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span>
                        <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
                    </button>
                @endif
            </div>
        </div>
    @endif
</div>
