<div>
    {{-- Header --}}
    <div class="mb-6">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
            <a href="{{ route('events.list') }}" class="hover:text-gray-700" wire:navigate>{{ __('الأحداث') }}</a>
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <a href="{{ route('events.show', $event) }}" class="hover:text-gray-700" wire:navigate>{{ $event->title }}</a>
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <span class="text-gray-900">{{ __('التسجيلات') }}</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <h1 class="text-2xl font-bold text-gray-900">{{ __('تسجيلات') }} — {{ $event->title }}</h1>
            <button wire:click="export" class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                {{ __('تصدير CSV') }}
            </button>
        </div>
    </div>

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

    {{-- Status Tabs --}}
    <div class="flex flex-wrap gap-2 mb-6">
        <button wire:click="$set('status', '')"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $status === '' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ __('الكل') }} ({{ $statusCounts['all'] }})
        </button>
        <button wire:click="$set('status', 'pending')"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $status === 'pending' ? 'bg-yellow-600 text-white' : 'bg-yellow-50 text-yellow-700 hover:bg-yellow-100' }}">
            {{ __('معلق') }} ({{ $statusCounts['pending'] }})
        </button>
        <button wire:click="$set('status', 'confirmed')"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $status === 'confirmed' ? 'bg-green-600 text-white' : 'bg-green-50 text-green-700 hover:bg-green-100' }}">
            {{ __('مؤكد') }} ({{ $statusCounts['confirmed'] }})
        </button>
        <button wire:click="$set('status', 'attended')"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $status === 'attended' ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-700 hover:bg-blue-100' }}">
            {{ __('حضر') }} ({{ $statusCounts['attended'] }})
        </button>
        <button wire:click="$set('status', 'cancelled')"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $status === 'cancelled' ? 'bg-red-600 text-white' : 'bg-red-50 text-red-700 hover:bg-red-100' }}">
            {{ __('ملغي') }} ({{ $statusCounts['cancelled'] }})
        </button>
    </div>

    {{-- Search + Bulk Actions --}}
    <div class="flex flex-col sm:flex-row gap-3 mb-4">
        <div class="flex-1">
            <input type="text"
                   wire:model.live.debounce.300ms="search"
                   placeholder="{{ __('بحث بالاسم أو الهاتف أو رقم التسجيل...') }}"
                   class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>

        @if(count($selected) > 0)
            <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500">{{ count($selected) }} {{ __('محدد') }}</span>
                @can('events.manage')
                    <button wire:click="bulkConfirm" wire:confirm="{{ __('تأكيد التسجيلات المحددة؟') }}"
                            class="px-3 py-2 bg-green-600 text-white text-xs font-medium rounded-lg hover:bg-green-700">
                        {{ __('تأكيد الكل') }}
                    </button>
                    <button wire:click="bulkCancel" wire:confirm="{{ __('إلغاء التسجيلات المحددة؟') }}"
                            class="px-3 py-2 bg-red-600 text-white text-xs font-medium rounded-lg hover:bg-red-700">
                        {{ __('إلغاء الكل') }}
                    </button>
                @endcan
            </div>
        @endif
    </div>

    {{-- Table --}}
    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-200">
                        <th class="px-4 py-3 text-start">
                            <input type="checkbox" wire:model.live="selectAll" class="rounded text-blue-600 focus:ring-blue-500">
                        </th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('رقم التسجيل') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('الاسم') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('الهاتف') }}</th>
                        @foreach($formFields as $field)
                            @if(!in_array($field['key'], ['name', 'player_name', 'participant_name', 'phone', 'mobile', 'email']))
                                <th class="px-4 py-3 text-start font-semibold text-gray-700 whitespace-nowrap">{{ $field['label'] }}</th>
                            @endif
                        @endforeach
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('الحالة') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('التاريخ') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-700">{{ __('إجراءات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($registrations as $reg)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-3">
                                <input type="checkbox" wire:model.live="selected" value="{{ $reg->id }}" class="rounded text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-4 py-3">
                                <span class="font-mono text-xs bg-gray-100 px-2 py-1 rounded" dir="ltr">{{ $reg->registration_number }}</span>
                            </td>
                            <td class="px-4 py-3 font-medium text-gray-900">{{ $reg->registrant_name }}</td>
                            <td class="px-4 py-3 text-gray-600" dir="ltr">{{ $reg->registrant_phone }}</td>
                            @foreach($formFields as $field)
                                @if(!in_array($field['key'], ['name', 'player_name', 'participant_name', 'phone', 'mobile', 'email']))
                                    <td class="px-4 py-3 text-gray-600">
                                        @php
                                            $val = $reg->form_data[$field['key']] ?? '-';
                                            if (is_array($val)) $val = implode(', ', $val);
                                            if (is_bool($val)) $val = $val ? 'نعم' : 'لا';
                                        @endphp
                                        {{ $val }}
                                    </td>
                                @endif
                            @endforeach
                            <td class="px-4 py-3">
                                @php
                                    $statusStyles = [
                                        'pending' => 'bg-yellow-100 text-yellow-800',
                                        'confirmed' => 'bg-green-100 text-green-800',
                                        'cancelled' => 'bg-red-100 text-red-800',
                                        'attended' => 'bg-blue-100 text-blue-800',
                                        'no_show' => 'bg-gray-100 text-gray-800',
                                    ];
                                    $statusNames = [
                                        'pending' => 'معلق',
                                        'confirmed' => 'مؤكد',
                                        'cancelled' => 'ملغي',
                                        'attended' => 'حضر',
                                        'no_show' => 'لم يحضر',
                                    ];
                                @endphp
                                <span class="inline-block px-2 py-0.5 text-xs font-medium rounded-full {{ $statusStyles[$reg->status] ?? 'bg-gray-100 text-gray-800' }}">
                                    {{ $statusNames[$reg->status] ?? $reg->status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-500 text-xs whitespace-nowrap" dir="ltr">
                                {{ $reg->created_at->format('Y-m-d H:i') }}
                            </td>
                            <td class="px-4 py-3">
                                @can('events.manage')
                                    <div class="flex items-center gap-1">
                                        @if($reg->status === 'pending')
                                            <button wire:click="confirm({{ $reg->id }})" title="{{ __('تأكيد') }}"
                                                    class="p-1.5 text-green-600 hover:bg-green-50 rounded-lg 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="M5 13l4 4L19 7"/></svg>
                                            </button>
                                        @endif
                                        @if(in_array($reg->status, ['pending', 'confirmed']))
                                            <button wire:click="markAttended({{ $reg->id }})" title="{{ __('حضر') }}"
                                                    class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg 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>
                                            </button>
                                        @endif
                                        @if(!in_array($reg->status, ['cancelled', 'attended']))
                                            <button wire:click="cancel({{ $reg->id }})" wire:confirm="{{ __('إلغاء هذا التسجيل؟') }}" title="{{ __('إلغاء') }}"
                                                    class="p-1.5 text-red-600 hover:bg-red-50 rounded-lg 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>
                                            </button>
                                        @endif
                                    </div>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100" class="px-4 py-12 text-center 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="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>
                                <p>{{ __('لا توجد تسجيلات بعد') }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    <div class="mt-4">
        {{ $registrations->links() }}
    </div>
</div>
