@extends('layouts.admin')

@section('content')
<div class="max-w-2xl mx-auto py-10">

    <h1 class="text-3xl font-bold text-gray-900 mb-6 text-center">
        QR Attendance Scanner
    </h1>

    <!-- Camera Selector -->
    <div class="mb-4">
        <label class="block font-semibold text-gray-700 mb-1">Select Camera</label>
        <select id="camera-select" class="w-full rounded border-gray-300 p-2 bg-white shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
            <option>Loading cameras...</option>
        </select>
    </div>

    <!-- Scanner Box -->
    <div class="bg-white shadow-xl rounded-xl p-4">
        <div id="reader" style="width: 100%; min-height: 350px;" class="rounded-lg overflow-hidden"></div>
    </div>

</div>

<script src="https://unpkg.com/html5-qrcode"></script>

<style>
    .modal-bg {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
    .modal-box {
        background: white;
        padding: 32px;
        border-radius: 14px;
        text-align: center;
        width: 360px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.25);
        animation: fadeIn 0.25s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to   { opacity: 1; transform: scale(1); }
    }
</style>

<audio id="beep-sound">
    <source src="https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg" type="audio/ogg">
</audio>

<!-- Modal -->
<div id="modal" class="modal-bg">
    <div class="modal-box">
        <h2 id="modal-title" class="text-2xl font-bold mb-4"></h2>
        <p id="modal-message" class="text-gray-700 mb-4"></p>
        <div id="modal-details" class="text-left text-gray-600 text-sm mb-4"></div>

        <button id="modal-close" class="bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition">
            OK
        </button>
    </div>
</div>

<script>
    let scanner;
    let currentCameraId = null;
    let isProcessing = false;

    async function listCameras() {
        const devices = await Html5Qrcode.getCameras();
        const select = document.getElementById("camera-select");
        select.innerHTML = "";

        devices.forEach(cam => {
            const option = document.createElement("option");
            option.value = cam.id;
            option.textContent = cam.label || `Camera ${select.length + 1}`;
            select.appendChild(option);
        });

        if (devices.length > 0) {
            currentCameraId = devices[0].id;
            startScanner(currentCameraId);
        }

        select.addEventListener("change", function () {
            currentCameraId = this.value;
            restartScanner();
        });
    }

    function startScanner(cameraId) {
        scanner = new Html5Qrcode("reader");

        scanner.start(
            cameraId,
            { fps: 10, qrbox: 250 },
            onScanSuccess
        );
    }

    function restartScanner() {
        const oldScanner = document.getElementById("reader");
        if (oldScanner) oldScanner.remove();

        const newScanner = document.createElement("div");
        newScanner.id = "reader";
        newScanner.style.width = "100%";
        newScanner.style.minHeight = "350px";
        newScanner.classList.add("rounded-lg", "overflow-hidden");

        document.querySelector(".shadow-xl").appendChild(newScanner);

        scanner = new Html5Qrcode("reader");

        scanner.start(
            currentCameraId,
            { fps: 10, qrbox: 250 },
            onScanSuccess
        ).catch(err => console.error(err));
    }

    function showModal(title, message, detailsHtml = "") {
        document.getElementById("modal-title").innerText = title;
        document.getElementById("modal-message").innerText = message;
        document.getElementById("modal-details").innerHTML = detailsHtml;
        document.getElementById("modal").style.display = "flex";
    }

    function closeModal() {
        document.getElementById("modal").style.display = "none";
        isProcessing = false;
        setTimeout(() => restartScanner(), 300);
    }

    document.getElementById("modal-close").onclick = closeModal;

    function onScanSuccess(decodedText) {
        if (isProcessing) return;
        isProcessing = true;

        scanner.stop();
        const match = decodedText.match(/\/payments\/(\d+)\/receipt/);

        if (!match) {
            showModal("Invalid QR Code", "This QR does not match the system format.");
            return;
        }

        const bookingId = match[1];
        document.getElementById("beep-sound").play();

        fetch("{{ route('admin.attendance.verify') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ booking_id: bookingId })
        })
        .then(res => res.json())
        .then(data => {
            let d = data.booking;

            if (data.status === "success") {
                showModal(
                    "Attendance Recorded",
                    "The attendee has been successfully checked in.",
                    `
                        <strong>User:</strong> ${d.user}<br>
                        <strong>Facility:</strong> ${d.facility}<br>
                        <strong>Dewan:</strong> ${d.dewan}<br>
                        <strong>Date:</strong> ${d.date}<br>
                        <strong>Time:</strong> ${d.start} - ${d.end}<br>
                        <strong>Booking ID:</strong> ${d.id}<br>
                        <strong>Status:</strong> Present
                    `
                );
            } 
            else if (data.status === "duplicate") {
                showModal(
                    "Already Checked In",
                    "Attendance for this booking has already been recorded.",
                    `
                        <strong>User:</strong> ${d.user}<br>
                        <strong>Facility:</strong> ${d.facility}<br>
                        <strong>Dewan:</strong> ${d.dewan}<br>
                        <strong>Date:</strong> ${d.date}<br>
                        <strong>Time:</strong> ${d.start} - ${d.end}<br>
                        <strong>Booking ID:</strong> ${d.id}<br>
                        <strong>Status:</strong> Already Present
                    `
                );
            }
        })
        .catch(() => {
            showModal("System Error", "An unexpected error occurred.");
        });
    }

    listCameras();
</script>

@endsection