@extends('tickets.layouts.admin_layout')

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

@php
    $onlineEvents = $events->where('event_type', 'online');
    $offlineEvents = $events->where('event_type', 'offline');
@endphp

@section('content')
	<div class="col-md-12">
		<div class="d-main-title">
			<h3><i class="fa-solid fa-calendar-days me-3"></i>Events</h3>
		</div>
	</div>

	<div class="col-md-12">
		@if (session('status'))
			<div class="alert alert-success mt-4">{{ session('status') }}</div>
		@endif

		<div class="main-card mt-4">
			<div class="dashboard-wrap-content p-4">
				<h5 class="mb-4">Events ({{ $events->count() }})</h5>
				<div class="d-md-flex flex-wrap align-items-center">
					<div class="dashboard-date-wrap">
						<form method="GET" action="{{ route('tickets.events') }}" class="form-group">
							<div class="relative-input position-relative">
								<input class="form-control h_40" type="text" name="search" placeholder="Search by event name, status" value="{{ request('search') }}">
								<button type="submit" class="border-0 bg-transparent p-0">
									<i class="uil uil-search"></i>
								</button>
							</div>
						</form>
					</div>
					<div class="rs ms-auto mt_r4">
						<div class="nav custom2-tabs btn-group" role="tablist">
							<button class="tab-link active" data-bs-toggle="tab" data-bs-target="#all-tab" type="button" role="tab" aria-controls="all-tab" aria-selected="true">
								All Event (<span>{{ $events->count() }}</span>)
							</button>
							<button class="tab-link" data-bs-toggle="tab" data-bs-target="#online-tab" type="button" role="tab" aria-controls="online-tab" aria-selected="false">
								Online Event (<span>{{ $onlineEvents->count() }}</span>)
							</button>
							<button class="tab-link" data-bs-toggle="tab" data-bs-target="#venue-tab" type="button" role="tab" aria-controls="venue-tab" aria-selected="false">
								Venue Event (<span>{{ $offlineEvents->count() }}</span>)
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="event-list">
			<div class="tab-content">
				<div class="tab-pane fade show active" id="all-tab" role="tabpanel">
					@include('tickets.events.partials.event_cards', ['events' => $events])
				</div>
				<div class="tab-pane fade" id="online-tab" role="tabpanel">
					@include('tickets.events.partials.event_cards', ['events' => $onlineEvents])
				</div>
				<div class="tab-pane fade" id="venue-tab" role="tabpanel">
					@include('tickets.events.partials.event_cards', ['events' => $offlineEvents])
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			document.querySelectorAll('.delete-event-form').forEach(function (form) {
				form.addEventListener('submit', function (e) {
					if (! confirm('Delete this event? This cannot be undone.')) {
						e.preventDefault();
					}
				});
			});
		});
	</script>
@endpush