@extends('layouts.app')

@section('title', 'Discover Events')

@section('content')
    <div class="mb-8 bg-gradient-to-r from-brand to-indigo-700 rounded-2xl p-8 text-white">
        <h1 class="text-3xl font-bold mb-2">Discover Concerts, Sports & Live Events</h1>
        <p class="text-indigo-100">Find and book tickets to unforgettable experiences.</p>
    </div>

    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-8 bg-white p-4 rounded-xl shadow-sm">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search events..."
               class="border rounded-lg px-3 py-2 col-span-2">

        <select name="category" class="border rounded-lg px-3 py-2">
            <option value="">All Categories</option>
            @foreach ($categories as $category)
                <option value="{{ $category->slug }}" @selected(request('category') == $category->slug)>{{ $category->name }}</option>
            @endforeach
        </select>

        <select name="city" class="border rounded-lg px-3 py-2">
            <option value="">All Cities</option>
            @foreach ($cities as $city)
                <option value="{{ $city }}" @selected(request('city') == $city)>{{ $city }}</option>
            @endforeach
        </select>

        <button class="md:col-span-4 bg-brand text-white rounded-lg py-2 font-medium hover:bg-indigo-700">Search</button>
    </form>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($events as $event)
            <a href="{{ route('events.show', $event) }}" class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
                <div class="h-40 bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-semibold text-lg p-4 text-center">
                    {{ $event->title }}
                </div>
                <div class="p-4">
                    <span class="text-xs uppercase tracking-wide text-brand font-semibold">{{ $event->category->name }}</span>
                    <h3 class="font-bold text-lg mt-1">{{ $event->title }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ $event->event_date->format('D, M j, Y • g:i A') }}</p>
                    <p class="text-sm text-gray-500">{{ $event->venue->name }}, {{ $event->venue->city }}</p>
                    <p class="mt-3 font-semibold text-brand">
                        @if ($event->from_price !== null)
                            From ${{ number_format($event->from_price, 2) }}
                        @else
                            Tickets coming soon
                        @endif
                    </p>
                </div>
            </a>
        @empty
            <p class="col-span-full text-center text-gray-500 py-12">No events found. Try a different search.</p>
        @endforelse
    </div>

    <div class="mt-8">
        {{ $events->links() }}
    </div>
@endsection