@include('led/led_header')
<style>
    .fancy.fancy-grid{
        overflow-x:auto;
    }
</style>

<div class="container" style='width:95%'>
    <div class="row">
        <div class="col-md-4 h3 text-left">
            @traducir('Reporte de bajas y desafectaciones','Reporte de bajas y desafectaciones')
        </div>
        <div class="col-md-8 text-center">
            <form name="frmBajas" id="frmBajas" method="post" class="form-signin">
                {{ csrf_field() }}
                <div class="col-md-7"></div>
                <div class="col-md-2">
                    <label>@traducir('Fecha desde','Fecha desde')</label>
                    <input name="fecha_desde" type="text" id="fecha_desde_b1" data-date-format="dd/mm/yyyy" class="fecha form-control readonly text-center" data-date-end-date="0d" data-date-start-date="-3y">
                </div>
                <div class="col-md-2">
                    <label>@traducir('Fecha hasta','Fecha hasta')</label>
                    <input name="fecha_hasta" type="text" id="fecha_hasta_b1" data-date-format="dd/mm/yyyy" class="fecha form-control readonly text-center" data-date-end-date="0d" data-date-start-date="-3y">
                </div>
                <div class="col-md-1">
                    <label>&nbsp;</label>
                    <button type="button" class="btn btn-info btn-fidelitas buscar"><i class='fas fa-search'></i>&nbsp;&nbsp;@traducir('Buscar','Buscar')</button>
                </div>
            </form>
        </div>
	</div>
</div>
<!-- -->
<div class="row" id="loading-bajas" style="display:block;">
    <div class="col-md-2 col-md-offset-5">
        <img src="/images/loading.gif" alt="" class="img img-responsive">
    </div>
</div>
<!-- -->    
<div class="col-md-12 text-center" >
    <div class="col-md-12" id="reportesBajas"></div>
</div>	
<!-- -->
<div class="modal fullscreen-modal  fade" id="modal_excel" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal_excel" >
        <div class="modal-content" style="overflow-y: auto;">
            <div id="detalle_excel" class="modal-body">
                <div class="col-md-12 text-center">
                    <label>@traducir('exportando', 'Exportando... Por favor aguarde un momento.')</label>
                </div>
                <div class="col-md-12 text-center">
                    <img style="float:none;" src="/images/loading.gif" class="loading"/>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -->
<script type="text/javascript" src="{{ URL::asset('/js/fancy/fancy.min.js') }}?v={{time()}}"> </script>


<script>    
$(document).ready(function() {  
    Fancy.MODULESDIR = '/js/fancy/';
    $('#loading-bajas').hide();
    $("#reportesBajas").html("");
    var date_desde=$('#fecha_desde_b1');
    var options={
    format: 'dd/mm/yyyy',
    todayHighlight: true,
    autoclose: true,
    language: "es",
    //startDate: '-2m', //pato
    endDate: '+0d',
    showButtonPanel: true
    };
    date_desde.datepicker(options); 
    date_desde.datepicker("setDate",'-30d');
    dateDefaultView($('#fecha_desde_b1'),'dd/mm/yyyy');

    var date_hasta=$('#fecha_hasta_b1');
    var options={
    format: 'dd/mm/yyyy',
    todayHighlight: true,
    autoclose: true,
    language: "es",
    //startDate: '-2m', //pato
    endDate: '+0d',
    showButtonPanel: true
    };
    date_hasta.datepicker(options);
    date_hasta.datepicker("setDate",'0d');
    dateDefaultView($('#fecha_hasta_b1'),'dd/mm/yyyy');
    //
    var fancyBajas;
    actualizarFancyBajas(); 
    //
    function actualizarFancyBajas() {
        $('#loading-bajas').hide();
        $("#reportesBajas").html("");
        var boton_excel = '@traducir("Exportar a excel", "Exportar a excel")'; 
        var registros = '@traducir("Registros", "Registros")';  
        var pagina = '@traducir("Pagina", "Página")'; 
        var de = '@traducir("de", "de")'; 

        var colIE = [
            {
                type: "select",
                width: 70,
                align: "center",
                cellAlign: "center",
                hidden: true,
                sortable: true,
                locked: false
            },
            {
                type: "date",
                format : {read:'Y-m-d H:i',write:'d/m/Y H:i'},
                title: '@traducir("Fecha","Fecha")',
                index: "FECHA_HORA",
                width: 100,
                cellAlign: "center",
                sortable: true,
                resizable: true,
                locked: true,
                align: "center"
            },
            {
                type: "string",
                title: '@traducir("Contratista","Contratista")',
                index: "CONTRATISTA",
                flex: 1,
                cellAlign: "left",
                sortable: true,
                resizable: true,
                locked: true,
                filter : {header:true},
                align: "left"
            },
            {
                type: "string",
                title: '@traducir("Acción","Acción")',
                index: "ACCION",
                width: 150,
                cellAlign: "left",
                sortable: true,
                resizable: true,
                locked: true,
                filter : {header:true},
                align: "left"
            },
            {
                type: "string",
                title: '@traducir("Sección","Sección")',
                index: "SECCION",
                width: 150,
                cellAlign: "left",
                sortable: true,
                resizable: true,
                locked: true,
                filter : {header:true},
                align: "left"
            },
            {
                type: "string",
                title: '@traducir("Tipo","Tipo")',
                index: "TIPO",
                flex: 1,
                cellAlign: "left",
                sortable: true,
                resizable: true,
                locked: true,
                filter : {header:true},
                align: "left"
            },
            {
                type: "string",
                title: '@traducir("Descripción","Descripción")',
                index: "DESCRIPCION",
                flex: 1,
                cellAlign: "left",
                sortable: true,
                resizable: true,
                    locked: true,
                filter : {header:true},
                align: "left"
            },
            { type : 'string' , 
                title : '@traducir("Usuario","Usuario")',
                index : 'USUARIO' ,
                flex: 1,
                cellAlign : 'left',
                sortable : true ,
                resizable : true ,    
                filter : {header:true} ,
                align : 'left' ,
                locked : true  
            },
        ];
        //
        $('#loading-bajas').show();
        if (ajax) {
            ajax.abort();
        }
        $.ajax({
            method: "post",
            url: "/imperium/reportes-bajas-data",
            data: $("#frmBajas").serialize(),
            beforeSend: function () {
                $("#loading-bajas").show();
                $("#reportesBajas").html("");
            },
            success: function (response) {
                var data = JSON.parse(response);
                var values = data.data;
                var hay = data.hay;
                if (hay=='NO'){
                    $('#loading-bajas').hide();
                    $("#reportesBajas").html("<div class='col-md-12 h4 text-center'>"+'@traducir("No existen datos para las fechas solicitadas","No existen datos para las fechas solicitadas")'+"</div>");
                    return; 
                }
                /*
                else 
                {
                    $('#loading-bajas').hide();
                    $("#reportesBajas").html("<div class='col-md-12 h4 text-center'>Existen datos para las fechas solicitadas</div>");
                    return; 
                }
                */
                var tipos = data.tipos;
                var tipos = Object.keys(tipos).map(function (key) { return tipos[key]; });
                var col = colIE[5];
                col.type = "combo";
                col.multiSelect = true;
                col.itemCheckBox = true;
                col.minListWidth = 100;
                col.data = tipos;
                col.displayKey = "tipo";
                col.valueKey = "tipo";
                col.listItemTpl = "";
                col.render = function (o) {
                    return o;
                };
                colIE[5] = col;

                var acciones = data.acciones;
                var acciones = Object.keys(acciones).map(function (key) { return acciones[key]; });
                var col = colIE[3];
                col.type = "combo";
                col.multiSelect = true;
                col.itemCheckBox = true;
                col.minListWidth = 100;
                col.data = acciones;
                col.displayKey = "accion";
                col.valueKey = "accion";
                col.listItemTpl = "";
                col.render = function (o) {
                    return o;
                };
                colIE[3] = col;

                var secciones = data.secciones;
                var secciones = Object.keys(secciones).map(function (key) { return secciones[key]; });
                var col = colIE[4];
                col.type = "combo";
                col.multiSelect = true;
                col.itemCheckBox = true;
                col.minListWidth = 100;
                col.data = secciones;
                col.displayKey = "seccion";
                col.valueKey = "seccion";
                col.listItemTpl = "";
                col.render = function (o) {
                    return o;
                };
                colIE[4] = col;

                $('#loading-bajas').hide();
                fancyBajas = new FancyGrid({
                    renderTo: "reportesBajas",
                    width: window.innerWidth - (window.innerWidth * .05),
                    height: window.innerHeight - (window.innerHeight * .20),
                    columnLines: true,
                    theme: {
                        name: "gray",
                    },
                    lang: {
                        paging: {
                            info: registros + ' [0] - [1] '+ de +' [2]',
                            page: pagina,
                            of: de + ' [0]'
                        },
                    },        
                    // Excel 
                    exporter: true,
                    subTBar: [
                        {
                            text: "<button style='background-color:#20a464; width:150px; margin-top: 0px;' type = 'button' class= 'form-control botones-paginador'><i class='fas fa-file-excel'></i>&nbsp;&nbsp;" + boton_excel + "</button>",
                            handler: function() {
                                $('#modal_excel').modal('show');
                                this.exportToExcel({
                                    fileName: 'Bajas-Desafectaciones',
                                    all: true,
                                    header: true
                                });
                                $('#modal_excel').modal('hide');
                            }
                        },
                    ],

                    selModel: { type : 'rows', memory : true },
                    paging : true,
                    paging : {
                        pageSize: 20,
                        pageSizeData: [10,20,50],
                        barType: 'tbar'
                    },
                    data: values,
                    defaults: {
                        sortable: true,
                        resizable: true},
                    columns: colIE,
                    scrollable: true,
                    cellHeight: 26,
                    //Habilita el agregado de css en todas las celdas de un fila cuando se hace mouseover.
                    trackOver: true,      
                    events : [{
                                init: function (g) { 
                                    $('#reportesBajas .fancy-bar-button').removeAttr("style");

                                    $('#reportesBajas .fancy').removeClass('fancy-panel-shadow');
                                    $('#reportesBajas .fancy-panel-tbar').css('border-bottom', '0px');
                                    $('#reportesBajas .fancy-panel-tbar .fancy-bar-left-scroller').remove(); 
                                    $('#reportesBajas .fancy-panel-tbar .fancy-bar-right-scroller').remove(); 
                                },
                                scope: {}
                                }, {
                                cellclick : function(fancyBajas, obj) {},
                                },
                            ],
                });

                $("#loading-bajas").hide();
                $("#reportesBajas").show();
            },
        });
    }
    //
    $(window).resize(function () {
        if (fancyBajas != null) {
            fancyBajas.setWidth(window.innerWidth - (window.innerWidth * .05),);
            fancyBajas.setHeight(window.innerHeight - (window.innerHeight * .20));
            fancyBajas.update();
        }
    });
    //
    $('.buscar').on('click', function() {
        actualizarFancyBajas();
    });
    //
    $('.fecha').on('change', function() {
        $("#loading-bajas").hide();
        $("#reportesBajas").html("");
    });

})

</script>
@include('led/led_footer')