{% 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"> Ubicación del modelo: {{ detalle.description }}</span>
            </div>
        </div>
        <hr>
        {% if ubicacion|length > 0 %}
            {% for line in ubicacion %}
                <div class="row justify-content-center mt-3">
                    <div class="col-12">
                        <i class="bi-circle-fill" style="font-size: 8px; margin-right: 5px; position: absolute; margin-top: 6px"></i>
                        <span class="text-info" style="font-size: 14px; margin-left: 15px">{{ line.racDescripcion }} -- {{ line.secNombre }} -- {% if line.palId %} EN PALLET {% else %} INDIVIDUAL {% endif %} -- {{ line.cantidad }}</span>
                    </div>
                </div>
            {% endfor %}
            <div class="row w-100 justify-content-center mt-3">
                <div class="col-6">
                    <button 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> Leer QR
                    </button>
                </div>
                <div class="col-6">
                    <button id="scan_pallet" type="button" class="btn btn-warning " data-toggle="modal" data-target="#modLeer">
                        <i class="fas fa-qrcode mr-2"></i> Leer QR Pallet
                    </button>
                </div>
            </div>
        {% else %}
            <div class="row justify-content-center mt-3">
                <div class="col-12">
                    <span class="text-info" style="font-size: 16px"> No existen ubicaciones</span>
                </div>
            </div>
        {% endif %}

    </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 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-danger" role="status" aria-hidden="true"></span>
                                <span class="spinner-grow spinner-grow-sm text-danger" role="status" aria-hidden="true"></span>
                                <span class="spinner-grow spinner-grow-sm text-danger" role="status" aria-hidden="true"></span>
                            </div>
                        </div>
                        <div class="col-6 text-left mt-2" style="font-size: 16px">
                            <span class="text-info"> Requeridos: </span><span id="count_requerida" class="text-success">0</span>
                        </div>
                        <div class="col-6 text-left mt-2" style="font-size: 16px">
                            <span class="text-success"> Escaneados: </span><span id="count_escaneados" class="text-success">0</span>
                        </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">
                    <ul id="lista_qr" style="min-width: 100%; padding-left: 5px">

                    </ul>
                </div>
                <div class="modal-footer" style="padding: 15px">
                    <button id="cerrar_leer" type="button" class="btn btn-danger " onclick="$('#modLeer').modal('hide'); ">
                        Cerrar
                    </button>
                    <button id="guardar" type="button" class="btn btn-warning ">
                        Guardar
                    </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()">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var distribucion = {{ distribucion|json_encode|raw }};
        console.log(distribucion);
        var count_r = parseInt({{ detalle.quantity - canDespachada }});
        console.log(count_r);
        var count_e = 0;
        var pallet = false;
        $(document).ready(function () {
            $("#count_requerida").empty();
            $("#count_requerida").append(count_r);

            $("#scan_individual").click(function (){
                $("#modLeer").modal("show");
                $("#titulo").removeClass('text-warning');
                $("#titulo").addClass('text-danger');
                $("#titulo").empty();
                $("#titulo").append("Escaneando Códigos");
                pallet = false;
                $("#input_qr").focus();
            });
            $("#scan_pallet").click(function (){
                $("#modLeer").modal("show");
                $("#titulo").removeClass('text-danger');
                $("#titulo").addClass('text-warning');
                $("#titulo").empty();
                $("#titulo").append("Escaneando Códigos Pallet");
                pallet = true;
                $("#input_qr").focus();
            });
            $(".modal-body").click(function (){
                $("#input_qr").focus();
            });
            $("#input_qr").change(function(){
                if(count_e == {{ detalle.quantity - canDespachada }}){
                    $("#modLeer").modal("hide");
                    $("#mensaje").empty();
                    $("#mensaje").append("Se llego al maximo de códigos requeridos");
                    $("#modAlert").modal("show");
                    return false;
                }
                var garantia = this.value.substring(this.value.lastIndexOf('/') + 1);
                //console.log(this.value.substring(this.value.lastIndexOf('/') + 1));
                //alert(pallet);
                if(pallet === false){
                    try {
                         btoa(atob(garantia)) == garantia;
                    } catch (err) {
                        $("#modLeer").modal("hide");
                        $("#mensaje").empty();
                        $("#mensaje").append("Código de Garantia no existe");
                        $("#modAlert").modal("show");
                        return false;
                    }
                    var garantia = atob(this.value.substring(this.value.lastIndexOf('/') + 1));
                    var item = distribucion.find(item => item.codigo_gar === garantia);
                    if(!item){
                        $("#modLeer").modal("hide");
                        $("#mensaje").empty();
                        $("#mensaje").append("Código de Garantia no existe");
                        $("#modAlert").modal("show");
                        return false;
                    }
                    if($('li:contains('+garantia+')').length > 0) {
                        $("#modLeer").modal("hide");
                        $("#mensaje").empty();
                        $("#mensaje").append("Este código ya fue agregado");
                        $("#modAlert").modal("show");
                        return false;
                    }

                    $("#lista_qr").append("<li class='mb-1' id='" + garantia + "' style='list-style-type: none;'><button type='button' onclick='count_e--;' data-target='" + garantia + "' class='eliminar btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0 ms-2'><i class='far fa-trash-alt' aria-hidden='true'></i></button>&nbsp;&nbsp;" + garantia + "</li>")
                    $(this).val('');
                    $(this).focus();
                    $("li .eliminar").click(function (){
                        $("#" + $(this).attr('data-target')).remove();
                        $("#count_escaneados").empty();
                        $("#count_escaneados").append(count_e);
                    })
                    count_e++;
                    $("#count_escaneados").empty();
                    $("#count_escaneados").append(count_e);
                }else{
                    var item = distribucion.find(item => item.palId === parseInt(garantia));
                    if(!item){
                        $("#modLeer").modal("hide");
                        $("#mensaje").empty();
                        $("#mensaje").append("Código de Pallet no existe");
                        $("#modAlert").modal("show");
                        $("#input_qr").val('');
                        $("#input_qr").focus();
                        return false;
                    }
                    var items = distribucion.filter(item => item.palId === parseInt(garantia));

                    items.map(function (element){
                        if(count_e == {{ detalle.quantity - canDespachada }}){
                            $("#input_qr").val('');
                            $("#input_qr").focus();
                            return false;
                        }
                        console.log(element.codigo_gar);
                        if($('li:contains('+element.codigo_gar+')').length > 0) {
                            /*$("#modLeer").modal("hide");
                            $("#mensaje").empty();
                            $("#mensaje").append("Este código ya fue agregado");
                            $("#modAlert").modal("show");*/
                            $("#input_qr").val('');
                            $("#input_qr").focus();
                            return false;
                        }
                        $("#lista_qr").append("<li class='mb-1' id='" + element.codigo_gar + "' style='list-style-type: none;'><button type='button' onclick='count_e--;' data-target='" + element.codigo_gar + "' class='eliminar btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0 ms-2'><i class='far fa-trash-alt' aria-hidden='true'></i></button>&nbsp;&nbsp;" + element.codigo_gar + "</li>")
                        count_e++;
                        $("#count_escaneados").empty();
                        $("#count_escaneados").append(count_e);
                    });
                    $("#input_qr").val('');
                    $("#input_qr").focus();
                    $("li .eliminar").click(function (){
                        $("#" + $(this).attr('data-target')).remove();
                        $("#count_escaneados").empty();
                        $("#count_escaneados").append(count_e);
                    })
                }


            });

            $("#guardar").click(function (){
                var myaudiotracks = new Array();
                jQuery('#lista_qr li').each(function(){
                    myaudiotracks.push($(this).attr("id"));
                });
                console.log(JSON.stringify(myaudiotracks));
                var data  = JSON.stringify(myaudiotracks);
                $.ajax({
                    type: 'POST',
                    url: "{{ path('distribucion_guarda_baterias_asignadas_app') }}",
                    data: {
                        data: data,
                        idFac: {{ detalle.facturas.id }},
                        idDet: {{ detalle.id }},
                        canDespachada: {{ canDespachada }}
                    },
                    cache: false,
                    success: function (data) {
                        window.location.href = "https://www.google.com";
                    }
                });
            });

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