<?php
require_once("config/config_dir_raiz.php");
include_once("cabecalho.php");
include_once("rodape.php");

$config = new Config();
require_once($config->diretorio_raiz()."/src/model/bd/BiDAO.php");
$biDAO = new BiDAO();
$listaRelatorios = $biDAO->monta_filtro(2, "formDadosbi_analiseFiltro", "seletor1");
$listaRelatorios = $biDAO->monta_filtro(1, "formDadosbi_analiseFiltro2", "seletor2");

?>
<style>
	.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #88a1d3;
    position: relative;
    min-height: 50px;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #88a1d3;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}
</style>

<!-- teste com graficos!-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- teste com graficos!-->


<div class='resizable draggable'  style="width: 300px; height: 300px; floaf: left; position: absolute; ">
    <div class="ui-resizable-handle ui-resizable-nw"></div>
    <div class="ui-resizable-handle ui-resizable-ne"></div>
    <div class="ui-resizable-handle ui-resizable-sw"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
	<div id="seletor1" style="width: 100%; height: 100%; overflow: auto;"></div>
</div>

<div class='resizable draggable' style="width: 300px; height: 300px; floaf: left; position: absolute; ">
    <div class="ui-resizable-handle ui-resizable-nw"></div>
    <div class="ui-resizable-handle ui-resizable-ne"></div>
    <div class="ui-resizable-handle ui-resizable-sw"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
	<div id="seletor2" style="width: 100%; height: 100%; overflow: auto;"></div>
</div>

<script>
	$('.resizable').resizable({
    handles: {
        'nw': '.ui-resizable-nw',
        'ne': '.ui-resizable-ne',
        'sw': '.ui-resizable-sw',
        'se': '.ui-resizable-se',
        'n': '.ui-resizable-n',
        'e': '.ui-resizable-e',
        's': '.ui-resizable-s',
        'w': '.ui-resizable-w'
    }
	});
	$( '.draggable' ).draggable().on('click', function(){
		if ( $(this).is('.ui-draggable-dragging') ) {
			return;
		} else {
			$(this).draggable( 'option', 'disabled', true );
			$(this).prop('contenteditable','true');
			$(this).css('cursor', 'text');
		}
	})
	.on('blur', function(){
		$(this).draggable( 'option', 'disabled', false);
		$(this).prop('contenteditable','false');
		$(this).css('cursor', 'move');
	});
</script>




<script>
	somadorParcial = [];
	contadorParcial = [];
	function montaTebelaBi(formulario, seletor)
	{	
		bloqueio_form = false;
		$("#"+formulario + ' input[required]').each(function() {
			
			if ($(this).val() == ""  )
			{
				bloqueio_form = true;
				$(this).css("border-color","red");
			}	
			else
			{
				$(this).css("border-color","#6b8dae");
			}	
		});
		
		$("#"+formulario+' select[required]').each(function() {
			
			if ($(this).val() == ""  )
			{
				bloqueio_form = true;
				$(this).css("border-color","red");
				
				if($(this).attr("name"))
				{
					//alert($(this).attr("name"))
					//select2
					name_select = $(this).attr("name");
					$("#"+formulario+' span').each(function() {
						if($(this).attr("aria-labelledby"))
						{
							if($(this).attr("aria-labelledby").split("-")[1] == name_select) 
							{
								//alert(name_select+ " - "+$(this).attr("aria-labelledby").split("-")[1])
								$(this).css("border-color","red");
							}
						}
					});
				}
			}	
			else
			{
				$(this).css("border-color","#6b8dae");
				
				if($(this).attr("name"))
				{
					//alert($(this).attr("name"))
					//select2
					name_select = $(this).attr("name");
					$("#"+formulario+' span').each(function() {
						if($(this).attr("aria-labelledby"))
						{
							if($(this).attr("aria-labelledby").split("-")[1] == name_select) 
							{
								$(this).css("border-color","#6b8dae");
							}
						}
					});
				}
			}
			
		});
		
		if (! bloqueio_form)
		{	
			
			//$('.btnSalvar').remove();
			dadosJson = $("#"+formulario).serialize(); 
			$.post($("#"+formulario).attr("action"),dadosJson, function (retorno)
			{
				indicesColunasToralizar = [];
				indicesColunasMedia = [];
				
				ultimoValorParaQubraParcial = [];
				html = "<table class='tableAnalise' id='analise"+retorno.config.codigo+"' style='width: 2200px;'>";
				html += "<thead><tr>";
				for(i =0; i < retorno.colunas.length; i++)
				{
					coluna = retorno.colunas[i];
					html += "<th>"+coluna.nome+"</th>";
					if(coluna.totaliza)
					{
						indicesColunasToralizar.push(i); 
					}
					somadorParcial.push(0); //inicia com 0 pega e valor pelo indice
					if(coluna.media)
					{
						indicesColunasMedia.push(i); 
						
					}
					contadorParcial.push(0); //inicia com 0 e valor pelo indice
					ultimoValorParaQubraParcial.push("nulini");
				}
				html += "</thead><tbody>";
				//dados
				for(i =0; i < retorno.dados.length; i++)
				{
					valores = retorno.dados[i];
					//validar quebra parcial
					if(valores[0] != ultimoValorParaQubraParcial[0] && i > 0  
					//falta criar as colunas quebrar, esta fixo a primeira
					)
					{
						html += montaMediaParcial(indicesColunasMedia, retorno.colunas);
						html += montaTotalParcial(indicesColunasToralizar, retorno.colunas);
					}
					//
					html += "<tr>";
					algumaColunaTemValorDifDaLinhaAnt = false;
					for(j =0; j < valores.length; j++)
					{
						style="";
						if(valores[j] == ultimoValorParaQubraParcial[j] && ! algumaColunaTemValorDifDaLinhaAnt) ///&& j ==0)//sem coluna querar
						{
							if(true)
							{
								style="border: none; color: white;";
							}
						}
						else
						{
							algumaColunaTemValorDifDaLinhaAnt = true;
						}
						html += "<td style='"+style+"'>"+valores[j]+"</td>";
						if(indicesColunasToralizar.includes(j))
						{
							somadorParcial[j] = somadorParcial[j] +parseFloat(valores[j]);
						}
						if(indicesColunasMedia.includes(j))
						{
							contadorParcial[j] = contadorParcial[j] +1;
						}
						ultimoValorParaQubraParcial[j] = valores[j];
					}
					html += "</tr>";
					
				}
				html += montaMediaParcial(indicesColunasMedia, retorno.colunas);
				html += montaTotalParcial(indicesColunasToralizar, retorno.colunas);
				html += "</tbody></table>";
				$("#"+seletor).html(html);
				//cabecalho fixo
				document.getElementById(seletor).addEventListener("scroll", function(){
				   var translate = "translate(0,"+this.scrollTop+"px)";
				   this.querySelector("thead").style.transform = translate;
				});
				if(retorno.config.usar_charts)
				{
					//alert(retorno.config.tipo_charts)
					Highcharts.chart(seletor, {
						chart: {
							type: retorno.config.tipo_charts,
							inverted: false
						},
						data: {
							table: 'analise'+retorno.config.codigo
						}
					
					});
				}
			},'json'
			);
		}
		else
		{
			alert("Verifique campos obrigatórios!");
		}	
		somadorParcial = [];
		contadorParcial = [];
		return ! bloqueio_form;
	}
	function montaMediaParcial(indicesColunasMedia, colunas)
	{
		html = "";
		if(indicesColunasMedia.length > 0
						//falta criar as colunas quebrar, esta fixo a primeira
		)
		{
			//cria uma coluna com totalizador e media
			html += "<tr>";
			html += "	<td class='tdTotalizadorBi'>Média parcial</td>";
			for(k =1; k < colunas.length; k++)
			{
				if(indicesColunasMedia.includes(k))
				{
					html += "	<td class='tdTotalizadorBi'>"+roundToTwo(somadorParcial[k]/contadorParcial[k])+"</td>";
					//somadorParcial[k] = 0;
					contadorParcial[k] = 0;
				}
				else
				{
					html += "	<td></td>";
				}
			}
			html += "</tr>";
			//contadorParcial[j] = 0;
		}
		return html;
	}
	function montaTotalParcial(indicesColunasToralizar, colunas)
	{
		html = "";
		if(indicesColunasToralizar.length > 0 )
		{
			//cria uma coluna com totalizador e media
			html += "<tr>";
			html += "	<td class='tdTotalizadorBi'>Total parcial</td>";
			for(k =1; k < colunas.length; k++)
			{
				if(indicesColunasToralizar.includes(k))
				{
					html += "	<td class='tdTotalizadorBi'>"+roundToTwo(somadorParcial[k])+"</td>";
					somadorParcial[k] = 0;
					contadorParcial[k] = 0;
				}
				else
				{
					html += "	<td></td>";
				}
			}
			html += "</tr>";
		}
		return html;
	}
	
	function roundToTwo(num) {
		return +(Math.round(num + "e+2")  + "e-2");
	}
	
	
</script>