<?php
include 'header.php';
header('Access-Control-Allow-Origin: *');
require_once "inc/usuario.php";


$user = getLoggedUser();
$grp_user = $_SESSION[SESSION_USER_NAME]['grupo'];

$id_unid = $user['unidade'];


?>

 
<div class="block dataTable">
  <div class="header">
    <h3>DASHBOARD FINANCEIRO</h3>
  </div>

  <div class="content">
      <div class="form-row">
    	<div class="col-md-1"></div>
    	<div class="col-md-4">
    		<select id="nr_mes">
    			<option value=1>Janeiro</Option>
    			<option value=2>Fevereiro</Option>
    			<option value=3>Março</Option>
    			<option value=4>Abril</Option>
    			<option value=5>Maio</Option>
    			<option value=6>Junho</Option>
    			<option value=7>Julho</Option>
    			<option value=8>Agosto</Option>
    			<option value=9>Setembro</Option>
    			<option value=10>Outubro</Option>
    			<option value=11>Novembro</Option>
    			<option value=12>Dezembro</Option>
    		</select>
    	</div>
      </div>
      <div class="form-row">
    	<div class="col-md-1"></div>
    	<div class="col-md-4">
    		<select id="nr_ano" class="form-control">
    		<?php 
    			$anoInicial = 2000;
    			foreach (range(date('Y'), $anoInicial) as $nr_ano) {
    			    if($nr_ano == date('Y')){
    			        echo "<option selected value='$nr_ano'>$nr_ano</option>";
    			    }else{
    			        echo "<option value='$nr_ano'>$nr_ano</option>";
    			    }
    			}
    		?>
    		</select>
    	</div>
      </div>
  </div> <!-- content -->
  <div id="graficos" class="bara">
	<div class="form-row">
		<div hidden class="col-md-6 graficos">
			<label style="width: 60%; margin: 0 auto; text-align: center;">Receitas</label>
			<table style="width: 50%; margin: 0 auto; text-align: center; border-style: solid; border-width: 1px; border-color: white">
				<thead>
					<tr>
						<td><h1 id="vl_receitas"></h1></td>
					</tr>
				</thead>
				<tbody>
            			<tr>
            				<td id="receita_realizado_meta" style="background-color:green"></td>
            			</tr>
        		</tbody>			
			</table>
			<div id="chart_comparacao" style="width: 50%; margin: 0 auto; padding-top: 20px "></div>
		</div>
		
		<div hidden class="col-md-6 graficos">
			<label style="width: 61%; margin: 0 auto; text-align: center;">Despesas</label>
			<table style="width: 50%; margin: 0 auto; text-align: center; border-style: solid; border-width: 1px; border-color: white"">
				<thead>
					<tr>
						<td><h1 id="vl_despesas"></h1></td>
					</tr>
				</thead>
				<tbody>
            			<tr>
            				<td id="despesa_realizado_meta" style="background-color:orange"></td>
            			</tr>
        		</tbody>			
			</table>
			<div id="chart_saldo" style="width: 50%; margin: 0 auto; padding-top: 20px"></div>
		</div>		
	</div>
	<div class="form-row"><br></div>
	<div class="form-row">
		<div class="col-md-6">
			<label hidden class="graficos" style="width: 68%; margin: 0 auto; text-align: center;">Lucro / Prejuízo</label>
			<table hidden class="graficos" style="width: 50%; margin: 0 auto; text-align: center; border-style: solid; border-width: 1px; border-color: white"">
				<thead>
					<tr>
						<td><h1 id="vl_lucro_prejuizo"></h1></td>
					</tr>
				</thead>
				<tbody>
            			<tr>
            				<td id="lucro_realizado_meta" style="background-color:red"></td>
            			</tr>
        		</tbody>			
			</table>
			<div id="chart_divisao_receita" style="width: 600px; height: 400px; "></div>
		</div>
		<div class="col-md-6">
			<label hidden class="graficos" style="width: 65%; margin: 0 auto; text-align: center;">Lucratividade</label>
			<table hidden class="graficos" style="width: 50%; margin: 0 auto; text-align: center; border-style: solid; border-width: 1px; border-color: white"">
				<thead>
					<tr>
						<td><h1 id="pr_lucratividade"></h1></td>
					</tr>
				</thead>
				<tbody>
            			<tr>
            				<td id="lucratividade_realizado_meta" style="background-color:brown"></td>
            			</tr>
        		</tbody>			
			</table>
			<div id="chart_divisao_despesa" style="width: 600px; height: 400px;"></div>
		</div>
	</div>	
  </div>

</div> <!-- block -->    
<?php
    include 'footer.php';
?>


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript">
$("#nr_mes").change(function(){
	var nr_ano = $("#nr_ano").val();
	var nr_mes = $("#nr_mes").val();
	var ds_mes = $("#nr_mes").find('option:selected').text();
	desenhaCharts(nr_ano, nr_mes, ds_mes);
	
	$("html").attr("background-color","green");

	setTimeout(function () {
    	refazScrollPagewrap();
    }, 1500);
	
	
});

$("#nr_ano").change(function(){
	var nr_ano = $("#nr_ano").val();
	var nr_mes = $("#nr_mes").val();
	var ds_mes = $("#nr_mes").find('option:selected').text();
	desenhaCharts(nr_ano, nr_mes, ds_mes);

});


//Função para buscar dados do periodo informado e chamar métodos para desenhar os Charts
function desenhaCharts(nr_ano, nr_mes, ds_mes) {
	$.post( "erpc_financeiro_dashboard_consultas.php",
			{ 	  nr_ano: nr_ano
				, nr_mes: nr_mes}
		   ).done(function( json_retorno ) {
			   
		console.log(json_retorno);
		//alert(json_retorno);
		
		//Parse para tratar o json retorno como Objeto
		var dados = JSON.parse(json_retorno);
		
		google.charts.load('current', {
			  callback: function () {
				$(".graficos").show();
			    drawComparacao(dados, ds_mes);
			    drawSaldo(dados, ds_mes);
			    drawDivisaoReceitas(dados, ds_mes);
			    drawDivisaoDespesas(dados, ds_mes);
			  },
			  packages: ['corechart', 'bar']
		});

	});
	
	setTimeout(function(){
		//document.webkitExitFullscreen();
	}, 200);
	
	//openFullscreen();
	//closeFullscreen();
}


//Função Para desenhar o CHART de Comparação
function drawComparacao(dados, ds_mes) {

  var realizadoxmeta = (dados.vl_receita*100)/dados.vl_meta_receita;

  //Cores das Colunas
  var cores = ['blue', 'green', 'red', 'yellow'];
  
  // Create the data table.
	var data = google.visualization.arrayToDataTable([
        ['', 'Receitas', 'Receitas Meta', 'Despesas', 'Despesas Meta'],
        [ds_mes, Number(dados.vl_receita), Number(dados.vl_receita_meta), Number(dados.vl_despesa), Number(dados.vl_despesa_meta)]
      ]);

  $("#vl_receitas_meta").css('background-color','orange');
  
  //vl_receita = vl_receita.replace('.', ',');
  $("#vl_receitas").text(dados.vl_receita_impressao);
  $("#vl_despesas").text(dados.vl_despesa_impressao);
  $("#vl_lucro_prejuizo").text(dados.vl_lucro_prejuizo_impressao);
  $("#pr_lucratividade").text(dados.pr_lucratividade + '%');
  
  $("#receita_realizado_meta").text(dados.pr_receita_realizadoxmeta);
  $("#despesa_realizado_meta").text(dados.pr_despesa_realizadoxmeta);
  $("#lucro_realizado_meta").text(dados.pr_lucro_realizadoxmeta);
  $("#lucratividade_realizado_meta").text(dados.pr_lucratividade_realizadoxmeta);

  //Atribuindo as cores
  if(Number(dados.vl_receita) > Number(dados.vl_receita_meta)){
		$("#receita_realizado_meta").css("background-color","green");
  }else{
	  $("#receita_realizado_meta").css("background-color","orange");
  }

  if(Number(dados.vl_despesa) <= Number(dados.vl_despesa_meta)){
	$("#despesa_realizado_meta").css("background-color","green");
  }else{
	  $("#despesa_realizado_meta").css("background-color","orange");
  }

  if(Number(dados.vl_lucro_prejuizo) > 0){
	$("#lucro_realizado_meta").css("background-color","green");
  }else{
	  $("#lucro_realizado_meta").css("background-color","orange");
  }
  
  if(Number(dados.pr_lucratividade) > 0){
	$("#lucratividade_realizado_meta").css("background-color","green");
  }else{
	  $("#lucratividade_realizado_meta").css("background-color","orange");
  }
  
 
  
  
  // Set chart options
  var options = {'title':'Comparação do Fluxo de Caixa',
		  	      backgroundColor: 'transparent',
    		  	  titleTextStyle: {
    		    	color: '#FFFFFF'
    		      },
    		      'width':400,
                  'height':300
                };
  
  var formatter = new google.visualization.NumberFormat({
	  	decimalSymbol: ',',
		groupingSymbol: '.', 
		negativeColor: 'red', 
		negativeParens: true, prefix: 'R$ '}
	);
	
  formatter.format(data, 4);
  formatter.format(data, 3);
  formatter.format(data, 2);
  formatter.format(data, 1);
  

  //var chart = new google.visualization.ColumnChart(document.getElementById('chart_comparacao'));
  //chart.draw(data, options);
  
  var chart = new google.charts.Bar(document.getElementById('chart_comparacao'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}



//Função para desenhar o CHART de SaldoxReceita
function drawSaldo(dados, ds_mes) {

  /*
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', 'R$');  
  
  data.addRows([
    ['Lucro/Prejuizo', Number(dados.vl_lucro_prejuizo)],
    ['Meta de Lucro/Prejuizo', Number(dados.vl_lucro_prejuizo_meta)],
  ]);

  // Set chart options
  var options = {'title':'Saldo do Mês',
		  	      backgroundColor: 'transparent',
    		  	  titleTextStyle: {
    		    	color: '#FFFFFF'
    		      },
    		      'width':400,
                  'height':300
                };
  */
  
//Create the data table.
	var data = google.visualization.arrayToDataTable([
      ['', 'Lucro/Prejuizo', 'Meta de Lucro/Prejuizo'],
      [ds_mes, Number(dados.vl_lucro_prejuizo), Number(dados.vl_lucro_prejuizo_meta)]
    ]);
  
// Set chart options
    var options = {'title':'Saldo do Mês',
    		  	  backgroundColor: 'transparent',
      		  	  titleTextStyle: {
      		    	color: '#FFFFFF'
      		      },
      		      'width':400,
                    'height':300
                  };

  var formatter = new google.visualization.NumberFormat({
	  	decimalSymbol: ',',
		groupingSymbol: '.', 
		negativeColor: 'red', 
		negativeParens: true, prefix: 'R$ '}
  );

  formatter.format(data, 1);
  formatter.format(data, 2);
  
  // Instantiate and draw our chart, passing in some options.
  //var chart = new google.visualization.ColumnChart(document.getElementById('chart_saldo'));
  //chart.draw(data, options);

  var chart = new google.charts.Bar(document.getElementById('chart_saldo'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}


//Função para desenhar o CHART de Divisao de Receitas
function drawDivisaoReceitas(dados, ds_mes) {

	var tabela = [['Receita', 'Valor da Receita']];

	for(var i = 0; i < dados.receitas.length; i++){
		tabela.push([String(dados.receitas[i].receita), Number(dados.receitas[i].vl_receita)]);
	}

	var data = google.visualization.arrayToDataTable(tabela);
	
    var options = {
      title: 'Divisão de Receitas',
      backgroundColor: 'transparent',
      titleTextStyle: {
	    	color: '#FFFFFF'
	  },
	  is3D: true,
	  slices: {  1: {offset: 0.2},
          3: {offset: 0.3},
          4: {offset: 0.4},
          7: {offset: 0.5},
	  }      
    };
    
    var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '});
    formatter.format(data, 1);
    
    var chart = new google.visualization.PieChart(document.getElementById('chart_divisao_receita'));
    chart.draw(data, options);
}

//Função para desenhar o CHART de Divisao de Despesas
function drawDivisaoDespesas(dados, ds_mes) {

	var tabela = [['Despesa', 'Valor da Despesa']];

	for(var i = 0; i < dados.despesas.length; i++){
		tabela.push([String(dados.despesas[i].despesa), Number(dados.despesas[i].vl_despesa)]);
	}

	var data = google.visualization.arrayToDataTable(tabela);
	
    var options = {
      title: 'Divisão de Despesas',
      backgroundColor: 'transparent',
      titleTextStyle: {
	    	color: '#FFFFFF'
	  },
      is3D: true,
      slices: {  1: {offset: 0.2},
          3: {offset: 0.3},
          4: {offset: 0.4},
          7: {offset: 0.5},
	  }
    };

    var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '});
    formatter.format(data, 1);
    
    var chart = new google.visualization.PieChart(document.getElementById('chart_divisao_despesa'));
    chart.draw(data, options);
}


</script>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>
