@include('led/led_header')
<link rel="stylesheet" type="text/css" href="../components/flag-icon-css-master/css/flag-icon.min.css">
<link href="{{asset('/css/modal/custom-modal.css')}}" rel="stylesheet">
<script type="text/javascript" src="{{ URL::asset('/js/fancy/fancy.min.js') }}?v={{time()}}"> </script>
<script type="text/javascript" src="{{ URL::asset('/js/modal/custom-modal.js') }}"> </script>

<style>
    .fancy.fancy-grid{
        overflow-x:auto;
        }
</style>

<div class="container" style="width:90%">
    <div class="row">
        <div class="col-md-6 h3">
            @traducir('Control de Acceso','Control de Acceso') - @if($seccion == 'C') @traducir('Nómina de Contratistas','Nómina de Contratistas') @elseif ($seccion == 'E') @traducir('Nómina de Personas','Nómina de Personas') @else @traducir('Nómina de Vehículos','Nómina de Vehículos') @endif
        </div>
        <div class="col-md-6 text-right" style="padding-top:15px">

            @if($seccion != 'C')<button type="Button" class="btn btn-info accesoNominas" data-seccion="C" style="width:120px"><i class="fa fa-building"></i> @traducir('Contratistas','Contratistas')</button>@endif
            @if($seccion != 'E')<button type="Button" class="btn btn-info accesoNominas" data-seccion="E" style="width:120px"><i class="fa fa-user"></i> @traducir('Personas','Personas')</button>@endif
            @if($seccion != 'V')<button type="Button" class="btn btn-info accesoNominas" data-seccion="V" style="width:120px"><i class="fa fa-truck"></i> @traducir('Vehículos','Vehículos')</button>@endif

            <button class="btn btn-primary btn-fidelitas" style="width:120px;" onclick="location.href='/imperium/control-acceso'"><i class="fa fa-reply"></i> @traducir('Regresar','Regresar')</button>
        </div>
    </div>

    <div class="row" id="nominaLoading" style="padding-top:30px; 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="row">
        <div class="col-md-12" id="tablaNominas" style="display:none;">
        </div>
    </div>
</div>

<form id="frmNominas" method="post" action="/imperium/control-acceso-nominas" name="frmNominas">
    {{csrf_field()}}
    <input type="hidden" name="cliente" value="{{$cliente}}">
    <input type="hidden" name="locacion" value="{{$locacion}}">
    <input type="hidden" name="seccion" value="">
</form>

<form action="/imperium/control-acceso-nominas-data" method="post" name="frmData" id="frmData">
    {{csrf_field()}}
    <input type="hidden" name="cliente" value="{{ $cliente }}">
    <input type="hidden" name="locacion" value="{{ $locacion }}">
    <input type="hidden" name="seccion" value="{{ $seccion }}">
</form>

<form action="/imperium/control-acceso-check-doc" id="frmAcceso" method="post" name="frmAcceso">
    {{csrf_field()}}
    <input type="hidden" name="recurso" value="">
    <input type="hidden" name="tipo_acceso" value="I">
    <input type="hidden" name="locacion" value="{{ $locacion }}">
</form>

<!-- -->
<div class="modal fullscreen-modal  fade" id="modal_excel_impe" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal_excel_impe" >
        <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>

    $(document).ready(function() {
        Fancy.MODULESDIR = '/js/fancy/'; 
        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")'; 

        $(document).on('click', '.accesoNominas', function() {
            $('#frmNominas [name="seccion"]').val($(this).data('seccion'));
            $('#frmNominas').submit();
        });

        $.ajax({
                method: 'post',
                url: '/imperium/control-acceso-nominas-data',
                data: $('#frmData').serialize(),
                dataType: 'json',
                beforeSend: function() {

                },
                success: function(response) {

                    var cols = response.columns;
                    var data = response.data;
                    var tipos = response.tipos;
                    var accesos = response.acceso;
                        // var nominaTable;

                    var columns = new Array();
                    cols.map(function(col, i) {
                        col.filter = {header: true}
                        columns.push(col);
                    });
                    var last = columns.length-1;

                    var tipos_list = new Array();
                    tipos.map(function(tipo, i) {
                        tipos_list.push({nombre_tipo:tipo});
                    });

                    var acceso_list = new Array();
                    accesos.map(function(acc, i) {
                        acceso_list.push({value: (acc==0)?'danger':'success'});
                    });
                   
                    var values = new Array();
                    data.map(function(record, i) {
                        record.country_code = '<span class="flag-icon flag-icon-background flag-icon-' + record.country_code.toLowerCase() + '"></span>';

                        if ($('#frmData [name="seccion"]').val() == 'C' || $('#frmData [name="seccion"]').val() == 'E') {
                            record.identificacion = record.abreviatura + ' ' + record.identificacion;
                            //record.acceso = '<button type="button" style="width:25px" class="btn btn-' + (record.acceso > 0 ? 'success':'danger') + '"><i class="glyphicon glyphicon-log-in"></i></button>';
                        }
                        else {
                            //record.acceso = '<button type="button" style="width:25px" class="btn btn-' + (record.acceso > 0 ? 'success':'danger') + '"><i class="fa fa-' + (record.acceso > 0 ? 'check':'times') + '"></i></button>';
                        }
                        
                        record.acceso = record.acceso > 0 ? 'success':'danger';
                        

                        if ($('#frmData [name="seccion"]').val() == 'C') {
                            if (record.contratista != record.contratista_1) {
                                record.identificacion_1 = record.abreviatura_1 + ' ' + record.identificacion_1;
                            }
                            else {
                                record.nombre_contratista_1 = '';
                                record.identificacion_1 = '';
                            }
                        }
                        if ($('#frmData [name="seccion"]').val() == 'E' || $('#frmData [name="seccion"]').val() == 'V') {
                            if (record.contratista == record.contratista_1) {
                                record.nombre_contratista = '';
                            }
                        }

                        values.push(record);
                    });
                    
                    var col = columns[3];
                    col.type = 'combo';
                    col.multiSelect = true;
                    col.itemCheckBox = true;
                    col.minListWidth = 100;
                    col.data = tipos_list;
                    col.displayKey = 'nombre_tipo';
                    col.valueKey = 'nombre_tipo';
                    col.render = function (o) {
                        if( o != undefined){
                            o.value = $.trim(o.value);
                            return o;
                        }
                        return o;
                    }
                    columns[3] = col;


                    var col = columns[6];
                    col.type = 'combo';
                    col.multiSelect = true;
                    col.itemCheckBox = true;
                    col.minListWidth = 100;
                    col.data = acceso_list;
                    col.displayKey = 'value';
                    col.valueKey = 'value';
                    col.listItemTpl = '<button type="button" style="width:25px" class="btn btn-{cls}"><i class="glyphicon glyphicon-log-in "></i></button>';
                    col.render = function (o) {
                        if( o != undefined){
                            var cls = o.value;
                            o.value = '<button type="button" style="width:25px" class="btn btn-' + cls +'"><i class="glyphicon glyphicon-log-in "></i></button>';
                            return o;
                        }
                        return o;
                    }
                    columns[6] = col;

                    var nominaTable = new FancyGrid({
                        renderTo: "tablaNominas",
                        //width: $('#tablaNominas').width() - ($('#tablaNominas').width() * .00),
                        //height: 640,
                        
                        width: 'fit',
                        height: 'fit',

                        theme: {
                            name: "gray",
                        },
                        selModel: { type: "rows", memory: true },
                        lang: {
                            paging: {
                                info: registros + ' [0] - [1] '+ de +' [2]',
                                page: pagina,
                                of: de + ' [0]'
                            },
                        }, 
                        columnClickData: true,                
                        paging : true,
                        paging : {
                            pageSize: 25,
                            pageSizeData: [10,20,50],
                            barType: 'tbar'
                        },  
                        
                        data: values,
                        columns: columns,
                        /* 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() {
                            exportarFancy(values);
                        }
                        },
                        ],         
                        /* Agregado 8/5/2020 */
                        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) {                                          
                                    $('#tablaNominas .fancy').removeClass('fancy-panel-shadow');
                                    $('#tablaNominas .fancy-bar-button').removeAttr("style");

                                    $('#tablaNominas .fancy-panel-tbar').css('border-bottom', '0px'); 
                                    $('#tablaNominas  .fancy-panel-tbar .fancy-bar-left-scroller').remove(); 
                                    $('#tablaNominas  .fancy-panel-tbar .fancy-bar-right-scroller').remove(); 
                                },
                                scope: {}
                            },
                            {cellclick: function(g,cc) {
                                if (cc.columnIndex == 6 && $('#frmData [name="seccion"]').val() != 'V') {
                                    var id = $('#frmData [name="seccion"]').val() == 'C' ? cc.data.contratista : cc.data.empleado;
                                    $('#frmAcceso [name="recurso"]').val($('#frmData [name="seccion"]').val() + '|' + id.toString());
                                    $('#frmAcceso').submit();
                                }
                            }
                        }],
                    });
                    $('#nominaLoading').hide();
                    $('#tablaNominas').show();
                }
        });

        function exportarFancy(response){
            $.ajax({
                method: 'post',
                url: '/imperium/control-acceso-nominas-data-fancy',
                data: $('#frmData').serialize(),
                async: true, 
                dataType:'json',
                beforeSend: function(){
                    $('#modal_excel_impe').modal('show')
                },
                success: function(resp){
                    var $a = $("<a>");
                    $a.attr("href",resp.file);
                    $("body").append($a);
                    $a.attr("download",resp.archivo);
                    $a[0].click();
                    $a.remove();
                    $('#modal_excel_impe').modal('hide');
                }
            });
        }
    });
</script>

@include('led/led_footer')