@include('header')
@include('navigator_menu_principal')
<script type="text/javascript" src="{{ URL::asset('js/fancy/fancy.min.js') }}?v={{time()}}"> </script>
<style>
    .cliente {
        font-size: 14px;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-8 h2">Clientes Imperium</div>
        <div class="col-md-4 text-right"><button type="button" class="btn btn-primary btn-fidelitas" style="width:130px"
                onclick="location.href='/'"><i class="fa fa-reply"></i> Regresar</button></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-right h4">Período {{ $periodo }}</div>
    </div>

    <div id="loading" class="row" style="display:block;">
        <div class="col-md-2 col-md-offset-5"><img src="/images/loading.gif" class="img img-responsive"></div>
    </div>
    <div id="fancy" class="row" style="display:block;">
        <div class="table table-striped table-condensed" id="tablaClientes" data-paging="true"></div>
    </div>
</div>

<div id="vtoken" class="hidden">{{ csrf_token() }}</div>

<script type="text/javascript">
    $(document).ready(function () {

        var grid;

        var columns = [{ type: 'string', title: 'Cliente', index: 'nombre_cliente', width: 280, cellAlign: 'left', sortable: true, resizable: true, filter: { header: true }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Max. recursos', index: 'maximo_recursos', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total recursos', index: 'total_recursos', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, flex: 1, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total contratistas', index: 'total_contratistas', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total subcontr.', index: 'total_subcontratistas', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total empleados', index: 'total_empleados', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total vehículos', index: 'total_vehiculos', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        { type: 'string', title: 'Total documentos', index: 'total_docs', width: 110, cellAlign: 'center', sortable: true, resizable: true, filter: { header: false }, align: 'center', cls: 'cliente' },
        ];


        $.ajax({
            method: 'post',
            url: '/imperium/clientes-data',
            data: { '_token': $('#vtoken').html() },
            beforeSend: function () {
                $('#fancy').hide();
                $('#loading').show();
                $('#tablaClientes').html('');
            },
            success: function (response) {

                var data = JSON.parse(response);
                var values = data;

                if (values.length > 0) {

                    var newgrid = new FancyGrid({
                        renderTo: 'tablaClientes',
                        width: 1100,
                        height: 720,
                        theme: {
                            name: 'gray',
                        },
                        lang: {
                            paging: {
                                info: 'Página Actual [0] - [1] de [2]',
                                page: 'Página',
                                of: 'de [0]'
                            },
                        },
                        selModel: { type: 'rows', memory: true },
                        paging: true,
                        paging: {
                            pageSize: 20,
                            pageSizeData: [10],
                            barType: 'tbar'
                        },
                        data: values,
                        columns: columns,
                        events: [{
                            cellclick: function (newgrid, obj) {
                                selection = newgrid.getSelection();
                            }
                        }]
                    });


                }


                $('#fancy').show();
                $('#loading').hide();
            }


        });


    });
</script>

@include('footer')