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

{% block title %}Activación de Garantias{% 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="fa-brands fa-galactic-republic text-danger"></i><span class="text-danger"> Activación de Garantias</span>
                </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 mt-3">
                <div class="col-12">
                    <div id="grid"></div>
                </div>
            </div>
        </div>
    </main>
    <script>
        var garantias = {{ garantias|json_encode|raw }};
        console.log(garantias);
        $(document).ready(function () {
            var source =
                {
                    localdata: garantias,
                    datafields:
                        [
                            { name: 'number', type: 'string' },
                            { name: 'nom_prod_neural', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'codigo_grupo_garantia', type: 'string' },
                            { name: 'fecha_gar', map:'fecha_gar>date', type: 'date' },
                            { name: 'pathQr', type: 'string' },
                            { name: 'url', type: 'string' },
                            { name: 'actGarantia', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 14,
                };
            var renderQr = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><a class="text-danger" style="font-size: 15px" href="../codigos_qr/'+ rowdata.codigo_gar +'.png" target="_blank">VER QR</a></div></div>';
            }
            var renderUrl = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                console.log(rowdata);
                if(rowdata.actGarantia != 'Activar Garantia'){
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><a href="' + rowdata.url + '" class="" target="_blank"><span class="text-success" style="font-size: 14px">Garantia Activa</span></a</div></div>';
                }else{
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><a href="' + rowdata.url + '" class="text-info" target="_blank">Activar Garantia</a></div></div>';
                }
            }
            $("#grid").on("bindingcomplete", function (event) {

            });
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: false,
                    height: 700,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'checkbox',
                    showstatusbar: true,
                    showaggregates: true,
                    statusbarheight: 25,
                    columns: [
                        { text: 'No. de Factura', columntype: 'textbox', filtertype: 'textbox', datafield: 'number', width: '10%', 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: 'Producto', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'nom_prod_neural', width: '14%'},
                        { text: 'Código Garantia', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_gar', width: '20%' },
                        { text: 'Grupo', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_grupo_garantia', width: '10%' },
                        { text: '{% trans %}Fecha Garantia{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecha_gar', width: '10%' },
                        { text: 'Código QR', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'pathQr', width: '18%', cellsrenderer: renderQr },
                        { text: 'Activación Garantia', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'actGarantia', width: '15%', cellsrenderer: renderUrl },

                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();

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

            });


            //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 %}