<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('receptionist.dashboard') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors">
            <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="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ __('العودة للاستقبال') }}
        </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

    {{-- Step Indicator --}}
    @if($currentStep < 4)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php
                $steps = [
                    1 => 'بحث عن المشترك',
                    2 => 'اختيار البرنامج',
                    3 => 'مراجعة ودفع',
                ];
            @endphp
            @foreach($steps 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>
    @endif

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        {{-- Step 1: Search Participant --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('بحث عن المشترك') }}</h2>

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

            {{-- Selected Participant Indicator --}}
            @if($selected_participant_id)
            <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="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <span class="font-medium text-emerald-800">{{ $selected_participant_name }}</span>
                </div>
                <button wire:click="$set('selected_participant_id', null)" class="text-emerald-600 hover:text-emerald-800 text-sm">
                    {{ __('تغيير') }}
                </button>
            </div>
            @endif

            {{-- Search Results --}}
            @if(strlen($search) >= 2 && !$selected_participant_id)
            <div class="space-y-2" wire:loading.class="opacity-50">
                @forelse($searchResults as $result)
                <button wire:click="selectParticipant({{ $result->id }}, '{{ $result->person?->name_ar }}')"
                        class="w-full p-4 min-h-16 border border-gray-200 rounded-xl text-start hover:border-emerald-300 hover:bg-emerald-50 transition-all flex items-center justify-between">
                    <div>
                        <p class="font-medium text-gray-800">{{ $result->person?->name_ar }}</p>
                        <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                            @if($result->participant_number)
                            <span dir="ltr">{{ $result->participant_number }}</span>
                            @endif
                            @if($result->person?->phone)
                            <span dir="ltr">{{ $result->person->phone }}</span>
                            @endif
                        </div>
                    </div>
                    <span class="px-2 py-0.5 text-xs rounded-full
                        {{ $result->status->value === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                        {{ $result->status->value === 'active' ? __('نشط') : __($result->status->value) }}
                    </span>
                </button>
                @empty
                <div class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <p>{{ __('لا توجد نتائج') }}</p>
                </div>
                @endforelse
            </div>
            @elseif(strlen($search) < 2 && !$selected_participant_id)
            <div class="text-center py-8 text-gray-400">
                <svg class="w-16 h-16 mx-auto text-gray-200 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <p class="text-sm">{{ __('اكتب حرفين على الأقل للبحث') }}</p>
            </div>
            @endif

            @error('selected_participant_id') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror

            <div class="flex justify-end mt-8">
                <button wire:click="nextStep" wire:loading.attr="disabled"
                        @if(!$selected_participant_id) disabled @endif
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-base font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                    <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                    <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
                    <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
            </div>
        </div>
        @endif

        {{-- Step 2: Program Selection --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('اختيار البرنامج') }}</h2>

            {{-- Activity Selection --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر النشاط') }}</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                    @foreach($activities as $activity)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model.live="selected_activity_id" value="{{ $activity->id }}" class="peer sr-only">
                        <div class="p-4 min-h-16 flex items-center justify-center border border-gray-300 rounded-xl text-center font-medium transition-all
                                    peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 peer-checked:shadow-sm
                                    hover:border-gray-400">
                            {{ $activity->name_ar }}
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('selected_activity_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Program Selection --}}
            @if($selected_activity_id)
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر البرنامج') }}</label>
                @if($programs->isEmpty())
                <div class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                @else
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @foreach($programs as $program)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="selected_program_id" value="{{ $program->id }}" class="peer sr-only">
                        <div class="p-5 min-h-16 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:shadow-sm
                                    hover:border-gray-400">
                            <h4 class="font-bold text-gray-800">{{ $program->name_ar }}</h4>
                            @if($program->name)
                            <p class="text-xs text-gray-500 mt-0.5" dir="ltr">{{ $program->name }}</p>
                            @endif
                            @if($program->description)
                            <p class="text-sm text-gray-600 mt-2">{{ Str::limit($program->description, 80) }}</p>
                            @endif
                            @php
                                $programFee = \App\Domain\Pricing\Models\BasePrice::where('priceable_type', \App\Domain\Training\Models\TrainingProgram::class)
                                    ->where('priceable_id', $program->id)
                                    ->where('is_active', true)
                                    ->where('effective_from', '<=', now())
                                    ->where(fn ($q) => $q->whereNull('effective_to')->orWhere('effective_to', '>=', now()))
                                    ->orderByDesc('priority')
                                    ->value('amount');
                            @endphp
                            @if($programFee)
                            <div class="mt-3">
                                <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-sm font-bold" dir="ltr">
                                    {{ number_format($programFee / 100, 2) }} {{ __('ج.م') }}
                                </span>
                            </div>
                            @endif
                        </div>
                    </label>
                    @endforeach
                </div>
                @endif
                @error('selected_program_id') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            @endif

            <div class="flex justify-between mt-8">
                <button wire:click="previousStep"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    {{ __('السابق') }}
                </button>
                <button wire:click="nextStep" wire:loading.attr="disabled"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-base font-medium transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                    <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
                    <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
            </div>
        </div>
        @endif

        {{-- Step 3: Review & Payment --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة ودفع') }}</h2>

            {{-- Summary --}}
            <div class="space-y-4 mb-6">
                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div>
                            <span class="text-gray-500">{{ __('المشترك') }}:</span>
                            <span class="font-medium text-gray-800 ms-1">{{ $selected_participant_name }}</span>
                        </div>
                        @php
                            $program = \App\Domain\Training\Models\TrainingProgram::with('activity')->find($selected_program_id);
                        @endphp
                        @if($program)
                        <div>
                            <span class="text-gray-500">{{ __('البرنامج') }}:</span>
                            <span class="font-medium text-gray-800 ms-1">{{ $program->name_ar }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">{{ __('النشاط') }}:</span>
                            <span class="font-medium text-gray-800 ms-1">{{ $program->activity?->name_ar }}</span>
                        </div>
                        @if($this->selectedProgramFee > 0)
                        @php $proration = $this->proratedProgramFee; @endphp
                        <div class="col-span-2">
                            <span class="text-gray-500">{{ __('الرسوم') }}:</span>
                            @if($proration->applied)
                                <span class="line-through text-gray-400 ms-1" dir="ltr">{{ number_format($proration->originalAmount / 100, 2) }} {{ __('ج.م') }}</span>
                                <span class="font-bold text-green-700 ms-2" dir="ltr">{{ number_format($proration->proratedAmount / 100, 2) }} {{ __('ج.م') }}</span>
                                <span class="text-xs text-blue-600 ms-1">({{ $proration->description }})</span>
                            @else
                                <span class="font-bold text-green-700 ms-1" dir="ltr">{{ number_format($proration->proratedAmount / 100, 2) }} {{ __('ج.م') }}</span>
                            @endif
                        </div>
                        @endif
                        @endif
                    </div>
                </div>
            </div>

            {{-- Payment Option --}}
            @if($program && $this->selectedProgramFee > 0)
            @php $proration = $this->proratedProgramFee; @endphp
            <div class="border-t border-gray-200 pt-6">
                <div class="flex items-center gap-4 mb-4">
                    <label class="relative cursor-pointer" dir="ltr">
                        <input type="checkbox" wire:model.live="pay_now" class="peer sr-only">
                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6"></div>
                    </label>
                    <span class="text-base font-medium text-gray-700">{{ __('الدفع الآن') }}</span>
                </div>

                @if($pay_now)
                <div class="grid grid-cols-3 gap-3">
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="payment_method" value="cash" class="peer sr-only">
                        <div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-green-500 peer-checked:bg-green-50 peer-checked:text-green-700
                                    hover:border-gray-400">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                            <span class="text-sm font-medium">{{ __('نقدي') }}</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="payment_method" value="card" class="peer sr-only">
                        <div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700
                                    hover:border-gray-400">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                            </svg>
                            <span class="text-sm font-medium">{{ __('بطاقة') }}</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="payment_method" value="wallet" class="peer sr-only">
                        <div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-purple-500 peer-checked:bg-purple-50 peer-checked:text-purple-700
                                    hover:border-gray-400">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 6h18M3 14h18M3 18h18"/>
                            </svg>
                            <span class="text-sm font-medium">{{ __('محفظة') }}</span>
                        </div>
                    </label>
                </div>
                @error('payment_method') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                @else
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl">
                    <p class="text-amber-700 text-sm">{{ __('سيتم إنشاء فاتورة مستحقة. يمكن الدفع لاحقًا.') }}</p>
                </div>
                @endif
            </div>
            @endif

            <div class="flex justify-between mt-8">
                <button wire:click="previousStep"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    {{ __('السابق') }}
                </button>
                <button wire:click="confirm" wire:loading.attr="disabled"
                        class="inline-flex items-center gap-2 px-8 py-3 min-h-16 bg-green-600 text-white rounded-lg hover:bg-green-700 text-base font-bold transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirm">{{ __('تأكيد التسجيل') }}</span>
                    <span wire:loading wire:target="confirm">
                        <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                    </span>
                    <span wire:loading wire:target="confirm">{{ __('جارٍ التسجيل...') }}</span>
                </button>
            </div>
        </div>
        @endif

        {{-- Step 4: Success --}}
        @if($currentStep === 4)
        <div class="text-center py-8">
            <div class="w-20 h-20 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-6 animate-bounce">
                <svg class="w-10 h-10 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-2xl font-bold text-green-700 mb-2">{{ __('تم التسجيل بنجاح!') }}</h2>
            <p class="text-gray-600 mb-6">{{ __('تم تسجيل المشترك في البرنامج بنجاح') }}</p>

            <div class="flex items-center justify-center gap-4 mt-6">
                <a href="{{ route('receptionist.dashboard') }}" wire:navigate
                   class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
                    {{ __('العودة للاستقبال') }}
                </a>
                <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate
                   class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-base font-medium transition-colors">
                    {{ __('تسجيل آخر') }}
                </a>
            </div>

            {{-- Navigation Links --}}
            <div class="flex items-center justify-center gap-3 mt-4">
                @if($created_participant_uuid)
                <a href="{{ route('participants.show', $created_participant_uuid) }}" wire:navigate
                   class="inline-flex items-center gap-2 px-4 py-2.5 min-h-[44px] border border-blue-300 rounded-lg text-sm font-medium text-blue-700 hover:bg-blue-50 active:bg-blue-100 transition-colors">
                    <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    {{ __('عرض المشترك') }}
                </a>
                @endif
                @if($created_invoice_uuid)
                <a href="{{ route('invoices.show', $created_invoice_uuid) }}" wire:navigate
                   class="inline-flex items-center gap-2 px-4 py-2.5 min-h-[44px] border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
                    <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    {{ __('عرض الفاتورة') }}
                </a>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>
