@extends('layouts.app')
@section('title', 'Événements')

@section('content')
@include('admin._nav')

<div class="flex items-center justify-between mb-5 gap-3">
    <div>
        <h1 class="font-display text-2xl font-extrabold text-gray-900 flex items-center gap-2">
            <span class="w-9 h-9 rounded-xl bg-fuchsia-50 flex items-center justify-center">
                <x-icon name="calendar" class="w-5 h-5 text-fuchsia-600" />
            </span>
            Tous les événements
        </h1>
        <p class="text-sm text-gray-500 mt-1">Vue d'ensemble des événements créés par les organisateurs</p>
    </div>
</div>

<div class="flex items-center gap-2 mb-5 overflow-x-auto pb-1">
    @php
        $filters = [
            ['key' => null, 'label' => 'Tous', 'count' => $counts['all']],
            ['key' => 'pending', 'label' => 'En attente', 'count' => $counts['pending']],
            ['key' => 'published', 'label' => 'Publiés', 'count' => $counts['published']],
            ['key' => 'draft', 'label' => 'Brouillons', 'count' => $counts['draft']],
            ['key' => 'cancelled', 'label' => 'Annulés', 'count' => $counts['cancelled']],
        ];
    @endphp
    @foreach($filters as $filter)
        <a href="{{ route('admin.events.index', $filter['key'] ? ['status' => $filter['key']] : []) }}"
           class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-bold border transition-colors
           {{ $status === $filter['key'] ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-500 border-gray-200 hover:border-fuchsia-300' }}">
            {{ $filter['label'] }}
            <span class="opacity-70">{{ $filter['count'] }}</span>
        </a>
    @endforeach
</div>

<div class="grid gap-3">
    @forelse($events as $event)
        <div class="bg-white border border-gray-100 rounded-2xl p-4 sm:p-5 shadow-card">
            <div class="flex items-start gap-3">
                @if($event->cover_image)
                    <img src="{{ asset('storage/' . $event->cover_image) }}" class="w-14 h-14 rounded-xl object-cover shrink-0">
                @else
                    <span class="w-14 h-14 rounded-xl bg-gradient-to-br from-fuchsia-500 to-orange-400 flex items-center justify-center text-white shrink-0">
                        <x-icon name="ticket" class="w-6 h-6" />
                    </span>
                @endif

                <div class="min-w-0 flex-1">
                    <div class="flex items-start justify-between gap-2">
                        <p class="font-bold text-gray-900 truncate">{{ $event->title }}</p>
                        @php
                            $statusStyles = [
                                'published' => ['bg-emerald-50 text-emerald-600', 'check-circle', 'Publié'],
                                'pending' => ['bg-amber-50 text-amber-600', 'clock-alert', 'En attente'],
                                'cancelled' => ['bg-rose-50 text-rose-600', 'x-circle', 'Annulé'],
                                'draft' => ['bg-gray-100 text-gray-500', 'clock', 'Brouillon'],
                            ];
                            [$statusClass, $statusIcon, $statusLabel] = $statusStyles[$event->status] ?? $statusStyles['draft'];
                        @endphp
                        <span class="shrink-0 inline-flex items-center gap-1 text-xs font-bold px-2.5 py-1 rounded-full {{ $statusClass }}">
                            <x-icon name="{{ $statusIcon }}" class="w-3.5 h-3.5" />
                            {{ $statusLabel }}
                        </span>
                    </div>

                    <p class="flex items-center gap-1.5 text-xs text-gray-500 mt-1">
                        <x-icon name="building" class="w-3.5 h-3.5 text-gray-400" />
                        {{ optional($event->organizer)->company_name ?? 'Organisateur supprimé' }}
                    </p>
                    <p class="flex items-center gap-1.5 text-xs text-gray-500 mt-1">
                        <x-icon name="calendar" class="w-3.5 h-3.5 text-gray-400" />
                        {{ $event->starts_at->translatedFormat('d M Y · H:i') }}
                        <span class="text-gray-300">·</span>
                        <x-icon name="map-pin" class="w-3.5 h-3.5 text-gray-400" />
                        {{ $event->location }}
                    </p>

                    <div class="flex items-center gap-3 mt-2.5">
                        <span class="inline-flex items-center gap-1 text-xs font-bold text-gray-600 bg-gray-50 px-2.5 py-1 rounded-full">
                            <x-icon name="ticket" class="w-3.5 h-3.5" />
                            {{ $event->ticketTypes->sum('sold') }} billet(s) vendu(s)
                        </span>
                        <span class="inline-flex items-center gap-1 text-xs font-bold text-gray-600 bg-gray-50 px-2.5 py-1 rounded-full">
                            <x-icon name="chart-bar" class="w-3.5 h-3.5" />
                            {{ $event->orders_count }} commande(s)
                        </span>
                    </div>
                </div>
            </div>

            @if($event->status === 'published')
                <a href="{{ route('events.show', $event->slug) }}" target="_blank"
                   class="inline-flex items-center gap-1 text-xs font-bold text-fuchsia-600 hover:text-fuchsia-700 mt-3">
                    Voir la page publique
                    <x-icon name="arrow-right" class="w-3.5 h-3.5" />
                </a>
            @elseif($event->status === 'pending')
                <div class="flex gap-2 mt-4 pt-4 border-t border-dashed border-gray-100">
                    <form method="POST" action="{{ route('admin.events.approve', $event) }}">
                        @csrf
                        <button class="inline-flex items-center gap-1.5 bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-xl text-sm font-bold transition-colors">
                            <x-icon name="check-circle" class="w-4 h-4" />
                            Valider
                        </button>
                    </form>
                    <form method="POST" action="{{ route('admin.events.reject', $event) }}">
                        @csrf
                        <button class="inline-flex items-center gap-1.5 bg-rose-50 hover:bg-rose-100 text-rose-600 px-4 py-2 rounded-xl text-sm font-bold transition-colors">
                            <x-icon name="x-circle" class="w-4 h-4" />
                            Rejeter
                        </button>
                    </form>
                </div>
            @endif
        </div>
    @empty
        <div class="text-center py-16 bg-white rounded-2xl border border-dashed border-gray-200">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-fuchsia-50 flex items-center justify-center mb-4">
                <x-icon name="calendar" class="w-8 h-8 text-fuchsia-300" />
            </div>
            <p class="text-gray-500 font-medium">Aucun événement pour ce filtre.</p>
        </div>
    @endforelse
</div>

<div class="mt-6">
    {{ $events->links() }}
</div>
@endsection