<div>

    {{-- Header --}}
    <div class="flex items-center justify-between mb-4 sm:mb-6 print:hidden">
        <div class="min-w-0">
            <h1 class="text-lg sm:text-2xl font-bold text-gray-800 truncate">{{ __('تسجيل جديد') }}</h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-0.5 hidden sm:block">{{ __('تسجيل مشترك جديد مع ولي الأمر والبرنامج') }}</p>
        </div>
        <a href="{{ route('receptionist.dashboard') }}" wire:navigate
           class="inline-flex items-center justify-center w-10 h-10 sm:w-auto sm:h-auto sm:gap-2 sm:px-4 sm:py-2 text-gray-600 bg-gray-100 rounded-full sm:rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors shrink-0">
            <svg class="w-5 h-5 sm:w-4 sm: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>
            <span class="hidden sm:inline">{{ __('العودة للاستقبال') }}</span>
        </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

    {{-- System Pre-flight Errors --}}
    @if(!empty($systemErrors))
    <div class="bg-white rounded-xl shadow-sm border border-red-300 p-8 text-center">
        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-red-600" 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 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
            </svg>
        </div>
        <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('لا يمكن بدء التسجيل') }}</h2>
        <ul class="text-start text-sm space-y-3 max-w-md mx-auto">
            @foreach($systemErrors as $error)
            <li class="flex items-start gap-3 p-3 bg-red-50 rounded-lg border border-red-100">
                <svg class="w-5 h-5 text-red-500 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="M6 18L18 6M6 6l12 12"/>
                </svg>
                <span class="text-red-700">{{ $error }}</span>
            </li>
            @endforeach
        </ul>
        <div class="mt-8">
            <a href="{{ route('receptionist.dashboard') }}" 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 --}}
    @if($currentStep < 7)
    @php
        $steps = [
            1 => 'بيانات اللاعب',
            2 => 'بيانات ولي الأمر',
            3 => 'حساب ولي الأمر',
            4 => 'اختيار البرنامج',
            5 => 'مراجعة وتأكيد',
            6 => 'الدفع',
        ];
    @endphp

    {{-- Mobile: compact progress bar --}}
    <div class="sm:hidden bg-white rounded-xl shadow-sm border border-gray-200 p-3 mb-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-bold text-blue-700">{{ __($steps[$currentStep]) }}</span>
            <span class="text-xs text-gray-500" dir="ltr">{{ $currentStep }} / 6</span>
        </div>
        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full bg-blue-600 rounded-full transition-all duration-300" style="width: {{ ($currentStep / 6) * 100 }}%"></div>
        </div>
    </div>

    {{-- Desktop: full stepper --}}
    <div class="hidden sm:block bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @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-blue-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
                        {{ $num === $currentStep ? 'text-blue-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 pb-28 sm:pb-6">

        {{-- ===================== STEP 1: PLAYER DATA ===================== --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('بيانات اللاعب') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('أدخل الرقم القومي لملء البيانات تلقائياً') }}</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                {{-- Name (Arabic) --}}
                <div class="sm:col-span-2">
                    <label 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.400ms="participant_name_ar"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="{{ __('الاسم رباعي') }}">
                    @error('participant_name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- NID + Foreign toggle --}}
                <div class="sm:col-span-2">
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-sm font-medium text-gray-700">{{ __('الرقم القومي') }}</label>
                        {{-- Foreign toggle --}}
                        <label class="flex items-center gap-2 cursor-pointer select-none">
                            <span class="text-xs text-gray-500">{{ __('أجنبي') }}</span>
                            <div class="relative" dir="ltr">
                                <input type="checkbox" wire:model.live="participant_is_foreign" class="peer sr-only">
                                <div class="w-10 h-6 rounded-full bg-gray-300 peer-checked:bg-amber-500 transition-colors
                                            after:content-[''] after:absolute after:top-1 after:left-1 after:w-4 after:h-4
                                            after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-4"></div>
                            </div>
                        </label>
                    </div>
                    <div class="relative">
                        <input type="text" wire:model.live="participant_national_id" dir="ltr"
                               class="w-full px-4 py-3 min-h-[52px] border rounded-lg focus:ring-2 focus:border-blue-500 text-lg font-mono
                                      {{ $participant_nid_decoded ? 'border-green-400 bg-green-50 focus:ring-green-400' : 'border-gray-300 focus:ring-blue-500' }}
                                      {{ $participant_is_foreign ? 'opacity-60' : '' }}"
                               placeholder="{{ $participant_is_foreign ? __('رقم جواز السفر (اختياري)') : '00000000000000' }}"
                               maxlength="{{ $participant_is_foreign ? '30' : '14' }}">
                        @if($participant_nid_decoded)
                        <div class="absolute inset-y-0 end-3 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-green-500" 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>
                        @endif
                    </div>
                    @if($participant_nid_decoded)
                    <p class="mt-1 text-xs text-green-600 flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ __('تم استخراج البيانات من الرقم القومي') }}
                    </p>
                    @endif
                    @error('participant_national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Date of Birth (locked when NID decoded) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('تاريخ الميلاد') }} <span class="text-red-500">*</span>
                        @if($participant_nid_decoded)
                        <span class="inline-flex items-center gap-1 text-xs text-green-600 ms-1 font-normal">
                            <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            {{ __('مقفل') }}
                        </span>
                        @endif
                    </label>
                    <input type="date" wire:model="participant_date_of_birth" dir="ltr"
                           @if($participant_nid_decoded) readonly @endif
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg
                                  {{ $participant_nid_decoded ? 'bg-gray-50 text-gray-500 cursor-not-allowed' : '' }}">
                    @error('participant_date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Gender (locked when NID decoded) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('الجنس') }} <span class="text-red-500">*</span>
                        @if($participant_nid_decoded)
                        <span class="inline-flex items-center gap-1 text-xs text-green-600 ms-1 font-normal">
                            <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            {{ __('مقفل') }}
                        </span>
                        @endif
                    </label>
                    <div class="grid grid-cols-2 gap-3 {{ $participant_nid_decoded ? 'pointer-events-none opacity-70' : '' }}">
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="participant_gender" value="male" class="peer sr-only" @if($participant_nid_decoded) disabled @endif>
                            <div class="px-4 py-3 min-h-[52px] flex items-center justify-center border border-gray-300 rounded-lg text-center text-base font-medium transition-all
                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:border-gray-400">
                                {{ __('ذكر') }}
                            </div>
                        </label>
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="participant_gender" value="female" class="peer sr-only" @if($participant_nid_decoded) disabled @endif>
                            <div class="px-4 py-3 min-h-[52px] flex items-center justify-center border border-gray-300 rounded-lg text-center text-base font-medium transition-all
                                        peer-checked:border-pink-500 peer-checked:bg-pink-50 peer-checked:text-pink-700 hover:border-gray-400">
                                {{ __('أنثى') }}
                            </div>
                        </label>
                    </div>
                    @error('participant_gender') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Governorate (locked when NID decoded) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('المحافظة') }}
                        @if($participant_nid_decoded)
                        <span class="inline-flex items-center gap-1 text-xs text-green-600 ms-1 font-normal">
                            <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            {{ __('مقفل') }}
                        </span>
                        @endif
                    </label>
                    <input type="text" wire:model="participant_governorate"
                           @if($participant_nid_decoded) readonly @endif
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg
                                  {{ $participant_nid_decoded ? 'bg-gray-50 text-gray-500 cursor-not-allowed' : '' }}"
                           placeholder="{{ __('المحافظة') }}">
                </div>

                {{-- Phone (optional) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف (اختياري)') }}</label>
                    <input type="tel" wire:model="participant_phone" dir="ltr"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="01xxxxxxxxx">
                    @error('participant_phone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Membership Type --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model.live="membership_type" value="non_member" class="peer sr-only">
                            <div class="px-4 py-3 min-h-[52px] flex items-center justify-center border border-gray-300 rounded-lg text-center text-base font-medium transition-all
                                        peer-checked:border-amber-500 peer-checked:bg-amber-50 peer-checked:text-amber-700 hover:border-gray-400">
                                {{ __('غير عضو') }}
                            </div>
                        </label>
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model.live="membership_type" value="member" class="peer sr-only">
                            <div class="px-4 py-3 min-h-[52px] flex items-center justify-center border border-gray-300 rounded-lg text-center text-base font-medium transition-all
                                        peer-checked:border-green-500 peer-checked:bg-green-50 peer-checked:text-green-700 hover:border-gray-400">
                                {{ __('عضو نادي') }}
                            </div>
                        </label>
                    </div>
                    @error('membership_type') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                @if($membership_type === 'member')
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم عضوية النادي') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="membership_id" dir="ltr"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-lg"
                           placeholder="{{ __('أدخل رقم العضوية') }}">
                    @error('membership_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                {{-- Medical notes --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات طبية (اختياري)') }}</label>
                    <textarea wire:model="participant_medical_notes" rows="2"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                              placeholder="{{ __('حساسية، أدوية، إصابات سابقة...') }}"></textarea>
                    @error('participant_medical_notes') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-end z-30">
                <button wire:click="nextStep" wire:loading.attr="disabled"
                        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-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 2: GUARDIAN ===================== --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-1">{{ __('بيانات ولي الأمر') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('الهاتف هو وسيلة التواصل الرئيسية') }}</p>

            {{-- Toggle: search existing or new --}}
            @if(!$guardianSelected)
            <div class="flex gap-3 mb-6">
                <button wire:click="$set('searchExistingGuardian', false)" type="button"
                        class="flex-1 px-4 py-3 text-sm font-medium rounded-lg border transition-colors {{ !$searchExistingGuardian ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-300 text-gray-600 hover:border-gray-400' }}">
                    {{ __('ولي أمر جديد') }}
                </button>
                <button wire:click="$set('searchExistingGuardian', true)" type="button"
                        class="flex-1 px-4 py-3 text-sm font-medium rounded-lg border transition-colors {{ $searchExistingGuardian ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-300 text-gray-600 hover:border-gray-400' }}">
                    {{ __('بحث عن ولي أمر مسجل') }}
                </button>
            </div>
            @endif

            {{-- Search existing guardian --}}
            @if($searchExistingGuardian && !$guardianSelected)
            <div class="mb-6">
                <input type="text" wire:model.live.debounce.300ms="guardianSearchQuery"
                       placeholder="{{ __('ابحث بالاسم أو رقم الهاتف...') }}"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-lg">
                @if(!empty($guardianSearchResults))
                <div class="mt-3 space-y-2 max-h-60 overflow-y-auto">
                    @foreach($guardianSearchResults as $result)
                    <button wire:click="selectExistingGuardian({{ $result['id'] }})" type="button"
                            class="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-start">
                        <div>
                            <p class="font-medium text-gray-800">{{ $result['name'] }}</p>
                            <div class="flex items-center gap-3 text-sm text-gray-500 mt-0.5">
                                <span dir="ltr">{{ $result['phone'] }}</span>
                                @if($result['children_count'] > 0)
                                <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">{{ $result['children_count'] }} {{ __('أبناء') }}</span>
                                @endif
                            </div>
                        </div>
                        <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </button>
                    @endforeach
                </div>
                @elseif(strlen($guardianSearchQuery) >= 2)
                <p class="mt-3 text-sm text-gray-500 text-center py-4">{{ __('لا توجد نتائج') }}</p>
                @endif
            </div>
            @endif

            {{-- Selected guardian display --}}
            @if($guardianSelected)
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center justify-between">
                <div>
                    <p class="font-semibold text-green-800">{{ $guardian_name_ar }}</p>
                    <p class="text-sm text-green-600" dir="ltr">{{ $guardian_phone }}</p>
                </div>
                <button wire:click="clearSelectedGuardian" type="button" class="text-sm text-green-700 hover:text-green-900 font-medium underline">
                    {{ __('تغيير') }}
                </button>
            </div>
            @endif

            {{-- Guardian form --}}
            @if(!$searchExistingGuardian || $guardianSelected)
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 {{ $guardianSelected ? 'opacity-60 pointer-events-none' : '' }}">

                {{-- Name (auto-filled hint) --}}
                <div class="sm:col-span-2">
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-sm font-medium text-gray-700">{{ __('اسم ولي الأمر') }} <span class="text-red-500">*</span></label>
                        @if($guardian_name_ar && $participant_name_ar)
                        <span class="text-xs text-blue-500">{{ __('مأخوذ من اسم اللاعب — يمكنك التعديل') }}</span>
                        @endif
                    </div>
                    <input type="text" wire:model="guardian_name_ar"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="{{ __('اسم ولي الأمر') }}">
                    @error('guardian_name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Phone (required) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف') }} <span class="text-red-500">*</span></label>
                    <input type="tel" wire:model="guardian_phone" dir="ltr"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="01xxxxxxxxx">
                    @error('guardian_phone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Relation --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('صلة القرابة') }} <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                        @foreach($relationOptions as $value => $label)
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="guardian_relation" value="{{ $value }}" class="peer sr-only">
                            <div class="px-2 py-2.5 flex items-center justify-center border border-gray-300 rounded-lg text-center text-sm font-medium transition-all
                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:border-gray-400">
                                {{ __($label) }}
                            </div>
                        </label>
                        @endforeach
                    </div>
                    @error('guardian_relation') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            @endif

            {{-- Duplicate Detection Warning --}}
            @if(!empty($potentialDuplicates))
            <div class="mt-6 p-4 bg-amber-50 border border-amber-300 rounded-xl">
                <div class="flex items-start gap-3 mb-4">
                    <svg class="w-6 h-6 text-amber-600 shrink-0 mt-0.5" 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 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                    <div>
                        <h3 class="text-base font-bold text-amber-800">{{ __('تنبيه: تم العثور على سجلات مشابهة') }}</h3>
                        <p class="text-sm text-amber-700 mt-1">{{ __('قد يكون ولي الأمر مسجلاً بالفعل:') }}</p>
                    </div>
                </div>
                <div class="space-y-3">
                    @foreach($potentialDuplicates as $duplicate)
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-amber-200">
                        <div>
                            <p class="font-semibold text-gray-800">{{ $duplicate['name'] }}</p>
                            <div class="flex items-center gap-3 mt-1 text-sm text-gray-500">
                                @if($duplicate['phone'])
                                <span dir="ltr">{{ $duplicate['phone'] }}</span>
                                @endif
                                @if($duplicate['has_participant'])
                                <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-medium">{{ $duplicate['participant_number'] }}</span>
                                @endif
                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{{ $duplicate['confidence'] }}%</span>
                            </div>
                        </div>
                        <button wire:click="useExistingPerson({{ $duplicate['person_id'] }})"
                                class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors whitespace-nowrap">
                            {{ __('استخدام') }}
                        </button>
                    </div>
                    @endforeach
                </div>
                <div class="mt-4 flex justify-end">
                    <button wire:click="proceedDespiteDuplicates"
                            class="px-4 py-2 text-sm font-medium text-amber-700 bg-amber-100 border border-amber-300 rounded-lg hover:bg-amber-200 transition-colors">
                        {{ __('تجاهل والمتابعة كجديد') }}
                    </button>
                </div>
            </div>
            @endif

            <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
                <button wire:click="previousStep"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm: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="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-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: PARENT ACCOUNT ===================== --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('حساب ولي الأمر') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('إنشاء حساب لمتابعة الاشتراك والحضور') }}</p>

            <div class="flex items-center gap-4 mb-6 p-4 bg-blue-50 border border-blue-200 rounded-xl">
                <label class="relative cursor-pointer shrink-0" dir="ltr">
                    <input type="checkbox" wire:model.live="createParentAccount" class="peer sr-only">
                    <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-blue-600 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>
                <div>
                    <span class="text-base font-medium text-gray-800">{{ __('تفعيل بوابة أولياء الأمور') }}</span>
                    <p class="text-xs text-gray-500 mt-0.5">{{ __('يمكنك إنشاؤه لاحقاً إذا لم يكن هناك بريد إلكتروني الآن') }}</p>
                </div>
            </div>

            @if($createParentAccount)
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }} <span class="text-red-500">*</span></label>
                    <input type="email" wire:model="parentEmail" dir="ltr"
                           class="w-full px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="parent@example.com">
                    @error('parentEmail') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور') }} <span class="text-red-500">*</span></label>
                    <div class="flex gap-3">
                        <input type="text" wire:model="parentPassword" dir="ltr"
                               class="flex-1 px-4 py-3 min-h-[52px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg font-mono"
                               placeholder="{{ __('كلمة المرور') }}">
                        <button type="button" wire:click="generateParentPassword"
                                class="inline-flex items-center gap-2 px-4 py-3 bg-gray-100 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors whitespace-nowrap text-sm font-medium">
                            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            {{ __('توليد') }}
                        </button>
                    </div>
                    @error('parentPassword') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            @else
            <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-700">
                {{ __('يمكنك إنشاء الحساب لاحقاً من إدارة المستخدمين') }}
            </div>
            @endif

            <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
                <button wire:click="previousStep"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm: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="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-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 4: PROGRAM SELECTION ===================== --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('اختيار البرنامج') }}</h2>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر النشاط') }}</label>
                <div class="flex gap-2.5 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 sm:flex-wrap sm:overflow-visible scrollbar-hide">
                    @foreach($activities as $activity)
                    <label class="relative cursor-pointer shrink-0 sm:shrink">
                        <input type="radio" wire:model.live="selected_activity_id" value="{{ $activity->id }}" class="peer sr-only">
                        <div class="px-5 py-3 sm:p-4 sm:min-h-[52px] flex items-center justify-center border border-gray-300 rounded-full sm:rounded-xl text-center font-medium transition-all whitespace-nowrap
                                    peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-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>

            @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">
                    <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 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:shadow-sm hover:border-gray-400">
                            <h4 class="font-bold text-gray-800">{{ $program->name_ar }}</h4>
                            @if($program->description)
                            <p class="text-sm text-gray-600 mt-1">{{ Str::limit($program->description, 80) }}</p>
                            @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="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
                <button wire:click="previousStep"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm: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="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-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 5: REVIEW ===================== --}}
        @if($currentStep === 5)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة وتأكيد') }}</h2>

            <div class="space-y-4">

                {{-- Player Summary --}}
                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-semibold text-gray-700">{{ __('اللاعب') }}</h3>
                        <button wire:click="goToStep(1)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تعديل') }}</button>
                    </div>
                    <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">{{ $participant_name_ar }}</span></div>
                        <div><span class="text-gray-500">{{ __('تاريخ الميلاد') }}:</span> <span class="font-medium text-gray-800 ms-1" dir="ltr">{{ $participant_date_of_birth }}</span></div>
                        <div><span class="text-gray-500">{{ __('الجنس') }}:</span> <span class="font-medium text-gray-800 ms-1">{{ $participant_gender === 'male' ? __('ذكر') : __('أنثى') }}</span></div>
                        @if($participant_governorate)
                        <div><span class="text-gray-500">{{ __('المحافظة') }}:</span> <span class="font-medium text-gray-800 ms-1">{{ $participant_governorate }}</span></div>
                        @endif
                        <div>
                            <span class="text-gray-500">{{ __('العضوية') }}:</span>
                            <span class="font-medium ms-1 {{ $membership_type === 'member' ? 'text-green-700' : 'text-amber-700' }}">
                                {{ $membership_type === 'member' ? __('عضو') : __('غير عضو') }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Guardian Summary --}}
                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-semibold text-gray-700">{{ __('ولي الأمر') }}</h3>
                        <button wire:click="goToStep(2)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تعديل') }}</button>
                    </div>
                    <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">{{ $guardian_name_ar }}</span></div>
                        <div><span class="text-gray-500">{{ __('الهاتف') }}:</span> <span class="font-medium text-gray-800 ms-1" dir="ltr">{{ $guardian_phone }}</span></div>
                        <div><span class="text-gray-500">{{ __('الصلة') }}:</span> <span class="font-medium text-gray-800 ms-1">{{ __($relationOptions[$guardian_relation] ?? $guardian_relation) }}</span></div>
                    </div>
                </div>

                {{-- Program Summary + Fee --}}
                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-semibold text-gray-700">{{ __('البرنامج') }}</h3>
                        <button wire:click="goToStep(4)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تعديل') }}</button>
                    </div>
                    @if($this->selectedProgram)
                    <p class="text-sm font-medium text-gray-800">{{ $this->selectedProgram->name_ar }}</p>
                    @if($this->selectedProgram->activity)
                    <p class="text-xs text-gray-500 mt-1">{{ $this->selectedProgram->activity->name_ar }}</p>
                    @endif
                    @if($this->selectedProgramFee > 0)
                    <div class="mt-3 space-y-1 text-sm border-t border-gray-200 pt-3">
                        @if($this->proratedProgramFee->applied)
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">{{ __('السعر الأصلي') }}:</span>
                            <span class="text-gray-400 line-through" dir="ltr">{{ number_format($this->proratedProgramFee->originalAmount / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-blue-600 font-medium">{{ __('رسوم البرنامج') }} <span class="text-xs font-normal">({{ $this->proratedProgramFee->description }})</span>:</span>
                            <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->proratedProgramFee->proratedAmount / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @else
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">{{ __('رسوم البرنامج') }}:</span>
                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                    </div>
                    @endif
                    @endif
                </div>

                {{-- Hot-Buy: Quick product/kit sale --}}
                <div class="p-4 bg-amber-50 rounded-xl border border-amber-200" x-data="{ showSearch: false }">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-semibold text-gray-700">{{ __('بيع سريع (اختياري)') }}</h3>
                        <button type="button" @click="showSearch = !showSearch"
                                class="text-sm text-amber-700 hover:text-amber-900 font-medium">
                            <span x-show="!showSearch">{{ __('إضافة منتج') }}</span>
                            <span x-show="showSearch" x-cloak>{{ __('إغلاق') }}</span>
                        </button>
                    </div>
                    <div x-show="showSearch" x-cloak x-transition class="mb-3">
                        <input type="text" wire:model.live.debounce.300ms="hotbuy_search"
                               class="w-full px-4 py-3 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 text-sm"
                               placeholder="{{ __('ابحث بالاسم أو الكود...') }}">
                        @if(count($this->hotbuyResults) > 0)
                        <div class="mt-2 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                            @foreach($this->hotbuyResults as $result)
                            <button type="button" wire:click="addHotbuyItem({{ $result['id'] }}, '{{ $result['type'] }}')"
                                    class="w-full flex items-center justify-between px-4 py-3 text-start hover:bg-amber-50 border-b border-gray-100 last:border-0 transition-colors">
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $result['name_ar'] }}</p>
                                    <p class="text-xs text-gray-500">{{ $result['type'] === 'kit' ? __('طقم') : __('منتج') }}@if($result['sku']) — {{ $result['sku'] }}@endif</p>
                                </div>
                                <span class="text-sm font-bold text-green-700" dir="ltr">{{ number_format($result['price'] / 100, 2) }} {{ __('ج.م') }}</span>
                            </button>
                            @endforeach
                        </div>
                        @elseif(strlen($hotbuy_search) >= 2)
                        <p class="mt-2 text-xs text-gray-500 text-center">{{ __('لا توجد نتائج') }}</p>
                        @endif
                    </div>
                    @if(count($hotbuyCart) > 0)
                    <div class="space-y-2">
                        @foreach($hotbuyCart as $key => $cartItem)
                        <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-200">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">{{ $cartItem['name_ar'] }}</p>
                                <p class="text-xs text-gray-500" dir="ltr">{{ number_format($cartItem['price'] / 100, 2) }} {{ __('ج.م') }}</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] - 1 }})"
                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">−</button>
                                <span class="w-8 text-center text-sm font-bold">{{ $cartItem['quantity'] }}</span>
                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] + 1 }})"
                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">+</button>
                                <button type="button" wire:click="removeHotbuyItem('{{ $key }}')"
                                        class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center hover:bg-red-200 ms-2">
                                    <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>
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-xs text-gray-500">{{ __('يمكنك إضافة منتجات أو طقم على نفس الفاتورة') }}</p>
                    @endif
                </div>

                {{-- Grand Total --}}
                @if($this->totalWithFee > 0)
                <div class="p-4 bg-green-50 rounded-xl border border-green-200">
                    <div class="space-y-1.5 text-sm">
                        @if($this->proratedProgramFee->proratedAmount > 0)
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">{{ __('رسوم البرنامج') }}</span>
                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->proratedProgramFee->proratedAmount / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        @if($this->hotbuyTotal > 0)
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">{{ __('منتجات إضافية') }}</span>
                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->hotbuyTotal / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        @if($this->platformFee > 0)
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">{{ __('رسوم الخدمة') }}</span>
                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->platformFee / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        <div class="flex items-center justify-between pt-2 border-t border-green-200">
                            <span class="font-bold text-gray-800">{{ __('الإجمالي') }}</span>
                            <span class="font-bold text-green-700 text-lg" dir="ltr">{{ number_format($this->effectiveTotal / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                    </div>
                </div>
                @endif

                {{-- Super Admin Price Override --}}
                @if($isSuperAdmin)
                <div class="border border-dashed border-red-300 rounded-xl overflow-hidden" x-data="{ open: @entangle('priceOverrideEnabled') }">
                    <button type="button" @click="open = !open; $wire.set('priceOverrideEnabled', open)"
                            class="w-full flex items-center justify-between p-4 text-start hover:bg-red-50 transition-colors">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                            </svg>
                            <span class="text-sm font-semibold text-red-700">{{ __('تجاوز السعر (مدير النظام فقط)') }}</span>
                        </div>
                        <svg class="w-4 h-4 text-red-400 transition-transform" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <div x-show="open" x-cloak x-transition class="p-4 pt-0 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ المخصص (ج.م)') }}</label>
                            <input type="number" wire:model.live="priceOverrideInput" dir="ltr" step="0.01" min="0"
                                   class="w-full max-w-xs px-4 py-3 border border-red-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400 text-lg font-mono"
                                   placeholder="0.00">
                            @if($priceOverrideInput !== '' && $this->effectiveTotal !== $this->totalWithFee)
                            <p class="mt-1 text-xs text-red-600">
                                {{ __('بدلاً من') }} {{ number_format($this->totalWithFee / 100, 2) }} {{ __('ج.م') }}
                                ({{ $this->effectiveTotal < $this->totalWithFee ? '-' : '+' }}{{ number_format(abs($this->effectiveTotal - $this->totalWithFee) / 100, 2) }} {{ __('ج.م') }})
                            </p>
                            @endif
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب التعديل (اختياري)') }}</label>
                            <input type="text" wire:model="priceOverrideReason"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 text-sm"
                                   placeholder="{{ __('مثال: خصم خاص، اتفاقية، إلخ') }}">
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
                <button wire:click="previousStep"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm: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="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-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 6: PAYMENT ===================== --}}
        @if($currentStep === 6)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الدفع') }}</h2>

            @if($this->effectiveTotal > 0)
            <div class="p-4 bg-blue-50 border border-blue-200 rounded-xl mb-6">
                <div class="flex items-center justify-between pt-2">
                    <span class="text-blue-700 font-semibold">{{ __('الإجمالي المطلوب') }}</span>
                    <span class="text-xl font-bold text-blue-800" dir="ltr">
                        {{ number_format($this->effectiveTotal / 100, 2) }} {{ __('ج.م') }}
                    </span>
                </div>
                @if($priceOverrideEnabled && $isSuperAdmin && $this->effectiveTotal !== $this->totalWithFee)
                <p class="text-xs text-red-600 mt-1 text-end">{{ __('سعر مُعدَّل من المدير') }}</p>
                @endif
            </div>
            @else
            <div class="p-4 bg-gray-50 border border-gray-200 rounded-xl mb-6">
                <p class="text-gray-600 text-sm">{{ __('لا يوجد سعر محدد — سيتم التسجيل بدون فاتورة.') }}</p>
            </div>
            @endif

            <div class="space-y-6">
                <div class="flex items-center gap-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>
                    <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('طريقة الدفع') }}</label>
                    <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-[64px] 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-[64px] 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-[64px] 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
                </div>
                @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>

            <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
                <button wire:click="previousStep"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm: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="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3.5 sm:py-3 bg-green-600 text-white rounded-xl sm: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 7: SUCCESS ===================== --}}
        @if($currentStep === 7)
        <div>
            <div class="text-center py-6 mb-6">
                <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
                    <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-green-700 mb-1">{{ __('تم التسجيل بنجاح!') }}</h2>
                <p class="text-gray-500 text-sm">{{ __('رقم المشترك') }}: <strong dir="ltr">{{ $participant_number }}</strong></p>
                @if($enrollment_summary)
                <p class="text-gray-500 text-sm mt-1">{{ $enrollment_summary }}</p>
                @endif
            </div>

            @if($this->invoiceForPrint)
            @php
                $inv = $this->invoiceForPrint;
                $branding = app(\App\Domain\Shared\Services\SettingsService::class);
                $brandLogo = $branding->get('branding.logo');
                $academyName = app('current_academy')->name_ar ?? '';
                $branch = \App\Domain\Identity\Models\Branch::where('academy_id', app('current_academy')?->id)->first();
                $receiptFooter = $branding->get('branding.receipt_footer_text', '');
            @endphp
            <div id="printable-invoice" class="bg-white border border-gray-300 rounded-xl p-4 sm:p-6 max-w-2xl mx-auto print:border-0 print:shadow-none print:rounded-none print:p-0 print:max-w-full">
                <div class="flex items-start justify-between border-b border-gray-200 pb-4 mb-4">
                    <div class="flex items-center gap-3">
                        @if($brandLogo)
                        <img src="{{ Storage::disk('public')->url($brandLogo) }}" alt="{{ $academyName }}" class="h-12 sm:h-14 object-contain">
                        @endif
                        <div>
                            <h3 class="text-base sm:text-lg font-bold text-gray-800">{{ $academyName }}</h3>
                            @if($branch)
                            <p class="text-xs text-gray-500">{{ $branch->name_ar }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="text-end text-sm">
                        <p class="font-bold text-gray-700">{{ __('فاتورة') }}</p>
                        <p class="text-gray-500 mt-1 font-mono" dir="ltr">#{{ $inv->number }}</p>
                        <p class="text-gray-500 mt-1">{{ $inv->issue_date?->format('Y/m/d') ?? now()->format('Y/m/d') }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 text-sm mb-6">
                    <div>
                        <p class="text-gray-500 text-xs mb-1">{{ __('المشترك') }}</p>
                        <p class="font-semibold text-gray-800">{{ $participant_name_ar }}</p>
                        @if($participant_number)<p class="text-gray-500" dir="ltr">{{ $participant_number }}</p>@endif
                    </div>
                    <div class="text-end">
                        <p class="text-gray-500 text-xs mb-1">{{ __('ولي الأمر') }}</p>
                        <p class="font-semibold text-gray-800">{{ $inv->contact_name }}</p>
                        <p class="text-gray-500" dir="ltr">{{ $inv->contact_phone }}</p>
                    </div>
                </div>

                <table class="w-full text-sm mb-4">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-start py-2 font-medium text-gray-600">{{ __('البند') }}</th>
                            <th class="text-center py-2 font-medium text-gray-600 w-16">{{ __('الكمية') }}</th>
                            <th class="text-end py-2 font-medium text-gray-600 w-28">{{ __('الإجمالي') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($inv->items as $item)
                        <tr class="border-b border-gray-100">
                            <td class="py-3">{{ $item->description }}</td>
                            <td class="py-3 text-center">{{ $item->quantity }}</td>
                            <td class="py-3 text-end" dir="ltr">{{ number_format($item->total_amount / 100, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="border-t border-gray-200 pt-3 space-y-2 text-sm max-w-xs ms-auto">
                    @if($inv->discount_amount > 0)
                    <div class="flex justify-between text-green-600">
                        <span>{{ __('خصم') }}</span>
                        <span dir="ltr">-{{ number_format($inv->discount_amount / 100, 2) }}</span>
                    </div>
                    @endif
                    @if($inv->service_fee_amount > 0)
                    <div class="flex justify-between">
                        <span class="text-gray-500">{{ __('رسوم الخدمة') }}</span>
                        <span dir="ltr">{{ number_format($inv->service_fee_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between pt-2 border-t border-gray-300 text-base">
                        <span class="font-bold text-gray-800">{{ __('الإجمالي') }}</span>
                        <span class="font-bold text-gray-800" dir="ltr">{{ number_format($inv->total_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @if($payment_recorded)
                    <div class="flex justify-between text-green-700">
                        <span class="font-semibold">{{ __('المدفوع') }}</span>
                        <span class="font-semibold" dir="ltr">{{ number_format($inv->total_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">{{ __('المتبقي') }}</span>
                        <span class="font-bold text-green-700" dir="ltr">0.00 {{ __('ج.م') }}</span>
                    </div>
                    @else
                    <div class="flex justify-between text-red-700">
                        <span class="font-semibold">{{ __('المتبقي') }}</span>
                        <span class="font-bold" dir="ltr">{{ number_format($inv->due_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @endif
                </div>

                <div class="mt-4 text-center">
                    @if($payment_recorded)
                    <span class="inline-flex items-center gap-1 px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-bold">
                        <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>
                        {{ __('تم الدفع') }}
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1 px-4 py-2 bg-amber-100 text-amber-800 rounded-full text-sm font-bold">
                        {{ __('مستحق الدفع') }}
                    </span>
                    @endif
                </div>

                @if($receiptFooter)
                <div class="mt-4 pt-3 border-t border-gray-200 text-center text-xs text-gray-500">
                    {{ $receiptFooter }}
                </div>
                @endif
            </div>

            <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 mt-6 print:hidden">
                <a href="{{ route('invoices.print', $invoice_uuid) }}" target="_blank"
                   class="inline-flex items-center justify-center gap-2 px-6 py-3 min-h-[48px] bg-gray-800 text-white rounded-lg hover:bg-gray-900 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                    {{ __('طباعة الفاتورة') }}
                </a>
                <a href="{{ route('receptionist.new-registration') }}" wire:navigate
                   class="inline-flex items-center justify-center gap-2 px-6 py-3 min-h-[48px] bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors">
                    {{ __('تسجيل آخر') }}
                </a>
                <a href="{{ route('receptionist.dashboard') }}" wire:navigate
                   class="inline-flex items-center justify-center gap-2 px-6 py-3 min-h-[48px] bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
                    {{ __('العودة للاستقبال') }}
                </a>
            </div>

            <div class="flex items-center justify-center gap-3 mt-4 print:hidden">
                @if($participant_uuid)
                <a href="{{ route('participants.show', $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 transition-colors">
                    {{ __('عرض المشترك') }}
                </a>
                @endif
                @if($invoice_uuid)
                <a href="{{ route('invoices.show', $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 transition-colors">
                    {{ __('عرض الفاتورة') }}
                </a>
                @endif
            </div>

            @else
            <div class="flex items-center justify-center gap-4 mt-6">
                <a href="{{ route('receptionist.new-registration') }}" wire:navigate
                   class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors">
                    {{ __('تسجيل آخر') }}
                </a>
                <a href="{{ route('receptionist.dashboard') }}" 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 text-base font-medium transition-colors">
                    {{ __('العودة للاستقبال') }}
                </a>
            </div>
            @if($participant_uuid)
            <div class="flex items-center justify-center gap-3 mt-4">
                <a href="{{ route('participants.show', $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 transition-colors">
                    {{ __('عرض المشترك') }}
                </a>
            </div>
            @endif
            @endif
        </div>
        @endif

    </div>

    @endif {{-- end systemErrors else block --}}
</div>
