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

@section('content')

{{-- ========================================================= --}}
{{-- HERO + RECHERCHE --}}
{{-- ========================================================= --}}
<section class="relative overflow-hidden rounded-3xl btn-gradient text-white px-6 sm:px-10 py-10 sm:py-14 mb-8 shadow-glow">
    <div class="absolute -top-10 -right-10 w-56 h-56 bg-white/10 rounded-full blur-2xl"></div>
    <div class="absolute -bottom-16 -left-10 w-64 h-64 bg-white/10 rounded-full blur-2xl"></div>
    <div class="relative">
        <span class="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide mb-4">
            <x-icon name="sparkles" class="w-3.5 h-3.5" />
            Vis l'événement
        </span>
        <h1 class="font-display text-3xl sm:text-4xl font-extrabold leading-tight max-w-xl">
            Trouve ton prochain moment inoubliable
        </h1>
        <p class="mt-3 text-white/85 max-w-md">
            Concerts, conférences, sport et festivals — réserve tes billets en quelques secondes.
        </p>

        <form method="GET" class="mt-7 max-w-lg">
            @if(request('category'))
                <input type="hidden" name="category" value="{{ request('category') }}">
            @endif
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-fuchsia-500">
                    <x-icon name="search" class="w-5 h-5" />
                </span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Rechercher un événement, un lieu..."
                       class="w-full bg-white text-gray-800 rounded-2xl pl-12 pr-4 py-3.5 text-sm font-medium shadow-lg focus:outline-none focus:ring-4 focus:ring-white/40 placeholder:text-gray-400">
            </div>
        </form>
    </div>
</section>

{{-- ========================================================= --}}
{{-- CATÉGORIES --}}
{{-- ========================================================= --}}
@if($categories->isNotEmpty())
    <div class="flex items-center gap-2 mb-8 overflow-x-auto pb-1 -mx-1 px-1">
        <a href="{{ route('events.index', array_filter(['search' => request('search')])) }}"
           class="shrink-0 inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-bold border transition-colors
           {{ !request('category') ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-500 border-gray-200 hover:border-fuchsia-300' }}">
            Toutes les catégories
        </a>
        @foreach($categories as $category)
            <a href="{{ route('events.index', array_filter(['search' => request('search'), 'category' => $category])) }}"
               class="shrink-0 inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-bold border transition-colors
               {{ request('category') === $category ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-500 border-gray-200 hover:border-fuchsia-300' }}">
                {{ $category }}
            </a>
        @endforeach
    </div>
@endif

{{-- ========================================================= --}}
{{-- ÉVÉNEMENTS POPULAIRES (uniquement si aucun filtre actif) --}}
{{-- ========================================================= --}}
@if($popularEvents->isNotEmpty())
    <div class="mb-10">
        <div class="flex items-center gap-2 mb-4">
            <span class="w-8 h-8 rounded-xl bg-orange-50 flex items-center justify-center">
                <x-icon name="sparkles" class="w-4 h-4 text-orange-500" />
            </span>
            <h2 class="font-display font-bold text-lg text-gray-800">Événements populaires</h2>
        </div>

        <div class="flex gap-4 overflow-x-auto pb-2 -mx-1 px-1 snap-x snap-mandatory">
            @foreach($popularEvents as $event)
                <a href="{{ route('events.show', $event->slug) }}"
                   class="group shrink-0 w-64 snap-start block bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-card hover:shadow-glow hover:-translate-y-1 transition-all duration-300">
                    @if($event->cover_image)
                        <div class="relative h-32 overflow-hidden">
                            <img src="{{ asset('storage/' . $event->cover_image) }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        </div>
                    @else
                        <div class="w-full h-28 bg-gradient-to-br from-orange-400 via-fuchsia-500 to-purple-600 flex items-center justify-center">
                            <x-icon name="ticket" class="w-8 h-8 text-white/90" />
                        </div>
                    @endif
                    <div class="p-4">
                        <p class="flex items-center gap-1 text-[11px] font-bold text-orange-500 uppercase tracking-wide">
                            <x-icon name="sparkles" class="w-3 h-3" />
                            {{ $event->tickets_sold }} billet(s) vendu(s)
                        </p>
                        <h3 class="font-display font-bold text-sm mt-1 text-gray-900 truncate group-hover:text-fuchsia-600 transition-colors">
                            {{ $event->title }}
                        </h3>
                        <p class="text-xs text-gray-500 mt-1">{{ $event->starts_at->translatedFormat('d M · H:i') }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
@endif

{{-- ========================================================= --}}
{{-- ÉVÉNEMENTS À VENIR / RÉSULTATS DE RECHERCHE --}}
{{-- ========================================================= --}}
<div class="flex items-center justify-between mb-5">
    <h2 class="font-display font-bold text-lg text-gray-800">
        @if(request('search'))
            Résultats pour « {{ request('search') }} »
        @elseif(request('category'))
            Catégorie « {{ request('category') }} »
        @else
            Événements à venir
        @endif
    </h2>
</div>

<div class="grid sm:grid-cols-2 gap-5">
    @forelse($events as $event)
        <a href="{{ route('events.show', $event->slug) }}"
           class="group block bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-card hover:shadow-glow hover:-translate-y-1 transition-all duration-300">
            @if($event->cover_image)
                <div class="relative h-44 overflow-hidden">
                    <img src="{{ asset('storage/' . $event->cover_image) }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
                </div>
            @else
                <div class="w-full h-36 bg-gradient-to-br from-fuchsia-500 via-pink-500 to-orange-400 flex items-center justify-center relative overflow-hidden">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-white/15 rounded-full"></div>
                    <div class="absolute -bottom-8 -right-4 w-28 h-28 bg-white/10 rounded-full"></div>
                    <x-icon name="ticket" class="w-10 h-10 text-white/90 relative" />
                </div>
            @endif
            <div class="p-5">
                @if($event->category)
                    <span class="inline-block text-[11px] font-bold uppercase tracking-wide text-fuchsia-600 bg-fuchsia-50 px-2.5 py-1 rounded-full mb-2">
                        {{ $event->category }}
                    </span>
                @endif
                <p class="flex items-center gap-1.5 text-xs font-semibold text-fuchsia-600">
                    <x-icon name="calendar" class="w-3.5 h-3.5" />
                    {{ $event->starts_at->translatedFormat('d M Y · H:i') }}
                </p>
                <h3 class="font-display font-bold text-lg mt-1.5 text-gray-900 group-hover:text-fuchsia-600 transition-colors">
                    {{ $event->title }}
                </h3>
                <p class="flex items-center gap-1.5 text-sm text-gray-500 mt-1.5">
                    <x-icon name="map-pin" class="w-4 h-4 text-gray-400" />
                    {{ $event->location }}
                </p>
                @php
                    $cheapest = $event->ticketTypes->sortBy('price')->first();
                @endphp
                <div class="flex items-center justify-between mt-4">
                    @if($cheapest)
                        <span class="text-sm font-bold text-gray-700">
                            À partir de {{ number_format($cheapest->price, 0, ',', ' ') }} FCFA
                        </span>
                    @else
                        <span></span>
                    @endif
                    <span class="inline-flex items-center gap-1 text-sm font-bold text-fuchsia-600 group-hover:gap-2 transition-all">
                        Voir
                        <x-icon name="arrow-right" class="w-4 h-4" />
                    </span>
                </div>
            </div>
        </a>
    @empty
        <div class="sm:col-span-2 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="ticket" class="w-8 h-8 text-fuchsia-300" />
            </div>
            <p class="text-gray-500 font-medium">Aucun événement disponible pour le moment.</p>
            <p class="text-gray-400 text-sm mt-1">Reviens bientôt, de nouveaux événements arrivent !</p>
        </div>
    @endforelse
</div>

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

{{-- ========================================================= --}}
{{-- CTA ORGANISATEUR --}}
{{-- ========================================================= --}}
@guest
    <section class="relative overflow-hidden rounded-3xl bg-gray-900 text-white px-6 sm:px-10 py-10 sm:py-12 mt-12 mb-2">
        <div class="absolute -top-16 -right-16 w-64 h-64 bg-fuchsia-600/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-16 -left-16 w-64 h-64 bg-orange-500/10 rounded-full blur-3xl"></div>
        <div class="relative flex flex-col sm:flex-row items-center justify-between gap-6">
            <div class="text-center sm:text-left">
                <h2 class="font-display text-2xl font-extrabold">Tu organises un événement ?</h2>
                <p class="text-gray-300 mt-2 max-w-md">
                    Crée tes types de billets, suis tes ventes en temps réel et reçois tes recettes — gratuit pour commencer.
                </p>
            </div>
            <a href="{{ route('register') }}"
               class="shrink-0 inline-flex items-center gap-2 btn-gradient text-white px-6 py-3.5 rounded-2xl font-bold shadow-glow hover:brightness-105 hover:-translate-y-0.5 active:translate-y-0 transition-all">
                Devenir organisateur
                <x-icon name="arrow-right" class="w-4 h-4" />
            </a>
        </div>
    </section>
@endguest

@endsection