@extends('layouts.app')

@section('title', 'Mes événements')

@section('content')

<div class="max-w-6xl mx-auto px-4 sm:px-6 py-6">

    {{-- ========================================================= --}}
    {{-- HEADER --}}
    {{-- ========================================================= --}}

    <div class="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-fuchsia-600 via-purple-600 to-orange-400 p-6 sm:p-8 mb-7 shadow-[0_15px_50px_rgba(192,38,211,0.20)]">

        {{-- Décorations --}}
        <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-white/10"></div>
        <div class="absolute -bottom-24 -left-16 w-72 h-72 rounded-full bg-white/10"></div>

        <div class="relative flex flex-col sm:flex-row sm:items-center sm:justify-between gap-5">

            <div class="text-white">

                <div class="flex items-center gap-2 text-white/75 text-xs font-bold uppercase tracking-[0.18em] mb-2">

                    <x-icon name="calendar" class="w-4 h-4" />

                    Espace organisateur

                </div>

                <h1 class="font-display text-3xl sm:text-4xl font-black tracking-tight">
                    Mes événements
                </h1>

                <p class="text-white/80 text-sm sm:text-base mt-2 max-w-xl">
                    Crée, organise et publie facilement tous tes événements.
                </p>

            </div>


            <a
                href="{{ route('organizer.events.create') }}"
                class="inline-flex items-center justify-center gap-2 bg-white text-fuchsia-600 px-5 py-3.5 rounded-2xl text-sm font-black shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all shrink-0"
            >

                <span class="w-7 h-7 rounded-lg bg-fuchsia-50 flex items-center justify-center">

                    <x-icon name="plus" class="w-4 h-4" />

                </span>

                Nouvel événement

            </a>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- STATISTIQUES --}}
    {{-- ========================================================= --}}

    @php
        $totalEvents = $events->count();
        $publishedEvents = $events->where('status', 'published')->count();
        $draftEvents = $events->where('status', 'draft')->count();
    @endphp


    <div class="grid grid-cols-3 gap-3 sm:gap-5 mb-7">

        {{-- Total --}}
        <div class="bg-white border border-gray-100 rounded-2xl sm:rounded-3xl p-4 sm:p-5 shadow-[0_8px_30px_rgba(30,15,45,0.05)]">

            <div class="flex items-center justify-between">

                <div class="w-10 h-10 rounded-xl bg-fuchsia-50 flex items-center justify-center">

                    <x-icon
                        name="calendar"
                        class="w-5 h-5 text-fuchsia-600"
                    />

                </div>

            </div>

            <p class="text-2xl sm:text-3xl font-black text-gray-900 mt-3">
                {{ $totalEvents }}
            </p>

            <p class="text-[11px] sm:text-xs text-gray-500 font-semibold mt-1">
                Événement{{ $totalEvents > 1 ? 's' : '' }}
            </p>

        </div>


        {{-- Publiés --}}
        <div class="bg-white border border-gray-100 rounded-2xl sm:rounded-3xl p-4 sm:p-5 shadow-[0_8px_30px_rgba(30,15,45,0.05)]">

            <div class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center">

                <x-icon
                    name="check-circle"
                    class="w-5 h-5 text-emerald-600"
                />

            </div>

            <p class="text-2xl sm:text-3xl font-black text-gray-900 mt-3">
                {{ $publishedEvents }}
            </p>

            <p class="text-[11px] sm:text-xs text-gray-500 font-semibold mt-1">
                Publié{{ $publishedEvents > 1 ? 's' : '' }}
            </p>

        </div>


        {{-- Brouillons --}}
        <div class="bg-white border border-gray-100 rounded-2xl sm:rounded-3xl p-4 sm:p-5 shadow-[0_8px_30px_rgba(30,15,45,0.05)]">

            <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center">

                <x-icon
                    name="clock"
                    class="w-5 h-5 text-amber-600"
                />

            </div>

            <p class="text-2xl sm:text-3xl font-black text-gray-900 mt-3">
                {{ $draftEvents }}
            </p>

            <p class="text-[11px] sm:text-xs text-gray-500 font-semibold mt-1">
                Brouillon{{ $draftEvents > 1 ? 's' : '' }}
            </p>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- VALIDATION ORGANISATEUR --}}
    {{-- ========================================================= --}}

    @if(!auth()->user()->organizer->isApproved())

        <div class="relative overflow-hidden flex items-start gap-4 bg-amber-50 border border-amber-200 rounded-3xl p-5 mb-7">

            <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-amber-100/70"></div>

            <div class="relative w-11 h-11 rounded-2xl bg-amber-100 flex items-center justify-center shrink-0">

                <x-icon
                    name="clock-alert"
                    class="w-5 h-5 text-amber-600"
                />

            </div>


            <div class="relative min-w-0">

                <p class="font-black text-amber-900">
                    Profil en cours de validation
                </p>

                <p class="text-sm text-amber-800/75 leading-relaxed mt-1">
                    Ton compte organisateur est actuellement examiné par notre équipe.
                    Tu peux continuer à préparer tes événements en brouillon pendant cette période.
                </p>

            </div>

        </div>

    @endif


    {{-- ========================================================= --}}
    {{-- TITRE LISTE --}}
    {{-- ========================================================= --}}

    <div class="flex items-end justify-between mb-4">

        <div>

            <p class="text-xs uppercase tracking-[0.18em] font-bold text-fuchsia-500">
                Gestion
            </p>

            <h2 class="font-display text-xl sm:text-2xl font-black text-gray-900 mt-1">
                Tous mes événements
            </h2>

        </div>


        @if($totalEvents > 0)

            <span class="text-xs sm:text-sm font-semibold text-gray-400">
                {{ $totalEvents }} résultat{{ $totalEvents > 1 ? 's' : '' }}
            </span>

        @endif

    </div>


    {{-- ========================================================= --}}
    {{-- LISTE --}}
    {{-- ========================================================= --}}

    <div class="grid gap-5">

        @forelse($events as $event)

            <a
                href="{{ route('organizer.events.edit', $event) }}"
                class="group block bg-white border border-gray-100 rounded-[1.75rem] overflow-hidden shadow-[0_8px_30px_rgba(30,15,45,0.05)] hover:shadow-[0_15px_45px_rgba(30,15,45,0.10)] hover:-translate-y-1 transition-all duration-300"
            >

                <div class="flex flex-col sm:flex-row">

                    {{-- ================================================= --}}
                    {{-- IMAGE --}}
                    {{-- ================================================= --}}

                    <div class="relative w-full sm:w-64 lg:w-72 h-48 sm:h-auto shrink-0 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-orange-400 overflow-hidden">

                        @if($event->cover_image)

                            <img
                                src="{{ asset('storage/' . $event->cover_image) }}"
                                alt="{{ $event->title }}"
                                class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                loading="lazy"
                            >

                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>

                        @else

                            <div class="absolute inset-0 flex items-center justify-center">

                                <div class="absolute -top-12 -left-12 w-40 h-40 rounded-full bg-white/10"></div>

                                <div class="absolute -bottom-16 -right-10 w-56 h-56 rounded-full bg-white/10"></div>

                                <div class="relative w-16 h-16 rounded-2xl bg-white/15 backdrop-blur-md flex items-center justify-center">

                                    <x-icon
                                        name="ticket"
                                        class="w-8 h-8 text-white"
                                    />

                                </div>

                            </div>

                        @endif


                        {{-- Catégorie --}}

                        @if($event->category)

                            <span class="absolute top-4 left-4 px-3 py-1.5 rounded-full bg-black/30 backdrop-blur-md border border-white/20 text-white text-[10px] font-black uppercase tracking-wider">

                                {{ $event->category }}

                            </span>

                        @endif


                        {{-- Statut sur image mobile --}}

                        <div class="absolute bottom-4 left-4 sm:hidden">

                            @php
                                $statusStylesMobile = [
                                    'published' => ['bg-emerald-500 text-white', 'check-circle', 'Publié'],
                                    'pending' => ['bg-amber-400 text-white', 'clock-alert', 'En attente'],
                                    'draft' => ['bg-white/90 text-gray-700', 'clock', 'Brouillon'],
                                ];
                                [$mClass, $mIcon, $mLabel] = $statusStylesMobile[$event->status] ?? $statusStylesMobile['draft'];
                            @endphp

                            <span class="inline-flex items-center gap-1.5 {{ $mClass }} px-3 py-1.5 rounded-full text-xs font-bold shadow-lg">

                                <x-icon name="{{ $mIcon }}" class="w-3.5 h-3.5" />

                                {{ $mLabel }}

                            </span>

                        </div>

                    </div>


                    {{-- ================================================= --}}
                    {{-- CONTENU --}}
                    {{-- ================================================= --}}

                    <div class="flex-1 p-5 sm:p-6 min-w-0">

                        <div class="flex items-start justify-between gap-4">

                            <div class="min-w-0">

                                <h3 class="font-display text-xl sm:text-2xl font-black text-gray-900 group-hover:text-fuchsia-600 transition-colors truncate">

                                    {{ $event->title }}

                                </h3>

                                @if($event->description)

                                    <p class="text-sm text-gray-500 mt-1.5 line-clamp-2">
                                        {{ $event->description }}
                                    </p>

                                @endif

                            </div>


                            {{-- Statut desktop --}}

                            <div class="hidden sm:block shrink-0">

                                @php
                                    $statusStylesDesktop = [
                                        'published' => ['bg-emerald-50 text-emerald-600', 'bg-emerald-500', 'Publié'],
                                        'pending' => ['bg-amber-50 text-amber-600', 'bg-amber-400', 'En attente'],
                                        'draft' => ['bg-gray-100 text-gray-500', 'bg-gray-400', 'Brouillon'],
                                    ];
                                    [$dClass, $dDot, $dLabel] = $statusStylesDesktop[$event->status] ?? $statusStylesDesktop['draft'];
                                @endphp

                                <span class="inline-flex items-center gap-1.5 text-xs font-black px-3 py-1.5 rounded-full {{ $dClass }}">

                                    <span class="w-1.5 h-1.5 rounded-full {{ $dDot }}"></span>

                                    {{ $dLabel }}

                                </span>

                            </div>

                        </div>


                        {{-- Informations --}}

                        <div class="grid sm:grid-cols-2 gap-3 mt-5">

                            {{-- Date --}}

                            <div class="flex items-center gap-3 bg-gray-50 rounded-2xl p-3">

                                <div class="w-9 h-9 rounded-xl bg-white flex items-center justify-center shadow-sm shrink-0">

                                    <x-icon
                                        name="calendar"
                                        class="w-4 h-4 text-fuchsia-600"
                                    />

                                </div>


                                <div class="min-w-0">

                                    <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">
                                        Date
                                    </p>

                                    <p class="text-sm font-bold text-gray-800 truncate">

                                        {{ $event->starts_at->locale('fr')->translatedFormat('l d F Y') }}

                                    </p>

                                </div>

                            </div>


                            {{-- Heure --}}

                            <div class="flex items-center gap-3 bg-gray-50 rounded-2xl p-3">

                                <div class="w-9 h-9 rounded-xl bg-white flex items-center justify-center shadow-sm shrink-0">

                                    <x-icon
                                        name="clock"
                                        class="w-4 h-4 text-purple-600"
                                    />

                                </div>


                                <div>

                                    <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">
                                        Heure
                                    </p>

                                    <p class="text-sm font-bold text-gray-800">

                                        {{ $event->starts_at->format('H\hi') }}

                                    </p>

                                </div>

                            </div>


                            {{-- Lieu --}}

                            <div class="sm:col-span-2 flex items-center gap-3 bg-gray-50 rounded-2xl p-3">

                                <div class="w-9 h-9 rounded-xl bg-white flex items-center justify-center shadow-sm shrink-0">

                                    <x-icon
                                        name="map-pin"
                                        class="w-4 h-4 text-orange-500"
                                    />

                                </div>


                                <div class="min-w-0">

                                    <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">
                                        Lieu
                                    </p>

                                    <p class="text-sm font-bold text-gray-800 truncate">
                                        {{ $event->location }}
                                    </p>

                                </div>

                            </div>

                        </div>


                        {{-- Footer carte --}}

                        <div class="flex items-center justify-between mt-5 pt-4 border-t border-dashed border-gray-200">

                            <span class="text-xs text-gray-400 font-medium">

                                Créé le

                                {{ $event->created_at->locale('fr')->translatedFormat('d F Y') }}

                            </span>


                            <span class="inline-flex items-center gap-1.5 text-sm font-bold text-fuchsia-600 group-hover:gap-2.5 transition-all">

                                Gérer l'événement

                                <x-icon
                                    name="arrow-right"
                                    class="w-4 h-4"
                                />

                            </span>

                        </div>

                    </div>

                </div>

            </a>

        @empty

            {{-- ================================================= --}}
            {{-- AUCUN ÉVÉNEMENT --}}
            {{-- ================================================= --}}

            <div class="relative overflow-hidden text-center py-16 sm:py-20 bg-white rounded-[2rem] border border-dashed border-gray-200">

                <div class="absolute -top-20 -right-20 w-52 h-52 rounded-full bg-fuchsia-50"></div>

                <div class="absolute -bottom-24 -left-20 w-60 h-60 rounded-full bg-purple-50"></div>


                <div class="relative">

                    <div class="w-20 h-20 mx-auto rounded-3xl bg-gradient-to-br from-fuchsia-50 to-purple-50 flex items-center justify-center mb-5">

                        <x-icon
                            name="calendar"
                            class="w-9 h-9 text-fuchsia-400"
                        />

                    </div>


                    <p class="font-display text-xl font-black text-gray-900">
                        Aucun événement pour le moment
                    </p>


                    <p class="text-sm text-gray-500 mt-2 max-w-md mx-auto px-4">
                        Commence par créer ton premier événement et partage-le avec ton public.
                    </p>


                    <a
                        href="{{ route('organizer.events.create') }}"
                        class="inline-flex items-center gap-2 mt-6 btn-gradient text-white px-5 py-3 rounded-2xl font-bold shadow-glow hover:brightness-105 hover:-translate-y-0.5 transition-all"
                    >

                        <x-icon
                            name="plus"
                            class="w-4 h-4"
                        />

                        Créer mon premier événement

                    </a>

                </div>

            </div>

        @endforelse

    </div>

</div>

@endsection
```