@extends('layouts.public')

@section('title', 'Événements à venir - GexEvent')

@section('content')
<div class="bg-gradient-to-b from-primary-50 to-white py-12">
    <div class="container mx-auto px-6">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">Événements à venir</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Découvrez tous les événements créés avec GexEvent et trouvez celui qui vous intéresse.
            </p>
        </div>
        
        <!-- Filtres et recherche -->
        <div class="bg-white rounded-2xl shadow-md p-6 mb-10">
            <form action="{{ route('events.list') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2">
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Rechercher</label>
                    <div class="relative">
                        <input type="text" name="search" id="search" value="{{ $search }}" 
                            placeholder="Nom de l'événement, lieu..." 
                            class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 pl-10">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
                    <select name="category" id="category" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">
                        <option value="all" {{ $category === 'all' ? 'selected' : '' }}>Toutes les catégories</option>
                        <option value="conférence" {{ $category === 'conférence' ? 'selected' : '' }}>Conférence</option>
                        <option value="séminaire" {{ $category === 'séminaire' ? 'selected' : '' }}>Séminaire</option>
                        <option value="atelier" {{ $category === 'atelier' ? 'selected' : '' }}>Atelier</option>
                        <option value="concert" {{ $category === 'concert' ? 'selected' : '' }}>Concert</option>
                        <option value="exposition" {{ $category === 'exposition' ? 'selected' : '' }}>Exposition</option>
                        <option value="autre" {{ $category === 'autre' ? 'selected' : '' }}>Autre</option>
                    </select>
                </div>
                
                <div>
                    <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Trier par</label>
                    <select name="sort" id="sort" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">
                        <option value="date_asc" {{ $sort === 'date_asc' ? 'selected' : '' }}>Date (plus proche)</option>
                        <option value="date_desc" {{ $sort === 'date_desc' ? 'selected' : '' }}>Date (plus éloignée)</option>
                    </select>
                </div>
                
                <div class="md:col-span-4 flex justify-end">
                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
                        Filtrer
                    </button>
                    @if($search || $category !== 'all' || $sort !== 'date_asc')
                        <a href="{{ route('events.list') }}" class="ml-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors">
                            Réinitialiser
                        </a>
                    @endif
                </div>
            </form>
        </div>
        
        <!-- Liste des événements -->
        @if($events->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($events as $event)
                    <div class="card-event group">
                        <div class="relative h-48 overflow-hidden">
                            @if($event->cover_image)
                                <img src="{{ asset($event->cover_image) }}" alt="{{ $event->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-primary-500 to-accent-500 group-hover:scale-105 transition-transform duration-500"></div>
                            @endif
                            <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-black/60 to-transparent w-full">
                                <div class="text-white font-semibold">{{ $event->name }}</div>
                                @if($event->category)
                                    <span class="inline-block bg-primary-500 text-white text-xs px-2 py-1 rounded-full">
                                        {{ $event->category }}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center mb-4 text-gray-500">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                                <span>{{ $event->start_date->format('d M Y') }}</span>
                                @if($event->start_date->format('Y-m-d') != $event->end_date->format('Y-m-d'))
                                    <span class="mx-2">-</span>
                                    <span>{{ $event->end_date->format('d M Y') }}</span>
                                @endif
                            </div>
                            <div class="flex items-center mb-4 text-gray-500">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <span>{{ $event->location }}</span>
                            </div>
                            <p class="text-gray-600 line-clamp-2 mb-4">
                                {{ $event->short_description ?? Str::limit($event->description, 100) }}
                            </p>
                            <a href="{{ route('event.show', $event->slug) }}" class="btn-outline text-sm px-4 py-2 inline-block">
                                Voir l'événement
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
            
            <!-- Pagination -->
            <div class="mt-12">
                {{ $events->appends(request()->query())->links() }}
            </div>
            
        @else
            <div class="text-center py-16 bg-white rounded-2xl shadow-md">
                <div class="text-gray-400 text-6xl mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold text-gray-700 mb-2">Aucun événement trouvé</h3>
                <p class="text-gray-500 mb-6">Aucun événement ne correspond à vos critères de recherche.</p>
                @if($search || $category !== 'all' || $sort !== 'date_asc')
                    <a href="{{ route('events.list') }}" class="btn-primary text-lg px-8 py-3 inline-flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        Réinitialiser les filtres
                    </a>
                @else
                    <a href="{{ route('organizer.register') }}" class="btn-primary text-lg px-8 py-3 inline-flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        Créer un événement
                    </a>
                @endif
            </div>
        @endif
    </div>
</div>

<!-- CTA -->
<div class="bg-gray-50 py-16">
    <div class="container mx-auto px-6">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-primary-500/10 to-accent-500/10"></div>
            <div class="relative z-10">
                <div class="text-center max-w-3xl mx-auto">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Vous voulez organiser votre propre événement ?</h2>
                    <p class="text-lg text-gray-600 mb-8">
                        Rejoignez notre plateforme et créez facilement votre événement personnalisé.
                        Des outils simples et puissants pour gérer vos participants, vos billets et vos paiements.
                    </p>
                    <a href="{{ route('organizer.register') }}" class="btn-primary text-lg px-8 py-3 inline-block">
                        Devenir organisateur
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection