<script>
	sequenci_linha_cor_dinamica = 0;
	function add_regra_cor_table(obgRegra) {
		sequenci_linha_cor_dinamica += 1;
		html = "";
		valuecol = "";
		valueTipo = "";
		valueval_de = "";
		valueval_ate = "";
		valuevalor = "";
		valuecol_valor = "";
		valuecorfundo = "";
		valuecorfonte = "";
		valueTipoPintura = "";
		display_de_atelinha_cor_dinamica = "none";
		display_valor_cor_dinamica = "none";
		display_colunavallinha_cor_dinamica = "none";
		if(obgRegra != null)
		{
			valuecol = obgRegra.col;
			valueTipo = obgRegra.tipo_validacao;
			valueval_de = obgRegra.val_de.replace(",",".");
			valueval_ate = obgRegra.val_ate.replace(",",".");
			valuevalor = obgRegra.valor.replace(",",".");
			valuecol_valor = obgRegra.col_valor;
			valuecorfundo = obgRegra.cor_fundo;
			valuecorfonte = obgRegra.cor_fonte;
			valueTipoPintura = obgRegra.tipo_pintura;
			if(valueTipo == "porcentagem_de_ate_da_coluna" || valueTipo == "diferenca_de_ate_da_coluna" )
			{
				display_de_atelinha_cor_dinamica = "block";
				display_colunavallinha_cor_dinamica = "block";
			}
			else if(valueTipo == "de_ate" )
			{
				display_de_atelinha_cor_dinamica = "block";
			}
			else if(valueTipo == "menor_que" || valueTipo == "maior_que" || valueTipo == "igual_que" || valueTipo == "contem")
			{
				display_valor_cor_dinamica = "block";
			}
			else
			{
				display_colunavallinha_cor_dinamica = "block";
			}
		}
		html +='<div class="linha_cor_dinamica" style="width: 100%; clear:both; display: table; border-bottom: solid 1px #bfbfbf; padding: 5px;">';
		html +='<div style="float: left; width: 100%; text-align: left;">';	
			html +=' <a href="javaScript:void(0);" onclick="$(this).parent().parent().remove()" style="float: right;"><i class="fa fa-trash" aria-hidden="true"></i></a> ';
			
			html +=' <a href="javaScript:void(0);" onclick="$(this).parent().parent().prev().insertAfter($(this).parent().parent());"><i class="fa-solid fa-up-long"></i></a> ';
			html +=' <a href="javaScript:void(0);" onclick="$(this).parent().parent().next().insertBefore($(this).parent().parent());"><i class="fa-solid fa-down-long"></i></a>';
		html +='</div>';
		html +='<div style="float: left; width: 100%; ">';
			
			html +='<div class="" style="float: left; ">';
			html +='	Coluna <select name="col" id="coluna'+sequenci_linha_cor_dinamica+'" class="form coluna_todas" value="'+valuecol+'" onchange="validar_coluna_tab(this)"  placeholder="Tipo"  style="width: 150px; padding: 5px;">';
			html +='		<option value=""></option> ';
			if(obgRegra != null && valuecol != "")
			{
				html +='<option value="'+valuecol+'" selected="selected">'+valuecol+'</option> ';
			}
			html +='	</select>';
			html +='</div>';
			html +='	Regra ';
			html +='<select class="form" name="tipo_validacao" id="tipo_validacao'+sequenci_linha_cor_dinamica+'" value="'+valueTipo+'" onchange="habilita_colunas_por_tipo_valid_tab(this)" placeholder="Tipo"  style="width: 190px; padding: 5px;">';
			html +='	<option value=""></option>';
			html +='	<option value="de_ate" '+(valueTipo == "de_ate" ? "selected='selected'": "")+'>De Até </option>';
			html +='	<option value="maior_que" '+(valueTipo == "maior_que" ? "selected='selected'": "")+'>Maior que </option>';
			html +='	<option value="menor_que" '+(valueTipo == "menor_que" ? "selected='selected'": "")+'>Menor que </option>';
			html +='	<option value="igual_que" '+(valueTipo == "igual_que" ? "selected='selected'": "")+'>Igual a </option>';
			html +='	<option value="contem" '+(valueTipo == "contem" ? "selected='selected'": "")+'>Contém</option>';
			html +='	<option value="diferente_de" '+(valueTipo == "diferente_de" ? "selected='selected'": "")+'>Diferente de </option>';
			html +='	<option value="maior_que_coluna" '+(valueTipo == "maior_que_coluna" ? "selected='selected'": "")+'>Maior que a coluna </option>';
			html +='	<option value="menor_que_coluna" '+(valueTipo == "menor_que_coluna" ? "selected='selected'": "")+'>Menor que a coluna </option>';
			html +='	<option value="igual_a_coluna" '+(valueTipo == "igual_a_coluna" ? "selected='selected'": "")+'>Igual a coluna </option>';
			html +='	<option value="porcentagem_de_ate_da_coluna" '+(valueTipo == "porcentagem_de_ate_da_coluna" ? "selected='selected'": "")+'>Percentual atingido de até da coluna </option>';
			html +='	<option value="diferenca_de_ate_da_coluna" '+(valueTipo == "diferenca_de_ate_da_coluna" ? "selected='selected'": "")+'>Diferença de até da coluna </option>';
			html +='</select>';
		html +='</div>';
		
		html +='<div class="de_atelinha_cor_dinamica" style="float: left; display: '+display_de_atelinha_cor_dinamica+';">';	
			html +='	De  <input type="text" name="val_de"  value="'+valueval_de+'"  placeholder="000,00" data-mask-reverse="true" class="form " style="width: 120px;">';
			html +='	Até <input type="text" name="val_ate" value="'+valueval_ate+'"  placeholder="000,00" data-mask-reverse="true" class="form " style="width: 120px;" >';
		html +='</div>';
		html +='<div class="valor_cor_dinamica" style="float: left; display: '+display_valor_cor_dinamica+';">';	
			html +='	Valor  <input type="text" name="valor" value="'+valuevalor+'"  placeholder="000,00" data-mask-reverse="true" class="form " style="width: 120px;">';
		html +='</div>';
		html +='<div class="colunavallinha_cor_dinamica" style="float: left; display: '+display_colunavallinha_cor_dinamica+';">';
			html +='	Coluna <select name="col_valor" id="coluna_valor'+sequenci_linha_cor_dinamica+'" class="form coluna_valor" value="'+valuecol_valor+'"  placeholder="Tipo"  style="width: 150px; padding: 5px;">';
			html +='		<option value=""></option> ';
			if(obgRegra != null && valuecol_valor != "")
			{
				html +='<option value="'+valuecol_valor+'" selected="selected">'+valuecol_valor+'</option> ';
			}
			html +='	</select>';
		html +='</div>';
		html +='<div style="float: left; ">';
			//html +='	Pintar linha <input type="color" value="'+valuecor+'" class="form" name="cor_fonte" style="width: 50px;" />';
			html +=' Pintar ';
			html +='<select class="form" name="tipo_pintura" id="tipo_pintura'+sequenci_linha_cor_dinamica+'" value="'+valueTipoPintura+'" placeholder="Tipo"  style="width: 190px; padding: 5px;">';
			html +='	<option value=""></option>';
			html +='	<option value="pinta_coluna_fonte_fundo" '+(valueTipoPintura == "pinta_coluna_fonte_fundo" ? "selected='selected'": "")+'>Coluna fonte e fundo</option>';
			html +='	<option value="pinta_linha_fonte_fundo" '+(valueTipoPintura == "pinta_linha_fonte_fundo" ? "selected='selected'": "")+'>Linha fonte e fundo</option>';
			html +='	<option value="pinta_coluna_fonte" '+(valueTipoPintura == "pinta_coluna_fonte" ? "selected='selected'": "")+'>Coluna fonte</option>';
			html +='	<option value="pinta_coluna_fundo" '+(valueTipoPintura == "pinta_coluna_fundo" ? "selected='selected'": "")+'>Coluna fundo</option>';
			html +='	<option value="pinta_linha_fonte" '+(valueTipoPintura == "pinta_linha_fonte" ? "selected='selected'": "")+'>Linha fonte</option>';
			html +='	<option value="pinta_linha_fundo" '+(valueTipoPintura == "pinta_linha_fundo" ? "selected='selected'": "")+'>Linha fundo</option>';
			html +='</select>';
			html +='&nbsp;&nbsp;Fundo <input type="color" value="'+valuecorfundo+'" class="form" name="cor_fundo" style="width: 50px;" />';
			html +='&nbsp;&nbsp;Fonte <input type="color" value="'+valuecorfonte+'" class="form" name="cor_fonte" style="width: 50px;" />';
			
		html +='</div>';
		html +='</div>';
		//html +='	<br>';
		$('#cores_dinamica').append(html);
		coluna_valor_por_classe('coluna_valor'+sequenci_linha_cor_dinamica);
		coluna_todas('coluna'+sequenci_linha_cor_dinamica);
		validar_coluna_tab($("#coluna"+sequenci_linha_cor_dinamica))
		if(obgRegra != null)
		{
			$('#tipo_validacao'+display_de_atelinha_cor_dinamica+' option[value=\''+valueTipo+'\']').attr('selected','selected');
		}
		
	}
	
	function coluna_valor_por_classe(idColuna)
	{
		for(i =0; i < colunas.length; i++)
		{
			if(colunas[i].tipo_dado == "int" || colunas[i].tipo_dado == "float")
			{
				selected = false;
				$("#"+idColuna).append($('<option>', {
					value: colunas[i].nome,
					text: colunas[i].nome,
					"selected": selected
				}));
			}
		}
		//$('#linha_grid_'+qtd_linha_filtro+' .tipo_filtro option[value=\''+tipo_filtro+'\']').attr('selected','selected');
	}
	function coluna_todas(idColuna)
	{
		for(i =0; i < colunas.length; i++)
		{
			if(! $("#"+idColuna).html().includes(colunas[i].nome))
			{
				selected = false;
				$("#"+idColuna).append($('<option>', {
					value: colunas[i].nome,
					text: colunas[i].nome,
					"selected": selected
				}));
			}
		}
		//$('#linha_grid_'+qtd_linha_filtro+' .tipo_filtro option[value=\''+tipo_filtro+'\']').attr('selected','selected');
	}
	
	function validar_coluna_tab(seletor)
	{
		for(i =0; i < colunas.length; i++)
		{
			if(colunas[i].nome == $(seletor).val())
			{
				//alert($(seletor).val()+" "+colunas[i].tipo_dado)
				if(colunas[i].tipo_dado == "int" || colunas[i].tipo_dado == "float")
				{
					 $(seletor).parent().parent().parent().find('[name="val_de"]').attr("placeholder","000,00");
					 $(seletor).parent().parent().parent().find('[name="val_de"]').attr("type","number");
					 $(seletor).parent().parent().parent().find('[name="val_de"]').attr("data-mask-reverse","true");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').attr("placeholder","000,00");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').attr("type","number");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').attr("data-mask-reverse","true");
					 $(seletor).parent().parent().parent().find('[name="valor"]').attr("placeholder","000,00");
					 $(seletor).parent().parent().parent().find('[name="valor"]').attr("type","number");
					 $(seletor).parent().parent().parent().find('[name="valor"]').attr("data-mask-reverse","true");
				}
				else
				{
					//alert( $(seletor).parent().parent().parent().find('[name="val_de"]').val())
					 //$(this).find('[name="cor_fundo"]').val()
					 $(seletor).parent().parent().parent().find('[name="val_de"]').attr("placeholder","");
					 $(seletor).parent().parent().parent().find('[name="val_de"]').prop("type","text");
					 $(seletor).parent().parent().parent().find('[name="val_de"]').removeAttr("data-mask-reverse");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').attr("placeholder","");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').prop("type","text");
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').removeAttr("data-mask-reverse");
					 $(seletor).parent().parent().parent().find('[name="valor"]').attr("placeholder","");
					 $(seletor).parent().parent().parent().find('[name="valor"]').prop("type","text");
					 $(seletor).parent().parent().parent().find('[name="valor"]').removeAttr("data-mask-reverse");
					 $(seletor).parent().parent().parent().find('[name="val_de"]').val($(seletor).parent().parent().parent().find('[name="val_de"]').val()).trigger('change');;
					 $(seletor).parent().parent().parent().find('[name="val_ate"]').val($(seletor).parent().parent().parent().find('[name="val_ate"]').val()).trigger('change');;
					 $(seletor).parent().parent().parent().find('[name="valor"]').val($(seletor).parent().parent().parent().find('[name="valor"]').val()).trigger('change');;
					 //$(seletor).parent().parent().parent().find('[name="val_de"]').prop('value', $(seletor).parent().parent().parent().find('[name="val_de"]').val());
					 //$(seletor).parent().parent().parent().find('[name="val_ate"]').prop('value', $(seletor).parent().parent().parent().find('[name="val_ate"]').val());
					// $(seletor).parent().parent().parent().find('[name="valor"]').prop('value', $(seletor).parent().parent().parent().find('[name="valor"]').val());
					
					 
				}
			}
		}
		
	}
	function habilita_colunas_por_tipo_valid_tab(seletor)
	{
		//alert($(seletor).val()+seletor)
		if($(seletor).val() == "porcentagem_de_ate_da_coluna" || $(seletor).val() == "diferenca_de_ate_da_coluna" )
		{
			$(seletor).parent().parent().find(".valor_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".colunavallinha_cor_dinamica").css("display", "block");
			$(seletor).parent().parent().find(".de_atelinha_cor_dinamica").css("display", "block");
		}
		else if($(seletor).val() == "de_ate" )
		{
			$(seletor).parent().parent().find(".valor_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".colunavallinha_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".de_atelinha_cor_dinamica").css("display", "block");
		}
		else if($(seletor).val() == "menor_que" || $(seletor).val() == "maior_que" || $(seletor).val() == "igual_que" || $(seletor).val() == "contem")
		{
			$(seletor).parent().parent().find(".valor_cor_dinamica").css("display", "block");
			$(seletor).parent().parent().find(".de_atelinha_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".colunavallinha_cor_dinamica").css("display", "none");
		}
		else
		{
			$(seletor).parent().parent().find(".valor_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".de_atelinha_cor_dinamica").css("display", "none");
			$(seletor).parent().parent().find(".colunavallinha_cor_dinamica").css("display", "block");
		}
	}
	colunas = [];
	<?php 
	foreach($listabi_coluna_analise as $coluna_analise)
	{
		//echo $coluna_analise->getColuna()." ".$coluna_analise->getTipo()->getTipo_bd()."<br>";
		echo "colunas.push({nome: '".$coluna_analise->getColuna()."', tipo_dado: '".$coluna_analise->getTipo()->getTipo_bd()."'});";
	}
	?>
	listaCorDinamicaArmazenada = <?php if ($bi_analise->getJson_cor_dinamica_widget() ==""){echo "null";} else { echo $bi_analise->getJson_cor_dinamica_widget();} ?>;
	if(listaCorDinamicaArmazenada != null)
	{
		for(j =0; j < listaCorDinamicaArmazenada.length; j++)
		{
			add_regra_cor_table(listaCorDinamicaArmazenada[j]);
		}
	}
	
	function salvar_cores_tab()
	{

		//lista cor dinamica
		lista_cor_dinamica = [];
		$('.linha_cor_dinamica').each(function(){
			cor_dinamica = {
			col: $(this).find('[name="col"]').val(),	
			tipo_validacao: $(this).find('[name="tipo_validacao"]').val(), val_de: $(this).find('[name="val_de"]').val(),
			val_ate: $(this).find('[name="val_ate"]').val(), col_valor: $(this).find('[name="col_valor"]').val(),
			cor_fundo: $(this).find('[name="cor_fundo"]').val(), cor_fonte: $(this).find('[name="cor_fonte"]').val(),
			valor: $(this).find('[name="valor"]').val(),
			tipo_pintura: $(this).find('[name="tipo_pintura"]').val()};
			lista_cor_dinamica.push(cor_dinamica);
		});
		
		$.post("src/controller/Bi_analiseControllerUser.php?mod=salvar_cores_tab_analise", 
		{lista_cor_dinamica: lista_cor_dinamica, codigo_analise: <?php echo $_GET["codigo"]; ?>}, 
			function (retorno)
			{
				//fechar_modal_aviso();
				if(! retorno.status)
				{
					alert(retorno.mensagem);
				}
				else
				{
					if(montaTebelaBi('<?php echo $_GET["nomeForm"]; ?>','<?php echo $_GET["seletor"]; ?>')) { fechar_modal_aviso();}
					/*$("#codigo_analise").val(retorno.codigo);
					if(confirm("Sucesso! Código "+retorno.codigo+". Deseja visualizar a análise?"))
					{
						window.open('Analise_view.php?analise='+retorno.codigo, '_blank');
					}*/
						
					//alert(retorno.mensagem);
				}
			},'json'
		);	
	}
</script>

<div id="cores_dinamica"  style="width: 100%; padding: 10px;">
	
</div>
<a href="javaScript:void(0)" style="color: green; font-weight: bold;" onclick="add_regra_cor_table(null)">Adicionar regra cor dinámica</a>
<Br>
<center><button class="btnSuccess btnSn" onclick="salvar_cores_tab()">Finalizar</button></center>