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

{% block title %}Distribución de Baterias{% 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"> Distribución de Baterias Recibidas</span>
            </div>
            <div class="col-2"></div>
            <div class="col-2">
                <button id="distribuir" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa-solid fa-boxes-packing"></i> Distribuir
                </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="-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 Individual</h5>
                </div>
                <div class="modal-body">
                    <label for="racks">Seleccione el No. de  Rack:</label>
                    <select id="racks" class="">
                        <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>

                </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 baterias = {{ baterias|json_encode|raw }};
        //console.log(baterias);
        $(document).ready(function () {
            $("#racks").jqxDropDownList({ width: 250, height: 30});
            var source =
                {
                    localdata: baterias,
                    datafields:
                        [
                            { name: 'recId', 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 estadorenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var http = new XMLHttpRequest();
                http.open('HEAD', 'codigos_qr/'+ rowdata.codigo_gar +'.png', false);
                http.send();
                 if(http.status != 404){
                     return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><a href="codigos_qr/'+ rowdata.codigo_gar +'.png" target="_blank"><img width="95px" height="95px" src="codigos_qr/'+ rowdata.codigo_gar +'.png" alt="Sin QR" /></a></div></div>';
                 }else{
                     return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><i class="fab fa-3x fa-chrome text-warning"></i></div></div>';
                 }
                //console.log(rowdata);

            }
            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center"><a href="{{ path('status_edit',{'id':'docId'}) }}"><button type="button" class="btn btn-white btn-sm mr-2"><i class="far fa-2x fa-edit text-warning"></i></button></a>';
                if (rowdata.staEstado == 'true') {
                    result += '<a href="{{ path('status_cambia_estado',{'id':'docId1','estado':0}) }}"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-times-circle text-danger"></i></button></a>';
                }
                else {
                    result += '<a href="{{ path('status_cambia_estado',{'id':'docId2','estado':1}) }}"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-check-circle text-success"></i></button></a>';
                }
                result = result.replace('docId',rowdata.id);
                result = result.replace('docId1',rowdata.id);
                return result.replace('docId2',rowdata.id);
            }

            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: 'checkedlist', datafield: 'recId', 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();


            $("#racks").on('change', function (event) {
                console.log($(this).val())
                $.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'] +"' value='"+ rack1[j+(i*9)]['id'] +"' 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();
                        }
                    }
                });
            })



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

            $("#guardar").click(function () {
                if(!$('input[name=options]:checked').val()){
                    alert("Debe Seleccionar una Sección");
                    return false;
                }
                $("#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('distribucion_guarda_registros') }}",
                    data: {data: data, secId: $('input[name=options]:checked').val()},
                    cache: false,
                    success: function (data) {
                        location.reload();
                    }
                });

            });
        });

    </script>
{% endblock %}