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

{% block title %}Reporte de Baterias Movimientos PNC{% 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-truck-loading text-danger"></i><span class="text-danger"> Reporte de Baterias Movimientos PNC</span>
            </div>
            <div class="col-2">
                <button id="exportarxls" class="btn btn-success">Exportar Xls</button>
            </div>
            <div class="col-2">
                <button id="registrar" type="button" class="btn btn-warning text-danger" data-toggle="modal" data-target="#exampleModal">
                    <i class="far fa-share-square"></i> Mover a Recepción
                </button>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3 mb-5">
            <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 () {
            //$("#jqxLoader").jqxLoader({ isModal: true, width: 150, height: 60, imagePosition: 'top', text: "Procesando..." });
            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'modelo', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'codEstado', type: 'string' },
                            { name: 'num_lote', type: 'string' },
                            { name: 'fecha_gar', map:'fecha_gar>date', type: 'date' },
                            { name: 'fecCreacion',map: 'fecCreacion>date', type: 'date' },
                        ],
                    datatype: "array",
                    pagesize: 25,
                };
            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){
                     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"><img width="95px" height="95px" src="codigos_qr/'+ rowdata.codigo_gar +'.png" alt="Sin QR" /></a></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);
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 30,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'checkbox',
                    columns: [
                        { text: '{% trans %}Número de lote{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'num_lote', width: '12%' },
                        { 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: '20%' },
                        { text: '{% trans %}Fecha Producción{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecha_gar', width: '15%' },
                        { text: '{% trans %}Fecha Creación de Qr{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecCreacion', width: '15%' },
                        { text: '{% trans %}Estado{% endtrans %}', filtertype: 'checkedlist', datafield: 'codEstado', width: '15%' },

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


            $("#registrar").click(function () {
                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros!");
                    return false;
                }
                var data = [];
                rowindexes.forEach(function(currentValue, index, arr){
                    var row = $('#grid').jqxGrid('getrowdata', currentValue);
                    data.push(row);
                })
                $.ajax({
                    type: 'POST',
                    url: "{{ path('recepcion_registro_baterias_pnc') }}",
                    data: {data: data, estado: 'GENERADO'},
                    cache: false,
                    success: function (data) {
                        location.reload();
                    }
                });

            });

            $("#exportarxls").click(function (){
                $("#grid").jqxGrid('exportdata', 'xlsx', 'baterias_en_pnc');
            });
        });
    </script>
{% endblock %}