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

{% block title %}Listado de Baterias{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid p-3">
        <div class="row justify-content-center mt-0 ">
            <div class="col-12 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado de Baterias Producidas</span>
            </div>
            <!--<div class="col-2">
                <button id="imprimir" type="button" class="btn btn-danger" >
                    <i class="fas fa-print mr-2"></i> Imprimir Códigos QR
                </button>
            </div>-->
            <!--<div class="col-2">
                <button id="exportar" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" style="display:block">
                    <i class="fas fa-print mr-2"></i> Exportar CSV
                </button>
            </div>-->
        </div>
        <hr>
        <div class="row justify-content-center">
            <div class="col-2 text-center text-primary mt-3 pt-3">
                <h5 class="text-secondary">Filtro por Fechas:</h5>
            </div>
            <div class="col-2 text-left">
                <label class="text-secondary">Desde: </label>
                <input id="fecDesde" value="{{ fecDesde }}" class="form form-control" type="date"/>
            </div>
            <div class="col-2 text-left">
                <label class="text-secondary">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-5 text-left">
                <label>&nbsp;</label><br>
                <button id="codQr" type="button" class="btn btn-danger " data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-qrcode mr-2"></i> Crear e Imprimir Códigos QR
                </button>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3">
            <div class="col-12">
                <div id="grid"></div>
            </div>
        </div>
    </div>

</main>
<script>
        var baterias = {{ baterias|json_encode|raw }};
        var regSeleccionados = [];
        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: 'date' },
                            { 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: 'codigo_simple', type: 'string' },
                            { name: 'imgQr', type: 'string' },
                            { name: 'path', type: 'string' },
                            { name: 'url', 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);

            }
            $("#grid").on("bindingcomplete", function (event) {
                setTimeout(function () {
                    $('#procesandoP').modal('hide');
                /*    if(baterias.length > 0 && '{{ fecDesde }}' == new Date().toISOString().slice(0, 10) && '{{ fecHasta }}' == new Date().toISOString().slice(0, 10) ){
                        $('#grid').jqxGrid('selectallrows');
                        $("#codQr").click();
                    }*/
                }, 2000);
            });
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    showtoolbar: true,
                    rendertoolbar: function (statusbar) {
                        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;padding: 5px; color: yellow'>No. de Registros: " + baterias.length  + "</div>");
                        statusbar.append(container);
                    },
                    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%'},
                        { text: '{% trans %}Código Grupo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigoGrupo', width: '10%' },
                        { text: '{% trans %}Código Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_gar', width: '20%' },
                        { 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: '10%' },

                        { 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: '18.5%' },

                        {#{ 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: '18%', cellsrenderer: estadorenderer #},
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();

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

                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                //console.log(rowindexes);
                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros!");
                    return false;
                }
                //$('#jqxLoader').jqxLoader('open');
                var data = [];
                rowindexes.forEach(function(currentValue, index, arr){
                    data.push($('#grid').jqxGrid('getrowdata', currentValue));
                })
                regSeleccionados = data;
                $("#codQr").attr('disabled','disabled');
                $("#menCargando").empty();
                $("#menCargando").append('Generando Códigos');
                $("#procesando").modal("show");
                setTimeout(function () {
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('default_genera_qr') }}",
                        data: {
                            data: data,
                            fecDesde: $("#fecDesde").val(),
                            fecHasta: $("#fecHasta").val(),
                        },
                        success: function (baterias) {
                            console.log(baterias);
                            //$("#exampleModal").hide();
                            $("#menCargando").empty();
                            $("#menCargando").append('Generando Archivos');
                            $("#menBoton").removeClass('btn-warning');
                            $("#menBoton").removeClass('text-danger');
                            $("#menBoton").addClass('btn-success');
                            $("#menBoton").addClass('text-white');
                            var modelos = [];
                            var datos = [];
                            baterias.forEach(function (item, index, arr) {
                                console.log(item.modelo);
                                if (!modelos.includes(item.modelo)){
                                    modelos.push(item.modelo);
                                }
                            });

                            var data = [];
                            var obj = {};
                            baterias.forEach(function (item, index, arr) {
                                obj = {
                                    modelo : item.modelo,
                                    codigo_gar : item.codigo_gar
                                }
                                data.push(obj);
                            });
                            console.log(data);
                            //exportarCsv(JSON.stringify(data), modelos);
                            /*data = [];
                            obj = {};
                            baterias.forEach(function (item, index, arr) {
                                var imgQr = item.imgQr;
                                if(imgQr == 'VER QR'){
                                    obj = {
                                        modelo : item.modelo,
                                        codigo_gar : item.codigo_gar
                                    }
                                    data.push(obj);
                                }
                            });*/

                            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');
                                /*$.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();
                                            location.reload();
                                        }
                                    });
                                }
                                //$("#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")
                                $('#procesando').modal('hide');
                            }
                        },
                        cache: false
                    });
                }, 1000);
            });

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

            });

            $("#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;
                }
                $("#menCargando").empty();
                $("#menCargando").append('Buscando Registros');
                $('#procesando').modal('show');

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

            //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');*/
                        }
                    });
                });

            }

            $("#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);
            });

        });


    </script>
{% endblock %}