@extends('tickets.layouts.admin_layout')

@section('title', 'Edit 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>Edit 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.update', $event) }}" enctype="multipart/form-data">
			@csrf
			@method('PUT')

			<!-- 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', $event->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', $event->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', $event->event_type) === 'online' ? 'selected' : '' }}>Online</option>
								<option value="offline" {{ old('event_type', $event->event_type) === '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', $event->description) }}</textarea>
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Banner Image</label>
							@if ($event->banner_image)
								<div class="mb-2">
									<img src="{{ asset('storage/' . $event->banner_image) }}" alt="Current banner" style="max-height: 80px;">
								</div>
							@endif
							<input class="form-control h_50" type="file" name="banner_image" accept="image/*">
							<small class="text-muted">Leave empty to keep the current banner.</small>
						</div>
						<div class="col-md-6">
							<label class="form-label fs-16">Gallery Images (image slides)</label>
							@if ($event->images->count())
								<div class="mb-2 d-flex flex-wrap gap-2">
									@foreach ($event->images as $image)
										<img src="{{ asset('storage/' . $image->path) }}" alt="" style="height: 60px;">
									@endforeach
								</div>
							@endif
							<input class="form-control h_50" type="file" name="gallery[]" accept="image/*" multiple>
							<small class="text-muted">New images are added alongside existing ones.</small>
						</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', optional($event->event_starts_at)->format('Y-m-d\TH:i')) }}">
						</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', optional($event->event_ends_at)->format('Y-m-d\TH:i')) }}">
						</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', $event->timezone) }}">
						</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" {{ is_null($event->booking_starts_at) ? '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: {{ $event->booking_starts_at ? 'block' : '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', optional($event->booking_starts_at)->format('Y-m-d\TH:i')) }}">
						</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" {{ is_null($event->booking_ends_at) ? '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: {{ $event->booking_ends_at ? 'block' : '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', optional($event->booking_ends_at)->format('Y-m-d\TH:i')) }}">
						</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', $event->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', $event->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', $event->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', $event->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">
								@foreach (['India', 'United States', 'United Kingdom', 'Australia', 'Canada'] as $country)
									<option value="{{ $country }}" {{ old('country', $event->country) === $country ? 'selected' : '' }}>{{ $country }}</option>
								@endforeach
							</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', $event->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', $event->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', $event->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', $event->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">
								@foreach (['CAD', 'INR', 'USD', 'EUR', 'GBP'] as $currency)
									<option value="{{ $currency }}" {{ old('currency', $event->currency) === $currency ? 'selected' : '' }}>{{ $currency }}</option>
								@endforeach
							</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', $event->age_restriction) }}">
						</div>
					</div>

					<div id="ticket_types_list">
						@forelse ($event->ticketTypes as $index => $ticketType)
							<div class="ticket-type-row border rounded p-3 mb-3">
								<input type="hidden" name="ticket_types[{{ $index }}][id]" value="{{ $ticketType->id }}">
								<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]" value="{{ old("ticket_types.$index.name", $ticketType->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[{{ $index }}][description]" placeholder="Enter ticket description" value="{{ old("ticket_types.$index.description", $ticketType->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[{{ $index }}][price]" value="{{ old("ticket_types.$index.price", $ticketType->price) }}">
									</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" {{ is_null($ticketType->capacity) ? 'checked' : '' }}>
												<span class="checkbox-slider"></span>
											</label>
											<small>Unlimited</small>
										</div>
									</div>
									<div class="col-md-2 capacity-field" style="display: {{ $ticketType->capacity ? 'block' : '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]" value="{{ old("ticket_types.$index.capacity", $ticketType->capacity) }}">
										<small class="text-muted">{{ $ticketType->quantity_sold }} sold so far</small>
									</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>
						@empty
							<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">
									</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="Enter ticket 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="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]">
									</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>
						@endforelse
					</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', $event->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', $event->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', $event->refund_days) }}">
						</div>
					</div>
				</div>
			</div>

			<div class="d-flex justify-content-end gap-3 mt-4 mb-5">
				<a href="{{ route('tickets.events') }}" 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">Update Event</button>
			</div>
		</form>
	</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);
				$(typeSelect).on('changed.bs.select', toggleEventFields);
			}

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

			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' : '';
			});

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

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

		let ticketTypeIndex = {{ max($event->ticketTypes->count(), 1) }};
		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