<?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">
		<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;
				}
			}

			.item {
				cursor: pointer;
			}
			.bold {
				font-weight: bold;
			}
			ul {
				padding-left: 1em;
				line-height: 1.5em;
				list-style-type: dot;
			}
		</style>

		<script src="<?php echo show_link("/assets/vue/vue.min.js"); ?>"></script>
		<script type="text/x-template" id="item-template">
			<li>
				<div
					:class="{bold: isFolder}"
					@click="toggle"
					@dblclick="makeFolder"
					:style="{
						display: 'inline-flex',
						alignItems: 'center'
					}">
					<div
					 :style="{
							background: item.color,
							width: '15px',
							height: '15px',
							borderRadius: '15px',
							border:  (item.color) ? 'none' : '1px solid #222',
							marginRight: '10px'
					}"
					></div>
					{{ item.name }}
					<span v-if="isFolder" style="margin-left: 5px;">[{{ isOpen ? '-' : '+' }}]</span>
				</div>
				<ul v-show="isOpen" v-if="isFolder">
					<tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @make-folder="$emit('make-folder', $event)"></tree-item>
				</ul>
			</li>
		</script>
	</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_pasta_comprimida(Session::get("id_usuario")));

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

		?>

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

			<div class="row mb-3">
				<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 mt-3">
					<div class="content-box mb-3">
						<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-1 mt-3">
					<div class="content-box" style="min-height: 100%;">
						<ul id="demo">
							<tree-item class="item" :item="treeData" @make-folder="makeFolder"></tree-item>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script>
			// define the tree-item component
			Vue.component("tree-item", {
				template: "#item-template",
				props: {
					item: Object
				},
				data: function () {
					return {
						isOpen: false
					};
				},
				computed: {
					isFolder: function () {
						return this.item.children && this.item.children.length;
					}
				},
				methods: {
					toggle: function () {
						if (this.isFolder) {
							this.isOpen = !this.isOpen;
						}
					},
					makeFolder: function () {
						if (!this.isFolder) {
							this.$emit("make-folder", this.item);
							this.isOpen = true;
						}
					}
				}
			});

			// boot up the demo
			var demo = new Vue({
				el: "#demo",
				data: {
					treeData: <?php echo $json; ?>
				},
				methods: {
					makeFolder: function (item) {
						Vue.set(item, "children", []);
						this.addItem(item);
					}
				}
			});
		</script>
	</body>
</html>