<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قائمة الانتظار') }}</h1>
        <a href="{{ route('enrollments.list') }}" 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">
            <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="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
            {{ __('كل التسجيلات') }}
        </a>
    </div>

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

    @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

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <input type="text" wire:model.live.debounce.300ms="search"
                       placeholder="{{ __('بحث بالاسم أو رقم المشترك...') }}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            </div>
            <select wire:model.live="programFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                <option value="">{{ __('كل البرامج') }}</option>
                @foreach($programs as $program)
                <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
                @endforeach
            </select>
            <select wire:model.live="groupFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                <option value="">{{ __('كل المجموعات') }}</option>
                @foreach($groups as $group)
                <option value="{{ $group->id }}">{{ $group->name_ar }} ({{ $group->current_count }}/{{ $group->max_capacity }})</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div wire:loading.class="opacity-50 pointer-events-none">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الترتيب') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المشترك') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المجموعة') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('البرنامج') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('السعة') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('تاريخ التسجيل') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الهاتف') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('إجراءات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($enrollments as $index => $enrollment)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-center">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-purple-100 text-purple-700 text-xs font-bold">
                                {{ $enrollments->firstItem() + $index }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="font-medium text-gray-800">
                                {{ $enrollment->participant?->person?->name_ar ?? '—' }}
                            </span>
                            @if($enrollment->participant?->participant_number)
                            <p class="text-xs text-gray-500" dir="ltr">
                                {{ $enrollment->participant->participant_number }}
                            </p>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $enrollment->group?->name_ar ?? '—' }}
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $enrollment->program?->name_ar ?? '—' }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if($enrollment->group)
                                @php
                                    $isFull = $enrollment->group->current_count >= $enrollment->group->max_capacity;
                                @endphp
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full {{ $isFull ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700' }}" dir="ltr">
                                    {{ $enrollment->group->current_count }}/{{ $enrollment->group->max_capacity }}
                                </span>
                            @else
                                —
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center text-gray-600" dir="ltr">
                            {{ $enrollment->enrollment_date?->format('Y-m-d') ?? '—' }}
                        </td>
                        <td class="px-4 py-3 text-center text-gray-600" dir="ltr">
                            {{ $enrollment->participant?->person?->phone ?? '—' }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div x-data="{ showCancel: false, reason: '' }" class="inline-flex items-center gap-2">
                                @can('enrollments.update')
                                <button wire:click="promote({{ $enrollment->id }})"
                                        wire:loading.attr="disabled"
                                        wire:target="promote({{ $enrollment->id }})"
                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 active:bg-green-800 disabled:opacity-50"
                                        title="{{ __('ترقية إلى معلق') }}">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                                    <span wire:loading.remove wire:target="promote({{ $enrollment->id }})">{{ __('ترقية') }}</span>
                                    <span wire:loading wire:target="promote({{ $enrollment->id }})">{{ __('جارٍ...') }}</span>
                                </button>
                                @endcan

                                @can('enrollments.cancel')
                                <button @click="showCancel = true"
                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 active:bg-red-200">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                    {{ __('إلغاء') }}
                                </button>

                                {{-- Cancel Confirmation Modal --}}
                                <div x-show="showCancel" x-cloak
                                     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                                     @keydown.escape.window="showCancel = false">
                                    <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
                                         @click.outside="showCancel = false">
                                        <div class="flex items-center justify-between mb-4">
                                            <h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء الانتظار') }}</h3>
                                            <button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
                                                <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="M6 18L18 6M6 6l12 12"/></svg>
                                            </button>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-4">
                                            {{ __('هل أنت متأكد من إلغاء انتظار') }}
                                            <strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
                                        </p>
                                        <textarea x-model="reason"
                                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-red-500 focus:border-red-500"
                                                  rows="3"
                                                  placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
                                        <div class="flex items-center justify-end gap-3">
                                            <button @click="showCancel = false"
                                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
                                                {{ __('تراجع') }}
                                            </button>
                                            <button @click="if(reason.trim()) { $wire.cancel({{ $enrollment->id }}, reason); showCancel = false; }"
                                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
                                                    :disabled="!reason.trim()">
                                                <span wire:loading.remove wire:target="cancel">{{ __('تأكيد الإلغاء') }}</span>
                                                <span wire:loading wire:target="cancel">{{ __('جارٍ الإلغاء...') }}</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <svg class="w-12 h-12 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركين في قائمة الانتظار') }}</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($enrollments->hasPages())
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $enrollments->links() }}
        </div>
        @endif
    </div>
</div>
