@include('header')
    <div class="container-fluid">
        <br>
        <div class="row">
            <div class="col-12">
                <div style="width: 100%" id="reader"></div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-12">
                <div id="accesoPendiente" class="alert alert-warning" style="text-align:center; display:block">
                    <span id="textoPendiente">SCANNEAR BOLETO</span>
                </div>
                <div id="accesoCorrecto" class="alert alert-success" style="text-align:center; display:none">
                    ACCESO CORRECTO
                </div>
                <div id="accesoInvalido" class="alert alert-danger" style="text-align:center; display:none">
                    CÓDIGO INVÁLIDO
                </div>
                <div id="accesoUtilizado" class="alert alert-danger" style="text-align:center; display:none">
                    CÓDIGO YA UTILZADO
                </div>
            </div>
        </div>
        <div class="row">
            <div class="d-grid gap-2">
                <button onclick="location.reload()" type="button" class="btn btn-lg btn-primary">Reiniciar</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{{ asset('js/html5-qrcode.js') }}"></script>
    <script type="text/javascript">
        function onScanSuccess(decodedText, decodedResult) {
            $('#accesoPendiente').show();
            $('#accesoCorrecto').hide();
            $('#accesoInvalido').hide();
            $('#textoPendiente').html('Espere un momento...');
            var codigoReserva = decodedText;
            setTimeout(() => {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '{{route('ajax.boletos.checkin')}}',
                    datatType : 'json',
                    type: 'POST',
                    data: { 'codigoReserva' : codigoReserva },
                    success:function(response) {
                        console.log(response);
                        if(response.return == 'true')
                            {
                                $('#accesoPendiente').hide();
                                $('#accesoCorrecto').show();
                                $('#accesoInvalido').hide();
                                $('#accesoUtilizado').hide();
                            }else if (response.return == 'checked'){
                                $('#accesoPendiente').hide();
                                $('#accesoCorrecto').hide();
                                $('#accesoInvalido').hide();
                                $('#accesoUtilizado').show();
                            }else{
                                $('#accesoPendiente').hide();
                                $('#accesoCorrecto').hide();
                                $('#accesoInvalido').show();
                                $('#accesoUtilizado').hide();
                            }
                    },
                    error:function(response){
                        console.log('error: '+response);
                    }
                });
            }, "2000");
        }

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