{% extends '::base.html.twig' %}
{% block menuTop %}

{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <style>
        @font-face {font-family: ericsson; src: url({{ asset('fonts/ericsson.ttf') }})}
        table {font-size: 12px}
        #menuTop {margin-top: 0px}
        .cell-danger{background-color: #da5c58}
        .cell-success{background-color: #5cb85c}
        .eri-font {font-family: ericsson}
    </style>
{% 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: 400px;
            max-height: 600px;

            overflow-y: scroll;
        }
        #parametros .panel-body .row{

            padding-left: 5px;
        }
        #chart .panel-body {
            padding: 0px;
        }
        
         .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
       }
        .btn-yellow {
            color: #fff;
            background-color: #000000;
            border-color: #ecea19;
        }


    </style>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        $(function () {   
            $("#chart").hide();
             $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                  //getReporte();
                 getChart();
            });   
            $("#clear").click(function(){ 
                $('#year').val("");
            });
        });
        /* GRAFICAS*/
        function getChart(){ 

            data = {};
            data['year'] = $("#year").val();
            $.getJSON('{{path('reporteverizon_getSummary')}}',data, function (data) {
                $("#chart").show();
                var summary = data.summary;
                var countryBreakDown = data.countryBreakDown;
                //var hoursAccumulated = data.hoursAccumulated;
                $("#table").empty();
                $("#muestraChartCountryBreakdowm").hide();
                if (summary.length>0){
                    $("#muestraChartCountryBreakdowm").show();
                    $("#table").append(createTable(summary,[],undefined,undefined,undefined));
                    var header = Object.keys(countryBreakDown[0]);
                    var dataCountry = new Array();
                    var categories = new Array();                
                    var data2 = new Array();
                    for(var i=0;i< countryBreakDown.length;i++){
                        dataCountry.push({
                            name: countryBreakDown[i][header[0]].toUpperCase(),
                            y: parseFloat(countryBreakDown[i][header[1]])                                
                        });
                        categories.push(countryBreakDown[i][header[0]].toUpperCase());
                    }
                }
                //para las graficas de monthtly history
                $("#muestraChartMonthlyHistory").hide();
                $("#muestraChartMonthlyHistory1").hide();
                var dataMonthlyHistory = new Array();
                var categoriesMonthlyHistory = new Array();
                var monthlyHistory = data.monthlyHistory;          
                if (monthlyHistory.data.length>0){
                    $("#muestraChartMonthlyHistory").show()
                    $("#muestraChartMonthlyHistory1").show();
                    var seriesMonthlyHistory = getDataToObjectSerieAll(monthlyHistory.data, Object.keys(monthlyHistory.data[0]));
                    categoriesMonthlyHistory = monthlyHistory.categories;
                    $.each(seriesMonthlyHistory, function(key, value) {
                        $.each(value, function(k, v) { 
                            dataMonthlyHistory.push({"name":v.name,"data":v.data});
                            
                        });
                    });
                }
                //para la grafica de Total Hours - Accumulated 
                $("#muestraChartTotalHoursAccumalated").hide();
                var dataTotalHoursAccumulate = new Array();
                var totalHoursAccumulate = data.totalHoursAccumulate; 
                //console.log('data consulta',data.totalHoursAccumulate);                              
                if (totalHoursAccumulate.categories.length>0){
                     $("#muestraChartTotalHoursAccumalated").show();
                    var seriesTotalHoursAccumulate = getDataToObjectSerieAll(totalHoursAccumulate.data, Object.keys(totalHoursAccumulate.data[0]));
                    var categoriesTotalHoursAccumulate = totalHoursAccumulate.categories;
                    var totalesTotalHoursAccumulate = new Array();
                    $.each(totalHoursAccumulate.totales, function(key, value) {
                        totalesTotalHoursAccumulate.push(parseFloat(value));
                    });
                    $.each(seriesTotalHoursAccumulate, function(key, value) {
                        $.each(value, function(k, v) { 
                            dataTotalHoursAccumulate.push({"type":'column',"name":v.name,"data":v.data});                        
                        });
                    });
                    dataTotalHoursAccumulate.push({
                        type: 'spline',
                        name: 'Target',
                        data: totalesTotalHoursAccumulate,//[4.00,6.00,13.00,6.00,11.00,233.00,11.00,5.00],//
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3],
                            fillColor: 'white'
                        }
                    });
                }      
                //para la grafica de Approval Required - Accumulated
                $("#muestraChartApprovalRequiredAccumulate").hide(); 
                var dataTotalApprovalHoursAccumulate = new Array();
                var totalApprovalHoursAccumulate = data.approvalHoursAccumulate;                               
                if (totalApprovalHoursAccumulate.categories.length>0){
                    $("#muestraChartApprovalRequiredAccumulate").show();
                    var seriesTotalApprovalHoursAccumulate = getDataToObjectSerieAll(totalApprovalHoursAccumulate.data, Object.keys(totalApprovalHoursAccumulate.data[0]));
                    var categoriesApprovalHoursAccumulate = totalApprovalHoursAccumulate.categories;
                    $.each(seriesTotalApprovalHoursAccumulate[0], function(k, v) {                        
                        dataTotalApprovalHoursAccumulate.push({"name":v.name,"data":v.data});
                    });                    
                }                   
                //para la grafica de Pre Approval Required - Accumulated    
                $("#muestraChartPreApprovalRequiredAccumulate").hide();             
                var dataTotalPreApprovalHoursAccumulate = new Array();
                var totalPreApprovalHoursAccumulate = data.preApprovalHoursAccumulate;
                //console.log('total',totalPreApprovalHoursAccumulate.categories.length);
                if (totalPreApprovalHoursAccumulate.categories.length>0){
                    $("#muestraChartPreApprovalRequiredAccumulate").show();
                    var seriesTotalPreApprovalHoursAccumulate = getDataToObjectSerieAll(totalPreApprovalHoursAccumulate.data, Object.keys(totalPreApprovalHoursAccumulate.data[0]));
                    var categoriesPreApprovalHoursAccumulate = totalPreApprovalHoursAccumulate.categories;                    
                    $.each(seriesTotalPreApprovalHoursAccumulate[0], function(k, v) { 
                        dataTotalPreApprovalHoursAccumulate.push({"name":v.name,"data":v.data});
                    });               
                }
                //para las graficas de monthtly history
                $("#muestraChartTotalHoursMonthly").hide();
                var dataTotalHoursMonthly = new Array();
                var categoriesTotalHoursMonthly = new Array();
                var totalHoursMonthly = data.totalHoursMonthly;          
                if (totalHoursMonthly.data.length>0){
                    $("#muestraChartTotalHoursMonthly").show();
                    var seriesTotalHoursMonthly = getDataToObjectSerieAll(totalHoursMonthly.data, Object.keys(totalHoursMonthly.data[0]));
                    categoriesTotalHoursMonthly = totalHoursMonthly.categories;
                    $.each(seriesTotalHoursMonthly, function(key, value) {
                        $.each(value, function(k, v) { 
                            dataTotalHoursMonthly.push({"name":v.name,"data":v.data});
                            
                        });
                    });
                }
                
                //para la grafica Approval Required - Monthly 
                $("#muestraChartApprovalMonthly").hide();
                var dataApprovalMonthly = new Array();
                var categoriesApprovalMonthly = new Array();
                var approvalMonthly = data.approvalMonthly;          
                if (approvalMonthly.data.length>0){
                    $("#muestraChartApprovalMonthly").show()
                    var seriesApprovalMonthly = getDataToObjectSerieAll(approvalMonthly.data, Object.keys(approvalMonthly.data[0]));
                    categoriesApprovalMonthly = approvalMonthly.categories;
                    $.each(seriesApprovalMonthly, function(key, value) {
                        $.each(value, function(k, v) { 
                            dataApprovalMonthly.push({"name":v.name,"data":v.data});
                            
                        });
                    });
                }
                //para la grafica Pre-Approval Required - Monthly 
                $("#muestraChartPreApprovalMonthly").hide();
                var dataPreApprovalMonthly = new Array();
                var categoriesPreApprovalMonthly = new Array();
                var preAapprovalMonthly = data.preApprovalMonthly;          
                if (preAapprovalMonthly.data.length>0){
                    $("#muestraChartPreApprovalMonthly").show()
                    var seriesPreApprovalMonthly = getDataToObjectSerieAll(preAapprovalMonthly.data, Object.keys(preAapprovalMonthly.data[0]));
                    categoriesPreApprovalMonthly = preAapprovalMonthly.categories;
                    $.each(seriesPreApprovalMonthly, function(key, value) {
                        $.each(value, function(k, v) { 
                            dataPreApprovalMonthly.push({"name":v.name,"data":v.data});
                            
                        });
                    });
                }
                /* GRAFICAS*/
                //GRAFICA PIE COUNTRY BREAKDOWN
                new Highcharts.Chart({
                    chart: {
                        renderTo: 'chartCountryBreakdowm',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: 'COUNTRY BREAKDOWN'
                    },
                    colors: [
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',
                        '#0A77D5',
                        '#659E52',
                        '#B847EC'
                    ],
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%'
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                connectorColor: 'silver'
                            }
                        }
                    },
                    series: [{
                      name: 'Share',
                        colorByPoint: true,
                        data: dataCountry
                    }]
                });
                //GRAFICA Monthly History 
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartMonthlyHistory'
                    },
                    title: {
                        text: 'Monthly History'
                    },
                    subtitle: {
                        text: ''
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesMonthlyHistory,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Count'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        }
                    },
                    series: dataMonthlyHistory
                });
                //GRAFICA Monthly History 1 en vez de varias barra una barra divida por colores
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartMonthlyHistory1'
                    },
                    title: {
                        text: 'Monthly History'
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesMonthlyHistory,
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Count'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y + '<br/>' +
                                'Total: ' + this.point.stackTotal;
                        }
                    },

                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },
                    series: dataMonthlyHistory
                });
                //GRAFICA Total Hours - Accumulated
                new Highcharts.Chart({
                    chart: {
                        renderTo : 'chartTotalHoursAccumalated'
                    },
                    title: {
                        text: 'Total Hours - Accumulated',
                    },
                    xAxis: {
                        categories: categoriesTotalHoursAccumulate,
                        labels: {
                            style: {
                                fontSize: '12px'
                            }
                        }
                    },
                    colors: [
                        '#8FC1D3', 
                        '#BCD395',
                    ],
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Count',
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        },
                        /*plotLines:[{
                            value:7000,
                            color :'#E46C0A',
                            dashStyle:'ShortDot',
                            width:5,
                            zIndex:4,
                            label:{text:'Total Yearly Target (7000)'}
                        }]*/
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },
                    series: dataTotalHoursAccumulate
                });
                //GRAFICA Approval Required - Accumulated
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartApprovalRequiredAccumulate'
                    },
                    title: {
                        text: 'Approval Required - Accumulated'
                    },
                    subtitle: {
                        text: ''
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesApprovalHoursAccumulate,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        max: 5000,
                        title: {
                            text: 'Count'
                        },
                       /* plotLines:[{
                            value:2200,
                            color :'#E46C0A',
                            dashStyle:'ShortDot',
                            width:5,
                            zIndex:4,
                            label:{text:'Approval Required Yearly Target (2200)'}
                        }]*/
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        }
                    },
                    series: dataTotalApprovalHoursAccumulate
                });
                //GRAFICA Pre-Approval Required - Accumulated
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartPreApprovalRequiredAccumulate'
                    },
                    title: {
                        text: 'Pre-Approved Required - Accumulated',
                    },
                    subtitle: {
                        text: ''
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesPreApprovalHoursAccumulate,
                        crosshair: true
                    },
                   yAxis: {
                        min: 0,
                        max: 5000,                        
                        title: {
                            text: 'Count'
                        },
                   /*     plotLines:[{
                            value:4800,
                            color :'#E46C0A',
                            dashStyle:'ShortDot',
                            width:5,
                            zIndex:4,
                            label:{text:'Pre Approval Required Yearly Target (4800)'}
                        }]*/
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        }
                    },
                    series: dataTotalPreApprovalHoursAccumulate
                });
                //GRAFICA Total Hours - Monthly una barra divida por colores
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartTotalHoursMonthly'
                    },
                    title: {
                        text: 'Total Hours - Monthly'
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesTotalHoursMonthly,
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Count'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y + '<br/>' +
                                'Total: ' + this.point.stackTotal;
                        }
                    },

                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },
                    series: dataTotalHoursMonthly
                });
                //GRAFICA Approval Requiere - Monthly 
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartApprovalMonthly'
                    },
                    title: {
                        text: 'Approval Required - Monthly'
                    },
                    subtitle: {
                        text: ''
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesApprovalMonthly,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        max: 800,
                        title: {
                            text: 'Count'
                        },
                       /* plotLines:[{
                            value:183,
                            color :'#E46C0A',
                            dashStyle:'ShortDot',
                            width:5,
                            zIndex:4,
                            label:{text:'Approval Required Monthly Target (183)'}
                        }]*/
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        }
                    },
                    series: dataApprovalMonthly
                });
                //GRAFICA Pre-Approved Requiere - Monthly 
                new Highcharts.Chart({
                    chart: {
                        type: 'column',
                        renderTo : 'chartPreApprovalMonthly'
                    },
                    title: {
                        text: 'Pre-Approved Required - Monthly Actuals'
                    },
                    subtitle: {
                        text: ''
                    },
                    colors: [
                        '#0A77D5',
                        '#659E52',
                        '#70568D', 
                        '#4095AD',
                        '#CF918F', 
                        '#BCD395', 
                        '#A79FB3',
                        '#8FC1D3',
                        '#2E3E52',
                        '#A74442',
                        '#87A34C',                        
                        '#B847EC'
                    ],
                    xAxis: {
                        categories: categoriesPreApprovalMonthly,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        max: 800,
                        title: {
                            text: 'Count'
                        },
                      /*  plotLines:[{
                            value:400,
                            color :'#E46C0A',
                            dashStyle:'ShortDot',
                            width:5,
                            zIndex:4,
                            label:{text:'Pre-Approved Required Monthly Target (400)'}
                        }]*/
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        }
                    },
                    series: dataPreApprovalMonthly
                });              
                $.isLoading("hide");
        });
        }
        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 getDataToObject(data,header ,key,int)
        {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){

                var valor = data[i][header[key]];

                if(int){

                    valor = parseInt(data[i][header[key]]);
                }

                arrayReturn.push(valor);
            }

            return arrayReturn;
        }

        function createTable(monitor,hide,check,total,nombreColTotal){
            
            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive" style="font-size: 8pt"> <thead>' +

                    '<tr class="btn-info">';

            for (var j = 0; j < header.length; j++) {

                if( hide.indexOf(header[j]) === -1) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

                if(check && j ==0){
                    table += "<th class='text-center'>" + " " + "</th>"
                }


            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                table += "<tr " + "id=" + monitor[i][header[0]] + ">";


                for (var j = 0; j < header.length; j++) {
                    if( hide.indexOf(header[j]) === -1) {
                        table += "<td>" + monitor[i][header[j]] + "</td>";
                    }

                    if(check && j== 0){

                        table += "<td>"+ "<input type='checkbox' class='checkup' user='" + monitor[i][header[1]] + "'ticket='" + monitor[i][header[0]] + "'/>"+"</td>";
                    }
                }
                table += "</tr>";

                if(typeof total !== "undefined") {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal +'</td>';

                        for(var x=0; x<headerTotal.length;x++){
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += "</table>";

            return table;
            
        }


    </script>
     <div class="container-fluid">
        <div class="row">
        <div class="row">
            <div class="col-lg-12">
                <img id="logo" class="pull-right" src="{{ asset('images/verizon.jpg') }}"  width="500" height="80" >

            </div>
        </div>

            <div class="col-lg-6 top-uno" id="leadTime">


            </div>

        </div>
        <div class="row">
            <div class="col-lg-2">
                    <label>{{'monitoriii.year' | trans}}:</label>  
                    <select class="form-control " id="year" name="year">
                        {%for year in years %}
                            <option value="{{year.year}}">{{year.year}}</option>
                        {%endfor%}
                    </select>
            </div>         
            <div class="col-lg-6" id="parametros"><br>
               <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>&nbsp&nbsp
               <!--<button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button><br><br>-->
            </div>
        </div>
        <br>
        <div class="col-lg-12" id="chart">
            <div class="row" id="muestraChartCountryBreakdowm">
                <div class="col-lg-12" id="muestraChartCountryBreakdowm">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">COUNTRY BREAKDOWN</div>
                        <div class="panel-body fixed-panel" id="chartCountryBreakdowm">

                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="muestraChartMonthlyHistory">
                <div class="col-lg-12">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">MONTHLY HISTORY</div>
                        <div class="panel-body fixed-panel" id="chartMonthlyHistory">

                        </div>
                    </div>
                </div>
            </div> 
            <div class="row" id="muestraChartMonthlyHistory1">
                <div class="col-lg-12">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">MONTHLY HISTORY</div>
                        <div class="panel-body fixed-panel" id="chartMonthlyHistory1">

                        </div>
                    </div>
                </div>
            </div> 
            <div class="row" id="muestraChartTotalHoursAccumalated">
                <div class="col-lg-12">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">TOTAL HOURS ACCUMULATED</div>
                        <div class="panel-body fixed-panel" id="chartTotalHoursAccumalated">

                        </div>
                    </div>

                </div>

                <div class="col-lg-12" id="muestraChartApprovalRequiredAccumulate">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">APPROVAL REQUIRED - ACCUMULATED</div>
                        <div class="panel-body fixed-panel" id="chartApprovalRequiredAccumulate">

                        </div>
                    </div>

                </div>
            </div> <!-- end row2-->
            <div class="row" id="muestraChartPreApprovalRequiredAccumulate">
                <div class="col-lg-12">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">PRE-APPROVED - ACCUMULATED</div>
                        <div class="panel-body fixed-panel" id="chartPreApprovalRequiredAccumulate">

                        </div>
                    </div>

                </div>

                <div class="col-lg-12" id="muestraChartTotalHoursMonthly">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">TOTAL HOURS - MONTHLY</div>
                        <div class="panel-body fixed-panel" id="chartTotalHoursMonthly">

                        </div>
                    </div>

                </div>
                <div class="col-lg-12" id="muestraChartApprovalMonthly">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">APPROVAL REQUIRED - MONTHLY</div>
                        <div class="panel-body fixed-panel" id="chartApprovalMonthly">

                        </div>
                    </div>

                </div>
                <div class="col-lg-12" id="muestraChartPreApprovalMonthly">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">PRE-APPROVED REQUIRED - MONTHLY ACTUALS</div>
                        <div class="panel-body fixed-panel" id="chartPreApprovalMonthly">

                        </div>
                    </div>

                </div>
                <div class="col-lg-12">
                    <div class="col-lg-offset-9"  style="margin-top: 1%">
                        <div class="btn-group pull-right">
                            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#" onclick="$('#table').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>

                            </ul>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">SUMMARY</div>
                        <div class="panel-body fixed-panel" id="table">


                        </div>
                    </div>

                </div>
            </div> <!-- end row3-->
        </div>

    </div> <!-- end container-->
{% endblock %}