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

{% block title %}Generar Garantías{% endblock %}

{% block contenido %}
<main>
    <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="fa-solid fa-microchip text-danger"></i><span class="text-danger"> Generar Garantías</span>
            </div>
            <div class="col-4 text-left" style="font-size: 24px">
                <span id="secuencial" class="text-danger"> Secuencial: 0</span>
            </div>
        </div>
        <hr>
        <div class="row align-items-center justify-content-center">
            <div class="col-3">
                <label>Seleccione el modelo de la Batería:</label>
                <select name="bateria" id="bateria" class="">
                    {% for bateria in baterias %}
                    <option data-target="{{ bateria.batCodGrupo }}" data-title="{{ bateria.batCodInicio }}" value="{{ bateria.id }}">{{ bateria.batNomProdNeural ~ "--(" ~ bateria.batNumPlacas ~ ")" }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-2">
                <label>Seleccione el Lote:</label>
                <select name="lotes" id="lotes" class="form-control form-control-sm">
                </select>
            </div>
            <div id="lotManual" class="col-2" style="display: none">
                <label>Ingrese Lote Manual</label>
                <input id="lote_manual" type="text" class="form-control form-control-sm"/>
            </div>
            <div class="col-2">
                <label>Código Bateria:</label>
                <input id="codBateria" type="text" readonly class="form-control form-control-sm"/>
            </div>
            <div class="col-2">
                <label>Ingrese la cantidad:</label>
                <input id="cantidad" type="number" min="1" max="9999" class="form-control form-control-sm"/>
            </div>
            <div class="col-1 mt-3 text-center ml-4">
                <button type="button" class="btn btn-danger" id='generar'>
                    <i class="fa-solid fa-forward"></i> Generar
                </button>
            </div>
        </div>
        <br>
        <br>
        <div class="row align-items-center justify-content-center pe-4">
            <div class="col-12">
                <div id="garGeneradas" class="row align-items-center justify-content-center" style="display: none">
                    <span class="text-warning mb-3" style="font-size: 18px;">Garantias Generadas</span>
                    <div id="grid"></div>
                </div>
            </div>
        </div>
    </div>
</main>
    <script>
        var baterias = {{ baterias|json_encode|raw }};
        var periodos = {{ periodos|json_encode|raw }};
        var grupos = {{ grupos|json_encode|raw }};
        console.log(grupos);
        $(document).ready(function () {
            $("#bateria").jqxDropDownList({selectedIndex: -1, width: '100%', height: 30, theme: '{{ theme }}', filterable:true, searchMode: 'containsignorecase', filterPlaceHolder: 'Buscar...', filterHeight: 40});

            $("#bateria").change(function (event){
                //console.log($(this).val());
                var codGrupo = event.args.owner.source[event.args.owner.selectedIndex].originalItem.dataset.target;
                var secuencial = 0;
                grupos.map(function (element){
                    if(element.gruCodigo == codGrupo){
                        console.log("grupo:->" + codGrupo + "------element:->" + element.gruCodigo);
                        secuencial = element.gruSecuencia
                    }
                    $("#secuencial").empty();
                    $("#secuencial").append("Secuencial: " + secuencial);
                });
                console.log(event.args.owner.source[event.args.owner.selectedIndex].originalItem.dataset);
                $("#codBateria").val(event.args.owner.source[event.args.owner.selectedIndex].originalItem.dataset.title);
                $.ajax({
                    type: 'POST',
                    url: "{{ path('app_lotes_get_by_bateria') }}",
                    data: {batId: $(this).val()},
                    cache: false,
                    success: function (items) {
                        console.log(items)
                        $('#lotes').empty();
                        if (items.length < 1){

                        }else{
                            $("#lotManual").hide();

                            $.each(items, function (i, item) {
                                $('#lotes').append($('<option>', {
                                    value: item.id,
                                    text : item.lotCodigo
                                }));
                            });
                        }
                    }
                });
            });
            $("#generar").click(function (){
                if($("#bateria").val() == "0"){
                    alert("Debe seleccionar una bateria");
                    return false;
                }
                if($("#cantidad").val() < 1){
                    alert("cantidad ingresada no válida");
                    return false;
                }
                if($("#lotes").val() == ""){
                    var lotId = $("#lote_manual").val();
                }else {
                    var lotId = $("#lotes").val();
                }
                Swal.fire({
                    icon: "info",
                    title: "Generar Garantías",
                    text: "Esta seguro que desea generar las garantias del modelo: " + $("#bateria").text(),
                    showDenyButton: true,
                    denyButtonColor: "#dc3545",
                    denyButtonText: 'Cancelar',
                    confirmButtonColor: "#439b38",
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $("#menCargando").empty();
                        $("#menCargando").append('Generando Garantias');
                        $('#procesando').modal('show');
                        //GENERA Y GUARDA GARANTIAS
                        $.ajax({
                            type: 'POST',
                            url: "{{ path('app_garantias_generar_guardar') }}",
                            data: {
                                batId: $("#bateria").val(),
                                lotId: lotId,
                                cantidad: $("#cantidad").val()
                            },
                            cache: false,
                            success: function (garantias) {
                                console.log(garantias)
                                setTimeout(function (){
                                    $('#procesando').modal("hide");
                                }, 1000);

                                var source =
                                    {
                                        localdata: garantias,
                                        datafields:
                                            [
                                                { name: 'id', type: 'string' },
                                                { name: 'garCodigo', type: 'string' },
                                                { name: 'garFecha', map:'garFecha>date', type: 'date' },
                                                { name: 'gruCodigo', type: 'string' },
                                                { name: 'lotCodigo', type: 'string' },
                                                { name: 'batModelo', type: 'string' },
                                                { name: 'perAnio', type: 'string' },
                                                { name: 'perMes', type: 'string' },

                                            ],
                                        datatype: "array",
                                        pagesize: 100,
                                    };
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                $("#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: 'none',
                                        columns: [
                                            { text: 'id', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '5%' },
                                            { text: '{% trans %}Fecha Garantia{% endtrans %}', columntype: 'datetimeinput', filtertype: 'range', cellsFormat: 'yyyy-MM-dd', datafield: 'garFecha', width: '10%' },
                                            { text: '{% trans %}Modelo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'batModelo', width: '15%' },
                                            { text: '{% trans %}Cod. Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'garCodigo', width: '20%' },
                                            { text: '{% trans %}Cod. grupo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'gruCodigo', width: '15%' },
                                            { text: '{% trans %}Cod. Lote{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'lotCodigo', width: '15%' },
                                            { text: '{% trans %}Periodo Mes{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'perMes', width: '10%' },
                                            { text: '{% trans %}Periodo Anio{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'perAnio', width: '10%' },
                                        ]
                                    });
                                $("span:contains('www.jqwidgets.com')").hide();
                                $("#garGeneradas").show();
                                $("#codBateria").val("");
                                $("#bateria").val("0");
                                $("#cantidad").val("");
                                $('#lotes option').each(function() {
                                    $(this).remove();
                                });


                            }
                        });
                    }else{

                    }
                });


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