@extends('tickets.layouts.admin_layout')

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

@section('modals')
	<!-- Add Event Modal Start -->
	<div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form method="POST" action="{{ route('tickets.events.store') }}" enctype="multipart/form-data">
					@csrf
					<div class="modal-header">
						<h5 class="modal-title" id="addEventLabel">Create Event</h5>
						<button type="button" class="close-model-btn" data-bs-dismiss="modal" aria-label="Close"><i class="uil uil-multiply"></i></button>
					</div>
					<div class="modal-body">
						<div class="model-content main-form">
							<div class="row">
								<div class="col-lg-12 col-md-12">
									<div class="form-group text-center mt-4">
										<label class="form-label">Event Banner*</label>
										<span class="org_design_button btn-file">
											<span><i class="fa-solid fa-camera"></i></span>
											<input type="file" id="event_banner" accept="image/*" name="banner_image">
										</span>
									</div>
								</div>
								<div class="col-lg-12 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">Event Name*</label>
										<input class="form-control h_40" type="text" name="name" placeholder="e.g. Summer Music Festival" value="{{ old('name') }}">
									</div>
								</div>
								<div class="col-lg-12 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">Description*</label>
										<textarea class="form-textarea" name="description" placeholder="Tell people what this event is about">{{ old('description') }}</textarea>
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group main-form mt-4">
										<label class="form-label">Event Type*</label>
										<select class="selectpicker" name="event_type" id="event_type_select" data-size="2" title="Select event type">
											<option value="online">Online</option>
											<option value="offline">Offline (In-Person)</option>
										</select>
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">Category*</label>
										<input class="form-control h_40" type="text" name="category" placeholder="e.g. Music, Sports, Conference" value="{{ old('category') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">Start Date &amp; Time*</label>
										<input class="form-control h_40" type="datetime-local" name="event_starts_at" value="{{ old('event_starts_at') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">End Date &amp; Time*</label>
										<input class="form-control h_40" type="datetime-local" name="event_ends_at" value="{{ old('event_ends_at') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group mt-4">
										<label class="form-label">Price*</label>
										<input class="form-control h_40" type="number" step="0.01" min="0" name="price" placeholder="0.00" value="{{ old('price') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="form-group main-form mt-4">
										<label class="form-label">Currency</label>
										<select class="selectpicker" name="currency" data-size="4" title="Currency">
											<option value="INR">INR</option>
											<option value="USD">USD</option>
											<option value="EUR">EUR</option>
											<option value="GBP">GBP</option>
										</select>
									</div>
								</div>

								<!-- Shown only for Online events -->
								<div class="col-lg-12 col-md-12 event-online-field">
									<div class="form-group mt-4">
										<label class="form-label">Streaming Link*</label>
										<input class="form-control h_40" type="text" name="stream_url" placeholder="https://" value="{{ old('stream_url') }}">
									</div>
								</div>

								<!-- Shown only for Offline events -->
								<div class="col-lg-12 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">Venue Name*</label>
										<input class="form-control h_40" type="text" name="venue_name" placeholder="" value="{{ old('venue_name') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">Address 1*</label>
										<input class="form-control h_40" type="text" name="address_1" placeholder="" value="{{ old('address_1') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">Address 2</label>
										<input class="form-control h_40" type="text" name="address_2" placeholder="" value="{{ old('address_2') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group main-form mt-4">
										<label class="form-label">Country*</label>
										<select class="selectpicker" name="country" data-size="5" title="Nothing selected" data-live-search="true">
											<option value="India">India</option>
											<option value="United States">United States</option>
											<option value="United Kingdom">United Kingdom</option>
											<option value="Australia">Australia</option>
											<option value="Canada">Canada</option>
										</select>
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">State*</label>
										<input class="form-control h_40" type="text" name="state" placeholder="" value="{{ old('state') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">City/Suburb*</label>
										<input class="form-control h_40" type="text" name="city" placeholder="" value="{{ old('city') }}">
									</div>
								</div>
								<div class="col-lg-6 col-md-12 event-offline-field">
									<div class="form-group mt-4">
										<label class="form-label">Zip/Post Code*</label>
										<input class="form-control h_40" type="text" name="zip_code" placeholder="" value="{{ old('zip_code') }}">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="co-main-btn min-width btn-hover h_40" data-bs-dismiss="modal">Cancel</button>
						<button type="submit" class="main-btn min-width btn-hover h_40">Create Event</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- Add Event Modal End -->
@endsection

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

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

	<div class="col-md-12">
		<div class="main-card add-organisation-card p-4 mt-5">
			<div class="ocard-left">
				<div class="ocard-avatar">
					<img src="{{ $admin->avatar ? asset($admin->avatar) : asset('tickets/images/profile-imgs/img-13.jpg') }}" alt="{{ $admin->name }}">
				</div>
				<div class="ocard-name">
					<h4>{{ $admin->name }}</h4>
					<span>{{ ucfirst($admin->role ?? 'Organiser') }} &middot; Loyaltiya Tickets</span>
				</div>
			</div>
			<div class="ocard-right">
				<button class="pe-4 ps-4 co-main-btn min-width" data-bs-toggle="modal" data-bs-target="#addEventModal"><i class="fa-solid fa-plus"></i>Create Event</button>
			</div>
		</div>

		<div class="main-card mt-4">
			<div class="dashboard-wrap-content">
				<div class="d-flex flex-wrap justify-content-between align-items-center p-4">
					<div class="dashboard-date-wrap d-flex flex-wrap justify-content-between align-items-center">
						<div class="dashboard-date-arrows">
							<a href="#" class="before_date"><i class="fa-solid fa-angle-left"></i></a>
							<a href="#" class="after_date disabled"><i class="fa-solid fa-angle-right"></i></a>
						</div>
						<h5 class="dashboard-select-date">
							<span>{{ $rangeStart->format('jS F, Y') }}</span>
							-
							<span>{{ $rangeEnd->format('jS F, Y') }}</span>
						</h5>
					</div>
					<div class="rs">
						<div class="dropdown dropdown-text event-list-dropdown">
							<button class="dropdown-toggle event-list-dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
								<span>Selected Events ({{ $selectedEventsCount }})</span>
							</button>
							<ul class="dropdown-menu">
								@forelse ($events as $event)
									<li>
										<a class="dropdown-item" href="{{ route('tickets.events.edit', $event) }}">
											{{ $event->name }}
											<span class="badge {{ $event->event_type === 'online' ? 'bg-info' : 'bg-secondary' }} ms-2">
												{{ ucfirst($event->event_type) }}
											</span>
										</a>
									</li>
								@empty
									<li><a class="dropdown-item disabled" href="#">No events yet</a></li>
								@endforelse
							</ul>
						</div>
					</div>
				</div>
				<div class="dashboard-report-content">
					<div class="row">
						<div class="col-xl-3 col-lg-6 col-md-6">
							<div class="dashboard-report-card purple">
								<div class="card-content">
									<div class="card-content">
										<span class="card-title fs-6">Revenue</span>
										<span class="card-sub-title fs-3">{{ $stats['revenue'] }}</span>
										<div class="d-flex align-items-center">
											<span>
												<i class="fa-solid {{ str_starts_with($stats['revenue_change'], '-') ? 'fa-arrow-trend-down' : 'fa-arrow-trend-up' }}"></i>
											</span>
											<span class="text-Light font-12 ms-2 me-2">{{ $stats['revenue_change'] }}</span>
											<span class="font-12 color-body text-nowrap">From Previous Month</span>
										</div>
									</div>
									<div class="card-media">
										<i class="fa-solid fa-money-bill"></i>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6 col-md-6">
							<div class="dashboard-report-card red">
								<div class="card-content">
									<div class="card-content">
										<span class="card-title fs-6">Orders</span>
										<span class="card-sub-title fs-3">{{ $stats['orders'] }}</span>
										<div class="d-flex align-items-center">
											<span>
												<i class="fa-solid {{ str_starts_with($stats['orders_change'], '-') ? 'fa-arrow-trend-down' : 'fa-arrow-trend-up' }}"></i>
											</span>
											<span class="text-Light font-12 ms-2 me-2">{{ $stats['orders_change'] }}</span>
											<span class="font-12 color-body text-nowrap">From Previous Month</span>
										</div>
									</div>
									<div class="card-media">
										<i class="fa-solid fa-box"></i>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6 col-md-6">
							<div class="dashboard-report-card info">
								<div class="card-content">
									<div class="card-content">
										<span class="card-title fs-6">Page Views</span>
										<span class="card-sub-title fs-3">{{ $stats['page_views'] }}</span>
										<div class="d-flex align-items-center">
											<span class="font-12 color-body text-nowrap">Not tracked yet</span>
										</div>
									</div>
									<div class="card-media">
										<i class="fa-solid fa-eye"></i>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6 col-md-6">
							<div class="dashboard-report-card success">
								<div class="card-content">
									<div class="card-content">
										<span class="card-title fs-6">Ticket Sales</span>
										<span class="card-sub-title fs-3">{{ $stats['ticket_sales'] }}</span>
										<div class="d-flex align-items-center">
											<span>
												<i class="fa-solid {{ str_starts_with($stats['ticket_sales_change'], '-') ? 'fa-arrow-trend-down' : 'fa-arrow-trend-up' }}"></i>
											</span>
											<span class="text-Light font-12 ms-2 me-2">{{ $stats['ticket_sales_change'] }}</span>
											<span class="font-12 color-body text-nowrap">From Previous Month</span>
										</div>
									</div>
									<div class="card-media">
										<i class="fa-solid fa-ticket"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="main-card mt-4">
					<div class="d-flex flex-wrap justify-content-between align-items-center border_bottom p-4">
						<h5 class="m-0"><i class="fa-solid fa-calendar-days me-2"></i>Recent Events</h5>
						<a href="{{ route('tickets.events') }}" class="co-main-btn min-width btn-hover h_40 d-inline-flex align-items-center justify-content-center">View All</a>
					</div>
					<div class="p-4">
						@if ($events->isEmpty())
							<p class="text-muted mb-0">You haven't created any events yet. Click "Create Event" above to get started.</p>
						@else
							<div class="table-responsive">
								<table class="table align-middle mb-0">
									<thead>
										<tr>
											<th>Event</th>
											<th>Type</th>
											<th>Starts</th>
											<th>Status</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										@foreach ($events->take(5) as $event)
											<tr>
												<td>{{ $event->name }}</td>
												<td>
													<span class="badge {{ $event->event_type === 'online' ? 'bg-info' : 'bg-secondary' }}">
														{{ ucfirst($event->event_type) }}
													</span>
												</td>
												<td>{{ $event->event_starts_at->format('M d, Y h:i A') }}</td>
												<td>
													<span class="badge {{ match($event->status) {
														'published' => 'bg-success',
														'draft' => 'bg-warning',
														default => 'bg-secondary',
													} }}">
														{{ ucfirst($event->status) }}
													</span>
												</td>
												<td>
													<a href="{{ route('tickets.events.edit', $event) }}"><i class="fa-solid fa-pen"></i></a>
												</td>
											</tr>
										@endforeach
									</tbody>
								</table>
							</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const typeSelect = document.getElementById('event_type_select');
			const onlineFields = document.querySelectorAll('.event-online-field');
			const offlineFields = document.querySelectorAll('.event-offline-field');

			function toggleEventFields() {
				const isOnline = typeSelect.value === 'online';
				onlineFields.forEach(el => el.style.display = isOnline ? '' : 'none');
				offlineFields.forEach(el => el.style.display = isOnline ? 'none' : '');
			}

			if (typeSelect) {
				toggleEventFields();
				typeSelect.addEventListener('change', toggleEventFields);
				// bootstrap-select fires this event instead of native change
				$(typeSelect).on('changed.bs.select', toggleEventFields);
			}
		});
	</script>
@endpush