<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: Program Selection --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('اختر البرنامج التدريبي') }}</h2>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تصفية بالنشاط') }}</label>
                <select wire:model.live="activityFilter" 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>
            </div>

            <div class="space-y-2 max-h-64 overflow-y-auto">
                @forelse($programs as $program)
                    <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition-all
                        {{ $programId === $program->id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
                        <input type="radio" wire:model="programId" value="{{ $program->id }}" class="text-blue-600 focus:ring-blue-500">
                        <div>
                            <span class="text-sm font-medium text-gray-800">{{ $program->name_ar }}</span>
                            @if($program->name)
                                <span class="text-xs text-gray-500 ms-2" dir="ltr">{{ $program->name }}</span>
                            @endif
                        </div>
                    </label>
                @empty
                    <div class="text-center py-6 text-sm text-gray-500">{{ __('لا توجد برامج متاحة') }}</div>
                @endforelse
            </div>
            @error('programId') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 2: Group Info --}}
        @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="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>
                    <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>
                    <input type="text" wire:model="code" 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" placeholder="GRP-001">
                    @error('code') <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="text" wire:model="season" 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" placeholder="{{ __('مثال: صيف 2026') }}">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البدء') }} <span class="text-red-500">*</span></label>
                    <input type="date" wire:model="startDate" 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">
                    @error('startDate') <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="date" wire:model="endDate" 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">
                    @error('endDate') <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="notes" 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 text-sm"></textarea>
                </div>
            </div>
        @endif

        {{-- Step 3: Capacity & Trainer --}}
        @if($currentStep === 3)
            <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="maxCapacity" dir="ltr" min="1" max="500"
                           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('maxCapacity') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    @if($selectedProgram && $selectedProgram->max_participants)
                        <p class="mt-1 text-xs text-gray-500">{{ __('الحد الأقصى للبرنامج:') }} {{ $selectedProgram->max_participants }}</p>
                    @endif
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدرب الرئيسي') }}</label>
                    <select wire:model="headTrainerId" 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($trainers as $trainer)
                            @php $wl = $trainerWorkloads[$trainer->employee?->user_id] ?? null; @endphp
                            <option value="{{ $trainer->employee?->user_id }}">
                                {{ $trainer->employee?->person?->name_ar ?? $trainer->trainer_number }}
                                @if($wl) — {{ $wl['weekly_hours'] }}/{{ $wl['max_weekly_hours'] }} {{ __('س') }} ({{ $wl['load_percent'] }}%)@endif
                            </option>
                        @endforeach
                    </select>
                    @if($headTrainerId && isset($trainerWorkloads[$headTrainerId]))
                        @php $selectedWl = $trainerWorkloads[$headTrainerId]; @endphp
                        <div class="mt-2">
                            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                                <span>{{ __('حمل العمل') }}</span>
                                <span dir="ltr">{{ $selectedWl['weekly_hours'] }}/{{ $selectedWl['max_weekly_hours'] }} {{ __('ساعة') }}</span>
                            </div>
                            @php
                                $barColor = match($selectedWl['load_level']) {
                                    'high' => 'bg-red-500',
                                    'medium' => 'bg-amber-500',
                                    default => 'bg-green-500',
                                };
                            @endphp
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full rounded-full {{ $barColor }}" style="width: {{ $selectedWl['load_percent'] }}%"></div>
                            </div>
                        </div>
                    @endif
                </div>
            </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">
                @if($selectedProgram)
                <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">{{ $selectedProgram->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">{{ $nameAr }}</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">{{ $code }}</dd>
                </div>
                @if($season)
                <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">{{ $season }}</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" dir="ltr">{{ $startDate }}</dd>
                </div>
                @if($endDate)
                <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">{{ $endDate }}</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">{{ $maxCapacity }} {{ __('مشترك') }}</dd>
                </div>
            </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('groups.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>
