@extends('layouts.app')

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <h1 class="h3 mb-3">Consultar QR</h1>

        <div class="row">
            <div class="col-12 p-3">
                <div class="card flex-fill table-responsive p-3">
                    <div class="row justify-content-center">
                        <div class="col-md-6 text-center">
                            <div id="reader" style="width: 100%; max-width: 400px; margin: auto;"></div>
                            <div id="qr-result" class="mt-3 text-success fw-bold"></div>
                            <form action="{{ route('identificarItemPorQR') }}" method="POST">
                                @csrf
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('scripts')
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script>
    const html5QrCode = new Html5Qrcode("reader");

    Html5Qrcode.getCameras().then(devices => {
        if (devices && devices.length) {
            const cameraId = devices[0].id;
            html5QrCode.start(
                { facingMode: "eviroment" },
                cameraId,
                {
                    fps: 10,
                    qrbox: { width: 250, height: 250 }
                },
                (decodedText, decodedResult) => {
                    document.getElementById('qr-result').innerText = "QR Code lido: " + decodedText;

                    const form = document.querySelector('form[action="{{ route('identificarItemPorQR') }}"]');

                    const input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "qr_code";
                    input.value = decodedText;

                    form.appendChild(input);
                    form.submit();

                    html5QrCode.stop().catch(err => {
                        console.error("Erro ao parar a câmera:", err);
                    });
                },
                errorMessage => {
                }
            ).catch(err => {
                console.error("Erro ao iniciar a câmera:", err);
            });
        } else {
            document.getElementById('qr-result').innerText = "Nenhuma câmera encontrada.";
        }
    }).catch(err => {
        document.getElementById('qr-result').innerText = "Erro ao acessar a câmera.";
    });
</script>
@endsection