@extends('layouts.frontend')

@section('title', 'ইভেন্টসমূহ - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">ইভেন্ট ক্যালেন্ডার</h1>
                <p class="text-bd-green-100 text-lg">আসন্ন অনুষ্ঠান ও কর্মসূচি</p>
            </div>
        </div>
    </section>

    <!-- Filter Section -->
    <section class="py-6 bg-gray-50 border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <a href="{{ route('events') }}"
                    class="px-4 py-2 rounded-full text-sm font-medium transition
                        {{ !request('type') ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                    সব
                </a>
                @foreach (\App\Models\Event::TYPES as $key => $label)
                    <a href="{{ route('events', ['type' => $key]) }}"
                        class="px-4 py-2 rounded-full text-sm font-medium transition
                            {{ request('type') === $key ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Featured Events -->
    @if ($featuredEvents->count() > 0)
        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">
                    <i class="fas fa-star text-yellow-500 mr-2"></i>প্রধান ইভেন্ট
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($featuredEvents as $event)
                        <a href="{{ route('events.show', $event) }}"
                            class="group bg-gradient-to-br from-bd-green-50 to-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition">
                            @if ($event->cover_image)
                                <div class="aspect-video overflow-hidden">
                                    <img src="{{ Storage::url($event->cover_image) }}" alt="{{ $event->title }}"
                                        class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                </div>
                            @else
                                <div class="aspect-video bg-bd-green-100 flex items-center justify-center">
                                    <i class="fas fa-calendar-alt text-5xl text-bd-green-300"></i>
                                </div>
                            @endif
                            <div class="p-6">
                                <div class="flex items-center gap-2 mb-3">
                                    <span class="px-3 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700">
                                        <i class="fas fa-star mr-1"></i>ফিচার্ড
                                    </span>
                                    <span
                                        class="px-3 py-1 text-xs font-medium rounded-full bg-bd-green-100 text-bd-green-700">
                                        {{ $event->type_label }}
                                    </span>
                                </div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-bd-green-600 transition">
                                    {{ $event->title }}
                                </h3>
                                <div class="flex items-center text-gray-600 text-sm mb-2">
                                    <i class="fas fa-calendar mr-2"></i>
                                    {{ $event->event_date->format('d M, Y') }}
                                    @if ($event->event_time)
                                        <span class="mx-2">|</span>
                                        <i class="fas fa-clock mr-1"></i>
                                        {{ $event->event_time->format('h:i A') }}
                                    @endif
                                </div>
                                @if ($event->location)
                                    <div class="flex items-center text-gray-600 text-sm">
                                        <i class="fas fa-map-marker-alt mr-2"></i>
                                        {{ $event->location }}
                                    </div>
                                @endif
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Upcoming Events -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">আসন্ন ইভেন্টসমূহ</h2>

            @if ($events->count() > 0)
                <div class="space-y-6">
                    @foreach ($events as $event)
                        <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
                            <div class="flex flex-col md:flex-row">
                                <!-- Date Badge -->
                                <div
                                    class="md:w-32 bg-bd-green-500 text-white p-4 flex flex-col items-center justify-center">
                                    <span class="text-3xl font-bold">{{ $event->event_date->format('d') }}</span>
                                    <span class="text-sm uppercase">{{ $event->event_date->format('M') }}</span>
                                    <span class="text-sm">{{ $event->event_date->format('Y') }}</span>
                                </div>

                                <!-- Event Info -->
                                <div class="flex-1 p-6">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span
                                            class="px-3 py-1 text-xs font-medium rounded-full bg-bd-green-100 text-bd-green-700">
                                            {{ $event->type_label }}
                                        </span>
                                        @if ($event->is_registration_open && $event->isRegistrationAvailable())
                                            <span
                                                class="px-3 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700">
                                                <i class="fas fa-check-circle mr-1"></i>নিবন্ধন খোলা
                                            </span>
                                        @endif
                                    </div>

                                    <h3 class="text-xl font-bold text-gray-900 mb-2">
                                        <a href="{{ route('events.show', $event) }}"
                                            class="hover:text-bd-green-600 transition">
                                            {{ $event->title }}
                                        </a>
                                    </h3>

                                    <div class="flex flex-wrap gap-4 text-sm text-gray-600 mb-3">
                                        @if ($event->event_time)
                                            <span><i
                                                    class="fas fa-clock mr-1"></i>{{ $event->event_time->format('h:i A') }}</span>
                                        @endif
                                        @if ($event->venue)
                                            <span><i class="fas fa-map-marker-alt mr-1"></i>{{ $event->venue }}</span>
                                        @endif
                                        @if ($event->location)
                                            <span><i class="fas fa-location-arrow mr-1"></i>{{ $event->location }}</span>
                                        @endif
                                    </div>

                                    @if ($event->description)
                                        <p class="text-gray-600 line-clamp-2">{!! strip_tags($event->description) !!}</p>
                                    @endif
                                </div>

                                <!-- Action Button -->
                                <div
                                    class="md:w-48 p-6 flex items-center justify-center border-t md:border-t-0 md:border-l">
                                    <a href="{{ route('events.show', $event) }}"
                                        class="px-6 py-3 bg-bd-green-500 text-white rounded-lg font-medium hover:bg-bd-green-600 transition">
                                        বিস্তারিত দেখুন
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-10">
                    {{ $events->links() }}
                </div>
            @else
                <div class="text-center py-16">
                    <div class="w-24 h-24 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">কোনো আসন্ন ইভেন্ট নেই</h3>
                    <p class="text-gray-600">এই মুহূর্তে কোনো নির্ধারিত ইভেন্ট নেই।</p>
                </div>
            @endif
        </div>
    </section>

    @push('styles')
        <style>
            .line-clamp-2 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        </style>
    @endpush
@endsection