{% extends '::base.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;
        }
        .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;
		}

        /* bootstrap hack: fix content width inside hidden tabs */
        .tab-content > .tab-pane,
        .pill-content > .pill-pane {
            display: block;     /* undo display:none          */
            height: 0;          /* height:0 is also invisible */ 
            overflow-y: hidden; /* no-overflow                */
        }
        .tab-content > .active,
        .pill-content > .active {
            height: auto;       /* let the content decide it  */
        } /* bootstrap hack end */

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

        .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;
        }

        .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;}

        /* bootstrap hack: fix content width inside hidden tabs */
        .tab-content > .tab-pane,
        .pill-content > .pill-pane {
            display: block;     /* undo display:none          */
            height: 0;          /* height:0 is also invisible */ 
            overflow-y: hidden; /* no-overflow                */
        }
        .tab-content > .active,
        .pill-content > .active {
            height: auto;       /* let the content decide it  */
        } /* bootstrap hack end */

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

        .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;
        }  

    </style>
    <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>
		/*[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);

			$("#cluster").change(on_cluster_change);
			$("#pais").change(on_pais_change);
                        $("#cliente").change(on_cliente_change);
                        $("#asp").change(on_asp_change);
                     
//Habilitar o Deshabilitar filtros
			// En cada pestana se definen los filtros a utilizarse de forma automatica por el ID del Filtro: ver <li> de pestanas para ejemplos
			$("#myTabs li").click(function() {
                                var cu=$("#cluster").val();
//                                alert(cu);
			/*	on_tab_selected(this);
                                if(this.id=='_tabAuditRatio'){
                                        $('#div_region').hide();
                                        $('#div_cliente').hide();
                                        $('#div_proyecto').hide();
                                        $('#div_asp').hide();
                                }else if(this.id=='tabsFirstTimeRight' && cu=='MEXICO' )
                                { 
                                        $('#div_region').hide();
                                        $('#div_cliente').hide();
                                        $('#div_proyecto').hide();
                                        $('#div_asp').hide();
                                }else if((this.id!='tabsFirstTimeRight' && cu=='MEXICO')){
                                        $('#div_region').show();
                                        $('#div_cliente').show();
                                        $('#div_proyecto').show();  
                                        $('#div_asp').show();
                                }

                                if(this.id=='tabs3')
                                    $('#paisTodos').hide();
                                else
                                    $('#paisTodos').show();
                                */
			});

			//getChart();

			$("#generar").click(function () {
				$.isLoading({
					text: "Loading"
				});

				getChart();
			});

		});

		function on_tab_selected(tab_obj) {
			var filtro = ($(tab_obj).data('filtro'));
                        
			$('.filtros .filtro').hide();
			if(filtro != null) {
				var fs = filtro.split(" ");
				for(i in fs) {
					if(fs[i] != '') {
						$('#'+fs[i]).show();
					}
				}
			}

		}
                
		function on_cluster_change() {
			
                        llenarCombo_pais();
                }
		function on_year_change() {
			//llenarCombo_proyecto();
		}
		function on_pais_change() {
			llenarCombo_cliente();
                        llenarCombo_asp();  
		}
		function on_region_change() {
                       // llenarCombo_estado();
		}                
		function on_cliente_change() {
			llenarCombo_proyecto();
		}
		function on_proyecto_change() {
			// nada definido todavia
		}

		function on_asp_change() {
			llenarCombo_crew();
		}
		function on_crew_change() {
			// nada definido todavia
		}
		function llenarCombo_pais() {
			$("#pais option").remove();
			$("#pais").append('<option value="TODOS">-- All --</option>');

			if ($("#cluster").val() != "TODOS") {
				var data = {};
				data['cluster'] = $("#cluster").val();
				$.getJSON('{{path('aspissuereport_llenarPais')}}', data, function (data) {
					var regions = data.region;
					$("#pais option").remove();
					$("#pais").append('<option value="TODOS">-- All --</option>');

					for (var i = 0; i < regions.length; i++) {
						$("#pais").append('<option value="' + regions[i]['valor'] + '">' + regions[i]['nombre'] + '</option>');
					}

					$.isLoading("hide");

				});

			}
			on_pais_change();
		}
		function llenarCombo_cliente() {
			$("#cliente option").remove();
			$("#cliente").append('<option value="TODOS">-- All --</option>');

			if ($("#pais").val() != "TODOS") {
				var data = {};
				data['pais'] = $("#pais").val();
				data['cu'] = $("#cluster").val();
                data['inicio'] = $("#Filtros_fechaIni").val();
				data['fin'] = $("#Filtros_fechaFin").val();
				$.getJSON('{{path('aspissuereport_llenarCliente')}}', data, function (data) {
					$("#cliente option").remove();
					$("#cliente").append('<option value="TODOS">-- All --</option>');

					for (var i = 0; i < data.length; i++) {
						var opt = document.createElement('option');
						opt.value = data[i]['cliente'];
						opt.innerHTML = data[i]['cliente'];
						$("#cliente").append(opt);
					}

					$.isLoading("hide");

				});
			}
			// on_cliente_change();
		}
		function llenarCombo_proyecto() {
			$("#proyecto option").remove();
			$("#proyecto").append('<option value="TODOS">-- All --</option>');


				var data = {};
				data['pais'] = $("#pais").val();
				data['cu'] = $("#cluster").val();
                data['inicio'] = $("#Filtros_fechaIni").val();
				data['fin'] = $("#Filtros_fechaFin").val();
                data['cliente'] = $("#cliente").val();
				$.getJSON('{{path('aspissuereport_llenarProyecto')}}', data, function (data) {
					$("#proyecto option").remove();
					$("#proyecto").append('<option value="TODOS">-- All --</option>');

					for (var i = 0; i < data.length; i++) {
						var opt = document.createElement('option');
						opt.value = data[i]['item'];
						opt.innerHTML = data[i]['item'];
						$("#proyecto").append(opt);
					}

					$.isLoading("hide");

				});

			//on_proyecto_change();
		}
         
		function llenarCombo_asp() {
			$("#asp option").remove();
			$("#asp").append('<option value="TODOS">-- All --</option>');


				var data = {};
				data['pais'] = $("#pais").val();
				data['cu'] = $("#cluster").val();
                data['inicio'] = $("#Filtros_fechaIni").val();
				data['fin'] = $("#Filtros_fechaFin").val();
				$.getJSON('{{path('aspissuereport_llenarASPxPais')}}', data, function (data) {
					$("#asp option").remove();
					$("#asp").append('<option value="TODOS">-- All --</option>');

					for (var i = 0; i < data.length; i++) {
						var opt = document.createElement('option');
						opt.value = data[i]['asp'];
						opt.innerHTML = data[i]['asp'];
						$("#asp").append(opt);
					}

					$.isLoading("hide");

				});

			on_asp_change();
		}
                
		function llenarCombo_crew() {
			$("#crew option").remove();
			$("#crew").append('<option value="TODOS">-- All --</option>');


                                var data = {};
				data['pais'] = $("#pais").val();
				data['cu'] = $("#cluster").val();
                data['inicio'] = $("#Filtros_fechaIni").val();
				data['fin'] = $("#Filtros_fechaFin").val();                              
                data['asp'] = $("#asp").val();   
				$.getJSON('{{path('aspissuereport_llenarCrew')}}', data, function (data) {
					$("#crew option").remove();
					$("#crew").append('<option value="TODOS">-- All --</option>');

					for (var i = 0; i < data.length; i++) {
						var opt = document.createElement('option');
						opt.value = data[i]['item'];
						opt.innerHTML = data[i]['item'];
						$("#crew").append(opt);
					}

					$.isLoading("hide");

				});

			on_crew_change();
		}
                
                
		function getChart(){
		
			var inicio = $('#Filtros_fechaIni').val();
			var fin = $('#Filtros_fechaFin').val();
			var pais = $('#pais').val();
			var cu = $('#cluster').val();
			var cliente = $('#cliente').val();
			var proyecto = $('#proyecto').val();
            var asp = $('#asp').val();
            var crew = $('#crew').val();

			var parametros = {
                'FechaInicio': inicio,
                'FechaFin': fin,
                'pais': pais, 
                'cu': cu,
                'cliente': cliente,
                'proyecto': proyecto,
                'crew': crew,
                'asp': asp
              };

			$.getJSON('{{path('aspissuereport_DashboardAudits',{'idproyectos':idproyectos})}}', parametros, function (data) {
				var chart = data;

				//Grafico 1
				if (chart.grafico1.length > 0) {
					var categoria1 = getDataToObject(chart.grafico1, Object.keys(chart.grafico1[0]), 0, false);
					var chart1 = getDataToObjectBar(chart.grafico1, Object.keys(chart.grafico1[0]));
				}
    
				//Grafico 2
				if (chart.grafico2.length > 0) {
					var categoria2 = getDataToObject(chart.grafico2, Object.keys(chart.grafico2[0]), 0, false);
					var chart2 = getDataToObjectLinea(chart.grafico2, Object.keys(chart.grafico2[0]));
				} 

				//////////////////////////
				// CREACION DE GRAFICOS //
				//////////////////////////
				// grafica1
				if (chart.grafico1.length > 0) {
 					createChartBar('chart1', categoria1, chart1, null,'Idle Time',inicio, fin, pais, cu, cliente, proyecto, crew, asp, '{{path('aspissuereport_etalle_tabla1')}}', chart.grafico1);
				}
				else {
					$("#chart1").empty();
					$("#chart1").append('<div class="alert alert-warning" role="alert">NO DATA FOUND</div>');
				}
				// tabla1
				if (chart.tabla1.length > 0) {
					$("#tabla1").empty();
					$("#tabla1").append(createTable(chart.tabla1,"tabla1"));
				}
				else {
					$("#tabla1").empty();
					$("#tabla1").append('<div class="alert alert-warning" role="alert">NO DATA FOUND</div>');
				}
    
				// grafica2
				if (chart.grafico2.length > 0) {
					createChartLinea('chart2', categoria2, chart2, 'Idle Time Category', null, null, null, null, inicio, fin, pais, cu, cliente, proyecto, crew, asp, '{{path('aspissuereport_etalle_tabla2')}}', chart.grafico2);
				}
				else {
					$("#chart2").empty();
					$("#chart2").append('<div class="alert alert-warning" role="alert">NO DATA FOUND</div>');
				}
				// tabla2
				if (chart.tabla2.length > 0) {
					$("#tabla2").empty();
					$("#tabla2").append(createTable(chart.tabla2,"tabla2"));
				}
				else {
					$("#tabla2").empty();
					$("#tabla2").append('<div class="alert alert-warning" role="alert">NO DATA FOUND</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]];
            /*    valor = parseFloat(data[i][header[key]]);

				if (int) {
					valor = parseFloat(data[i][header[key]]);
				} */

				arrayReturn.push(valor);
			}

			return arrayReturn;
		}


		function getDataToObjectSerie(data, header, key, int) {
			var dataArray = new Array();
			for (var i = 0; i < data.length; i++) {

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

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

				dataArray.push(valor);
			}

			return {'name': header[0], 'data': dataArray};
		}

		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]]));
   // 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 getDataToObjectBar2(data, header, cu) {
			var arrayReturn = new Array();
			var data1 = new Array();
			var data2 = new Array();
			var data3 = new Array();
			var data4 = new Array();
			var data5 = new Array();
			var data6 = 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]]));
				if (cu == "TODOS") {
					data5.push(parseFloat(data[i][header[5]]));
					data6.push(parseFloat(data[i][header[6]]));
				}*/
			}

			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}});
			if (cu == "TODOS") {
				arrayReturn.push({'name': header[5], 'data': data5, 'dataLabels': {'enabled': true}});
				arrayReturn.push({'name': header[6], 'data': data6, '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 getDataToObjectLinea2(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,'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 getDataToObjectCombinado_generico(data, series) {
			var arrayReturn = new Array();

			// inserta serie a serie
			for (var x in series) {
				var S = series[x];
				var D = new Array();
				for (var i = 0; i < data.length; i++) {
					D.push(parseFloat(data[i][S.name]));
				}

				//{'name': S.name, 'data': D, 'type': S.type, 'yAxis': S.yAxis, 'dataLabels': {'enabled': S.dataLabels}}

				S.data = D;
				arrayReturn.push(S);
			}

			return arrayReturn;
		}

		function createChartCombinado(render, categoria, data, title, max_Y, targetsArray) {
			var options = {
				chart: {
					renderTo: render,
					spacingBottom: 5,
					spacingTop: 10,
					//spacingLeft: 1,
					//spacingRight: 1,
					height: 300
				},
				title: {
					text: title
				},
				xAxis: {
					categories: categoria,
					title: {
						text: null
					},
					labels: {
						style: {
							fontSize: '9px',
							fontFamily: 'Verdana, sans-serif'
						}
					}
				},
				yAxis: [{
						min: 0,
						//max: 100,
						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
			};
			
			if(max_Y != null) {
				options.yAxis[0].max = max_Y;
			}

			// colores comunes #f7e81d amarillo, #7cf23c Verde Manzana, #2e8201 Verde Grama
			if(targetsArray != null) {
				for(var i in targetsArray) {
					var target_line = targetsArray[i];
					options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
								value: target_line[0],
								color: target_line[2]==null?'#7cf23c':target_line[2],
								dashStyle: 'ShortDot',
								width: 2,
								zIndex: 4,
								label: {
									verticalAlign: 'bottom',
									textAlign: 'right',
									y: 0,
									style: {
										fontSize: '8px'
									},
									text: target_line[1],
								}
							};
				}
			}
				
			$('#' + render).highcharts(options);
			$('#' + render + ' .highcharts-data-labels text').each(
					function (index) {
						if ($(this).text() == '0') {
							$(this).hide();
						}
					}
			);
		}

		function createChart(render, categoria, data, wd, title, inicio, fin, pais, cu, rawData) {
			var options = {
				chart: {
					renderTo: render,
					type: 'bar',
					spacingBottom: 5,
					spacingTop: 10,
					spacingLeft: 1,
					spacingRight: 1,
					height: wd
				},
				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}'
						}
					}
				},
				legend: {
					layout: 'horizontal',
					align: 'center',
					verticalAlign: 'buttom',
					floating: true,
					x: 0,
					y: 10
				},
				credits: {
					enabled: false
				},
				series: [{
						showInLegend: false,
						name: data['name'],
						data: data['data'],
						color: {
							linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
							stops: [
								[0, '#398235'],
								[0.5, '#8ab66b'],
								[1, '#c9de96']
							]
						},

						tag: 1

					}]
			};

			// OPCIONAL: El path para la tabla detallada
			if (path != null) {
				var tmp_datalabel = options['plotOptions']['series']['dataLabels'];
				options['plotOptions']['series'] = {
					cursor: 'pointer',
					point: {
								events:
										{
											click: function (e)
											{
										var parametrosUrl = {
											'inicio': inicio,
											'fin': fin,
											'pais': pais,
											'cu': cu,
											'selected_item': categoria[this.x],
											'selected_serie': this.series.name
										};

										if (rawData != null)
										{
											parametrosUrl['row'] = rawData[this.x];
										}

										var prefix = (title == null || title == '') ? '' : title + ' - ';

										generateModal(path, parametrosUrl, true, prefix, categoria[this.x]); //, this.series.name+'='+ this.y);
											}
										}
							}
						};
				options['plotOptions']['series']['dataLabels'] = tmp_datalabel;
			}

			return $('#' + render).highcharts(options);
		}

		function createChartDetalle(render, categoria, data, wd, title, inicio, fin, pais, cu, path, rawData) {
			var options = {
				chart: {
					renderTo: render,
					type: 'bar',
					spacingBottom: 5,
					spacingTop: 10,
					spacingLeft: 1,
					spacingRight: 1,
					height: wd
				},
				title: {
					text: title
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: categoria,
					title: {
						text: null
					},
					labels: {

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

						overflow: 'justify',
						formatter: function () {
							return this.value;
						}
					}
				},
				tooltip: {
					enabled: false
				},
				legend: {
					layout: 'horizontal',
					align: 'center',
					verticalAlign: 'buttom',
					floating: true,
					x: 0,
					y: 10
				},
				credits: {
					enabled: false
				},
				series:
						[ {
								showInLegend: false,
								name: data['name'],
								data: data['data'],
								color:
										{
											linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
											stops: [
												[0, '#398235'],
												[0.5, '#8ab66b'],
												[1, '#c9de96']
											]
										},
								tag: 1
							}
						]
			};

			if (path != null) {
				options['plotOptions'] = {
					series: {
						cursor: 'pointer',
						borderWidth: 0,
						dataLabels: {
							enabled: true
						},
						point: {
							events: {
								click: function (e) {
									var parametrosUrl = {
										'inicio': inicio,
										'fin': fin,
										'pais': pais,
										'issue': categoria[this.x],
										'cu': cu,
										'selected_item': categoria[this.x],
										'selected_serie': this.series.name										
									};

									console.log(this.series.name);

									if (rawData != null) {
										parametrosUrl['row'] = rawData[this.x];
									}

									var prefix = (title == null || title == '') ? '' : title + ' - ';

									generateModal(path, parametrosUrl, true, prefix, categoria[this.x]); //, this.series.name+'='+ this.y);
								}
							}
						}
					}
				};
			}

			return $('#' + render).highcharts(options);
		}

		function createChartBar(render, categoria, data, wd, title, inicio, fin, pais, cu, cliente, proyecto, crew, asp, path, rawData) {
			var options = {
					chart: {
						renderTo: render,
						type: 'column',
						spacingBottom: 5,
						spacingTop: 10,
						spacingLeft: 1,
						spacingRight: 1,
						height: 400
					},
					title: {
						text: title
					},
					xAxis: {
						categories: categoria,
						title: {
							text: null
						},
						labels: {
							rotation: -30,
							style: {
								fontSize: '8px'
							}
						},
					},
					yAxis: {
						min: 0,
						title: {
							text: '',
							align: 'high'
						},
						labels: {
							overflow: 'justify',
							formatter: function () {
								return this.value;
							}
						}
					},
					legend: {
						reversed: true
					},
					colors: [
						'#0082b6', '#5cb85c', '#d9534f', '#009045', '#f4c6ea', '#17c5bc'
					],
					series: data
				};

			// OPCIONAL: El path para la tabla detallada
			if (path != null) {
				options['plotOptions'] = {
					series: {
						cursor: 'pointer',
						borderWidth: 0,
						dataLabels: {
							enabled: true
						},
						point: {
							events: {
								click: function (e) {
									var parametrosUrl = {
										'inicio': inicio,
										'fin': fin,
										'pais': pais,
										'cu': cu,
										'selected_item': categoria[this.x],
										'selected_serie': this.series.name,
										'cliente': cliente,
										'asp': asp,
										'proyecto': proyecto,
										'crew': crew
									};

									if (rawData != null) {
										parametrosUrl['row'] = rawData[this.x];
									}

									var prefix = (title == null || title == '') ? '' : title + ' - ';

									generateModal(path, parametrosUrl, true, prefix, categoria[this.x],this.series.name+'='+ this.y);
								}
							}
						}
					}
				};
			}

			$('#' + render).highcharts(options);
			$('#' + render + ' .highcharts-data-labels text').each(
				function (index) {
					if ($(this).text() == '0') {
						$(this).hide();
					}
				}
			);
		}

		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 _parse(str, arguments) {
			var args = [].slice.call(arguments, 1);
			var i = 0;

			return str.replace(/%s/g, function () {
				return args[i++];
			});
		}

		function createChartLinea(render, categoria, data, title, w, target_line, target_line2, target_line3, inicio, fin, pais, cu, cliente, proyecto, crew, asp, path, rawData) {
			var options = {
				chart: {
					height: 250,
					marginBottom: 100
							//, width: 1200 // no definir el ancho para que sea automatico
				},
				xAxis: {
					categories: categoria,
					labels: {
						rotation: -30,
						style: {
							fontSize: '8px'
						}
					},

					overflow: 'justify'
				},
				yAxis:
						[ {
								min: 0,
								max: w,
								title: {text: ''},
								plotLines:
								[
									{
										value: 0,
										width: 1,
										color: '#808080'
									}
								]
							}
							, {
								title: {text: ''},
								min: 0,
								opposite: true
							}
							, {
								title: {text: ''},
								min: 0,
								opposite: true
							}
						]
				,
				title: {text: title},
				tooltip: {shared: true},
				colors: ['#a1c517', '#0082b6', '#b88fef', '#009045', '#db004f'],
				series: data
			};

			if (target_line != null) {
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
							value: target_line[0],
							color: '#2e8201', //Verde Grama
							dashStyle: 'ShortDot',
							width: 2,
							zIndex: 4,
							label: {
								verticalAlign: 'bottom',
								textAlign: 'right',
								y: 0,
								style: {
									fontSize: '8px'
								},
								text: target_line[1],
							}
						};
			}

			if (target_line2 != null) {
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
							value: target_line2[0],
							color: '#7cf23c', //Verde Manzana
							dashStyle: 'ShortDot',
							width: 2,
							zIndex: 4,
							label: {
								verticalAlign: 'bottom',
								textAlign: 'right',
								y: 0,
								style: {
									fontSize: '8px'
								},
								text: target_line2[1],
							}
						};
			}

			if (target_line3 != null) {
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
							value: target_line3[0],
							color: '#f7e81d', //Amarillo
							dashStyle: 'ShortDot',
							width: 2,
							zIndex: 4,
							label: {
								verticalAlign: 'bottom',
								textAlign: 'right',
								y: 0,
								style: {
									fontSize: '8px'
								},
								text: target_line3[1],
							}
						};
			}

			// OPCIONAL: El path para la tabla detallada
			if (path != null) {
				options['plotOptions'] = {
					series: {
						cursor: 'pointer',
						borderWidth: 0,
						dataLabels: {
									enabled: true
								},
						point: {
									events:
									{
										click: function (e) {
											var parametrosUrl = {
												'inicio': inicio,
												'fin': fin,
												'pais': pais,
												'cu': cu,
												'selected_item': categoria[this.x],
												'selected_serie': this.series.name,
												'cliente': cliente,
												'asp': asp,
												'proyecto': proyecto,
												'crew': crew
											};
											if (rawData != null) {
												parametrosUrl['row'] = rawData[this.x];
											}

											var prefix = (title == null || title == '') ? '' : title + ' - ';
											generateModal(path, parametrosUrl, true, prefix, categoria[this.x]); //, this.series.name+'='+ this.y);
										}
									}
								}
							}
						};
			}

			return $('#' + render).highcharts(options);
		}

                function createChartLinea2(render,categoria, data){
                    var options = {
                        chart: {
                            renderTo: render,
                             type: 'line',
                        },
                        xAxis: {
                                categories: categoria,
                                labels: {
                                    rotation: -30,
                                    style: {
                                        fontSize: '8px'
                                    }
                                },

                                overflow: 'justify'
                        },
                        yAxis: [{
                            min: 0,
                            title: {
                                text: ''
                            }
                            }],
                        title: {
                            text: ''
                        },
                         tooltip: {
                            shared: true
                        },
                        colors: [
                                 '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                                ],
                        series: data
                   };

                    return $('#' +render).highcharts(options);
                }
                
		function createTable(monitor,idTabla) {
			var header = Object.keys(monitor[0]),
					table = '<table  id="'+idTabla+'" class="table table-bordered table-hover table-striped table-responsive table-condensed"><thead><tr class="bg-primary">';

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

				table += "<th style='vertical-align:middle;' class='text-center'>" + header[j] + "</th>"
			}
			table += "</tr></thead>";

			for (var i = 0; i < monitor.length; i++) {

				table += '<tr id=' + monitor[i][header[0]] + ' class="cursor" style="vertical-align:middle;">';

                                for (var j = 0; j < header.length; j++) {
					
                                    table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";

				}
				table += "</tr>";
			}
			table += "</table></div>";
			return table;
		}

//Modal

		$('html').on('click', '.openModal', open)

		// este metodo ya no es esta usando en las tablas de datos, por ejemplo workmanship
		function open() {

			$('#myModal');
			$('#myModal .tabla-datos').empty();
			$('#myModal .punto-grafica').empty();

			if ($(this).text() == 0)
				return false;

			generateModal($(this).attr('data-load-remote'));
		}

		/**
		 * 
		 
		 * @param String ruta
		 * @param Object objParams
		 * @returns {undefined}		 */
		function generateModal(ruta, objParams, numerar, title, subtitle) {
			$('#myModal .tabla-datos').empty().isLoading();
			$('#myModal .punto-grafica').empty().hide();
			$('#myModal .modal_detalle_titulo').empty();

			if (title != null) {
				$('#myModal .modal_detalle_titulo').html(title);
			}
			else {
				$('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
			}

			if (subtitle != null) {
				$('#myModal .punto-grafica').html(subtitle).show();
			}

			$.getJSON(ruta, objParams, function (data) {

				if (data.length == 0) {

					$('#myModal').modal('hide');
					$('#myModal .tabla-datos').isLoading('hide');
					return false;
				}

				var monitor = data,
						header = Object.keys(data[0]),
						table = '<table id="tableData" class="tabla-detalle table table-hover table-condensed table-responsive"><thead><tr class="bg-primary">';

				if (numerar == true) {
					table += "<th class='text-center'>#</th>";
				}
				for (var j = 0; j < header.length; j++) {
					table += "<th class='text-center'>" + header[j] + "</th>"
				}

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

				for (var i = 0; i < monitor.length; i++) {
					table += "<tr>";
					if (numerar == true) {
						table += "<td>" + (i + 1) + "</td>";
					}
					for (var j = 0; j < header.length; j++) {

						// Se verifica si el valor a imprimir es null para evitar el toString de null como 'NULL'
						table += "<td>" + (monitor[i][header[j]] == null ? '&nbsp;' : monitor[i][header[j]]) + "</td>";
					}
					table += "</tr>";
				}

				table += "</table>";
				$('#myModal .tabla-datos').isLoading('hide').html(table);
			});

			$('#myModal').modal('show');
		}

		$('#myModal').on('hidden.bs.modal', function () {
			$('#myModal .tabla-datos').isLoading('hide');
		});
                
//Exportar Excel                
function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}                
    </script>

    <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
		<form id="formulario_filtros" onsubmit="return false;">
			<div class="row filtros">
				<div id="clusterTodos" class="col-lg-2 filtro"  style="margin-top: 1%; display: none;">
					<label>{{ 'CU' | trans}}: </label>                 
					<select class="form-control" id="cluster" name="cluster">
						<option value="TODOS">-- All -- </option> {%for cluster in clusters%}
							<option value="{{cluster.valor}}">{{cluster.nombre}}</option> {%endfor%}                       
					</select>
				</div> 
		                    
				<div id="paisTodos" class="col-lg-2 filtro"  style="margin-top: 1%; display: none;">
					<label>{{'monitores.pais' | trans}}: </label>                 
					<select class="form-control" id="pais" name="pais">
						<option value="TODOS">-- All -- </option>
					</select>
				</div>      
		     
				<div id="div_region" class="col-lg-2 filtro"  style="margin-top: 1%; display: block;">
					<label>{{'monitores.region' | trans}}: </label>                 
					<select class="form-control" id="region" name="region">
						<option value="TODOS">-- All --</option>
					</select>
				</div>    
                                <div id="div_asp" class="col-lg-2 filtro"  style="margin-top: 1%; display: block;">
					<label>{{'ASP' | trans}}: </label>                 
					<select class="form-control" id="asp" name="asp">
						<option value="TODOS">-- All --</option>
					</select>
				</div>   
				<div id="div_crew" class="col-lg-2 filtro"  style="margin-top: 1%; display: block;">
					<label>{{'CREW' | trans}}: </label>                 
					<select class="form-control" id="crew" name="crew">
                                                <option value="TODOS">-- All --</option>
					</select>
				</div>                                         
			</div>
                        <div class="row filtros">     
				<div class="col-lg-2 filtro"  style="margin-top: 1%; display: none;" id='div_fechaFin'>
					<label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
					<input type="text" class="form-control" id="Filtros_fechaIni" name="Filtros_fechaIni" value="">
				</div>
				<div class="col-lg-2 filtro"  style="margin-top: 1%; display: none;" id='div_fechaIni'>
					<label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
					<input type="text" class="form-control" id="Filtros_fechaFin" name="Filtros_fechaFin" value="">
				</div>   
				<div id="div_cliente" class="col-lg-2 filtro"  style="margin-top: 1%; display: block;">
					<label>{{'monitores.cliente' | trans}}: </label>                 
					<select class="form-control" id="cliente" name="cliente">
						<option value="TODOS">-- All --</option>
					</select>
				</div>                                         
				<div id="div_proyecto" class="col-lg-2 filtro"  style="margin-top: 1%; display: block;">
					<label>{{'monitores.proyecto' | trans}}: </label>                 
					<select class="form-control" id="proyecto" name="proyecto">
						<option value="TODOS">-- All --</option>
					</select>
				</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>
		</form>
                </div>
    </div>
        <div class="row">
			<div class="col-lg-22 text-center"  style="margin-top: 1%">
				<h1>ASP ISSUE DASHBOARD</h1>
			</div>
        </div>         
        <div class="row" >
            <div class="col-lg-21" id="title"></div>

            <div class="col-lg-22" style="margin-top: 25px;">
                <ul class="nav nav-pills nav-justified" id="myTabs">
                    <li id="tabs1" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp div_crew">
                    	<a data-toggle="tab" href="#_tab1">
                    		<strong>Summary for Idle Time</strong>
                    	</a>
                    </li>
                    <li id="tabs2" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp div_crew">
                    	<a data-toggle="tab" href="#_tabs2">
                    		<strong>Summary for Idle time category</strong>
                    	</a>
                    </li>
                </ul>

                <div class="tab-content" style="margin-top: 20px;">
                   <div id="_tab1" class="tab-pane fade">

                        <div class="panel-body fixed-panel" id="chart1"></div>
                        <div class="col-lg-offset-9"  style="margin-top: 1%">
                            <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                                <a href="#" onclick="exportTableToExcel('tabla1')"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a>
                            </div>
                        </div>
                        <div class="col-lg-12"><br><br></div>
                        <div class="col-lg-12" style="margin-right: -20px;" id="tabla1"></div>
		     		</div>

                    <div id="_tabs2" class="tab-pane fade">
                            <div id="chart2" class="panel-body fixed-panel"></div>
                            <div class="col-lg-offset-9"  style="margin-top: 1%">
                                <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                                     <a href="#" onclick="exportTableToExcel('tabla2')"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a>
                                </div>
                            </div>
                            <div class="col-lg-12"><br><br></div>
                            <div class="col-lg-1" ></div>
                            <div id="tabla2" class="col-lg-10" style="margin-right: -20px;"></div>
                    </div>
				</div>
			</div>
		</div>
	</div>

    <script>
		$(function() {
			// muestro el grafico seleccionado por default: el primero
			$('#myTabs a:first').tab('show');
			
			// inicializo los filtros mostrados por default: el primero
			on_tab_selected($('#myTabs li:first'));
			on_cluster_change();
			on_year_change();
		});
	</script>
    
	<!-- Modal -->
	<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>
							<span class="modal_detalle_titulo">
								{# {'monitorii.detail' | trans } #}
							</span>
						</strong>
					</h2>
					<div class="punto-grafica text-center"></div>
				</div>
			<!--	<div class="row">
					<div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                                             <a href="#" onclick="exportTableToExcel('tableData')"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a>
			        </div>
			        <div class="pager">
			            <span class="pagedisplay"></span>
			        </div>
			        <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
			    </div>-->
				<div class="modal-body">
					<div class="tabla-datos">

					</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 %}