<?php if (Session::get("tipo_usuario") != "1" and Session::get("tipo_usuario") != "2" or Session::get("usuario_ativo") != "S"){ show_404();} ?>
<!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 | <?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">
					{{ item.name }}
					<span v-if="isFolder">[{{ 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_LIBRARIES."functions.php");

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

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

		?>

		<div class="container-fluid mt-4">
			<h4 class="text-center">Minha Rede</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">
						<h5 class="mb-3">Quantidade por Nível</h5>

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

									$config = obter_configuracao();

									$total = 0;

									for ($i=0; $i < $config->nivel_arvore; $i++):

								?>
									<tr class="bg-light">
										<th class="text-center align-middle"><?php echo "Nivel ".($i+1); ?></th>
									</tr>
									<tr>
										<td class="text-center align-middle"><?php echo (!empty($niveis[($i+1)])) ? $niveis[($i+1)] : 0; ?></td>
									</tr>
								<?php 

										$total += $niveis[($i+1)];
									endfor;

								?>
								
								<tr>
									<tr class="bg-light">
										<th class="text-center align-middle">Total</th>
									</tr>
									<td class="text-center align-middle">
										<?php echo $total; ?>	
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="col-xl-9 col-lg-9 col-md-8 col-sm-12 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>