@extends('components.layout')

@section('title', $event->title . ' | Events | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-sm text-gray-500 mb-6">
            @foreach($breadcrumbs as $crumb)
                @if($loop->last)
                    <span class="text-gray-900 font-medium">{{ $crumb['name'] }}</span>
                @else
                    <a href="{{ $crumb['url'] }}" class="hover:text-gray-700">{{ $crumb['name'] }}</a>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                @endif
            @endforeach
        </nav>

        <div class="flex items-center gap-2 mb-4">
            <span class="px-3 py-1 bg-red-100 text-red-700 text-xs font-semibold rounded">{{ $event->category ?? 'General' }}</span>
            @if($event->is_free)
                <span class="px-3 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded">Free Event</span>
            @else
                <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded">Ticketed</span>
            @endif
        </div>

        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ $event->title }}</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            <div class="md:col-span-2">
                @if($event->image)
                    <div class="aspect-video overflow-hidden rounded-lg mb-6">
                        <img src="{{ asset('storage/' . $event->image) }}" alt="{{ $event->title }}" class="w-full h-full object-cover">
                    </div>
                @endif

                @if($event->description)
                    <div class="prose max-w-none mb-6">
                        {!! $event->description !!}
                    </div>
                @endif
            </div>

            <aside class="space-y-4">
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                    <h3 class="font-semibold text-gray-900 mb-3">Event Details</h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-gray-400 mt-0.5" 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"/></svg>
                            <div>
                                <p class="font-medium text-gray-900">{{ $event->start_at?->format('d M Y') }}</p>
                                <p class="text-gray-500">{{ $event->start_at?->format('g:i A') }} @if($event->end_at) - {{ $event->end_at?->format('g:i A') }} @endif</p>
                            </div>
                        </div>
                        @if($event->venue)
                            <div class="flex items-start gap-2">
                                <svg class="w-4 h-4 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243A8 8 0 1117.657 16.657z"/><circle cx="12" cy="11" r="1.414" fill="currentColor"/></svg>
                                <div>
                                    <p class="font-medium text-gray-900">{{ $event->venue }}</p>
                                    <p class="text-gray-500">{{ $event->address }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                @if($event->ticket_url)
                    <a href="{{ $event->ticket_url }}" target="_blank" class="block w-full bg-red-600 text-white text-center py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors">
                        {{ $event->is_free ? 'Register Free' : 'Buy Tickets' }}
                    </a>
                @endif
            </aside>
        </div>

        @if($relatedEvents->isNotEmpty())
            <div class="mt-12 pt-8 border-t border-gray-200">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">More Events Near You</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedEvents as $event)
                        <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-red-300 transition-colors">
                            <h3 class="font-semibold text-gray-900 mb-1">
                                <a href="{{ route('events.show', $event->slug) }}" class="hover:text-red-600">{{ $event->title }}</a>
                            </h3>
                            <p class="text-sm text-gray-500">{{ $event->start_at?->format('d M Y') }}</p>
                            <p class="text-sm text-gray-500">{{ $event->venue }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
@endsection