@extends('layouts.public-layout')

@section("title", "Événements - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@section('content')
    <!-- Page Header -->
    <section class="relative bg-gradient-to-br from-primary-navy via-blue-900 to-purple-900 text-white py-20 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 right-10 w-64 h-64 bg-primary-gold rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-10 w-72 h-72 bg-blue-500 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="inline-block mb-4 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                    <span class="text-primary-gold font-semibold">Rejoignez-nous</span>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 font-serif">
                    Événements
                </h1>
                <p class="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
                    Découvrez tous nos événements et rejoignez-nous pour des moments de communion, d'adoration et de célébration
                </p>
            </div>
        </div>
    </section>

    <!-- Events Timeline -->
    <section class="py-20 bg-neutral-cream">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if($events->count() > 0)
                <!-- Filter Tabs -->
                <div class="flex flex-wrap gap-3 mb-12 justify-center">
                    <button class="filter-btn active bg-primary-gold text-white px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all shadow-sm" data-status="all">
                        Tous
                    </button>
                    <button class="filter-btn bg-white text-text-dark px-6 py-3 rounded-full font-semibold hover:bg-neutral-soft-gray transition-all border border-gray-200" data-status="upcoming">
                        À venir
                    </button>
                    <button class="filter-btn bg-white text-text-dark px-6 py-3 rounded-full font-semibold hover:bg-neutral-soft-gray transition-all border border-gray-200" data-status="ongoing">
                        En cours
                    </button>
                    <button class="filter-btn bg-white text-text-dark px-6 py-3 rounded-full font-semibold hover:bg-neutral-soft-gray transition-all border border-gray-200" data-status="completed">
                        Terminés
                    </button>
                </div>

                <!-- Events List -->
                <div class="space-y-6">
                    @foreach($events as $event)
                        @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

                        <div class="event-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition" data-status="{{ $status }}">
                            <div class="flex flex-col md:flex-row">
                                <!-- Date Badge -->
                                <div class="bg-{{ $statusColor }}-600 text-white p-4 md:p-6 md:w-48 flex flex-row md:flex-col items-center justify-center md:justify-center">
                                    <div class="text-center">
                                        <p class="text-3xl md:text-4xl font-bold">{{ $eventDate->format('d') }}</p>
                                        <p class="text-lg md:text-xl">{{ $eventDate->translatedFormat('M') }}</p>
                                        <p class="text-base md:text-lg">{{ $eventDate->format('Y') }}</p>
                                        @if($endDate && !$eventDate->isSameDay($endDate))
                                            <div class="my-2 border-t border-white opacity-50"></div>
                                            <p class="text-sm">au</p>
                                            <p class="text-xl md:text-2xl font-bold">{{ $endDate->format('d') }}</p>
                                            <p class="text-base md:text-lg">{{ $endDate->translatedFormat('M') }}</p>
                                        @endif
                                    </div>
                                </div>

                                <!-- Event Details -->
                                <div class="p-4 md:p-6 flex-1">
                                    <div class="flex flex-col md:flex-row md:items-start md:justify-between mb-3 space-y-2 md:space-y-0">
                                        <div class="flex-1">
                                            <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 mb-2">
                                                <h3 class="text-xl md:text-2xl font-bold text-gray-900 break-words">{{ $event->title }}</h3>
                                                <span class="bg-{{ $statusColor }}-100 text-{{ $statusColor }}-700 px-3 py-1 rounded-full text-sm font-semibold w-fit">
                                                    <i class="fas fa-{{ $statusIcon }} mr-1"></i>{{ $statusText }}
                                                </span>
                                            </div>

                                            <!-- Church -->
                                            @if($event->church)
                                                <div class="flex flex-wrap items-center text-gray-600 mb-3 text-sm md:text-base">
                                                    <i class="fas fa-church mr-2 text-purple-600"></i>
                                                    <span class="font-medium">{{ $event->church->name }}</span>
                                                    <span class="mx-2 hidden md:inline">•</span>
                                                    <span class="w-full md:w-auto mt-1 md:mt-0">{{ $event->church->city }}, {{ $event->church->country }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Time & Recurrence Info -->
                                    <div class="flex flex-wrap gap-3 mb-3">
                                        @if($event->is_recurring)
                                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-semibold">
                                                <i class="fas fa-repeat mr-1"></i>Récurrent
                                            </span>
                                        @endif
                                        @if($event->event_time)
                                            <span class="flex items-center text-gray-700">
                                                <i class="fas fa-clock text-purple-600 mr-2"></i>
                                                {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                                @if($event->end_time)
                                                    - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                                @endif
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Recurrence Description -->
                                    @if($event->is_recurring && $event->getRecurrenceDescription())
                                        <div class="flex items-start mb-3 bg-indigo-50 p-3 rounded-lg">
                                            <i class="fas fa-info-circle text-indigo-600 mt-1 mr-3"></i>
                                            <span class="text-indigo-800 text-sm font-medium">{{ $event->getRecurrenceDescription() }}</span>
                                        </div>
                                    @endif

                                    <!-- Location -->
                                    @if($event->location)
                                        <div class="flex items-start mb-3">
                                            <i class="fas fa-map-marker-alt text-red-600 mt-1 mr-3"></i>
                                            <span class="text-gray-700">{{ $event->location }}</span>
                                        </div>
                                    @endif

                                    <!-- Description -->
                                    @if($event->description)
                                        <div class="mt-4 p-3 md:p-4 bg-gray-50 rounded-lg">
                                            <p class="text-gray-700 text-sm md:text-base break-words line-clamp-3" id="desc-{{ $event->id }}">
                                                {{ $event->description }}
                                            </p>
                                            @if(strlen($event->description) > 150)
                                                <button
                                                    onclick="toggleDescription({{ $event->id }})"
                                                    id="btn-{{ $event->id }}"
                                                    class="text-blue-600 hover:text-blue-700 text-sm mt-2 font-medium flex items-center">
                                                    <span class="show-more">Voir plus</span>
                                                    <span class="show-less hidden">Voir moins</span>
                                                    <i class="fas fa-chevron-down ml-1 show-more"></i>
                                                    <i class="fas fa-chevron-up ml-1 show-less hidden"></i>
                                                </button>
                                            @endif
                                        </div>
                                    @endif

                                    <!-- Event Info Footer -->
                                    <div class="mt-4 pt-4 border-t flex flex-wrap gap-2 md:gap-4 text-xs md:text-sm text-gray-600">
                                        @if($eventDate->isFuture())
                                            <div class="flex items-center">
                                                <i class="fas fa-hourglass-half mr-2 text-blue-600"></i>
                                                <span>Dans {{ $eventDate->diffForHumans() }}</span>
                                            </div>
                                        @elseif($status === 'ongoing')
                                            <div class="flex items-center">
                                                <i class="fas fa-broadcast-tower mr-2 text-green-600"></i>
                                                <span>Événement en cours</span>
                                            </div>
                                        @else
                                            <div class="flex items-center">
                                                <i class="fas fa-history mr-2 text-gray-600"></i>
                                                <span>{{ $eventDate->diffForHumans() }}</span>
                                            </div>
                                        @endif

                                        @if($event->church && $event->church->contact_phone)
                                            <a href="tel:{{ $event->church->contact_phone }}" class="flex items-center text-blue-600 hover:text-blue-700">
                                                <i class="fas fa-phone mr-2"></i>
                                                <span>{{ $event->church->contact_phone }}</span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="bg-white rounded-lg shadow-md p-16 text-center">
                    <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-calendar-times text-gray-400 text-5xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucun événement disponible</h3>
                    <p class="text-gray-600 mb-6">
                        Il n'y a pas d'événement programmé pour le moment. Revenez plus tard pour découvrir nos prochaines activités.
                    </p>
                    <a href="{{ route('public.home') }}" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition">
                        <i class="fas fa-home mr-2"></i>Retour à l'accueil
                    </a>
                </div>
            @endif
        </div>
    </section>

    <!-- Call to Action -->
    @if($events->count() > 0)
        <section class="py-16 bg-white">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Ne manquez aucun événement</h2>
                <p class="text-xl text-gray-600 mb-8">
                    Contactez votre église locale pour recevoir les notifications sur les prochains événements
                </p>
                <a href="{{ route('public.churches') }}" class="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition inline-block">
                    <i class="fas fa-church mr-2"></i>Trouver mon église
                </a>
            </div>
        </section>
    @endif
@endsection

@push('scripts')
<script>
    // Event filter functionality
    document.addEventListener('DOMContentLoaded', function() {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const eventCards = document.querySelectorAll('.event-card');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const status = this.dataset.status;

                // Update active button
                filterBtns.forEach(b => {
                    b.classList.remove('active', 'bg-primary-gold', 'text-white', 'shadow-sm');
                    b.classList.add('bg-white', 'text-text-dark', 'border', 'border-gray-200');
                });
                this.classList.add('active', 'bg-primary-gold', 'text-white', 'shadow-sm');
                this.classList.remove('bg-white', 'text-text-dark', 'border', 'border-gray-200');

                // Filter events
                eventCards.forEach(card => {
                    if (status === 'all' || card.dataset.status === status) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    });

    // Toggle description visibility
    function toggleDescription(eventId) {
        const description = document.getElementById('desc-' + eventId);
        const button = document.getElementById('btn-' + eventId);
        const showMoreElements = button.querySelectorAll('.show-more');
        const showLessElements = button.querySelectorAll('.show-less');

        description.classList.toggle('line-clamp-3');

        showMoreElements.forEach(el => el.classList.toggle('hidden'));
        showLessElements.forEach(el => el.classList.toggle('hidden'));
    }
</script>
@endpush