<?php
	include'session.php';
	include'connection.php';
	include'../Retailers/functions.php';
	
	
?>
<html>
<head>
	<title>Tree View</title>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
	<link rel="icon" href="images/logo.png" type="image/gif" sizes="16x16">
	
	<!-- Admin CSS File Link -->
	<link rel="stylesheet" href="css/style.css">
	
	<!-- User JAVA SCRIPT File Link -->
	<script type="text/javascript" src="js/script.js"></script>

	
	<!-- Font Awesome Icone -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	
	<style>
		.div1{
			background:;
			width:98%;
			margin:1%;
			text-align:center;
			padding:5px;
			overflow:auto;
			display:grid;
			justify-content:center;
		}
		.div1 input{
			width:300px;
			height:40px;
			border-left:none;
			padding:2px 5px;
			margin-top:15px;
		}
		.div1 i{
			background:green;
			color:white;
			width:40px;
			height:39.5px;
			padding-top:10.5px;
			margin-top:5px;
		}
		
		.div2{
			background:;
			width:auto;
			height:auto;
			text-align:center;
			overflow:auto;
		}
		.divP{background:; width:auto; height:auto;}
		
		#span1,#spanLeft1, #spanRight1, #spanLeft2L, #spanLeft2R, #spanRight2L, #spanRight2R{position:absolute; transform:translate(-50%,0); color:white; background:gray; color:white; padding:3px 10px; border-radius:2px; font-size:14px; z-index:2;}
		
		.downlineDiv{background:; position:relative; height:350px; margin:5% 0;}
		.downlineDiv i{color:red; font-size:45px;}
		#span1{top:43px; left:50%;}
		.vLine1{width:10px; position: absolute; top:50px; left:49.2%; height:20px; border-right:solid black 2px;}
		.hLine1{width:40%; position: absolute; top:70px; left:30%; height:20px; border:solid black 2px; border-bottom:none;}
		#iconLeft1L{position:absolute; top:90px; left:28.4%;}
		#spanLeft1{top:125px; left:30%;}
		#iconRight1R{position:absolute; top:90px; left:68%; }
		#spanRight1{top:125px; left:70%;}
		
		.vLine2L{width:10px; position: absolute; top:140px; left:29.3%; height:20px; border-right:solid black 2px;}
		.vLine2R{width:10px; position: absolute; top:140px; left:69.2%; height:20px; border-right:solid black 2px;}
		.hLine2L{width:20%; position: absolute; top:160px; left:20%; height:20px; border:solid black 2px; border-bottom:none;}
		.hLine2R{width:20%; position: absolute; top:160px; left:60%; height:20px; border:solid black 2px; border-bottom:none;}
		#iconLeft2L{position:absolute; top:180px; left:18.5%;}
		#spanLeft2L{top:225px; left:20%;}
		#iconLeft2R{position:absolute; top:180px; left:38.1%;}
		#spanLeft2R{top:225px; left:40%;}
		#iconRight2L{position:absolute; top:180px; left:58.5%;}
		#spanRight2L{top:225px; left:60%;}
		#iconRight2R{position:absolute; top:180px; left:78.2%;}
		#spanRight2R{top:225px; left:80%;}
		
		#parentDiv{background:#3C455B; width:auto; color:white; float:right; padding:4px 8px; margin:2px; font-size:13px; border-radius:3px;}
		
		#pRight{position:absolute; top:20px; left:65%; transform:translate(-50%,-50%); font-weight:bold; font-size:18px; z-index:10; background:blue; color:white; padding:3px 6px; border-radius:3px;}
		#pLeft{position:absolute; top:20px; left:35%; transform:translate(-50%,-50%); font-weight:bold; font-size:18px; z-index:10; background:blue; color:white; padding:3px 6px; border-radius:3px;}
		
		@media(max-width:768px)
		{
		    
			.div2{
				width:100%;
				margin:10px 0 0 0;
				padding:0px;
				text-align:center;
			}
		    .downlineDiv{width:100%;}
		    
			#spanLeft2L, #spanLeft2R, #spanRight2L, #spanRight2R{transform:none;}
			
			#iconLeft1L{position:absolute; top:90px; left:26.5%;}
			#iconRight1R{position:absolute; top:90px; left:66%;}
			
			
			#iconLeft2L{position:absolute; top:180px; left:14.5%;}
			#spanLeft2L{top:275px; left:2%;  transform:rotate(90deg);}
			
			#iconLeft2R{position:absolute; top:180px; left:35.8%;}
			#spanLeft2R{top:275px; left:28%; transform:rotate(90deg);}
			
			
			#iconRight2L{position:absolute; top:180px; left:56.5%;}
			#spanRight2L{top:275px; left:47%; transform:rotate(90deg);}
			
			#iconRight2R{position:absolute; top:180px; left:75.9%;}
			#spanRight2R{top:275px; left:70%; transform:rotate(90deg);}
			
		}
	</style>
	<link rel="stylesheet" href="css/mediaStyle.css">
</head>
<body>
	<!--Header Divison-->
	<?php
		require'header.php';
	?>
	
	<!--Container Division-->
	<div class="container">
		<?php
			include'menu.php';
		?>
		<div class="content">
			<div class="head">
				<div class="title"><p>Tree View :-</p></div>
				<div class="msg"><marquee><?php include'msg.php'; ?></marquee></msg>
			</div><hr>
			<div class="data-content">
				<div class="div1">
				    <div class="divP">
					<?php
					    if($_GET['uid'])
	                    {
                            $user = $_GET['uid'];
                        }
                        else
                        {
                            $user = $userid;
                        }
					    $sl=0;
					    $tmp_user=$user;
					    while($tmp_user!=$userid && !empty($tmp_user))
					    {
					        $sl=$sl+1;
					        $quParent="SELECT * FROM MLM_Users WHERE Userid='$tmp_user'";
					        $reParent=mysqli_query($con,$quParent);
					        $dataParent=mysqli_fetch_array($reParent);
					        $parentId=$dataParent['Parent_Id'];
					        if($sl<=10)
					        {
					            echo "<a href='tree_view.php?uid=".$parentId."'' onclick='showLoader()'><div id='parentDiv'>".getName($parentId)."<br>".$parentId."</div></a>";
					        }
					        $tmp_user=$parentId;
					    }
					
					?>
					</div>
				</div>
			</div><hr>
			<div class="div2">
				<div class="downlineDiv" id="treePlace">
					<?php
					    function downline($parentId)
	                    {
		                    include'connection.php';
		
		                    $qu="SELECT * FROM MLM_Tree WHERE Userid='$parentId'";
		                    $re=mysqli_query($con,$qu);
		                    $data=mysqli_fetch_array($re);
		
		                    $rightUsr = $data['RightSide'];
		                    $leftUsr = $data['LeftSide'];
		                    
		                    $rightCount = $data['RightCount'];
		                    $leftCount = $data['LeftCount'];
		
		                    
		                    $parentUsr=["right"=> $rightUsr, "left"=>$leftUsr, "rightCount"=> $rightCount, "leftCount"=>$leftCount];
		                    return $parentUsr;
	                    }
					    
						$usr = downline($user);
						$leftDownline = $usr['left'];
						$rightDownline = $usr['right'];
						$leftCount = $usr['leftCount'];
						$rightCount = $usr['rightCount'];
						if(!empty($leftDownline))
						{	
							$nextLeftUsr = downline($leftDownline);
							$nextLeftDownloneR=$nextLeftUsr['right'];
							$nextLeftDownloneL=$nextLeftUsr['left'];
						}
						
						
						if(!empty($rightDownline))
						{
							$nextRightUsr = downline($rightDownline);
							$nextRightDownloneR=$nextRightUsr['right'];
							$nextRightDownloneL=$nextRightUsr['left'];
						}
						
						echo "<p id='pLeft'>".$leftCount."</p> <i class='fa fa-user-circle-o'></i> <p id='pRight'>".$rightCount."</p><span id='span1'>".getName($user)."<br>".$user."</span>";
						if(!empty($leftDownline) || !empty($rightDownline))
						{
							echo "<div class='vLine1'></div>";
							echo "<div class='hLine1'></div>";
						}
						if(!empty($leftDownline))
						{
							echo "<a href='tree_view.php?uid=".$leftDownline."' onclick='showLoader()'><i class='fa fa-user' id='iconLeft1L'></i><span id='spanLeft1'>".getName($leftDownline)."<br>".$leftDownline."</span></a>";
						}
						if(!empty($rightDownline))
						{
							echo "<a href='tree_view.php?uid=".$rightDownline."' onclick='showLoader()'><i class='fa fa-user' id='iconRight1R'></i><span id='spanRight1'>".getName($rightDownline)."<br>".$rightDownline."</span></a>";
						}
						if(!empty($nextLeftDownloneL) || !empty($nextLeftDownloneR))
						{
							echo "<div class='vLine2L'></div>";
							echo "<div class='vLine2R'></div>";
						}
						if(!empty($nextRightDownloneL) || !empty($nextRightDownloneR))
						{
							echo "<div class='hLine2L'></div>";
							echo "<div class='hLine2R'></div>";
						}
						if(!empty($nextLeftDownloneL))
						{
							echo "<a href='tree_view.php?uid=".$nextLeftDownloneL."' onclick='showLoader()'><i class='fa fa-user' id='iconLeft2L'></i><span id='spanLeft2L'>".getName($nextLeftDownloneL)."<br>".$nextLeftDownloneL."</span></a>";
						}
						if(!empty($nextLeftDownloneR))
						{
							echo "<a href='tree_view.php?uid=".$nextLeftDownloneR."' onclick='showLoader()'><i class='fa fa-user' id='iconLeft2R'></i><span id='spanLeft2R'>".getName($nextLeftDownloneR)."<br>".$nextLeftDownloneR."</span></a>";
						}
						if(!empty($nextRightDownloneL))
						{
							echo "<a href='tree_view.php?uid=".$nextRightDownloneL."' onclick='showLoader()'><i class='fa fa-user' id='iconRight2L'></i><span id='spanRight2L'>".getName($nextRightDownloneL)."<br>".$nextRightDownloneL."</span></a>";
						}
						if(!empty($nextRightDownloneR))
						{
							echo "<a href='tree_view.php?uid=".$nextRightDownloneR."' onclick='showLoader()'><i class='fa fa-user' id='iconRight2R'></i><span id='spanRight2R'>".getName($nextRightDownloneR)."<br>".$nextRightDownloneR."</span></a>";
						}
					?>
				</div>
			</div>
		</div>
	</div>
	<?php
		require'footer.php';
	?>
</body>
</html>