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

{% block title %}Listado de Palets{% endblock %}

{% block contenido %}
<main>
    <style>
        @media (min-width: 1200px){
            .modal-xl {
                max-width: 1568px;
            }
        }
    </style>
    <div class="container-fluid p-0">
        <div class="row justify-content-center mt-4 ">
            <div class="col-8 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado de Palets Recibidos</span>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3">
            <div class="col-8">
                <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 modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Distribución Pallets</h5>
                </div>
                <div class="modal-body">
                    <label for="racks">Seleccione el No. de  Rack:</label>
                    <select id="racks">
                        <option value="1">Rack 1</option>
                        <option value="2">Rack 2</option>
                        <option value="3">Rack 3</option>
                        <option value="4">Rack 4</option>
                        <option value="5">Rack 5</option>
                        <option value="6">Rack 6</option>
                        <option value="7">Rack 7</option>
                        <option value="8">Rack 8</option>
                        <option value="9">Rack 9</option>
                        <option value="10">Rack 10</option>
                        <option value="11">Rack 11</option>
                    </select>
                    <hr>
                    <br>
                    <div id="rack"></div>
                    <input id="id_palet" name="id_palet" style="display:none" />
                </div>
                <div class="modal-footer">
                    <button id="guardar" type="button" class="btn btn-danger" data-toggle="modal" data-target="#procesando">Guardar</button>
                    <button id="cerrar" type="button" class="btn btn-warning" data-dismiss="modal">Cancelar</button>
                </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);
        function distribuir(palId){
            $("#id_palet").val(palId)
            $("#racks").change();
            $('#exampleModal').modal('show');
        }
        $(document).ready(function () {
            $("#racks").jqxDropDownList({ width: 250, height: 30, theme: '{{ theme }}'});
            var source =
                {
                    localdata: palets,
                    datafields:
                        [
                            { name: 'id', type: 'int' },
                            { name: 'palDescripcion', type: 'string' },
                            { name: 'cantidad', type: 'int' },
                            { name: 'palFecCreacion', map:'palFecCreacion>date', type: 'date' },
                            { name: 'palEstado', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 25,
                };
            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                console.log(rowdata.id);
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center">';
                if (rowdata.palEstado == "RECIBIDO") {
                    result += '<button type="button" onclick="distribuir('+ rowdata.id +');" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0" value="'+ rowdata.id +'"><i class="fas fa-2x fa-arrow-circle-right "></i></button>';
                }else {
                    if (rowdata.palEstado == "DISTRIBUIDO") {
                        result += '<a href="{{ path('palets_devolver_distribuido',{'id':'docId1'}) }}"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0" data-toggle="modal" data-target="#procesando"><i class="fas fa-2x fa-undo-alt"></i></button></a>';
                    }
                }
                result +='</div></div>';
                //result = result.replace('docId',rowdata.id);
                result = result.replace('docId1',rowdata.id);
                return result.replace('docId2',rowdata.id);
            }

            var dataAdapter = new $.jqx.dataAdapter(source);

            var estadoFilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = 'RECIBIDO';
                var filtercondition = 'EQUAL';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter);
                return filtergroup;
            }();

            $("#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: 'No. de Pallet', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '10%' },
                        { text: '{% trans %}Descripcion de Pallet{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'palDescripcion', width: '35%' },
                        { text: '{% trans %}Fec. Creación{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'palFecCreacion', width: '15%' },
                        { text: '{% trans %}Cantidad{% endtrans %}', filtertype: 'textbox',  datafield: 'cantidad', width: '10%' },
                        { text: '{% trans %}Estado{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist',  datafield: 'palEstado', width: '15%' },
                        { text: '{% trans %}Opciones{% endtrans %}', filterable:false, datafield: 'OPC', width: '15%', cellsrenderer: opciones, cellsalign: 'center', align: 'center' }
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();
            $("#racks").on('change', function (event) {
                $.ajax({
                    type: 'GET',
                    url: "{{ path('bodegas_racks_secciones') }}" + "?rack=" + $(this).val(),
                    data: null,
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        rack1 = data;
                        if(rack1.length > 0 ){
                            var tabla = "";
                            var fil = rack1[0]['racNumFilas'];
                            var col = rack1[0]['racNumColumnas'];
                            var acol = (100/col);
                            //tabla = "<div class=\"btn-group btn-group-toggle\" data-toggle=\"buttons\">";
                            tabla += "<div class=\"btn-group\" role=\"group\" style='display: contents;'>";
                            for(let i=0; i < fil; i++){

                                for(let j=0; j < col; j++) {
                                    tabla += "<input  type='radio' class='btn-check' name='options' id='"+ rack1[j+(i*9)]['secCodigo'] +"' value='"+ rack1[j+(i*9)]['id'] +"' autocomplete='off'>";
                                    tabla += "<label class='btn btn-outline-warning text-danger' for='"+ rack1[j+(i*9)]['secCodigo'] +"' style='font-size: 12px; height: 100px; width: "+acol+"%; margin-bottom:4px; border-bottom-left-radius: 0px'>";
                                    tabla += rack1[j+(i*9)]['secCodigo'];
                                    var detalle = JSON.parse(rack1[j + (i * 9)]['detalle']);
                                    //console.log(detalle);
                                    if (detalle){
                                        var r=1;
                                        detalle.forEach(function (item, count) {
                                            if(r <= 4){
                                                tabla += "<br>" + item.modelo + " / Cant.: " + item.cantidad;
                                            }
                                            r = r + 1;
                                        })

                                    }
                                    //tabla += "<br>" + rack1[j + (i * 9)]['secNombre'] + "";
                                    tabla += "</label>";
                                }
                                tabla += "<br>";

                            }
                            tabla += "</div>";
                            //tabla += "</table>";
                            $("#rack").empty();
                            $("#rack").append(tabla);
                        }else{
                            $("#rack").empty();
                        }
                    }
                });
            })
            $("#guardar").click(function () {
                if(!$('input[name=options]:checked').val()){
                    alert("Debe Seleccionar una Sección");
                    return false;
                }
                $("#exampleModal").hide();

                $.ajax({
                    type: 'POST',
                    url: "{{ path('distribucion_guarda_registros') }}",
                    data: {palet: $("#id_palet").val() , secId: $('input[name=options]:checked').val()},
                    cache: false,
                    success: function (data) {
                        location.reload();
                    }
                });

            });

            $("#grid").on("bindingcomplete filter pagechanged", function (event) {
                console.log("llega");
                $(".distribuir").click(function () {

                });
            });
        });

    </script>
{% endblock %}