<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg 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-lg text-red-800 text-sm">{{ session('error') }}</div>
    @endif

    {{-- Header --}}
    <div class="flex items-start justify-between mb-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('events.list') }}" wire:navigate class="text-gray-400 hover:text-gray-600">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                </a>
                <h1 class="text-2xl font-bold text-gray-800">{{ $event->title }}</h1>
                <span class="px-2.5 py-1 rounded-full text-xs font-medium
                    {{ match($event->status->color()) {
                        'green' => 'bg-green-100 text-green-800',
                        'yellow' => 'bg-yellow-100 text-yellow-800',
                        'blue' => 'bg-blue-100 text-blue-800',
                        'purple' => 'bg-purple-100 text-purple-800',
                        'red' => 'bg-red-100 text-red-800',
                        default => 'bg-gray-100 text-gray-800',
                    } }}">
                    {{ $event->status->label() }}
                </span>
            </div>
            <p class="text-sm text-gray-500">{{ $event->type->label() }} &middot; {{ __('أنشئ بواسطة') }} {{ $event->creator?->name ?? '—' }}</p>
        </div>

        <div class="flex items-center gap-2">
            @if($event->status === \App\Domain\Event\Enums\EventStatus::Draft)
                <button wire:click="publish" wire:loading.attr="disabled"
                        class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                    {{ __('نشر الإيفنت') }}
                </button>
            @endif
            @can('events.update')
                <a href="{{ route('events.edit', $event) }}" wire:navigate
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                    {{ __('تعديل') }}
                </a>
            @endcan
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <div class="text-2xl font-bold text-blue-600">{{ $event->registrations_count }}</div>
            <div class="text-sm text-gray-500">{{ __('إجمالي التسجيلات') }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <div class="text-2xl font-bold text-green-600">{{ $confirmedCount }}</div>
            <div class="text-sm text-gray-500">{{ __('مؤكد') }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <div class="text-2xl font-bold text-yellow-600">{{ $pendingCount }}</div>
            <div class="text-sm text-gray-500">{{ __('قيد المراجعة') }}</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <div class="text-2xl font-bold text-gray-600">
                @if($event->max_capacity)
                    {{ $event->spotsRemaining() }} / {{ $event->max_capacity }}
                @else
                    &infin;
                @endif
            </div>
            <div class="text-sm text-gray-500">{{ __('أماكن متاحة') }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Event Details --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('تفاصيل الإيفنت') }}</h2>
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-500">{{ __('تاريخ البداية') }}</span>
                            <p class="font-medium text-gray-800">{{ $event->starts_at->translatedFormat('d M Y - H:i') }}</p>
                        </div>
                        <div>
                            <span class="text-gray-500">{{ __('تاريخ النهاية') }}</span>
                            <p class="font-medium text-gray-800">{{ $event->ends_at->translatedFormat('d M Y - H:i') }}</p>
                        </div>
                        <div>
                            <span class="text-gray-500">{{ __('فتح التسجيل') }}</span>
                            <p class="font-medium text-gray-800">{{ $event->registration_opens_at?->translatedFormat('d M Y - H:i') ?? __('فوري') }}</p>
                        </div>
                        <div>
                            <span class="text-gray-500">{{ __('إغلاق التسجيل') }}</span>
                            <p class="font-medium text-gray-800">{{ $event->registration_closes_at?->translatedFormat('d M Y - H:i') ?? __('حتى بداية الإيفنت') }}</p>
                        </div>
                    </div>

                    @if($event->description)
                        <div class="pt-4 border-t">
                            <span class="text-sm text-gray-500">{{ __('الوصف') }}</span>
                            <p class="text-gray-700 mt-1 whitespace-pre-line">{{ $event->description }}</p>
                        </div>
                    @endif

                    <div class="pt-4 border-t">
                        <span class="text-sm text-gray-500">{{ __('الموقع') }}</span>
                        <p class="font-medium text-gray-800 mt-1">
                            @if($event->location_type === \App\Domain\Event\Enums\LocationType::Facility && $event->facility)
                                {{ $event->facility->name_ar }}
                            @else
                                {{ $event->location_name }}
                                @if($event->location_address)
                                    <span class="text-sm text-gray-500 block">{{ $event->location_address }}</span>
                                @endif
                            @endif
                        </p>
                    </div>
                </div>
            </div>

            {{-- Registrations Quick View --}}
            @can('events.view')
                <div class="bg-white rounded-xl border border-gray-200 p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-gray-800">{{ __('آخر التسجيلات') }}</h2>
                        <a href="{{ route('events.registrations', $event) }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">
                            {{ __('عرض الكل') }} &larr;
                        </a>
                    </div>
                    @php $latestRegs = $event->registrations()->latest()->limit(5)->get(); @endphp
                    @if($latestRegs->isEmpty())
                        <p class="text-sm text-gray-400">{{ __('لا توجد تسجيلات بعد') }}</p>
                    @else
                        <div class="space-y-3">
                            @foreach($latestRegs as $reg)
                                <div class="flex items-center justify-between py-2 border-b last:border-0">
                                    <div>
                                        <span class="font-medium text-gray-800 text-sm">{{ $reg->registrant_name }}</span>
                                        <span class="text-xs text-gray-400 ms-2">{{ $reg->registrant_phone }}</span>
                                    </div>
                                    <span class="px-2 py-0.5 rounded-full text-xs font-medium
                                        {{ match($reg->status->color()) {
                                            'green' => 'bg-green-100 text-green-700',
                                            'yellow' => 'bg-yellow-100 text-yellow-700',
                                            'red' => 'bg-red-100 text-red-700',
                                            default => 'bg-gray-100 text-gray-700',
                                        } }}">
                                        {{ $reg->status->label() }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endcan
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- QR Code --}}
            @if($event->status !== \App\Domain\Event\Enums\EventStatus::Draft)
                <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3">{{ __('رمز QR للتسجيل') }}</h3>
                    <div class="inline-block p-3 bg-white border rounded-lg">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ urlencode($event->getPublicUrl()) }}"
                             alt="QR Code" class="w-48 h-48">
                    </div>
                    <p class="text-xs text-gray-400 mt-2 break-all">{{ $event->getPublicUrl() }}</p>
                    <button onclick="navigator.clipboard.writeText('{{ $event->getPublicUrl() }}')"
                            class="mt-3 px-3 py-1.5 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                        {{ __('نسخ الرابط') }}
                    </button>
                </div>
            @endif

            {{-- Status Actions --}}
            @can('events.manage')
                <div class="bg-white rounded-xl border border-gray-200 p-6">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3">{{ __('تغيير الحالة') }}</h3>
                    <div class="space-y-2">
                        @foreach(\App\Domain\Event\Enums\EventStatus::cases() as $s)
                            @if($event->status->canTransitionTo($s))
                                <button wire:click="changeStatus('{{ $s->value }}')"
                                        wire:loading.attr="disabled"
                                        class="w-full px-3 py-2 text-start text-sm rounded-lg border hover:bg-gray-50 transition-colors">
                                    {{ $s->label() }}
                                </button>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endcan

            {{-- Registration Control --}}
            @can('events.manage')
                @if(!in_array($event->status, [\App\Domain\Event\Enums\EventStatus::Draft, \App\Domain\Event\Enums\EventStatus::Cancelled]))
                    <div class="bg-white rounded-xl border border-gray-200 p-6">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3">{{ __('التحكم بالتسجيل') }}</h3>
                        <div class="flex items-center gap-2 mb-3">
                            <span class="w-2.5 h-2.5 rounded-full {{ $event->isRegistrationOpen() ? 'bg-green-500' : 'bg-red-500' }}"></span>
                            <span class="text-sm {{ $event->isRegistrationOpen() ? 'text-green-700' : 'text-red-700' }}">
                                {{ $event->isRegistrationOpen() ? __('التسجيل مفتوح') : __('التسجيل مغلق') }}
                            </span>
                        </div>
                        <div class="space-y-2">
                            @if($event->isRegistrationOpen())
                                <button wire:click="closeRegistration"
                                        wire:loading.attr="disabled"
                                        wire:confirm="{{ __('هل أنت متأكد من إغلاق التسجيل؟') }}"
                                        class="w-full px-3 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
                                    <span wire:loading.remove wire:target="closeRegistration">{{ __('إغلاق التسجيل') }}</span>
                                    <span wire:loading wire:target="closeRegistration">{{ __('جارٍ...') }}</span>
                                </button>
                            @else
                                <button wire:click="openRegistration"
                                        wire:loading.attr="disabled"
                                        class="w-full px-3 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors">
                                    <span wire:loading.remove wire:target="openRegistration">{{ __('فتح التسجيل') }}</span>
                                    <span wire:loading wire:target="openRegistration">{{ __('جارٍ...') }}</span>
                                </button>
                            @endif
                        </div>
                        @if($event->registration_closes_at)
                            <p class="text-xs text-gray-400 mt-2">{{ __('مغلق حتى:') }} {{ $event->registration_closes_at->translatedFormat('d M Y - H:i') }}</p>
                        @endif
                    </div>
                @endif
            @endcan

            {{-- Form Fields Summary --}}
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">{{ __('حقول النموذج') }}</h3>
                @if(count($event->form_fields ?? []) > 0)
                    <ul class="space-y-1.5 text-sm text-gray-600">
                        @foreach($event->form_fields as $field)
                            <li class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full {{ $field['is_required'] ? 'bg-red-400' : 'bg-gray-300' }}"></span>
                                {{ $field['label'] }}
                                <span class="text-xs text-gray-400">({{ $field['type'] }})</span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="text-sm text-gray-400">{{ __('لم يتم إضافة حقول') }}</p>
                @endif
            </div>

            {{-- Danger Zone --}}
            @can('events.manage')
                <div class="bg-red-50 rounded-xl border border-red-200 p-6">
                    <h3 class="text-sm font-semibold text-red-700 mb-3">{{ __('منطقة الخطر') }}</h3>
                    <button wire:click="deleteEvent"
                            wire:confirm="{{ __('هل أنت متأكد من حذف هذا الإيفنت؟ لا يمكن التراجع عن هذا الإجراء.') }}"
                            class="w-full px-3 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
                        {{ __('حذف الإيفنت') }}
                    </button>
                </div>
            @endcan
        </div>
    </div>
</div>
