{% extends '::baseHighstock4.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;*/
			background-color: #428bca;
			border-color: #3071a9;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
		}
        .tabla-detalle
        {
                text-transform: uppercase;
                font-size: 9px;
        }
    </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 th{
			{#text-transform: uppercase;#}
            font-weight: bold;
            font-size: 12px;
        }
        
        table td{
			{#text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }        

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

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

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

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

		.verticalResizer{
			cursor: ns-resize;
		}

		.horizontalResizer{
			cursor: ew-resize;
		}
    </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 src="{{ asset('js/resizable.min.js') }}" type="text/javascript"></script>#}

    <script>
		Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function(proceed) {
			var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
			if (path) {
				path.flat = false;
			}
			return path;
		});

		var projectList = new Array(4); //Lista de proyectos para cada gráfico
		var bolRefreshDT = false;
		var table;
		var columnaHP = [
			{ "data": "id", visible: false },
			{ "data": "cu" },
			{ "data": "country" },
			{ "data": "customer" },
			{ "data": "project" },
			{ "data": "created_date", visible: false },
			{ "data": "id_user_creator", visible: false },
			{ "data": "user_creator", visible: false },
			{ "data": "last_update", visible:false },
			{ "data": "id_user_update", visible:false },
			{ "data": "user_update", visible:false },
			{ "data": null}
		];

		function createTableDT(data, tableRender, dtRender){
			var strHeader = "";
			var strFooter="";
			var columns = [];
			var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
					'<thead><tr class="header_dt">';
			$('#' + dtRender).empty();
			for (var i=0; i<data.length; i++){
				var title = data[i];
				var t = title.replace(/_/g,' ');
				t = title.replace('#','');

				var visible = title.startsWith('_') ? false : true;
				strHeader += '<th class="text-center">' + t + '</th>';
				//if (title.indexOf(' not ')>=0 || title.indexOf('ASP')>=0){
				if (title.indexOf(' not ')>=0){
					columns.push({data: data[i], title: t, visible:visible,
						render: function ( dato, type, row ) {
							//if (dato>0 || (tableRender=='table_DashAsp')){
							if (dato>0){
								var kpi="";
								var table_title = "";
								var subtitle = "";
								var url= "";
								if (row.hasOwnProperty('%FTR') && tableRender=='table_FirstTimeRight'){
									kpi='ftr';
									table_title = 'FIRST TIME RIGHT';
									subtitle= row.hasOwnProperty('Month') ? row['Month'] : "";
									url = "{{ path('aspir_detalle_tablaFirstTimeRight') }}"
								}  else if (row.hasOwnProperty('%FTR') && tableRender=='table_FirstTimeRightHotProject'){
									kpi='ftr_hotproject';
									table_title = 'FIRST TIME RIGHT HOT PROJECT';
									subtitle= row.hasOwnProperty('Month') ? row['Month'] : "";
									url = "{{ path('aspir_detalle_tablaFirstTimeRightHotProject') }}"
								} else if (row.hasOwnProperty('ASP') && tableRender=='table_DashAsp'){
									kpi='asp';
									table_title = 'ASP Dashboard';
									subtitle= row.hasOwnProperty('ASP') ? row['ASP'] : "";
									url = "{{ path('aspir_detalle_tablaDashASP') }}";
								}
								//validacion por perfil
								if($('#cluster_user').val()!=''){
                                    var cu = $('#cluster_user').val();
                                }else{
                                   var cu =row.hasOwnProperty('CU') ? row['CU'] : $('#cluster').val();
                                } 
                                if($('#country_user').val()!=''){
                                    var pais = $('#country_user').val();
                                }else{
                                   var pais = row.hasOwnProperty('COUNTRY') ? row['COUNTRY'] : $('#pais').val();
                                } 
								if($('#asp_user').val()!=''){
                                    var asp = $('#asp_user').val();
                                }else{
                                   var asp =  row.hasOwnProperty('ASP') ? row['ASP'] : $('#asp').val();
                                } 
                                //fin validacion por perfil
								var parametros = {
									'postfix': 'ftr',
									'kpi': kpi,
									'pais' : pais,
									'cliente': row.hasOwnProperty('CUSTOMER') ? row['CUSTOMER'] : $('#cliente').val(),
									'proyecto': row.hasOwnProperty('PROJECT') ? row['PROJECT'] : $('#proyecto').val(),
									'cu': cu,
									'asp': asp,
									'mes': row.hasOwnProperty('Month') ? row['Month'] : ""
								};
								if (type==='display'){
									var ord = null;
									if (tableRender=='table_FirstTimeRight' || tableRender=='table_FirstTimeRightHotProject'){
										ord = '[4,"Desc"]';
									}else if(tableRender=='table_SystemFaultFound' || tableRender=='table_IssuesFound'){

									}else if(tableRender=='table_DashAsp'){
										ord = '[0,"Desc"]';
									}
									return '<a href="javascript://" ' +
											'onClick=\'generateModal("' + url + '",' + JSON.stringify(parametros) + ',true,"' + table_title +  '","' + subtitle +  '",' + ord +  ')\'">' + dato + '</a>';
								}else{
									return dato;
								}
							}
							return dato;
						}
					});
				}
				else if(title == 'KPIs'){
					columns.push({data: data[i], title: t, visible:visible,
						render: function ( dato, type, row ) {
							if (type==='display'){
								if (row.hasOwnProperty('%FTR')){
									/*if (parseFloat(row['%FTR']) >=0 && parseFloat(row['%FTR']) < 80){
										return '<img src="{{ asset('images/robust.jpg') }}" title="Robust" width="">';
									}*/
									if (parseFloat(row['%FTR']) >=0 && parseFloat(row['%FTR']) < 80){
										return '<img src="{{ asset('images/off_track') }}" title="On Track">';
									}else if (parseFloat(row['%FTR']) >=80 && parseFloat(row['%FTR']) < 85){
										return '<img src="{{ asset('images/commitment.jpg') }}" title="Commitment">';
									}else if (parseFloat(row['%FTR']) >= 85 && parseFloat(row['%FTR']) <= 100){
										return '<img src="{{ asset('images/strech.jpg') }}" title="Stretched">';
									}
								}
								if (row.hasOwnProperty('%OTD')){
									if (parseFloat(row['%OTD']) >=0 && parseFloat(row['%OTD']) < 80){
										return '<img src="{{ asset('images/robust.jpg') }}" title="Robust">';
									}else if (parseFloat(row['%OTD']) >=80 && parseFloat(row['%OTD']) < 85){
										return '<img src="{{ asset('images/commitment.jpg') }}" title="Commitment">';
									}else if (parseFloat(row['%OTD']) >= 85 && parseFloat(row['%OTD']) <= 100){
										return '<img src="{{ asset('images/strech.jpg') }}" title="Stretched">';
									}
								}
							}else{
								if (row.hasOwnProperty('%FTR')){
									if (parseFloat(row['%FTR']) >=0 && parseFloat(row['%FTR']) < 80){
										return 'Robust';
									}else if (parseFloat(row['%FTR']) >=80 && parseFloat(row['%FTR']) < 85){
										return 'Commitment';
									}else if (parseFloat(row['%FTR']) >= 85 && parseFloat(row['%FTR']) <= 100){
										return 'Stretched';
									}
								}
								if (row.hasOwnProperty('%OTD')){
									if (parseFloat(row['%OTD']) >=0 && parseFloat(row['%OTD']) < 80){
										return 'Robust';
									}else if (parseFloat(row['%OTD']) >=80 && parseFloat(row['%OTD']) < 85){
										return 'Commitment';
									}else if (parseFloat(row['%OTD']) >= 85 && parseFloat(row['%OTD']) <= 100){
										return 'Stretched';
									}
								}
							}
						}
					});
				}else if (title=='TREND'){
					columns.push({data: data[i], title: t, visible:visible,
						render: function ( dato, type, row ) {
							if (type==='display'){
								return dato;
							}else if (type==='export'){
								if (row['TREND'].indexOf('"up"')>-1){
									return 'UP'
								}else if (row['TREND'].indexOf('"down"')>-1){
									return 'DOWN'
								}else if (row['TREND'].indexOf('"equal"')>-1){
									return 'EQUAL'
								}else return ' - '
							}else{
								return dato;
							}
						}
					});
				}
				else{
					columns.push({data: data[i], title: t, visible:visible});
				}
			}
			strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
			$('#' + dtRender).empty();
			$('#' + dtRender).html(strTable);
			$('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
			$('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
				var title = $(this).text();
				$(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
				$( 'input', this ).on( 'keyup change', function () {
					if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
						var table = $('#' + tableRender).DataTable();
						if ( table.column(i).search() !== this.value ) {
							table
									.column(i)
									.search( this.value )
									.draw();
						}
					}
				} );
			} );
			return columns;
		}

		function buildDatatablePrin(render, columnas, data,suffix_export,orderArray){
			var a=[];b=[];
			var Defs = [];
			var order = [];
			var ini = (columnas.length) -5;
			var kpi = "";
			/*var posProy=0;
			switch (render){
				case 'graficoFirstTimeRight':
					posProy = 2;
					break;
				case 'graficoBenchmarking':
					posProy = 3;
					break;
				/!*case 'graficoDashAsp':
				 table_dt = 'table_DashAsp';
				 dt = 'datatable_DashAsp';
				 posProy = 4;
				 break;*!/
				case 'graficoFirstTimeRightHotProject':
					posProy = 0;
					break;
				case 'graficoBenchmarkingHotProject':
					posProy = 1;
					break;
			}*/
			if (render=='table_FirstTimeRight'){
				kpi = 'FTR';
				order.push([(columnas.length)-2,"desc"]);
			}else if(render=='table_FirstTimeRightHotProject'){
				kpi = 'FTR_HotProject';
				order.push([(columnas.length)-2,"desc"]);
			}else if(render=='table_DashAsp'){
				kpi = 'Dashboard_Asp';
				order.push([(columnas.length)-2,"desc"]);
			}else if (render=='table_BenchmarkingFTR'){
				kpi = 'Benchmarking';
				order.push([(columnas.length)-3,"desc"]);
			}else if (render=='table_BenchmarkingHotProject'){
				kpi = 'Benchmarking_HotProject';
				order.push([(columnas.length)-3,"desc"]);
			}else if (render=='tableModalDetalle'){
				kpi = suffix_export!=null ? suffix_export : '';
				if (orderArray!=null){
					order.push(orderArray);
				}
			}

			for (var i=0; i<=(columnas.length - 1); i++){
				a.push(i);
			}
			//Defs.push({ targets: [4], className: 'dt-body-center' });
			Defs.push({ targets: a, className: 'dt-body-center' });
			for (var i=0; i<=(columnas.length - 1); i++){
				if (columnas[i].visible){
					b.push(i);
				}
			}

			table = $('#'+render).DataTable( {
				dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
				scrollY: '60vh',
				scrollX: true,
				scrollCollapse: true,
				orderCellsTop: true,
				data:data,
				"deferRender": false,
				"processing": true,
				"language": {
					// Replace the Processing... text with an AJAX-loader
					"processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
				},
				"order": order,
				columns: columnas,
				columnDefs: Defs,
				/*columnDefs: [
				 //{ targets: [1], className: 'dt-body-left dt-nowrap' },
				 { targets: [4], className: 'dt-body-center' },
				 { targets: [5,6,7,8,9,10,11,12,13,14,15,16,17,18], className: 'dt-body-center dt-nowrap' }],*/
				lengthMenu: [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
				buttons: [
					{
						extend:'excelHtml5',
						text: 'Table Excel ' + kpi.replace('_',' '),
						exportOptions: {
							columns: b,
							orthogonal: 'export'
						},
						title: 'Mela_Aspir_' + kpi
					}
				],
				"drawCallback": function(settings){
					if (settings.sTableId=='tableModalDetalle'){
						$('[data-toggle="popover"]').popover('destroy');
						$('[data-toggle="popover"]').popover({
							template: '<div class="popover" role="tooltip" style="width: 600px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
						}).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
					}
				}
			} );
		}

		function createTableDt(){
			var strHeader = '';
			var strFooter = '';
			var strTable = '<table id="example" class="display compact stripe" width="100%">' +
					'<thead><tr class="header_dt">';
			var strHeader =
					'<th class="text-center">ID</th>' +
					'<th class="text-center">CU</th>' +
					'<th class="text-center">COUNTRY</th>' +
					'<th class="text-center">CUSTOMER</th>' +
					'<th class="text-center">PROJECT</th>' +
					'<th class="text-center">CREATED DATE</th>' +
					'<th class="text-center">ID USER CREATOR</th>' +
					'<th class="text-center">USER CREATOR</th>' +
					'<th class="text-center">LAST UPDATE</th>' +
					'<th class="text-center">ID USER UPDATE</th>' +
					'<th class="text-center">USER UPDATE</th>' +
					'<th class="text-center">ACTIONS</th>';
			//' + strToolbar + '
			strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody></table>';
			$('#datatable').empty();
			$('#datatable').html(strTable);
			$('#example thead tr').clone(true).appendTo( '#example thead' );
			$('#example thead tr:eq(1) th').addClass('padding-input');
			$('#example thead tr:eq(1) th').each( function (i) {
				var title = $(this).text();
				$(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

				$( 'input', this ).on( 'keyup change', function () {
					if ( table.column(i).search() !== this.value ) {
						table
								.column(i)
								.search( this.value )
								.draw();
					}
				} );
			} );
		}

		function buildDatatable(columnas){
			table = $('#example').DataTable( {
				dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
				scrollY: '50vh',
				scrollX: true,
				scrollCollapse: false,
				scroller: true,
				orderCellsTop: true,
				"ajax": {
					"url": "{{ path('aspir_AspirShowHotProjectData') }}",
					"type": "POST",
					data:  function( d ) {
						d.idproyectos = {{ idproyectos }},
						d.pais        = $("#pais").val(),
						d.fechaIni    = $("#fechaIni").val(),
						d.fechaFin    = $("#fechaFin").val()
					}
				},
				"deferRender": true,
				"processing": true,
				"language": {
					// Replace the Processing... text with an AJAX-loader
					"processing": "<div class='table-loading' style='z-index: 5000'><img src='{{ asset('images/spiral.gif') }}' /></div>"
				},
				columns: columnas,
				columnDefs: [
					{ targets: [0,1,2], className: 'dt-body-left dt-nowrap' },
					{ targets: [5,6,7,8,9,10], className: 'dt-body-center' },
					{ targets: [11], className: 'dt-body-center dt-nowrap' },
					{
						"targets": -1,
						"data": null,
						"searchable": false,
						"orderable": false,
						"className": 'dt-body-center',
						"render": function ( data, type, row ) {
							//return htmlSql;
							return '<div class="btn-group"> ' +
									'<a href="javascript:showModalAddHotProject(1,' + row['id'] + ');" class="btn btn-info edit" data-toggle="tooltip" ' +
									'data-title="Edit" title="Edit">'+
									'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +
									'<a href="javascript:showModalAddHotProject(2,' + row['id'] + ');" class="btn btn-danger delete" data-toggle="tooltip" ' +
									'data-title="Delete" title="Delete" data-container="body">'+
									'<span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>' +
									'</div>';
						}
					},
					{ "width": "90px", "targets": -1 }
				],
				lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
				buttons: [
					{
						text: '<span class="glyphicon glyphicon-plus"></span> Add Hot Project',
						action: function ( e, dt, node, config ) {
							showModalAddHotProject(0,0);
						},
						className: ''
					},
					{
						extend:'excel',
						text: 'Excel',
						exportOptions: {
							columns: [1,2,3,4]
						},
						title: 'info_hot_projects'
					}
				]
			} );
		}

		function createTableDTDetail(data, tableRender, dtRender){
			var strHeader = "";
			var strFooter="";
			var columns = [];
			var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
					'<thead><tr class="header_dt">';
			$('#' + dtRender).empty();
			for (var i=0; i<data.length; i++){
				var title = data[i];
				var t = title.replace(/_/g,' ');
				t = title.replace('#','');

				var visible = title.startsWith('_') ? false : true;
				strHeader += '<th class="text-center">' + t + '</th>';
				if (i==8){
					columns.push({data: data[i], title: t, visible:visible,
						render: function ( dato, type, row ) {
							if (dato>0){
								var kpi="";
								var popup_title = "";
								var strIssuesHtml = "<ol>";
								var strIssuesText = "";
								var url= "";
								if (row.hasOwnProperty('_ISSUES')){
									kpi='ftr';
									popup_title = 'Issues';
									var issues = row['_ISSUES'];
									var arrIssues = issues.split("<br>");
									for (var i=0; i<arrIssues.length; i++){
										strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
										strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
									}
									strIssuesHtml += "</ol>";
								}
								if (type==='display'){
									/*return '<a href="javascript://" ' +
											'onClick=\'generateModal("' + url + '",' + JSON.stringify(parametros) + ',true,"' + table_title +  '","' + subtitle +  '",' + ord +  ')\'">' + dato + '</a>';*/
									return '<a href="javascript://"  data-toggle="popover" data-title="<b>Issues</b>" ' +
											'data-container="body" data-placement="left" data-html="true" ' +
											'data-trigger="focus" ' +
											'data-content="' + strIssuesHtml  + '"' +
											'>' + dato + '</a>';
								}else{
									return dato;
								}
							}
							return dato;
						}
					});
				}else if (title=='_ISSUES'){
					columns.push({data: data[i], title: t, visible:visible,
						render: function ( dato, type, row ) {
							if (dato.length>0){
								var strIssuesHtml = "<ol>";
								var strIssuesText = "";
								if (row.hasOwnProperty('_ISSUES')){
									var issues = row['_ISSUES'];
									var arrIssues = issues.split("<br>");
									for (var i=0; i<arrIssues.length; i++){
										strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
										strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
									}
									strIssuesHtml += "</ol>";
								}
								if (type==='display'){
									return strIssuesHtml;
								}else{
									return strIssuesText;
								}
							}
							return dato;
						}
					});
				}else{
					columns.push({data: data[i], title: t, visible:visible});
				}
			}
			strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
			$('#' + dtRender).empty();
			$('#' + dtRender).html(strTable);
			$('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
			$('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
				var title = $(this).text();
				$(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
				$( 'input', this ).on( 'keyup change', function () {
					if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
						var table = $('#' + tableRender).DataTable();
						if ( table.column(i).search() !== this.value ) {
							table
									.column(i)
									.search( this.value )
									.draw();
						}
					}
				} );
			} );
			return columns;
		}

		$(document).ready(function (){
			$.fn.dataTable.moment( 'YYYY-MMM' );
			$.isLoading({
				text: "Loading"
			});

			$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
				$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
				try{
					resizeChart();

				}catch(err) {
					console.log("Error shown.bs.tab: "+ err.message);
				}
			} );

			$('#Filtros_fechaIni').datepicker({
				dateFormat: 'yy-mm-dd',
				onClose: function (selectedDate){
					$("#Filtros_fechaFin").datepicker("option", "minDate", selectedDate);
				}
			});

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

			var f = new Date();
			var mes = (f.getMonth() + 1);

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

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


			$("#cluster").change(on_cluster_change);
			$("#pais").change(on_pais_change);
			$("#cliente").change(on_cliente_change);
            $("#proyecto").change(on_proyecto_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();
				resizeChart();
			});

			//getChart();

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

			$('#btnSaveContinue').on("click", function () {
				if (dataValidation()){
					saveDataHotProject();
					resetAddRecordDialog(0, 1);
				}
			});

			$('#btnSaveExit').on("click", function () {
				if (dataValidation()){
					saveDataHotProject();
					resetAddRecordDialog(0, 1);
					var dialog = $('#modalAddRecord');
					dialog.modal('hide');
				}
			});

			$('#btnSaveEdit').on("click", function () {
				if (dataValidation()) {
					saveDataHotProject();
					resetAddRecordDialog(0, 1);
					var dialog = $('#modalAddRecord');
					dialog.modal('hide');
				}
			});
		});

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

		}
                
		function on_cluster_change(){
			llenarCombo_pais();
			//llenarCombo_cliente();
            //llenarCombo_proyecto();
            //llenarCombo_asp();
		}

		function on_pais_change(){
			llenarCombo_cliente();
            //llenarCombo_proyecto();
            //llenarCombo_asp();
		}

		function on_cliente_change(){
			llenarCombo_proyecto();
            //llenarCombo_asp();
		}

		function on_proyecto_change(){
			llenarCombo_asp();
		}     
        function limpiar(valor){
        	if (valor=='cluster'){
        		$("#pais option").remove();
				$("#pais").append('<option value="TODOS">-- All --</option>');
        		$("#cliente option").remove();
				$("#cliente").append('<option value="TODOS">-- All --</option>');
				$("#proyecto option").remove();
				$("#proyecto").append('<option value="TODOS">-- All --</option>');
				$("#asp option").remove();
				$("#asp").append('<option value="TODOS">-- All --</option>');
        	}else if (valor=='pais'){
        		$("#cliente option").remove();
				$("#cliente").append('<option value="TODOS">-- All --</option>');
        		$("#proyecto option").remove();
				$("#proyecto").append('<option value="TODOS">-- All --</option>');
				$("#asp option").remove();
				$("#asp").append('<option value="TODOS">-- All --</option>');
        	}else if (valor=='cliente'){        		
        		$("#proyecto option").remove();
				$("#proyecto").append('<option value="TODOS">-- All --</option>');
				$("#asp option").remove();
				$("#asp").append('<option value="TODOS">-- All --</option>');
        	}

        }     
		function llenarCombo_pais(){
			$("#pais option").remove();
			$("#pais").append('<option value="TODOS">-- All --</option>');
			if ($("#cluster").val() != "TODOS"){
				var data = {};
				//validacion por perfil
				if ($("#cluster_user").val()!=''){
					var cu = $("#cluster_user").val();
				}else{
					var cu = $("#cluster").val();
				}
				data['cluster'] = $("#cluster").val();
				data['inicio'] = $("#Filtros_fechaIni").val();
				data['fin'] = $("#Filtros_fechaFin").val();
				if (data['cluster']!="TODOS"){
					$.getJSON('{{path('aspir_llenarPais')}}', data, function (data){
						var regions = data.region;
						$("#pais option").remove();
						$("#pais").append('<option value="TODOS">-- All --</option>');

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

		function llenarCombo_cliente(){
			$("#cliente option").remove();
			$("#cliente").append('<option value="TODOS">-- All --</option>');
			//validacion por perfil
			if ($("#cluster_user").val()!=''){
				var cu = $("#cluster_user").val();
			}else{
				var cu = $("#cluster").val();
			}
			if ($("#country_user").val()!=''){
				var pais = $("#country_user").val();
			}else{
				var pais = $("#pais").val();
			}
			var data = {};
			data['pais'] = pais; //$("#pais").val();
			data['cu'] = cu; //$("#cluster").val();
			data['inicio'] = $("#Filtros_fechaIni").val();
			data['fin'] = $("#Filtros_fechaFin").val();

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

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

		function llenarCombo_proyecto(){
			$("#proyecto option").remove();
			$("#proyecto").append('<option value="TODOS">-- All --</option>');
			//validacion por perfil
			if ($("#cluster_user").val()!=''){
				var cu = $("#cluster_user").val();
			}else{
				var cu = $("#cluster").val();
			}
			if ($("#country_user").val()!=''){
				var pais = $("#country_user").val();
			}else{
				var pais = $("#pais").val();
			}
			var data = {};
			data['pais'] = pais; //$("#pais").val();
			data['cu'] = cu; //$("#cluster").val();
			data['cliente'] = $("#cliente").val();
			data['inicio'] = $("#Filtros_fechaIni").val();
			data['fin'] = $("#Filtros_fechaFin").val();

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

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

				});
			}
			limpiar('cliente');
			
			$.isLoading("hide");
			//on_proyecto_change();
		}

		function llenarCombo_asp(){
			$("#asp option").remove();
			$("#asp").append('<option value="TODOS">-- All --</option>');
			//validacion por perfil
			if ($("#cluster_user").val()!=''){
				var cu = $("#cluster_user").val();
			}else{
				var cu = $("#cluster").val();
			}
			if ($("#country_user").val()!=''){
				var pais = $("#country_user").val();
			}else{
				var pais = $("#pais").val();
			}
			var data = {};

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

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

				});
			}
			$.isLoading("hide");
		}

		function calculateTREND(monitor,monitor1){
			var flag=0;
			var strValue="";
			if (monitor.length>0 && monitor1.length>0){
				var header = Object.keys(monitor[0]);
				var headerMonitor1 = Object.keys(monitor1[0]);
				for (var i=0; i< monitor.length; i++){
					flag = 0;
					strValue = " - ";
					/*console.log('monitor[' + i + '][' + header[0] + '] = ' + monitor[i][header[0]]);
					console.log('monitor[' + i + '][' + header[1] + '] = ' + monitor[i][header[1]]);
					console.log('monitor[' + i + '][' + header[2] + '] = ' + monitor[i][header[2]]);
					console.log('monitor[' + i + '][' + header[3] + '] = ' + monitor[i][header[3]]);*/

					strValue="";
					for (var k = 0; k < monitor1.length; k++){
						if (flag==0){
							if((monitor[i][header[1]]==monitor1[k][headerMonitor1[1]]) &&
									(monitor[i][header[2]]==monitor1[k][headerMonitor1[2]]) &&
									(monitor[i][header[3]]==monitor1[k][headerMonitor1[3]]) &&
									(monitor[i][header[4]]==monitor1[k][headerMonitor1[4]]) ){

								flag=1;
								if (parseFloat(monitor[i][header[5]]) > parseFloat(monitor1[k][headerMonitor1[5]]) ){
									strValue = '<img src="{{ asset('images/up.png') }}" alt="up" title="up">';
									//console.log('up');
								}else if (parseFloat(monitor[i][header[5]]) < parseFloat(monitor1[k][headerMonitor1[5]]) ){
									strValue = '<img src="{{ asset('images/down_red.png') }}" alt="down"  title="down">';
									//console.log('down');
								}else if (parseFloat(monitor[i][header[5]]) == parseFloat(monitor1[k][headerMonitor1[5]]) ){
									strValue = '<img src="{{ asset('images/equal.png') }}" alt="equal" title="equal">';
									//console.log('equal');
								}
							}
						}
					}
					if (flag==0){
						monitor[i]['TREND'] = ' - ';
					}else{
						monitor[i]['TREND'] = strValue;
					}
				}
			}
			return monitor;
		}

		function getChart(){
			var inicio = $('#Filtros_fechaIni').val();
			var fin = $('#Filtros_fechaFin').val();
			var pais = $('#pais').val();
			var cu = $('#cluster').val();
			var cliente = $('#cliente').val();
			var proyecto = $('#proyecto').val();
			var asp = $('#asp').val();
            var valor = $('#Filtros_fechaIni').val() + " | "+ $('#Filtros_fechaFin').val();
		    //validacion por perfil
			if($('#cluster_user').val()!=''){
                var cu = $('#cluster_user').val();
            } 
            if($('#country_user').val()!=''){
                var pais = $('#country_user').val();
            }
			if($('#asp_user').val()!=''){
                var asp = $('#asp_user').val();
            }
            //fin validacion por perfil
			var parametros = {
            	'FechaInicio': inicio,
                'FechaFin': fin,
                'pais': pais,
                'cu': cu,
                'cliente': cliente,
                'proyecto': proyecto,
                'asp': asp,
                'date': valor
			};

			$.getJSON('{{path('aspir_DashboardAspir',{'idproyectos':idproyectos})}}', parametros, function (data){
				var chart = data;
				var url = null;
				var col,datos,series;
				projectList[0] = chart.graficoFirstTimeRightHotProject.lstProy.split(",");
				projectList[1] = chart.graficoBenchmarkingHotProject.lstProy.split(",");
				projectList[2] = chart.graficoFirstTimeRight.lstProy.split(",");
				projectList[3] = chart.graficoBenchmarking.lstProy.split(",");
				//projectList[4] = chart.graficoDashAsp.lstProy.split(",");
				destroyGraphs();

				/********************************************************************************
				 *   -------  FIRST TIME RIGHT
				 * *******************************************************************************/
				/*if (chart.graficoFirstTimeRight.length > 0){
					var categoriaGraficoFirstTimeRight = getDataToObject(chart.graficoFirstTimeRight, Object.keys(chart.graficoFirstTimeRight[0]), 0, false);
					var chartGraficoFirstTimeRight = getDataToObjectLinea(chart.graficoFirstTimeRight, Object.keys(chart.graficoFirstTimeRight[0]));
					createChartLinea('graficoFirstTimeRight', categoriaGraficoFirstTimeRight, chartGraficoFirstTimeRight, '',
							null, [80, 'Rob=80'], [85,'Com=85'], [90,'Str=90'], inicio, fin, pais, cu, null, chart.graficoFirstTimeRight);
				}else{
					$("#graficoFirstTimeRight")
							.empty()
							.append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}*/

				if (chart.graficoFirstTimeRight.categories.length > 0){
					$("#graficoFirstTimeRight").empty();
					//series = getDataToObjectSerie(chart.graficoFirstTimeRight.data, Object.keys(chart.graficoFirstTimeRight.data[0]));
					series = getDataToObjectSerieAll(chart.graficoFirstTimeRight.data, Object.keys(chart.graficoFirstTimeRight.data[0]));
					createChartLinea2('graficoFirstTimeRight', chart.graficoFirstTimeRight.categories, series, '',
							null, [80, 'Rob=80%'], [85,'Com=85%'], [90,'Str=90%'], inicio, fin, null,null,null, chart.graficoFirstTimeRight.data);
				}else{
					$("#graficoFirstTimeRight").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				if (chart.tablaFirstTimeRight.length > 0){
					$("#datatable_FirstTimeRight").empty();
					col = createTableDT(Object.keys(chart.tablaFirstTimeRight[0]),'table_FirstTimeRight', 'datatable_FirstTimeRight');
					buildDatatablePrin('table_FirstTimeRight',col,chart.tablaFirstTimeRight,null,null);
				}else{
					$("#datatable_FirstTimeRight").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				/********************************************************************************
				 *   -------  BENCHMARKING FTR
				 * *******************************************************************************/
				/*if (chart.graficoBenchmarking.length > 0){
					var categoriaGraficoBenchmarking = getDataToObject(chart.graficoBenchmarking,
							Object.keys(chart.graficoBenchmarking[0]), 0, false);
					var chartGraficoBenchmarking = getDataToObjectLinea2(chart.graficoBenchmarking,
							Object.keys(chart.graficoBenchmarking[0]));
					createChartLinea('graficoBenchmarking', categoriaGraficoBenchmarking, chartGraficoBenchmarking, '', null, [80, 'Rob=80'], [85,'Com=85'], [90,'Str=90'], inicio, fin, pais, cu, null, chart.graficoBenchmarking);
				}else{
					$("#graficoBenchmarking")
							.empty()
							.append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}*/
				if (chart.graficoBenchmarking.categories.length > 0){
					//var series = getDataToObjectSerie(chart.graficoBenchmarking.data, Object.keys(chart.graficoBenchmarking.data[0]));
					$("#graficoBenchmarking").empty();
					series = getDataToObjectSerieAll(chart.graficoBenchmarking.data,Object.keys(chart.graficoBenchmarking.data[0]));
					createChartLinea2('graficoBenchmarking', chart.graficoBenchmarking.categories, series, '',
							null, [80, 'Rob=80%'], [85,'Com=85%'], [90,'Str=90%'], inicio, fin, null, null, null, chart.graficoBenchmarking.data);
				}else{
					$("#graficoBenchmarking").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				/*if (chart.tablaFirstTimeRight.length > 0){
					col = createTableDT(Object.keys(chart.tablaFirstTimeRight[0]),'table_FirstTimeRight', 'datatable_FirstTimeRight');
					buildDatatablePrin('table_FirstTimeRight',col,chart.tablaFirstTimeRight);
				}else{
					$("#table_FirstTimeRight").empty().append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}
				*/
				if (chart.tablabenchmarking.length > 0){
					$("#datatable_BenchmarkingFTR").empty();
					datos = calculateTREND(chart.tablabenchmarking, chart.tablabenchmarkingAnterior);
					col = createTableDT(Object.keys(datos[0]),'table_BenchmarkingFTR', 'datatable_BenchmarkingFTR');
					buildDatatablePrin('table_BenchmarkingFTR',col,datos,null,null);
				}else{
					$("#datatable_BenchmarkingFTR").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				/********************************************************************************
				 *   -------  DASHBOARD ASP
				 * *******************************************************************************/
				/*if (chart.graficoDashAsp.length > 0){
					var categoriaGraficoDashAsp = getDataToObject(chart.graficoDashAsp, Object.keys(chart.graficoDashAsp[0]), 0, false);
					var chartGraficoDashAsp = getDataToObjectLinea(chart.graficoDashAsp, Object.keys(chart.graficoDashAsp[0]));
                                        createChartLinea('graficoDashAsp', categoriaGraficoDashAsp, chartGraficoDashAsp, '', null, [80, 'Rob=80'], [85,'Com=85'], [90,'Str=90'], inicio, fin, pais, cu, null, chart.graficoDashAsp);
				}else{
					$("#graficoDashAsp")
							.empty()
							.append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}*/
				if (chart.graficoDashAsp.categories.length > 0){
					$("#graficoDashAsp").empty();
					series = getDataToObjectSerieAll(chart.graficoDashAsp.data, Object.keys(chart.graficoDashAsp.data[0]));

					createChartLinea2('graficoDashAsp', chart.graficoDashAsp.categories, series, '',
							null, [80, 'Rob=80%'], [85,'Com=85%'], [90,'Str=90%'], inicio, fin, null,null, null, chart.graficoDashAsp.data);
				}else{
					$("#graficoDashAsp").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				if (chart.tablaDashAsp.length > 0){
					$("#datatable_DashAsp").empty();
					col = createTableDT(Object.keys(chart.tablaDashAsp[0]),'table_DashAsp', 'datatable_DashAsp');
					buildDatatablePrin('table_DashAsp',col,chart.tablaDashAsp,null,null);
				}else{
					$("#datatable_DashAsp").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				/********************************************************************************
				 *   -------  FTR HOT PROJECT
				 * *******************************************************************************/
				/*if (chart.graficoFirstTimeRightHotProject.categories.length > 0){
					var categoriaGraficoFirstTimeRightHotProject = getDataToObject(chart.graficoFirstTimeRightHotProject,
							Object.keys(chart.graficoFirstTimeRightHotProject[0]), 0, false);
					var chartGraficoFirstTimeRightHotProject = getDataToObjectLinea(chart.graficoFirstTimeRightHotProject,
							Object.keys(chart.graficoFirstTimeRightHotProject[0]));

					createChartLinea('graficoFirstTimeRightHotProject', categoriaGraficoFirstTimeRightHotProject,
							chartGraficoFirstTimeRightHotProject, '',
							null, [80, 'Rob=80'], [85,'Com=85'], [90,'Str=90'], inicio, fin, pais, cu, null,
							chart.graficoFirstTimeRightHotProject);
				}else{
					$("#graficoFirstTimeRightHotProject")
							.empty()
							.append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}*/
				if (chart.graficoFirstTimeRightHotProject.categories.length > 0){
					$("#graficoFirstTimeRightHotProject").empty();
					//series = getDataToObjectSerie(chart.graficoFirstTimeRightHotProject.data, Object.keys(chart.graficoFirstTimeRightHotProject.data[0]));
					series = getDataToObjectSerieAll(chart.graficoFirstTimeRightHotProject.data,Object.keys(chart.graficoFirstTimeRightHotProject.data[0]));
					createChartLinea2('graficoFirstTimeRightHotProject', chart.graficoFirstTimeRightHotProject.categories, series, '',
							null, [80, 'Rob=80%'], [85,'Com=85%'], [90,'Str=90%'], inicio, fin, null,null, null, chart.graficoFirstTimeRightHotProject.data);
				}else{
					$("#graficoFirstTimeRightHotProject").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				// Tabla tablaFirstTimeRightHotProject
				if (chart.tablaFirstTimeRightHotProject.length > 0){
					$("#datatable_FirstTimeRightHotProject").empty();
					col = createTableDT(Object.keys(chart.tablaFirstTimeRightHotProject[0]),'table_FirstTimeRightHotProject', 'datatable_FirstTimeRightHotProject');
					buildDatatablePrin('table_FirstTimeRightHotProject',col,chart.tablaFirstTimeRightHotProject,null,null);
				}else{
					$("#datatable_FirstTimeRightHotProject").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				/********************************************************************************
				 *   -------  HOT PROJECT BENCHMARKING
				 * *******************************************************************************/
				/*if (chart.graficoBenchmarkingHotProject.length > 0){
					var categoriaGraficoBenchmarkingHotProject = getDataToObject(chart.graficoBenchmarkingHotProject,
							Object.keys(chart.graficoBenchmarkingHotProject[0]), 0, false);
					var chartGraficoBenchmarkingHotProject = getDataToObjectLinea2(chart.graficoBenchmarkingHotProject,
							Object.keys(chart.graficoBenchmarkingHotProject[0]));

					createChartLinea('graficoBenchmarkingHotProject', categoriaGraficoBenchmarkingHotProject,
							chartGraficoBenchmarkingHotProject, '',
							null, [80, 'Rob=80'], [85,'Com=85'], [90,'Str=90'], inicio, fin, pais, cu, null,
							chart.graficoBenchmarkingHotProject);
				}else{
					$("#graficoBenchmarkingHotProject")
							.empty()
							.append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
				}*/
				if (chart.graficoBenchmarkingHotProject.categories.length > 0){
					$("#graficoBenchmarkingHotProject").empty();
					series = getDataToObjectSerieAll(chart.graficoBenchmarkingHotProject.data,Object.keys(chart.graficoBenchmarkingHotProject.data[0]));
					createChartLinea2('graficoBenchmarkingHotProject', chart.graficoBenchmarkingHotProject.categories, series, '',
							null, [80, 'Rob=80%'], [85,'Com=85%'], [90,'Str=90%'], inicio, fin, null,null, null, chart.graficoBenchmarkingHotProject.data);
				}else{
					$("#graficoBenchmarkingHotProject").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				if (chart.tablabenchmarkingHotProject.length > 0){
					$("#datatable_BenchmarkingHotProject").empty();
					datos = calculateTREND(chart.tablabenchmarkingHotProject, chart.tablabenchmarkingAnteriorHotProject);
					col = createTableDT(Object.keys(datos[0]),'table_BenchmarkingHotProject', 'datatable_BenchmarkingHotProject');
					buildDatatablePrin('table_BenchmarkingHotProject',col,datos,null,null);
				}else{
					$("#datatable_BenchmarkingHotProject").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				if (chart.graficoSystemFaultFound.categories.length > 0){
					$("#graficoSystemFaultFound").empty();
					url = "{{ path('aspir_detalle_graficoSystemFaultFound') }}";
					series = getDataToObjectSerieAll(chart.graficoSystemFaultFound.data,Object.keys(chart.graficoSystemFaultFound.data[0]));
					createChartBarra2('graficoSystemFaultFound', chart.graficoSystemFaultFound.categories, series, 'System Fault Found',
							null, parametros, inicio, fin,null,[0,"desc"], url, chart.graficoSystemFaultFound.data);
					url = null;
				}else{
					$("#graficoSystemFaultFound").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				if (chart.graficoIssuesFound.categories.length > 0){
					$("#graficoIssuesFound").empty();
					url = "{{ path('aspir_detalle_graficoIssuesFound') }}";
					series = getDataToObjectSerieAll(chart.graficoIssuesFound.data,Object.keys(chart.graficoIssuesFound.data[0]));
					createChartBarra2('graficoIssuesFound', chart.graficoIssuesFound.categories, series, 'Issues Found',
							null, parametros, inicio, fin, null, [0,"desc"], url, chart.graficoIssuesFound.data);
					url = null;
				}else{
					$("#graficoIssuesFound").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}

				$.isLoading("hide");
			});
		}

		function getDataToObject(data, header, key, int){
			var arrayReturn = new Array();
			for (var i = 0; i < data.length; i++){
				var valor = data[i][header[key]];

				if (int){
					valor = parseFloat(data[i][header[key]]);
				}
				arrayReturn.push(valor);
			}
			return arrayReturn;
		}

		function getDataToObjectSerie(data, header){
			var arrayReturn = new Array();
			var data1 = new Array();

			for (var i = 0; i < data.length; i++){
				data1.push(parseFloat(data[i][header[header.length - 1]]));
			}
			arrayReturn.push({'name': header[header.length - 1], 'data': data1, 'dataLabels': {'enabled': true}});
			return arrayReturn;
		}

		function getDataToObjectSerieAll(data, header){
			var arrayReturn = new Array();
			var data1 = new Array();
			var menor = 1000;
			var mayor = -1;

			for (var i = 0; i < header.length; i++){
				var dataAux = new Array();
				if (header[i].indexOf('_cat_') < 0){
					for (var j=0; j<data.length; j++){
						var valor = parseFloat(data[j][header[i]]);
						dataAux.push(valor);
						if (valor < menor){
							menor = valor;
						}
						if (valor > mayor){
							mayor = valor;
						}
					}
					arrayReturn.push({'name': header[i], 'data': dataAux, 'dataLabels': {'enabled': true}});
				}
			}
			data1[0] = arrayReturn;
			data1[1] = menor;
			data1[2] = mayor;
			return data1;
		}

		function getDataToObjectLinea(data, header){
			var arrayReturn = new Array();
			var data1 = new Array();
           
			for (var i = 0; i < data.length; i++){
				data1.push(parseFloat(data[i][header[1]]));
			}
			arrayReturn.push({'name': header[1], 'data': data1, 'dataLabels': {'enabled': true}});
			return arrayReturn;
		}
                
		function getDataToObjectLinea2(data, header){
			var arrayReturn = new Array();
			var data1 = new Array();//EECA
			var data2 = new Array();//FBAT
			var data3 = new Array();//IB              
			var data4 = new Array();//LAN
            var data5 = new Array();//LAS
            var data6 = new Array();//NOCE
            var data7 = new Array();//SEM
            var data8 = new Array();//UKI
            var data9 = new Array();//WE
			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]]));
				data5.push(parseFloat(data[i][header[5]]));
				data6.push(parseFloat(data[i][header[6]]));        
				data7.push(parseFloat(data[i][header[7]]));
				data8.push(parseFloat(data[i][header[8]]));
				data9.push(parseFloat(data[i][header[9]]));                                        
			}

			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}});
            arrayReturn.push({'name': header[5], 'data': data5, 'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[6], 'data': data6, 'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[7], 'data': data7, 'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[8], 'data': data8, 'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[9], 'data': data9, 'dataLabels':{'enabled':true}});
			//console.log(arrayReturn);
			return arrayReturn;
		}                

		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],null); //, 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],null); //, this.series.name+'='+ this.y);
								}
							}
						}
					}
				};
			}

			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: {
					spacingBottom: 15,
					spacingTop: 40,
					spacingLeft: 40,
					spacingRight: 40,
					height: 450,
					marginBottom: 130,
					borderColor: '#428bca',
					borderWidth: 1,
					type: 'line',
					shadow: true,
					zoomType: 'x',
					backgroundColor: {
						linearGradient: [0, 0, 0, 450],
						stops: [
							[0, 'rgba(66, 139, 202, 0.3)'], //start
							[0.5, '#ffffff'], // middle
							[1, 'rgba(66, 139, 202, 0.2)'] //end
						]
					}
				},
				plotOptions:{
					series:{
						shadow:true,
						dataLabels: {
							enabled: true,
							style: {
								fontWeight: 'bold'
							}
						}
					}
				},
				legend: {
					backgroundColor: 'rgba(66, 139, 202, 0.5)'
				},
				xAxis: {
					categories: categoria,
					lineWidth: 1,
					lineColor: '#4c4c4c',
					tickColor: '#4c4c4c',
					tickWidth: 1,
					labels: {
						rotation: -30,
						style: {
							fontSize: '9px',
							color: '#4c4c4c'
						}
					},
					overflow: 'justify',
					scrollbar: {
						enabled: true
					}
				},
				yAxis:
					[
						{
							min: 60,
							max: w,
							title: {text: ''},
							lineWidth: 1,
							lineColor: '#4c4c4c',
							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'],
				colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
					"#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"],
				series: data
			};

			if (target_line != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
					value: target_line[0],
					color: '#f7e81d', //Verde Grama
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
							},
						text: target_line[1]
					}
				};
				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Grama
					from: 84.99,
					to: 80,
					color: 'rgba(46, 130, 1, 0.3)',
					label: {
						text: 'ROBUST',
						style: {
							color: '#606060'
						}
					}
				};*/
			}

			if (target_line2 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
					value: target_line2[0],
					color: '#7cf23c', //Verde Manzana
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
							},
						text: target_line2[1]
					}
				};
				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Manzana
					from: 89.99,
					to: 85,
					color: 'rgba(124, 242, 60, 0.3)',
					label: {
						text: 'COMMITMENT',
						style: {
							color: '#606060'
						}
					}
				};*/
			}

			if (target_line3 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =	{
					value: target_line3[0],
					color: '#2e8201', //Amarillo
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line3[1]
					}
				};
				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ //Amarillo
					from: 90.00,
					to: 100,
					color: 'rgba(247, 232, 29, 0.3)',
					label: {
						text: 'STRETCH',
						style: {
							color: '#606060'
						}
					}
				}*/
			}

			// 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],null); //, this.series.name+'='+ this.y);
																}
															}
												}
									}
						};
			}

			var menor = 200.00;

			for (var i=0; i<rawData.length; i++){
				var valorActual= parseFloat(rawData[i][data[0].name]);
				if (valorActual <= menor){
					menor = valorActual;
				}
			}
			if (menor >50) menor= 50;
			options.yAxis[0].min=menor;
			return $('#' + render).highcharts(options);
		}


		function createChartLinea2(render, categoria, series, title, w,
								   target_line, target_line2, target_line3, inicio, fin, pais, orderArray, path, rawData){
			var table_dt = "";
			var dt = "";
			var posProy = 0;
			var col = 4;
			var rotation = 0;
			var step = Math.ceil(rawData.length/50);
			switch (render){
				case 'graficoFirstTimeRight':
					table_dt = 'table_FirstTimeRight';
					dt = 'datatable_FirstTimeRight';
					posProy = 2;
					break;
				case 'graficoBenchmarking':
					table_dt = 'table_BenchmarkingFTR';
					dt = 'datatable_BenchmarkingFTR';
					posProy = 3;
					break;
				case 'graficoDashAsp':
					/*table_dt = 'table_DashAsp';
					dt = 'datatable_DashAsp';
					posProy = 4;*/
					rotation = -45;
					break;
				case 'graficoFirstTimeRightHotProject':
						table_dt = 'table_FirstTimeRightHotProject';
						dt = 'datatable_FirstTimeRightHotProject';
						posProy = 0;
					break;
				case 'graficoBenchmarkingHotProject':
					table_dt = 'table_BenchmarkingHotProject';
					dt = 'datatable_BenchmarkingHotProject';
					posProy = 1;
					break;
			}
			var options = {
				chart: {
					spacingBottom: 10, //35
					spacingTop: 40,
					spacingLeft: 40,
					spacingRight: 40,
					height: 450,
					marginBottom: 110, //180
					borderColor: '#428bca',
					borderWidth: 1,
					type: 'line',
					shadow: true,
					zoomType: 'x',
					backgroundColor: {
						linearGradient: [0, 0, 0, 450],
						stops: [
							[0, 'rgba(66, 139, 202, 0.3)'], //start
							[0.5, '#ffffff'], // middle
							[1, 'rgba(66, 139, 202, 0.2)'] //end
						]
					}
				},
				credits: {
					enabled: false
				},
				plotOptions:{
					series:{
						shadow:true,
						dataLabels: {
							enabled: true,
							style: {
								fontWeight: 'bold'
							}
						},
						events: {
							legendItemClick: function () {
								var visibility = this.visible;
								var serie = this.name;

								if ( $.fn.DataTable.isDataTable( '#' + table_dt ) ) {
									var table = $('#' + table_dt).DataTable();
									$.fn.dataTable.ext.search.push(
											function( settings, searchData, index, rowData, counter ) {

												if ( settings.nTable.id !== table_dt ) {
													return true;
												}
												// Don't display rows if nothing is checked
												if (projectList[posProy].length === 0) {
													return false;
												}

												if (projectList[posProy].includes(searchData[col])) {
													return true;
												}
												return false;
											}
									);
									var index = projectList[posProy].indexOf( serie );

									if (!visibility && index === -1) {
										projectList[posProy].push(serie);
									} else if (visibility && index > -1) {
										projectList[posProy].splice(index, 1);
									}

									table.draw();
								}
							}
						}
					}
				},
				legend: {
					backgroundColor: 'rgba(66, 139, 202, 0.5)'
				},
				xAxis: {
					categories: [],
					lineWidth: 1,
					lineColor: '#4c4c4c',
					//tickColor: '#4c4c4c',
					//tickWidth: 1,
					//minorTickWidth: 1,
					labels: {
						groupedOptions: [{ // 1st-level
							//autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
							rotation: 0,
							lineWidth: 1,
							tickWidth: 1,
							style: {
								fontSize: '10px',
								color: '#333333'
								//color: '#4c4c4c'
							}
						}, // 2nd-level
							{
								//autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
								rotation: rotation,
								lineWidth: 0,
								tickWidth: 0,
								//align: 'right',
								style: {
									fontSize: '9px',
									color: '#333333'
									//color: '#4c4c4c'
								}
							}
						],
						step: step,
						lineWidth: 0,
						tickWidth: 0,
						rotation: rotation,
						style: {
							fontSize: '10px',
							color: '#333333'
							//color: '#4c4c4c'
						},
						formatter: function () {//use formatter to check if length of string is greater than 20 and maintain its width.
							if(this.value.length > 20){
								return this.value.substring(0, 17) + '...';
							}
							return this.value;
						}
					},
					overflow: 'justify',
					scrollbar: {
						enabled: false
					}
				},
				yAxis:
						[
							{
								min: 50,
								max: w,
								title: {text: 'Percent FTR (%)'},
								lineWidth: 1,
								lineColor: '#4c4c4c',
								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'],
				//colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
				//	'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
				colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
					"#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
					'#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
					'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a',
					'#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
					'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
				series: series[0]
			};

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

				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Grama
				 from: 84.99,
				 to: 80,
				 color: 'rgba(46, 130, 1, 0.3)',
				 label: {
				 text: 'ROBUST',
				 style: {
				 color: '#606060'
				 }
				 }
				 };*/
			}

			if (target_line2 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
					value: target_line2[0],
					color: '#7cf23c', //Verde Manzana
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line2[1]
					}
				};
				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Manzana
				 from: 89.99,
				 to: 85,
				 color: 'rgba(124, 242, 60, 0.3)',
				 label: {
				 text: 'COMMITMENT',
				 style: {
				 color: '#606060'
				 }
				 }
				 };*/
			}

			if (target_line3 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =	{
					value: target_line3[0],
					color: '#2e8201', //Amarillo
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line3[1]
					}
				};
				/*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] = { //Amarillo
					from: 90.00,
					to: 100,
					color: 'rgba(247, 232, 29, 0.3)',
					label: {
						text: 'STRETCH',
						style: {
							color: '#606060'
						}
					}
				}*/
			}

			// 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],orderArray); //, this.series.name+'='+ this.y);
								}
							}
						}
					}
				};
			}

			var num = categoria.length;

			var baseMargin = render=='graficoDashAsp' ? 170 : 90;
			var marginBottom = baseMargin + ((num-1) * 20);
			var menor = series[1];
			var mayor = series[2];
			options.chart.marginBottom = marginBottom;


			for (var k=0; k<rawData.length; k++){
				var hasThisCategory = false;
				var categoryIndex = -1;
				var categoryPath = options.xAxis.categories;
				/*var valorActual= parseFloat(rawData[k][series[0].name]);

				if (valorActual <= menor){
					menor = valorActual;
				}*/

				var lastCat = categoria[categoria.length - 1]['sql_name'];

				if (categoria.length>=1){ //Si hay 2 o mas categorias

					// I. level of categories
					if (categoria.length >= 1) {
						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[0]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});

						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[0]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >= 3){
						// II. level of categories
						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[1]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[1]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >=4){
						// III. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[2]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[2]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >=5){
						// IV. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[3]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[3]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}
					if (categoria.length >=6){
						// V. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[4]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[4]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}


					// Last level of categories
					if (categoria.length >1) {
						categoryPath = categoryPath[categoryIndex].categories;
					}else{
						//categoryPath = categoryPath[categoryIndex].categories;
					}
					hasThisCategory = false;
					categoryIndex = -1;

					Highcharts.each(categoryPath, function(category, i) {
						if (category === rawData[k][lastCat]) {
							hasThisCategory = true;
						}
					});
					if (!hasThisCategory) {
						categoryPath.push(rawData[k][lastCat]);
					}
				}
			}
			if (menor >50) menor= 50;
			options.yAxis[0].min=menor;

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

		function createChartBarra2(render, categoria, series, title, w,
								   parametros, inicio, fin, pais, orderArray, path, rawData){
			var table_dt = "";
			var dt = "";
			var posProy = 0;
			var col = 4;
			var rotation = 0;
			//var step = rawData.length >30 ? Math.ceil(rawData.length/30) : 1 ;
			var data = series[0];
			switch (render){
				case 'graficoFirstTimeRight':
					table_dt = 'table_FirstTimeRight';
					dt = 'datatable_FirstTimeRight';
					posProy = 2;
					break;
				case 'graficoBenchmarking':
					table_dt = 'table_BenchmarkingFTR';
					dt = 'datatable_BenchmarkingFTR';
					posProy = 3;
					col=3;
					break;
				case 'graficoDashAsp':
					/*table_dt = 'table_DashAsp';
					 dt = 'datatable_DashAsp';
					 posProy = 4;*/
					rotation = -45;
					break;
				case 'graficoFirstTimeRightHotProject':
					table_dt = 'table_FirstTimeRightHotProject';
					dt = 'datatable_FirstTimeRightHotProject';
					posProy = 0;
					break;
				case 'graficoBenchmarkingHotProject':
					table_dt = 'table_BenchmarkingHotProject';
					dt = 'datatable_BenchmarkingHotProject';
					posProy = 1;
					col=3;
					break;
			}
			var options = {
				chart: {
					spacingBottom: 10, //35
					spacingTop: 40,
					spacingLeft: 40,
					spacingRight: 40,
					height: 450,
					marginBottom: 110, //180
					borderColor: '#428bca',
					borderWidth: 1,
					type: 'bar',
					shadow: true,
					//zoomType: 'xy',
					credits: {
						enabled: false
					},
					backgroundColor: {
						linearGradient: [0, 0, 0, 450],
						stops: [
							[0, 'rgba(66, 139, 202, 0.3)'], //start
							[0.5, '#ffffff'], // middle
							[1, 'rgba(66, 139, 202, 0.2)'] //end
						]
					}
				},
				credits: {
					enabled: false
				},
				plotOptions:{
					bar: {
						dataLabels: {
							enabled: true
						}
					},
					series:{
						shadow:true,
						dataLabels: {
							enabled: true,
							style: {
								fontWeight: 'bold'
							}
						},
						events: {
							legendItemClick: function () {
								var visibility = this.visible;
								var serie = this.name;

								if ( $.fn.DataTable.isDataTable( '#' + table_dt ) ) {
									var table = $('#' + table_dt).DataTable();
									$.fn.dataTable.ext.search.push(
											function( settings, searchData, index, rowData, counter ) {

												if ( settings.nTable.id !== table_dt ) {
													return true;
												}
												// Don't display rows if nothing is checked
												if (projectList[posProy].length === 0) {
													return false;
												}

												if (projectList[posProy].includes(searchData[col])) {
													return true;
												}
												return false;
											}
									);
									var index = projectList[posProy].indexOf( serie );

									if (!visibility && index === -1) {
										projectList[posProy].push(serie);
									} else if (visibility && index > -1) {
										projectList[posProy].splice(index, 1);
									}

									table.draw();
								}
							}
						}
					}
				},
				legend: {
					backgroundColor: 'rgba(66, 139, 202, 0.5)'
				},
				xAxis: {
					categories: [],
					lineWidth: 1,
					lineColor: '#4c4c4c',
					//tickColor: '#4c4c4c',
					tickWidth: 0,
					//minorTickWidth: 1,
					labels: {
						groupedOptions: [{ // 1st-level
							//autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
							rotation: 0,
							lineWidth: 0,
							tickWidth: 0,
							style: {
								fontSize: '10px',
								color: '#333333'
								//color: '#4c4c4c'
							}
						}, // 2nd-level
							{
								//autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
								rotation: rotation,
								lineWidth: 0,
								tickWidth: 0,
								//align: 'right',
								style: {
									fontSize: '10px',
									color: '#333333'
									//color: '#4c4c4c'
								}
							}
						],
						//step: step,
						lineWidth: 0,
						tickWidth: 0,
						rotation: rotation,
						style: {
							fontSize: '10px',
							color: '#333333'
							//color: '#4c4c4c'
						},
						formatter: function () {//use formatter to check if length of string is greater than 20 and maintain its width.
							if(this.value.length > 30){
								return this.value.substring(0, 27) + '...';
							}
							return this.value;
						}
					},
					//overflow: 'justify',
					min: 0,
					max: 8,
					scrollbar: {
						enabled: true
					}
				},
				yAxis:{
					min: 0,
					max: 1000,
					title: {text: ''},
					lineWidth: 1,
					lineColor: '#4c4c4c',
					plotLines: [
						{
							value: 0,
							width: 1,
							color: '#808080'
						}
					]
				},
				title: {text: title},
				tooltip: {shared: true},
				//colors: ['#a1c517', '#0082b6', '#b88fef', '#009045', '#db004f'],
				//colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
				//	'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
				colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
					"#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
					'#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
					'#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a',
					'#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
					'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
				series: [{
					cursor: 'pointer',
					showInLegend: true,
					name: data[0]['name'],
					data: data[0]['data'],
					borderColor: '#001751',
					color: {
						linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
						stops: [
							[0,   '#0068bf'],
							//[0.2,   '#34aead'],
							[0.5, '#0077dc'],
							//[0.8, '#42e8e6'],
							[1,   '#3ba5ff']
						]
					},
					tag: 1,
					point: {
						events:{
							click: function (e){
								var categoryPath = options.xAxis.categories;
								if (path != null){
									parametros['selected_item'] = categoryPath[this.x];
									parametros['selected_serie'] = this.series.name;
									if (rawData != null)
									{
										parametros['row'] = rawData[this.x];
									}
									var prefix = (title == null || title == '') ? '' : title; //+ ' - ';
									generateModal(path, parametros, true, prefix, categoryPath[this.x],orderArray);
								}
							}
						}
					}
				}]
			};

			/*if (target_line != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
					value: target_line[0],
					color: '#2e8201', //Verde Grama
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line[1]
					}
				};
				/!*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Grama
				 from: 84.99,
				 to: 80,
				 color: 'rgba(46, 130, 1, 0.3)',
				 label: {
				 text: 'ROBUST',
				 style: {
				 color: '#606060'
				 }
				 }
				 };*!/
			}

			if (target_line2 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
					value: target_line2[0],
					color: '#7cf23c', //Verde Manzana
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line2[1]
					}
				};
				/!*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ // Verde Manzana
				 from: 89.99,
				 to: 85,
				 color: 'rgba(124, 242, 60, 0.3)',
				 label: {
				 text: 'COMMITMENT',
				 style: {
				 color: '#606060'
				 }
				 }
				 };*!/
			}

			if (target_line3 != null){
				options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =	{
					value: target_line3[0],
					color: '#f7e81d', //Amarillo
					dashStyle: 'ShortDot',
					width: 3,
					zIndex: 4,
					label: {
						verticalAlign: 'bottom',
						textAlign: 'right',
						align: 'right',
						y: 10,
						style: {
							fontSize: '10px',
							color: '#606060'
						},
						text: target_line3[1]
					}
				};
				/!*options.yAxis[0].plotBands[options.yAxis[0].plotBands.length] ={ //Amarillo
				 from: 90.00,
				 to: 100,
				 color: 'rgba(247, 232, 29, 0.3)',
				 label: {
				 text: 'STRETCH',
				 style: {
				 color: '#606060'
				 }
				 }
				 }*!/
			}*/


			var num = categoria.length;

			var baseMargin = render=='graficoDashAsp' ? 170 : 90;
			var marginBottom = baseMargin + ((num-1) * 20);
			var menor = series[1];
			var mayor = series[2];
			options.chart.marginBottom = marginBottom;


			for (var k=0; k<rawData.length; k++){
				var hasThisCategory = false;
				var categoryIndex = -1;
				var categoryPath = options.xAxis.categories;
				/*var valorActual= parseFloat(rawData[k][series[0].name]);

				 if (valorActual <= menor){
				 menor = valorActual;
				 }*/

				var lastCat = categoria[categoria.length - 1]['sql_name'];

				if (categoria.length>=1){ //Si hay 2 o mas categorias

					// I. level of categories
					if (categoria.length > 1) {
						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[0]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});

						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[0]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >= 3){
						// II. level of categories
						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[1]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[1]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >=4){
						// III. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[2]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[2]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}

					if (categoria.length >=5){
						// IV. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[3]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[3]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}
					if (categoria.length >=6){
						// V. level of categories

						categoryPath = categoryPath[categoryIndex].categories;
						hasThisCategory = false;
						categoryIndex = -1;

						Highcharts.each(categoryPath, function(category, i) {
							if (category.name === rawData[k][categoria[4]['sql_name']]) {
								hasThisCategory = true;
								categoryIndex = i;
							}
						});
						if (!hasThisCategory) {
							categoryPath.push({
								name: rawData[k][categoria[4]['sql_name']],
								categories: []
							});
						}
						if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
					}


					// Last level of categories
					if (categoria.length >1) {
						categoryPath = categoryPath[categoryIndex].categories;
					}else{
						//categoryPath = categoryPath[categoryIndex].categories;
					}
					hasThisCategory = false;
					categoryIndex = -1;

					Highcharts.each(categoryPath, function(category, i) {
						if (category === rawData[k][lastCat]) {
							hasThisCategory = true;
						}
					});
					if (!hasThisCategory) {
						categoryPath.push(rawData[k][lastCat]);
					}
				}
			}
			if (menor >50) menor= 50;
			//options.yAxis[0].min=menor;
			options.xAxis.min=0;
			options.xAxis.max= options.xAxis.categories.length>8 ? 8 : options.xAxis.categories.length -1;
			options.yAxis.min=0;
			options.yAxis.max=mayor;

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



		function createTable(monitor, monitor1, 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] == "KPIs"){
						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[6] == "%FTR"){
							if (parseFloat(monitor[i][header[6]]) >=0 && parseFloat(monitor[i][header[6]]) < 80){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Commitment"></td>';
							}else if (parseFloat(monitor[i][header[6]]) >=80 && parseFloat(monitor[i][header[6]]) < 85){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Stretched"></td>';
							}else if (parseFloat(monitor[i][header[6]]) >= 85 && parseFloat(monitor[i][header[6]]) <= 100){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
							}
					    }else if (header[7] == "%FTR"){
							if (parseFloat(monitor[i][header[7]]) >=0 && parseFloat(monitor[i][header[7]]) < 80){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/robust.jpg') }}" alt="Commitment"></td>';
							}else if (parseFloat(monitor[i][header[7]]) >=80 && parseFloat(monitor[i][header[7]]) < 85){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/commitment.jpg') }}" alt="Stretched"></td>';
							}else if (parseFloat(monitor[i][header[7]]) >= 85 && parseFloat(monitor[i][header[7]]) <= 100){
								table += '<td style="vertical-align:middle;"><img src="{{ asset('images/strech.jpg') }}" alt="Stretched"></td>';
							}
						}
					}else if (header[j] == "Total services not accepted <br> 1st time right"){
						if (parseInt(monitor[i][header[j]]) > 0){
							var cu="";
							//validacion por perfil
							if($('#cluster_user').val()!=''){
				               	cu = $('#cluster_user').val();
				            }else{
				            	if ($('#cluster').val()=="TODOS"){ 
									cu = monitor[i][header[1]];
								} else {								
									cu = $('#cluster').val();
								}		
				            }							
				            if($('#country_user').val()!=''){
				                var pais = $('#country_user').val();
				            }else{
				            	var pais = $('#pais').val();
				            }
							if($('#asp_user').val()!=''){
				                var asp = $('#asp_user').val();
				            }else{
				            	var asp = $('#asp').val();
				            }
				            //fin validacion por perfil
							var parametros = {
								'pais': pais,
								'cu': cu,
								'cliente': $('#cliente').val(),
								'proyecto': $('#proyecto').val(),
								'asp': asp,
								'mes': monitor[i][header[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('aspir_detalle_tablaFirstTimeRight') }}",' + JSON.stringify(parametros) + ',true,"First Time Right","' + monitor[i][header[0]] + '",null)\'>' + monitor[i][header[j]] + '</button></td>';
						}else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
                                
					}else if (header[j] == "ASP"){
						if (parseInt(monitor[i][header[6]]) > 0){
							var pais=""; var cu="";var cliente="";var proyecto="";	
							if ($('#cliente').val()=="TODOS") cliente=monitor[i][header[2]]; else cliente=$('#cliente').val();
							if ($('#proyecto').val()=="TODOS") proyecto=monitor[i][header[3]]; else proyecto=$('#proyecto').val();
							//validacion por perfil
							if($('#cluster_user').val()!=''){
				               	cu = $('#cluster_user').val();
				            }else{
				            	if ($('#cluster').val()=="TODOS"){ 
									cu = monitor[i][header[1]];
								} else {								
									cu = $('#cluster').val();
								}		
				            }							
				            if($('#country_user').val()!=''){
				                pais = $('#country_user').val();
				            }else{
				            	if ($('#pais').val()=="TODOS"){
				            		pais = monitor[i][header[1]];
				            	} else {
				            		pais = $('#pais').val();
				            	}
				            }
							if($('#asp_user').val()!=''){
				                asp = $('#asp_user').val();
				            }else{
				            	asp = monitor[i][header[4]];//$('#asp').val();
				            }
				            //fin validacion por perfil
							var parametros = {
								'pais': pais,
								'cu': cu,
								'cliente': cliente,
								'proyecto': proyecto,
								'asp': asp,
								'mes': monitor[i][header[5]]
							};
							//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('aspir_detalle_tablaDashASP') }}",' + JSON.stringify(parametros) + ',true,"ASP Dashboard","' + monitor[i][header[4]] + '",null)\'>' + monitor[i][header[j]] + '</button></td>';
						}else
							table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
                                
					}else if (header[j] == "TREND"){
						var flag=0;
						if (monitor1.length>0){
							var headerMonitor1 = Object.keys(monitor1[0]);

							for (var k = 0; k < monitor1.length; k++){
								if((monitor[i][header[0]]==monitor1[k][headerMonitor1[0]]) &&
										(monitor[i][header[1]]==monitor1[k][headerMonitor1[1]]) &&
										(monitor[i][header[2]]==monitor1[k][headerMonitor1[2]]) &&
										(monitor[i][header[3]]==monitor1[k][headerMonitor1[3]]) ){
									flag=1;
									if (parseFloat(monitor[i][header[5]]) > parseFloat(monitor1[k][headerMonitor1[5]]) ){
										table += '<td style="vertical-align:middle;"><img src="{{ asset('images/up.png') }}" alt="up"></td>';
									}else{
										if (parseFloat(monitor[i][header[5]]) < parseFloat(monitor1[k][headerMonitor1[5]]) ){
											table += '<td style="vertical-align:middle;"><img src="{{ asset('images/down_red.png') }}" alt="down"></td>';
										}else{
											if (parseFloat(monitor[i][header[5]]) == parseFloat(monitor1[k][headerMonitor1[5]]) ){
												table += '<td style="vertical-align:middle;"><img src="{{ asset('images/equal.png') }}" alt="equal"></td>';
											}else table += "<td style='vertical-align:middle;'> - </td>";
										}
									}
								}
							}
						}
						if (flag == 0) table += "<td style='vertical-align:middle;'> - </td>";
                                                                                                          
					}else	table += "<td style='vertical-align:middle;'>" + monitor[i][header[j]] + "</td>";
				}//Fin del For j
				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>';
					}
				}
			}//Fin del For i
			table += "</table>";
			return table;
		}

		$('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, orderArray)
		{
			var title_ = title!=null ? title.trim() : "";
			var ordArr = orderArray!=null ? orderArray : null;
			//$('#myModal .tabla-datos').empty().isLoading();
			$("#datatableModalDetalle").empty().isLoading();
			//$('#myModal .tabla-datos').empty().isLoading();
			$('#myModal .punto-grafica').empty().hide();
			$('#myModal .modal_detalle_titulo').empty();

			if (title != null)
			{
				$('#myModal .modal_detalle_titulo').html(title);
				//title_ = title.trim();
				title_ = title_.replace(' ','_');
				title_ = title_.replace('-','');
				title_ = title_.replace(' ','');
			}
			else
			{
				$('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
				title = '{{'monitorii.detail' | trans }}';
				//title_ = title.trim();
				title_ = title_.replace(' ','_');
				title_ = title_.replace('-','');
				title_ = title_.replace(' ','');
			}

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

			$.getJSON(ruta, objParams, function (data)
			{
				/*if (data.length == 0)
				{

					$('#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>";*/

				if (data.length > 0){
					//$("#datatableModalDetalle").empty();
					var col = createTableDTDetail(Object.keys(data[0]),'tableModalDetalle', 'datatableModalDetalle');
					buildDatatablePrin('tableModalDetalle',col,data,title_,ordArr);
					$('[data-toggle="popover"]').popover('destroy');
					$('[data-toggle="popover"]').popover({
						template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
					}).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
				}else{
					$("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
				}
				//$('#myModal .tabla-datos').isLoading('hide').html(table);
				$("#datatableModalDetalle").isLoading('hide');
			});

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

		$('#myModal').on('hidden.bs.modal', function (){
			//$('#myModal .tabla-datos').isLoading('hide');
			$("#datatableModalDetalle").isLoading('hide');
		});

		function resizeChart(){
			try{
				var panel_width = $('#panel_content').width();
				var offset = 32;

				$('#graficoFirstTimeRight').width(panel_width-offset);
				$('#graficoBenchmarking').width(panel_width-offset);
				$('#graficoDashAsp').width(panel_width-offset);
				$('#graficoFirstTimeRightHotProject').width(panel_width-offset);
				$('#graficoBenchmarkingHotProject').width(panel_width-offset);
				$('#graficoSystemFaultFound').width(panel_width-offset);
				$('#graficoIssuesFound').width(panel_width-offset);

				/*reflowNow('graficoFirstTimeRight');
				reflowNow('graficoBenchmarking');
				reflowNow('graficoDashAsp');
				reflowNow('graficoFirstTimeRightHotProject');
				reflowNow('graficoBenchmarkingHotProject');
				reflowNow('graficoSystemFaultFound');
				reflowNow('graficoIssuesFound');*/

				$('#graficoFirstTimeRight').highcharts().reflow();
				$('#graficoBenchmarking').highcharts().reflow();
				$('#graficoDashAsp').highcharts().reflow();
				$('#graficoFirstTimeRightHotProject').highcharts().reflow();
				$('#graficoBenchmarkingHotProject').highcharts().reflow();
				$('#graficoSystemFaultFound').highcharts().reflow();
				$('#graficoIssuesFound').highcharts().reflow();
				redrawDt();
			}catch(err) {
				//console.log(err.message);
			}
		}

		function destroyGraphs(){
			try{
				$('#graficoFirstTimeRight').highcharts().destroy();
				$('#graficoBenchmarking').highcharts().destroy();
				$('#graficoDashAsp').highcharts().destroy();
				$('#graficoFirstTimeRightHotProject').highcharts().destroy();
				$('#graficoBenchmarkingHotProject').highcharts().destroy();
				$('#graficoSystemFaultFound').highcharts().destroy();
				$('#graficoIssuesFound').highcharts().destroy();
			}catch(err){
				//console.log(err.message);
			}
		}

		function redrawDt(){

			if ( $.fn.DataTable.isDataTable( '#table_FirstTimeRight' ) ) {
				var table = $('#table_FirstTimeRight').DataTable();
				table.draw(false);
			}
			if ( $.fn.DataTable.isDataTable( '#table_FirstTimeRightHotProject' ) ) {
				var table = $('#table_FirstTimeRightHotProject').DataTable();
				table.draw(false);
			}
		}

		function reflowNow(container){
			var $this = $('#' + container);
			$this.containerHeight = $this.options.chart.height || document.getElementById("container").offsetHeight;
			$this.containerWidth = $this.options.chart.width || document.getElementById("container").offsetWidth;
			$this.setSize($this.containerWidth, $this.containerHeight, false);
			$this.hasUserSize = null;
		}

		$(window).resize(function(){
			resizeChart();
		});

		$(document).on("click",'#btnHotProject',function(){
			loadComboCuHotProject();
			createTableDt();
			if ( $.fn.DataTable.isDataTable('#example') ) {
				table.ajax.reload();
			}else{
				buildDatatable(columnaHP);
			}
			$("#modalHotProject").modal('show');
		});

		$(document).on("click",'#btnAddHotProject',function(){
			$("#modalHotProject").modal('show');
		});

		function resetAddRecordDialog(type, data){
			var dialog = $('#modalAddRecord');
			dialog.find('#divCu').hide();
			dialog.find('#txtCu').val('');
			dialog.find('#divCountry').hide();
			dialog.find('#txtCountry').val('');
			dialog.find('#divCustomer').hide();
			dialog.find('#txtCustomer').val('');
			dialog.find('#divProject').hide();
			dialog.find('#txtProject').val('');
			switch (type){
				case 0: //new
					dialog.find('#modalTitleAddHotProjects').html('<i class="fa fa-plus"></i> Add Records');
					dialog.find('#txtId').val('');
					dialog.find('#txtCuAux').val('');
					dialog.find('#txtCountryAux').val('');
					dialog.find('#txtCustomerAux').val('');
					dialog.find('#txtProjectAux').val('');
					dialog.find('#cmbCu').val('SELECT');
					dialog.find('#cmbCountry').val('SELECT');
					dialog.find('#cmbCustomer').val('SELECT');
					dialog.find('#cmbProject').val('SELECT');
					dialog.find('#btnSaveEdit').prop('disabled', true);
					dialog.find('#btnSaveEdit').hide();
					dialog.find('#btnSaveContinue').show();
					dialog.find('#btnSaveContinue').prop('disabled', false);
					dialog.find('#btnSaveExit').show();
					dialog.find('#btnSaveExit').prop('disabled', false);
					break;
				case 1: //edit
					dialog.find('#modalTitleAddHotProjects').html('<i class="fa fa-edit"></i> Edit Records');
					dialog.find('#btnSaveEdit').prop('disabled', false);
					dialog.find('#btnSaveEdit').show();
					dialog.find('#btnSaveContinue').hide();
					dialog.find('#btnSaveContinue').prop('disabled', true);
					dialog.find('#btnSaveExit').hide();
					dialog.find('#btnSaveExit').prop('disabled', true);
					break;
			}
			// Empty form fields.

		}

		function showModalAddHotProject(type,id){
			var dialog = $('#modalAddRecord');
			resetAddRecordDialog(type,id);
			//onOffBtnHotProject(true);
			switch (type){
				case 0: //New
					dialog.modal('show');
					break;
				case 1: //Edit
					$.isLoading({text:"Loading"});
					dialog.modal('show');
					var postUrl = "{{path('aspir_getAspirInfoHotProjectById')}}";
					var postData = {
						id: id
					};
					$.ajax({
						type: 'POST',
						url: postUrl,
						data: postData,
						dataType: 'json',
						global: false,
						success: function (response) {
							if (response.status = 'ok'){
								var d = response.data[0];
								var cu, country,customer,project, project1="";
								cu1 = d.cu + "";
								cu=cu1.replace('/ /g', '');
								country1 = d.country + "";
								country=country1.replace('/ /g', '');
								customer1 = d.customer + "";
								customer = customer1.replace('/ /g', '');
								project1 = d.project + "";
								project = project1.replace('/ /g', '');

								dialog.find('#txtId').val(d.id);
								dialog.find('#txtCuAux').val(cu);

								dialog.find('#txtCountryAux').val(country);
								dialog.find('#txtCustomerAux').val(customer);
								dialog.find('#txtProjectAux').val(project);


								dialog.find('#cmbCu').val(cu);
								$.when(loadDataHotProject('country', 'cu', cu, 'cmbCountry', country))
										.then(
										$.when(loadDataHotProject('customer', 'country', country, 'cmbCustomer', customer))
												.then(
												$.when(loadDataHotProject('project', 'customer', customer, 'cmbProject', project))
														.then($.isLoading( "hide" ))
										)
								);

							}else{
							}
						},
						error: function (jqXHR, textStatus, errorThrown) {
							$.isLoading( "hide" );
						}
					});
					break;
				case 2: //delete
					if (confirm("Are you sure to delete the record?")){
						var postUrl = "{{path('aspir_deleteHotProjectRecord')}}";
						var postData = {
							id: id
						};
						$.ajax({
							type: 'POST',
							url: postUrl,
							data: postData,
							dataType: 'json',
							global: false,
							success: function (response) {
								table.ajax.reload();
							},
							error: function (jqXHR, textStatus, errorThrown) {

							}
						});
					}
			}
		}

		function dataValidation(){
			var id, cu, country, customer, project;

			var data;
			if ($('#cmbCu').val()=='SELECT'){
				alert('Select CU value');
				$('#cmbCu').focus();
				return false;
			}
			if ($('#cmbCu').val()=='OTRO' && $('#txtCu').val().trim()==""){
				alert('Write CU value');
				$('#cmbCu').focus();
				return false;
			}
			if ($('#cmbCountry').val()=='SELECT'){
				alert('Select Country value');
				$('#cmbCountry').focus();
				return false;
			}
			if ($('#cmbCountry').val()=='OTRO' && $('#txtCountry').val().trim()==""){
				alert('Write Country value');
				$('#cmbCountry').focus();
				return false;
			}
			if ($('#cmbCustomer').val()=='SELECT'){
				alert('Select Customer value');
				$('#cmbCustomer').focus();
				return false;
			}
			if ($('#cmbCustomer').val()=='OTRO' && $('#txtCustomer').val().trim()==""){
				alert('Write Customer value');
				$('#cmbCustomer').focus();
				return false;
			}
			if ($('#cmbProject').val()=='SELECT'){
				alert('Select Project value');
				$('#cmbProject').focus();
				return false;
			}
			if ($('#cmbProject').val()=='OTRO' && $('#txtProject').val().trim()==""){
				alert('Write Project value');
				$('#cmbProject').focus();
				return false;
			}
			cu = ($('#cmbCu').val()=='OTRO') ? $('#txtCu').val().trim() : $('#cmbCU').val();
			country = ($('#cmbCountry').val()=='OTRO') ? $('#txtCountry').val().trim() : $('#cmbCountry').val();
			customer = ($('#cmbCustomer').val()=='OTRO') ? $('#txtCustomer').val().trim() : $('#cmbCustomer').val();
			project = ($('#cmbProject').val()=='OTRO') ? $('#txtProject').val().trim() : $('#cmbProject').val();

			if (cu==$('#txtCuAux').val() && country==$('#txtCountryAux').val()
				&& customer==$('#txtCustomerAux').val() && project==$('#txtProjectAux').val()){
				alert('No changes detected!');
				$('#cmbCu').focus();
				return false;
			}
			return true;
		}

		function saveDataHotProject(){
			var dataHotProject, id, cu, country, customer, project;
			id = $('#txtId').val();
			cu = ($('#cmbCu').val()=='OTRO') ? $('#txtCu').val().trim() : $('#cmbCu option:selected').text();
			country = ($('#cmbCountry').val()=='OTRO') ? $('#txtCountry').val().trim() : $('#cmbCountry option:selected').text();
			customer = ($('#cmbCustomer').val()=='OTRO') ? $('#txtCustomer').val().trim() : $('#cmbCustomer option:selected').text();
			project = ($('#cmbProject').val()=='OTRO') ? $('#txtProject').val().trim() : $('#cmbProject option:selected').text();

			dataHotProject = {
				id: id,
				cu: cu,
				country: country,
				customer: customer,
				project: project
			};
			onOffBtnHotProject(true);
			var postUrl = "{{path('aspir_saveDataHotProject')}}";
			$.ajax({
				type: 'POST',
				url: postUrl,
				data: dataHotProject,
				dataType: 'json',
				global: false,
				success: function (response) {
					loadComboCuHotProject();
					table.ajax.reload();
					if (response.status == 'ok'){
						alert('Data saved!');
						onOffBtnHotProject(false);
						return true;
					}else{
						alert(response.msj);
						onOffBtnHotProject(false);
						return false;
					}

				},
				error: function (jqXHR, textStatus, errorThrown) {
					alert('Unexpected error!. Please close this window and try again.');
					onOffBtnHotProject(false);
					return false;
				}
			});
		}

		function loadComboCuHotProject(){
			var postUrl = "{{path('aspir_getAspirClusterHotProject')}}";
			var postData = {
				campo: ''
			};

			$.ajax({
				type: 'POST',
				url: postUrl,
				data: postData,
				dataType: 'json',
				global: false,
				success: function (response) {
					if (response.status = 'ok'){
						var d = response.data;
						$("#cmbCu").empty()
								.append('<option value="SELECT">-- Select value --</option>');
						$.each(d,function(key, registro) {
							$("#cmbCu").append("<option value=" + registro.valor + ">" +registro.nombre+"</option>");
						});
						$("#cmbCu").append('<option value="OTRO">-- Other -- </option>');
					}else{
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {

				}
			});
		}

		function onChangeCombo(idCmbIni, afterValue){
			if (idCmbIni == undefined) return;

			var clave = idCmbIni.replace('cmb','').toLowerCase();
			var campo = "";
			var ctrl = "";
			var valor = $('#' + idCmbIni).val();

			if (clave=='cu' || clave=='country' || clave=='customer') {
				switch (clave) {
					case 'cu':
						campo = 'country';
						ctrl = 'cmbCountry';
						break;
					case 'country':
						campo = 'customer';
						ctrl = 'cmbCustomer';
						break;
					case 'customer':
						campo = 'project';
						ctrl = 'cmbProject';
						break;
				}
			}

			if (valor =='OTRO') {
				$('#' + idCmbIni.replace('cmb', 'div')).show();
			}else if (valor=='SELECT'){
				$('#' + idCmbIni.replace('cmb','div')).hide();
				if (ctrl.length>0){
					$("#" + ctrl).empty()
							.append('<option value="SELECT">-- Select value --</option>')
							.append('<option value="OTRO">-- Other -- </option>')
							.trigger('change')
				}
			}else{
				$('#' + idCmbIni.replace('cmb','div')).hide();
				loadDataHotProject(campo, clave, valor, ctrl, afterValue);

				/*if (campo != "" && ctrl != ""){
					var postUrl = "{{path('aspir_getDataComboHotProjectByKey')}}";
					var postData = {
						campo: campo,
						clave: clave,
						valor: valor
					};

					$.ajax({
						type: 'POST',
						url: postUrl,
						data: postData,
						dataType: 'json',
						global: false,
						success: function (response) {
							if (response.status = 'ok'){
								var d = response.data;
								$("#" + ctrl).empty()
										.append('<option value="SELECT">-- Select value --</option>');
								$.each(d,function(key, registro) {
									$("#" + ctrl).append("<option value=" + registro.valor + ">" +registro.nombre+"</option>");
								});
								$("#" + ctrl).append('<option value="OTRO">-- Other -- </option>');
								if (afterValue.length>0){
									$("#" + ctrl).val(afterValue);
								}
							}else{
							}
						},
						error: function (jqXHR, textStatus, errorThrown) {
							$.isLoading( "hide" );
						}
					});
				}*/
			}
		}

		$(document).on("change",'.cmbHotProject',function(){
			onChangeCombo($(this).attr('id'),"");
		});

		function loadDataHotProject(campo, clave, valor, ctrl, afterValue){
			if (campo != "" && ctrl != ""){
				var postUrl = "{{path('aspir_getDataComboHotProjectByKey')}}";
				var postData = {
					campo: campo,
					clave: clave,
					valor: valor
				};

				$.ajax({
					type: 'POST',
					url: postUrl,
					data: postData,
					dataType: 'json',
					global: false,
					success: function (response) {
						if (response.status = 'ok'){
							var d = response.data;
							$("#" + ctrl).empty()
									.append('<option value="SELECT">-- Select value --</option>');
							$.each(d,function(key, registro) {
								$("#" + ctrl).append("<option value=" + registro.valor + ">" +registro.nombre+"</option>");
							});
							$("#" + ctrl).append('<option value="OTRO">-- Other -- </option>');
							if (afterValue.length>0){
								$("#" + ctrl).val(afterValue);
							}
						}else{
						}
					},
					error: function (jqXHR, textStatus, errorThrown) {
						$.isLoading( "hide" );
					}
				});
			}
		}

		function onOffBtnHotProject(flag){
			$('#btnSaveEdit').attr("disabled", flag);
			$('#btnSaveContinue').attr("disabled", flag);
			$('#btnSaveExit').attr("disabled", flag);
			$('#btnclosemodal').attr("disabled", flag);
		}

		$(document).on("change",'.chkCU',function(){
			var chkId = $(this).attr('id');
			//console.log('Evento Change Check CU: ' + chkId);
			if ($(this).is(':checked')){
				//Mostrar o Agregar el Panel Grafico
				addPanelGraph(chkId);
			}else{
				//Ocultar, si existe, el Panel Grafico
				if (elementExist('panel' + chkId)){
					$('#panel' + chkId).hide();
				}
			}
		});

		Element.prototype.insertChildAtIndex = function(child, index) {
			if (!index) index = 0
			if (index >= this.children.length) {
				this.appendChild(child)
			} else {
				this.insertBefore(child, this.children[index])
			}
		}

		function insertChildAtIndex(parent,content,index){
			//console.log('index: ' + index)
			var idx = parseInt(index);
			var n = $('#'+ parent).children().length;

			if (!index) idx = 0;
			if (idx == 0) {
				$('#'+ parent).prepend(content);
				//console.log( index + ": 0");
			}else{
				//$("#" + parent +" > div:nth-child(" + (idx) + ")").after(content);
				var lastIndexExist = 0;
				$( ".panelListCu" ).each(function( indexList ) {
					var lstId = $(this).attr('id');
					var arr = lstId.split('_');
					var chkId = arr[1];
					var exist = elementExist('panel' + chkId);
					//console.log( indexList + ": " + $( this ).text() );
					if (indexList<idx && exist){
						lastIndexExist = indexList;
						//console.log( indexList + ": " + $( this ).text() );
						//console.log('LASTINDEXLIST:' + indexList);
					}
				});
				$("#" + parent +" > div:nth-child(" + (lastIndexExist) + ")").after(content);
			}
		}

		function elementExist(element){
			var ok = false;
			$('#' + element).length >0 ? ok=true : ok=false;
			return ok;
		}

		function addPanelGraph(valueId){
			var panelId = 'panel' + valueId;
			var index = $('#' + valueId).data('order');
			var panelTitle1 = '<strong>' + $('#' + valueId).val() + '</strong> <i>FTR (MtD)</i>';
			var panelTitle2 = '<strong>' + $('#' + valueId).val() + '</strong> <i>FTR (YtD)</i>';
			if (!elementExist(panelId)){
				var divGraphName1 = 'div_' + panelId + '_' + 'FTR-CU-YTD';
				var divGraphName2 = 'div_' + panelId + '_' + 'FTR-CU-MTD';
				var graphName1 = panelId + '_' + 'FTR-CU-YTD';
				var graphName2 = panelId + '_' + 'FTR-CU-MTD';

				//$('#divPanelGraph').append(
				var s =	'<div id="' + panelId + '" class="row">' +
						'<div id="' + divGraphName1 + '" class="col-md-6">' +
						'    <div class="panel panel-primary">' +
						'        <div class="panel-heading">' + panelTitle1 + '</div>' +
						'        <div class="panel-body">' +
						'            <div id="' + graphName1 + '"></div>' +
						'		 </div>' +
						'	 </div>' +
						'</div>' +

						'<div id="' + divGraphName2 + '" class="col-md-6">' +
						'    <div class="panel panel-primary">' +
						'        <div class="panel-heading">' + panelTitle2 + '</div>' +
						'        <div class="panel-body">' +
						'            <div id="' + graphName2 + '"></div>' +
						'		 </div>' +
						'	 </div>' +
						'</div>' +
						'</div>';
				insertChildAtIndex('divPanelGraph',s,index);
			}else{
				$('#' + panelId).show();
			}
		}

    </script>

    <div class="container-fluid">
		<form id="formulario_filtros" onsubmit="return false;">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" href="#collapse1">Filters <span class="caret"></span></a></h3>
				</div>
				<div id="collapse1" class="panel-collapse collapse in">
					<div id="panelFilter" class="panel-body">
						<div class="row">
							<input type="hidden" name="cluster_user" id="cluster_user" value="{{ data_user.cluster_user }}">
							<input type="hidden" name="country_user" id="country_user" value="{{ data_user.country_user }}">
							<input type="hidden" name="asp_user" id="asp_user" value="{{ data_user.asp_user }}">
							<div class="col-md-3 col-sm-6 col-xs-12" id='div_fechaIni'>
								<div class="form-group">
									<label>{{'monitor.etiqueta.fechaI' | trans}}: </label>
									<input type="text" class="form-control" id="Filtros_fechaIni" name="Filtros_fechaIni" value="">
								</div>
							</div>
							<div class="col-md-3  col-sm-6 col-xs-12" id='div_fechaFin'>
								<div class="form-group">
									<label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
									<input type="text" class="form-control" id="Filtros_fechaFin" name="Filtros_fechaFin" value="">
								</div>
							</div>
							<div id="clusterTodos" class="col-md-3 col-sm-6 col-xs-12">
								<div class="form-group">
									<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>
							<div id="paisTodos" class="col-md-3 col-sm-6 col-xs-12">
								<div class="form-group">
									<label>{{'monitores.pais' | trans}}: </label>
									<select class="form-control" id="pais" name="pais">
										<option value="TODOS">-- All -- </option>
									</select>
								</div>
							</div>
						</div>
						<div class="row">
							<div id="div_cliente" class="col-md-3 col-sm-6 col-xs-12">
								<div class="form-group">
									<label>{{'monitores.cliente' | trans}}: </label>
									<select class="form-control" id="cliente" name="cliente">
										<option value="TODOS">-- All --</option>
									</select>
								</div>
							</div>
							<div id="div_proyecto" class="col-md-3 col-sm-6 col-xs-12">
								<div class="form-group">
									<label>{{'monitores.proyecto' | trans}}: </label>
									<select class="form-control" id="proyecto" name="proyecto">
										<option value="TODOS">-- All --</option>
									</select>
								</div>
							</div>
							<div id="div_asp" class="col-md-3 col-sm-6 col-xs-12">
								<div class="form-group">
									<label>{{'ASP' | trans}}: </label>
									<select class="form-control" id="asp" name="asp">
										<option value="TODOS">-- All --</option>
									</select>
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-12" id="parametros">
								<div class="form-group">
									<label for="generar">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
									<button class="btn btn-primary form-control" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			{#<div class="row">
				<div class="col-lg-6">
					<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="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>
					<div class="row filtros">
						<div id="div_cliente" class="col-lg-3 filtro"  style="margin-top: 1%; display: block;">
							<label>{{'monitores.cliente' | trans}}: </label>
							<select class="form-control" id="cliente" name="cliente">
								<option value="TODOS">-- All --</option>
							</select>
						</div>
						<div id="div_proyecto" class="col-lg-3 filtro"  style="margin-top: 1%; display: block;">
							<label>{{'monitores.proyecto' | trans}}: </label>
							<select class="form-control" id="proyecto" name="proyecto">
								<option value="TODOS">-- All --</option>
							</select>
										</div>
						<div id="div_asp" class="col-lg-3 filtro"  style="margin-top: 1%; display: block;">
							<label>{{'ASP' | trans}}: </label>
							<select class="form-control" id="asp" name="asp">
								<option value="TODOS">-- All --</option>
							</select>
						</div>
						<div class="col-lg-2" id="parametros" style="margin-top: 1%;">

							<button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="panel-body fixed-panel" id="div_Executive" style="margin-top: 1%; display: none;">

					</div>
				</div>
    		</div>#}
		</form>

		<div class="row">
			<div class="col-md-12 text-center">
				<h1 class="text-center text-primary">
					<i class="fa fa-file-text-o"></i> <strong>MELA ASP MANAGEMENT INTEGRATED REPORTING FTR</strong>
				</h1>
			</div>
        </div>         
        {#<div class="row" >
            <div class="col-lg-21" id="title">

			</div>
		</div>#}
		<div class="row">
			<div id="panel_content" class="col-lg-12">
				<div class="panel with-nav-tabs panel-primary">
					<div class="panel-heading">
						<ul class="nav nav-tabs" id="myTabs">
							<li role="presentation" id="tabsHotProjects" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsHotProjects"><strong>Hot Projects FTR</strong></a></li>
							<li role="presentation" id="tabsHotProjectBmk" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsHotProjectsBmk"><strong>Hot Projects Benchmarking</strong></a></li>
							<li role="presentation" id="tabsFirstTimeRight" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabFirstTimeRight"><strong>All Projects FTR</strong></a></li>
							<li role="presentation" id="tabsBenchmarking" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabBenchmarking"><strong>All Projects Benchmarking</strong></a></li>
							<li role="presentation" id="tabsDashAsp" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsDashAsp"><strong>ASP Dashboard</strong></a></li>
							<li role="presentation" id="tabsSystemFaultFound" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsSystemFaultFound"><strong>System Fault Found</strong></a></li>
							<li role="presentation" id="tabsIssuesFound" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsIssuesFound"><strong>Issues Found</strong></a></li>
							{#<li role="presentation" id="tabsHotProjectYtdMtd" data-filtro="div_fechaIni div_fechaFin paisTodos clusterTodos div_proyecto div_cliente div_asp"><a data-toggle="tab" href="#_tabsHotProjectsYtdMtd"><strong>Hot Projects FTR/CU</strong></a></li>#}
						</ul>
					</div>
					<div class="panel-body">
						<div class="tab-content">
							<div id="_tabsHotProjects" class="tab-pane fade">
								<div class="row">
									<div class="col-md-12">
										<button id="btnHotProject" type="button" class="btn btn-md btn-claro pull-right" aria-label="Hot Projects">
											<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Hot Projects
										</button>
									</div>
								</div>
								<div class="row" id="chartcontainer_FirstTimeRightHotProject">
									<div id="graficoFirstTimeRightHotProject" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="tablaFirstTimeRightHotProject" class="col-md-12">
									</div>
								</div>#}
								<div class="row">
									<div id="datatable_FirstTimeRightHotProject" class="col-sm-12">
										<table id="table_FirstTimeRightHotProject" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_FirstTimeRightHotProject"></tbody>
										</table>
									</div>
								</div>
							</div>

							<div id="_tabsHotProjectsBmk" class="tab-pane fade">
								<div class="row" id="chartcontainer_BenchmarkingHotProject">
									<div id="graficoBenchmarkingHotProject" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="tablabenchmarkingHotProject" class="col-md-12">
									</div>
								</div>#}
								<div class="row">
									<div id="datatable_BenchmarkingHotProject" class="col-sm-12">
										<table id="table_BenchmarkingHotProject" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_BenchmarkingHotProject"></tbody>
										</table>
									</div>
								</div>
							</div>

							<div id="_tabFirstTimeRight" class="tab-pane fade">
								<div class="row" id="chartcontainer_FirstTimeRight">
									<div id="graficoFirstTimeRight" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								<div class="row">
									<div id="datatable_FirstTimeRight" class="col-sm-12">
										<table id="table_FirstTimeRight" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_FirstTimeRight"></tbody>
										</table>
									</div>
								</div>
							</div>

							<div id="_tabBenchmarking" class="tab-pane fade">
								<div class="row" id="chartcontainer_BenchmarkingFTR">
									<div id="graficoBenchmarking" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="tablabenchmarking" class="col-md-12">
									</div>
								</div>#}
								<div class="row">
									<div id="datatable_BenchmarkingFTR" class="col-sm-12">
										<table id="table_BenchmarkingFTR" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_BenchmarkingFTR"></tbody>
										</table>
									</div>
								</div>
							</div>

							<div id="_tabsDashAsp" class="tab-pane fade">
								<div class="row" id="chartcontainer_DashAsp">
									<div id="graficoDashAsp" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="tablaDashAsp" class="col-md-12">
									</div>
								</div>#}
								<div class="row">
									<div id="datatable_DashAsp" class="col-sm-12">
										<table id="table_DashAsp" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_DashAsp"></tbody>
										</table>
									</div>
								</div>
							</div>

							<div id="_tabsSystemFaultFound" class="tab-pane fade">
								<div class="row" id="chartcontainer_SystemFaultFound">
									<div id="graficoSystemFaultFound" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="datatable_SystemFaultFound" class="col-sm-12">
										<table id="table_SystemFaultFound" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_SystemFaultFound"></tbody>
										</table>
									</div>
								</div>#}
							</div>

							<div id="_tabsIssuesFound" class="tab-pane fade">
								<div class="row" id="chartcontainer_IssuesFound">
									<div id="graficoIssuesFound" class="col-md-12" style="width: 100%; min-width: 320px;">
									</div>
								</div>
								{#<div class="row">
									<div id="datatable_IssuesFound" class="col-sm-12">
										<table id="table_IssuesFound" class="display nowrap" width="100%">
											<thead>
											<tr></tr>
											</thead>
											<tbody id="tbody_IssuesFound"></tbody>
										</table>
									</div>
								</div>#}
							</div>

							{#<div id="_tabsHotProjectsYtdMtd" class="tab-pane fade">
								<div class="row">
									<div id="divPanelCu" class="col-md-2">
										<ul class="list-group">
											<li class="list-group-item active">
												<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
												<strong>Cluster</strong>
												<div class="pull-right">
													<a href="#" class="btn-claro"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></a>
													<a href="#" class="btn-claro"><span class="glyphicon glyphicon-check" aria-hidden="true"></span></a>
												</div>
											</li>
											{% set i = 1 %}
											{%for cus in cuhp%}
												<li id="panelListCu_{{ cus.valor }}" class="list-group-item panelListCu">
													<label>
														<input id="chk{{cus.valor}}" name="chk{{cus.valor}}"
															   data-order="{{ i }}" data-added="false"
															   type="checkbox" class="chkCU" value="{{cus.valor}}">
														{{cus.nombre}}
													</label>
												</li>
												{% set i = i + 1 %}
											{%endfor%}
										</ul>
									</div>
									<div id="divPanelGraph" class="col-md-10">

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

	<div class="modal fade" id="modalHotProject" tabindex="-1" role="dialog" aria-labelledby="HotProject">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header btn-claro">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h2 class="modal-title text-center" id="modalHotProjectTitle">
						<strong>Hot Projects</strong>
					</h2>
				</div>
				<div class="modal-body">
					<div class="row">
						<div id="datatable" class="col-sm-12" {#style="overflow-x: scroll"#}>
							<table id="example" class="display nowrap" width="100%">
								<tbody id="tbody">
								</tbody>
							</table>
						</div>
					</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>

	<div class="modal fade bs-example-modal-lg" id="modalAddRecord" tabindex="-1" role="dialog" aria-labelledby="modal Add Record">
		<div class="modal-dialog modal-md" role="document">
			<div class="modal-content">
				<div class="modal-header  btn-claro">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h2 class="modal-title" id="modalTitleAddHotProjects">
						<i class="fa fa-plus"></i>Hot Projects
					</h2>
				</div>

				<div id="modalAddRecordBody" class="modal-body">
					<input type="hidden" id="txtId" value="">
					<input type="hidden" id="txtCuAux" value="">
					<input type="hidden" id="txtCountryAux" value="">
					<input type="hidden" id="txtCustomerAux" value="">
					<input type="hidden" id="txtProjectAux" value="">
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label>{{ 'CU' | trans}}: </label>
								<select class="form-control cmbHotProject" id="cmbCu" name="cmbCu">
									<option value="SELECT">-- Select value --</option>;
									{%for cluster in clusters%}
										<option value="{{cluster.valor}}">{{cluster.nombre}}</option>
									{%endfor%}
									<option value="OTRO">-- Other -- </option>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div id="divCu" class="form-group">
								<label for="txtCu">&nbsp;</label>
								<input type="text" class="form-control" id="txtCu" placeholder="Enter CU value" maxlength="255">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label>{{ 'Country' | trans}}: </label>
								<select class="form-control cmbHotProject" id="cmbCountry" name="cmbCountry">
									<option value="SELECT">-- Select value --</option>;
									<option value="OTRO">-- Other -- </option>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div id="divCountry" class="form-group">
								<label for="txtCountry">&nbsp;</label>
								<input type="text" class="form-control" id="txtCountry" placeholder="Enter Country value" maxlength="255">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label>{{ 'Customer' | trans}}: </label>
								<select class="form-control cmbHotProject" id="cmbCustomer" name="cmbCustomer">
									<option value="SELECT">-- Select value --</option>;
									<option value="OTRO">-- Other -- </option>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div id="divCustomer" class="form-group">
								<label for="txtCustomer">&nbsp;</label>
								<input type="text" class="form-control" id="txtCustomer" placeholder="Enter Customer value" maxlength="255">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="form-group">
								<label>{{ 'Project' | trans}}: </label>
								<select class="form-control cmbHotProject" id="cmbProject" name="cmbProject">
									<option value="SELECT">-- Select value --</option>;
									<option value="OTRO">-- Other -- </option>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div id="divProject" class="form-group">
								<label for="txtProject">&nbsp;</label>
								<input type="text" class="form-control" id="txtProject" placeholder="Enter Project value" maxlength="255">
							</div>
						</div>
					</div>
				</div>

				<div id="modalAddRecordFooter" class="modal-footer">
					<button id="btnSaveEdit" type="button" class="btn btn-primary"
							aria-label="Save Changes" title="Save Changes">
						<span class="fa fa-save" aria-hidden="true"></span>  Save Changes
					</button>
					<button id="btnSaveContinue" type="button" class="btn btn-primary"
							aria-label="Save and Continue" title="Save and Continue">
						<span class="fa fa-save" aria-hidden="true"></span>  Save and Continue
					</button>
					<button id="btnSaveExit" type="button" class="btn btn-info"
							aria-label="Save and Exit" title="Save and Exit">
						<span class="fa fa-save" aria-hidden="true"></span>  Save and Exit
					</button>
					<button id="btnclosemodal" type="button" class="btn btn-default" data-dismiss="modal">
						<i class="fa  fa-times text-danger"></i> Cancel
					</button>
				</div>

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

	<div class="modal fade" id="modalIssues" tabindex="-1" role="dialog" aria-labelledby="Issues_in_SystemFaults">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header btn-claro">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h2 class="modal-title text-center" id="modalIssueTitle">
						<strong>ISSUES</strong>
					</h2>
				</div>
				<div class="modal-body">
					<div class="row">
						<table id="tableIssue" class="table table-striped table-bordered table-condensed" width="100%">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th class="text-center">Issues Found</th>
								</tr>
							</thead>
							<tbody>
								<tr>

								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-claro" data-dismiss="modal">
						{{'monitorii.close' | trans}}
						<span class="glyphicon glyphicon-remove"></span>
					</button>
				</div>
			</div>
		</div>
	</div>

{% endblock %}
{% block javascripts %}

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

	{#<script src="{{ asset('js/modules/data.src.js') }}"></script>#}
	{#<script src="{{ asset('js/TableEdit/jquery.tabledit.min.js') }}"></script>#}
{% endblock %}