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

{% block title %}{% trans %}Nuevo Palet{% endtrans %}{% endblock %}
{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div id="window" class="row justify-content-center">
            <div class="col-12 ">
                <div class="row justify-content-center mt-0">
                    <div class="col-12 text-left" style="font-size: 24px">
                        <i class="far fa-file text-danger"></i><span class="text-danger"> Nuevo Pallet</span>
                    </div>
                </div>
                <hr>
                <div class="row justify-content-center mt-3 mb-3">
                    <div class="col-2 text-primary mt-2">
                        <h5 class="text-secondary">Filtro por Fechas:</h5>
                    </div>
                    <div class="col-2 text-left">
                        <input id="fecha" value="{{ fecha }}" class="form form-control" type="date"/>
                    </div>
                    <div class="col-3 text-left">
                        <button id="filtrar" class="btn btn-danger">Filtrar</button>
                    </div>
                    <div class="col-5 text-left">

                    </div>
                </div>
                <hr>
                <div class="row justify-content-start mt-0">
                    <div class="col-3">
                        <label for="racks">Seleccione el Lote de Producción:</label>
                        <select id="lotes">
                            {% for lote in lotes %}
                                <option value="{{ lote.id }}">{{ lote.id ~ ' - ' ~ lote.lotCodigo }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-3">
                        <label for="racks">Seleccione el Modelo:</label>
                        <div id="modelos"></div>
                    </div>
                    <div class="col-3">
                        <label for="racks">Cantidad permitida por Pallet:</label>
                        <input id="cantidad_pallet" value="0" readonly class="form form-control form-control-sm"/>
                    </div>
                    <div class="col-3">

                    </div>
                </div>
                <div class="row justify-content-start mt-4">
                    <div class="col-12">
                        {{ form_start(form, {'attr': {'id': 'forNew','class':"needs-validation",'novalidate':''}}) }}
                        <div class="row align-items-center justify-content-center">
                            <div class="text-left col-12 mb-3">
                                {{ form_widget(form.palDescripcion,{'id':'palDescripcion', 'value':'MODELOS: ', 'attr':{'class':'form-control form-control-sm', 'style':'display:none'}}) }}
                                {{ form_widget(form.palEstado,{'id':'palEstado','attr':{'class':'form-control form-control-sm', 'value':'AGRUPADO', 'style':'display:none'}}) }}
                                <input type="text" id="baterias" name="baterias" style="display: none" />
                            </div>
                        </div>
                        <div class="row align-items-center justify-content-center">
                            <div class="text-left col-3 mb-3">
                                <label>Rango Desde</label>
                                <div id="palDesde"></div>
                            </div>
                            <div class="text-left col-3 mb-3">
                                <label>Rango Hasta</label>
                                <div id="palHasta"></div>
                            </div>
                            <div class="text-left col-3 mb-3">
                                <label>Cantidad de baterias seleccionadas:</label>
                                <input id="cantidad" value="1" readonly class="form form-control form-control-sm"/>
                            </div>
                            <div class="text-center col-3 mb-3">
                                <br>
                                <button id="agregar" type="button" class="btn btn-danger" >
                                    <i class="far fa-plus-square"></i> Agregar
                                </button>
                                <button id="limpiar" type="button" class="btn btn-warning text-danger" >
                                    <i class="fa-solid fa-broom"></i> Eliminar
                                </button>
                            </div>
                        </div>

                        <br>
                        <div class="row align-items-center justify-content-center mt-2 mb-3">
                            <div class="col-12 smallText text-center">
                                <div id="grid"></div>
                            </div>
                        </div>
                        <div class="row align-items-center justify-content-center mt-2 mb-3">
                            <div class="col-12 smallText text-center">
                                <button type="submit" class="btn btn-danger" >
                                    <i class="far fa-save"></i> Guardar
                                </button>
                                <a href="{{ path('palets_index') }}">
                                    <button type="button" class="btn btn-warning">
                                        <i class="fas fa-undo-alt"></i> Volver
                                    </button>
                                </a>
                            </div>
                        </div>
                        {{ form_end(form)}}
                    </div>
                </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" style="margin-top: 300px">
            <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 lotes = JSON.parse('{{ lotes|json_encode|raw }}');
        var modelos_cantidades = JSON.parse('{{ modelos|json_encode|raw }}');
        console.log(modelos_cantidades);
        var baterias = {};
        $(document).ready(function(){
            $("#lotes").jqxDropDownList({  width: 250, height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase'});
            $("#modelos").jqxDropDownList({  width: 250, height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase'});
            $("#palDesde").jqxDropDownList({  width: 250, height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase'});
            $("#palHasta").jqxDropDownList({  width: 250, height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase'});


            $("#lotes").on('change', function (event) {
                console.log($(this).val())
                $.ajax({
                    type: 'GET',
                    url: "{{ path('palets_lote_modelos') }}" + "?lote=" + $(this).val(),
                    data: null,
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        modelos = data;
                        var source =
                            {
                                localdata: modelos,
                                datatype: "array",
                                datafields: [
                                    { name: 'modelo' },
                                    { name: 'nom_prod_neural' },
                                ]
                            };
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        // Create a jqxDropDownList

                        $("#modelos").jqxDropDownList({
                            source: dataAdapter, displayMember: "nom_prod_neural", valueMember: "nom_prod_neural"
                        });
                    }
                });
            })

            $("#modelos").on('change', function (event) {
                modelos_cantidades.map(function (element){
                   if(element.modCodigo == $("#modelos").val()){
                       console.log(element.modCodigo + " ------ " + $("#modelos").val() + " ------- " + element.modCantidad);
                       $("#cantidad_pallet").val(element.modCantidad);
                   }
                });
                $.ajax({
                    type: 'GET',
                    url: "{{ path('palets_baterias_lote') }}" + "?lote=" + $("#lotes").val() + "&modelo=" + $("#modelos").val(),
                    data: null,
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        baterias = data;
                        var source =
                            {
                                localdata: data,
                                datatype: "array",
                                datafields: [
                                    { name: 'codigo_gar' },
                                ]
                            };
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        // Create a jqxDropDownList

                        $("#palDesde").jqxDropDownList({
                            selectedIndex: 0, source: dataAdapter, displayMember: "codigo_gar", valueMember: "codigo_gar"
                        });
                        $("#palHasta").jqxDropDownList({
                            selectedIndex: 0, source: dataAdapter, displayMember: "codigo_gar", valueMember: "codigo_gar"
                        });

                        const myTimeout = setTimeout(function () {
                            $("#palDesde").jqxDropDownList({
                                selectedIndex: 0
                            });
                            $("#palHasta").jqxDropDownList({
                                selectedIndex: 0
                            });
                        }, 500);
                        $("#palDesde").on('change', function (event) {
                            var args = event.args;
                            if (args) {
                                // index represents the item's index.
                                var index = args.index;
                                var item = args.item;
                                // get item's label and value.
                                var label = item.label;
                                var value = item.value;
                                var type = args.type;
                                var indexFin = $("#palHasta").jqxDropDownList('getSelectedIndex');
                                $("#cantidad").val((indexFin - index) + 1);
                            }
                        });
                        $("#palHasta").on('change', function (event) {
                            var args = event.args;
                            if (args) {
                                // index represents the item's index.
                                var index = args.index;
                                var item = args.item;
                                // get item's label and value.
                                var label = item.label;
                                var value = item.value;
                                var type = args.type;
                                var indexIni = $("#palDesde").jqxDropDownList('getSelectedIndex');
                                $("#cantidad").val((index - indexIni) + 1);
                            }
                        });
                    }
                });
            })

            var data = {};
            var source =
                {
                    localdata: data,
                    datatype: "local",
                    datafields:
                        [
                            { name: 'num_lote', type: 'string' },
                            { name: 'codigo_grupo_garantia', type: 'string' },
                            { name: 'id_bateria', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                        ],
                    addrow: function (rowid, rowdata, position, commit) {
                        // synchronize with the server - send insert command
                        // call commit with parameter true if the synchronization with the server is successful
                        //and with parameter false if the synchronization failed.
                        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                        commit(true);
                    },
                    deleterow: function (rowid, commit) {
                        // synchronize with the server - send delete command
                        // call commit with parameter true if the synchronization with the server is successful
                        //and with parameter false if the synchronization failed.
                        commit(true);
                    },
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    height: 450,
                    showfilterrow: true,
                    filterable: true,
                    pageable: false,
                    autoheight: false,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'multiplecellsextended',
                    columns: [
                        { text: 'Id Lote', columntype: 'textbox', filtertype: 'textbox', datafield: 'num_lote', width: '20%' },
                        { text: '{% trans %}Cod. Grupo Garantía{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'codigo_grupo_garantia', width: '30%' },
                        { text: '{% trans %}Codigo Bateria{% endtrans %}', columntype: 'textbox', filtertype: 'textbox',  datafield: 'codigo_gar', width: '20%' },
                        { text: '{% trans %}Modelo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox',  datafield: 'modelo', width: '30%' },
                    ]
                });

            $("#limpiar").click(function () {
                $('#grid').jqxGrid('clear');
                $('#palDescripcion').val('');
            });
            $("#agregar").click(function () {
                if($("#palDesde").val() == "" && $("#palHasta").val() == ""){
                    alert("Rango Inválido");
                    return false;
                }
                if($("#cantidad").val() < 1){
                    alert("Rango Inválido, Rango Desde no puede ser menor al Rango Hasta!");
                    return false;
                }

                baterias.forEach(function (item) {
                    if((item.codigo_gar >= $("#palDesde").val()) && (item.codigo_gar <= $("#palHasta").val())) {
                        var rows = $('#grid').jqxGrid('getrows');
                        var bandera = false;
                        rows.forEach(function (row) {
                            if(row.codigo_gar == item.codigo_gar){
                                bandera = true;
                            }
                        })
                        if(!bandera){
                            var datarow = {};
                            datarow['num_lote'] = item.num_lote;
                            datarow['codigo_grupo_garantia'] = item.codigo_grupo_garantia;
                            datarow['codigo_gar'] = item.codigo_gar;
                            datarow['modelo'] = item.nom_prod_neural;
                            var commit = $("#grid").jqxGrid('addrow', null, datarow);
                        }
                    }
                });
                var cadena = $("#palDescripcion").val();
                cadena = cadena.replace(" | " + $("#modelos").text(), '')
                $("#palDescripcion").val(cadena);
                $("#palDescripcion").val($("#palDescripcion").val() + " | " + $("#modelos").text());
            })

            $("#lotes").change();

            $("#filtrar").click(function () {
                $("#menCargando").empty();
                $("#menCargando").append('Buscando Registros');
                $('#procesando').modal('show');
                var url = "{{ path('palets_new', {'fecha':'fecini'}) }}"
                url = url.replace('fecini',$("#fecha").val());
                console.log(url);
                location.href = url;
            })
        });
        // VALIDACION
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        var rows = $('#grid').jqxGrid('getrows');
                        if(rows.length < 1){
                            alert("Debe agregar productos al palet");
                            event.preventDefault();
                            event.stopPropagation();
                            $("#procesando").modal("hide");
                            return false;
                        }
                        if(parseInt($("#cantidad").val()) > parseInt($("#cantidad_pallet").val())){
                            alert("Ha excedido la cantidad permitida por pallet para este modelo!");
                            event.preventDefault();
                            event.stopPropagation();
                            return false;
                        }
                        $("#baterias").val(JSON.stringify(rows));
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }else{
                            $("#procesando").modal("show");
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
{% endblock %}