<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

    {{-- Success State --}}
    @if($completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
        <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
            <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 class="flex items-center justify-center gap-4">
            <a href="{{ route('enrollments.index') }}" wire:navigate
               class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors">
                {{ __('العودة للتسجيلات') }}
            </a>
        </div>
    </div>
    @else

    {{-- Step Indicator --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @foreach($this->getStepLabels() 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-emerald-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-emerald-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>

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

        {{-- Step 1: Select Participant & Enrollment --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('اختيار المشترك والتسجيل') }}</h2>

            {{-- Search --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث عن المشترك') }}</label>
                <input type="text" wire:model.live.debounce.300ms="participantSearch"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-lg"
                       placeholder="{{ __('بحث بالاسم، الهاتف، الرقم القومي، أو رقم المشترك...') }}">
            </div>

            {{-- Selected Participant --}}
            @if($selectedParticipant)
            <div class="mb-4 p-4 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-emerald-200 flex items-center justify-center">
                        <svg class="w-5 h-5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                    <div>
                        <span class="font-medium text-emerald-800">{{ $selectedParticipant['name'] }}</span>
                        @if($selectedParticipant['participant_number'])
                        <span class="text-xs text-emerald-600 ms-2">#{{ $selectedParticipant['participant_number'] }}</span>
                        @endif
                    </div>
                </div>
                <button wire:click="$set('participantId', null)" class="text-emerald-600 hover:text-emerald-800 text-sm">
                    {{ __('تغيير') }}
                </button>
            </div>

            {{-- Active Enrollments --}}
            @if(count($activeEnrollments) > 0)
            <div class="mb-4">
                <h3 class="text-sm font-medium text-gray-700 mb-3">{{ __('التسجيلات النشطة') }}</h3>
                <div class="space-y-2">
                    @foreach($activeEnrollments as $enrollment)
                    <label class="relative cursor-pointer block">
                        <input type="radio" wire:click="selectEnrollment({{ $enrollment['id'] }})" name="enrollment"
                               {{ $enrollmentId === $enrollment['id'] ? 'checked' : '' }} class="peer sr-only">
                        <div class="p-4 border-2 rounded-xl transition-all
                            peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                            border-gray-200 hover:border-gray-300">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium text-gray-800">{{ $enrollment['group_name'] }}</div>
                                    <div class="text-sm text-gray-500">{{ $enrollment['program_name'] }}</div>
                                </div>
                                <div class="text-xs text-gray-400">{{ $enrollment['enrollment_date'] }}</div>
                            </div>
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>
            @else
            <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl text-amber-700 text-sm">
                {{ __('لا توجد تسجيلات نشطة لهذا المشترك') }}
            </div>
            @endif
            @endif

            {{-- Search Results --}}
            @if(strlen($participantSearch) >= 2 && !$selectedParticipant)
            <div class="space-y-2">
                @forelse($searchResults as $participant)
                <button wire:click="selectParticipant({{ $participant->id }})"
                        class="w-full text-start p-4 border border-gray-200 rounded-xl hover:border-emerald-300 hover:bg-emerald-50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-gray-800">{{ $participant->person?->name_ar ?? $participant->person?->name ?? '-' }}</div>
                            <div class="text-sm text-gray-500">{{ $participant->participant_number }}</div>
                        </div>
                        <span class="px-2 py-1 text-xs rounded-full
                            {{ $participant->status->value === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                            {{ $participant->status->value === 'active' ? __('نشط') : $participant->status->value }}
                        </span>
                    </div>
                </button>
                @empty
                <div class="p-4 text-center text-gray-500 text-sm">
                    {{ __('لا توجد نتائج') }}
                </div>
                @endforelse
            </div>
            @endif

            @error('participantId') <p class="text-red-500 text-xs mt-2">{{ $message }}</p> @enderror
            @error('enrollmentId') <p class="text-red-500 text-xs mt-2">{{ $message }}</p> @enderror
        </div>
        @endif

        {{-- Step 2: Destination Group --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('اختيار المجموعة الوجهة') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('اختر المجموعة التي سيتم نقل المشترك إليها') }}</p>

            @if($availableGroups->count() > 0)
            <div class="space-y-3">
                @foreach($availableGroups as $group)
                <label class="relative cursor-pointer block">
                    <input type="radio" wire:click="selectDestinationGroup({{ $group->id }})" name="destination"
                           {{ $destinationGroupId === $group->id ? 'checked' : '' }} class="peer sr-only">
                    <div class="p-4 border-2 rounded-xl transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                        border-gray-200 hover:border-gray-300
                        {{ $group->isFull() ? 'opacity-50' : '' }}">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-800">{{ $group->name_ar }}</div>
                                @if($group->name)
                                <div class="text-xs text-gray-400">{{ $group->name }}</div>
                                @endif
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="px-3 py-1 text-sm rounded-full font-medium
                                    {{ $group->hasAvailableSpots() ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    {{ $group->current_count }}/{{ $group->max_capacity }}
                                </span>
                                @if($group->hasAvailableSpots())
                                <span class="text-xs text-green-600">{{ __('متاح') }}: {{ $group->max_capacity - $group->current_count }}</span>
                                @else
                                <span class="text-xs text-red-600">{{ __('ممتلئة') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </label>
                @endforeach
            </div>
            @else
            <div class="p-6 text-center text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                </svg>
                <p>{{ __('لا توجد مجموعات أخرى متاحة في نفس البرنامج') }}</p>
            </div>
            @endif

            @error('destinationGroupId') <p class="text-red-500 text-xs mt-2">{{ $message }}</p> @enderror
        </div>
        @endif

        {{-- Step 3: Impact --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('تأثير النقل') }}</h2>

            {{-- Transfer Visual --}}
            <div class="flex items-center justify-center gap-4 mb-6 p-6 bg-gray-50 rounded-xl">
                <div class="text-center p-4 bg-white rounded-lg border border-gray-200 flex-1">
                    <div class="text-xs text-gray-500 mb-1">{{ __('من') }}</div>
                    <div class="font-medium text-gray-800">{{ $sourceGroup['name_ar'] ?? '-' }}</div>
                    <div class="text-sm text-gray-500 mt-1" dir="ltr">
                        {{ ($sourceGroup['current_count'] ?? 0) }}/{{ $sourceGroup['max_capacity'] ?? 0 }}
                    </div>
                    <div class="text-xs text-green-600 mt-1">
                        {{ __('بعد النقل:') }} {{ (($sourceGroup['current_count'] ?? 0) - 1) }}/{{ $sourceGroup['max_capacity'] ?? 0 }}
                    </div>
                </div>
                <div class="text-gray-400">
                    <svg class="w-8 h-8 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                    </svg>
                </div>
                <div class="text-center p-4 bg-white rounded-lg border border-gray-200 flex-1">
                    <div class="text-xs text-gray-500 mb-1">{{ __('إلى') }}</div>
                    <div class="font-medium text-gray-800">{{ $destinationGroup['name_ar'] ?? '-' }}</div>
                    <div class="text-sm text-gray-500 mt-1" dir="ltr">
                        {{ ($destinationGroup['current_count'] ?? 0) }}/{{ $destinationGroup['max_capacity'] ?? 0 }}
                    </div>
                    <div class="text-xs text-amber-600 mt-1">
                        {{ __('بعد النقل:') }} {{ (($destinationGroup['current_count'] ?? 0) + 1) }}/{{ $destinationGroup['max_capacity'] ?? 0 }}
                    </div>
                </div>
            </div>

            {{-- Reason --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب النقل') }} <span class="text-red-500">*</span></label>
                <textarea wire:model="reason" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                          placeholder="{{ __('اذكر سبب نقل المشترك...') }}"></textarea>
                @error('reason') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
        @endif

        {{-- Step 4: Confirm --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('تأكيد النقل') }}</h2>

            <div class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('المشترك') }}</div>
                        <div class="font-medium text-gray-800">{{ $selectedParticipant['name'] ?? '-' }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('البرنامج') }}</div>
                        <div class="font-medium text-gray-800">{{ $selectedEnrollment['program_name'] ?? '-' }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('المجموعة الحالية') }}</div>
                        <div class="font-medium text-gray-800">{{ $sourceGroup['name_ar'] ?? '-' }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('المجموعة الجديدة') }}</div>
                        <div class="font-medium text-gray-800">{{ $destinationGroup['name_ar'] ?? '-' }}</div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="text-xs text-gray-500 mb-1">{{ __('سبب النقل') }}</div>
                    <div class="text-gray-800">{{ $reason }}</div>
                </div>

                <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                    <div class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                        </svg>
                        <div class="text-sm text-amber-700">
                            {{ __('سيتم إلغاء التسجيل الحالي وإنشاء تسجيل جديد في المجموعة الوجهة. هذا الإجراء لا يمكن التراجع عنه.') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

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