<div>

    {{-- Header — compact on mobile --}}
    <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 — Block Wizard --}}
    @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>
        <p class="text-gray-500 text-sm mb-6">{{ __('يجب إصلاح المشاكل التالية قبل استخدام معالج التسجيل:') }}</p>
        <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 < 6)
    @php
        $steps = [
            1 => 'بيانات ولي الأمر',
            2 => 'بيانات المشترك',
            3 => 'اختيار البرنامج',
            4 => 'مراجعة وتأكيد',
            5 => 'الدفع',
        ];
    @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 }} / 5</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 / 5) * 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: Guardian Info --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('بيانات ولي الأمر') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <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="guardian_name_ar"
                           class="w-full px-4 py-3 min-h-16 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>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                    <input type="text" wire:model="guardian_name" dir="ltr"
                           class="w-full px-4 py-3 min-h-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="Guardian name">
                </div>

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

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model="guardian_national_id" dir="ltr"
                           class="w-full px-4 py-3 min-h-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="00000000000000" maxlength="14">
                    @error('guardian_national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <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-3 sm:grid-cols-5 gap-3">
                        @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-4 py-3 min-h-16 flex items-center justify-center border border-gray-300 rounded-lg text-center text-sm font-medium transition-all
                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700
                                        hover:border-gray-400">
                                {{ __($label) }}
                            </div>
                        </label>
                        @endforeach
                    </div>
                    @error('guardian_relation') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            {{-- 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="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-medium">
                                    {{ __('مشترك') }}: {{ $duplicate['participant_number'] }}
                                </span>
                                @endif
                                <span class="inline-flex items-center gap-1 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="inline-flex items-center gap-2 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-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: Participant Info --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('بيانات المشترك (اللاعب)') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <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="participant_name_ar"
                           class="w-full px-4 py-3 min-h-16 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>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                    <input type="text" wire:model="participant_name" dir="ltr"
                           class="w-full px-4 py-3 min-h-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="Player / participant name">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }} <span class="text-red-500">*</span></label>
                    <input type="date" wire:model="participant_date_of_birth" dir="ltr"
                           class="w-full px-4 py-3 min-h-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg">
                    @error('participant_date_of_birth') <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="grid grid-cols-2 gap-3">
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="participant_gender" value="male" class="peer sr-only">
                            <div class="px-4 py-3 min-h-16 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">
                            <div class="px-4 py-3 min-h-16 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>

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

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي للمشترك') }}</label>
                    <input type="text" wire:model="participant_national_id" dir="ltr"
                           class="w-full px-4 py-3 min-h-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
                           placeholder="00000000000000" maxlength="14">
                    @error('participant_national_id') <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-16 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-16 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>

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

                <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="3"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              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-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: Program Selection --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('اختيار البرنامج') }}</h2>

            {{-- Activity Selection --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر النشاط') }}</label>
                {{-- Mobile: horizontal scrollable pills --}}
                <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-16 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>

            {{-- Program Selection --}}
            @if($selected_activity_id)
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر البرنامج') }}</label>
                @if($programs->isEmpty())
                <div class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                    </svg>
                    <p>{{ __('لا يوجد برامج متاحة لهذا النشاط') }}</p>
                </div>
                @else
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @foreach($programs as $program)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="selected_program_id" value="{{ $program->id }}" class="peer sr-only">
                        <div class="p-5 min-h-16 border border-gray-300 rounded-xl transition-all
                                    peer-checked:border-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->name)
                            <p class="text-xs text-gray-500 mt-0.5" dir="ltr">{{ $program->name }}</p>
                            @endif
                            @if($program->description)
                            <p class="text-sm text-gray-600 mt-2">{{ Str::limit($program->description, 80) }}</p>
                            @endif
                        </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 4: Review --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة وتأكيد') }}</h2>

            <div class="space-y-4">
                {{-- 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(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">{{ $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>
                        @if($guardian_national_id)
                        <div>
                            <span class="text-gray-500">{{ __('الرقم القومي') }}:</span>
                            <span class="font-medium text-gray-800 ms-1" dir="ltr">{{ $guardian_national_id }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Participant 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">{{ $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_phone)
                        <div>
                            <span class="text-gray-500">{{ __('الهاتف') }}:</span>
                            <span class="font-medium text-gray-800 ms-1" dir="ltr">{{ $participant_phone }}</span>
                        </div>
                        @endif
                        @if($participant_national_id)
                        <div>
                            <span class="text-gray-500">{{ __('الرقم القومي') }}:</span>
                            <span class="font-medium text-gray-800 ms-1" dir="ltr">{{ $participant_national_id }}</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>
                            @if($membership_type === 'member' && $membership_id)
                                <span class="text-gray-500 ms-1">({{ $membership_id }})</span>
                            @endif
                        </div>
                        @if($participant_medical_notes)
                        <div class="col-span-2">
                            <span class="text-gray-500">{{ __('ملاحظات طبية') }}:</span>
                            <span class="font-medium text-gray-800 ms-1">{{ $participant_medical_notes }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Program 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(3)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تعديل') }}</button>
                    </div>
                    @if($this->selectedProgram)
                    <div class="text-sm">
                        <p class="font-medium text-gray-800">{{ $this->selectedProgram->name_ar }}</p>
                        @if($this->selectedProgram->activity)
                        <p class="text-gray-500 mt-1">{{ __('النشاط') }}: {{ $this->selectedProgram->activity->name_ar }}</p>
                        @endif
                        @if($this->selectedProgramFee > 0)
                        <div class="mt-3 space-y-1 text-sm">
                            <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>
                        </div>
                        @else
                        <p class="mt-2 text-gray-500">{{ __('بدون رسوم') }}</p>
                        @endif
                    </div>
                    @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 flex items-center gap-2">
                            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                            </svg>
                            {{ __('بيع سريع (اختياري)') }}
                        </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>

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

                    {{-- Cart items --}}
                    @if(count($hotbuyCart) > 0)
                    <div class="space-y-2">
                        @foreach($hotbuyCart as $key => $cartItem)
                        <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-200">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">{{ $cartItem['name_ar'] }}</p>
                                <p class="text-xs text-gray-500" dir="ltr">{{ number_format($cartItem['price'] / 100, 2) }} {{ __('ج.م') }}</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] - 1 }})"
                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">−</button>
                                <span class="w-8 text-center text-sm font-bold">{{ $cartItem['quantity'] }}</span>
                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] + 1 }})"
                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">+</button>
                                <button type="button" wire:click="removeHotbuyItem('{{ $key }}')"
                                        class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center hover:bg-red-200 ms-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-xs text-gray-500">{{ __('يمكنك إضافة منتجات أو طقم (يونيفورم، كرة، إلخ) على نفس الفاتورة') }}</p>
                    @endif
                </div>

                {{-- Grand Total Summary --}}
                @if($this->selectedProgramFee > 0 || $this->hotbuyTotal > 0)
                <div class="p-4 bg-green-50 rounded-xl border border-green-200">
                    <div class="space-y-1.5 text-sm">
                        @if($this->selectedProgramFee > 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->selectedProgramFee / 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->totalWithFee / 100, 2) }} {{ __('ج.م') }}</span>
                        </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 5: Payment --}}
        @if($currentStep === 5)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الدفع') }}</h2>

            @if($this->totalWithFee > 0)
            <div class="p-4 bg-blue-50 border border-blue-200 rounded-xl mb-6 space-y-2">
                @if($this->selectedProgramFee > 0)
                <div class="flex items-center justify-between text-sm">
                    <span class="text-blue-600">{{ __('رسوم البرنامج') }}</span>
                    <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endif
                @if($this->hotbuyTotal > 0)
                <div class="flex items-center justify-between text-sm">
                    <span class="text-blue-600">{{ __('منتجات إضافية') }} ({{ count($hotbuyCart) }})</span>
                    <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->hotbuyTotal / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endif
                @if($this->platformFee > 0)
                <div class="flex items-center justify-between text-sm">
                    <span class="text-blue-600">{{ __('رسوم الخدمة') }}</span>
                    <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->platformFee / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endif
                <div class="flex items-center justify-between pt-2 border-t border-blue-200">
                    <span class="text-blue-700 font-semibold">{{ __('الإجمالي المطلوب') }}</span>
                    <span class="text-xl font-bold text-blue-800" dir="ltr">
                        {{ number_format($this->totalWithFee / 100, 2) }} {{ __('ج.م') }}
                    </span>
                </div>
            </div>
            @else
            <div class="p-4 bg-gray-50 border border-gray-200 rounded-xl mb-6">
                <p class="text-gray-600 text-sm">{{ __('لا يوجد سعر محدد لهذا البرنامج حالياً — سيتم التسجيل بدون فاتورة.') }}</p>
            </div>
            @endif

            <div class="space-y-6">
                {{-- Pay now toggle --}}
                <div class="flex items-center gap-4">
                    <label class="relative cursor-pointer" dir="ltr">
                        <input type="checkbox" wire:model.live="pay_now" class="peer sr-only">
                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6"></div>
                    </label>
                    <span class="text-base font-medium text-gray-700">{{ __('الدفع الآن') }}</span>
                </div>

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

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

        {{-- Step 6: Success + Printable Invoice --}}
        @if($currentStep === 6)
        <div>
            {{-- Success Banner --}}
            <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>

            {{-- Printable Invoice --}}
            @if($this->invoiceForPrint)
            @php
                $inv = $this->invoiceForPrint;
                $branding = app(\App\Domain\Shared\Services\SettingsService::class);
                $brandLogo = $branding->get('branding.logo');
                $academyName = app('current_academy')->name_ar ?? '';
                $branch = \App\Domain\Identity\Models\Branch::where('academy_id', app('current_academy')?->id)->first();
                $receiptFooter = $branding->get('branding.receipt_footer_text', '');
            @endphp
            <div id="printable-invoice" class="bg-white border border-gray-300 rounded-xl p-4 sm:p-6 max-w-2xl mx-auto print:border-0 print:shadow-none print:rounded-none print:p-0 print:max-w-full">
                {{-- Invoice Header with Branding --}}
                <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>
                            @if($branch->address)
                            <p class="text-xs text-gray-400">{{ $branch->address }}</p>
                            @endif
                            @if($branch->phone)
                            <p class="text-xs text-gray-400" dir="ltr">{{ $branch->phone }}</p>
                            @endif
                            @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>
                        <p class="text-gray-500">{{ __('الاستحقاق') }}: {{ $inv->due_date?->format('Y/m/d') ?? now()->addDays(7)->format('Y/m/d') }}</p>
                    </div>
                </div>

                {{-- Customer Info --}}
                <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>

                {{-- Items Table --}}
                <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>
                            <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->unit_price / 100, 2) }}</td>
                            <td class="py-3 text-end" dir="ltr">{{ number_format($item->total_amount / 100, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

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

                {{-- Payment status badge --}}
                <div class="mt-4 text-center">
                    @if($payment_recorded)
                    <span class="inline-flex items-center gap-1 px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-bold">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {{ __('تم الدفع') }}
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1 px-4 py-2 bg-amber-100 text-amber-800 rounded-full text-sm font-bold">
                        {{ __('مستحق الدفع') }}
                    </span>
                    @endif
                </div>

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

            {{-- Actions --}}
            <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 active:bg-gray-950 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 active:bg-blue-800 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 active:bg-gray-300 text-base font-medium transition-colors">
                    {{ __('العودة للاستقبال') }}
                </a>
            </div>

            {{-- Navigation Links --}}
            <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 active:bg-blue-100 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    {{ __('عرض المشترك') }}
                </a>
                @endif
                @if($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 active:bg-gray-100 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    {{ __('عرض الفاتورة') }}
                </a>
                @endif
            </div>
            @else
            {{-- No invoice (free program) --}}
            <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>

            {{-- Navigation Links --}}
            @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 active:bg-blue-100 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    {{ __('عرض المشترك') }}
                </a>
            </div>
            @endif
            @endif
        </div>
        @endif
    </div>

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