@extends('tickets.layouts.public')

@section('title', $event->name . ' - Loyaltiya Tickets')

@section('content')
	<div class="wrapper">
		<div class="breadcrumb-block">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 col-md-10">
						<div class="barren-breadcrumb">
							<nav aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
									<li class="breadcrumb-item"><a href="{{ route('events.explore') }}">Explore Events</a></li>
									<li class="breadcrumb-item active" aria-current="page">{{ $event->name }}</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="event-dt-block p-80">
			<div class="container">
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12">
						<div class="event-top-dts">
							<div class="event-top-date">
								<span class="event-month">{{ $event->event_starts_at->format('M') }}</span>
								<span class="event-date">{{ $event->event_starts_at->format('d') }}</span>
							</div>
							<div class="event-top-dt">
								<h3 class="event-main-title">{{ $event->name }}</h3>
								<div class="event-top-info-status">
									<span class="event-type-name">
										<i class="fa-solid {{ $event->isOnline() ? 'fa-video' : 'fa-location-dot' }}"></i>
										{{ $event->isOnline() ? 'Online Event' : 'Venue Event' }}
									</span>
									<span class="event-type-name details-hr">
										Starts on <span class="ev-event-date">{{ $event->event_starts_at->format('D, M d, Y h:i A') }}</span>
									</span>
									<span class="event-type-name details-hr">
										{{ $event->event_starts_at->diffForHumans($event->event_ends_at, true) }}
									</span>
								</div>
							</div>
						</div>
					</div>

					<div class="col-xl-8 col-lg-7 col-md-12">
						<div class="main-event-dt">
							<div class="event-img">
								<img src="{{ $event->banner_image ? asset($event->banner_image) : asset('tickets/images/event-imgs/big-2.jpg') }}" alt="{{ $event->name }}">
							</div>
							<div class="share-save-btns dropdown">
								<button class="sv-btn me-2"><i class="fa-regular fa-bookmark me-2"></i>Save</button>
								<button class="sv-btn" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-share-nodes me-2"></i>Share</button>
								<ul class="dropdown-menu">
									<li><a class="dropdown-item" href="#"><i class="fa-brands fa-facebook me-3"></i>Facebook</a></li>
									<li><a class="dropdown-item" href="#"><i class="fa-brands fa-twitter me-3"></i>Twitter</a></li>
									<li><a class="dropdown-item" href="#"><i class="fa-brands fa-linkedin-in me-3"></i>LinkedIn</a></li>
									<li><a class="dropdown-item" href="#"><i class="fa-regular fa-envelope me-3"></i>Email</a></li>
								</ul>
							</div>

							<div class="main-event-content">
								<h4>About This Event</h4>
								@if ($event->description)
									<p>{!! nl2br(e($event->description)) !!}</p>
								@else
									<p>No description has been added for this event yet.</p>
								@endif
							</div>

							@if ($event->images->count())
								<div class="main-event-content mt-4">
									<h4>Event Gallery</h4>
									<div class="row g-3">
										@foreach ($event->images as $image)
											<div class="col-md-4 col-6">
												<a href="{{ asset($image->path) }}" data-lightbox="event-gallery" data-title="{{ $event->name }}">
													<img src="{{ asset($image->path) }}" alt="{{ $event->name }} gallery image" class="img-fluid rounded">
												</a>
											</div>
										@endforeach
									</div>
								</div>
							@endif
						</div>
					</div>

					<div class="col-xl-4 col-lg-5 col-md-12">
						<div class="main-card event-right-dt">
							<div class="bp-title">
								<h4>Event Details</h4>
							</div>

							<div class="time-left">
								<div class="countdown" data-event-datetime="{{ $event->event_starts_at->toIso8601String() }}">
									<div class="countdown-item">
										<span id="day"></span>days
									</div>
									<div class="countdown-item">
										<span id="hour"></span>Hours
									</div>
									<div class="countdown-item">
										<span id="minute"></span>Minutes
									</div>
									<div class="countdown-item">
										<span id="second"></span>Seconds
									</div>
								</div>
							</div>

							<div class="event-dt-right-group mt-5">
								<div class="event-dt-right-icon">
									<i class="fa-solid fa-circle-user"></i>
								</div>
								<div class="event-dt-right-content">
									<h4>Organised by</h4>
									<h5>{{ $event->admin->name }}</h5>
								</div>
							</div>

							<div class="event-dt-right-group">
								<div class="event-dt-right-icon">
									<i class="fa-solid fa-calendar-day"></i>
								</div>
								<div class="event-dt-right-content">
									<h4>Date and Time</h4>
									<h5>{{ $event->event_starts_at->format('D, M d, Y h:i A') }}</h5>
								</div>
							</div>

							@if ($event->isOffline())
								<div class="event-dt-right-group">
									<div class="event-dt-right-icon">
										<i class="fa-solid fa-location-dot"></i>
									</div>
									<div class="event-dt-right-content">
										<h4>Location</h4>
										<h5 class="mb-0">{{ $event->venue_name }}</h5>
										<p class="mb-1">
											{{ collect([$event->address_1, $event->address_2, $event->city, $event->state, $event->zip_code, $event->country])->filter()->implode(', ') }}
										</p>
										@if ($event->google_map_link)
											<a href="{{ $event->google_map_link }}" target="_blank" rel="noopener">
												<i class="fa-solid fa-location-dot me-2"></i>View Map
											</a>
										@endif
									</div>
								</div>
							@else
								<div class="event-dt-right-group">
									<div class="event-dt-right-icon">
										<i class="fa-solid fa-video"></i>
									</div>
									<div class="event-dt-right-content">
										<h4>Streaming Link</h4>
										<p class="mb-0 text-muted">Available after booking confirmation</p>
									</div>
								</div>
							@endif

							<form method="POST" action="{{ route('events.checkout', $event) }}">
								@csrf

								<div class="select-tickets-block">
									<h6>Select Tickets</h6>

									{{-- Guests can pick tickets freely; they'll be asked to sign in
									     only when they hit "Book Now". Selection + capacity reservation
									     happens now, so nothing they picked is lost during sign-in. --}}
									@guest('customer')
										<div class="alert alert-info d-flex justify-content-between align-items-center flex-wrap gap-2">
											<span><i class="fa-solid fa-circle-info me-2"></i>You'll sign in to complete your booking after selecting tickets.</span>
										</div>
									@endguest

									<div id="ticket_types_wrapper">
										@foreach ($event->ticketTypes as $ticketType)
											<div class="select-ticket-action ticket-type-row mb-3" data-price="{{ $ticketType->price }}" data-id="{{ $ticketType->id }}">
												<div>
													<div class="ticket-price">{{ $ticketType->name }}</div>
													<div class="mb-0 text-muted">{{ $ticketType->description }}</div>
													<small class="text-muted">{{ $event->currency }} {{ number_format($ticketType->price, 2) }}</small>
													@if (! is_null($ticketType->remaining()))
														<small class="d-block text-muted">{{ $ticketType->remaining() }} left</small>
													@endif
												</div>
												<div class="quantity">
													<div class="counter">
														<span class="down" onClick='decreaseTypeCount(event, this)'>-</span>
														<input
															type="text"
															class="ticket-type-qty"
															name="tickets[{{ $ticketType->id }}]"
															value="0"
															data-max="{{ $ticketType->remaining() ?? '' }}"
															readonly
														>
														<span class="up" onClick='increaseTypeCount(event, this)'>+</span>
													</div>
												</div>
											</div>
										@endforeach

										@if ($event->age_restriction)
											<p><i class="fa-solid fa-circle-exclamation me-1"></i>Age restriction: {{ $event->age_restriction }}+</p>
										@endif

										<div class="xtotel-tickets-count">
											<div class="x-title"><span id="ticket_qty_label">0</span>x Ticket(s)</div>
											<div class="d-flex justify-content-between">
												<small class="text-muted">Subtotal</small>
												<small class="text-muted">{{ $event->currency }} <span id="ticket_subtotal">0.00</span></small>
											</div>
											<div class="d-flex justify-content-between" id="discount_row" style="display:none;">
												<small class="text-muted">Discount</small>
												<small class="text-muted">-{{ $event->currency }} <span id="ticket_discount">0.00</span></small>
											</div>
											<div class="d-flex justify-content-between">
												<small class="text-muted">GST ({{ rtrim(rtrim(number_format(config('services.tax.gst_rate', 0.05) * 100, 2), '0'), '.') }}%)</small>
												<small class="text-muted">{{ $event->currency }} <span id="ticket_gst">0.00</span></small>
											</div>
											<h4 class="d-flex justify-content-between mt-2">
												<span>Total</span>
												<span>{{ $event->currency }} <span id="ticket_total">0.00</span></span>
											</h4>
										</div>
									</div>
								</div>

								<div class="coupon-block mt-3 p-2">
									<label class="form-label fs-16">Have a coupon?</label>
									<div class="d-flex gap-2">
										<input type="text" id="coupon_code_input" name="coupon_code" class="form-control h_40 text-uppercase" placeholder="Enter code" value="{{ old('coupon_code') }}">
										<button type="button" class="main-btn h_40" id="apply_coupon_btn">Apply</button>
									</div>
									<div id="coupon_feedback" class="mt-2"></div>
								</div>

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

								<div class="booking-btn mt-3">
									<button type="submit" class="main-btn btn-hover w-100">
										@guest('customer')
											Continue &mdash; Sign In to Book
										@else
											Book Now
										@endguest
									</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
	<script>

		const GST_RATE = {{ config('services.tax.gst_rate', 0.05) }};
		let appliedDiscount = 0;

		function ticketRows() {
			return document.querySelectorAll('.ticket-type-row');
		}

		function updateTicketTotal() {
			let subtotal = 0;
			let totalQty = 0;

			ticketRows().forEach(function (row) {
				const price = parseFloat(row.dataset.price);
				const qty = parseInt(row.querySelector('.ticket-type-qty').value) || 0;
				subtotal += price * qty;
				totalQty += qty;
			});

			const discount = Math.min(appliedDiscount, subtotal);
			const taxable = Math.max(0, subtotal - discount);
			const gst = taxable * GST_RATE;
			const total = taxable + gst;

			document.getElementById('ticket_subtotal').innerText = subtotal.toFixed(2);
			document.getElementById('ticket_gst').innerText = gst.toFixed(2);
			document.getElementById('ticket_total').innerText = total.toFixed(2);
			document.getElementById('ticket_qty_label').innerText = totalQty;

			const discountRow = document.getElementById('discount_row');
			if (discount > 0) {
				document.getElementById('ticket_discount').innerText = discount.toFixed(2);
				discountRow.style.display = '';
			} else {
				discountRow.style.display = 'none';
			}

			// alert(subtotal);
			// alert(totalQty);

			return { subtotal, totalQty };
		}

		function reapplyCouponIfPresent() {
			const couponInput = document.getElementById('coupon_code_input');
			if (appliedDiscount > 0 && couponInput.value.trim()) {
				document.getElementById('apply_coupon_btn').click();
			}
		}

		function increaseTypeCount(e, el) {
			const input = el.parentElement.querySelector('input');
			const max = input.dataset.max ? parseInt(input.dataset.max) : null;
			const next = parseInt(input.value || 0) + 1;
			input.value = max !== null ? Math.min(next, max) : next;
			updateTicketTotal();
			reapplyCouponIfPresent();
		}

		function decreaseTypeCount(e, el) {
			const input = el.parentElement.querySelector('input');
			input.value = Math.max(0, parseInt(input.value || 0) - 1);
			updateTicketTotal();
			reapplyCouponIfPresent();
		}

		document.addEventListener('DOMContentLoaded', function () {
			const applyCouponBtn = document.getElementById('apply_coupon_btn');
			const couponInput = document.getElementById('coupon_code_input');
			const couponFeedback = document.getElementById('coupon_feedback');

			applyCouponBtn.addEventListener('click', function () {
				const code = couponInput.value.trim();
				if (!code) return;

				const { subtotal, totalQty } = updateTicketTotal();
				if (totalQty === 0) {
					couponFeedback.innerHTML = '<small class="text-danger">Select at least one ticket first.</small>';
					return;
				}

				fetch('{{ route('events.coupon.validate', $event) }}', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'X-CSRF-TOKEN': '{{ csrf_token() }}',
						'Accept': 'application/json',
					},
					body: JSON.stringify({ code, subtotal: subtotal }),
				})
					.then(res => res.json())
					.then(data => {
						couponFeedback.innerHTML = `<small class="${data.valid ? 'text-success' : 'text-danger'}">${data.message}</small>`;
						console.log(data);
						appliedDiscount = data.valid ? data.discount : 0;
						updateTicketTotal();
					});
			});

			const countdownEl = document.querySelector('.countdown[data-event-datetime]');
			if (!countdownEl) return;

			const target = new Date(countdownEl.dataset.eventDatetime).getTime();

			function tick() {
				const distance = target - Date.now();
				const dayEl = document.getElementById('day');
				const hourEl = document.getElementById('hour');
				const minuteEl = document.getElementById('minute');
				const secondEl = document.getElementById('second');

				if (distance <= 0) {
					dayEl.innerText = hourEl.innerText = minuteEl.innerText = secondEl.innerText = '0';
					return;
				}

				dayEl.innerText = Math.floor(distance / (1000 * 60 * 60 * 24));
				hourEl.innerText = Math.floor((distance / (1000 * 60 * 60)) % 24);
				minuteEl.innerText = Math.floor((distance / (1000 * 60)) % 60);
				secondEl.innerText = Math.floor((distance / 1000) % 60);
			}

			tick();
			setInterval(tick, 1000);
		});
	</script>
@endpush