{% extends '::baseHighstock4.html.twig' %}

{% block menuTop %}
{% endblock %}


{% block dashboard %} 
    <style>

        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

        /*Glyphicon Spinner*/
        .glyphicon-spin { 
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

        #menuTop {
            margin-top: 10px;
        }
        .fixed-panel {
            min-height: 200px;
            /* max-height: 800px; */
            overflow-y: auto;
        }
        #parametros .panel-body .row{

            padding-left: 5px;
        }
        #chart .panel-body {
            padding: 0px;
        }
        .btn-claro {
            color: #fff;
            /*background-color: #00569C;
            border-color: #3D59CA;*/
            background-color: #428bca;
            border-color: #3071a9;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
        }
        .tabla-detalle
        {
                text-transform: uppercase;
                font-size: 9px;
        }
    
        .disabledTab{
            pointer-events: none;
        }
        #menuTop { margin-top: 0px; }

        .form-inline .form-group { margin-bottom: 20px; }

        .form-group{ margin-left: 20px; }

        hr.style14 { 
            border: 0; 
            height: 1px; 
            background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
        }

        .hrHide { display: none; }

        .highcharts-container{width:100% !important;}

      
        table th{
            {#text-transform: uppercase;#}
            font-weight: bold;
            font-size: 12px;
        }
        
        table td{
            {#text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }        

        .commentList {
            padding:0;
            list-style:none;
            max-height:100px;
            overflow:auto;
        }
        .commentList li {
            margin:0;
            margin-top:10px;
        }
        .commentList li > div {
            display:table-cell;
        }       
        .commentText p {
            margin:0;
        }
        .sub-text {
            color:#aaa;
            font-family:verdana;
            font-size:11px;
        }
        /********************************************************************/
        .panel.with-nav-tabs .panel-heading{
            padding: 5px 5px 0 5px;
        }
        .panel.with-nav-tabs .nav-tabs{
            border-bottom: none;
        }
        .panel.with-nav-tabs .nav-justified{
            margin-bottom: -1px;
        }
        /*** PANEL PRIMARY ***/
        .with-nav-tabs.panel-primary .nav-tabs > li > a,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > .open > a,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
            background-color: #3071a9;
            border-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
            color: #428bca;
            background-color: #fff;
            border-color: #428bca;
            border-bottom-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
            background-color: #428bca;
            border-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
            background-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
            background-color: #4a9fe9;
        }
        /********************************************************************/
        input {
            -webkit-appearance: textfield;
            background-color: white;
            color: #1b1b1b;
            font-weight: lighter;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 1px;
            border-width: 1px;
            border-style: solid;
            border-color: #1B1B1B !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        table.dataTable thead th{
            border-bottom: 1px solid #3071a9 !important;
        }
        table.dataTable tfoot th{
            border-top: 1px solid #3071a9 !important;
        }
        .dataTables_scroll{
            border: 1px solid #3071a9 !important;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .header_dt{
            color: #fff;
            background-color: #428bca;
            border-color: #3071a9 !important;
        }
        .highcharts-graph {
            filter: url(#glow);
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 2px 5px !important;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .Resizer {
            padding: 0;
            margin: 0;
            top: 0;
            left: 0;
        }

        .contentWindow{
            position: absolute;
            background-color: #B4E0DE;
        }

        .resizer{
            position: absolute;
            z-index: 100;
            background-color: #4E6160;
        }

        .verticalResizer{
            cursor: ns-resize;
        }

        .horizontalResizer{
            cursor: ew-resize;
        }
        .panel .panel-primary {
            min-height: 100px;
            max-height: 300px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: scroll;
        }
        .title{
            background-color: #F7F5F7;
            color: #5288C6;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .text-right{
            text-align: right;
        }
        .text-left{
            text-align: left;
        }


    </style>
    
    <link  href="{{ asset('select2/css/select2.css') }}" rel="stylesheet" type="text/css" />
    <link  href="{{ asset('bootstrap-multiselect/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>    
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bootstrap-multiselect/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
    <script>
        Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function(proceed) {
            var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
            if (path) {
                path.flat = false;
            }
            return path;
        });
        function range(value){
            console.log('range',value);
            if (value==0){
                $(".muestra_week").show();
                $(".muestra_month").hide();
            }else{
                $(".muestra_week").hide();
                $(".muestra_month").show();
            }
        }
        //VALIDACIONES JQUERY
        $(document).ready(function (){  
            $(".muestra_week").hide();
            $(".muestra_month").hide();
            $("#mostrar_excel").hide();
            $("#range").change(function(e) {
                if ($(this).val()==0){
                    $(".muestra_week").show();
                    $(".muestra_month").hide();
                }else{
                    $(".muestra_week").hide();
                    $(".muestra_month").show();
                }
            });

            //
            var d = new Date();
            var month = new Array();
            month[0] = "ENERO";
            month[1] = "FEBRERO";
            month[2] = "MARZO";
            month[3] = "ABRIL";
            month[4] = "MAYO";
            month[5] = "JUNIO";
            month[6] = "JULIO";
            month[7] = "AGOSTO";
            month[8] = "SEPTIEMBRE";
            month[9] = "OCTUBRE";
            month[10] = "NOVIEMBRE";
            month[11] = "DICIEMBRE";
            //cargar graficos
            getChart();
            range(0);
            $("#region").multiselect({
                includeSelectAllOption: true,                             
                buttonTextAlignment: 'left',
                buttonWidth: '200px',
            });
            $("#status").multiselect({      
                includeSelectAllOption: true,                       
                buttonTextAlignment: 'left',
                buttonWidth: '200px',
            });
            
            //funcion para los select dependientes
            $(".get-list").change(function(e) {
                var data_select_refresh = $(this).attr('data');
                var data_act = $(this).attr('data-act');
                var campo_filtrar = $(this).attr('data-campo-filtro');  
                var campo_mostrar = $(this).attr('data-campo-mostrar'); 
                var div = $(this).attr('data-div-siguiente'); 
                var data = {
                    valor_filtro : $(this).val(),
                    campo_filtrar : campo_filtrar,
                    campo_mostrar : campo_mostrar,
                };
                $("."+data_act+" option").remove();                
                $("."+data_act).multiselect("destroy");
                $("."+data_act).multiselect({
                    includeSelectAllOption: true, 
                    buttonTextAlignment: 'left',
                    buttonWidth: '200px'
                });
                if ($(this).val()!=''){     //               
                    $.getJSON('{{path('reportappenate_llenarSelect',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                        var registros = data.registros;
                        $("."+data_select_refresh+" option").remove();   
                        for (var i = 0; i < registros.length; i++){
                            $("#"+data_select_refresh).append('<option value="' + registros[i]['valor'] + '">' + registros[i]['nombre'] + '</option>');
                        }

                        $("#"+data_select_refresh).attr('multiple',true);
                        $("#"+data_select_refresh).multiselect("destroy");
                        $("#"+data_select_refresh).multiselect({
                            includeSelectAllOption: true, 
                            buttonTextAlignment: 'left',
                            buttonWidth: '200px'
                        });
                        $('#'+div+' .multiselect-container>li[class="active"]>a>label>input').first().trigger('click'); 
                    });
                }
               
            });
            //fin select dependientes
            //funcion para los select dependientes
            $(".get-list-week").change(function(e) {   
                //semana            
                var data = {
                    year : $(this).val(),
                };
                $("#week option").remove();                
                if ($(this).val()!=''){                   
                    $.getJSON('{{path('reportappenate_llenarSelectWeek',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                        var registros = data.registros;
                        for (var i = 0; i < registros.length; i++){
                            $("#week").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['nombre'] + '</option>');
                        } 
                    });
                }
                //mes
                var yearSelected = parseInt($(this).val());
                var dateActual = new Date();
                var yearActual = dateActual.getFullYear();
                //console.log(yearActual);
                $('#mes').empty();

                for(var i=0;i<month.length;i++) {
                    if (yearSelected < yearActual) {
                        var val = i + 1;
                        if (val<10){
                            val = '0'+val;
                        }
                        $('#mes').append($("<option/>", {
                            value: val,
                            text: month[i]
                        }));
                    }else if(i <=  d.getMonth()){
                        var val = i + 1;
                        if (val<10){
                            val = '0'+val;
                        }
                        $('#mes').append($("<option/>", {
                            value: val,
                            text: month[i]
                        }));

                    }
                }
            });
            //accion cuando le dan al boton de generar
            $("#generar").click(function (){
                 if ($("#rango_fecha").hasClass("btn-primary")){
                    $('#Filtros_fechaIni').val($('#fechaIni').val());
                    $('#Filtros_fechaFin').val($('#fechaFin').val());  
                }
                if ($('#Filtros_fechaIni').val()=="" ||  $('#Filtros_fechaFin').val()==""){
                    swal("Error!", "Date Required", "error");
                }else{
                    getChart();
                }
            });
            $(window).resize(function(){
                //resizeChart();
            });            
        });             
        //FUNCIONES DE JAVASCRIP
        var projectList = new Array(4); //Lista de proyectos para cada gráfico
        //fin grafiaca de linea
        // get serie
        function getDataToObjectSerie(data, header){
            var arrayReturn = new Array();
            var data1 = new Array();

            for (var i = 0; i < data.length; i++){
                data1.push(parseFloat(data[i][header[header.length - 1]]));
            }
            arrayReturn.push({'name': header[header.length - 1], 'data': data1, 'dataLabels': {'enabled': true}});
            return arrayReturn;
        }
        //fin get serie
        //funcion para crear las tablas
        function createTableDT(data, tableRender, dtRender)
        {
            //console.log(data, tableRender, dtRender);
            var strHeader = "";
            var strFooter="";
            var columns = [];        ;
            var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
                    '<thead><tr class="header_dt">';
            $('#' + dtRender).empty();
            for (var i=0; i<data.length; i++){
                var fechaGroup = ""
                var title = data[i];
                var t = title.replace(/_/g,' ');
                t = title.replace('#','');
                var visible = title.startsWith('_') ? false : true;
                if (tableRender=='table_IssuesExecuted' && t=='%OHS'){
                    t = t +"<img src='{{ asset('images/down_red.png') }}'>";
                }else if (t=='%FTR' || t=='%FTR ASP' || t=='%OTD' || t=='%QP' || t=='%OHS'){
                    t = t +"<img src='{{ asset('images/up_red.png') }}'>";
                }
                if (t!='workplan_id'){
                    
                    strHeader += '<th class="text-center">' + t + '</th>';
                }
                columns.push({data: data[i], title: t, visible:visible});
            }
            strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
            $('#' + dtRender).empty();
            $('#' + dtRender).html(strTable);
            $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
            $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
                $( 'input', this ).on( 'keyup change', function () {
                    if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                        var table = $('#' + tableRender).DataTable();
                        if ( table.column(i).search() !== this.value ) {
                            table
                                    .column(i)
                                    .search( this.value )
                                    .draw();
                        }
                    }
                } );
            } );
            return columns;
        }       
        //configuracion de los datatable
        function buildDatatablePrin(render, columnas, data,suffix_export,orderArray)
        {
            var a=[];b=[];
            var Defs = [];
            var ini = (columnas.length) -5;
            var kpi = '';
            if (render=='table_IssuesExecuted'){
                kpi = 'Issues Executed';
            }else if(render=='table_ExecutedNotExecuted'){
                kpi = 'Reasons Not Executed';
            }else if(render=='table_OHS'){
                kpi = 'OHS';
            }else if(render=='table_01'){
                kpi = 'OTD';
            }
            for (var i=0; i<=(columnas.length - 1); i++){
                a.push(i);
            }
            Defs.push({ targets: a, className: 'dt-body-center' });
            for (var i=0; i<=(columnas.length - 1); i++){
                if (columnas[i].visible){
                    b.push(i);
                }
            }           
            table = $('#'+render).DataTable( {
                dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                data:data,
                "deferRender": false,
                "processing": true,
                "language": {
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "order": [[ 0, "asc" ]],
                columns: columnas,
                columnDefs: Defs,
                lengthMenu: [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Table Excel ' + kpi,
                        exportOptions: {
                            columns: b,
                            orthogonal: 'export'
                        },
                        title: 'MONITORING_CREW_REPORT',
                    }
                ],
                drawCallback: function() {
                    $('[data-toggle="popover"]').popover();
                } 
            } );
        }        
        //llamado para generar las graficas y las tablas  
        function getChart(){
            var region = $('#region').val();
            var pais = $('#pais').val();
            var proyecto = $('#proyecto').val();            
            if($('#asp_user').val()!=''){
                var asp = [$('#asp_user').val()];
            }else{
                var asp = $('#asp').val();
            }  
            var status = $("#status").val(); 
            var year = $("#year").val(); 
            var week = $("#week").val(); 
            var mes = $("#mes").val(); 
            var range = $("#range").val(); 
            //if (range==0 && (year=='' || week=='')){
            //    swal("Error!", "Year and Week Required", "error");
            if (range==1 && (year=='' || mes=='')){
                swal("Error!", "Year and Month Required", "error");
            }else{                       
                var parametros = {
                    'region': region,
                    'pais': pais,
                    'status': status,
                    'proyecto': proyecto,
                    'asp': asp,
                    'year': year,
                    'week': week,
                    'range': range,
                    'mes': mes,
                };
                $.isLoading({text: "Loading"});
                resizeChart();
                $.getJSON('{{path('reportappenate_DashboardCuadrilla',{'idproyectos':idproyectos,'idmodule':idmodule})}}', parametros, function (data){
                    var totalSemana1 = data.totalSemana1?data.totalSemana1.gran_total:0;
                    var totalSemana2 = data.totalSemana2?data.totalSemana2.gran_total:0;
                    var granTotalSemana1 = data.granTotalSemana1?data.granTotalSemana1.gran_total:0;
                    var granTotalSemana2 = data.granTotalSemana2?data.granTotalSemana2.gran_total:0;
                    //graficos  
                    $("#mes_filtro").val(mes);
                    $("#range_filtro").val(range);
                    if (data){
                        $("#semana1").val(data.semanas.week);
                        $("#semana2").val(data.semanas.week_anterior);
                        $("#anio").val(data.semanas.year);
                        $("#mostrar_excel").show();
                        if (data.totales){
                            $("#total_proyecto").text(data.totales.total_proyecto);
                            $("#total_asp").text(data.totales.total_asp);
                            $("#total_crew").text(data.totales.total_crew);
                        }
                        if (data.totalesSemana){
                            $("#gran_total").text(data.totalesSemana.gran_total);
                        }
                        if(data.semanas){
                            if (range==0){
                                $("#week1").text('W'+data.semanas.week_anterior);//
                                $("#week2").text('W'+data.semanas.week);//
                            }else{
                                $("#week1").text('M'+data.semanas.week_anterior);//
                                $("#week2").text('M'+data.semanas.week);//
                            }
                        }
                        if(data.totalesSemanaCrewActivas){
                           $("#week1_crew_activas").val(data.totalesSemanaCrewActivas.week1);
                           $("#week2_crew_activas").val(data.totalesSemanaCrewActivas.week2);     
                        }
                    }           
                    var path = "{{ path('reportappenate_detalleTablaCuadrilla') }}";
                    if(data.graficoDaily.categories.length>0){
                        graficaDaily('grafico_UtilizationDaily',data,path,parametros);
                    }else{                    
                        $("#grafico_UtilizationDaily").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                    }
                    if(data.graficoWeek1.categories[0]>0){
                        $("#grafico_UtilizationWeek1").empty();
                        graficaWeek1('grafico_UtilizationWeek1',data,path,parametros,totalSemana1,granTotalSemana1);
                        $('.muestra_semanas').show();
                        $('.muestra_legenda').show();
                      
                    }else{                    
                        $("#grafico_UtilizationWeek1").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                    }
                    if(data.graficoWeek2.categories[0]>0){
                        $("#grafico_UtilizationWeek2").empty(); 
                        graficaWeek2('grafico_UtilizationWeek2',data,path,parametros,totalSemana2,granTotalSemana2);                
                    }else{              
                        $("#grafico_UtilizationWeek2").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                    }
                    if(data.graficoAsp.categories.length>0){
                        graficaAsp('grafico_UtilizationAsp',data,path,parametros);
                    }else{                    
                        $("#grafico_UtilizationAsp").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                    }
                    if(data.graficoCrew.categories.length>0){
                       graficaCrew('grafico_UtilizationCrew',data,path,parametros);
                    }else{                    
                        $("#grafico_UtilizationCrew").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                    }                      
                    $.isLoading("hide");                
                });
            }
        }
        function resizeChart(){ 
            if ($("#grafico_UtilizationWeek1").highcharts()!=undefined){ 
                $('#grafico_UtilizationWeek1').highcharts().destroy();  
            } 
            if ($("#grafico_UtilizationWeek2").highcharts()!=undefined){
                $('#grafico_UtilizationWeek2').highcharts().destroy();   
            }
            if ($("#grafico_UtilizationDaily").highcharts()!=undefined){
                $('#grafico_UtilizationDaily').highcharts().destroy();   
            }
            if ($("#grafico_UtilizationAsp").highcharts()!=undefined){
                $('#grafico_UtilizationAsp').highcharts().destroy();   
            }
            if ($("#grafico_UtilizationCrew").highcharts()!=undefined){
                $('#grafico_UtilizationCrew').highcharts().destroy();   
            }             
        }
        function getDataToObjectSerieAll(data, header){
            var arrayReturn = new Array();
            var data1 = new Array();
            var menor = 1000;
            var mayor = -1;

            for (var i = 0; i < header.length; i++){
                var dataAux = new Array();
                if (header[i].indexOf('_cat_') < 0){
                    for (var j=0; j<data.length; j++){
                        var valor = parseFloat(data[j][header[i]]);
                        dataAux.push(valor);
                        if (valor < menor){
                            menor = valor;
                        }
                        if (valor > mayor){
                            mayor = valor;
                        }
                    }
                    arrayReturn.push({'name': header[i], 'data': dataAux, 'dataLabels': {'enabled': true}});
                }
            }
            data1[0] = arrayReturn;
            data1[1] = menor;
            data1[2] = mayor;
            return data1;
        }
        function openModalDetalle(fechaGroup){            
            getTableModal('detalle',fechaGroup);
        }
        function generateModal(ruta, objParams, numerar, title, subtitle, orderArray)
        {   
            var title_ = title!=null ? title.trim() : "";
            var ordArr = orderArray!=null ? orderArray : null;
            $("#datatableModalDetalle").empty().isLoading();
            $('#myModal .punto-grafica').empty().hide();
            $('#myModal .modal_detalle_titulo').empty();
            if (title != null)
            {
                $('#myModal .modal_detalle_titulo').html(title);
                title_ = title_.replace(' ','_');
                title_ = title_.replace('-','');
                title_ = title_.replace(' ','');
            }
            else
            {
                $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
                title = '{{'monitorii.detail' | trans }}';
                title_ = title_.replace(' ','_');
                title_ = title_.replace('-','');
                title_ = title_.replace(' ','');
            }
            if (subtitle != null)
            {
                $('#myModal .punto-grafica').html(subtitle).show();
            }
            $.getJSON(ruta, objParams, function (data)
            {
                if (data.length > 0){ 
                    var total_general = 0;
                    var col = createTableDTDetail(Object.keys(data[0]),'tableModalDetalle', 'datatableModalDetalle',objParams.kpi,0,0);
                    buildDatatablePrin('tableModalDetalle',col,data,title_,ordArr);
                    $('[data-toggle="popover"]').popover('destroy');
                    $('[data-toggle="popover"]').popover({
                        template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
                    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
                }else{
                    $("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                }
                $("#datatableModalDetalle").isLoading('hide');
            });

            $('#myModal').modal('show');
        }
        function createTableDTDetail(data, tableRender, dtRender, type, porcentaje_ohs, total_registros)
        {
            var strHeader = "";
            var strFooter="";
            var columns = [];
            var col_issues = 8;
            var strType = (type == null ? "" : type);
            var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
                    '<thead><tr class="header_dt">';
            $('#' + dtRender).empty();                                
            for (var i=0; i<data.length; i++){
                var title = data[i];
                var t = title.replace(/_/g,' ');
                t = title.replace('#','');
                var visible = title.startsWith('_') ? false : true;
                strHeader += '<th class="text-center">' + t + '</th>';                
                columns.push({data: data[i], title: t, visible:visible});
            }
            strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
            $('#' + dtRender).empty();
            $('#' + dtRender).html(strTable);
            $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
            $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
                $( 'input', this ).on( 'keyup change', function () {
                    if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                        var table = $('#' + tableRender).DataTable();
                        if ( table.column(i).search() !== this.value ) {
                            table
                                    .column(i)
                                    .search( this.value )
                                    .draw();
                        }
                    }
                } );
            } );
            return columns;
        } 
        function graficaWeek1(render,data,path,parametros,totalSemana1,total){         
            var dataWeek1 = new Array();
            var categoriesWeek1 = new Array();
            var graficoWeek1 = data.graficoWeek1; 
            var granTotal = totalSemana1;       
            if (graficoWeek1.data.length>0){
                //granTotal = graficoWeek1.categories[0];
                var seriesGraficoWeek1 = getDataToObjectSerieAll(graficoWeek1.data, Object.keys(graficoWeek1.data[0]));
                categoriesWeek1 = graficoWeek1.categories;
                $.each(seriesGraficoWeek1, function(key, value) {
                    $.each(value, function(k, v) { 
                        if (v.name=="NO CHECK IN CON CAUSA LAAPS"){//AMARILLO                            
                            dataWeek1[k] = [v.data[0]+"%",v.data[0],'#FFC824',v.name]; 
                        }else if (v.name=="NO CHECK IN CON CAUSA NO LAAPS"){//NARANJA                            
                            dataWeek1[k] = [v.data[0]+"%",v.data[0],'#ED7D31',v.name]; 
                        }else if (v.name=="NO CHECK IN"){//ROJO                           
                            dataWeek1[k] = [v.data[0]+"%",v.data[0],'#EE4436',v.name]; 
                        }else if (v.name=="CHECK IN"){//VERDE                            
                            dataWeek1[k] = [v.data[0]+"%",v.data[0],'#55954F',v.name];
                        }else if (v.name=="NO LAAPS"){//AZUL                           
                            dataWeek1[k] = [v.data[0]+"%",v.data[0],'#4777AF',v.name]; 
                        }                         
                    });
                });
            }  
            var height = 280;
            var width = 300;
            var y = 5;
            var status = $("#status").val();
            if (status!=null){
                if (status.length==1){
                    var y = 10;
                }
            }
            $('#week1_crew_activas').val()!=''?granTotal=granTotal+"/"+total+'<br>'+$('#week1_crew_activas').val():'';     
            var options = {
                chart: {
                    type: 'pie',
                },
                title: {
                    text: granTotal,
                    align: 'center',
                    verticalAlign: 'middle',
                    y: y
                },
                credits: {
                    enabled: false
                },                
                legend: {
                    //layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'bottom',
                    //floating: false,
                    //backgroundColor: '#3E3E3E'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            //distance: -50,
                            style: {
                                //fontWeight: 'bold',
                                color: 'white'
                            }
                        },
                        startAngle: 360,
                        endAngle: 360,
                        //center: ['50%', '50%'],
                        size: '110%'
                    }
                },
                series: [{
                    name: '%',
                    size: '50%',
                    innerSize: '75%',
                    keys: ['name', 'y', 'color','valor'],
                    data: dataWeek1
                    
                }]
            }
            if (path != null){
                options['plotOptions'] =
                {
                    series:
                    {
                        cursor: 'pointer',
                        borderWidth: 0,
                        dataLabels:
                        {
                            enabled: true,
                        },
                        point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (this != null){
                                        //console.log(this,this.valor);
                                        var estatus =  this.valor;
                                        parametros['kpi'] = 'detalle_week';
                                        parametros['estatus'] = estatus;
                                        parametros['semana'] = 1;
                                        var title_detalle = 'UTILIZATION BY WEEK';    
                                        var subtitle_detalle = estatus; 
                                        var orderArray;
                                        generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    }
                };
            }
            return $('#'+render).highcharts(options);      
        } 
        function graficaWeek2(render,data,path,parametros,totalSemana2,total){         
            var dataWeek2 = new Array();
            var categoriesWeek2 = new Array();
            var graficoWeek2 = data.graficoWeek2; 
            var granTotal = totalSemana2;         
            if (graficoWeek2.data.length>0){
                //granTotal = graficoWeek2.categories[0];
                var seriesGraficoWeek2 = getDataToObjectSerieAll(graficoWeek2.data, Object.keys(graficoWeek2.data[0]));
                categoriesWeek2 = graficoWeek2.categories;
                $.each(seriesGraficoWeek2, function(key, value) {
                    $.each(value, function(k, v) { 
                        if (v.name=="NO CHECK IN CON CAUSA LAAPS"){//AMARILLO
                            dataWeek2[k] = [v.data[0]+"%",v.data[0],'#FFC824',v.name]; 
                        }else if (v.name=="NO CHECK IN CON CAUSA NO LAAPS"){//NARANJA
                            dataWeek2[k] = [v.data[0]+"%",v.data[0],'#ED7D31',v.name]; 
                        }else if (v.name=="NO CHECK IN"){//ROJO
                            dataWeek2[k] = [v.data[0]+"%",v.data[0],'#EE4436',v.name]; 
                        }else if (v.name=="CHECK IN"){//VERDE
                            dataWeek2[k] = [v.data[0]+"%",v.data[0],'#55954F',v.name]; 
                        }else if (v.name=="NO LAAPS"){//AZUL
                            dataWeek2[k] = [v.data[0]+"%",v.data[0],'#4777AF',v.name]; 
                        }                         
                    });
                });
            } 
            var height = 280;
            var width = 300;
            var y = 5;
            $('#week2_crew_activas').val()!=''?granTotal=granTotal+"/"+total+"<br>"+$('#week2_crew_activas').val():'';         
            var options = {
                chart: {
                    type: 'pie',                    
                },
                title: {
                    text: granTotal,
                    align: 'center',
                    verticalAlign: 'middle',
                    y: y
                },
                credits: {
                    enabled: false
                },
                legend: {
                    //layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'bottom',
                    //floating: false,
                    //backgroundColor: '#3E3E3E'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            //distance: -50,
                            style: {
                                //fontWeight: 'bold',
                                color: 'white'
                            }
                        },
                        startAngle: 360,
                        endAngle: 360,
                        //center: ['50%', '50%'],
                        size: '110%'
                    }
                },
                series: [{
                    size: '50%',
                    name: '%',
                    innerSize: '75%',
                    keys: ['name', 'y', 'color','valor'],
                    data: dataWeek2
                    
                }]
            }
            if (path != null){
                options['plotOptions'] =
                {
                    series:
                    {
                        cursor: 'pointer',
                        borderWidth: 0,
                        dataLabels:
                        {
                            enabled: true,
                        },
                        point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (this != null){
                                        //console.log(this,this.valor);
                                        var estatus =  this.valor;
                                        parametros['kpi'] = 'detalle_week';
                                        parametros['estatus'] = estatus;
                                        parametros['semana'] = 2;
                                        var title_detalle = 'UTILIZATION BY WEEK';    
                                        var subtitle_detalle = estatus; 
                                        var orderArray;
                                        generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    }
                };
            }
            return $('#'+render).highcharts(options);       
        }     
        function graficaDaily(render,data,path,parametros){
            //para las graficas daily            
            var dataDaily = new Array();
            var categoriesDaily = new Array();
            var graficoDaily = data.graficoDaily;          
            if (graficoDaily.data.length>0){
                $("#muestraChartgraficoDaily").show()
                var seriesGraficoDaily = getDataToObjectSerieAll(graficoDaily.data, Object.keys(graficoDaily.data[0]));
                categoriesDaily = graficoDaily.categories;
                $.each(seriesGraficoDaily, function(key, value) {
                    $.each(value, function(k, v) { 
                        if (v.name=="NO CHECK IN CON CAUSA LAAPS"){//AMARILLO
                            dataDaily.push({"name":v.name,"data":v.data,"color":'#FFC824'});
                        }else if (v.name=="NO CHECK IN CON CAUSA NO LAAPS"){//NARANJA
                            dataDaily.push({"name":v.name,"data":v.data,"color":'#ED7D31'});
                        }else if (v.name=="NO CHECK IN"){//ROJO
                            dataDaily.push({"name":v.name,"data":v.data,"color":'#EE4436'});
                        }else if (v.name=="CHECK IN"){//VERDE
                            dataDaily.push({"name":v.name,"data":v.data,"color":'#55954F'});
                        }else if (v.name=="NO LAAPS"){//AZUL
                            dataDaily.push({"name":v.name,"data":v.data,"color":'#4777AF'});
                        }    
                    });
                });
            }
            var options = {
                chart: {
                    type: 'column'
                },                
                navigation: {
                    buttonOptions: {
                        verticalAlign: 'top',
                        y: -15,
                        x: 15,
                    }
                },
                title: {
                    text: null
                }, 
                xAxis: {
                    categories: categoriesDaily,
                    tickLength: 0,
                    labels: {
                        style: {
                            fontSize: '9px',
                            color: '#000000'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Crew'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: 'gray'
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    enabled: false
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    
                    column: {
                      dataLabels: {
                        enabled: true,
                        style:{
                            color:'#000',
                           'fontSize': '9px',
                        }
                      },
                      stacking: "normal",
                      point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (this != null){
                                        //console.log(this,this.x,this.series.name);
                                        var estatus =  this.series.name;
                                        parametros['kpi'] = 'detalle_daily';
                                        parametros['estatus'] = estatus;
                                        parametros['date'] = this.category.name;
                                        var title_detalle = 'UTILIZATION BY DAILY';    
                                        var subtitle_detalle = estatus; 
                                        var orderArray;
                                        generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    }
                },
                series: dataDaily
            }
            
            return $('#'+render).highcharts(options);    
        }      
        function graficaAsp(render,data,path,parametros){
            //para las graficas asp            
            var dataAsp = new Array();
            var categoriesAsp = new Array();
            var graficoAsp = data.graficoAsp;          
            if (graficoAsp.data.length>0){
                var seriesGraficoAsp = getDataToObjectSerieAll(graficoAsp.data, Object.keys(graficoAsp.data[0]));
                categoriesAsp = graficoAsp.categories;
                $.each(seriesGraficoAsp, function(key, value) {
                    $.each(value, function(k, v) { 
                        if (v.name=="NO CHECK IN CON CAUSA LAAPS"){//AMARILLO
                            dataAsp.push({"name":v.name,"data":v.data,"color":'#FFC824'});
                        }else if (v.name=="NO CHECK IN CON CAUSA NO LAAPS"){//NARANJA
                            dataAsp.push({"name":v.name,"data":v.data,"color":'#ED7D31'});
                        }else if (v.name=="NO CHECK IN"){//ROJO
                            dataAsp.push({"name":v.name,"data":v.data,"color":'#EE4436'});
                        }else if (v.name=="CHECK IN"){//VERDE
                            dataAsp.push({"name":v.name,"data":v.data,"color":'#55954F'});
                        }else if (v.name=="NO LAAPS"){//AZUL
                            dataAsp.push({"name":v.name,"data":v.data,"color":'#4777AF'});
                        }    
                    });
                });
            }
            var options = {
                chart: {
                    type: 'bar',
                    marginLeft: 100
                },                
                navigation: {
                    buttonOptions: {
                        verticalAlign: 'top',
                        y: -15,
                        x: -35,
                    }
                },
                title: {
                    text: null
                }, 
                xAxis: {
                    categories: categoriesAsp,
                    min: 0,
                    max: 8,
                    scrollbar: {
                        enabled: true
                    },
                    tickLength: 0
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'TotalCrewCausasUnicas'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: 'gray'
                        }
                    }
                }, 
                credits: {
                    enabled: false
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor: 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false, 
                    enabled: false
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            style:{
                                color:'#000',
                               'fontSize': '9px',
                            }
                        },
                    
                      point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (this != null){
                                        //console.log(this,this.x,this.series.name);
                                        var estatus =  this.series.name;
                                        parametros['kpi'] = 'detalle_asp';
                                        parametros['estatus'] = estatus;
                                        parametros['asp_grafica'] = this.category.name;
                                        var title_detalle = 'UTILIZATION ASP';    
                                        var subtitle_detalle = estatus; 
                                        var orderArray;
                                        generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    },
                },
                series: dataAsp
            }
            return $('#'+render).highcharts(options);  
        }
        function graficaCrew(render,data,path,parametros){
            //para las grafica crew            
            var dataCrew = new Array();
            var categoriesCrew = new Array();
            var graficoCrew = data.graficoCrew;          
            if (graficoCrew.data.length>0){
                var seriesGraficoCrew = getDataToObjectSerieAll(graficoCrew.data, Object.keys(graficoCrew.data[0]));
                categoriesCrew = graficoCrew.categories;
                $.each(seriesGraficoCrew, function(key, value) {
                    $.each(value, function(k, v) { 
                        if (v.name=="NO CHECK IN CON CAUSA LAAPS"){//AMARILLO
                            dataCrew.push({"name":v.name,"data":v.data,"color":'#FFC824'});
                        }else if (v.name=="NO CHECK IN CON CAUSA NO LAAPS"){//NARANJA
                            dataCrew.push({"name":v.name,"data":v.data,"color":'#ED7D31'});
                        }else if (v.name=="NO CHECK IN"){//ROJO
                            dataCrew.push({"name":v.name,"data":v.data,"color":'#EE4436'});
                        }else if (v.name=="CHECK IN"){//VERDE
                            dataCrew.push({"name":v.name,"data":v.data,"color":'#55954F'});
                        }else if (v.name=="NO LAAPS"){//AZUL
                            dataCrew.push({"name":v.name,"data":v.data,"color":'#4777AF'});
                        }  
                    });
                });
            }
            var options = {
                chart: {
                    type: 'bar',
                    marginLeft: 100
                },                
                navigation: {
                    buttonOptions: {
                        verticalAlign: 'top',
                        y: -15,
                        x: -35,
                    }
                },
                title: {
                    text: null
                }, 
                xAxis: {
                    categories: categoriesCrew,
                    min: 0,
                    max: 8,
                    scrollbar: {
                        enabled: true
                    },
                    tickLength: 0
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'TotalCrewCausasUnicas'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: 'gray'
                        }
                    }
                }, 
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor: 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false, 
                    enabled: false
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            style:{
                                color:'#000',
                               'fontSize': '9px',
                            }
                        },                    
                        point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (this != null){
                                        //console.log(this,this.x,this.series.name);
                                        var estatus =  this.series.name;
                                        parametros['kpi'] = 'detalle_crew';
                                        parametros['estatus'] = estatus;
                                        parametros['crew_grafica'] = this.category.name;
                                        var title_detalle = 'UTILIZATION CREW';    
                                        var subtitle_detalle = estatus; 
                                        var orderArray;
                                        generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    },
                },
                series: dataCrew
            }
            return $('#'+render).highcharts(options);  
        }
        function ExportExcel() {
          document.forms['formulario_filtros'].action="{{path('reportemexicoatt_ExcelDetalleDashboardCuadrilla')}}";
          document.forms['formulario_filtros'].submit();
        }
         function ExportExcelCheckinNoChcekin() {
          document.forms['formulario_filtros'].action="{{path('reportemexicoatt_ExcelDetalleDashboardCuadrillaCheckinNoCheckin')}}";
          document.forms['formulario_filtros'].submit();
        } 
    </script>
    <div class="container-fluid">
        <form id="formulario_filtros" onsubmit="return false;">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><a data-toggle="collapse" href="#collapse1">Filters <span class="caret"></span></a></h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                        <div id="panelFilter" class="panel-body">
                            <input type="hidden" name="asp_user" id="asp_user" value="{{ asp_user }}">
                            <input type="hidden" name="semana1" id="semana1" value="">
                            <input type="hidden" name="semana2" id="semana2" value="">
                            <input type="hidden" name="anio" id="anio" value="">
                            <input type="hidden" name="mes_filtro" id="mes_filtro" value="">
                            <input type="hidden" name="range_filtro" id="range_filtro" value="">
                            <div class="row">        
                                <div id="div_region" class="col-md-2 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'Region'}}: </label><br>
                                        <select class="form-control get-list region" id="region" name="region[]" data='pais' data-campo-filtro='region' data-campo-mostrar='pais' data-act='refresh_region' multiple="multiple" style="width: 100%;" data-div-siguiente="div_pais">
                                            <!--<option value="TODOS">-- All -- </option>-->
                                            {%for region in regiones %}
                                                <option value="{{region.valor}}">{{region.nombre}}</option>
                                            {%endfor%}
                                        </select>
                                    </div>
                                </div>
                                <div id="div_pais" class="col-md-2 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'monitores.pais' | trans}}: </label><br>
                                        <select class="form-control get-list pais refresh_region" id="pais" name="pais[]" data='proyecto' data-campo-filtro='pais' data-campo-mostrar='proyecto_filtro' data-act='refresh_cliente' style="width: 100%;" data-div-siguiente="div_proyecto">
                                        </select>
                                    </div>
                                </div>
                                <div id="div_proyecto" class="col-md-2 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'monitores.proyecto' | trans}}: </label><br>
                                        <select class="form-control get-list proyecto refresh_region refresh_cliente" id="proyecto" name="proyecto[]" data='asp' data-campo-filtro='proyecto_filtro' data-campo-mostrar='asp' data-act='refresh_proyecto' style="width: 100%;" data-div-siguiente="div_asp">
                                        </select>
                                    </div>
                                </div>
                                <div id="div_asp" class="col-md-2 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'ASP'}}: </label><br>
                                        <select class="form-control get-list asp refresh_region refresh_cliente refresh_proyecto" id="asp" name="asp[]" style="width: 100%;">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-2 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'Status'}}: </label><br>
                                        <select class="form-control status" id="status" name="status[]" style=" width: 100%;" multiple="multiple" >
                                            <option value="NO CHECK IN CON CAUSA LAAPS">NO CHECK IN CON CAUSA LAAPS</option>
                                            <option value="NO CHECK IN CON CAUSA NO LAAPS">NO CHECK IN CON CAUSA NO LAAPS</option>
                                            <option value="NO CHECK IN">NO CHECK IN</option>
                                            <option value="CHECK IN">CHECK IN</option>
                                            <option value="NO LAAPS">NO LAAPS</option>
                                        </select>
                                    </div>
                                </div>
                            </div>     
                            <div class="row">  
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                   <div class="form-group">
                                        <label>{{'Range'}}: </label><br>
                                        <select class="form-control range" id="range" name="range">
                                            <option value="0">Week</option>
                                            <option value="1">Month</option>
                                        </select>
                                    </div>
                                </div>                                  
                                <div class="col-md-2 col-sm-3 col-xs-12">
                                    <div class="form-group">
                                        <label>{{'Year'}}: </label><br>
                                        <select class="form-control year get-list-week" id="year" name="year">
                                            <option value=""></option>
                                            {%for year in years %}
                                                <option value="{{year.valor}}">{{year.nombre}}</option>
                                            {%endfor%}
                                        </select>
                                    </div>
                                </div>                                 
                                <div class="col-md-3 col-sm-3 col-xs-12 muestra_week">
                                    <div class="form-group">
                                        <label>{{'Week'}}: </label><br>
                                        <select class="form-control week" id="week" name="week">
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-3 col-xs-12 muestra_month">
                                    <div class="form-group">
                                        <label>{{'Month'}}: </label><br>
                                        <select class="form-control mes" id="mes" name="mes">
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <div class="form-group">
                                        <label for="generar"></label>
                                        <button class="btn btn-primary form-control" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                                    </div>
                                </div>  
                                                               
                            </div>
                        </div> 
                    </div>                        
                </div>                
            </div>
        </form>
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="text-center text-primary">
                    <i class="fa fa-file-text-o"></i> <strong>MONITORING CREW REPORT</strong>
                </h1>
            </div>
        </div> 
        <div class="row">
            <div id="panel_content" class="col-lg-12"> 
                <div class="panel">
                    <div class="row" style="margin: 30px 50px 30px 50px;font-size: 16px;font-weight: bold;">
                        <div class="col-md-3 text-center"> 
                            P <span id="total_proyecto"></span>
                        </div>
                        <div class="col-md-3 text-center">
                            ASP <span id="total_asp"></span>
                        </div>
                        <div class="col-md-3 text-center">
                            <i class="fa fa-users"></i> <span id="total_crew"></span>
                        </div>
                        <div class="col-md-3 text-center"> 
                            <i class="fa fa-database"></i> <span id="gran_total"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 text-left" id="mostrar_excel">
                            <div>
                                 <a class="dt-button" tabindex="0" aria-controls="tableModalDetalle" id="excel" href="javascript:ExportExcelCheckinNoChcekin()">
                                <span class="dt-button export-excel">Excel Checkin & No Checkin</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 text-right" id="mostrar_excel">
                            <div class="dt-buttons">
                                <a class="dt-button" tabindex="0" aria-controls="tableModalDetalle" id="excel" href="javascript:ExportExcel()">
                                <span class="dt-button export-excel">Excel Monitoring Crew</span>
                                </a>                               
                            </div>
                        </div>
                    </div>                    
                    <div class="row" style="margin: 30px 50px 0px 50px;">
                        <div class="col-md-6"> 
                            <div class="row title" style="margin: 0px 0px 25px 0px;">
                                UTILIZATION BY WEEK
                            </div>
                            <div class="row">
                                <div id="grafico_UtilizationWeek1" class="col-md-6" style="width: 50%; min-width: 320px;">
                                </div>
                                <div id="grafico_UtilizationWeek2" class="col-md-6" style="width: 50%; min-width: 320px;">
                                </div>
                            </div>
                            <div class="row muestra_semanas" style="display: none;">
                                <div class="col-md-6 text-center bold m-b-4" style="margin: -10px 0px 25px 0px;">
                                    <span id="week1"></span>
                                </div>
                                <div class="col-md-6 text-center bold m-b-4" style="margin: -10px 0px 25px 0px;">
                                    <span id="week2"></span>
                                </div>
                                <input type="hidden" id="week1_crew_activas">
                                <input type="hidden" id="week2_crew_activas">
                            </div>
                            <div class="row muestra_legenda" style="display: none;">
                                <div class="col-md-1">
                                   <div style="background-color: #FFC824;width: 16px;height: 12px;">
                                   </div>
                                </div>
                                <div class="col-md-3" style="margin-left: -20px;">
                                    <span class="bold">NO CHECK IN CON CAUSA LAAPS</span>
                                </div>
                                <div class="col-md-1">
                                   <div style="background-color: #ED7D31;width: 16px;height: 12px;">
                                   </div>
                                </div>
                                <div class="col-md-4" style="margin-left: -20px;">
                                    <span class="bold">NO CHECK IN CON CAUSA NO LAAPS</span>
                                </div>
                                <div class="col-md-1">
                                   <div style="background-color: #EE4436;width: 16px;height: 12px;">
                                   </div>
                                </div>
                                <div class="col-md-2" style="margin-left: -20px;">
                                    <span class="bold">NO CHECK IN</span>
                                </div>
                            </div>
                            <div class="row muestra_legenda" style="display: none;">
                                <div class="col-md-1">
                                    <div style="background-color: #55954F;width: 16px;height: 12px;">
                                    </div>
                                </div>
                                <div class="col-md-3" style="margin-left: -20px;">
                                    <span class="bold">CHECK IN</span>
                                </div>
                                <div class="col-md-1">
                                    <div style="background-color: #4777AF;width: 16px;height: 12px;">
                                    </div>
                                </div>
                                <div class="col-md-4" style="margin-left: -20px;">
                                    <span class="bold">NO LAAPS</span>
                                </div>
                                <div class="col-md-3"></div>
                            </div>
                        </div>
                        <div class="col-md-6">  
                            <div class="row title">
                                UTILIZATION DAILY
                            </div>
                             <div class="row">
                                <div id="grafico_UtilizationDaily" class="col-md-12" style="width: 100%; min-width: 320px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin: 30px 50px 0px 50px;">
                        <div class="col-md-6"> 
                            <div class="row title">
                                UTILIZATION ASP
                            </div>
                            <div class="row">
                                <div id="grafico_UtilizationAsp" class="col-md-12" style="width: 100%; min-width: 320px;">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6"> 
                            <div class="row title">
                                UTILIZATION CREW
                            </div>
                            <div class="row">
                                <div id="grafico_UtilizationCrew" class="col-md-12" style="width: 100%; min-width: 320px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>   
    </div> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="myModalLabel"><strong>{# {'monitorii.detail' | trans } #}<span class="modal_detalle_titulo"></span></strong></h2>
                    <div class="punto-grafica text-center"></div>
                </div>
                <div class="modal-body">
                    <div class="tabla-datos">

                    </div>                    
                    <div id="datatableModalDetalle" class="col-sm-12" {#style="overflow-x: scroll"#}>
                        <table id="tableModalDetalle" class="display nowrap" width="100%">
                            <tbody id="tbodyModalDetalle">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-claro" data-dismiss="modal">
                        {{'monitorii.close' | trans}}
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/grouped-categories.js') }}"></script>

{% endblock %}