@extends('layouts.public-layout')

@section('title', $event->title . ' - Événements - MMPV')

@section('content')
    <!-- Breadcrumb -->
    <section class="bg-gray-100 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex text-gray-600 text-sm">
                <a href="{{ route('public.home') }}" class="hover:text-blue-600">
                    <i class="fas fa-home mr-1"></i>Accueil
                </a>
                <span class="mx-2">/</span>
                <a href="{{ route('public.events') }}" class="hover:text-blue-600">Événements</a>
                <span class="mx-2">/</span>
                <span class="text-gray-900">{{ $event->title }}</span>
            </nav>
        </div>
    </section>

    @php
        // Utiliser la méthode getAutoStatus() qui tient compte des heures
        $status = $event->getAutoStatus();
        $eventDate = \Carbon\Carbon::parse($event->event_date);
        $endDate = $event->end_date ? \Carbon\Carbon::parse($event->end_date) : null;

        // Définir les couleurs et textes selon le statut
        if ($status === 'ongoing') {
            $statusColor = 'green';
            $statusIcon = 'play-circle';
            $statusText = 'En cours';
        } elseif ($status === 'upcoming') {
            $statusColor = 'blue';
            $statusIcon = 'clock';
            $statusText = 'À venir';
        } else {
            $statusColor = 'gray';
            $statusIcon = 'check-circle';
            $statusText = 'Terminé';
        }
    @endphp

    <!-- Event Header -->
    <section class="bg-gradient-to-r {{ $status === 'ongoing' ? 'from-green-600' : ($status === 'upcoming' ? 'from-blue-600' : 'from-gray-600') }} to-purple-600 text-white py-12 sm:py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="inline-block bg-white bg-opacity-20 px-3 sm:px-4 py-2 rounded-lg mb-3 sm:mb-4 text-sm sm:text-base">
                    <span class="font-semibold">
                        <i class="fas fa-{{ $statusIcon }} mr-2"></i>{{ $statusText }}
                    </span>
                </div>
                <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 px-2 break-words">{{ $event->title }}</h1>

                <!-- Event Date -->
                <div class="flex flex-col items-center text-base sm:text-lg md:text-xl text-blue-100 mb-4 px-4">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-calendar-alt mr-2 sm:mr-3"></i>
                        <span class="text-center">{{ $eventDate->translatedFormat('l j F Y') }}</span>
                    </div>
                    @if($event->event_time)
                        <div class="flex items-center">
                            <i class="fas fa-clock mr-2 sm:mr-3"></i>
                            <span>{{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                            @if($event->end_time)
                                - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                            @endif
                            </span>
                        </div>
                    @endif
                    @if($event->is_recurring)
                        <div class="flex items-center mt-2">
                            <span class="bg-indigo-500 bg-opacity-30 px-4 py-2 rounded-full">
                                <i class="fas fa-repeat mr-2"></i>{{ $event->getRecurrenceDescription() }}
                            </span>
                        </div>
                    @endif
                    @if($endDate && !$eventDate->isSameDay($endDate))
                        <div class="mt-2 text-lg">
                            <i class="fas fa-arrow-right-long mx-2"></i>
                            {{ $endDate->translatedFormat('l j F Y') }}
                        </div>
                    @endif
                </div>

                <!-- Time Until Event -->
                @if($status === 'upcoming')
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm inline-block px-6 py-3 rounded-full mt-4">
                        <i class="fas fa-hourglass-half mr-2"></i>
                        <span class="font-semibold">Dans {{ $eventDate->diffForHumans() }}</span>
                    </div>
                @elseif($status === 'ongoing')
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm inline-block px-6 py-3 rounded-full mt-4 animate-pulse">
                        <i class="fas fa-broadcast-tower mr-2"></i>
                        <span class="font-semibold">Événement en cours</span>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Event Details -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Main Content -->
                <div class="lg:col-span-2">
                    <!-- Description -->
                    @if($event->description)
                        <div class="bg-white rounded-2xl shadow-md p-8 mb-8">
                            <h2 class="text-2xl font-bold text-gray-900 mb-6">
                                <i class="fas fa-info-circle mr-2 text-blue-600"></i>À propos de l'événement
                            </h2>
                            <div class="prose max-w-none text-gray-700 text-lg leading-relaxed">
                                {{ $event->description }}
                            </div>
                        </div>
                    @endif

                    <!-- Event Details Grid -->
                    <div class="bg-white rounded-2xl shadow-md p-8 mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-list-check mr-2 text-blue-600"></i>Informations pratiques
                        </h2>

                        <div class="grid md:grid-cols-2 gap-6">
                            <!-- Date -->
                            <div class="bg-blue-50 rounded-xl p-5">
                                <div class="flex items-start">
                                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                                        <i class="fas fa-calendar-days text-blue-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-900 mb-1">Date</p>
                                        <p class="text-gray-700">{{ $eventDate->translatedFormat('l j F Y') }}</p>
                                        @if($endDate && !$eventDate->isSameDay($endDate))
                                            <p class="text-gray-600 text-sm mt-1">
                                                <i class="fas fa-arrow-right mr-1"></i>{{ $endDate->translatedFormat('j F Y') }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Time -->
                            @if($event->event_time)
                                <div class="bg-purple-50 rounded-xl p-5">
                                    <div class="flex items-start">
                                        <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                                            <i class="fas fa-clock text-purple-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-gray-900 mb-1">Heure</p>
                                            <p class="text-gray-700">
                                                {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                                @if($event->end_time)
                                                    - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Recurrence -->
                            @if($event->is_recurring)
                                <div class="bg-indigo-50 rounded-xl p-5">
                                    <div class="flex items-start">
                                        <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                                            <i class="fas fa-repeat text-indigo-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <p class="text-gray-700 font-semibold">{{ $event->getRecurrenceDescription() }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Location -->
                            @if($event->location)
                                <div class="bg-red-50 rounded-xl p-5">
                                    <div class="flex items-start">
                                        <div class="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                                            <i class="fas fa-location-dot text-red-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-gray-900 mb-1">Lieu</p>
                                            <p class="text-gray-700">{{ $event->location }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Status -->
                            <div class="{{ $status === 'ongoing' ? 'bg-green-50' : ($status === 'upcoming' ? 'bg-blue-50' : 'bg-gray-50') }} rounded-xl p-5">
                                <div class="flex items-start">
                                    <div class="{{ $status === 'ongoing' ? 'bg-green-100' : ($status === 'upcoming' ? 'bg-blue-100' : 'bg-gray-100') }} w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                                        <i class="fas fa-{{ $statusIcon }} {{ $status === 'ongoing' ? 'text-green-600' : ($status === 'upcoming' ? 'text-blue-600' : 'text-gray-600') }} text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-900 mb-1">Statut</p>
                                        <p class="{{ $status === 'ongoing' ? 'text-green-700' : ($status === 'upcoming' ? 'text-blue-700' : 'text-gray-700') }} font-semibold">{{ $statusText }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Church Info -->
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-md p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-church mr-2 text-blue-600"></i>Organisé par
                        </h2>

                        <div class="bg-white rounded-xl p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-4">{{ $event->church->name }}</h3>

                            <div class="space-y-3">
                                <div class="flex items-center text-gray-700">
                                    <i class="fas fa-map-marker-alt text-red-600 w-6 mr-3"></i>
                                    <span>{{ $event->church->city }}, {{ $event->church->country }}</span>
                                </div>

                                @if($event->church->phone)
                                    <div class="flex items-center">
                                        <i class="fas fa-phone text-green-600 w-6 mr-3"></i>
                                        <a href="tel:{{ $event->church->phone }}" class="text-blue-600 hover:text-blue-700">
                                            {{ $event->church->phone }}
                                        </a>
                                    </div>
                                @endif

                                @if($event->church->email)
                                    <div class="flex items-center">
                                        <i class="fas fa-envelope text-purple-600 w-6 mr-3 flex-shrink-0"></i>
                                        <a href="mailto:{{ $event->church->email }}" class="text-blue-600 hover:text-blue-700 break-all text-sm sm:text-base">
                                            {{ $event->church->email }}
                                        </a>
                                    </div>
                                @endif

                                @if($event->church->pastor)
                                    <div class="flex items-center text-gray-700">
                                        <i class="fas fa-user-tie text-orange-600 w-6 mr-3"></i>
                                        <span>Responsable {{ $event->church->pastor }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="mt-6 pt-6 border-t">
                                <a href="{{ route('public.church.show', $event->church->slug) }}" class="block w-full bg-blue-600 text-white text-center px-4 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
                                    <i class="fas fa-arrow-right mr-2"></i>Voir l'église
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1">

                    <!-- Other Events -->
                    @if($event->church->events->where('status', 'upcoming')->where('id', '!=', $event->id)->count() > 0)
                        <div class="bg-white rounded-2xl shadow-md p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-6">
                                <i class="fas fa-calendar-days mr-2 text-blue-600"></i>Autres événements
                            </h3>

                            <div class="space-y-4">
                                @foreach($event->church->events->where('status', 'upcoming')->where('id', '!=', $event->id)->take(3) as $otherEvent)
                                    @php
                                        $otherEventDate = \Carbon\Carbon::parse($otherEvent->event_date);
                                    @endphp
                                    <a href="{{ route('public.event.show', $otherEvent->slug) }}" class="block bg-gray-50 rounded-lg p-4 hover:bg-blue-50 transition">
                                        <h4 class="font-semibold text-gray-900 mb-2">{{ $otherEvent->title }}</h4>
                                        <p class="text-sm text-gray-600">
                                            <i class="fas fa-calendar mr-1 text-blue-600"></i>
                                            {{ $otherEventDate->translatedFormat('d M Y') }}
                                        </p>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Back Button -->
            <div class="mt-12 text-center">
                <a href="{{ route('public.events') }}" class="inline-block bg-gray-200 text-gray-700 px-8 py-4 rounded-lg font-bold hover:bg-gray-300 transition">
                    <i class="fas fa-arrow-left mr-2"></i>Retour aux événements
                </a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-4">
                <i class="fas fa-bell mr-3"></i>Ne manquez aucun événement
            </h2>
            <p class="text-xl text-blue-100 mb-8">
                Contactez votre église locale pour recevoir les notifications sur les prochains événements
            </p>
            <div class="flex flex-wrap gap-4 justify-center">
                <a href="{{ route('public.churches') }}" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-blue-50 transition inline-flex items-center">
                    <i class="fas fa-church mr-2"></i>Trouver mon église
                </a>
                <a href="{{ route('public.events') }}" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold hover:bg-purple-50 transition inline-flex items-center">
                    <i class="fas fa-calendar-alt mr-2"></i>Tous les événements
                </a>
            </div>
        </div>
    </section>
@endsection