<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('نقل إلى مجموعة') }}</h1>
        <a href="{{ route('enrollments.list') }}" wire:navigate
           class="text-sm text-gray-600 hover:text-gray-800">
            {{ __('العودة للقائمة') }}
        </a>
    </div>

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

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

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

        {{-- Step 1: Search Participant --}}
        <div>
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">
                {{ __('البحث عن مشترك') }} <span class="text-red-500">*</span>
            </label>
            <input type="text"
                   wire:model.live.debounce.300ms="search"
                   id="search"
                   placeholder="{{ __('ابحث بالاسم أو رقم المشترك...') }}"
                   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">

            {{-- Search Results --}}
            @if(strlen($search) >= 2 && $participants->isNotEmpty() && !$participant_id)
            <div class="mt-2 border border-gray-200 rounded-lg divide-y divide-gray-100 max-h-60 overflow-y-auto">
                @foreach($participants as $participant)
                <button type="button"
                        wire:click="selectParticipant({{ $participant->id }})"
                        class="w-full px-4 py-3 text-start hover:bg-blue-50 flex items-center justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-800">{{ $participant->person?->name_ar }}</span>
                        @if($participant->participant_number)
                        <span class="text-xs text-gray-500 ms-2">#{{ $participant->participant_number }}</span>
                        @endif
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
                        {{ $participant->status->value === 'active' ? 'نشط' : 'مسجل' }}
                    </span>
                </button>
                @endforeach
            </div>
            @elseif(strlen($search) >= 2 && $participants->isEmpty() && !$participant_id)
            <p class="mt-2 text-sm text-gray-500">{{ __('لا توجد نتائج') }}</p>
            @endif
        </div>

        {{-- Selected Participant Info --}}
        @if($participant_id)
        @php
            $selectedParticipant = $participants->firstWhere('id', $participant_id)
                ?? \App\Domain\Participant\Models\Participant::with('person')->find($participant_id);
        @endphp
        @if($selectedParticipant)
        <div class="p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg flex flex-col sm:flex-row sm:items-center justify-between gap-2">
            <div>
                <span class="text-sm font-medium text-blue-800">{{ __('المشترك المختار:') }}</span>
                <span class="text-sm text-blue-700 ms-1">{{ $selectedParticipant->person?->name_ar }}</span>
                @if($selectedParticipant->participant_number)
                <span class="text-xs text-blue-600 ms-2">#{{ $selectedParticipant->participant_number }}</span>
                @endif
            </div>
            <button type="button" wire:click="$set('participant_id', null)" class="text-blue-600 hover:text-blue-800 text-xs self-start sm:self-auto">
                {{ __('تغيير') }}
            </button>
        </div>
        @endif

        {{-- Step 2: Select Active Enrollment --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                {{ __('التسجيلات النشطة') }} <span class="text-red-500">*</span>
            </label>

            @if($activeEnrollments->isEmpty())
            <p class="text-sm text-gray-500 p-3 bg-gray-50 rounded-lg">{{ __('لا توجد تسجيلات نشطة لهذا المشترك') }}</p>
            @else
            <div class="space-y-2">
                @foreach($activeEnrollments as $enrollment)
                <label class="flex items-start sm:items-center gap-3 p-3 border rounded-lg cursor-pointer transition
                    {{ $enrollment_id === $enrollment->id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
                    <input type="radio"
                           wire:click="selectEnrollment({{ $enrollment->id }})"
                           name="enrollment_selection"
                           value="{{ $enrollment->id }}"
                           @checked($enrollment_id === $enrollment->id)
                           class="text-blue-600 focus:ring-blue-500 mt-1 sm:mt-0">
                    <div class="flex-1 min-w-0">
                        <span class="text-sm font-medium text-gray-800">{{ $enrollment->group?->name_ar }}</span>
                        @if($enrollment->program)
                        <span class="text-xs text-gray-500 ms-2">— {{ $enrollment->program->name_ar }}</span>
                        @endif
                        <div class="text-xs text-gray-500 mt-0.5 flex flex-wrap gap-x-3 gap-y-0.5">
                            <span>{{ __('تاريخ التسجيل:') }} {{ $enrollment->enrollment_date?->format('Y-m-d') }}</span>
                            @if($enrollment->group)
                            <span>{{ __('السعة:') }} {{ $enrollment->group->current_count }}/{{ $enrollment->group->max_capacity }}</span>
                            @endif
                        </div>
                    </div>
                </label>
                @endforeach
            </div>
            @endif
            @error('enrollment_id')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Step 3: Select Destination Group --}}
        @if($enrollment_id)
        <div>
            <label for="destination_group_id" class="block text-sm font-medium text-gray-700 mb-1">
                {{ __('المجموعة الجديدة') }} <span class="text-red-500">*</span>
            </label>

            @if($destinationGroups->isEmpty())
            <p class="text-sm text-gray-500 p-3 bg-gray-50 rounded-lg">{{ __('لا توجد مجموعات متاحة بها أماكن شاغرة') }}</p>
            @else
            <select wire:model="destination_group_id" id="destination_group_id"
                    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('destination_group_id') border-red-500 @enderror">
                <option value="">{{ __('اختر المجموعة الجديدة...') }}</option>
                @foreach($destinationGroups as $group)
                <option value="{{ $group->id }}">
                    {{ $group->name_ar }}
                    @if($group->program)
                        — {{ $group->program->name_ar }}
                    @endif
                    ({{ $group->current_count }}/{{ $group->max_capacity }})
                </option>
                @endforeach
            </select>
            @endif
            @error('destination_group_id')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>
        @endif

        {{-- Submit --}}
        @if($enrollment_id && $destinationGroups->isNotEmpty())
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <a href="{{ route('enrollments.list') }}" wire:navigate
               class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 rounded-lg text-center">
                {{ __('إلغاء') }}
            </a>
            <button type="button"
                    wire:click="transfer"
                    wire:loading.attr="disabled"
                    wire:target="transfer"
                    wire:confirm="{{ __('هل أنت متأكد من نقل المشترك إلى المجموعة الجديدة؟') }}"
                    class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
                <span wire:loading.remove wire:target="transfer">{{ __('نقل') }}</span>
                <span wire:loading wire:target="transfer">{{ __('جارٍ النقل...') }}</span>
            </button>
        </div>
        @endif

        @endif {{-- end participant_id --}}
    </div>
</div>
