@extends('tickets.layouts.public')

@section('title', 'Explore Events - Loyaltiya Tickets')

@php
    $dateRanges = [
        '' => 'All',
        'today' => 'Today',
        'tomorrow' => 'Tomorrow',
        'this_week' => 'This Week',
        'this_weekend' => 'This Weekend',
        'next_week' => 'Next Week',
        'next_weekend' => 'Next Weekend',
        'this_month' => 'This Month',
        'next_month' => 'Next Month',
        'this_year' => 'This Year',
        'next_year' => 'Next Year',
    ];
@endphp

@section('content')
	<div class="wrapper">
		<div class="hero-banner">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-xl-8 col-lg-8 col-md-10">
						<div class="hero-banner-content">
							<h2>Discover Events For All The Things You Love</h2>
							<form class="search-form main-form" method="GET" action="{{ route('events.explore') }}">
								<div class="row g-3">
									<div class="col-lg-5 col-md-12">
										<div class="form-group search-category">
											<select class="selectpicker" name="type" data-width="100%" data-size="5">
												<option value="" {{ request('type') === null ? 'selected' : '' }}>Browse All</option>
												<option value="online" {{ request('type') === 'online' ? 'selected' : '' }}>Online Events</option>
												<option value="offline" {{ request('type') === 'offline' ? 'selected' : '' }}>Venue Events</option>
											</select>
										</div>
									</div>
									<div class="col-lg-5 col-md-12">
										<div class="form-group">
											<select class="selectpicker" name="category" data-width="100%" data-size="5" data-live-search="true">
												<option value="" {{ request('category') === null ? 'selected' : '' }}>All Categories</option>
												@foreach ($categories as $category)
													<option value="{{ $category }}" {{ request('category') === $category ? 'selected' : '' }}>{{ $category }}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="col-lg-2 col-md-12">
										<button type="submit" class="main-btn btn-hover w-100">Find</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="explore-events p-80">
			<div class="container">
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12">
						<div class="event-filter-items">
							<div class="featured-controls">
								<div class="filter-tag">
									@foreach ($dateRanges as $value => $label)
										<a href="{{ route('events.explore', array_filter(array_merge(request()->except('range'), ['range' => $value]))) }}"
											class="{{ request('range', '') === $value ? 'active' : '' }}">
											{{ $label }}
										</a>
									@endforeach
								</div>

								@if ($categories->count())
									<div class="controls">
										<a href="{{ route('events.explore', request()->except('category')) }}"
											class="control {{ ! request('category') ? 'active' : '' }}">All</a>
										@foreach ($categories as $category)
											<a href="{{ route('events.explore', array_merge(request()->except('category'), ['category' => $category])) }}"
												class="control {{ request('category') === $category ? 'active' : '' }}">
												{{ $category }}
											</a>
										@endforeach
									</div>
								@endif

								<div class="row">
									@forelse ($events as $event)
										<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
											<div class="main-card mt-4">
												<div class="event-thumbnail">
													<a href="{{ route('events.show', $event) }}" class="thumbnail-img">
														<img src="{{ $event->banner_image ? asset($event->banner_image) : asset('tickets/images/event-imgs/img-1.jpg') }}" alt="{{ $event->name }}">
													</a>
													<span class="bookmark-icon" title="Bookmark"></span>
												</div>
												<div class="event-content">
													<a href="{{ route('events.show', $event) }}" class="event-title">{{ $event->name }}</a>
													<!-- <div class="duration-price-remaining">
														<span class="duration-price">
															{{ $event->price > 0 ? $event->currency . ' ' . number_format($event->price, 2) : 'Free' }}
														</span>
														@if ($event->capacity)
															<span class="remaining"><i class="fa-solid fa-ticket fa-rotate-90"></i>{{ $event->capacity }} Available</span>
														@endif
													</div> -->
												</div>
												<div class="event-footer">
													<div class="event-timing">
														<div class="publish-date">
															<span><i class="fa-solid fa-calendar-day me-2"></i>{{ $event->event_starts_at->format('d M') }}</span>
															<span class="dot"><i class="fa-solid fa-circle"></i></span>
															<span>{{ $event->event_starts_at->format('D, h.i A') }}</span>
														</div>
														<span class="publish-time">
															<i class="fa-solid fa-clock me-2"></i>{{ $event->event_starts_at->diffForHumans($event->event_ends_at, true) }}
														</span>
													</div>
												</div>
											</div>
										</div>
									@empty
										<div class="col-12 text-center py-5">
											<p>No events found matching your filters.</p>
										</div>
									@endforelse
								</div>

								@if ($events->hasMorePages())
									<div class="browse-btn">
										<a href="{{ $events->nextPageUrl() }}" class="main-btn btn-hover">See More</a>
									</div>
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection