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

{% block title %}Asignación de Baterias{% endblock %}

{% block contenido %}
    <style>
        @media (min-width: 1200px){
            .modal-xl {
                max-width: 1568px;
            }
        }
    </style>
    <main>
    <div class="container-fluid p-0">
        <div class="row justify-content-center mt-4 ">
            <div class="col-6 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Asignación de Baterias a Facturas</span>
            </div>
            <div class="col-2"></div>
            <div class="col-2">
            </div>
        </div>
        <hr>
        <form class="needs-validation" novalidate action="{{ path("distribucion_guarda_baterias_asignadas") }}" method="post" name="formulario" >
            <div class="row justify-content-center mt-4 ">
                <div class="col-2 text-left">
                    <label>Factura Id</label>
                    <input id="idFac" name="idFac" type="text" class="form form-control" readonly value="{{ detalle.facturas.id }}" />
                    <input id="fecDesde" name="fecDesde" type="text" style="display: none" readonly value="{{ fecDesde }}" />
                    <input id="fecHasta" name="fecHasta" type="text" style="display: none" readonly value="{{ fecHasta }}" />
                </div>
                <div class="col-2 text-left">
                    <label>Detalle Id</label>
                    <input name="idDet" type="text" class="form form-control" readonly value="{{ detalle.id }}" />
                </div>
                <div class="col-2">
                    <label>Nombre Producto (Modelo)</label>
                    <input name="nombrepro" type="text" class="form form-control" readonly value="{{ detalle.description2 }}" />
                </div>
                <div class="col-2">
                    <label>Descripción</label>
                    <input name="descprodetfac" type="text" class="form form-control" readonly value="{{ detalle.description }}" />
                </div>
                <div class="col-2">
                    <label>Cantidad Requerida</label>
                    <input id="canRequerida" name="cantdetfac" type="text" class="form form-control" readonly value="{{ detalle.quantity - canDespachada }}" />
                    <input id="canDespachada" name="canDespachada" type="text" class="form form-control" readonly value="{{ canDespachada }}" />
                </div>
                <div class="col-2">
                    <label>Cantidad Seleccionada</label>
                    <input id="canSeleccionada" name="canSeleccionada" type="text" class="form form-control" readonly value="0" />
                </div>
            </div>
            <hr>
            <div class="row justify-content-center mt-3 mb-5">
                <div class="col-10">
                    <div id="grid"></div>
                    <input id="data" name="data" type="hidden"/>
                </div>
            </div>
            <div class="row justify-content-center mt-3 mb-5">
                <div class="col-1">
                    <button id="guardar" type="submit" class="btn btn-danger" >
                        <i class="far fa-save"></i> Guardar
                    </button>
                </div>
                <div class="col-1 text-right">
                    <a href="{{ path('facturas_detalle',{'facId': detalle.facturas.id, 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$('#procesando').modal('show');">
                        <button id="volver" type="button" class="btn btn-warning" >
                            <i class="fas fa-undo-alt"></i> Volver
                        </button>
                    </a>
                </div>
            </div>
        </form>
    </div>
    </main>
    <!-- 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>
    <script>
        var registros = {{ registros|json_encode|raw }};
        var detalle = {{ detalle|json_encode|raw }};
        console.log(detalle);
        $(document).ready(function () {
            var source =
                {
                    localdata: registros,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'disNumLote', type: 'string' },
                            { name: 'codigo_gar', type: 'string' },
                            { name: 'modelo', type: 'string' },
                            { name: 'racDescripcion', type: 'string' },
                            { name: 'secNombre', type: 'string' },
                            { name: 'palDescripcion', type: 'string' }
                        ],
                    datatype: "array",
                    pagesize: 20,
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 30,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'checkbox',
                    columns: [
                        { text: '{% trans %}id{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '5%', hidden: true },
                        { text: '{% trans %}Número de lote{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'disNumLote', width: '15%', hidden: true },
                        { text: '{% trans %}Rack{% endtrans %}',  columntype: 'textbox', filtertype: 'checkedlist', datafield: 'racDescripcion', width: '22%' },
                        { text: '{% trans %}Sección{% endtrans %}',  columntype: 'textbox', filtertype: 'checkedlist', datafield: 'secNombre', width: '15%', hidden: true },
                        { text: '{% trans %}Palet{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'palDescripcion', width: '25%' },
                        { text: '{% trans %}Modelo{% endtrans %}', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'modelo', width: '25%' },
                        { text: '{% trans %}Código de Garantia{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'codigo_gar', width: '25%' },
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();

            $('#grid').on('rowselect rowunselect', function (event)
            {
                // event arguments.
                var args = event.args;
                // row's bound index.
                var rowBoundIndex = args.rowindex;
                // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
                var rowData = args.row;
                var selectedrowindexes = $('#grid').jqxGrid('selectedrowindexes');
                $("#canSeleccionada").val(parseInt(selectedrowindexes.length));
                if($("#canSeleccionada").val() > parseInt($("#canRequerida").val())){
                    $("#canSeleccionada").attr('style', 'border-color: red !important; -webkit-text-fill-color: red !important');
                    //$('#grid').jqxGrid('unselectrow', rowBoundIndex);
                    //alert("Cantidad máxima requerida ya ha sido seleccionada!");
                }else{
                    $("#canSeleccionada").removeAttr('style', 'border-color: red !important; -webkit-text-fill-color: red !important');
                }
            });

            $("#guardar").click(function () {

                var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');

                if(rowindexes.length < 1){
                    alert("Debe seleccionar los registros para completar la cantidad Requerida!");
                    return false;
                }
                if($("#canSeleccionada").val() > parseInt($("#canRequerida").val())){
                    alert("La cantidad seleccionada es mayor a la cantidad requerida!");
                    return false;
                }
                $('#procesando').modal('show');
                var data = [];
                rowindexes.forEach(function(currentValue, index, arr){
                    data.push($('#grid').jqxGrid('getrowdata', currentValue));
                })
                $("#data").val(JSON.stringify(data));

                /*myTimeout = setTimeout(function (){
                    alert("Factura guardada correctamente");
                    $("#volver").click();
                }, 1000);*/

            });
        });

    </script>
{% endblock %}