<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>
        <a href="{{ route('enrollments.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">
            {{ __('العودة') }}
        </a>
    </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-6 sm:p-8">
        <div class="text-center mb-6">
            <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">
                {{ __('تم نقل') }} <span class="font-bold text-green-600">{{ $successCount }}</span>
                @if($failCount > 0)
                    {{ __('— فشل') }} <span class="font-bold text-red-600">{{ $failCount }}</span>
                @endif
            </p>
        </div>

        {{-- Results Table --}}
        <div class="max-h-96 overflow-y-auto border border-gray-200 rounded-xl mb-6">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 sticky top-0">
                    <tr>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('المشترك') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الحالة') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('التفاصيل') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($transferResults as $result)
                    <tr>
                        <td class="px-4 py-3 font-medium text-gray-800">{{ $result['name'] }}</td>
                        <td class="px-4 py-3">
                            @if($result['status'] === 'success')
                            <span class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
                                <svg class="w-3 h-3" 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>
                                {{ __('نجح') }}
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                {{ __('فشل') }}
                            </span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $result['message'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex items-center justify-center gap-4">
            <a href="{{ route('enrollments.transfer-wizard') }}" 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>
            <a href="{{ route('enrollments.list') }}" wire:navigate
               class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 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 Participants --}}
        @if($currentStep === 1)
        <div>
            {{-- Mode Toggle --}}
            <div class="flex items-center gap-3 mb-6">
                <button wire:click="setMode('bulk')"
                        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors
                        {{ $mode === 'bulk' ? 'bg-emerald-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                    {{ __('نقل من مجموعة (Bulk)') }}
                </button>
                <button wire:click="setMode('single')"
                        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors
                        {{ $mode === 'single' ? 'bg-emerald-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                    {{ __('نقل فردي') }}
                </button>
            </div>

            {{-- BULK MODE --}}
            @if($mode === 'bulk')
                @if(!$sourceGroupId)
                {{-- Select Source Group --}}
                <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('اختر المجموعة المصدر') }}</h2>
                <div class="space-y-2 max-h-96 overflow-y-auto">
                    @foreach($sourceGroups as $group)
                    <button wire:click="selectSourceGroup({{ $group->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">{{ $group->name_ar }}</div>
                                <div class="text-sm text-gray-500">{{ $group->program?->name_ar ?? '-' }}</div>
                            </div>
                            <span class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-700 font-medium">
                                {{ $group->current_count }} {{ __('مشترك') }}
                            </span>
                        </div>
                    </button>
                    @endforeach
                </div>
                @else
                {{-- Source Group Selected — Show Participants --}}
                <div class="mb-4 p-3 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center justify-between">
                    <div>
                        <span class="text-xs text-emerald-600">{{ __('المجموعة المصدر') }}</span>
                        <div class="font-medium text-emerald-800">{{ $sourceGroupInfo['name_ar'] }}</div>
                        <div class="text-xs text-emerald-600">{{ $sourceGroupInfo['program_name'] }}</div>
                    </div>
                    <button wire:click="$set('sourceGroupId', null)" class="text-emerald-600 hover:text-emerald-800 text-sm">
                        {{ __('تغيير') }}
                    </button>
                </div>

                {{-- Search within group --}}
                <div class="mb-4">
                    <input type="text" wire:model.live.debounce.300ms="participantSearch"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                           placeholder="{{ __('فلتر بالاسم...') }}">
                </div>

                {{-- Select All + Counter --}}
                <div class="flex items-center justify-between mb-3">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:click="toggleSelectAll" {{ $selectAll ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                        <span class="text-sm font-medium text-gray-700">{{ __('تحديد الكل') }}</span>
                    </label>
                    <span class="text-sm font-medium {{ count($selectedParticipants) > 0 ? 'text-emerald-600' : 'text-gray-400' }}">
                        {{ __('محدد:') }} {{ count($selectedParticipants) }}
                    </span>
                </div>

                {{-- Participants List --}}
                <div class="space-y-1 max-h-80 overflow-y-auto border border-gray-200 rounded-xl p-2">
                    @forelse($sourceEnrollments as $enrollment)
                    <label class="flex items-center gap-3 p-3 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors
                        {{ isset($selectedParticipants[$enrollment->id]) ? 'bg-emerald-50 border border-emerald-200' : '' }}">
                        <input type="checkbox" wire:click="toggleParticipant({{ $enrollment->id }})"
                               {{ isset($selectedParticipants[$enrollment->id]) ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                        <div class="flex-1 min-w-0">
                            <div class="font-medium text-gray-800 text-sm truncate">
                                {{ $enrollment->participant?->person?->name_ar ?? $enrollment->participant?->person?->name ?? '-' }}
                            </div>
                            @if($enrollment->participant?->participant_number)
                            <div class="text-xs text-gray-400">#{{ $enrollment->participant->participant_number }}</div>
                            @endif
                        </div>
                    </label>
                    @empty
                    <div class="p-4 text-center text-gray-500 text-sm">
                        {{ __('لا توجد تسجيلات نشطة') }}
                    </div>
                    @endforelse
                </div>
                @endif
            @endif

            {{-- SINGLE MODE --}}
            @if($mode === 'single')
                @if(!$singleParticipantInfo)
                <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بحث عن المشترك') }}</h2>
                <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 mb-4"
                       placeholder="{{ __('بحث بالاسم أو الهاتف أو رقم المشترك...') }}">

                @if(strlen($participantSearch) >= 2)
                <div class="space-y-2">
                    @forelse($searchResults as $participant)
                    <button wire:click="selectSingleParticipant({{ $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 bg-green-100 text-green-700">{{ __('نشط') }}</span>
                        </div>
                    </button>
                    @empty
                    <div class="p-4 text-center text-gray-500 text-sm">{{ __('لا توجد نتائج') }}</div>
                    @endforelse
                </div>
                @endif
                @else
                {{-- Participant selected --}}
                <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">{{ $singleParticipantInfo['name'] }}</span>
                            @if($singleParticipantInfo['participant_number'])
                            <span class="text-xs text-emerald-600 ms-2">#{{ $singleParticipantInfo['participant_number'] }}</span>
                            @endif
                        </div>
                    </div>
                    <button wire:click="clearSingleParticipant" class="text-emerald-600 hover:text-emerald-800 text-sm">
                        {{ __('تغيير') }}
                    </button>
                </div>

                {{-- Active Enrollments --}}
                @if(count($singleEnrollments) > 0)
                <h3 class="text-sm font-medium text-gray-700 mb-3">{{ __('اختر التسجيل المراد نقله') }}</h3>
                <div class="space-y-2">
                    @foreach($singleEnrollments as $enrollment)
                    <label class="relative cursor-pointer block">
                        <input type="radio" wire:click="selectSingleEnrollment({{ $enrollment['id'] }})" name="enrollment"
                               {{ $singleEnrollmentId === $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>
                        </div>
                    </label>
                    @endforeach
                </div>
                @else
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl text-amber-700 text-sm">
                    {{ __('لا توجد تسجيلات نشطة لهذا المشترك') }}
                </div>
                @endif
                @endif
            @endif

            @error('selectedParticipants') <p class="text-red-500 text-xs mt-3">{{ $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">
                {{ __('نقل') }} <span class="font-bold text-emerald-600">{{ count($selectedParticipants) }}</span> {{ __('مشترك — اختر البرنامج والمجموعة') }}
            </p>

            {{-- Program Selector --}}
            <div class="mb-5">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('البرنامج') }}</label>
                <select wire:change="selectDestinationProgram($event.target.value)"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 text-sm">
                    @foreach($availablePrograms as $program)
                    <option value="{{ $program->id }}" {{ ($destinationProgramId ?? ($sourceGroupInfo['program_id'] ?? '')) == $program->id ? 'selected' : '' }}>
                        {{ $program->name_ar }}
                        @if($program->id == ($sourceGroupInfo['program_id'] ?? null))
                            ({{ __('البرنامج الحالي') }})
                        @endif
                    </option>
                    @endforeach
                </select>
            </div>

            {{-- Available Groups --}}
            @if($availableGroups->count() > 0)
            <div class="space-y-3">
                @foreach($availableGroups as $group)
                @php
                    $spotsAfter = $group->max_capacity - $group->current_count - count($selectedParticipants);
                    $canFitAll = $spotsAfter >= 0;
                @endphp
                <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">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-800">{{ $group->name_ar }}</div>
                                <div class="text-xs text-gray-400">{{ $group->program?->name_ar ?? '' }}</div>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="px-3 py-1 text-sm rounded-full font-medium
                                    {{ $canFitAll ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700' }}">
                                    {{ $group->current_count }}/{{ $group->max_capacity }}
                                </span>
                                @if($canFitAll)
                                <span class="text-xs text-green-600">{{ __('متاح') }}: {{ $group->max_capacity - $group->current_count }}</span>
                                @else
                                <span class="text-xs text-amber-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

            {{-- Capacity Warning --}}
            @if($destinationGroupInfo && count($selectedParticipants) > ($destinationGroupInfo['max_capacity'] - $destinationGroupInfo['current_count']))
            <div class="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-xl">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-amber-600 mt-0.5 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">
                        <p class="font-semibold">{{ __('تحذير: السعة غير كافية') }}</p>
                        <p>{{ __('المجموعة المختارة بها') }} {{ $destinationGroupInfo['max_capacity'] - $destinationGroupInfo['current_count'] }} {{ __('مكان متاح فقط، وتحاول نقل') }} {{ count($selectedParticipants) }} {{ __('مشترك.') }}</p>
                        <p class="mt-1">{{ __('سيتم نقل من يمكن نقله فقط وسيفشل الباقي.') }}</p>
                    </div>
                </div>
            </div>
            @endif

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

        {{-- Step 3: Reason --}}
        @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">{{ $sourceGroupInfo['name_ar'] ?? '-' }}</div>
                    <div class="text-sm text-gray-500 mt-1">{{ count($selectedParticipants) }} {{ __('مشترك') }}</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">{{ $destinationGroupInfo['name_ar'] ?? '-' }}</div>
                    <div class="text-sm text-gray-500 mt-1">{{ $destinationGroupInfo['program_name'] ?? '' }}</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">
                {{-- Summary --}}
                <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">{{ $sourceGroupInfo['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">{{ $destinationGroupInfo['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>

                {{-- Participants List --}}
                <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="text-xs text-gray-500 mb-2">{{ __('المشتركون') }} ({{ count($selectedParticipants) }})</div>
                    <div class="flex flex-wrap gap-2">
                        @foreach($selectedParticipants as $p)
                        <span class="px-3 py-1 bg-emerald-100 text-emerald-800 text-sm rounded-full">{{ $p['name'] }}</span>
                        @endforeach
                    </div>
                </div>

                {{-- Warning --}}
                <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">{{ __('تأكيد نقل') }} {{ count($selectedParticipants) }} {{ __('مشترك') }}</span>
                    <span wire:loading wire:target="confirm">{{ __('جارٍ النقل...') }}</span>
                </button>
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
