@extends('layouts.app')

@section('title', $event->title)

@section('content')
    <div class="h-56 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-2xl flex items-center justify-center text-white text-3xl font-bold mb-6 p-6 text-center">
        {{ $event->title }}
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
            <span class="text-xs uppercase tracking-wide text-brand font-semibold">{{ $event->category->name }}</span>
            <h1 class="text-3xl font-bold mt-1">{{ $event->title }}</h1>

            <div class="mt-4 space-y-1 text-gray-600">
                <p>📅 {{ $event->event_date->format('l, F j, Y \a\t g:i A') }}</p>
                <p>📍 {{ $event->venue->name }}, {{ $event->venue->city }}</p>
                <p>🎤 Organized by {{ $event->organizer->name }}</p>
            </div>

            <div class="mt-6 prose max-w-none">
                <h2 class="text-lg font-semibold mb-2">About this event</h2>
                <p class="text-gray-700">{{ $event->description }}</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 h-fit">
            <h3 class="font-semibold mb-4">Tickets</h3>
            <ul class="space-y-2 mb-4 text-sm">
                @foreach ($event->ticketTypes as $type)
                    <li class="flex justify-between">
                        <span>{{ $type->name }}</span>
                        <span class="font-medium">${{ number_format($type->price, 2) }}</span>
                    </li>
                @endforeach
            </ul>

            @auth
                <a href="{{ route('checkout.index', $event) }}"
                   class="block text-center bg-brand text-white rounded-lg py-2.5 font-medium hover:bg-indigo-700">
                    Get Tickets
                </a>
            @else
                <a href="{{ route('login') }}"
                   class="block text-center bg-brand text-white rounded-lg py-2.5 font-medium hover:bg-indigo-700">
                    Sign in to buy tickets
                </a>
            @endauth
        </div>
    </div>
@endsection