<?php if (Session::get("tipo_usuario") != "1" and Session::get("tipo_usuario") != "2" or Session::get("usuario_ativo") != "S"){ show_403();} ?>
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link href="<?php echo show_link(SYS_ICONE); ?>" rel="icon" type="image/png">
		<title>Minha Rede Financeira | <?php echo SYS_NAME; ?></title>
		<link href="<?php echo show_link("/assets/custom/css/styles.css"); ?>" rel="stylesheet">
		<link href="<?php echo show_link("/assets/custom/css/custom.css"); ?>" rel="stylesheet">
		<link href="<?php echo show_link("/assets/tree/css/jit.css"); ?>" rel="stylesheet">
		<script src="<?php echo show_link("/assets/jquery/jquery.min.js"); ?>"></script>
		<?php import_file(DIR_TEMPLATES."style.php"); ?>

		<style>
			.not-cel{
				display: block !important;
			}

			@media screen and (max-width: 765px) {
				.not-cel{
					display: none !important;
				}
			}
		</style>
	</head>
	<body style="background-color: #f5f5f5;">
		<?php

			import_file(DIR_MODELS."Model.class.php");
			import_file(DIR_LIBRARIES."functions.php");

			$json = json_encode(obter_json_arvore_comprimida(Session::get("id_usuario")));

			$niveis = obter_nivel_arvore_comprimida(Session::get("id_usuario"));

		?>

		<div class="container-fluid mt-4">
			<h4 class="text-center mb-3">Minha Rede Financeira de <?php echo utf8_encode(ucfirst(strftime("%B", strtotime("today")))); ?></h4>

			<div class="row">
				<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12">
					<div class="content-box mb-3 not-cel">
						<h5 class="mb-3">Legenda dos Planos</h5>
						<?php 

							$model = new Model();

							$result = $model->query("SELECT * FROM plano WHERE status_plano = 'S' ORDER BY nome_plano ASC");

							foreach ($result->fetchAll() as $dados):

						?>
							
							<span class="d-inline-flex align-items-center w-100">
								<div style="background-color: <?php echo $dados->cor_plano; ?>; width: 30px; height: 30px; border-radius: 30px;"></div>
								<span class="ml-2">
									<?php echo $dados->nome_plano; ?>
								</span>
							</span>
						<?php endforeach; ?>
					</div>
					<div class="content-box">
						<h5 class="mb-3">Quantidade/Valor por Nível</h5>

						<div class="table-responsive">
							<table class="table table-sm table-bordered">
								<?php 

									$config = obter_configuracao();

									$arvore = obter_arvore_comprimida(Session::get("id_usuario"));

									$total = 0;
									$valor_total = 0;

									for ($i=1; $i <= $config->nivel_arvore; $i++):
										$valor_nivel = 0;
										for ($j=0; $j < count($arvore[$i]); $j++) {
											$valor_nivel += obter_valor_por_nivel(intval($arvore[$i][$j][0]), $i);
										}

								?>
									<tr class="bg-light">
										<th class="text-center align-middle" colspan="2"><?php echo "Nivel ".$i; ?></th>
									</tr>
									<tr>
										<th class="text-center align-middle w-50">Quantidade:</th>
										<th class="text-center align-middle w-50">Valor:</th>
									</tr>
									<tr>
										<td class="text-center align-middle w-50"><?php echo (!empty($niveis[$i])) ? $niveis[$i] : 0; ?></td>
										<td class="text-center align-middle w-50"><?php echo money_mask_BR($valor_nivel); ?></td>
									</tr>
								<?php 

										$total += $niveis[$i];
										$valor_total += $valor_nivel;
									endfor;

								?>
								
								<tr class="bg-light">
									<th class="text-center align-middle" colspan="2">Total</th>
								</tr>
								<tr>
									<th class="text-center align-middle w-50">Quantidade:</th>
									<th class="text-center align-middle w-50">Valor:</th>
								</tr>
								<tr>
									<td class="text-center align-middle w-50">
										<?php echo $total; ?>	
									</td>
									<td class="text-center align-middle w-50">
										<?php echo money_mask_BR($valor_total); ?>	
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="col-xl-9 col-lg-9 col-md-8 col-sm-12 not-cel">
					<div id="center-container">
						<div id="infovis" class="content-box" style="border-radius: 5px; min-height: 100%;"></div>
					</div>

					<div style="width: 1px; height: 1px; overflow: hidden;">
						<table>
							<tr>
								<td>
									<label for="r-left">Left </label>
								</td>
								<td>
									<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
								</td>
							</tr>
							<tr>
								<td>
									<label for="r-top">Top </label>
								</td>
								<td>
									<input type="radio" id="r-top" name="orientation" value="top" />
								</td>
							</tr>
							<tr>
								<td>
									<label for="r-bottom">Bottom </label>
								</td>
								<td>
									<input type="radio" id="r-bottom" name="orientation" value="bottom" />
								</td>
							</tr>
							<tr>
								<td>
									<label for="r-right">Right </label>
								</td> 
								<td> 
									<input type="radio" id="r-right" name="orientation" value="right" />
								</td>
							</tr>
						</table>

						<h4>Selection Mode</h4>
						<table>
							<tr>
								<td>
									<label for="s-normal">Normal </label>
								</td>
								<td>
									<input type="radio" id="s-normal" name="selection" checked="checked" value="normal" />
								</td>
							</tr>
							<tr>
								<td>
									<label for="s-root">Set as Root </label>
								</td>
								<td>
									<input type="radio" id="s-root" name="selection" value="root" />
								</td>
							</tr>
						</table>
					</div>

					<div id="log"></div>
				</div>
			</div>
		</div>
		
		<script src="<?php echo show_link("/assets/tree/js/jit.js"); ?>"></script>
		<script src="<?php echo show_link("/assets/tree/js/jit-yc.js"); ?>"></script>
		<script>
			var labelType, useGradients, nativeTextSupport, animate;

			(function() {
			  var ua = navigator.userAgent,
				  iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
				  typeOfCanvas = typeof HTMLCanvasElement,
				  nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
				  textSupport = nativeCanvasSupport 
					&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
			  //I'm setting this based on the fact that ExCanvas provides text support for IE
			  //and that as of today iPhone/iPad current text support is lame
			  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
			  nativeTextSupport = labelType == 'Native';
			  useGradients = nativeCanvasSupport;
			  animate = !(iStuff || !nativeCanvasSupport);
			})();

			var Log = {
			  elem: false,
			  write: function(text){
				if (!this.elem) 
				  this.elem = document.getElementById('log');
				this.elem.innerHTML = text;
				this.elem.style.left = (55 - this.elem.offsetWidth / 2) + 'px';
			  }
			};

			function init(){
				//init data
				var json = <?php echo $json; ?>;
				//end
				//init Spacetree
				//Create a new ST instance
				var st = new $jit.ST({
					orientation: 'top', 
					//id of viz container element
					injectInto: 'infovis',
					//set duration for the animation
					duration: 800,

					levelsToShow: <?php echo intval($config->nivel_arvore); ?>,
					//set animation transition type
					transition: $jit.Trans.Quart.easeInOut,
					//set distance between node and its children
					levelDistance: 50,
					//enable panning
					Navigation: {
					  enable:true,
					  panning:true
					},
					//set node and edge styles
					//set overridable=true for styling individual
					//nodes or edges
					Node: {
						height: 80,
						width: 50,
						type: 'circle',
						color: '#aaa',
						overridable: true
					},

					Edge: {
						type: 'bezier',
						color: '#c1c1c1',
						overridable: true
					},

					onBeforeCompute: function(node){
						Log.write("Carregando...");
					},

					onAfterCompute: function(){
						Log.write("");
					},

					//This method is called on DOM label creation.
					//Use this method to add event handlers and styles to
					//your node.
					onCreateLabel: function(label, node){
						label.id = node.id;            
						label.innerHTML = node.name;
						label.onclick = function(){
							if(normal.checked) {
							  st.onClick(node.id);
							} else {
							st.setRoot(node.id, 'animate');
							}
						};
						//set label styles
						var style = label.style;
						style.width = 50 + 'px';
						style.height = 80 + 'px';            
						style.cursor = 'pointer';
						style.color = '#333';
						style.fontSize = '0.8em';
						style.textAlign= 'center';
						style.paddingTop = '3px';
					},

					//This method is called right before plotting
					//a node. It's useful for changing an individual node
					//style properties before plotting it.
					//The data properties prefixed with a dollar
					//sign will override the global node style properties.
					onBeforePlotNode: function(node){
						//add some color to the nodes in the path between the
						//root node and the selected node.
						if (node.selected) {
							node.data.$color = "#ff7";
						}
						else {
							delete node.data.$color;
							//if the node belongs to the last plotted level
							if(!node.anySubnode("exist")) {
								//count children number
								var count = 0;
								node.eachSubnode(function(n) { count++; });
								//assign a node color based on
								//how many children it has
								node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
							}
						}
					},

					//This method is called right before plotting
					//an edge. It's useful for changing an individual edge
					//style properties before plotting it.
					//Edge data proprties prefixed with a dollar sign will
					//override the Edge global style properties.
					onBeforePlotLine: function(adj){
						if (adj.nodeFrom.selected && adj.nodeTo.selected) {
							adj.data.$color = "#eed";
							adj.data.$lineWidth = 3;
						}
						else {
							delete adj.data.$color;
							delete adj.data.$lineWidth;
						}
					}
				});
				//load json data
				st.loadJSON(json);
				//compute node positions and layout
				st.compute();
				//optional: make a translation of the tree
				st.geom.translate(new $jit.Complex(-200, 0), "current");
				//emulate a click on the root node.
				st.onClick(st.root);
				//end
				//Add event handlers to switch spacetree orientation.
				var top = $jit.id('r-top'), 
					left = $jit.id('r-left'), 
					bottom = $jit.id('r-bottom'), 
					right = $jit.id('r-right'),
					normal = $jit.id('s-normal');


				function changeHandler() {
					if(this.checked) {
						top.disabled = bottom.disabled = right.disabled = left.disabled = true;
						st.switchPosition(this.value, "animate", {
							onComplete: function(){
								top.disabled = bottom.disabled = right.disabled = left.disabled = false;
							}
						});
					}
				};

				top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
				//end

			}

			init();

			$("#grafico2_tab").click(function(){
				setTimeout(function(){ $('#account-grafico2').scrollLeft((1250-$('#account-grafico2').width())/2); }, 1000);
			});
		</script>
	</body>
</html>