title = "Guest Check In"
url = "/officer/check-in"
layout = "BaliTiket2"

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

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

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

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


<div class="container py-md-4 py-3" id="demo-content">
    <div class="">
        {% flash %}
        <div class="alert alert-{{ (type == 'success') ? 'success' : 'danger' }} mt-3">
            {{ message }}
        </div>
        {% endflash %}
    </div>

	<h1 class="fw-bold">Guest Check In</h1>
	<p>Scan Barcode after that press button verification</p>

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

	<div class="d-flex align-items-center mb-4">
		Result: 
		<code class="bg-light p-2" id="result"></code>
	</div>

	<p class="text-md-start text-center">
		<a class="btn btn-success px-4 py-2 me-3" id="verifyButton">Verifikasi</a>
		<a class="btn btn-warning px-4 py-2" id="resetButton">Reset</a>
	</p>
</div>

{% 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) {
                console.log('Redirecting to:', scannedResult);
                if (isValidURL(scannedResult)) {
                    window.location.href = scannedResult; // Redirect ke URL hasil pemindaian
                } else {
                    alert('Hasil pemindaian bukan URL yang valid.');
                }
            } else {
                alert('Tidak ada hasil pemindaian untuk diverifikasi.');
            }
        });
    });

    // Fungsi untuk validasi URL
    function isValidURL(string) {
        try {
            new URL(string);
            return true;
        } catch (err) {
            return false;
        }
    }
</script>
{% endput %}