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

{% 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: 100px;
            max-height: 200px;
            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;
       }            
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        /*[34, 29, 36, 29, 33, 22, 31, 22, 30, 34, 28, 42, 34, 39, 43, 28, 26, 19, 24, 42, 28, 43, 38, 32, 47]*/
        $(function () {
            $.isLoading({
                text:       "Loading"
            });
            
            $('#Filtros_fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    onClose: function( selectedDate ) {
                             $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                    }
            }); 

            $('#Filtros_fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
            });  

            var f = new Date();
            var mes = (f.getMonth() + 1);
            
            if (mes < 10) mes = '0'+mes;
            var fechaI= f.getFullYear() +'-'+mes + "-01";
            var fechaF= f.getFullYear() +'-'+mes + "-"+f.getDate();            

            $('#Filtros_fechaIni').val(fechaI);
            $('#Filtros_fechaFin').val(fechaF);

            getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val());

             $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                
                getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val());
            });

        });

        function getChart(inicio, fin, pais){
 
            $.getJSON('{{path('auditsasp_DashboardAudits',{'idproyectos':idproyectos})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais}, function (data) {
                var chart = data;

                //System Faults Found
                if (chart.grafico1.length>0){
                    var chart1 = getDataToObjectPie(chart.grafico1,Object.keys(chart.grafico1[0]));
                }
                
                //Deviations by ASP
                if (chart.grafico2.length>0){
                   var categoria2 = getDataToObject(chart.grafico2,Object.keys(chart.grafico2[0]),0,false); 
                   var chart2 = getDataToObjectBar(chart.grafico2,Object.keys(chart.grafico2[0]));
                }   
                
                //Issues
                if (chart.grafico3.length>0){
                    var categoria3 = getDataToObject(chart.grafico3,Object.keys(chart.grafico3[0]),0,false); 
                    var chart3 = getDataToObject(chart.grafico3,Object.keys(chart.grafico3[0]),1,true);
                }
                
                 //Audit Type
                if (chart.grafico4.length>0){                
                   var categoria4 = getDataToObject(chart.grafico4,Object.keys(chart.grafico4[0]),0,false); 
                   var chart4 = getDataToObjectBar2(chart.grafico4,Object.keys(chart.grafico4[0]));
                }    
                
                 //Audit Responsable
                if (chart.grafico5.length>0){                
                   var categoria5 = getDataToObject(chart.grafico5,Object.keys(chart.grafico5[0]),0,false); 
                   var chart5 = getDataToObjectCombinado(chart.grafico5,Object.keys(chart.grafico5[0]));
                }                 

                 //ASP Dashboard
                if (chart.grafico6.length>0){                
                    var categoria6 = getDataToObject(chart.grafico6,Object.keys(chart.grafico6[0]),0,false); 
                    var chart6 = getDataToObjectLinea(chart.grafico6,Object.keys(chart.grafico6[0]));
                }   
                
                 //Country Dashboard
                if (chart.grafico7.length>0){                
                    var categoria7 = getDataToObject(chart.grafico7,Object.keys(chart.grafico7[0]),0,false); 
                    var chart7 = getDataToObjectLinea(chart.grafico7,Object.keys(chart.grafico7[0]));
                }   
                
                 //Crew Dashboard
                if (chart.grafico8.length>0){                
                    var categoria8 = getDataToObject(chart.grafico8,Object.keys(chart.grafico8[0]),0,false); 
                    var chart8 = getDataToObjectLinea(chart.grafico8,Object.keys(chart.grafico8[0]));
                }                 
               
              if (chart.grafico1.length>0) createChartPie('chart1',chart1); else { $("#chart1").empty(); $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
              if (chart.grafico2.length>0) createChartBar('chart2',categoria2,chart2,180); else { $("#chart2").empty(); $("#chart2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
              if (chart.grafico3.length>0) createChart('chart3',categoria3,chart3,180); else { $("#chart3").empty(); $("#chart3").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
              if (chart.grafico4.length>0) createChartBar('chart4',categoria4,chart4,180); else { $("#chart4").empty(); $("#chart4").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}              
              if ($("#pais").val()!="")
                  if (chart.grafico5.length>0) createChartCombinado('chart5',categoria5,chart5,''); else { $("#chart5").empty(); $("#chart5").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}              
              else { $("#chart5").empty(); $("#chart5").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}              
              if (chart.grafico6.length>0) createChartLinea('chart6',categoria6,chart6); else { $("#chart6").empty(); $("#chart6").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
              if (chart.grafico7.length>0) createChartLinea('chart7',categoria7,chart7); else { $("#chart7").empty(); $("#chart7").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}              
              if (chart.grafico8.length>0) createChartLinea('chart8',categoria8,chart8); else { $("#chart8").empty(); $("#chart8").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}              
                $.isLoading("hide");
             });
        }
        
        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 getDataToObjectBar(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();              
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]]));
                data2.push(parseFloat(data[i][header[2]]));
                data3.push(parseFloat(data[i][header[3]]));                
            }

            arrayReturn.push({'name': header[1], 'data': data1,'dataLabels':{'enabled':true}});    
            arrayReturn.push({'name': header[2], 'data': data2,'dataLabels':{'enabled':true}});    
            arrayReturn.push({'name': header[3], 'data': data3,'dataLabels':{'enabled':true}});    

            return arrayReturn;
        }
        
        function getDataToObjectBar2(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();    
            var data4 = new Array();             
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]]));
                data2.push(parseFloat(data[i][header[2]]));
                data3.push(parseFloat(data[i][header[3]])); 
                data4.push(parseFloat(data[i][header[4]]));                  
            }

            arrayReturn.push({'name': header[1], 'data': data1,'dataLabels':{'enabled':true}});    
            arrayReturn.push({'name': header[2], 'data': data2,'dataLabels':{'enabled':true}}); 
            arrayReturn.push({'name': header[3], 'data': data3,'dataLabels':{'enabled':true}}) ;           
            arrayReturn.push({'name': header[4], 'data': data4,'dataLabels':{'enabled':true}}) ;   
            
            return arrayReturn;
        }        
        
        function getDataToObjectPie(data,header)
        {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){
                arrayReturn.push({'name': data[i][header[0]], 'y': parseInt(data[i][header[1]])})
            }
            return arrayReturn;
        }
        
        function getDataToObjectLinea(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            //var data2 = new Array();    
            //var data3 = new Array();              
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]]));
                //data2.push(parseFloat(data[i][header[2]]));
               // data3.push(parseFloat(data[i][header[3]]));                
            }

            arrayReturn.push({'name': header[1], 'data': data1,'dataLabels':{'enabled':true}});    
            //arrayReturn.push({'name': header[1], 'data': data1,'yAxis':1,'dataLabels':{'enabled':true}});
            //arrayReturn.push({'name': header[3], 'data': data3,'yAxis':1}) ;           

            return arrayReturn;
        }  
        
        function getDataToObjectCombinado(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();              
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]])); //Findings
                data2.push(parseFloat(data[i][header[2]])); //cleared
                data3.push(parseFloat(data[i][header[3]])); //%cleared               
            }

            arrayReturn.push({'name': header[1], 'data': data1,'type':'column','yAxis':1,'dataLabels':{'enabled':true}});    
            arrayReturn.push({'name': header[2], 'data': data2,'type':'column','yAxis':1,'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[3], 'data': data3,'type':'spline'}) ;           

            return arrayReturn;
        }        
        
        function createChartCombinado(render,categoria,data,title){
            var options = {
                chart: {
                    renderTo: render,
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: 180,
                    width: 500
                  },
                title: {
                    text: title
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels: {
                        style: {
                            fontSize: '9px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: [{
                    min: 0,
                    max: 110,
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                  },{
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }, {
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }],
                legend: {
                    reversed: true
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: data
            };

            return $('#' +render).highcharts(options);
        }           
        
        function createChart(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels:{

                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                        enabled: false
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                    series : {

                        dataLabels : {

                            enable : true,
                            format : '{y}'
                        },
                        events: {
                            click: function (event) {
                                //event.point.series[0].data = [[35]];
                            }
                        }
                    }
                },
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'buttom',
                    floating: true,
                    x: 0,
                    y: 10
                },
                credits: {
                    enabled: false
                },
                series: [ {
                    showInLegend: false,
                    name: 'KPI %',
                    data: data,
                    color: {
                        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                        stops: [
                            [0, '#398235'],
                            [0.5, '#8ab66b'],
                            [1, '#c9de96']
                        ]
                    },

                    tag : 1

                }]
            };

            return $('#' +render).highcharts(options);
        }
        
        function createChartBar(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels:{

                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: data
            };

            return $('#' +render).highcharts(options);
        }        
        
        function createChartPie(render,data){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'pie',
                    height: 200,
                    width: 500,                    
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: ''
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y}',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },               
                series: [{
                    data: data
                }]
           };

            return $('#' +render).highcharts(options);
        }
        
        function createChartLinea(render,categoria, data){
            var options = {
                chart: {
                    renderTo: render,
                    height: 180,
                    width: 500                    
                },
                xAxis: {
                   categories:  categoria
                },
                yAxis: [{
                    min: 0,
                    max: 2,
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                  },{
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }, {
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }],
                title: {
                    text: ''
                },
                 tooltip: {
                    shared: true
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: data
           };

            return $('#' +render).highcharts(options);
        }
    </script>

    <div class="container">
         <div class="row">
               <!--  <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitores.pais' | trans}}: </label>                 
                    <select class="form-control" id="pais">
                        <option value="">-- Select Cluster -- </option>
                        <option value="CAR&CA">CAR&CA</option> 
                        <option value="MEXICO">MEXICO</option>                        
                        <option value="SOUTH">SOUTH</option>  
                        <option value="BRAZIL">BRAZIL</option> 
                    </select>
                </div>     -->          
                 <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitores.pais' | trans}}: </label>                 
                    <select class="form-control" id="pais">
                        <option value="">-- Seleccione Pais -- </option>
                    {%for pais in paises%}
                        <option value="{{pais.valor}}">{{pais.nombre}}</option>
                    {%endfor%}                       
                    </select>
                </div>              
                <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                    <input type="text" class="form-control" id="Filtros_fechaIni" value="">
                </div>
                <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                    <input type="text" class="form-control" id="Filtros_fechaFin" value="">
                </div>
                <div class="col-lg-2" id="parametros" style="margin-top: 1%">
                   <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                </div>   
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>AUDITHORS DASHBOARD</h1>
                 </div>

        </div>                    
         
        <div class="col-lg-18" id="chart">
            <div class="row">
              <div class="col-lg-6">
                  <div class="panel panel-primary" >
                      <div class="panel-heading">System Faults Found</div>
                      <div class="panel-body fixed-panel" id="chart1">

                      </div>
                  </div>
              </div>
            
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Deviations by ASP</div>
                        <div class="panel-body fixed-panel" id="chart2">

                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Issues Found</div>
                        <div class="panel-body fixed-panel" id="chart3">

                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Audit Type</div>
                        <div class="panel-body fixed-panel" id="chart4">

                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Error By Responsible</div>
                        <div class="panel-body fixed-panel" id="chart5">

                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">ASP Dashboard</div>
                        <div class="panel-body fixed-panel" id="chart6">

                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Country Dashboard</div>
                        <div class="panel-body fixed-panel" id="chart7">

                        </div>
                    </div>
                </div>
            </div>              
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Crew Dashboard</div>
                        <div class="panel-body fixed-panel" id="chart8">

                        </div>
                    </div>
                </div>
                </div>
            </div>       
        </div>

    </div>

{% endblock %}