@extends('layouts.app')
@section('content')
<div id="admin-content">
    <div class="container">
        <div class="container">
            <h2>Scan Barcode</h2>

            <div id="interactive" class="viewport"></div>
            <div id="result_strip">
                <div class="code">
                    <span class="label">Barcode:</span>
                    <span class="value" id="barcode_value">N/A</span>
                </div>
            </div>

            <form id="scanForm" action="{{ route('books.process_scanned_book') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="scanned_barcode" id="scanned_barcode_input">
                <button type="submit" class="btn btn-success mt-3">Process Book</button>
            </form>

            <style>
                /* Basic styling for the scanner view */
                #interactive {
                    width: 100%;
                    height: 400px;
                    /* Adjust as needed */
                    background-color: #333;
                    position: relative;
                    overflow: hidden;
                }

                #interactive video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    /* Ensures video fills container without distortion */
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .drawingBuffer {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                #result_strip {
                    margin-top: 20px;
                    padding: 10px;
                    border: 1px solid #ccc;
                    background-color: #f9f9f9;
                }
            </style>
        </div>

        @section('scripts')
        <script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
    var barcodeValueSpan = document.getElementById('barcode_value');
    var scannedBarcodeInput = document.getElementById('scanned_barcode_input');
    var scanForm = document.getElementById('scanForm');

    Quagga.init({
        inputStream : {
            name : "Live",
            type : "LiveStream",
            target: document.querySelector('#interactive'), // Or '#yourElement' (CSS selector)
            constraints: {
                width: 640,
                height: 480,
                facingMode: "environment" // 'user' for front camera, 'environment' for back camera
            },
        },
        decoder : {
            readers : ["ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader", "2of5_reader", "code_93_reader", "code_128_reader"]
        }
    }, function(err) {
        if (err) {
            console.log(err);
            alert("Error initializing scanner: " + err.message + ". Make sure you have a camera and grant permission.");
            return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
    });

    Quagga.onDetected(function(data) {
        var barcode = data.codeResult.code;
        console.log("Barcode detected:", barcode);
        barcodeValueSpan.textContent = barcode;
        scannedBarcodeInput.value = barcode;
        scanForm.style.display = 'block'; // Show the form
        Quagga.stop(); // Stop scanning after a successful detection
    });

    // Handle errors during runtime
    Quagga.onProcessed(function(result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

        if (result) {
            if (result.boxes) {
                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.width), parseInt(drawingCanvas.height));
                result.boxes.filter(function (box) {
                    return box !== result.box;
                }).forEach(function (box) {
                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
                });
            }

            if (result.box) {
                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
            }

            if (result.codeResult && result.codeResult.code) {
                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: "red", lineWidth: 3});
            }
        }
    });
});
        </script>
        @endsection
    </div>
</div>
@endsection