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

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

{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div class="row justify-content-center mt-4 ">
            <div class="col-10 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado Baterias</span>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3">
            <div class="col-10">
                <div class="mt-3 mb-3 text-left">
                    <a href="{{ path('app_baterias_new') }}">
                        <button type="button" class="btn btn-danger" id='crear'>
                            <i class="fas fa-1x fa-plus-circle "></i> Nueva Bateria
                        </button>
                    </a>
                </div>
                <div id="grid"></div>

            </div>
        </div>
    </div>
</main>
    <script>
        var baterias = {{ baterias|json_encode|raw }};
        console.log(baterias);
        $(document).ready(function () {
            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'batCodCrm', type: 'string' },
                            { name: 'batCodNeural', type: 'string' },
                            { name: 'batCodDynamics', type: 'string' },
                            { name: 'batNomProducto', type: 'string' },
                            { name: 'batNomProNeural', type: 'string' },
                            { name: 'batModelo', type: 'string' },
                            { name: 'batCodIp', type: 'string' },
                            { name: 'batCodInicio', type: 'string' },
                            { name: 'batTipo', type: 'string' },
                            { name: 'batCodGrupo', type: 'string' },
                            { name: 'batNumPlacas', type: 'integer' },
                            { name: 'batEstado', type: 'boolean' }
                        ],
                    datatype: "array",
                    pagesize: 100,
                };
            var estadorenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                console.log(value);
                if (value == true) {
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><span style="color: #008000;">Activo</span></div></div>';
                }
                else {
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><span style="color: red;">Inactivo</span></div></div>';
                }
            }
            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('app_baterias_edit',{'id':'docId'}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-warning mb-0"><i class="far fa-2x fa-edit"></i></button></a>';
                if (rowdata.batEstado == true) {
                    result += '<a href="{{ path('app_baterias_cambia_estado',{'id':'docId1','estado':0}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0 ms-2"><i class="fas fa-2x fa-times-circle"></i></button></a>';
                }
                else {
                    result += '<a href="{{ path('app_baterias_cambia_estado',{'id':'docId2','estado':1}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-success mb-0 ms-2"><i class="fas fa-2x fa-check-circle"></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: false,
                    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%', hidden: true },
                        { text: '{% trans %}Cod. CRM{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodCrm', width: '5%', hidden: true },
                        { text: '{% trans %}Cod. Neural{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodNeural', width: '5%', hidden: true },
                        { text: '{% trans %}Nombre Producto{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batNomProducto', width: '21%', hidden: true },
                        { text: '{% trans %}Nom. Prod. Neural{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batNomProNeural', width: '5%', hidden: true },
                        { text: '{% trans %}Modelo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batModelo', width: '26%' },
                        { text: '{% trans %}Cod IP{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodIp', width: '5%', hidden: true },
                        { text: '{% trans %}Cod Inicio{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodInicio', width: '10%' },
                        { text: '{% trans %}Tipo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batTipo', width: '10%' },
                        { text: '{% trans %}Grupo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodGrupo', width: '11%' },
                        { text: '{% trans %}No. Placas{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batNumPlacas', width: '8%' },
                        { text: '{% trans %}Cod. Dynamics{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batCodDynamics', width: '10%' },
                        { text: '{% trans %}Estado{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist',  datafield: 'batEstado', width: '15%', cellsrenderer: estadorenderer },
                        { text: '{% trans %}Opciones{% endtrans %}', filterable:false, datafield: 'OPC', width: '10%', cellsrenderer: opciones, cellsalign: 'center', align: 'center' }
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();
        });
    </script>
{% endblock %}