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

{% block title %}ASPIR{% endblock %}

{% block logoppal %}
    <a class="navbar-brand" href="{{path('initialPage')}}" style=" margin-top: -10px;">
        <img height="42" src="{{asset('images/ASPIR_Logo.png')}}">
    </a>
{% 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: 10px;
		}
    </style>
    <style>
        .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 td {
			{#            text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }

        .commentList {
            padding:0;
            list-style:none;
            max-height:100px;
            overflow:auto;
        }
        .commentList li {
            margin:0;
            margin-top:10px;
        }
        .commentList li > div {
            display:table-cell;
        }       
        .commentText p {
            margin:0;
        }
        .sub-text {
            color:#aaa;
            font-family:verdana;
            font-size:11px;
        }  

    </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);

//Al seleccionar Cluster
			$("#cluster").change(on_cluster_change);
//Al seleccionar Pais
			$("#pais").change(on_pais_change);
//Al seleccionar Ano
			$("#ano").change(on_year_change);
                        
                        $("#region").change(on_region_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();
					}
				}
			}
                        
                        $cu=$("#cluster").val();
                        if ($cu=='BRAZIL') $('#div_estado').show();
                        else $('#div_estado').hide();
                        
                        if ($cu!='CA AND CARIBBEAN' && $cu!='TODOS' && $cu!='SOUTH'){ 
                            $('#div_cliente').show();
                            $('#div_proyecto').show();
                        }else{
                            $('#div_cliente').hide();
                            $('#div_proyecto').hide();
                        } 
                        
                        if ($cu!='CA AND CARIBBEAN' && $cu!='TODOS'){
                            $('#div_region').show();
                        }else{
                            $('#div_region').hide();
                        } 
                        
                        if ($cu=='MEXICO'){
                            $('#div_asp').show();
                            $('#div_crew').show();
                        }else{
                            $('#div_asp').hide();
                            $('#div_crew').hide();   
                            $('#asp').val("");
                            $('#crew').val("");                            
                        }
		}
                
		function on_cluster_change()
		{
			
                        llenarCombo_pais();
                        
                        //Ocultar y limpiar filtros
                        $cu=$("#cluster").val();
                        if ($cu=='BRAZIL'){ 
                            $('#div_estado').show();
                        }else{ 
                            $('#div_estado').hide();
                            $('#estado').val("");
                        }
                        
                        if ($cu!='CA AND CARIBBEAN' && $cu!='TODOS' && $cu!='SOUTH'){ 
                            $('#div_cliente').show();
                            $('#div_proyecto').show();
                        }else{
                            $('#div_cliente').hide();
                            $('#div_proyecto').hide();
                            $('#cliente').val("");
                            $('#proyecto').val("");
                        } 
                        
                        if ($cu!='CA AND CARIBBEAN' && $cu!='TODOS'){
                            $('#div_region').show();
                        }else{
                            $('#div_region').hide();
                            $('#region').val("");
                        }
                        
                        if ($cu=='MEXICO'){
                            $('#div_asp').show();
                            $('#div_crew').show();
                        }else{
                            $('#div_asp').hide();
                            $('#div_crew').hide();   
                            $('#asp').val("");
                            $('#crew').val("");      
                            $('#div_Executive').hide();                            
                        }                      

		}
		function on_year_change()
		{
			//llenarCombo_proyecto();
		}
		function on_pais_change()
		{
			llenarCombo_cliente();
                        llenarCombo_region();
                        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">-- Select Country --</option>');

			if ($("#cluster").val() != "TODOS")
			{
				var data = {};
				data['cluster'] = $("#cluster").val();
				$.getJSON('{{path('auditsasp_llenarPais')}}', data, function (data)
				{
					var regions = data.region;
					$("#pais option").remove();
					$("#pais").append('<option value="TODOS">-- Select Country --</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();
				$.getJSON('{{path('auditsasp_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['fechaIni'] = $("#Filtros_fechaIni").val();
				data['fechaFin'] = $("#Filtros_fechaFin").val();
                                data['customer'] = $("#cliente").val();
				$.getJSON('{{path('auditsasp_llenarProyectoOtd')}}', 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['inicio'] = $("#Filtros_fechaIni").val();
                                data['fin'] = $("#Filtros_fechaFin").val();
				$.getJSON('{{path('auditsasp_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]['aspVendor'];
						opt.innerHTML = data[i]['aspVendor'];
						$("#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['fechaIni'] = $("#Filtros_fechaIni").val();
				data['fechaFin'] = $("#Filtros_fechaFin").val();
                                data['asp'] = $("#asp").val();                                
				$.getJSON('{{path('auditsasp_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 llenarCombo_region()
		{
			$("#region option").remove();
			$("#region").append('<option value="TODOS">-- All --</option>');


				var data = {};
				data['pais'] = $("#pais").val();
				$.getJSON('{{path('auditsasp_llenarRegionxPais')}}', data, function (data)
				{
					$("#region option").remove();
					$("#region").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'];
						$("#region").append(opt);
					}

					//$.isLoading("hide");

				});

			//on_region_change();
		}
                
		function llenarCombo_estado()
		{
			$("#estado option").remove();
			$("#estado").append('<option value="TODOS">-- All --</option>');


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

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

					//$.isLoading("hide");

				});

			//on_estado_change();
		}
                
                
		function getChart(){
		
			var inicio = $('#Filtros_fechaIni').val();
			var fin = $('#Filtros_fechaFin').val();
			var pais = $('#pais').val();
			var year = $('#ano').val();
			var cu = $('#cluster').val();
			var cliente = $('#cliente').val();
			var proyecto = $('#proyecto').val();
                        var region = $('#region').val();
                        var estado = $('#estado').val();
                        var asp = $('#asp').val();
                        var crew = $('#crew').val();
		
			var parametros = {
								'FechaInicio': inicio,
								'FechaFin': fin,
								'pais': pais, 
								'year': year, 
								'cu': cu,
								'cliente': cliente,
								'proyecto': proyecto,
                                                                'region': region,
                                                                'estado': estado,
                                                                'asp': asp,
                                                                'crew': crew
							};

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

				//System Faults Found
				if (chart.grafico1.length > 0)
				{
					var categoria1 = getDataToObject(chart.grafico1, Object.keys(chart.grafico1[0]), 0, false);
					var chart1 = getDataToObjectSerie(chart.grafico1, Object.keys(chart.grafico1[0]), 1, true);
				}

				//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 = getDataToObjectSerie(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]), chart.cu);
				}

				//Audit Responsable
				if (chart.grafico5.length > 0)
				{
					var categoria5 = getDataToObject(chart.grafico5, Object.keys(chart.grafico5[0]), 0, false);
					var headers5 = Object.keys(chart.grafico5[0]);
					var series5 = [
						{'name': headers5[1], 'type': 'column', 'yAxis': 1, 'dataLabels': {'enabled': true}},
						{'name': headers5[2], 'type': 'column', 'yAxis': 1, 'dataLabels': {'enabled': true}},
						{'name': headers5[3], 'type': 'spline'}
					];
					var chart5 = getDataToObjectCombinado_generico(chart.grafico5, series5);
				}

				// Audit Ratio
				if (chart.graficoAuditRatio1.length > 0)
				{
					var categoriaGraficoAuditRatio = getDataToObject(chart.graficoAuditRatio1, Object.keys(chart.graficoAuditRatio1[0]), 0, false);
					var chartGraficoAuditRatio = getDataToObjectLinea(chart.graficoAuditRatio1, Object.keys(chart.graficoAuditRatio1[0]));
				}

				// First Time Right
				if (chart.graficoFirstTimeRight1.length > 0)
				{
					var categoriaGraficoFirstTimeRight1 = getDataToObject(chart.graficoFirstTimeRight1, Object.keys(chart.graficoFirstTimeRight1[0]), 0, false);
					var chartGraficoFirstTimeRight1 = getDataToObjectLinea(chart.graficoFirstTimeRight1, Object.keys(chart.graficoFirstTimeRight1[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]));
				}

				//%Critical Defect
				if (chart.grafico9.length > 0)
				{
					var categoria9 = getDataToObject(chart.grafico9, Object.keys(chart.grafico9[0]), 0, false);
					var chart9 = getDataToObjectLinea(chart.grafico9, Object.keys(chart.grafico9[0]));
				}

				//% Workmanship QI
				if (chart.grafico10.length > 0)
				{
					var categoria10 = getDataToObject(chart.grafico10, Object.keys(chart.grafico10[0]), 0, false);
					var chart10 = getDataToObjectLinea(chart.grafico10, Object.keys(chart.grafico10[0]));
				}

				//% On Time Delivery 
				if (chart.grafico11.length > 0)
				{
					var categoria11 = getDataToObject(chart.grafico11, Object.keys(chart.grafico11[0]), 0, false);
					var chart11 = getDataToObjectLinea(chart.grafico11, Object.keys(chart.grafico11[0]));
				}

				// Executive
				if (chart.Executive.length > 0)
				{
					var categoriaExecutive = getDataToObject(chart.Executive, Object.keys(chart.Executive[0]), 0, false);
					var chartExecutive = getDataToObjectLinea2(chart.Executive, Object.keys(chart.Executive[0]));
				}
				//////////////////////////
				// CREACION DE GRAFICOS //
				//////////////////////////
				if (chart.grafico1.length > 0)
				{
					createChart('chart1', categoria1, chart1, 300, '', inicio, fin, pais, cu, '{{ path('auditsasp_getSystemFaultsFoundDetalle') }}', chart.grafico1);
				}
				else
				{
					$("#chart1").empty();
					$("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}//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, 300, '', inicio, fin, pais, cu, '{{ path('auditsasp_getDeviationByAspDetalle') }}', chart.grafico2);
				}
				else
				{
					$("#chart2").empty();
					$("#chart2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.grafico3.length > 0)
				{
					createChartDetalle('chart3', categoria3, chart3, 300, '', inicio, fin, pais, cu, '{{ path('auditsasp_getDetalleIssueFound') }}', chart.grafico3);
				}
				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, 300, 'Audit Type by Auditor', inicio, fin, pais, cu, '{{ path('auditsasp_getAuditTypeByAuditorDetalle') }}', chart.grafico4);
				}
				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, 'Responsible for Errors');
					}
					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>');
				}

				// Audit Ratio
				if (chart.graficoAuditRatio1.length > 0)
				{
                                  createChartLinea('graficoAuditRatio1', categoriaGraficoAuditRatio, chartGraficoAuditRatio, '', null, [70, 'Robust=70'], [80,'Commit=80'], [90,'Stretched=90']);
				}
				else
				{
					$("#graficoAuditRatio1").empty();
					$("#graficoAuditRatio1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				// Tabla Audit Ratio
				if (chart.tablaAuditRatio1.length > 0)
				{
					$("#tablaAuditRatio1").empty();
					$("#tablaAuditRatio1").append(createTable(chart.tablaAuditRatio1));
				}
				else
				{
					$("#tablaAuditRatio1").empty();
					$("#tablaAuditRatio1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}
				// grafica First Time Right
				if (chart.graficoFirstTimeRight1.length > 0)
				{
					createChartLinea('graficoFirstTimeRight1', categoriaGraficoFirstTimeRight1, chartGraficoFirstTimeRight1, '', null, [75, 'Robust=75'], [80,'Commit=80'], [85,'Stretched=85'], inicio, fin, pais, cu, null, chart.grafico7);
				}
				else
				{
					$("#graficoFirstTimeRight1").empty();
					$("#graficoFirstTimeRight1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}
				// tabla fisrt time right
				if (chart.tablaFirstTimeRight1.length > 0)
				{
					$("#tablaFirstTimeRight1").empty();
					$("#tablaFirstTimeRight1").append(createTable(chart.tablaFirstTimeRight1));
				}
				else
				{
					$("#tablaFirstTimeRight1").empty();
					$("#tablaFirstTimeRight1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}
				if (chart.grafico6.length > 0)
				{
					createChartLinea('chart6', categoria6, chart6, 'ASP QI', null, [0.4, 'QI=0.4'], null, null, inicio, fin, pais, cu, '{{ path('auditsasp_getDetalleAspDashboardQiAsp') }}', chart.grafico6);
				}
				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, '', null, [0.4, 'QI=0.4'], null, null, inicio, fin, pais, cu, '{{ path('auditsasp_getCountryDashboardQIDetalle') }}', chart.grafico7);
				}
				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, 'Crew QI', null, [0.4, 'QI=0.4'], null, null, inicio, fin, pais, cu, '{{ path('auditsasp_getDetalleAspDashboardQiCrew') }}', chart.grafico8);
				}
				else
				{
					$("#chart8").empty();
					$("#chart8").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.grafico9.length > 0)
				{
					createChartLinea('chart9', categoria9, chart9, '', null, [1, 'Stretched=1'], [2, 'Commit=2'], [3, 'Robust=3']);
				}
				else
				{
					$("#chart9").empty();
					$("#chart9").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.grafico10.length > 0)
				{
					createChartLinea('chart10', categoria10, chart10, '', null, [90, 'Stretched=90'], [80, 'Commit=80'], [70, 'Robust=70']);
				}
				else
				{
					$("#chart10").empty();
					$("#chart10").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.grafico11.length > 0)
				{
					createChartLinea('chart11', categoria11, chart11, '', 100, [85, 'Stretched=85'], [80, 'Commit=80'], [75, 'Robust=75']);
				}
				else
				{
					$("#chart11").empty();
					$("#chart11").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.tabla1.length > 0)
				{
					$("#tabla1").empty();
					$("#tabla1").append(createTable(chart.tabla1));
				}
				else
				{
					$("#tabla1").empty();
					$("#tabla1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.tabla2.length > 0)
				{
					$("#tabla2").empty();
					$("#tabla2").append(createTable(chart.tabla2));
				}
				else
				{
					$("#tabla2").empty();
					$("#tabla2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.tabla3.length > 0)
				{
					$("#tabla3").empty();
					$("#tabla3").append(createTableArray(chart.tabla3));
				}
				else
				{
					$("#tabla3").empty();
					$("#tabla3").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}

				if (chart.tabla4.length > 0)
				{
					$("#tabla4").empty();
					$("#tabla4").append(createTable(chart.tabla4));
				}
				else
				{
					$("#tabla4").empty();
					$("#tabla4").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}
				if (chart.tabla5.length > 0)
				{
					$("#tabla5").empty();
					$("#tabla5").append(createTable(chart.tabla5));
				}
				else
				{
					$("#tabla5").empty();
					$("#tabla5").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}       
				if (chart.tabla6.length > 0)
				{
					$("#tabla6").empty();
					$("#tabla6").append(createTable(chart.tabla6));
				}
				else
				{
					$("#tabla6").empty();
					$("#tabla6").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}   
				if (chart.tabla7.length > 0)
				{
					$("#tabla7").empty();
					$("#tabla7").append(createTableArray(chart.tabla7));
				}
				else
				{
					$("#tabla7").empty();
					$("#tabla7").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				} 
                                
                                // Executive
				if (chart.Executive.length > 0)
				{
					createChartLinea2('div_Executive', categoriaExecutive, chartExecutive,'', 100, [85, 'Stretched=85'], [80, 'Commit=80'], [75, 'Robust=75']);
				}
				else
				{
					$("#div_Executive").empty();
					$("#div_Executive").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}                                
                                
                                if ($('#asp').val()!="TODOS"){//Habilitar gráfica Executive
                                    $('#div_Executive').show();
                                }else{
                                    $('#div_Executive').hide();
                                }
				$.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 = 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();
                        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 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, path, 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
									};

									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, path, rawData)
		{
			var options = {
				chart: {
					renderTo: render,
					type: 'column',
					spacingBottom: 5,
					spacingTop: 10,
					spacingLeft: 1,
					spacingRight: 1,
					height: wd
				},
				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
				},
				plotOptions: {
					series: {
						stacking: 'normal'
					}
				},
				colors: [
					'#a1c517', '#0082b6', '#b88fef', '#009045', '#f4c6ea', '#17c5bc'
				],
				series: data
			};

			// OPCIONAL: El path para la tabla detallada
			if (path != null)
			{
				options['plotOptions'] =
						{
							series:
									{
										stacking: 'normal',
										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
																	};

																	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, 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
																	};
																	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, total, nombreColTotal)
		{
			var header = Object.keys(monitor[0]),
					table = '<table  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;">';

				// se convierten en texto a traves de JSON.stringify()
				var parametros = {'mes': monitor[i][header[0]], 'proyecto': monitor[i][header[1]], 'pais': $("#pais").val(), 'cluster': $("#cluster").val(), 'cu': $("#cluster").val()};
				//var parametrosOnTimeDelivery = {'mes': monitor[i][header[0]], 'proyecto': monitor[i][header[1]], 'pais': $("#pais1").val(), 'cluster': $("#cluster1").val()};

				for (var j = 0; j < header.length; j++)
				{
					if (header[j] == "QI > 0.4")
					{
						if (parseInt(monitor[i][header[j]]) > 0)
						{
							table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_WorkmanshipFueraKpi') }}",' + JSON.stringify(parametros) + ',true,"Workmanship QI ","' + monitor[i][header[0]] + '")\'>' + monitor[i][header[j]] + '</button></td>';

						}
						else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
					}
					else if (header[j] == "Critical Defects")
					{
						if (parseInt(monitor[i][header[j]]) > 0)
						{
							table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_CriticalDefectFueraKpi') }}",' + JSON.stringify(parametros) + ',true,"Critical Defects","' + monitor[i][header[0]] + '")\'>' + monitor[i][header[j]] + '</button></td>';

						}
						else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
					}
					else if (header[j] == "Sites Completed")
					{
						if (parseInt(monitor[i][header[j]]) > 0)
						{
							table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_OnTimeDelivery') }}",' + JSON.stringify(parametros) + ',true,"On Time Delivery","' + monitor[i][header[0]] + '")\'>' + monitor[i][header[j]] + '</button></td>';
						}
						else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
					}
					else if ((header[j] == "Total services not accepted <br> 1st time right"))
					{
						if (parseInt(monitor[i][header[j]]) > 0)
						{
							var parametros = {'mes': monitor[i][header[0]], 'pais': $("#pais").val(), 'cu': $("#cluster").val()};
							table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_tablaFirstTimeRight1') }}",' + JSON.stringify(parametros) + ',true,"First Time Right","' + monitor[i][header[0]] + '")\'>' + monitor[i][header[j]] + '</button></td>';
						}
						else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
					}else if ((header[j] == "Total Projects"))
					{
						if (parseInt(monitor[i][header[j]]) > 0)
						{
							var parametros = {'mes': monitor[i][header[0]], 'pais': $("#pais").val(), 'cu': $("#cluster").val()};
							table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_tablaAuditRatio') }}",' + JSON.stringify(parametros) + ',true,"Audit Ratio","' + monitor[i][header[0]] + '")\'>' + monitor[i][header[j]] + '</button></td>';
						}
						else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
					}
					else
					if (header[j] == "KPIs")
					{
						if (header[4] == "%Workmanship QI")
						{
							if (parseFloat(monitor[i][header[4]]) >= 0 && parseFloat(monitor[i][header[4]]) <80)
							{
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"></td>';
							}
							else if (parseFloat(monitor[i][header[4]]) >=80 && parseFloat(monitor[i][header[4]]) < 90)
							{
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"></td>';
							}
							else if (parseFloat(monitor[i][header[4]]) >= 90 && parseFloat(monitor[i][header[4]]) <= 100)
							{
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
							}
						}
						else
						{
							if (header[3] == "%Critical Defects")
							{
								if (parseFloat(monitor[i][header[3]]) >= 3)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"></td>';
								}
								else if (parseFloat(monitor[i][header[3]]) >= 2 && parseFloat(monitor[i][header[3]]) < 3)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"></td>';
								}
								else if (parseFloat(monitor[i][header[3]]) >= 0 && parseFloat(monitor[i][header[3]]) < 2)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
								}
							}
							else
							if (header[4] == "%On Time Delivery")
							{
								if (parseFloat(monitor[i][header[4]]) >= 0 && parseFloat(monitor[i][header[4]]) < 80)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"></td>';
								}
								else if (parseFloat(monitor[i][header[4]]) >= 80 && parseFloat(monitor[i][header[4]]) < 85)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"></td>';
								}
								else if (parseFloat(monitor[i][header[4]]) >= 85 && parseFloat(monitor[i][header[4]]) <= 100)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
								}
							}
							else
							if (header[5] == "%FTR")
							{
								if (parseFloat(monitor[i][header[5]]) >=0 && parseFloat(monitor[i][header[5]]) < 80)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Commitment"></td>';
								}
								else if (parseFloat(monitor[i][header[5]]) >=80 && parseFloat(monitor[i][header[5]]) < 85)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Stretched"></td>';
								}
								else if (parseFloat(monitor[i][header[5]]) >= 85 && parseFloat(monitor[i][header[5]]) <= 100)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
								}
							}else
                                                        if (header[4] == "%FTR")
							{
								if (parseFloat(monitor[i][header[4]]) >=0 && parseFloat(monitor[i][header[4]]) < 80)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Commitment"></td>';
								}
								else if (parseFloat(monitor[i][header[4]]) >=80 && parseFloat(monitor[i][header[4]]) < 85)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Stretched"></td>';
								}
								else if (parseFloat(monitor[i][header[4]]) >= 85 && parseFloat(monitor[i][header[4]]) <= 100)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
								}
							}else
							if (header[4] == "%Ratio")
							{
								if (parseFloat(monitor[i][header[3]]) >=0 && parseFloat(monitor[i][header[3]]) <80)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Commitment"></td>';
								}
								else if (parseFloat(monitor[i][header[3]]) >=80 && parseFloat(monitor[i][header[3]]) < 90)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Stretched"></td>';
								}
								else if (parseFloat(monitor[i][header[3]]) >= 90 && parseFloat(monitor[i][header[3]]) <= 100)
								{
									table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
								}
							}
						}
					}
					else
						table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</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;
		}

		function createTableArray(monitor)
		{
			var table = '<table  class="table table-bordered table-hover table-striped table-responsive table-condensed"><thead><tr class="bg-primary">';

			for (var j = 0; j < monitor[0].length; j++)
			{
				table += "<th WIDTH='50' style='vertical-align:middle;' class='text-center'>" + monitor[0][j] + "</th>"
			}
			table += "</tr></thead>";

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

				table += '<tr class="cursor" style="vertical-align:middle;">';
				for (var j = 0; j < monitor[0].length; j++)
				{

                                        if (j > 0)
					{
						
                                                if(monitor[0][0]=="ASP"){
                                                    var parametros = {'asp': monitor[i][0], 'pais': $("#pais").val(), 'cliente': monitor[i][2], 'ini': $("#Filtros_fechaIni").val(), 'fin': $("#Filtros_fechaFin").val()};
                                                    switch (monitor[0][j])
                                                    {
                                                            case 'Critical Defects':
                                                                            if (parseFloat(monitor[i][j]) >= 3)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 2 && parseFloat(monitor[i][j]) < 3)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 2)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}"><br><br>' + monitor[i][j] + '</td>';
                                                                            }
                                                                            break;
                                                            case 'Workmanship QI':
                                                                            if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) <= 70)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 71 && parseFloat(monitor[i][j]) <= 80)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 81 && parseFloat(monitor[i][j]) <= 100)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '</td>';
                                                                            }

                                                                            break;
                                                            case 'On Time Delivery':
                                                                            if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 90)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 90)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
                                                                            }
                                                                            break;
                                                            case 'Audit Ratio':
                                                                            if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 90)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 90)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
                                                                            }
                                                                            break;
                                                            case 'First Time Right':
                                                                            if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 85)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 85)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
                                                                            }
                                                                            break;
                                                            case 'Overall':
                                                                            if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 85)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else if (parseFloat(monitor[i][j]) >= 85)
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
                                                                            }
                                                                            else
                                                                            {
                                                                                    table += '<td WIDTH="50" style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
                                                                            }
                                                                            break;  
                                                            case 'PO': if (monitor[i][j] != '_' && monitor[i][j] != 0){
                                                                            table += '<td WIDTH="50" style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_PO') }}",' + JSON.stringify(parametros) + ',true,"Detalle PO","' + monitor[i][0] + '")\'>' + monitor[i][j] + '</button></td>';
                                                                        }else table += '<td WIDTH="50" style="vertical-align:middle;">' + monitor[i][j] + '</td>';
                                                                        break;
                                                         /*   case 'GR': if (monitor[i][j] != '_'){
                                                                            table += '<td style="vertical-align:middle;"> <button type="button" class="btn btn-link btn-xs" onclick=\'generateModal("{{ path('auditsasp_detalle_GR') }}",' + JSON.stringify(parametros) + ',true,"Detalle GR","' + monitor[i][0] + '")\'>' + monitor[i][j] + '</button></td>';
                                                                        }else table += '<td style="vertical-align:middle;">' + monitor[i][j] + '</td>';
                                                                        break;  */                                                                    
                                                            default:
                                                                    table += '<td WIDTH="50" style="vertical-align:middle;">' + monitor[i][j] + '</td>';

                                                    }                                                
                                                }else{//ASP Productions
                                                switch (monitor[i][0])
						{
							case 'Critical Defects':
									if (parseFloat(monitor[i][j]) >= 3)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 2 && parseFloat(monitor[i][j]) < 3)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 2)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}"><br><br>' + monitor[i][j] + '</td>';
									}
									break;
							case 'Workmanship QI':
									if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) <80)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >=80 && parseFloat(monitor[i][j]) <90)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >=90 && parseFloat(monitor[i][j]) <= 100)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '</td>';
									}

									break;
							case 'On Time Delivery':
									if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 85)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 85)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
									}
									break;
							case 'Audit Ratio':
									if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 90)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 90)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
									}
									break;
							case 'First Time Right':
									if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 90)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 90)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
									}
									break;
                                                        case 'Overall':
									if (parseFloat(monitor[i][j]) >= 0 && parseFloat(monitor[i][j]) < 80)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Robust"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 80 && parseFloat(monitor[i][j]) < 85)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Commitment"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else if (parseFloat(monitor[i][j]) >= 85)
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"><br><br>' + monitor[i][j] + ' %</td>';
									}
									else
									{
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';
									}
									break;                                                                        
							default:
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/no_status.jpg') }}" ><br><br>' + monitor[i][j] + '%</td>';

						}                                                
                                                }
                                              
					}
					else
						table += "<td style='vertical-align:middle;'>" + monitor[i][j] + "</td>";

				}
				table += "</tr>";

			}
			table += "</table>";
			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 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');
		});
    </script>

    <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
		<form id="formulario_filtros" onsubmit="return false;">
			<div class="row filtros">
				<div id="clusterTodos" class="col-lg-3 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-3 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: none;">
					<label>{{'monitores.region' | trans}}: </label>                 
					<select class="form-control" id="region" name="region">
						<option value="TODOS">-- All --</option>
					</select>
				</div>    
				<div id="div_estado" class="col-lg-2 filtro"  style="margin-top: 1%; display: none;">
					<label>{{'monitores.estado' | trans}}: </label>                 
					<select class="form-control" id="estado" name="estado">
						<option value="TODOS">-- All --</option>
					</select>
				</div>  
                                <div id="div_asp" class="col-lg-2 filtro"  style="margin-top: 1%; display: none;">
					<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: none;">
					<label>{{'monitor.etiqueta.cuadrilla' | 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-3 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-3 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: none;">
					<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: none;">
					<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 class="col-lg-6">
                        <div class="panel-body fixed-panel" id="div_Executive" style="margin-top: 1%; display: none;">

                        </div>
                </div>
    </div>
        <div class="row">
			<div class="col-lg-22 text-center"  style="margin-top: 1%">
				<h1>MELA ASP MANAGEMENT INTEGRATED REPORTING</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="tabs7" data-filtro="clusterTodos paisTodos div_fechaIni div_fechaFin"><a data-toggle="tab" href="#_tab7"><strong>Critical Defects</strong></a></li>
                    <li id="tabs8" data-filtro="clusterTodos paisTodos div_fechaIni div_fechaFin"><a data-toggle="tab" href="#_tab8"><strong>Workmanship <br> QI</strong></a></li>                                        
                    <li id="tabs10" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab10"><strong>On Time Delivery</strong></a></li>                     
		    <li id="tabsAuditRatio" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tabAuditRatio"><strong>Audit Ratio</strong></a></li>
		    <li id="tabsFirstTimeRight" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tabFirstTimeRight"><strong>First Time Right</strong></a></li>
                    <li id="tabs9" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab9"><strong>ASP Production</strong></a></li>                   
                    <li id="tabs11" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab11"><strong>Ranking ASP</strong></a></li>                   
                    <li id="tabs3" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab3"><strong>Country Dashboard QI</strong></a></li>
                    <li id="tabs1" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab1"><strong>Auditor Dashboard</strong></a></li>
                    <li id="tabs2" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab2"><strong>ASP Dashboard QI</strong></a></li>
                    <li id="tabs4" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab4"><strong>Deviations <br> by ASP</strong></a></li>
                    <li id="tabs5" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab5"><strong>System Faults Found</strong></a></li>
                    <li id="tabs6" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos"><a data-toggle="tab" href="#_tab6"><strong>Issues Found</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="chart4">

                        </div>

                        <div class="panel-body fixed-panel" id="chart5">

                        </div>
                    </div>

                    <div id="_tab2" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart6">

                        </div>

                        <div class="panel-body fixed-panel" id="chart8">

                        </div>
                        
                        <div class="col-lg-22" style="margin-right: -40px;" id="tabla6">

                        </div>                         
                    </div>

                    <div id="_tab3" class="tab-pane fade">
                        <div pxclass="panel-body fixed-panel" id="chart7">

                        </div>
                       
                        <div class="col-lg-22" style="margin-right: -40px;" id="tabla5">

                        </div>                         
                    </div>

                    <div id="_tab4" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart2">

                        </div>
                    </div>

                    <div id="_tab5" class="tab-pane fade">
						<div class="panel-body fixed-panel" id="chart1">
						</div>
                    </div>

                    <div id="_tab6" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart3">

                        </div>
                    </div> 

                    <div id="_tab7" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart9">

                        </div>
                        <div class="col-lg-2"></div> 
						<!--    <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="$('#tabla1').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
								 </ul>
							 </div>-->
                        <div class="col-lg-8" style="margin-right: -40px;" id="tabla1">

                        </div>                         
                    </div>                    

                    <div id="_tab8" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart10">

                        </div>
                        <div class="col-lg-2"></div> 
						<!--  <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="$('#tabla2').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
							   </ul>
						   </div>   --> 
                        <div class="col-lg-8" style="margin-right: -40px;" id="tabla2">

                        </div>                        

                    </div>  

                    <div id="_tab9" class="tab-pane fade in">
                        <div class="col-lg-22" style="margin-right: -40px;" id="tabla3">

                        </div>                        

                    </div>
                    <div id="_tab11" class="tab-pane fade in">
                        <div class="col-lg-22" style="margin-right: -40px;" id="tabla7">

                        </div>                        

                    </div>                                                           

                    <div id="_tab10" class="tab-pane fade">
                        <div class="panel-body fixed-panel" id="chart11">

                        </div>
                        <div class="col-lg-2"></div> 
             
                        <div class="col-lg-8" style="margin-right: -40px;" id="tabla4">

			</div>                   

		     </div>
					<div id="_tabAuditRatio" class="tab-pane fade">
						<div id="graficoAuditRatio1" class="panel-body fixed-panel">
						
						</div>
                                                <div id="tablaAuditRatio1" class="panel-body fixed-panel">
						
						</div>
					</div>
					<div id="_tabFirstTimeRight" class="tab-pane fade">
						<div id="graficoFirstTimeRight1" class="panel-body fixed-panel">
						
						</div>
						<div id="tablaFirstTimeRight1" class="panel-body fixed-panel">
						
						</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>{# {'monitorii.detail' | trans } #}<span class="modal_detalle_titulo"></span></strong></h2>
					<div class="punto-grafica text-center"></div>
				</div>
				<div class="modal-body">
					<div class="tabla-datos">

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