@extends('layouts.frontend.master')

@section('title', 'Events - BAU 2001–2002 Alumni Association')

@push('css')
{{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
    <style>
        /* Event image styling for consistent aspect ratio */
        .event-image {
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: center;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }

        /* Ensure event images maintain aspect ratio */
        .event-image-container {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Text truncation utilities */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Category badge styling */
        .category-badge {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Event card hover effects */
        .event-card {
            transition: all 0.3s ease;
        }

        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Filter buttons - compact design */
        .filter-btn {
            transition: all 0.3s ease;
            font-size: 0.75rem;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            border: 1px solid #d1d5db;
            background-color: white;
            color: #374151;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.125rem;
            font-weight: 500;
            text-decoration: none;
            line-height: 1;
            height: 1.5rem;
        }

        .filter-btn.active {
            background-color: #10b981;
            color: white;
            border-color: #10b981;
        }

        .filter-btn:hover:not(.active) {
            background-color: #f3f4f6;
            border-color: #9ca3af;
        }

        .filter-btn .count-badge {
            background-color: #e5e7eb;
            color: #6b7280;
            font-size: 0.625rem;
            padding: 0.125rem 0.25rem;
            border-radius: 9999px;
            font-weight: 600;
            min-width: 1.25rem;
            text-align: center;
        }

        .filter-btn.active .count-badge {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
        }

        /* Category badge on event cards - improved readability */
        .category-badge {
            background: linear-gradient(135deg, #1f2937, #111827);
            color: white;
            padding: 0.375rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
@endpush

@section('content')
    <!-- Events Section -->
    <section class="bg-white py-8">
        <div class="container mx-auto px-6">
            <!-- Header and Filter -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-3xl font-bold text-blue-900" style="color: rgb(30 64 175);">
                        All Events
                        <span class="text-lg font-medium text-gray-600">({{ $events->count() }})</span>
                    </h2>
                    <p class="text-gray-500 mt-1">Discover and join our upcoming events.</p>
                </div>
                <!-- Category Filter -->
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('events.public') }}"
                       class="px-4 py-2 rounded-full text-sm font-semibold transition-colors duration-300 {{ !$category || $category === 'all' ? 'bg-blue-800 text-white shadow' : 'bg-white text-blue-800 border border-blue-200 hover:bg-blue-50' }}"
                       style="--tw-bg-opacity: 1; background-color: {{ !$category || $category === 'all' ? 'rgb(30 64 175 / var(--tw-bg-opacity))' : '' }};">
                        All Events
                    </a>
                    @foreach(['conference', 'seminar', 'workshop', 'meeting', 'celebration', 'training', 'exhibition'] as $cat)
                        @if($allEvents->where('category', $cat)->count() > 0)
                            <a href="{{ route('events.public', ['category' => $cat]) }}"
                               class="px-4 py-2 rounded-full text-sm font-semibold transition-colors duration-300 {{ $category === $cat ? 'bg-blue-800 text-white shadow' : 'bg-white text-blue-800 border border-blue-200 hover:bg-blue-50' }}"
                               style="--tw-bg-opacity: 1; background-color: {{ $category === $cat ? 'rgb(30 64 175 / var(--tw-bg-opacity))' : '' }};">
                                {{ ucfirst($cat) }}
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>

            @if($events->count() > 0)
                <!-- Events Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($events as $event)
                        <div
                            class="event-card bg-white rounded-xl shadow-lg overflow-hidden h-full flex flex-col border border-gray-100 transition-shadow duration-300">
                            <!-- Event Image -->
                            <div class="relative h-48">
                                <img
                                    src="{{ $event->files->first() ? asset('storage/' . $event->files->first()->file_path) : asset('frontend/event-banner.png') }}"
                                    alt="{{ $event->name }}"
                                    class="w-full h-full object-cover"
                                />

                                <div class="absolute top-3 left-3 right-3 flex justify-between items-start">
                                    <!-- Category Badge -->
                                    <span class="top-0 left-0 bg-blue-800 text-white text-xs font-bold px-3 py-1 rounded-full"
                                        style="background-color: rgb(30 64 175);">
                                        {{ $event->category_name }}
                                    </span>

                                    <!-- Guest Allowed Badge -->
                                    @if($event->is_guest_allowed)
                                        <span
                                            class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 shadow-sm">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                        </svg>
                                        Guests Allowed
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <!-- Event Content -->
                            <div class="p-5 flex flex-col flex-grow">
                                <h3 class="font-bold text-xl mb-2 text-blue-900 line-clamp-2"
                                    style="color: rgb(30 64 175);">{{ $event->name }}</h3>
                                @if(isset($event->description))
                                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">{!! Str::limit(strip_tags($event->description), 100) !!}</p>
                                @endif
                                <!-- Event Details -->
                                <div class="space-y-2 text-sm text-gray-700 mb-4">
                                    <div class="flex items-center">
                                        <i class="fas fa-map-marker-alt w-4 mr-2 text-blue-800"
                                           style="color: rgb(30 64 175);"></i>
                                        <span>{{ $event->venue }}</span>
                                    </div>
                                    @if($event->dates->isNotEmpty())
                                        @php
                                            $startDate = $event->dates->min('start_date_time');
                                            $endDate = $event->dates->max('end_date_time');
                                        @endphp

                                        @if($startDate && $endDate)
                                            <div class="flex items-center text-gray-500">
                                                <svg class="w-4 h-4 mr-2 text-green-600" fill="none"
                                                     stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          stroke-width="2"
                                                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                    </path>
                                                </svg>
                                                <span class="text-sm">
                                                    {{ \Carbon\Carbon::parse($startDate)->format('M d, Y g:i A') }}
                                                    –
                                                    {{ \Carbon\Carbon::parse($endDate)->format('M d, Y g:i A') }}
                                                </span>
                                            </div>
                                        @else
                                            <div class="flex items-center text-gray-500">
                                                <svg class="w-4 h-4 mr-2 text-green-600" fill="none"
                                                     stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          stroke-width="2"
                                                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                    </path>
                                                </svg>
                                                <span class="text-sm">Date TBD</span>
                                            </div>
                                        @endif
                                    @else
                                        <div class="flex items-center text-gray-500">
                                            <svg class="w-4 h-4 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                            <span class="text-sm">Date TBD</span>
                                        </div>
                                    @endif
                                </div>

                                <div class="flex-grow"></div>

                                <!-- Action Buttons -->
                                <div class="space-y-2 mt-auto pt-4">
                                    <a href="{{ route('events.show', $event->slug) }}"
                                       class="block w-full text-center px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-300 bg-white text-blue-800 border border-blue-200 hover:bg-blue-50"
                                       style="color: rgb(30 64 175);">
                                        View Details
                                    </a>
                                    {{-- @auth
                                        @php
                                            $existingRegistration = \App\Models\EventRegistration::where('user_id', auth()->id())->where('event_id', $event->id)->first();
                                        @endphp
                                        @if($existingRegistration)
                                            <a href="{{ route('events.registration.show', $existingRegistration->id) }}"
                                               class="block w-full text-center px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-300 bg-blue-100 text-blue-800"
                                               style="color: rgb(30 64 175);">
                                                View Registration
                                            </a>
                                        @endif
                                    @else
                                        <a href="{{ route('login') }}"
                                           class="block w-full text-center px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-300 bg-gray-200 text-gray-700 hover:bg-gray-300">
                                            Login to Register
                                        </a>
                                    @endauth --}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-16">
                    <i class="fas fa-calendar-times text-6xl text-gray-300 mb-6"></i>
                    <h3 class="text-2xl font-semibold text-blue-900 mb-4" style="color: rgb(30 64 175);">No Events
                        Available</h3>
                    <p class="text-gray-500 mb-6 max-w-md mx-auto">
                        There are currently no upcoming events. Please check back later.
                    </p>
                    <a href="{{ route('home') }}"
                       class="inline-flex items-center px-6 py-3 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
                       style="background-color: rgb(30 64 175);">
                        <i class="fas fa-home mr-2"></i>
                        Back to Home
                    </a>
                </div>
            @endif
        </div>
    </section>
@endsection