{% extends 'app.html.twig' %}
{% block contenido %}

    <div class="container-fluid pt-1 ps-5">
        <div class="row justify-content-center mt-4 ">
            <div class="col-12 text-left" style="font-size: 16px">
                <span class="text-danger"> Recpción de Baterias: </span>
            </div>
        </div>
        <hr>
            <div class="row w-100 justify-content-center mt-3">
                <div class="col-6">
                    <button tabindex="-1" id="scan_individual" style="min-width: 148px" type="button" class="btn btn-danger " data-toggle="modal" data-target="#modLeer">
                        <i class="fas fa-qrcode mr-2"></i> Iniciar Recepción
                    </button>
                </div>
            </div>
    </div>

    <!-- Modal escaneo -->
    <div class="modal " id="modLeer" tabindex="-1" role="dialog"  data-bs-backdrop='static' data-keyboard="false">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content" style="min-height: 98%">
                <div class="modal-header" style="padding: 15px">
                    <div class="row w-100 justify-content-center mt-0 ">
                        <div class="col-12 text-left" style="font-size: 16px">
                            <span id="titulo" class="text-danger"> Escaneado Codigo</span>
                            <div style="float: right">
                                <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
                                <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
                                <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body ps-2">
                    <input id="input_qr" type="text" style="min-width: 100%; opacity: 1%;max-height: 20px" inputmode="none">
                    <div class="col-12 text-left mt-2" style="font-size: 16px">
                        <ul id="cod_escaneados" class="text-success"></ul>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 15px">
                    <button tabindex="-1" id="manual" type="button" class="btn btn-success " onclick="$('#modManual').modal('show'); $('#modLeer').modal('hide');  $('#input_qr').focus()">
                        Registro Manual
                    </button>
                    <button tabindex="-1" id="cerrar_leer" type="button" class="btn btn-warning " onclick="$('#modLeer').modal('hide'); ">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal mensajes -->
    <div class="modal " id="modAlert" tabindex="-1" role="dialog"  data-bs-backdrop='static' data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="">
                <div class="modal-body p-5">
                    <div class="row justify-content-center mt-4 ">
                        <div class="col-12 text-left" style="font-size: 18px">
                            <span id="mensaje" class="text-danger"> este código ya fue agregado</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cerrar" type="button" class="btn btn-danger " onclick="$('#modLeer').modal('show'); $('#modAlert').modal('hide');  $('#input_qr').focus()">
                        Reintentar
                    </button>
                    <button id="manual" type="button" class="btn btn-warning " onclick="$('#modManual').modal('show'); $('#modAlert').modal('hide');  $('#input_qr').focus()">
                        Registro Manual
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal mensajes manual -->
    <div class="modal " id="modAlertM" tabindex="-1" role="dialog"  data-bs-backdrop='static' data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="">
                <div class="modal-body p-5">
                    <div class="row justify-content-center mt-4 ">
                        <div class="col-12 text-left" style="font-size: 18px">
                            <span id="mensajeM" class="text-danger"> este código ya fue agregado</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cerrar" type="button" class="btn btn-danger " onclick="$('#modManual').modal('show'); $('#modAlertM').modal('hide');  $('#gar_manual').focus()">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Manual -->
    <div class="modal " id="modManual" tabindex="-1" role="dialog"  data-bs-backdrop='static' data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="">
                <div class="modal-body p-5">
                    <div class="row justify-content-center mt-4 ">
                        <div class="col-12 text-left" style="font-size: 18px">
                            Ingrese el código de garantia o el código corto:
                        </div>
                    </div>
                    <div class="row justify-content-center mt-4 ">
                        <div class="col-12 text-left" style="font-size: 18px">
                            <input id="gar_manual" type="text" class="form-control-sm w-75" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cerrarM" type="button" class="btn btn-danger " onclick="$('#modLeer').modal('show'); $('#modManual').modal('hide');  $('#input_qr').focus()">
                        Cerrar
                    </button>
                    <button id="guardarM" type="button" class="btn btn-warning " onclick="">
                        Guardar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $("#scan_individual").click(function (){
                $("#modLeer").modal("show");
                $("#titulo").removeClass('text-warning');
                $("#titulo").addClass('text-danger');
                $("#titulo").empty();
                $("#titulo").append("Escaneando Códigos");
                $("#input_qr").focus();
            });
            $(".modal-body").click(function (){
                $("#input_qr").focus();
            });
            $("#guardarM").click(function(){
                if($("#gar_manual").val() == ""){
                    $("#modManual").modal('hide');
                    $("#mensajeM").empty();
                    $("#mensajeM").append("Código no valido");
                    $("#modAlertM").modal("show");
                    return false;
                }
                var garantia = $("#gar_manual").val();
                //var bandera = false;
                //codQrGenerados.map(function (element){
                //    if(element.codigo_gar == $("#gar_manual").val() || element.codigo_grupo_garantia == $("#gar_manual").val()){
                //        bandera = true;
                //        garantia = element.codigo_gar;
                //    }
                //});
                //if(bandera){
                    var url = "{{ path('codigos_update_recepcion_pnc', {'codGar':'docId'}) }}";
                    url = url.replace('docId', garantia);
                    $.ajax({
                        type: 'GET',
                        url: url,
                        cache: false,
                        success: function (data) {
                            if(data == "OK"){
                                    $("#cod_escaneados").append("<li><span class='text-danger'>"+garantia+"</span><span class='text-warning ms-5'>Movida a PNC</span></li>")
                                $("#input_qr").val('');
                                $("#input_qr").focus();
                                $("#modManual").modal('hide');
                                $("#modLeer").modal('show');
                                return false;
                            }else{
                                $("#modManual").modal("hide");
                                $("#mensajeM").empty();
                                $("#mensajeM").append("Código de Garantia NO EXISTE");
                                $("#modAlertM").modal("show");
                                return false;
                            }

                        }
                    });
            });
            $("#input_qr").change(function(){
                var garantia = this.value.substring(this.value.lastIndexOf('/') + 1);

                try {
                    btoa(atob(garantia)) == garantia;
                } catch (err) {
                    $("#modLeer").modal("hide");
                    $("#mensaje").empty();
                    $("#mensaje").append("Código de Garantia NO VALIDO");
                    $("#modAlert").modal("show");
                    return false;
                }
                var garantia = atob(this.value.substring(this.value.lastIndexOf('/') + 1));
                var found = false;
                $("li").each((id, elem) => {
                    console.log((elem.innerText).includes(garantia));
                    if ((elem.innerText).includes(garantia)) {
                        found = true;
                    }
                });

                if(found){
                    $("#input_qr").val('');
                    $("#input_qr").focus();
                    return false;
                }

                var bandera = false;
                /*codQrGenerados.map(function (element){
                    if(element.codigo_gar == garantia){
                        bandera = true;
                    }
                });*/
                    var url = "{{ path('codigos_update_recepcion', {'codGar':'docId'}) }}";
                    url = url.replace('docId', garantia);
                    $.ajax({
                        type: 'GET',
                        url: url,
                        cache: false,
                        success: function (data) {
                            console.log(data)
                            if(data == 'OK'){
                                $("#cod_escaneados").append("<li><span class='text-danger'>"+garantia+"</span><span class='text-success ms-5'>Recibido</span></li>")
                                $("#input_qr").val('');
                                $("#input_qr").focus();
                                return false;
                            }else{
                                $("#modLeer").modal("hide");
                                $("#mensaje").empty();
                                $("#mensaje").append("Código de Garantia NO VALIDO");
                                $("#modAlert").modal("show");
                                $("#input_qr").val('');
                                $("#input_qr").focus();
                                return false;
                            }

                        }
                    });
            });

            $("#guardar").click(function (){

            });

        });
    </script>
{% endblock %}