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

{% block title %}Listado Garantías Generadas{% endblock %}

{% block contenido %}
    <main>
        <div class="container-fluid p-0">
            <div class="row justify-content-center mt-4 ">
                <div class="col-6 text-left" style="font-size: 24px">
                    <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado Garantías Generadas</span>
                </div>
                <div class="col-6 text-end" style="">
                    <button id="exportarxls" class="btn btn-success">Exportar Xls</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: 'id', type: 'string' },
                            { name: 'garCodigo', type: 'string' },
                            { name: 'garFecha', map:'garFecha>date', type: 'date' },
                            { name: 'gruCodigo', type: 'string' },
                            { name: 'lotCodigo', type: 'string' },
                            { name: 'batModelo', type: 'string' },
                            { name: 'perAnio', type: 'string' },
                            { name: 'batCodInicio', type: 'string' },
                            { name: 'perMes', type: 'string' },
                        ],
                    datatype: "array",
                    pagesize: 30,
                };
            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: " + garantias.length  + "</div>");
                        statusbar.append(container);
                    },
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'none',
                    columns: [
                        { text: 'id', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '5%' },
                        { text: '{% trans %}Fecha Garantia{% endtrans %}', columntype: 'datetimeinput', filtertype: 'range', cellsFormat: 'yyyy-MM-dd', datafield: 'garFecha', width: '14%'},
                        { text: '{% trans %}Modelo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batModelo', width: '15%'},
                        { text: '{% trans %}Cod. Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'garCodigo', width: '20%' },
                        { text: '{% trans %}Cod. Inicio{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodInicio', width: '15%' },
                        { text: '{% trans %}Cod. Lote{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'lotCodigo', width: '15%' },
                        { text: '{% trans %}Periodo Mes{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'perMes', width: '6%' },
                        { text: '{% trans %}Periodo Anio{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'perAnio', width: '10%' },
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();
            $("#exportarxls").click(function (){
                $("#grid").jqxGrid('exportdata', 'xlsx', 'garantias_generadas');
            });
        });
    </script>
{% endblock %}