{% extends 'base.html.twig' %}

{% block title %}Códigos QR Generados{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div class="row justify-content-center mt-1 ">
            <div class="col-10 text-left" style="font-size: 24px">
                <i class="fas fa-print text-danger"></i><span class="text-danger"> Listado de Códigos QR Generados</span>
            </div>
            <hr>
            <div class="col-2">
                <button id="exportar" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" style="display:none">
                    <i class="fas fa-print mr-2"></i> Exportar CSV
                </button>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-2 text-center text-primary mt-3 pt-4">
                <h5>Filtro por Fechas:</h5>
            </div>
            <div class="col-2 text-left">
                <label class="text-primary">Desde: </label>
                <input id="fecDesde" value="{{ fecDesde }}" class="form form-control" type="date"/>
            </div>
            <div class="col-2 text-left">
                <label class="text-primary">Hasta: </label>
                <input id="fecHasta" value="{{ fecHasta }}" class="form form-control" type="date"/>
            </div>
            <div class="col-1 text-left">
                <label>&nbsp;</label><br>
                <button id="filtrar" class="btn btn-danger">Filtrar</button>
            </div>
            <div class="col-3 text-left">
                <label>&nbsp;</label><br>
                <button id="imprimir" type="button" class="btn btn-danger" >
                    <i class="fas fa-print mr-2"></i> Re Imprimir Códigos QR
                </button>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3">
            <div class="col-10">
                <div id="grid"></div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body p-5">
                    <button class="btn btn-warning w-100 text-danger" type="button" disabled>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        Procesando...
                    </button>
                </div>

            </div>
        </div>
    </div>
</main>
    <script>
        var baterias = {{ baterias|json_encode|raw }};
        console.log(baterias);
        $(document).ready(function () {
            //window.parent.$('#procesandoP').modal('hide');
            //$("#jqxLoader").jqxLoader({ isModal: true, width: 150, height: 60, imagePosition: 'top', text: "Procesando..." });
            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'id_bateria', type: 'string' },
                            { name: 'id_lote', type: 'string' },
                            { name: 'codCrm', type: 'string' },
                            { name: 'codigoGrupo', type: 'string' },
                            { name: 'codNeural', type: 'string' },
                            { name: 'fecha_gar', map:'fecha_gar>date', type: 'string' },
                            { name: 'nombProducto', type: 'string' },
                            { name: 'nombProdNeural', type: 'string' },
                            { name: 'modelo', type: 'string' },
                            { name: 'codigoLP', type: 'string' },
                            { name: 'codigo_inicio', type: 'string' },
                            { name: 'tipo_bater', type: 'string' },
                            { name: 'estado_bater', type: 'string' },
                            { name: 'id_garantia', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'marca_time_gar', type: 'string' },
                            { name: 'imgQr', type: 'string' },
                            { name: 'path', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 14,
                };
            var estadorenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                //var http = new XMLHttpRequest();
                //http.open('HEAD', 'codigos_qr/'+ rowdata.codigo_gar +'.png', false);
                //http.send();
                 //if(http.status != 404){
                if(rowdata.imgQr == 'VER QR'){
                     return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><a href="../../../codigos_qr/'+ rowdata.codigo_gar +'.png" target="_blank">'+ rowdata.imgQr + '</a></div></div>';
                }else{
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center">'+ rowdata.imgQr + '</div></div>';
                }
                 //}else{
                 //    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><i class="fab fa-3x fa-chrome text-warning"></i></div></div>';
                 //}
                //console.log(rowdata);

            }
            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center"><a href="{{ path('status_edit',{'id':'docId'}) }}"><button type="button" class="btn btn-white btn-sm mr-2"><i class="far fa-2x fa-edit text-warning"></i></button></a>';
                if (rowdata.staEstado == 'true') {
                    result += '<a href="{{ path('status_cambia_estado',{'id':'docId1','estado':0}) }}"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-times-circle text-danger"></i></button></a>';
                }
                else {
                    result += '<a href="{{ path('status_cambia_estado',{'id':'docId2','estado':1}) }}"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-check-circle text-success"></i></button></a>';
                }
                result = result.replace('docId',rowdata.id);
                result = result.replace('docId1',rowdata.id);
                return result.replace('docId2',rowdata.id);
            }
            $("#grid").on("bindingcomplete", function (event) {
                setTimeout(function () {
                    window.parent.$('#procesandoP').modal('hide');
                }, 2000);
            });
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: false,
                    height: 700,
                    rowsheight: 30,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'checkbox',
                    showstatusbar: true,
                    showaggregates: true,
                    statusbarheight: 25,
                    columns: [
                        { text: '{% trans %}id_bateria{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'id_bateria', width: '5%', hidden: true },
                        { text: '{% trans %}Número de lote{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'id_lote', width: '14%', aggregates: ["count"] ,
                            aggregatesrenderer: function (aggregates, column, element) {
                                var renderstring = '<div class="text-danger" style="position: relative; margin-top: 4px; margin-right:5px; text-align: left; overflow: hidden;">' + "No. de Registros" + ': ' + aggregates.count + '</div>';
                                return renderstring;
                            }},
                        { text: '{% trans %}Código Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_gar', width: '15%' },
                        { text: '{% trans %}modelo{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'modelo', width: '25%' },
                        { text: '{% trans %}Fecha Garantia{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecha_gar', width: '20%' },

                        { text: '{% trans %}codNeural{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'codNeural', width: '8%', hidden: true },
                        { text: '{% trans %}nombProducto{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'nombProducto', width: '15%', hidden: true },
                        { text: '{% trans %}Producto Dynamics{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'nombProdNeural', width: '13%' },

                        {#{ text: '{% trans %}codigoLP{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'codigoLP', width: '10%' },#}
                        { text: '{% trans %}codigo_inicio{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'codigo_inicio', width: '6%', hidden: true },
                        { text: '{% trans %}tipo_bater{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'tipo_bater', width: '6%', hidden: true },
                        { text: '{% trans %}estado_bater{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'estado_bater', width: '7%', hidden: true },
                        { text: '{% trans %}Código QR{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'imgQr', width: '10%', cellsrenderer: estadorenderer },
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();

            $("#imprimir").click(function () {
                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                //console.log(rowindexes);
                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros!");
                    return false;
                }

                Swal.fire({
                    icon: "warning",
                    title: "si continua se remplazará el archivo de impresiones, Desea continuar?",
                    //showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: "Continuar",
                    confirmButtonColor: "#cf2637",
                    cancelButtonText: "Cancelar"
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        //$('#jqxLoader').jqxLoader('open');
                        var data = [];
                        rowindexes.forEach(function(currentValue, index, arr){
                            data.push($('#grid').jqxGrid('getrowdata', currentValue));
                        })
                        console.log(data);
                        regSeleccionados = data;
                        setTimeout(function () {
                            if(data.length > 0 ){
                                $("#menCargando").empty();
                                $("#menCargando").append('Imprimiendo Códigos');
                                $("#menBoton").removeClass('btn-warning');
                                $("#menBoton").removeClass('text-success');
                                $("#menBoton").addClass('btn-primary');
                                $("#menBoton").addClass('text-white');
                                $('#exampleModal').show();
                                $.ajax({
                                    type: 'POST',
                                    url: "{{ path('default_imprime_qr') }}",
                                    data: {data: data},
                                    cache: false,
                                    success: function (data) {
                                        location.reload();
                                        window.open("{{ asset('tirillas/impresion.pdf') }}");
                                        //window.open("{{ path('default_open_thor') }}");

                                    }
                                });

                                //FUNCION DE ESPORTACION A XLSX
                                function exportarXls(colNames, data, titulo, file) {
                                    console.log("DATA:");
                                    console.log(data);
                                    $.ajax({
                                        type: 'POST',
                                        url: "{{ path('default_exportar_xls') }}",
                                        data: {data: data, colNames: colNames, titulo: titulo, sucursalId: '0', file: file},
                                        cache: false,
                                        success: function (data) {
                                            var $a = $("<a>");
                                            $a.attr("href",data.file);
                                            $("body").append($a);
                                            $a.attr("download",file + " " + new Date().toJSON().slice(0,10)+".xls");
                                            $a[0].click();
                                            $a.remove();
                                        }
                                    });
                                }
                                //$("#expXls").click(function () {
                                //var data = $('#grid').jqxGrid('getdisplayrows');
                                var colNames = ['id_bateria','id_lote', 'codCrm', 'codigoGrupo','codNeural','fecha_gar', 'nombProducto',
                                    'ProductoDynamics', 'modelo', 'codigoLP', 'codigo_inicio', 'tipo_bater', 'estado_bater', 'id_garantia', 'codigo_gar',
                                    'marca_time_gar', 'codigo_parcial_2', 'codigo_grupo_serial',  'codigo_parcial_1', 'url'];
                                var titulo = "Códigos QR";
                                var file = "IMPRESIONLASER_APP_EZCAD";
                                exportarXls(JSON.stringify(colNames), JSON.stringify(regSeleccionados), titulo, file);
                                //})
                            }else{
                                alert("Debe generar los códigos QR antes de imprimir")
                                window.parent.$('#procesandoP').modal('hide');
                            }
                        }, 1000);
                    } else if (result.isDenied) {
                        //Swal.fire("Changes are not saved", "", "info");
                        //return false;
                    }
                });


            });

            //FUNCION DE ESPORTACION A XLSX
            function exportarCsv( data, modelos) {
                console.log(data);
                modelos.forEach(function(value, index, arr) {
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('default_exportar_csv') }}",
                        data: {data: data, file: value},
                        cache: false,
                        success: function (data) {
                            /*var $a = $("<a>");
                            $a.attr("download", value + " " + new Date().toJSON().slice(0, 10) + ".txt");
                            $("body").append($a);
                            $a.attr("href", value + ".txt");
                            $a[0].click();
                            $a.remove();
                            $('#exampleModal').modal('hide');*/
                        }
                    });
                });

            }

            $("#filtrar").click(function () {
                console.log($("#fecDesde").val());
                console.log($("#fecHasta").val());
                if($("#fecDesde").val() == "" || $("#fecHasta").val() == ""){
                    alert("Rango de fechas no válido!")
                    return false;
                }
                if($("#fecDesde").val() > $("#fecHasta").val()){
                    alert("Rango de fechas no válido, Fecha Desde no puede ser mayor a la fecha Hasta")
                    return false;
                }
                window.parent.$('#procesandoP').modal('show');

                var url = "{{ path('default_erp_baterias_reimpresion_index',{'fecDesde':'fecini', 'fecHasta':'fecfin'}) }}"
                url = url.replace('fecini',$("#fecDesde").val());
                url = url.replace('fecfin',$("#fecHasta").val());
                location.href = url;
            })

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

                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros!");
                    return false;
                }
                var modelos = [];
                var datos = [];
                rowindexes.forEach(function(currentValue, index, arr) {
                    if (!modelos.includes($('#grid').jqxGrid('getcellvalue', currentValue, "modelo"))){
                        modelos.push($('#grid').jqxGrid('getcellvalue', currentValue, "modelo"));
                    }
                });
                var data = [];
                var obj = {};
                rowindexes.forEach(function(currentValue, index, arr){
                    obj = {
                        modelo : $('#grid').jqxGrid('getcellvalue', currentValue, "modelo"),
                        codigo : $('#grid').jqxGrid('getcellvalue', currentValue, "codigo_gar")
                    }
                    data.push(obj);
                });
                //var data = $('#gridDetalle').jqxGrid('getdisplayrows');
                exportarCsv(JSON.stringify(data), modelos);
            });

            var h = $("#grid")[0].style.height;
            h = h.replace("px", "");
            h = parseInt(h) + 160;
            h = h + "px";
            window.parent.$("#iframePrincipal")[0].style.height = h;
        });

    </script>
{% endblock %}