<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">{{ __('تسجيل في مجموعة') }}</h1>
        <a href="{{ route('enrollments.list') }}" wire:navigate
           class="text-sm text-gray-600 hover:text-gray-800">
            {{ __('العودة للقائمة') }}
        </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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <form wire:submit="save" class="space-y-6">
            {{-- Participant Selection --}}
            <div>
                <label for="participant_id" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('المشترك') }} <span class="text-red-500">*</span>
                </label>
                <select wire:model="participant_id" id="participant_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 @error('participant_id') border-red-500 @enderror">
                    <option value="">{{ __('اختر المشترك...') }}</option>
                    @foreach($participants as $participant)
                    <option value="{{ $participant->id }}">
                        {{ $participant->person?->name_ar }}
                        @if($participant->participant_number)
                            ({{ $participant->participant_number }})
                        @endif
                    </option>
                    @endforeach
                </select>
                @error('participant_id')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Group Selection --}}
            <div>
                <label for="training_group_id" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('المجموعة') }} <span class="text-red-500">*</span>
                </label>
                <select wire:model="training_group_id" id="training_group_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 @error('training_group_id') border-red-500 @enderror">
                    <option value="">{{ __('اختر المجموعة...') }}</option>
                    @foreach($groups as $group)
                    <option value="{{ $group->id }}">
                        {{ $group->name_ar }}
                        @if($group->program)
                            — {{ $group->program->name_ar }}
                        @endif
                        ({{ $group->current_count ?? 0 }}/{{ $group->max_capacity ?? '—' }})
                    </option>
                    @endforeach
                </select>
                @error('training_group_id')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Start Date --}}
            <div>
                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('تاريخ البدء') }}
                </label>
                <input type="date" wire:model="start_date" id="start_date" 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('start_date') border-red-500 @enderror">
                <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام تاريخ بدء المجموعة') }}</p>
                @error('start_date')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Payment Status --}}
            <div>
                <label for="payment_status" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('حالة الدفع') }} <span class="text-red-500">*</span>
                </label>
                <select wire:model="payment_status" id="payment_status"
                        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('payment_status') border-red-500 @enderror">
                    @foreach($paymentOptions as $value => $label)
                    <option value="{{ $value }}">{{ __($label) }}</option>
                    @endforeach
                </select>
                @error('payment_status')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Notes --}}
            <div>
                <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('ملاحظات') }}
                </label>
                <textarea wire:model="notes" id="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 @error('notes') border-red-500 @enderror"
                          placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
                @error('notes')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Submit --}}
            <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('enrollments.list') }}" wire:navigate
                   class="text-center px-4 sm:px-6 py-2.5 text-sm text-gray-700 hover:bg-gray-100 rounded-lg border border-gray-300 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 text-sm font-medium disabled:opacity-50">
                    <span wire:loading.remove wire:target="save">{{ __('تسجيل') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ التسجيل...') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>
