
<head>
	<style>
		.tabela_view tr:nth-child(even) {background-color: #f2f2f2;}
		.tabela_view { border-collapse: collapse;}
		.tabela, td, th {
		  padding: 10px;
		}
		/*#table, td, th {
		  border: 1px solid;
		}*/
	</style>
</head>
<script>
	listaInfoArmazenada = "<?php echo $bi_analise->getColunas_informarcao_analise_vertical(); ?>";
	listaColunaVerticalInfoArmazenada = "<?php echo $bi_analise->getColuna_analise_vertical(); ?>";
	listaInfoValoresArmazenada = "<?php echo $bi_analise->getColunas_valores_analise_vertical(); ?>";
	listaQuebraTotParcialArmazenada = "<?php echo $bi_analise->getColunas_quebrar_parcial_analise_vertical(); ?>";
	listaQuebraMediaParcialArmazenada = "<?php echo $bi_analise->getColunas_quebrar_media_parcial_analise_vertical(); ?>";
	listaQuebraTotFinalArmazenada = "<?php echo $bi_analise->getColunas_total_analise_vertical(); ?>";
	listaQuebraMediaFialArmazenada = "<?php echo $bi_analise->getColunas_media_analise_vertical(); ?>"
	listacolunas_valores_media_parcialArmazenada  = "<?php echo $bi_analise->getColunas_valores_media_parcial(); ?>";
	listacolunas_valores_soma_parcialArmazenada  = "<?php echo $bi_analise->getColunas_valores_soma_parcial(); ?>";
	listaSeqColOrdenarArmazenada = "<?php echo $bi_analise->getColunas_sequencia_ordenacao(); ?>";
	listaInfoArmazenada = listaInfoArmazenada.replaceAll("`","");
	listaColunaVerticalInfoArmazenada = listaColunaVerticalInfoArmazenada.replaceAll("`","");
	listaInfoValoresArmazenada = listaInfoValoresArmazenada.replaceAll("`","");
	listaQuebraTotParcialArmazenada = listaQuebraTotParcialArmazenada.replaceAll("`","");
	listaQuebraMediaParcialArmazenada = listaQuebraMediaParcialArmazenada.replaceAll("`","");
	listaQuebraTotFinalArmazenada = listaQuebraTotFinalArmazenada.replaceAll("`","").split(",");;
	listaQuebraMediaFialArmazenada = listaQuebraMediaFialArmazenada.replaceAll("`","").split(",");;
	listacolunas_valores_media_parcialArmazenada = listacolunas_valores_media_parcialArmazenada.replaceAll("`","").split(",");;
	listacolunas_valores_soma_parcialArmazenada = listacolunas_valores_soma_parcialArmazenada.replaceAll("`","").split(",");;
	listaSeqColOrdenarArmazenada = listaSeqColOrdenarArmazenada.replaceAll("`","");
	$("#titulo_modal_analide").html("<b>Tabela</b>");
</script>
<script src="js/analise_tabela.js"></script>
<?php include("Etapa1_criacao.php"); ?>


<div id="etapa3" class="etapas_criar_analise" style="display: none;  padding-top: 0px;  padding: 10px; padding-top: 0px;">
	<b style="color: #a6a6a6;">Etapa 3 de 4  Configuração das colunas</b> <Br>
	<a href="javaScript:void(0)" style=" font-weight: bold;" onclick="voltar_etapa2()"><i class="fa-solid fa-left-long"></i> Voltar etapa</a>
	<Br> 
	<table id="tabela" border="1" class="tableAnalise" style="width: 100%;" >
		<thead>
		<tr>
			<td style="text-align: left; vertical-align: top; width: 200px;">
				<label>Colunas visualização</label>
				<select class="form" id="select_colunas_info" placeholder="Tipo" onchange="atualiza_select_vertical()"  multiple style="width: 100%; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			
			<td style="vertical-align: top; width: 250px;">
				<label>Colunas de valores</label>
				<select class="form" id="select_colunas_valores_vertical" onchange="atualiza_select_quebrar_parcial_vertical()" placeholder="Tipo" multiple   style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select> 
				</b>
				<label>Total soma.</label>
				<select class="form" id="select_colunas_total_vertical" onchange="setValoresTotais()" onclick="atualiza_select_quebrar_parcial_vertical()" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
				<br>
				<label>Total média.</label>
				<select class="form" id="select_colunas_media_vertical" onchange="setValoresTotais()" onclick="atualiza_select_quebrar_parcial_vertical()" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			<td style="vertical-align: top; min-width: 180px;">
				<label>Coluna vertical</label><!--(Exemplo Mes: JAN, FEV, MAR)--><Br>
				<select class="form" id="select_coluna_vertical" placeholder="Tipo" onchange="atualiza_select_valores_vertical()"  style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
				
			</td>
			
		</tr>
		</thead>
		<tbody>
			<tr><td>-</td></tr>
			<tr><td style="text-align: left;"><label>Quebrar soma parcial.</label>
				<select class="form" id="select_colunas_quebra_parcial_vertical" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			<td>
				<label>Colunas valores soma parcial.</label>
				<select class="form" id="select_colunas_val_soma_parcial" onchange="setValoresTotais()" onclick="atualiza_select_quebrar_parcial_vertical()" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			</tr>
			
			<tr><td style="text-align: left;"><label>Quebrar média parcial.</label> 
				<select class="form" id="select_colunas_quebra_media_parcial_vertical" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			<td>
				<label>Colunas valores média parcial.</label>
				<select class="form" id="select_colunas_val_media_parcial" onchange="setValoresTotais()" onclick="atualiza_select_quebrar_parcial_vertical()" placeholder="Tipo"  multiple style="width: 150px; padding: 5px;">
					<option value=""></option>
				</select>
			</td>
			</tr>
			<tr><td>-</td></tr>
			
			
		</tbody>
		
	</table>
	<br>
	<div id="sequencia_ordenar" style="display: none; ">
		<label>Sequencia de colunas ordenar, (order by)</label>
		<select class="form" id="select_sequenc_colunas_ordenar"  placeholder="Tipo" multiple   style="width: 150px; padding: 5px;">
				<option value=""></option>
		</select> 
	</div>
	<script>
		$("#select_colunas_info").select2({ width: '100%' });
		//abaixo codigo para colocar na sequencia de clique
		$("#select_colunas_info").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			
		//if(tipo_analise == "tabela_vertical")
		//{
			$("#select_coluna_vertical").select2({ width: '100%' });
			$("#select_colunas_quebra_parcial_vertical").select2({ width: '100%' });
			$("#select_colunas_quebra_media_parcial_vertical").select2({ width: '100%' });
			$("#select_colunas_valores_vertical").select2({ width: '100%' });
			$("#select_colunas_total_vertical").select2({ width: '100%' });
			$("#select_colunas_media_vertical").select2({ width: '100%' });
			$("#select_colunas_val_soma_parcial").select2({ width: '100%' });
			$("#select_colunas_val_media_parcial").select2({ width: '100%' });
			//abaixo codigo para colocar na sequencia de clique
			$("#select_colunas_quebra_parcial_vertical").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_quebra_media_parcial_vertical").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_valores_vertical").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_total_vertical").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_media_vertical").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_val_soma_parcial").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			$("#select_colunas_val_media_parcial").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
			
			$("#select_sequenc_colunas_ordenar").select2({ width: '100%' });
			//abaixo codigo para colocar na sequencia de clique
			$("#select_sequenc_colunas_ordenar").on("select2:select", function (evt) {var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change");});
		
			//permite sequenciar as seleções
			/*$("ul.select2-selection__rendered").sortable({
			  containment: 'parent',
			  stop: function(event, ui) {
			  // event target would be the <ul> which also contains a list item for searching (which has to be excluded)
				
				var arr = Array.from($(event.target).find('li:not(.select2-search)').map(function () { 
					return {name: $(this).data('data').text, value: $(this).data('data').id }; 
				  }))
				console.log(arr);
			  }
			});*/
		//}
		
	</script>
	<br>
	<button class="btnSuccess btnSn"  style="float: left;" onclick="avancar_analise_etapa4_tabela()">Avançar etapa 4</button>
	<div class='filtroForm' style="padding-top: 2px; float: left; padding-left: 15px;">
		<a href="javaScript:void(0)" style="font-weight: bold;" onclick="abrir_ajuda_analise('ajuda_tabela')"><i style="color: orange; font-size: 25px; " class="fa-solid fa-circle-info"></i></a>
	</div>
	<button class="btnSuccess btnSn"  style="float: left; margin-left: 15px;" onclick="abrirAbaColunaCalculada()"><i class="fa-solid fa-calculator"></i> Coluna calculada</button>
	<button class="btnSuccess btnSn"  style="float: left; margin-left: 15px;" onclick="abrirAbaTipoData()"> Alterar tipo dado</button>
	<button class="btnSuccess btnSn"  style="float: left; margin-left: 15px;" onclick="abrirAbaSequencOrder()"> Sequência ordernar</button>
	
	<div class='filtroForm'  style="dwidth: 100%;">	
		<div id="ajuda_tabela" style="display: none; ">
			Obs: Será realizado uma consulta com limit 20 linhas para obter o tipo de dados de cada coluna
			<b style="color: white; background: #eab580;">
			
			<center><img src="images/ajuda/tabela.png" style="width: 100%; max-width: 700px;"/></center>
		</div>	
	</div>	
	<?php include("Coluna_calculada.php"); ?>
	<?php include("Alterar_tipo_dado.php"); ?>
</div>

<div id="etapa4"   style=" display: none; width: 100%; max-width: 800px; margin: 0 auto; padding: 10px; padding-top: 0px;">
	<b style="color: #a6a6a6;">Etapa 4 de 4 - Configurar colunas</b> <Br>
	<a href="javaScript:void(0)" style=" font-weight: bold;" onclick="voltar_etapa3()"><i class="fa-solid fa-left-long"></i> Voltar etapa</a>
	<Br>
	
	<div id="config_coluna"  style="width: 100%; padding: 10px;">
	
	</div>
	
	<button class="btnSuccess btnSn" onclick="finalizar_analise_tabela()">Finalizar</button>
</div>
	
