@extends('layouts.app')

@section('title', 'Events - OakTix')

@section('content')
<div class="container py-5">
    <div class="row">
        <!-- Sidebar Filters -->
        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="mb-3">Filters</h5>
                    
                    <form action="{{ route('events.index') }}" method="GET">
                        <div class="mb-3">
                            <label class="form-label">Search</label>
                            <input type="text" name="search" class="form-control" 
                                   value="{{ request('search') }}" placeholder="Event name...">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">State</label>
                            <select name="state" class="form-select">
                                <option value="">All States</option>
                                @foreach($states as $state)
                                    <option value="{{ $state }}" {{ request('state') == $state ? 'selected' : '' }}>
                                        {{ $state }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" 
                                   value="{{ request('city') }}" placeholder="City name...">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Categories</label>
                            @foreach($categories as $category)
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" 
                                           name="categories[]" value="{{ $category->id }}"
                                           {{ in_array($category->id, (array) request('categories', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label">{{ $category->name }}</label>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Price</label>
                            <select name="price" class="form-select">
                                <option value="">All</option>
                                <option value="free" {{ request('price') == 'free' ? 'selected' : '' }}>Free</option>
                                <option value="paid" {{ request('price') == 'paid' ? 'selected' : '' }}>Paid</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Date From</label>
                            <input type="date" name="date_from" class="form-control" 
                                   value="{{ request('date_from') }}">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Date To</label>
                            <input type="date" name="date_to" class="form-control" 
                                   value="{{ request('date_to') }}">
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
                        <a href="{{ route('events.index') }}" class="btn btn-outline-secondary w-100 mt-2">Clear</a>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Events Grid -->
        <div class="col-md-9">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4>{{ $events->total() }} Events Found</h4>
                <form action="{{ route('events.index') }}" method="GET">
                    @foreach(request()->except('sort', 'page') as $key => $value)
                        @if(is_array($value))
                            @foreach($value as $v)
                                <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                            @endforeach
                        @else
                            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endif
                    @endforeach
                    <select name="sort" class="form-select" onchange="this.form.submit()">
                        <option value="date_asc" {{ request('sort') == 'date_asc' ? 'selected' : '' }}>Date: Soonest</option>
                        <option value="date_desc" {{ request('sort') == 'date_desc' ? 'selected' : '' }}>Date: Latest</option>
                        <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Price: Low to High</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Price: High to Low</option>
                        <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Popularity</option>
                    </select>
                </form>
            </div>
            
            <div class="row g-4">
                @forelse($events as $event)
                    <div class="col-md-6 col-lg-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 }}">
                                    {{ $event->category->name }}
                                </span>
                                <h5 class="card-title">{{ Str::limit($event->title, 50) }}</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-2">
                                    <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 mt-3">
                                    @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">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5>No events found</h5>
                        <p class="text-muted">Try adjusting your filters</p>
                    </div>
                @endforelse
            </div>
            
            <div class="mt-4">
                {{ $events->withQueryString()->links() }}
            </div>
        </div>
    </div>
</div>
@endsection