@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