84 lines
4.2 KiB
PHP
84 lines
4.2 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="p-6">
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-6">Scan QR Code Validasi</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border">
|
|
<div id="qr-reader" class="w-full"></div>
|
|
<p id="qr-reader-status" class="text-center text-sm text-gray-500 mt-2">Arahkan kamera ke QR Code...</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm border">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Hasil Scan</h3>
|
|
<div id="qr-scan-result">
|
|
<div class="text-center py-10">
|
|
<p class="text-gray-400">Menunggu hasil scan...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script untuk library QR Scanner --}}
|
|
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const resultContainer = document.getElementById('qr-scan-result');
|
|
const statusContainer = document.getElementById('qr-reader-status');
|
|
|
|
function onScanSuccess(decodedText, decodedResult) {
|
|
// Hentikan scanner setelah berhasil
|
|
html5QrcodeScanner.clear();
|
|
statusContainer.innerHTML = `<span class="font-bold text-green-600">Scan Berhasil!</span> Memuat data...`;
|
|
|
|
// Kirim token ke server untuk divalidasi
|
|
fetch(`/admin/bookings/validate/${decodedText}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
// Jika booking tidak ditemukan (error 404) atau error lainnya
|
|
throw new Error(`Booking tidak valid atau terjadi error (Status: ${response.status})`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
const booking = data.data;
|
|
// Tampilkan hasil yang valid
|
|
resultContainer.innerHTML = `
|
|
<div class="p-4 bg-green-50 border-l-4 border-green-500">
|
|
<h4 class="text-xl font-bold text-green-800">✅ Valid!</h4>
|
|
<div class="mt-4 space-y-2 text-sm">
|
|
<p><strong class="w-24 inline-block">Nama User:</strong> ${booking.user_name}</p>
|
|
<p><strong class="w-24 inline-block">Venue:</strong> ${booking.venue_name}</p>
|
|
<p><strong class="w-24 inline-block">Meja:</strong> ${booking.table_name}</p>
|
|
<p><strong class="w-24 inline-block">Waktu:</strong> ${booking.start_time} - ${booking.end_time}</p>
|
|
<p><strong class="w-24 inline-block">Durasi:</strong> ${booking.duration}</p>
|
|
<p><strong class="w-24 inline-block">Status:</strong> <span class="font-bold capitalize">${booking.status}</span></p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// Jika ada pesan error dari server
|
|
resultContainer.innerHTML = `<div class="p-4 bg-red-50 border-l-4 border-red-500"><h4 class="text-xl font-bold text-red-800">❌ Tidak Valid!</h4><p class="mt-2 text-red-700">${data.error || 'Data booking tidak bisa diambil.'}</p></div>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error:", error);
|
|
// Tampilkan error jika fetch gagal
|
|
resultContainer.innerHTML = `<div class="p-4 bg-red-50 border-l-4 border-red-500"><h4 class="text-xl font-bold text-red-800">❌ Error!</h4><p class="mt-2 text-red-700">${error.message}</p></div>`;
|
|
});
|
|
}
|
|
|
|
// Inisialisasi scanner
|
|
var html5QrcodeScanner = new Html5QrcodeScanner(
|
|
"qr-reader", { fps: 10, qrbox: 250 }
|
|
);
|
|
|
|
// Render scanner
|
|
html5QrcodeScanner.render(onScanSuccess);
|
|
});
|
|
</script>
|
|
@endsection |