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

{% block title %}Listado de Pallets{% 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 de Pallets</span>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3">
            <div class="col-10">
                <div id="grid"></div>
                <div class="mt-3 mb-3 text-left">
                    <a href="{{ path('palets_new', {'fecha':'-'}) }}">
                        <button type="button" class="btn btn-danger" id='crear'>
                            <i class="fas fa-1x fa-plus-circle "></i> Nuevo Pallet
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="procesando" tabindex="-1" role="dialog" aria-labelledby="procesando" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <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 style="opacity: 1; color: red !important; font-size: 16px">
                        <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 palets = {{ palets|json_encode|raw }};
        console.log(palets);
        $(document).ready(function () {
            var source =
                {
                    localdata: palets,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'palDescripcion', type: 'string' },
                            { name: 'palFecCreacion', map:'palFecCreacion>date', type: 'date' },
                            { name: 'palEstado', type: 'string' },
                            { name: 'cantidad', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 25,
                };
            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                //console.log(rowdata);
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center">';
                if (rowdata.palEstado == "AGRUPADO") {
                    result += '<a href="{{ path('palets_show',{'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-eye"></i></button></a>';
                    result += '<a href="{{ path('palets_recibir',{'id':'docId1'}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-success mb-0 ms-2" data-toggle="modal" data-target="#procesando"><i class="fas fa-2x fa-arrow-circle-right"></i></button></a>';
                    result += '<a href="{{ path('palets_eliminar',{'id':'docId2'}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0 ms-2" data-toggle="modal" data-target="#procesando"><i class="far fa-2x fa-trash-alt"></i></button></a>';
                }else {
                    if (rowdata.palEstado == "RECIBIDO") {
                        result += '<a href="{{ path('palets_show',{'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-eye"></i></button></a>';
                        result += '<a href="{{ path('palets_devolver_recibido',{'id':'docId1'}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0 ms-2" data-toggle="modal" data-target="#procesando"><i class="fas fa-2x fa-undo-alt"></i></button></a>';
                    }else{
                        if (rowdata.palEstado == "DISTRIBUIDO") {
                            result += '<a href="{{ path('palets_show',{'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-eye"></i></button></a>';
                        }
                    }
                }
                result += '<a href="{{ path('palets_genera_qr',{'palId':'docId3'}) }}" target="_blank"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-success mb-0 ms-2"><i class="fa fa-2x fa-print"></i></button></a>';
                result += '</div></div>';
                result = result.replace('docId',rowdata.id);
                result = result.replace('docId1',rowdata.id);
                result = result.replace('docId2',rowdata.id);
                return result.replace('docId3',rowdata.id);
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            /*var estadoFilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = 'AGRUPADO';
                var filtercondition = 'EQUAL';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter);
                return filtergroup;
            }();*/
            $("#grid").on("bindingcomplete filter pagechanged", function (event) {

            });
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'multiplecellsextended',
                    columns: [
                        { text: 'ID', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '5%' },
                        { text: '{% trans %}Fec. Creación{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'palFecCreacion', width: '10%' },
                        { text: '{% trans %}Cantidad de Baterias{% endtrans %}', columntype: 'textbox', filtertype: 'textbox',  datafield: 'cantidad', width: '16%' },
                        { text: '{% trans %}Descripción de Pallets{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'palDescripcion', width: '31%' },
                        { text: '{% trans %}Estado Pallets{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'palEstado', width: '13%' },
                        { text: '{% trans %}Opciones{% endtrans %}', filterable:false, datafield: 'OPC', width: '25%', cellsrenderer: opciones, cellsalign: 'center', align: 'center' }
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();



        });
    </script>
{% endblock %}