@extends('tickets.layouts.admin_layout')

@section('title', 'Create Event - Loyaltiya Tickets')

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

	<div class="col-md-12">
		@if ($errors->any())
			<div class="alert alert-danger mt-4">
				<ul class="mb-0">
					@foreach ($errors->all() as $error)
						<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif

		<form method="POST" action="{{ route('tickets.events.store') }}" enctype="multipart/form-data">
			@csrf

			<!-- Basic Details -->
			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-circle-info me-3"></i>Details</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-12">
							<label class="form-label fs-16">Event Name*</label>
							<input class="form-control h_50" type="text" name="name" placeholder="Enter event name" value="{{ old('name') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Category</label>
							<input class="form-control h_50" type="text" name="category" placeholder="e.g. Music, Sports, Conference" value="{{ old('category') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Event Type*</label>
							<select class="selectpicker" name="event_type" id="event_type_select" title="Select event type">
								<option value="online" {{ old('event_type') === 'online' ? 'selected' : '' }}>Online</option>
								<option value="offline" {{ old('event_type', 'offline') === 'offline' ? 'selected' : '' }}>Offline (In-Person)</option>
							</select>
						</div>
						<div class="col-md-12">
							<label class="form-label fs-16">Description</label>
							<textarea class="form-textarea" name="description" placeholder="Describe your event, schedule, or any special instructions">{{ old('description') }}</textarea>
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Banner Image</label>
							<input class="form-control h_50" type="file" name="banner_image" accept="image/*">
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Gallery Images (image slides)</label>
							<input class="form-control h_50" type="file" name="gallery[]" accept="image/*" multiple>
						</div>
					</div>
				</div>
			</div>

			<!-- Schedule -->
			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-clock me-3"></i>Schedule</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-6">
							<label class="form-label fs-16">Event Starts*</label>
							<input class="form-control h_50" type="datetime-local" name="event_starts_at" value="{{ old('event_starts_at') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Event Ends*</label>
							<input class="form-control h_50" type="datetime-local" name="event_ends_at" value="{{ old('event_ends_at') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Timezone</label>
							<input class="form-control h_50" type="text" name="timezone" placeholder="e.g. Asia/Kolkata" value="{{ old('timezone', 'Asia/Kolkata') }}">
						</div>
					</div>

					<div class="row g-3 mt-1">
						<div class="col-md-12">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" id="booking_starts_now" checked>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Start ticket sales immediately</label>
							</div>
						</div>
						<div class="col-md-6 booking-start-field" style="display:none;">
							<label class="form-label fs-16">Booking Starts</label>
							<input class="form-control h_50" type="datetime-local" name="booking_starts_at" value="{{ old('booking_starts_at') }}">
						</div>

						<div class="col-md-12 mt-3">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" id="booking_ends_at_event_end" checked>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Keep ticket sales open until the event ends</label>
							</div>
						</div>
						<div class="col-md-6 booking-end-field" style="display:none;">
							<label class="form-label fs-16">Booking Ends</label>
							<input class="form-control h_50" type="datetime-local" name="booking_ends_at" value="{{ old('booking_ends_at') }}">
						</div>
					</div>
				</div>
			</div>

			<!-- Online-only fields -->
			<div class="main-card mt-4 event-online-field">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-video me-3"></i>Online Event Details</h4>
				</div>
				<div class="p-4 main-form">
					<label class="form-label fs-16">Streaming Link*</label>
					<input class="form-control h_50" type="text" name="stream_url" placeholder="https://" value="{{ old('stream_url') }}">
				</div>
			</div>

			<!-- Offline-only fields -->
			<div class="main-card mt-4 event-offline-field">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-location-dot me-3"></i>Venue Details</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-12">
							<label class="form-label fs-16">Venue Name*</label>
							<input class="form-control h_50" type="text" name="venue_name" value="{{ old('venue_name') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label">Address Line 1*</label>
							<input class="form-control h_50" type="text" name="address_1" value="{{ old('address_1') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label">Address Line 2</label>
							<input class="form-control h_50" type="text" name="address_2" value="{{ old('address_2') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label">Country*</label>
							<select class="selectpicker" name="country" data-size="5" title="Select country" data-live-search="true">
								<option value="India" {{ old('country') === 'India' ? 'selected' : '' }}>India</option>
								<option value="United States" {{ old('country') === 'United States' ? 'selected' : '' }}>United States</option>
								<option value="United Kingdom" {{ old('country') === 'United Kingdom' ? 'selected' : '' }}>United Kingdom</option>
								<option value="Australia" {{ old('country') === 'Australia' ? 'selected' : '' }}>Australia</option>
								<option value="Canada" {{ old('country') === 'Canada' ? 'selected' : '' }}>Canada</option>
							</select>
						</div>
						<div class="col-md-6">
							<label class="form-label">State*</label>
							<input class="form-control h_50" type="text" name="state" value="{{ old('state') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label">City/Suburb*</label>
							<input class="form-control h_50" type="text" name="city" value="{{ old('city') }}">
						</div>
						<div class="col-md-6">
							<label class="form-label">Zip/Post Code*</label>
							<input class="form-control h_50" type="text" name="zip_code" value="{{ old('zip_code') }}">
						</div>
						<div class="col-md-12">
							<label class="form-label">Google Maps Link</label>
							<input class="form-control h_50" type="text" name="google_map_link" placeholder="https://maps.google.com/..." value="{{ old('google_map_link') }}">
						</div>
					</div>
				</div>
			</div>

			<!-- Pricing & Capacity -->
			<!-- Ticket Types -->
			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom d-flex justify-content-between align-items-center">
					<h4 class="m-0"><i class="fa-solid fa-ticket me-3"></i>Ticket Types</h4>
					<button type="button" class="co-main-btn h_40" id="add_ticket_type_btn"><i class="fa-solid fa-plus me-2"></i>Add Ticket Type</button>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3 mb-4">
						<div class="col-md-4">
							<label class="form-label fs-16">Currency</label>
							<select class="selectpicker" name="currency" title="Currency">
								<option value="CAD" {{ old('currency', 'CAD') === 'CAD' ? 'selected' : '' }}>CAD</option>
								<option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD</option>
								<option value="INR" {{ old('currency') === 'INR' ? 'selected' : '' }}>INR</option>
								<option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR</option>
								<option value="GBP" {{ old('currency') === 'GBP' ? 'selected' : '' }}>GBP</option>
							</select>
							<small class="text-muted">Applies to all ticket types below.</small>
						</div>
						<div class="col-md-4">
							<label class="form-label fs-16">Age Restriction</label>
							<input class="form-control h_50" type="number" min="0" max="100" name="age_restriction" placeholder="e.g. 18" value="{{ old('age_restriction') }}">
						</div>
					</div>

					<div id="ticket_types_list">
						<div class="ticket-type-row border rounded p-3 mb-3">
							<input type="hidden" name="ticket_types[0][id]" value="">
							<div class="row g-3 align-items-end">
								<div class="col-md-4">
									<label class="form-label fs-16">Ticket Name*</label>
									<input class="form-control h_50" type="text" name="ticket_types[0][name]" placeholder="e.g. General Admission" value="{{ old('ticket_types.0.name') }}">
								</div>
								<div class="col-md-4">
									<label class="form-label fs-16">Ticket Description*</label>
									<input class="form-control h_50" type="text" name="ticket_types[0][description]" placeholder="e.g. Premium" value="{{ old('ticket_types.0.description') }}">
								</div>
								<div class="col-md-3">
									<label class="form-label fs-16">Price*</label>
									<input class="form-control h_50" type="number" step="0.01" min="0" name="ticket_types[0][price]" value="{{ old('ticket_types.0.price', 0) }}">
								</div>
								<div class="col-md-2">
									<label class="form-label fs-16 d-block">Capacity</label>
									<div class="d-flex align-items-center">
										<label class="btn-switch m-0 me-2">
											<input type="checkbox" class="unlimited-capacity-toggle" checked>
											<span class="checkbox-slider"></span>
										</label>
										<small>Unlimited</small>
									</div>
								</div>
								<div class="col-md-2 capacity-field" style="display:none;">
									<label class="form-label fs-16">Total Available</label>
									<input class="form-control h_50" type="number" min="1" name="ticket_types[0][capacity]" value="{{ old('ticket_types.0.capacity') }}">
								</div>
								<div class="col-md-1 text-end">
									<button type="button" class="btn btn-link text-danger remove-ticket-type-btn" title="Remove this ticket type">
										<i class="fa-solid fa-trash"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Refund Policy -->
			<div class="main-card mt-4">
				<div class="bp-title p-4 border_bottom">
					<h4 class="m-0"><i class="fa-solid fa-rotate-left me-3"></i>Refund Policy</h4>
				</div>
				<div class="p-4 main-form">
					<div class="row g-3">
						<div class="col-md-12">
							<div class="d-flex align-items-start">
								<label class="btn-switch m-0 me-3">
									<input type="checkbox" name="is_refundable" value="1" id="is_refundable" {{ old('is_refundable') ? 'checked' : '' }}>
									<span class="checkbox-slider"></span>
								</label>
								<label class="color-black mb-0">Allow customers to cancel and receive a refund</label>
							</div>
						</div>
						<div class="col-md-4 refund-days-field" style="display: {{ old('is_refundable') ? 'block' : 'none' }};">
							<label class="form-label fs-16">Refund allowed up to (days before event)</label>
							<input class="form-control h_50" type="number" min="0" name="refund_days" value="{{ old('refund_days') }}">
						</div>
					</div>
				</div>
			</div>

			<div class="d-flex justify-content-end gap-3 mt-4 mb-5">
				<a href="{{ route('tickets.dashboard') }}" class="co-main-btn min-width btn-hover h_50 d-inline-flex align-items-center justify-content-center">Cancel</a>
				<button type="submit" class="main-btn min-width btn-hover h_50">Create Event</button>
			</div>
		</form>
	</div>
@endsection

@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			// Toggle online vs offline fields
			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);
				$(typeSelect).on('changed.bs.select', toggleEventFields);
			}

			// Booking starts immediately toggle
			const bookingStartsNow = document.getElementById('booking_starts_now');
			const bookingStartField = document.querySelector('.booking-start-field');
			bookingStartsNow.addEventListener('change', function () {
				bookingStartField.style.display = this.checked ? 'none' : '';
			});

			// Booking ends with event toggle
			const bookingEndsAtEventEnd = document.getElementById('booking_ends_at_event_end');
			const bookingEndField = document.querySelector('.booking-end-field');
			bookingEndsAtEventEnd.addEventListener('change', function () {
				bookingEndField.style.display = this.checked ? 'none' : '';
			});

			// Unlimited capacity toggle
			const capacityUnlimited = document.getElementById('capacity_unlimited');
			const capacityField = document.querySelector('.capacity-field');
			capacityUnlimited.addEventListener('change', function () {
				capacityField.style.display = this.checked ? 'none' : '';
			});

			// Refund days toggle
			const isRefundable = document.getElementById('is_refundable');
			const refundDaysField = document.querySelector('.refund-days-field');
			isRefundable.addEventListener('change', function () {
				refundDaysField.style.display = this.checked ? '' : 'none';
			});
		});

		// Ticket types: add/remove rows, per-row unlimited-capacity toggle.
		// Uses event delegation since rows are added dynamically after page load.
		let ticketTypeIndex = 1; // row 0 already exists in the markup

		function buildTicketTypeRow(index) {
			const row = document.createElement('div');
			row.className = 'ticket-type-row border rounded p-3 mb-3';
			row.innerHTML = `
				<input type="hidden" name="ticket_types[${index}][id]" value="">
				<div class="row g-3 align-items-end">
					<div class="col-md-4">
						<label class="form-label fs-16">Ticket Name*</label>
						<input class="form-control h_50" type="text" name="ticket_types[${index}][name]" placeholder="e.g. VIP">
					</div>
					<div class="col-md-4">
						<label class="form-label fs-16">Ticket Description*</label>
						<input class="form-control h_50" type="text" name="ticket_types[${index}][description]" placeholder="e.g. Premium">
					</div>

					<div class="col-md-3">
						<label class="form-label fs-16">Price*</label>
						<input class="form-control h_50" type="number" step="0.01" min="0" name="ticket_types[${index}][price]" value="0">
					</div>
					<div class="col-md-2">
						<label class="form-label fs-16 d-block">Capacity</label>
						<div class="d-flex align-items-center">
							<label class="btn-switch m-0 me-2">
								<input type="checkbox" class="unlimited-capacity-toggle" checked>
								<span class="checkbox-slider"></span>
							</label>
							<small>Unlimited</small>
						</div>
					</div>
					<div class="col-md-2 capacity-field" style="display:none;">
						<label class="form-label fs-16">Total Available</label>
						<input class="form-control h_50" type="number" min="1" name="ticket_types[${index}][capacity]">
					</div>
					<div class="col-md-1 text-end">
						<button type="button" class="btn btn-link text-danger remove-ticket-type-btn" title="Remove this ticket type">
							<i class="fa-solid fa-trash"></i>
						</button>
					</div>
				</div>
			`;
			return row;
		}

		document.getElementById('add_ticket_type_btn')?.addEventListener('click', function () {
			document.getElementById('ticket_types_list').appendChild(buildTicketTypeRow(ticketTypeIndex));
			ticketTypeIndex++;
		});

		document.getElementById('ticket_types_list')?.addEventListener('change', function (e) {
			if (e.target.classList.contains('unlimited-capacity-toggle')) {
				const capacityField = e.target.closest('.ticket-type-row').querySelector('.capacity-field');
				capacityField.style.display = e.target.checked ? 'none' : '';
			}
		});

		document.getElementById('ticket_types_list')?.addEventListener('click', function (e) {
			const removeBtn = e.target.closest('.remove-ticket-type-btn');
			if (!removeBtn) return;

			const rows = document.querySelectorAll('.ticket-type-row');
			if (rows.length <= 1) {
				alert('An event needs at least one ticket type.');
				return;
			}
			removeBtn.closest('.ticket-type-row').remove();
		});
	</script>
@endpush