@extends('layouts.frontend')
@section('title', 'Events - ' . church_name())
@section('content')

<!-- Hero Section -->
<section class="relative py-24 bg-gradient-to-br from-royal-800 via-royal-900 to-gray-900 overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1920')] bg-cover bg-center opacity-20"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-royal-900/95 to-royal-800/80"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center">
            <span class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-gold-500/20 text-gold-400 text-sm font-medium mb-6">
                <i class="fas fa-calendar-alt"></i>
                Community Gatherings
            </span>
            <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">Our Events</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Join us for worship, fellowship, and growth. We have exciting events planned for everyone in our community.
            </p>
        </div>
    </div>
</section>

<!-- Upcoming Events -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Upcoming Events</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        @if($upcomingEvents->count() > 0)
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($upcomingEvents as $event)
                <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="h-32 bg-gradient-to-br from-royal-600 to-royal-800 flex items-center justify-center relative">
                        <div class="absolute inset-0 bg-black/20"></div>
                        <div class="text-center relative z-10">
                            <div class="text-5xl font-cinzel font-bold text-white">{{ \Carbon\Carbon::parse($event->start_date)->format('d') }}</div>
                            <div class="text-gold-400 font-semibold">{{ \Carbon\Carbon::parse($event->start_date)->format('M Y') }}</div>
                        </div>
                        @if($event->event_type)
                        <span class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/20 text-white text-xs font-medium backdrop-blur-sm">
                            {{ ucfirst($event->event_type) }}
                        </span>
                        @endif
                    </div>
                    <div class="p-6">
                        <h3 class="font-cinzel text-xl font-bold text-gray-900 mb-2">{{ $event->title }}</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">{{ Str::limit($event->description, 100) }}</p>
                        
                        <div class="space-y-2 text-sm text-gray-500 mb-4">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-clock text-gold-500"></i>
                                <span>{{ \Carbon\Carbon::parse($event->start_date)->format('h:i A') }} - {{ \Carbon\Carbon::parse($event->end_date)->format('h:i A') }}</span>
                            </div>
                            @if($event->location)
                            <div class="flex items-center gap-2">
                                <i class="fas fa-map-marker-alt text-gold-500"></i>
                                <span>{{ $event->location }}</span>
                            </div>
                            @endif
                        </div>
                        
                        @if($event->enable_rsvp)
                        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                            <span class="text-xs text-gray-500">
                                <i class="fas fa-users mr-1"></i>
                                {{ $event->rsvps_count ?? 0 }} {{ Str::plural('RSVP', $event->rsvps_count ?? 0) }}
                            </span>
                            @if(!$event->rsvp_deadline || \Carbon\Carbon::parse($event->rsvp_deadline) > now())
                            <a href="{{ route('frontend.events.rsvp', $event) }}" class="px-4 py-2 bg-gold-500 text-white rounded-lg text-sm font-medium hover:bg-gold-600 transition-colors">
                                RSVP Now
                            </a>
                            @else
                            <span class="px-3 py-1 bg-gray-100 text-gray-500 rounded-lg text-xs">RSVP Closed</span>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-16 bg-white rounded-2xl shadow-lg">
                <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
                    <i class="fas fa-calendar-times text-4xl text-gray-400"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">No Upcoming Events</h3>
                <p class="text-gray-500">Check back soon for new events!</p>
            </div>
        @endif
    </div>
</section>

<!-- Event Types -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Types of Events</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">We host a variety of events for all ages and interests</p>
        </div>
        
        <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
            <div class="text-center p-6 rounded-2xl bg-gray-50 hover:bg-royal-50 transition-colors">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-royal-100 flex items-center justify-center">
                    <i class="fas fa-praying-hands text-2xl text-royal-600"></i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Worship Services</h3>
                <p class="text-sm text-gray-500">Sunday services and special worship nights</p>
            </div>
            
            <div class="text-center p-6 rounded-2xl bg-gray-50 hover:bg-royal-50 transition-colors">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-bible text-2xl text-blue-600"></i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Bible Study</h3>
                <p class="text-sm text-gray-500">Deep dive into God's Word together</p>
            </div>
            
            <div class="text-center p-6 rounded-2xl bg-gray-50 hover:bg-royal-50 transition-colors">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-100 flex items-center justify-center">
                    <i class="fas fa-users text-2xl text-purple-600"></i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Youth Events</h3>
                <p class="text-sm text-gray-500">Activities and fellowship for young people</p>
            </div>
            
            <div class="text-center p-6 rounded-2xl bg-gray-50 hover:bg-royal-50 transition-colors">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-child text-2xl text-green-600"></i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Children's Ministry</h3>
                <p class="text-sm text-gray-500">Fun and learning for kids</p>
            </div>
        </div>
    </div>
</section>

<!-- Past Events -->
@if($pastEvents->count() > 0)
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Past Events</h2>
            <div class="w-24 h-1 gold-gradient mx-auto rounded-full"></div>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($pastEvents as $event)
            <div class="bg-white rounded-xl p-5 shadow-md opacity-80 hover:opacity-100 transition-opacity">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-calendar-check text-gray-400"></i>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 text-sm">{{ $event->title }}</h4>
                        <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($event->start_date)->format('M d, Y') }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Call to Action -->
<section class="py-20 bg-gradient-to-r from-royal-700 to-royal-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-cinzel text-4xl font-bold text-white mb-6">Want to Get Involved?</h2>
        <p class="text-xl text-royal-200 mb-8">
            There are many ways to serve and participate in our church events. Contact us today!
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('frontend.contact') }}" class="px-8 py-4 bg-white text-royal-800 rounded-full font-semibold hover:bg-gray-100 transition-colors">
                <i class="fas fa-envelope mr-2"></i>Contact Us
            </a>
            <a href="{{ route('frontend.services') }}" class="px-8 py-4 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors">
                <i class="fas fa-church mr-2"></i>View Services
            </a>
        </div>
    </div>
</section>

@endsection