<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.live.debounce.500ms="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>

                {{-- Sibling confirmation prompt --}}
                @if(!empty($membershipIdSiblings))
                <div class="sm:col-span-2">
                    <div class="bg-amber-50 border border-amber-300 rounded-xl p-4">
                        <div class="flex items-start gap-3">
                            <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 class="flex-1">
                                <p class="text-sm font-semibold text-amber-800 mb-2">{{ __('رقم العضوية مسجل بالفعل للمشتركين التاليين:') }}</p>
                                <div class="space-y-2 mb-3">
                                    @foreach($membershipIdSiblings as $sibling)
                                    <div class="flex items-center gap-2 bg-white rounded-lg px-3 py-2 border border-amber-200">
                                        <svg class="w-4 h-4 text-amber-600" 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>
                                        <span class="text-sm font-medium text-gray-800">{{ $sibling['name'] }}</span>
                                    </div>
                                    @endforeach
                                </div>
                                <p class="text-sm text-amber-700 mb-3">
                                    {{ __('هل') }} <span class="font-bold">{{ $participant_name_ar }}</span> {{ __('أخو/أخت المشترك أعلاه ويشتركوا في نفس رقم العضوية؟') }}
                                </p>
                                <div class="flex gap-3">
                                    <button type="button" wire:click="confirmMembershipSibling"
                                            class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition">
                                        {{ __('نعم، إخوة — أكمل التسجيل') }}
                                    </button>
                                    <button type="button" wire:click="cancelMembershipSibling"
                                            class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition">
                                        {{ __('لا — غيّر رقم العضوية') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @endif

                {{-- Free Player Toggle --}}
                <div class="sm:col-span-2">
                    <label class="flex items-center gap-3 cursor-pointer p-3 rounded-lg border border-gray-200 hover:border-emerald-300 transition-colors"
                           :class="$wire.is_free && 'border-emerald-500 bg-emerald-50'">
                        <input type="checkbox" wire:model.live="is_free"
                               class="w-5 h-5 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/>
                            </svg>
                            <span class="text-sm font-medium text-gray-700">{{ __('لاعب مجاني') }}</span>
                            <span class="text-xs text-gray-500">{{ __('(معفى من الرسوم)') }}</span>
                        </div>
                    </label>
                </div>

                {{-- 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>

                {{-- Occupation & Workplace --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المهنة') }}</label>
                        <input type="text" wire:model="guardian_occupation"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                               placeholder="{{ __('مثال: مهندس، طبيب، معلم...') }}">
                        @error('guardian_occupation') <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">{{ __('جهة العمل') }}</label>
                        <input type="text" wire:model="guardian_workplace"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                               placeholder="{{ __('اسم الشركة أو المؤسسة') }}">
                        @error('guardian_workplace') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>
                </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

                    {{-- Enrollment Start Date --}}
                    <div class="mt-3 pt-3 border-t border-gray-200">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ بداية اللعب') }}</label>
                        <input type="date" wire:model.live="enrollment_start_date" dir="ltr"
                               class="w-full sm:w-auto px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-500 mt-1">{{ __('اتركه فارغاً لاستخدام تاريخ اليوم. حدد التاريخ إذا بدأ اللاعب قبل اليوم لحساب الأيام المتبقية بدقة.') }}</p>
                    </div>

                    @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>

                    {{-- Essential product quick-buttons --}}
                    @php $essentials = $this->essentialProducts; @endphp
                    @if(count($essentials) > 0)
                    <div class="mb-3">
                        <p class="text-xs font-medium text-amber-700 mb-2">{{ __('منتجات أساسية') }}</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach($essentials as $ep)
                            @php $epKey = "product_{$ep['id']}"; @endphp
                            <button type="button" wire:click="addHotbuyItem({{ $ep['id'] }}, 'product')"
                                    class="flex items-center gap-1.5 px-3 py-2 rounded-lg border text-sm font-medium transition-colors
                                        {{ isset($hotbuyCart[$epKey]) ? 'bg-amber-600 text-white border-amber-700' : 'bg-white text-amber-800 border-amber-300 hover:bg-amber-100' }}">
                                @if(isset($hotbuyCart[$epKey]))
                                <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.5" d="M5 13l4 4L19 7"/></svg>
                                @endif
                                <span>{{ $ep['name_ar'] }}</span>
                                <span class="text-xs opacity-75" dir="ltr">{{ number_format($ep['price'] / 100, 2) }}</span>
                            </button>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <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-3">
                        @foreach($hotbuyCart as $key => $cartItem)
                        @php
                            $isAnnual = ($cartItem['billing_cycle'] ?? 'one_time') === 'annual';
                            $cartPlans = ($isAnnual && $cartItem['type'] === 'product') ? ($cartItem['plans'] ?? []) : [];
                        @endphp
                        <div class="bg-white rounded-xl border {{ $isAnnual ? 'border-purple-200' : 'border-gray-200' }} overflow-hidden">
                            <div class="flex items-center justify-between p-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2">
                                        <p class="text-sm font-medium text-gray-800">{{ $cartItem['name_ar'] }}</p>
                                        @if($isAnnual)
                                        <span class="px-1.5 py-0.5 text-xs rounded bg-purple-100 text-purple-700 font-medium">{{ __('سنوي') }}</span>
                                        @endif
                                    </div>
                                    <p class="text-xs text-gray-500 mt-0.5" dir="ltr">{{ number_format($cartItem['price'] / 100, 2) }} {{ __('ج.م') }}
                                        @if($isAnnual) × 1 {{ __('سنة') }} @endif
                                    </p>
                                </div>
                                <div class="flex items-center gap-2">
                                    @if(!$isAnnual)
                                    <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>
                                    @endif
                                    <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 {{ $isAnnual ? '' : '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>

                            {{-- Installment plan picker for annual products --}}
                            @if($isAnnual)
                            <div class="px-3 pb-3 border-t border-purple-100 pt-2 bg-purple-50">
                                <p class="text-xs font-medium text-purple-700 mb-2">{{ __('طريقة الدفع') }}</p>
                                <div class="flex flex-wrap gap-2">
                                    {{-- Full payment option --}}
                                    <button type="button" wire:click="setHotbuyPlan('{{ $key }}', null)"
                                            class="px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors
                                                {{ is_null($cartItem['plan_id']) ? 'bg-purple-600 text-white border-purple-700' : 'bg-white text-gray-700 border-gray-300 hover:border-purple-400' }}">
                                        {{ __('دفع كامل') }}
                                        <span class="opacity-75 ms-1" dir="ltr">{{ number_format($cartItem['price'] / 100, 2) }}</span>
                                    </button>

                                    @foreach($cartPlans as $plan)
                                    @php
                                        $planTotal = $cartItem['price'];
                                        $downPct = $plan['down_payment_pct'];
                                        $downAmt = $downPct > 0
                                            ? (int) ceil($planTotal * $downPct / 100)
                                            : (int) ceil($planTotal / $plan['installments']);
                                    @endphp
                                    <button type="button" wire:click="setHotbuyPlan('{{ $key }}', {{ $plan['id'] }})"
                                            class="px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors
                                                {{ $cartItem['plan_id'] === $plan['id'] ? 'bg-purple-600 text-white border-purple-700' : 'bg-white text-gray-700 border-gray-300 hover:border-purple-400' }}">
                                        {{ $plan['label_ar'] }}
                                        <span class="opacity-75 ms-1" dir="ltr">{{ number_format($downAmt / 100, 2) }} {{ __('مقدم') }}</span>
                                    </button>
                                    @endforeach

                                    @if(count($cartPlans) === 0)
                                    <span class="text-xs text-gray-400 italic">{{ __('لا توجد خطط تقسيط محددة') }}</span>
                                    @endif
                                </div>

                                @if(!is_null($cartItem['plan_id']))
                                @php
                                    $selPlan = collect($cartPlans)->firstWhere('id', $cartItem['plan_id']);
                                @endphp
                                @if($selPlan)
                                @php
                                    $tp = $cartItem['price'];
                                    $explicit = $selPlan['installment_amounts'] ?? [];
                                    $n = $selPlan['installments'];

                                    // Build schedule: explicit where set, auto for the rest
                                    $explicitSum = 0;
                                    $explicitCount = 0;
                                    $slots = [];
                                    for ($si = 0; $si < $n; $si++) {
                                        $v = $explicit[$si] ?? null;
                                        if ($v !== null && $v > 0) {
                                            $slots[$si] = (int) $v;
                                            $explicitSum += (int) $v;
                                            $explicitCount++;
                                        } else {
                                            $slots[$si] = null;
                                        }
                                    }
                                    $autoCount = $n - $explicitCount;
                                    $autoAmt = $autoCount > 0 ? (int) ceil(max(0, $tp - $explicitSum) / $autoCount) : 0;
                                    for ($si = 0; $si < $n; $si++) {
                                        if ($slots[$si] === null) $slots[$si] = $autoAmt;
                                    }

                                    // Check if all regular amounts (after slot 0) are the same
                                    $dp = $slots[0];
                                    $regulars = array_slice($slots, 1);
                                    $allSame = count(array_unique($regulars)) <= 1;
                                @endphp
                                <div class="mt-2 p-2 bg-white rounded-lg border border-purple-200 text-xs text-purple-800">
                                    <span class="font-semibold">{{ $selPlan['label_ar'] }}</span>:
                                    {{ __('مقدم') }} <span dir="ltr">{{ number_format($dp / 100, 2) }} {{ __('ج.م') }}</span>
                                    @if(count($regulars) > 0)
                                        @if($allSame)
                                            + {{ count($regulars) }} {{ __('قسط') }} × <span dir="ltr">{{ number_format(($regulars[0] ?? 0) / 100, 2) }} {{ __('ج.م') }}</span>
                                            ({{ $selPlan['frequency_label'] }})
                                        @else
                                            {{-- Show each installment amount individually --}}
                                            @foreach($regulars as $ri => $ramt)
                                            + {{ __('قسط') }} {{ $ri + 1 }}: <span dir="ltr">{{ number_format($ramt / 100, 2) }} {{ __('ج.م') }}</span>
                                            @endforeach
                                            ({{ $selPlan['frequency_label'] }})
                                        @endif
                                    @endif
                                </div>

                                {{-- How many installments to pay now --}}
                                @php
                                    $currentToPay = $this->hotbuyInstallmentsToPay[$key] ?? 1;
                                    $payNowSum = array_sum(array_slice($slots, 0, $currentToPay));
                                @endphp
                                <div class="mt-2 p-2 bg-green-50 rounded-lg border border-green-200">
                                    <p class="text-xs font-medium text-green-800 mb-1.5">{{ __('عدد الأقساط المدفوعة الآن') }}</p>
                                    <div class="flex flex-wrap gap-1.5">
                                        @for($qi = 1; $qi <= $n; $qi++)
                                        @php $qSum = array_sum(array_slice($slots, 0, $qi)); @endphp
                                        <button type="button" wire:click="setInstallmentsToPay('{{ $key }}', {{ $qi }})"
                                                class="px-2.5 py-1 text-xs font-medium rounded-md border transition-colors
                                                    {{ $currentToPay === $qi ? 'bg-green-600 text-white border-green-700' : 'bg-white text-gray-700 border-gray-300 hover:border-green-400' }}">
                                            {{ $qi }} {{ $qi === 1 ? __('قسط') : __('أقساط') }}
                                            <span class="opacity-75 ms-0.5" dir="ltr">({{ number_format($qSum / 100, 2) }})</span>
                                        </button>
                                        @endfor
                                    </div>
                                    <p class="text-[10px] text-green-600 mt-1.5">
                                        {{ __('المطلوب دفعه الآن') }}: <strong dir="ltr">{{ number_format($payNowSum / 100, 2) }} {{ __('ج.م') }}</strong>
                                        @if($currentToPay < $n)
                                        — {{ __('المتبقي') }}: <span dir="ltr">{{ number_format(($tp - $payNowSum) / 100, 2) }} {{ __('ج.م') }}</span> ({{ $n - $currentToPay }} {{ __('أقساط') }})
                                        @endif
                                    </p>
                                </div>
                                @endif
                                @endif
                            </div>
                            @endif
                        </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-4">{{ __('الدفع') }}</h2>

            {{-- Total Banner --}}
            @if($this->effectiveTotal > 0)
            <div class="p-4 bg-blue-50 border border-blue-200 rounded-xl mb-5">
                <div class="flex items-center justify-between">
                    <span class="text-blue-700 font-semibold text-sm">{{ __('الإجمالي المطلوب') }}</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-5">
                <p class="text-gray-600 text-sm">{{ __('لا يوجد سعر محدد — سيتم التسجيل بدون فاتورة.') }}</p>
            </div>
            @endif

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

            {{-- Pay Now Toggle --}}
            @if($this->effectiveTotal > 0)
            <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>
            @endif

            @if(!$pay_now)
            <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl">
                <p class="text-amber-700 text-sm">{{ __('سيتم إنشاء فاتورة مستحقة. يمكن الدفع لاحقًا من شاشة تحصيل المدفوعات.') }}</p>
            </div>
            @endif

            @if($pay_now)

            {{-- Payment Mode Selector (full / partial / split) --}}
            <div class="grid grid-cols-3 gap-2">
                <button type="button"
                    wire:click="$set('partial_payment', false); $set('split_payment', false)"
                    class="py-2.5 px-3 rounded-lg border text-sm font-medium transition-colors
                        {{ !$partial_payment && !$split_payment ? 'bg-green-600 text-white border-green-600' : 'bg-white text-gray-600 border-gray-300 hover:border-gray-400' }}">
                    {{ __('كامل') }}
                </button>
                <button type="button"
                    wire:click="$set('partial_payment', true); $set('split_payment', false)"
                    class="py-2.5 px-3 rounded-lg border text-sm font-medium transition-colors
                        {{ $partial_payment ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-gray-400' }}">
                    {{ __('جزئي') }}
                </button>
                <button type="button"
                    wire:click="$set('split_payment', true); $set('partial_payment', false)"
                    class="py-2.5 px-3 rounded-lg border text-sm font-medium transition-colors
                        {{ $split_payment ? 'bg-purple-600 text-white border-purple-600' : 'bg-white text-gray-600 border-gray-300 hover:border-gray-400' }}">
                    {{ __('مقسم') }}
                </button>
            </div>

            {{-- ===== PARTIAL AMOUNT INPUT ===== --}}
            @if($partial_payment)
            <div class="p-4 bg-orange-50 border border-orange-200 rounded-xl space-y-3">
                <p class="text-sm text-orange-700 font-medium">{{ __('أدخل المبلغ المدفوع الآن — الباقي يبقى مستحقاً على الفاتورة') }}</p>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ المدفوع') }} ({{ __('ج.م') }})</label>
                    <input type="number" step="0.01" min="0.01" wire:model.live="partial_amount_input"
                        class="w-full rounded-lg border-gray-300 focus:ring-orange-500 focus:border-orange-500"
                        placeholder="{{ number_format($this->effectiveTotal / 100, 2) }}" dir="ltr">
                    @error('partial_amount_input') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @if($partial_amount_input && is_numeric($partial_amount_input) && $this->effectiveTotal > 0)
                @php $remaining = $this->effectiveTotal - (int) round((float) $partial_amount_input * 100); @endphp
                @if($remaining > 0)
                <p class="text-xs text-orange-600">{{ __('المتبقي المستحق') }}: <strong dir="ltr">{{ number_format($remaining / 100, 2) }} {{ __('ج.م') }}</strong></p>
                @endif
                @endif
            </div>
            @endif

            {{-- ===== SPLIT AMOUNT INPUT ===== --}}
            @if($split_payment)
            <div class="p-4 bg-purple-50 border border-purple-200 rounded-xl">
                <p class="text-sm text-purple-700 font-medium mb-3">{{ __('ادفع بطريقتين مختلفتين — مجموعهما يساوي الإجمالي') }}</p>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مبلغ الطريقة الأولى') }} ({{ __('ج.م') }})</label>
                    <input type="number" step="0.01" min="0.01" wire:model.live="split_amount1_input"
                        class="w-full rounded-lg border-gray-300 focus:ring-purple-500"
                        dir="ltr">
                    @error('split_amount1_input') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @if($split_amount1_input && is_numeric($split_amount1_input) && $this->effectiveTotal > 0)
                @php $amount2 = $this->effectiveTotal - (int) round((float) $split_amount1_input * 100); @endphp
                <p class="text-xs text-purple-600 mb-3">{{ __('الطريقة الثانية') }}: <strong dir="ltr">{{ number_format(max(0, $amount2) / 100, 2) }} {{ __('ج.م') }}</strong></p>
                @endif
            </div>
            @endif

            {{-- ===== METHOD PICKER (Method 1) ===== --}}
            @php
                $methods = [
                    'cash'          => ['label' => 'نقدي',              'color' => 'green',  'icon' => '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'],
                    'card'          => ['label' => 'بطاقة بنكية',        'color' => 'blue',   'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
                    'bank_transfer' => ['label' => 'تحويل بنكي',         'color' => 'sky',    'icon' => 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'],
                    'online'        => ['label' => 'إنستاباي / محافظ',  'color' => 'indigo', 'icon' => 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z'],
                    'wallet'        => ['label' => 'محفظة النادي',        'color' => 'purple', 'icon' => 'M3 10h18M3 6h18M3 14h18M3 18h18'],
                    'cheque'        => ['label' => 'شيك',                'color' => 'yellow', 'icon' => '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'],
                    'other'         => ['label' => 'أخرى',               'color' => 'gray',   'icon' => 'M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z'],
                ];
                $colorMap = [
                    'green'  => ['checked' => 'peer-checked:border-green-500 peer-checked:bg-green-50 peer-checked:text-green-700'],
                    'blue'   => ['checked' => 'peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700'],
                    'sky'    => ['checked' => 'peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:text-sky-700'],
                    'indigo' => ['checked' => 'peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700'],
                    'purple' => ['checked' => 'peer-checked:border-purple-500 peer-checked:bg-purple-50 peer-checked:text-purple-700'],
                    'yellow' => ['checked' => 'peer-checked:border-yellow-500 peer-checked:bg-yellow-50 peer-checked:text-yellow-700'],
                    'gray'   => ['checked' => 'peer-checked:border-gray-500 peer-checked:bg-gray-100 peer-checked:text-gray-700'],
                ];
            @endphp

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    {{ $split_payment ? __('طريقة الدفع الأولى') : __('طريقة الدفع') }}
                </label>
                <div class="grid grid-cols-4 sm:grid-cols-7 gap-2">
                    @foreach($methods as $value => $meta)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model.live="payment_method" value="{{ $value }}" class="peer sr-only">
                        <div class="p-2 min-h-[60px] flex flex-col items-center justify-center gap-1 border border-gray-300 rounded-xl transition-all hover:border-gray-400 {{ $colorMap[$meta['color']]['checked'] }}">
                            <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="{{ $meta['icon'] }}"/>
                            </svg>
                            <span class="text-xs font-medium text-center leading-tight">{{ $meta['label'] }}</span>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('payment_method') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- ===== METHOD-SPECIFIC FIELDS (Method 1) ===== --}}
            @if(in_array($payment_method, ['card', 'bank_transfer', 'online']))
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    {{ $payment_method === 'online' ? __('رقم العملية / كود الإنستاباي') : __('رقم العملية / المرجع') }}
                    <span class="text-red-500">*</span>
                </label>
                <input type="text" wire:model="payment_transaction_ref" dir="ltr"
                    class="w-full rounded-lg border-gray-300 focus:ring-blue-500"
                    placeholder="TXN-XXXX">
                @error('payment_transaction_ref') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            @endif

            @if($payment_method === 'cheque')
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الشيك') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="payment_cheque_number" dir="ltr"
                        class="w-full rounded-lg border-gray-300 focus:ring-yellow-500">
                    @error('payment_cheque_number') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البنك') }}</label>
                    <input type="text" wire:model="payment_bank_name"
                        class="w-full rounded-lg border-gray-300 focus:ring-yellow-500">
                </div>
            </div>
            @endif

            @if($payment_method === 'bank_transfer')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البنك') }}</label>
                <input type="text" wire:model="payment_bank_name"
                    class="w-full rounded-lg border-gray-300 focus:ring-sky-500">
            </div>
            @endif

            {{-- ===== SPLIT: METHOD 2 ===== --}}
            @if($split_payment)
            <div class="border-t border-purple-200 pt-4 space-y-3">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('طريقة الدفع الثانية') }}</label>
                <div class="grid grid-cols-4 sm:grid-cols-7 gap-2">
                    @foreach($methods as $value => $meta)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model.live="split_method2" value="{{ $value }}" class="peer sr-only">
                        <div class="p-2 min-h-[60px] flex flex-col items-center justify-center gap-1 border border-gray-300 rounded-xl transition-all hover:border-gray-400 {{ $colorMap[$meta['color']]['checked'] }}">
                            <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="{{ $meta['icon'] }}"/>
                            </svg>
                            <span class="text-xs font-medium text-center leading-tight">{{ $meta['label'] }}</span>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('split_method2') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror

                @if(in_array($split_method2, ['card', 'bank_transfer', 'online']))
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم العملية') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="split_transaction_ref2" dir="ltr"
                        class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="TXN-XXXX">
                    @error('split_transaction_ref2') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                @if($split_method2 === 'cheque')
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الشيك') }} <span class="text-red-500">*</span></label>
                        <input type="text" wire:model="split_cheque_number2" dir="ltr"
                            class="w-full rounded-lg border-gray-300 focus:ring-yellow-500">
                        @error('split_cheque_number2') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم البنك') }}</label>
                        <input type="text" wire:model="split_bank_name2" class="w-full rounded-lg border-gray-300 focus:ring-yellow-500">
                    </div>
                </div>
                @endif
            </div>
            @endif

            {{-- Notes (optional, always available) --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات (اختياري)') }}</label>
                <input type="text" wire:model="payment_notes"
                    class="w-full rounded-lg border-gray-300 focus:ring-gray-400"
                    placeholder="{{ __('أي ملاحظة تريد تسجيلها مع هذا الدفع') }}">
            </div>

            @endif {{-- end pay_now --}}

            </div>{{-- end space-y-5 --}}

            <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 ?? '';
                $activeBranchId = session('active_branch_id') ?? auth()->user()->branch_id;
                $branch = \App\Domain\Identity\Models\Branch::where('academy_id', app('current_academy')?->id)
                    ->when($activeBranchId, fn ($q) => $q->where('id', $activeBranchId))
                    ->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->paid_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @if($inv->due_amount > 0)
                    <div class="flex justify-between text-orange-700">
                        <span class="font-semibold">{{ __('المتبقي') }}</span>
                        <span class="font-bold" dir="ltr">{{ number_format($inv->due_amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @else
                    <div class="flex justify-between">
                        <span class="text-gray-500">{{ __('المتبقي') }}</span>
                        <span class="font-bold text-green-700" dir="ltr">0.00 {{ __('ج.م') }}</span>
                    </div>
                    @endif
                    @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 && $inv->due_amount <= 0)
                    <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>
                    @elseif($payment_recorded && $inv->due_amount > 0)
                    <span class="inline-flex items-center gap-1 px-4 py-2 bg-orange-100 text-orange-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ __('دفع جزئي — متبقي') }} {{ number_format($inv->due_amount / 100, 0) }} {{ __('ج.م') }}
                    </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>
