@extends('layouts.app')

@section('title', 'OakTix - Nigeria\'s Premier Event Ticketing Platform')

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Discover Amazing Events Near You</h1>
        <p class="lead mb-5">Find and book tickets for concerts, conferences, sports, and more across Nigeria</p>
        
        <form action="{{ route('events.index') }}" method="GET" class="row g-2 justify-content-center">
            <div class="col-md-5">
                <input type="text" name="search" class="form-control form-control-lg" placeholder="Search events...">
            </div>
            <div class="col-md-3">
                <select name="state" class="form-select form-select-lg">
                    <option value="">All States</option>
                    @foreach(get_states() as $id => $state)
                        <option value="{{ $state }}">{{ $state }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-accent btn-lg w-100">
                    <i class="fas fa-search me-2"></i>Search
                </button>
            </div>
        </form>
        
        <div class="row mt-5">
            <div class="col-md-4">
                <h3>{{ $stats['events'] ?? 0 }}+</h3>
                <p>Events</p>
            </div>
            <div class="col-md-4">
                <h3>{{ $stats['tickets_sold'] ?? 0 }}+</h3>
                <p>Tickets Sold</p>
            </div>
            <div class="col-md-4">
                <h3>{{ $stats['vendors'] ?? 0 }}+</h3>
                <p>Vendors</p>
            </div>
        </div>
    </div>
</section>

<!-- Featured Events -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Featured Events</h2>
            <a href="{{ route('events.index') }}" class="btn btn-outline-primary">View All</a>
        </div>
        
        <div class="row g-4">
            @forelse($featuredEvents as $event)
                <div class="col-md-4">
                    <div class="card event-card h-100">
                        <img src="{{ asset('storage/' . $event->flyer_image) }}" class="card-img-top" alt="{{ $event->title }}">
                        <div class="card-body">
                            <span class="badge badge-category mb-2" style="background: {{ $event->category->color }}">
                                <i class="fas {{ $event->category->icon }} me-1"></i>{{ $event->category->name }}
                            </span>
                            <h5 class="card-title">{{ $event->title }}</h5>
                            <p class="text-muted mb-2">
                                <i class="far fa-calendar me-2"></i>{{ $event->start_date->format('M d, Y') }}
                            </p>
                            <p class="text-muted mb-3">
                                <i class="fas fa-map-marker-alt me-2"></i>{{ $event->city }}, {{ $event->state }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                @php
                                    $minPrice = $event->tickets->min('price');
                                @endphp
                                @if($minPrice == 0)
                                    <span class="free-badge">FREE</span>
                                @else
                                    <span class="price-badge">From {{ format_currency($minPrice) }}</span>
                                @endif
                                <a href="{{ route('events.show', $event->slug) }}" class="btn btn-primary btn-sm">Get Tickets</a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No featured events at the moment.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Categories -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center mb-5">Browse by Category</h2>
        <div class="row g-4">
            @foreach($categories as $category)
                <div class="col-6 col-md-3">
                    <a href="{{ route('events.index', ['categories' => [$category->id]]) }}" class="text-decoration-none">
                        <div class="text-center p-4 rounded" style="background: {{ $category->color }}10;">
                            <div class="category-icon" style="background: {{ $category->color }}">
                                <i class="fas {{ $category->icon }}"></i>
                            </div>
                            <h6 class="text-dark">{{ $category->name }}</h6>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Upcoming Events -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Upcoming Events</h2>
            <a href="{{ route('events.index') }}" class="btn btn-outline-primary">View All</a>
        </div>
        
        <div class="row g-4">
            @forelse($upcomingEvents as $event)
                <div class="col-md-3">
                    <div class="card event-card h-100">
                        <img src="{{ asset('storage/' . $event->flyer_image) }}" class="card-img-top" alt="{{ $event->title }}">
                        <div class="card-body">
                            <span class="badge badge-category mb-2" style="background: {{ $event->category->color }}">
                                {{ $event->category->name }}
                            </span>
                            <h6 class="card-title">{{ Str::limit($event->title, 40) }}</h6>
                            <p class="text-muted small mb-2">
                                <i class="far fa-calendar me-1"></i>{{ $event->start_date->format('M d, Y') }}
                            </p>
                            <p class="text-muted small mb-2">
                                <i class="fas fa-map-marker-alt me-1"></i>{{ $event->city }}
                            </p>
                            <a href="{{ route('events.show', $event->slug) }}" class="btn btn-primary btn-sm w-100">View Details</a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No upcoming events at the moment.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

<!-- How It Works -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center mb-5">How It Works</h2>
        <div class="row g-4">
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <i class="fas fa-search fa-3x text-primary-oaktix"></i>
                </div>
                <h4>1. Discover</h4>
                <p>Browse through thousands of events happening across Nigeria</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <i class="fas fa-ticket-alt fa-3x text-primary-oaktix"></i>
                </div>
                <h4>2. Book</h4>
                <p>Secure your tickets with our safe and easy payment system</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <i class="fas fa-qrcode fa-3x text-primary-oaktix"></i>
                </div>
                <h4>3. Attend</h4>
                <p>Show your QR code at the event and enjoy the experience</p>
            </div>
        </div>
    </div>
</section>

<!-- Vendor CTA -->
<section class="py-5" style="background: var(--light-color);">
    <div class="container text-center">
        <h2>Are You an Event Organizer?</h2>
        <p class="lead mb-4">Sell tickets online and reach thousands of event-goers across Nigeria</p>
        <a href="{{ route('vendor.register') }}" class="btn btn-primary btn-lg">
            <i class="fas fa-store me-2"></i>Become a Vendor
        </a>
    </div>
</section>
@endsection