@extends('tickets.layouts.admin_layout')
@section('title', 'Scan Tickets - Loyaltiya Tickets')
@section('content')
	<div class="col-md-12">
		<div class="d-main-title">
			<h3><i class="fa-solid fa-qrcode me-3"></i>Scan Tickets</h3>
		</div>
	</div>
	<div class="col-md-12">
		<div class="main-card mt-4 p-4">
			<div id="reader" style="max-width: 500px; margin: 0 auto;"></div>
			<div id="scan-result" class="mt-4" style="max-width: 500px; margin: 0 auto; display: none;">
				<div id="scan-result-body" class="main-card p-4"></div>
			</div>
		</div>
	</div>
@endsection
@push('styles')
	<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
@endpush
@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const resultEl = document.getElementById('scan-result');
			const resultBodyEl = document.getElementById('scan-result-body');
			let isProcessing = false;
			const scanner = new Html5Qrcode('reader');

			function renderTicket(data, ticketNumber) {
				console.log(data);
				if (!data.success) {
					resultBodyEl.innerHTML = `
						<h5 class="text-danger mb-3">Invalid Ticket</h5>
						<p class="mb-1"><strong>Message:</strong> ${data.message ?? ''}</p>
						<button class="co-main-btn w-100 mt-2" onclick="resumeScanning()">Scan Next</button>
					`;
					resultEl.style.display = 'block';
					return;
				}

				const remaining = data.remaining;
				const fullyUsed = remaining <= 0;

				const admitControls = fullyUsed
					? `<p class="text-danger mb-0 mt-3"><strong>This ticket has already been fully redeemed.</strong></p>`
					: `
						<div class="mt-3">
							<label for="admitCount" class="form-label mb-1">Admitting how many now?</label>
							<input type="number" id="admitCount" class="form-control mb-3" min="1" max="${remaining}" value="${remaining}">
							<button class="main-btn btn-hover w-100" onclick="checkIn('${ticketNumber}')">Admit</button>
						</div>
					`;

				resultBodyEl.innerHTML = `
					<h5 class="text-success mb-3">Valid Ticket</h5>
					${data.event_name ? `<p class="mb-1"><strong>Event:</strong> ${data.event_name}</p>` : ''}
					${data.customer_name ? `<p class="mb-1"><strong>Attendee:</strong> ${data.customer_name} (${data.customer_email})</p>` : ''}
					<p class="mb-1"><strong>Party size:</strong> ${data.quantity}</p>
					<p class="mb-1"><strong>Already admitted:</strong> ${data.checked_in}</p>
					<p class="mb-1"><strong>Remaining:</strong> ${remaining}</p>
					${admitControls}
					<button class="co-main-btn w-100 mt-2" onclick="resumeScanning()">Scan Next</button>
				`;
				resultEl.style.display = 'block';
			}

			function onScanSuccess(decodedText) {
				if (isProcessing) return;
				isProcessing = true;
				scanner.pause(true);
				fetch('{{ route('tickets.scan.verify') }}', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'X-CSRF-TOKEN': '{{ csrf_token() }}',
						'Accept': 'application/json',
					},
					body: JSON.stringify({ ticket_number: decodedText }),
				})
					.then(res => res.json())
					.then(data => renderTicket(data, decodedText))
					.catch(() => {
						resultBodyEl.innerHTML = '<p class="text-danger">Something went wrong verifying this ticket.</p><button class="co-main-btn w-100 mt-2" onclick="resumeScanning()">Scan Next</button>';
						resultEl.style.display = 'block';
					});
			}

			window.checkIn = function (ticketNumber) {
				const countInput = document.getElementById('admitCount');
				const count = countInput ? parseInt(countInput.value, 10) : 1;

				if (!count || count < 1) {
					resultBodyEl.insertAdjacentHTML('beforeend', '<p class="text-danger mt-2">Enter a valid number of people.</p>');
					return;
				}

				fetch(`{{ route('tickets.check_in', ['ticket' => '__TICKET__']) }}`.replace('__TICKET__', ticketNumber), {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'X-CSRF-TOKEN': '{{ csrf_token() }}',
						'Accept': 'application/json',
					},
					body: JSON.stringify({ count }),
				})
					.then(res => res.json())
					.then(data => {
						resultBodyEl.innerHTML = `
							<h5 class="${data.success ? 'text-success' : 'text-danger'} mb-3">${data.message}</h5>
							<button class="co-main-btn w-100 mt-2" onclick="resumeScanning()">Scan Next</button>
						`;
					});
			};

			window.resumeScanning = function () {
				resultEl.style.display = 'none';
				isProcessing = false;
				scanner.resume();
			};

			scanner.start(
				{ facingMode: 'environment' },
				{ fps: 10, qrbox: 250 },
				onScanSuccess
			);
		});
	</script>
@endpush