title = "Payment Check"
url = "/officer/payment-check"
layout = "BaliTiket2"

[session]
security = "user"
allowedUserGroups[] = "officer"
redirect = "bali-tiket/login"
==
<?php
	use Yuren\BaliTiket\Models\Bookings;

	use Winter\Storm\Auth\AuthManager;
	use Auth;

	function onStart()
	{
		$user = Auth::getUser();
		if ($user) {
			$this['user'] = $user;

			$this['vendors'] = Vendor::where('id', $user->vendor)->first();
			
			$code = $this->param('code');
			$this['booking'] = Bookings::where('no_invoice',$code)->first();
		} 
	}
?>
==


{% put styles %}
<link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
<link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
{% endput %}

<main class="wrapper" style="padding-top:2em">
	<section class="container" id="demo-content">
		<h1 class="title">Scan Barcode</h1>

		<div>
			<a class="button" id="resetButton">Reset</a>
		</div>

		<div class="p-3">
			<video id="video" width="100%" height="400" style="border: 1px solid gray"></video>
		</div>

		<label>Result:</label>
		<pre><code id="result"></code></pre>

		<p class="">
			<a class="button" id="verifyButton">Verifikasi</a>
		</p>
	</section>
</main>

{% put scripts %}
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
<script type="text/javascript">
	window.addEventListener('load', function () {
		let selectedDeviceId;
		let scannedResult = null;
		const codeReader = new ZXing.BrowserMultiFormatReader();
		console.log('ZXing code reader initialized');

		// List video input devices
		codeReader.listVideoInputDevices()
		.then((videoInputDevices) => {
				// Cari kamera belakang berdasarkan label perangkat
			const backCamera = videoInputDevices.find((device) =>
				device.label.toLowerCase().includes('back')
				);

				// Jika ditemukan, gunakan kamera belakang, jika tidak, fallback ke perangkat pertama
			selectedDeviceId = backCamera ? backCamera.deviceId : videoInputDevices[0].deviceId;

				// Mulai scanning langsung saat halaman dimuat
			codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
				if (result) {
					console.log(result);
						scannedResult = result.text; // Simpan hasil pemindaian
						document.getElementById('result').textContent = scannedResult;
					}
					if (err && !(err instanceof ZXing.NotFoundException)) {
						console.error(err);
					}
				});
			console.log(`Started continuous decode from camera with id ${selectedDeviceId}`);
		})
		.catch((err) => {
			console.error(err);
		});

		// Fungsi reset
		document.getElementById('resetButton').addEventListener('click', () => {
			scannedResult = null;
			document.getElementById('result').textContent = '';
			console.log('Reset.');
		});

		// Fungsi verifikasi
		document.getElementById('verifyButton').addEventListener('click', () => {
			if (scannedResult) {
				fetch('/verify-barcode', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({ barcode: scannedResult })
				})
				.then((response) => response.json())
				.then((data) => {
					if (data.success) {
						alert('Barcode berhasil diverifikasi!');
					} else {
						alert('Gagal verifikasi: ' + data.message);
					}
				})
				.catch((error) => console.error('Error:', error));
			} else {
				alert('Tidak ada hasil pemindaian untuk diverifikasi.');
			}
		});
	});
</script>
{% endput %}