<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
            {{ $editing ? __('تعديل بيانات المشترك') : __('تسجيل مشترك جديد') }}
        </h1>
        <a href="{{ route('participants.list') }}" wire:navigate
           class="text-gray-600 hover:text-gray-800 text-sm">
            {{ __('رجوع للقائمة') }}
        </a>
    </div>

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

    <form wire:submit="save" class="space-y-6">

        {{-- Section 1: Person Info --}}
        @if($editing)
        {{-- Edit mode: show person fields for editing --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <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="name_ar"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                    <input type="text" wire:model="name" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model="national_id" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="date_of_birth" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                    <select wire:model="gender"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror">
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                    @error('gender') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                    <input type="email" wire:model="email" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @elseif(!$person_id)
        {{-- Create mode: new person --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2>

            {{-- Link existing person option --}}
            @if($existingPeople->isNotEmpty())
            <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('أو اختر شخص موجود بالفعل') }}</label>
                <select wire:model.live="person_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{ __('— تسجيل شخص جديد —') }}</option>
                    @foreach($existingPeople as $person)
                    <option value="{{ $person->id }}">
                        {{ $person->name_ar }}
                        @if($person->phone) — {{ $person->phone }} @endif
                    </option>
                    @endforeach
                </select>
            </div>
            @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <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="name_ar"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <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="name" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model="national_id" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="date_of_birth" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                    <select wire:model="gender"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror">
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                    @error('gender') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                    <input type="email" wire:model="email" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @else
        {{-- Create mode: existing person selected --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-2">
                <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('الشخص المحدد') }}</h2>
                <button type="button" wire:click="$set('person_id', null)" class="text-sm text-red-600 hover:text-red-800">
                    {{ __('تغيير') }}
                </button>
            </div>
            <p class="text-gray-600">{{ __('سيتم ربط هذا الشخص بسجل مشترك جديد') }}</p>
        </div>
        @endif

        {{-- Section 2: Participant Info --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('بيانات الاشتراك') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مصدر التسجيل') }} <span class="text-red-500">*</span></label>
                    <select wire:model="registration_source"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('registration_source') border-red-500 @enderror"
                            @if($editing) disabled @endif>
                        <option value="walk_in">{{ __('حضور مباشر') }}</option>
                        <option value="online">{{ __('عبر الإنترنت') }}</option>
                        <option value="referral">{{ __('إحالة') }}</option>
                        <option value="social_media">{{ __('وسائل التواصل') }}</option>
                        <option value="event">{{ __('فعالية') }}</option>
                        <option value="transfer">{{ __('تحويل') }}</option>
                        <option value="other">{{ __('أخرى') }}</option>
                    </select>
                    @error('registration_source') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط الأساسي') }}</label>
                    <select wire:model="primary_activity_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— اختر نشاط —') }}</option>
                        @foreach($activities as $act)
                        <option value="{{ $act->id }}">{{ $act->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label>
                    <select wire:model="skill_level"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="beginner">{{ __('مبتدئ') }}</option>
                        <option value="intermediate">{{ __('متوسط') }}</option>
                        <option value="advanced">{{ __('متقدم') }}</option>
                        <option value="professional">{{ __('محترف') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="membership_type"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="member">{{ __('عضو') }}</option>
                        <option value="non_member">{{ __('غير عضو') }}</option>
                    </select>
                </div>
                @if($membership_type === 'member')
                <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.live.debounce.500ms="membership_id" dir="ltr"
                           placeholder="{{ __('أدخل رقم العضوية') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('membership_id') border-red-500 @enderror">
                    @error('membership_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Sibling confirmation --}}
                @if(!empty($membershipIdSiblings))
                <div class="md:col-span-2">
                    <div class="bg-amber-50 border border-amber-300 rounded-xl p-4">
                        <div class="flex items-start gap-3">
                            <svg class="w-6 h-6 text-amber-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                            </svg>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-amber-800 mb-2">{{ __('رقم العضوية مسجل بالفعل للمشتركين التاليين:') }}</p>
                                @foreach($membershipIdSiblings as $sibling)
                                <div class="flex items-center gap-2 bg-white rounded-lg px-3 py-2 border border-amber-200 mb-1">
                                    <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                    <span class="text-sm font-medium text-gray-800">{{ $sibling['name'] }}</span>
                                </div>
                                @endforeach
                                <p class="text-sm text-amber-700 mt-2 mb-3">{{ __('هل هذا المشترك أخو/أخت المشترك أعلاه؟') }}</p>
                                <div class="flex gap-3">
                                    <button type="button" wire:click="confirmMembershipSibling"
                                            class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition">
                                        {{ __('نعم، أكمل') }}
                                    </button>
                                    <button type="button" wire:click="cancelMembershipSibling"
                                            class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition">
                                        {{ __('لا، غيّر الرقم') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @endif
            </div>
        </div>

        {{-- Section 3: Physical Attributes --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الجسدية') }}</h2>

            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (سم)') }}</label>
                    <input type="number" wire:model="height_cm" dir="ltr" step="0.1" min="50" max="250"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('height_cm') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوزن (كجم)') }}</label>
                    <input type="number" wire:model="weight_kg" dir="ltr" step="0.1" min="10" max="200"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('weight_kg') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم القميص') }}</label>
                    <input type="number" wire:model="jersey_number" dir="ltr" min="0" max="999"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('jersey_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس القميص') }}</label>
                    <input type="text" wire:model="jersey_size" dir="ltr" placeholder="XL"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس الحذاء') }}</label>
                    <input type="text" wire:model="shoe_size" dir="ltr" placeholder="42"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اليد المسيطرة') }}</label>
                    <select wire:model="dominant_hand"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="right">{{ __('يمنى') }}</option>
                        <option value="left">{{ __('يسرى') }}</option>
                        <option value="both">{{ __('كلتاهما') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القدم المسيطرة') }}</label>
                    <select wire:model="dominant_foot"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="right">{{ __('يمنى') }}</option>
                        <option value="left">{{ __('يسرى') }}</option>
                        <option value="both">{{ __('كلتاهما') }}</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Section 4: Medical --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الطبية') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div class="min-h-[44px] flex items-center gap-3">
                    <input type="checkbox" wire:model="medical_clearance" id="medical_clearance"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="medical_clearance" class="text-sm font-medium text-gray-700">{{ __('موافقة طبية') }}</label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ انتهاء الموافقة الطبية') }}</label>
                    <input type="date" wire:model="medical_clearance_expires" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('medical_clearance_expires') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Section 5: Guardian Assignment --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ولي الأمر') }}</h2>

            @if($editing)
            <div class="mb-4">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model.live="createNewGuardian"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <span class="text-sm font-medium text-gray-700">{{ __('تسجيل ولي أمر جديد') }}</span>
                </label>
            </div>

            @if($createNewGuardian)
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 p-4 bg-blue-50 rounded-lg border border-blue-100">
                <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="new_guardian_name"
                           placeholder="{{ __('الاسم بالكامل') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('new_guardian_name') border-red-500 @enderror">
                    @error('new_guardian_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <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="new_guardian_phone" dir="ltr"
                           placeholder="{{ __('رقم الهاتف') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('new_guardian_phone') border-red-500 @enderror">
                    @error('new_guardian_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            @else
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اختر ولي أمر') }}</label>
                    <select wire:model.live="primary_guardian_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— بدون ولي أمر —') }}</option>
                        @foreach($guardians as $guardian)
                        <option value="{{ $guardian->id }}">
                            {{ $guardian->name_ar }}
                            @if($guardian->phone) — {{ $guardian->phone }} @endif
                        </option>
                        @endforeach
                    </select>
                </div>
                @if($primary_guardian_id)
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف ولي الأمر') }}</label>
                    <input type="text" wire:model="guardian_phone" dir="ltr"
                           placeholder="{{ __('رقم الهاتف') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('guardian_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
            @endif
            @else
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ولي الأمر الأساسي') }}</label>
                    <select wire:model="primary_guardian_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— بدون ولي أمر —') }}</option>
                        @foreach($guardians as $guardian)
                        <option value="{{ $guardian->id }}">
                            {{ $guardian->name_ar }}
                            @if($guardian->phone) — {{ $guardian->phone }} @endif
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            @endif
        </div>

        {{-- Free Player Toggle --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <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>

        {{-- Section 6: Notes --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ملاحظات') }}</h2>

            <textarea wire:model="notes" rows="3"
                      class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
        </div>

        {{-- Submit --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('participants.list') }}" wire:navigate
               class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
                {{ __('إلغاء') }}
            </a>
            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
                <span wire:loading.remove wire:target="save">
                    {{ $editing ? __('حفظ التعديلات') : __('تسجيل المشترك') }}
                </span>
                <span wire:loading wire:target="save">
                    {{ __('جارٍ الحفظ...') }}
                </span>
            </button>
        </div>
    </form>
</div>
