35354-vm/scan.php

<?php
require_once __DIR__ . '/includes/auth.php';
require_role('Librarian');

require_once __DIR__ . '/includes/header.php';
?>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h2>Scan QR Code</h2></div>
            <div class="card-body">
                <div class="mb-3">
                    <button id="start-checkin" class="btn btn-success">Start Check-in</button>
                    <button id="start-checkout" class="btn btn-primary">Start Check-out</button>
                </div>
                <div id="scanner-container" style="width: 100%; display: none;"></div>
                <div id="checkout-email-container" class="mb-3" style="display: none;">
                    <label for="member_email" class="form-label">Member Email</label>
                    <input type="email" class="form-control" id="member_email">
                </div>
                <div id="scan-result" class="mt-3"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h2>Manual Entry</h2></div>
            <div class="card-body">
                <form id="checkout-form">
                    <div class="mb-3">
                        <label for="manual_member_email" class="form-label">Member Email</label>
                        <input type="email" class="form-control" id="manual_member_email" required>
                    </div>
                    <div class="mb-3">
                        <label for="book_isbn" class="form-label">Book ISBN</label>
                        <input type="text" class="form-control" id="book_isbn" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Check-out</button>
                </form>
                <hr>
                <form id="checkin-form">
                    <div class="mb-3">
                        <label for="checkin_book_isbn" class="form-label">Book ISBN</label>
                        <input type="text" class="form-control" id="checkin_book_isbn" required>
                    </div>
                    <button type="submit" class="btn btn-success">Check-in</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const html5QrCode = new Html5Qrcode("scanner-container");
    const config = { fps: 10, qrbox: 250 };
    let currentAction = null;

    const qrCodeSuccessCallback = (decodedText, decodedResult) => {
        processScan(decodedText);
        html5QrCode.stop();
        document.getElementById('scanner-container').style.display = 'none';
    };

    document.getElementById('start-checkin').addEventListener('click', () => {
        currentAction = 'checkin';
        document.getElementById('checkout-email-container').style.display = 'none';
        document.getElementById('scanner-container').style.display = 'block';
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
    });

    document.getElementById('start-checkout').addEventListener('click', () => {
        currentAction = 'checkout';
        document.getElementById('checkout-email-container').style.display = 'block';
        document.getElementById('scanner-container').style.display = 'block';
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
    });

    function processScan(scannedData) {
        let formData = new FormData();
        formData.append('action', currentAction);
        formData.append('qr_code_hash', scannedData);

        if (currentAction === 'checkout') {
            let user_email = document.getElementById('member_email').value;
            if (!user_email) {
                document.getElementById('scan-result').innerHTML = `<div class="alert alert-danger">Please enter a member email for checkout.</div>`;
                return;
            }
            formData.append('user_email', user_email);
        }

        fetch('process-scan.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            let alertClass = data.success ? 'alert-success' : 'alert-danger';
            document.getElementById('scan-result').innerHTML = `<div class="alert ${alertClass}">${data.message}</div>`;
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('scan-result').innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
        });
    }

    // Manual form submissions
    document.getElementById('checkout-form').addEventListener('submit', function(e) {
        e.preventDefault();
        let user_email = document.getElementById('manual_member_email').value;
        let isbn = document.getElementById('book_isbn').value;
        // In a real app, you'd convert ISBN to qr_code_hash or have a separate endpoint
        // For now, we'll assume the librarian enters the hash for simplicity
        processManual('checkout', isbn, user_email);
    });

    document.getElementById('checkin-form').addEventListener('submit', function(e) {
        e.preventDefault();
        let isbn = document.getElementById('checkin_book_isbn').value;
        processManual('checkin', isbn);
    });

    function processManual(action, qr_code_hash, user_email = null) {
        let formData = new FormData();
        formData.append('action', action);
        formData.append('qr_code_hash', qr_code_hash);
        if (user_email) {
            formData.append('user_email', user_email);
        }

        fetch('process-scan.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            let alertClass = data.success ? 'alert-success' : 'alert-danger';
            document.getElementById('scan-result').innerHTML = `<div class="alert ${alertClass}">${data.message}</div>`;
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('scan-result').innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
        });
    }
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>