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

{% block title %}Detalle Palet{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div id="window" class="row justify-content-center">
            <div class="col-8 ">
                <div class="row justify-content-center mt-0">
                    <div class="col-8 text-left" style="font-size: 24px">
                        <i class="far fa-file text-danger"></i><span class="text-danger"> Detalle Pallet</span>
                    </div>
                    <div class="col-4">
                        <a href="{{ path('palets_index') }}">
                            <button type="button" class="btn btn-danger">
                                <i class="fas fa-undo-alt"></i> Volver
                            </button>
                        </a>
                    </div>

                </div>
                <hr>
                <div class="row align-items-center justify-content-center">
                    <div class="text-left col-3 mb-3">
                        <label class="text-danger">Fecha Creación</label><br>
                        {{ palet.palFecCreacion|date('Y-m-d') }}
                    </div>
                    <div class="text-left col-3 mb-3">
                        <label class="text-danger">Descripción</label><br>
                        {{ palet.palDescripcion }}
                    </div>
                    <div class="text-left col-3 mb-3">
                        <label class="text-danger">Estado</label><br>
                        {{ palet.palEstado }}
                    </div>
                    <div class="text-left col-3 mb-3">
                        <img src="{{ asset(palet.palPathQr) }}"/>
                    </div>
                </div>
                <hr>
                <div class="row align-items-center justify-content-center">
                    <div class="col-12">
                        <div id="grid"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    var baterias = {{ baterias|json_encode|raw }};
        console.log(baterias);
        $(document).ready(function () {
            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'codigo_grupo', type: 'string' },
                            { name: 'codigo_grupo_garantia', type: 'string' },
                            { name: 'fecha_gar', map:'fecha_gar>date', type: 'date' },
                            { name: 'modelo', type: 'string' },
                            { name: 'nom_prod_neural', type: 'string' },
                            { name: 'num_lote', type: 'string' },
                            { name: 'tipo_bater', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 25,
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").on("bindingcomplete filter pagechanged", function (event) {

            });
            $("#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: 'multiplecellsextended',
                    columns: [
                        { text: 'Fec. Garantia', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecha_gar', width: '11%' },
                        { text: 'Cod. Garantia', columntype: 'textbox', filtertype: 'textbox',  datafield: 'codigo_gar', width: '25%' },
                        { text: 'Grupo', columntype: 'textbox', filtertype: 'textbox',  datafield: 'codigo_grupo_garantia', width: '12%' },
                        { text: 'Modelo', columntype: 'textbox', filtertype: 'textbox',  datafield: 'modelo', width: '12%' },
                        { text: 'Pro. Neural', columntype: 'textbox', filtertype: 'textbox',  datafield: 'nom_prod_neural', width: '20%' },
                        { text: 'Lote', columntype: 'textbox', filtertype: 'textbox',  datafield: 'num_lote', width: '10%' },
                        { text: 'Tipo Bateria', columntype: 'textbox', filtertype: 'textbox',  datafield: 'tipo_bater', width: '10%' },
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();



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