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

{% block title %}Baterias Distribuidas{% 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-7 text-left" style="font-size: 24px">
                <i class="fa-solid fa-boxes-packing text-danger"></i><span class="text-danger"> Baterias Distribuidas</span>
                <br>
                <span class="text-danger" style="font-size: 16px"> Seleccione las baterias a Reprocesar</span>
            </div>
            <div class="col-1"></div>
            <div class="col-2">
                <br>
                <button id="reprocesar" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa-solid fa-boxes-packing"></i> Reprocesar
                </button>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-3 mb-5" style="min-height: 500px">
            <div class="col-10">
                <div id="grid"></div>
            </div>
        </div>

    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="" role="" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xs">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modelos de Baterias</h5>
                </div>
                <div class="modal-body">
                    <label for="modelo">Seleccione el Modelo de la Bateria a Reprocesar</label>
                    <select name="modelo" id="modelo" class="mt-3">
                        {% for modelo in modelos %}
                            <option title="{{ modelo.batCodInicio }}" value="{{ modelo.id }}">{{ modelo.batNomProdNeural ~ "--(" ~ modelo.batNumPlacas ~ ")" }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="modal-footer">
                    <button id="guardar" type="button" class="btn btn-danger" data-toggle="modal" data-target="#procesando">Reprocesar</button>
                    <button id="cerrar" type="button" onclick="$('#exampleModal').modal('hide');" 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 baterias = {{ baterias|json_encode|raw }};
        var modelos = {{ modelos|json_encode|raw }};
        console.log(modelos);

        $(document).ready(function () {

            $("#modelo").jqxDropDownList({width: '100%', height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase', filterPlaceHolder: 'Buscar...', filterHeight: 40});

            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'disId', type: 'int' },
                            { name: 'num_lote', type: 'string' },
                            { name: 'modelo', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'fecha_gar', map:'fecha_gar>date', type: 'date' },
                            { name: 'fecCreacion', map:'fecCreacion>date', type: 'date' },
                        ],
                    datatype: "array",
                    pagesize: 100,
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: false,
                    height: 600,
                    rowsheight: 30,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'checkbox',
                    columns: [
                        { text: '{% trans %}id{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'disId', width: '16%', hidden: true },
                        { text: '{% trans %}Número de lote{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'num_lote', width: '16%' },
                        { text: '{% trans %}Código Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_gar', width: '20%' },
                        { text: '{% trans %}modelo{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'modelo', width: '25%' },
                        { text: '{% trans %}Fecha Producción{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecha_gar', width: '18%' },
                        { text: '{% trans %}Fecha Creación de Qr{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'fecCreacion', width: '18%' },

                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();



            $("#reprocesar").click(function () {
                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros!");
                    return false;
                }
                $("#exampleModal").modal('show');

            });
            $("#modelo").on('change', function (event) {
                console.log($(this).val());
            })

            $("#guardar").click(function () {
                $('#procesando').modal('show');
                $("#exampleModal").hide();
                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                var data = [];
                rowindexes.forEach(function(currentValue, index, arr){
                    var row = $('#grid').jqxGrid('getrowdata', currentValue);
                    data.push(row);
                })
                $.ajax({
                    type: 'POST',
                    url: "{{ path('reproceso_guarda_registros') }}",
                    data: {data: data, batId: $('#modelo').val()},
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        $('#procesando').modal('hide');
                        Swal.fire({
                            icon: "info",
                            title: "Reproceso",
                            text: "Baterias reprocesadas correctamente",
                            confirmButtonColor: "#dc3545",
                            confirmButtonText: 'Aceptar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    }
                });

            });

        });

    </script>
{% endblock %}