@extends('index')

@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Leitura Código de Barras</h1>
    </div>

    <script src="{{ asset('js/html5-qrcode.min.js') }}"></script>

    <div class="mt-3 mb-3">
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <form action="{{ route('buscar-codigo') }}" method="POST" enctype="multipart/form-data">
            @csrf
        
            <input class="mb-3" type="text" id="code" name="code" placeholder="Patrimônio" />
            <button id="clear_btn" style="display: none">clear</button>
            <button id="search_btn" style="display: none" type="submit">buscar</button>
        </form>
    </div>
    <div style="width: 500px" id="reader"></div>

    <div id="interactive" class="viewport" style="display: none"></div>
    <script>
        let detect = true
        const leitor = document.getElementById('reader')
        const code = document.getElementById('code')
        const search_btn = document.getElementById('search_btn')

        function lock() {
            leitor.style.display = 'none'
            search_btn.style.display = 'block'
            detect = false
        }

        function unlock() {
            detect = true
            search_btn.style.display = 'none'
            leitor.style.display = 'block'
        }

        function onScanSuccess(decodedText, decodedResult) {
            // Handle on success condition with the decoded text or result.
            if (!detect) return
            code.value = decodedText
            lock()
        }

        const html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", {
                fps: 10,
                qrbox: 250
            });
        html5QrcodeScanner.render(onScanSuccess);
    </script>
@endsection