@extends('page.layouts.main')
@use('\Carbon\Carbon');
@section('content')
<section class="py-16 sm:py-24">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-2" id="events">
        <div class="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-0 mb-8 border-b border-gray-100 pb-6">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight">
                <span class="inline-block bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
                    PAST EVENT
                </span>
            </h1>
            {{-- Event Search Component --}}
            <form action="{{ route('events') }}#events" method="GET" class="w-full max-w-md sm:w-auto">
                <div class="flex items-center bg-white border border-gray-200 rounded-lg shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100 transition">
                    <input
                        type="text"
                        id="search"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search events…"
                        class="flex-1 bg-transparent border-none outline-none px-4 py-2.5 text-gray-800 placeholder-gray-400 text-base"
                        autocomplete="off"
                        aria-label="Search events"
                    >
                    <button type="submit" class="inline-flex items-center justify-center h-10 px-4 bg-blue-600 hover:bg-blue-700 transition-colors text-white font-bold rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <title>Search</title>
                            <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/>
                            <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        <span class="sr-only">Search</span>
                    </button>
                </div>
            </form>
        </div>
        {{-- End Search --}}

        @if($events->count() === 0)
            <div class="text-center py-16">
                <p class="text-lg font-medium text-gray-600">No events available right now.</p>
                <p class="mt-2 text-sm text-gray-400">Please check back later!</p>
            </div>
        @else
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($events as $event)
                    @php
                        $eventTitle = $event->title ?? '';
                        $eventDesc = $event->description ?? '';
                        $eventImg = $event->banner ? asset('media/event/'.$event->banner) : asset('media/event/default.jpg');
                        $eventCategory = $event->eventCategory->name ?? null;
                        $eventLocation = $event->location ?? $event->city ?? null;
                        $eventDate = Carbon::parse($event->date)->translatedFormat('F j, Y');
                        $eventTimeStart = $event->start_time ? Carbon::parse($event->start_time)->format('H:i') : null;
                        $eventTimeEnd = $event->end_time ? Carbon::parse($event->end_time)->format('H:i') : null;
                    @endphp

                    <article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 ring-1 ring-gray-900/5 overflow-hidden flex flex-col">
                        <a href="{{ route('events.show', $event->slug) }}" class="block overflow-hidden">
                            <img src="{{ $eventImg }}" alt="{{ $eventTitle }}" class="h-48 w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105">
                        </a>
                        <div class="p-6 flex-1 flex flex-col">
                            {{-- CATEGORY --}}
                            @if($eventCategory)
                                <span class="inline-block mb-2 bg-green-50 text-green-700 text-xs font-semibold px-2.5 py-1 rounded-full border border-green-100 truncate max-w-[140px]" title="{{ $eventCategory }}">
                                    {{ $eventCategory }}
                                </span>
                            @endif
                            <h2 class="text-lg font-semibold text-gray-800">
                                <a href="{{ route('events.show', $event->slug) }}" class="hover:text-blue-600 transition-colors">{{ $eventTitle }}</a>
                            </h2>
                            @if($eventDesc)
                                <p class="mt-3 text-sm text-gray-500 line-clamp-3">{{ Str::limit(strip_tags($eventDesc), 112) }}</p>
                            @endif

                            <div class="mt-3 text-xs text-gray-500 space-y-1">
                                <div>
                                    <strong>Date:</strong> {{ $eventDate }}
                                </div>
                                @if($eventTimeStart)
                                <div>
                                    <strong>Time:</strong> {{ $eventTimeStart }}{{ $eventTimeEnd ? ' - '.$eventTimeEnd : '' }}
                                </div>
                                @endif
                                @if($eventLocation)
                                <div>
                                    <strong>Location:</strong> {{ $eventLocation }}
                                </div>
                                @endif
                            </div>

                            <div class="mt-auto pt-5">
                                <a href="{{ route('events.show', $event->slug) }}" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors">
                                    View Detail
                                    <span class="ml-1.5 transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
                                </a>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-16">
                {!! $events->appends(request()->except('page'))->links('pagination.tailwind') !!}
            </div>
        @endif
    </div>
</section>
@endsection