<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسجيل لاعب سابق') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('تسجيل لاعب جديد لم يكن في النظام وتسوية الفواتير السابقة') }}</p>
        </div>
        <a href="{{ route('receptionist.dashboard') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ __('إلغاء') }}
        </a>
    </div>

    {{-- Flash Messages --}}
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm">{{ session('error') }}</div>
    @endif
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">{{ session('success') }}</div>
    @endif

    {{-- Step Indicator --}}
    @if($currentStep < 6)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php
                $steps = [
                    1 => 'بيانات اللاعب',
                    2 => 'ولي الأمر',
                    3 => 'اختيار البرنامج',
                    4 => 'الشهور المستحقة',
                    5 => 'الدفع والتأكيد',
                ];
            @endphp
            @foreach($steps as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <button wire:click="goToStep({{ $num }})" @if($num >= $currentStep) disabled @endif
                        class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors
                        {{ $num === $currentStep ? 'bg-indigo-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $currentStep)
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs font-medium hidden sm:inline
                        {{ $num === $currentStep ? 'text-indigo-600' : '' }}
                        {{ $num < $currentStep ? 'text-green-600' : '' }}
                        {{ $num > $currentStep ? 'text-gray-400' : '' }}">
                        {{ __($label) }}
                    </span>
                </button>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">

        {{-- Step 1: Participant 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-4">
                {{-- Name --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم اللاعب بالكامل') }} *</label>
                    <input type="text" wire:model="participant_name_ar"
                           class="w-full px-4 py-3 min-h-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-base @error('participant_name_ar') border-red-500 @enderror"
                           placeholder="{{ __('الاسم رباعي') }}">
                    @error('participant_name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- National ID --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model.live.debounce.500ms="participant_national_id" dir="ltr" maxlength="14"
                           class="w-full px-4 py-3 min-h-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-base font-mono @error('participant_national_id') border-red-500 @enderror"
                           placeholder="29901011234567">
                    @if($participant_nid_decoded)
                    <p class="mt-1 text-xs text-green-600">{{ __('تم استخراج تاريخ الميلاد والنوع تلقائياً') }}</p>
                    @endif
                    @error('participant_national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Date of Birth --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="participant_date_of_birth" dir="ltr"
                           class="w-full px-4 py-3 min-h-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-base @error('participant_date_of_birth') border-red-500 @enderror"
                           {{ $participant_nid_decoded ? 'disabled' : '' }}>
                    @error('participant_date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Gender --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('النوع') }} *</label>
                    <div class="flex gap-4">
                        <label class="relative cursor-pointer flex-1">
                            <input type="radio" wire:model="participant_gender" value="male" class="peer sr-only" {{ $participant_nid_decoded ? 'disabled' : '' }}>
                            <div class="p-3 min-h-14 flex items-center justify-center border border-gray-300 rounded-xl transition-all text-sm font-medium
                                        peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 hover:border-gray-400">
                                {{ __('ذكر') }}
                            </div>
                        </label>
                        <label class="relative cursor-pointer flex-1">
                            <input type="radio" wire:model="participant_gender" value="female" class="peer sr-only" {{ $participant_nid_decoded ? 'disabled' : '' }}>
                            <div class="p-3 min-h-14 flex items-center justify-center border border-gray-300 rounded-xl transition-all text-sm font-medium
                                        peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 hover:border-gray-400">
                                {{ __('أنثى') }}
                            </div>
                        </label>
                    </div>
                </div>

                {{-- Phone --}}
                <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-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-base"
                           placeholder="01012345678">
                </div>

                {{-- 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-indigo-500 text-sm"
                              placeholder="{{ __('حساسية، إصابات سابقة، أمراض مزمنة...') }}"></textarea>
                </div>
            </div>

            <div class="flex justify-end mt-8">
                <button wire:click="nextStep" @if(!$participant_name_ar) disabled @endif
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-base font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                    {{ __('التالي') }}
                    <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 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-4">
                {{-- Guardian Name --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم ولي الأمر') }} *</label>
                    <input type="text" wire:model="guardian_name_ar"
                           class="w-full px-4 py-3 min-h-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-base @error('guardian_name_ar') border-red-500 @enderror"
                           placeholder="{{ __('الاسم بالكامل') }}">
                    @error('guardian_name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Guardian Phone --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف ولي الأمر') }} *</label>
                    <input type="tel" wire:model="guardian_phone" dir="ltr"
                           class="w-full px-4 py-3 min-h-14 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-base @error('guardian_phone') border-red-500 @enderror"
                           placeholder="01012345678">
                    @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-2">{{ __('صلة القرابة') }} *</label>
                    <div class="grid grid-cols-3 gap-2">
                        @foreach(['father' => 'أب', 'mother' => 'أم', 'brother' => 'أخ', 'sister' => 'أخت', 'uncle' => 'عم/خال', 'other' => 'أخرى'] as $key => $label)
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="guardian_relation" value="{{ $key }}" class="peer sr-only">
                            <div class="p-2.5 flex items-center justify-center border border-gray-300 rounded-lg transition-all text-xs font-medium
                                        peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-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>

            <div class="flex justify-between mt-8">
                <button wire:click="previousStep"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium">
                    <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" @if(!$guardian_name_ar || !$guardian_phone) disabled @endif
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-base font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    {{ __('التالي') }}
                    <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 --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('النشاط') }}</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @foreach($activities as $activity)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model.live="selected_activity_id" value="{{ $activity->id }}" class="peer sr-only">
                        <div class="p-4 min-h-14 border border-gray-200 rounded-xl text-center transition-all
                                    peer-checked:border-indigo-500 peer-checked:bg-indigo-50 hover:border-gray-300">
                            <p class="font-medium text-gray-800 text-sm">{{ $activity->name_ar }}</p>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('selected_activity_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Program --}}
            @if($selected_activity_id)
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('البرنامج') }}</label>
                @if($programs->isEmpty())
                <p class="text-sm text-gray-500 p-4 bg-gray-50 rounded-lg">{{ __('لا توجد برامج متاحة لهذا النشاط') }}</p>
                @else
                <div class="space-y-2">
                    @foreach($programs as $program)
                    <label class="relative cursor-pointer block">
                        <input type="radio" wire:model.live="selected_program_id" value="{{ $program->id }}" class="peer sr-only">
                        <div class="p-4 min-h-14 border border-gray-200 rounded-xl transition-all
                                    peer-checked:border-indigo-500 peer-checked:bg-indigo-50 hover:border-gray-300">
                            <p class="font-medium text-gray-800">{{ $program->name_ar }}</p>
                            @if($program->description)
                            <p class="text-xs text-gray-500 mt-1">{{ Str::limit($program->description, 80) }}</p>
                            @endif
                        </div>
                    </label>
                    @endforeach
                </div>
                @endif
                @error('selected_program_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            @endif

            <div class="flex justify-between mt-8">
                <button wire:click="previousStep"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium">
                    <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" @if(!$selected_program_id) disabled @endif
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-base font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    {{ __('التالي') }}
                    <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: Months Owed --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الشهور المستحقة') }}</h2>

            {{-- Start Date --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('تاريخ البدء الفعلي') }}</label>
                <input type="date" wire:model.live="actual_start_date" dir="ltr" max="{{ now()->toDateString() }}"
                       class="w-full max-w-xs px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-base">
                <p class="text-xs text-gray-500 mt-1">{{ __('التاريخ اللي اللاعب بدأ فيه فعلياً') }}</p>
                @error('actual_start_date') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Monthly Price Info --}}
            @if($this->monthlyPrice > 0)
            <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
                <span class="text-sm text-blue-800">{{ __('سعر الاشتراك الشهري') }}</span>
                <span class="font-bold text-blue-800" dir="ltr">{{ number_format($this->monthlyPrice / 100, 2) }} {{ __('ج.م') }}</span>
            </div>
            @endif

            {{-- Months Grid --}}
            @if(count($monthStatuses) > 0)
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('حدد حالة كل شهر') }}</label>
                <div class="space-y-2">
                    @foreach($monthStatuses as $monthKey => $status)
                    @php
                        $monthDate = \Carbon\Carbon::parse($monthKey . '-01');
                        $monthLabel = $this->getArabicMonth($monthDate);
                    @endphp
                    <div class="flex items-center justify-between p-3 rounded-lg border
                        {{ $status === 'paid_outside' ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50' }}">
                        <span class="text-sm font-medium text-gray-800">{{ $monthLabel }}</span>
                        <div class="flex items-center gap-2">
                            <button wire:click="setMonthStatus('{{ $monthKey }}', 'unpaid')"
                                    class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors
                                    {{ $status === 'unpaid' ? 'bg-red-600 text-white' : 'bg-white text-red-600 border border-red-300 hover:bg-red-50' }}">
                                {{ __('لم يدفع') }}
                            </button>
                            <button wire:click="setMonthStatus('{{ $monthKey }}', 'paid_outside')"
                                    class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors
                                    {{ $status === 'paid_outside' ? 'bg-green-600 text-white' : 'bg-white text-green-600 border border-green-300 hover:bg-green-50' }}">
                                {{ __('دفع خارج النظام') }}
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Summary --}}
            <div class="p-4 bg-gray-50 border border-gray-200 rounded-xl mb-4">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">{{ __('شهور لم تُدفع') }}</span>
                    <span class="font-bold text-red-700">{{ $this->unpaidMonthsCount }} {{ __('شهر') }}</span>
                </div>
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">{{ __('شهور مدفوعة خارج النظام') }}</span>
                    <span class="font-bold text-green-700">{{ count($monthStatuses) - $this->unpaidMonthsCount }} {{ __('شهر') }}</span>
                </div>
                <div class="border-t border-gray-200 pt-2 mt-2 flex items-center justify-between">
                    <span class="text-base font-bold text-gray-800">{{ __('إجمالي المطلوب') }}</span>
                    <span class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format($this->totalOwed / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
            </div>

            {{-- Admin 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 text-lg font-mono"
                               placeholder="0.00">
                        @if($priceOverrideInput !== '' && $this->totalOwed !== $this->monthlyPrice * $this->unpaidMonthsCount)
                        <p class="mt-1 text-xs text-red-600">
                            {{ __('بدلاً من') }} {{ number_format($this->monthlyPrice * $this->unpaidMonthsCount / 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
            @endif

            <div class="flex justify-between mt-8">
                <button wire:click="previousStep"
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium">
                    <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" @if(!$actual_start_date) disabled @endif
                        class="inline-flex items-center gap-2 px-6 py-3 min-h-14 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-base font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    {{ __('التالي') }}
                    <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 & Confirm --}}
        @if($currentStep === 5)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الدفع والتأكيد') }}</h2>

            {{-- Summary --}}
            <div class="p-5 bg-gray-50 border border-gray-200 rounded-xl mb-6 space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">{{ __('اللاعب') }}</span>
                    <span class="font-medium">{{ $participant_name_ar }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">{{ __('ولي الأمر') }}</span>
                    <span class="font-medium">{{ $guardian_name_ar }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">{{ __('تاريخ البدء') }}</span>
                    <span class="font-medium" dir="ltr">{{ $actual_start_date }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">{{ __('إجمالي الشهور') }}</span>
                    <span class="font-medium">{{ count($monthStatuses) }} {{ __('شهر') }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-600">{{ __('شهور غير مدفوعة') }}</span>
                    <span class="font-bold text-red-700">{{ $this->unpaidMonthsCount }} {{ __('شهر') }}</span>
                </div>
                <div class="border-t border-gray-200 pt-3 flex items-center justify-between">
                    <span class="text-lg font-bold text-gray-800">{{ __('إجمالي المطلوب') }}</span>
                    <span class="text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($this->totalOwed / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                @php $platformFee = app(\App\Domain\Shared\Services\PlatformFeeService::class); @endphp
                @if($platformFee->isActive())
                <div class="border-t border-gray-200 pt-3 flex items-center justify-between text-sm">
                    <span class="text-gray-500">{{ __('رسوم خدمة المنصة') }} ({{ $platformFee->getPercentage() }}%)</span>
                    <span class="font-medium text-gray-600" dir="ltr">{{ number_format($platformFee->calculate(count($monthStatuses) * $this->monthlyPrice) / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                <p class="text-xs text-gray-400 mt-1">{{ __('تُحسب على كل الشهور وتُسجَّل في الشهر الحالي') }}</p>
                @endif
            </div>

            {{-- Pay Now? --}}
            @if($this->unpaidMonthsCount > 0 && $this->totalOwed > 0)
            <div class="mb-6 p-4 border border-gray-200 rounded-xl">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" wire:model.live="pay_now" class="w-5 h-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                    <span class="text-sm font-medium text-gray-800">{{ __('دفع كل المبلغ المستحق الآن') }}</span>
                </label>

                @if($pay_now)
                <div class="mt-4 grid grid-cols-3 sm:grid-cols-4 gap-3">
                    @foreach(['cash' => 'نقدي', 'card' => 'بطاقة', 'bank_transfer' => 'تحويل', 'wallet' => 'محفظة'] as $method => $label)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="payment_method" value="{{ $method }}" class="peer sr-only">
                        <div class="p-3 min-h-12 flex items-center justify-center border border-gray-300 rounded-xl transition-all text-xs font-medium
                                    peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 hover:border-gray-400">
                            {{ __($label) }}
                        </div>
                    </label>
                    @endforeach
                </div>
                @endif
            </div>
            @endif

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

        {{-- Step 6: Success --}}
        @if($currentStep === 6)
        <div class="text-center py-8">
            <div class="w-20 h-20 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-6">
                <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>

            <h2 class="text-2xl font-bold text-green-700 mb-2">{{ __('تم التسجيل بنجاح!') }}</h2>
            <p class="text-gray-600 mb-6">{{ __('تم إنشاء اللاعب وتسجيله بأثر رجعي وإنشاء الفواتير') }}</p>

            <div class="inline-block bg-gray-50 border border-gray-200 rounded-xl p-6 mb-6 text-start">
                <div class="space-y-3">
                    <div>
                        <p class="text-xs text-gray-500">{{ __('اللاعب') }}</p>
                        <p class="font-medium text-gray-800">{{ $participant_name_ar }}</p>
                    </div>
                    @if($participant_number)
                    <div>
                        <p class="text-xs text-gray-500">{{ __('رقم المشترك') }}</p>
                        <p class="font-medium text-gray-800" dir="ltr">{{ $participant_number }}</p>
                    </div>
                    @endif
                    <div>
                        <p class="text-xs text-gray-500">{{ __('البرنامج') }}</p>
                        <p class="font-medium text-gray-800">{{ $enrollment_summary }}</p>
                    </div>
                    <div class="flex gap-6">
                        <div>
                            <p class="text-xs text-gray-500">{{ __('فواتير تم إنشاؤها') }}</p>
                            <p class="text-lg font-bold text-gray-800">{{ $invoices_created }}</p>
                        </div>
                        @if($payments_recorded > 0)
                        <div>
                            <p class="text-xs text-gray-500">{{ __('مدفوعات تم تسجيلها') }}</p>
                            <p class="text-lg font-bold text-green-700">{{ $payments_recorded }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-center gap-4 mt-6">
                @if($participant_uuid)
                <a href="{{ route('participants.show', $participant_uuid) }}" wire:navigate
                   class="inline-flex items-center gap-2 px-6 py-3 min-h-14 border border-indigo-300 text-indigo-700 rounded-lg hover:bg-indigo-50 text-base font-medium">
                    {{ __('عرض المشترك') }}
                </a>
                @endif
                <a href="{{ route('receptionist.retroactive-enrollment') }}" wire:navigate
                   class="inline-flex items-center gap-2 px-6 py-3 min-h-14 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-base font-medium">
                    {{ __('تسجيل آخر') }}
                </a>
            </div>
        </div>
        @endif
    </div>
</div>
