@extends('adminlayout.admin')

 @section('content')

 <style >
     .cursor{
        cursor: pointer;
     }
     .nk-content-fluid{
        margin-top: 65px;
        position: relative;
     }
	 /* Person */
.person {
	/* border: 1px solid black; */
	padding: 10px;
	min-width: 150px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 35%;
	position: relative;
}

.person.female {
	border-color: #F45B69;
}

.person.male {
	border-color: #456990;
}

.person div {
	text-align: center;
}

.person .name {
	font-size: 16px;
}

.person .parentDrop, .person .spouseDrop, .person .childDrop {
	border: 1px dashed #000000;
	width: auto;
	min-width: 80px;
	min-height: 80px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-top: 15px;
}

.person .parentDrop>span,
.person .spouseDrop>span,
.person .childDrop>span {
	position: absolute;
	top: 2px;
	left: 2px;
	font-weight: bold;
}
.parentDrop>.person,
.spouseDrop>.person,
.childDrop>.person {
	margin-top: 20px;
}

/* Tree */
.tree ul {
	padding-top: 20px;
	position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	display: table-cell;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}



/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
	height: 30px;
}

.tree li::after {
	right: auto;
	left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
	padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after {
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid #ccc;
	width: 0;
	height: 20px;
}

.tree li .parent {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	margin-top: 10px;
}
.tree li .parent::before {
   /* content: '';*/
    position: absolute;
    top: 40px;
    left: 50%;
    border-left: 1px solid #ccc;
   /* border-right: 1px solid #ccc;*/
    width: 3px;
    height: 10px;
}
.tree li .family {
	position: relative;
}
.tree li .family .spouse {
	position: absolute;
	top: 0;
	left: 50%;
    margin-left: 95px;
}
.tree li .family .spouse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 10px;
    height: 3px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li .child:hover,
.tree li .child:hover+.parent .person,
.tree li .parent .person:hover,
.tree li .child:hover+.parent .person+ul li .child,
.tree li .parent .person:hover+ul li .child,
.tree li .child:hover+.parent .person+ul li .parent .person,
.tree li .parent .person:hover+ul li .parent .person {
/*	background: #c8e4f8;
	color: #000;
	border: 1px solid #94a0b4;*/
}
/*Connector styles on hover*/
.tree li .child:hover+.parent::before,
.tree li .child:hover+.parent .person+ul li::after,
.tree li .parent .person:hover+ul li::after,
.tree li .child:hover+.parent .person+ul li::before,
.tree li .parent .person:hover+ul li::before,
.tree li .child:hover+.parent .person+ul::before,
.tree li .parent .person:hover+ul::before,
.tree li .child:hover+.parent .person+ul ul::before,
.tree li .parent .person:hover+ul ul::before {
	border-color: #94a0b4;
}
.teamprofileimg span{
	width: 55px;
    height: 55px;
    display: block;
    border-style: solid;
    border-color: green;
    border-radius: 50%;
}
.teamprofileimg span img{
	width: 50px;
    height: 50px;   
    border-radius: 50%;
}
.teamprofileimg{
	justify-content: center;
    display: flex;
}


div.person a {
  text-decoration: none;
  color: #fff;
  cursor: default;
  font-weight: normal;
}

div.person a span.tooltips {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 20em;
  border: 1px solid #404040;
  padding: 0.2em 0.5em;
  cursor: default;
  line-height: 140%;
  font-size: 12px;
  font-family: 'Segoe UI';
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 7px 7px 5px -5px #666;
  -webkit-box-shadow: 7px 7px 5px -5px #666;
  box-shadow: 7px 7px 5px -5px #666;
  background: black  repeat-x;
  border-radius: 20px;
  z-index: 9999;
}

div.person:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

div.person img {
  left: -10px;
}

div.person:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}
 </style>
<div class="content-wrapper">

  <section class="content">   
            <!-- .nk-block-head -->
    <div class="row">
      <div class="col-xs-12">		 
        <!-- /.card -->       
        <div class="box box-success">
          <div class="box-header">
            <h3 class="box-title">
               Level Team Lists</h3>
			   
			   <div class="nk-block-des text-soft">
                            @if($errors->any())
                            <p class="text-danger">
                                {{ implode('', $errors->all(':message')) }}
                            </p>
                            @endif                          
                </div>
          </div>
		  
		  
		  
		      <div class="box-body">
            <div class="table-responsive"> 
			 <div class="tree">
			<ul>
			<li>
				<div class="family">
					
				<div class="parent">
				  <div  class="person">
				    <div class="teamprofileimg"><span><img src="{{url('/')}}/storage/profileimage/1712568050_prof.png" width="50"/></span></div>
					<div class="name">{{Auth::user()->user_id}}</div>
					<div class="name">{{Auth::user()->name;}}</div>
					
					<a href="#">
					<span class="tooltips">
						<p class="name">Distributor: {{totalDistributor(Auth::user()->id)}}</p>
						<p class="name">Dealer: {{totalDealer(Auth::user()->id)}}</p>
						<p class="name">Commission: RS {{ number_format(Auth::user()->wallet)}}</p>
					</span>
				    </a>
				  </div>
				  <ul>
					
					@foreach($users as $child1)
					<li>
					  <div class="family" >
						
						<div class="parent">
						
						  <div class="person male">
						   <div class="teamprofileimg">
								  <span>@if($child1->profile_image)<img src="{{$child1->profile_image}}" width="50"/>
									@else										
									    <img src="{{url('/')}}/storage/profileimage/1712568050_prof.png" width="50"/>
									@endif
									</span>
							</div>
							<div class="name">{{$child1->user_id}}</div>
							<div class="name">{{$child1->name}}</div>
							
							<a href="#">
					        <span class="tooltips">
							<div class="name">Distributor: {{totalDistributor($child1->id)}}</div>
							<div class="name">Dealer: {{totalDealer($child1->id)}}</div>
							<div class="name">Commission: RS {{ number_format($child1->wallet)}}</div>
							</span>
							</a>
						  </div>
						   @if(count($child1->children))
						  <ul>
							@foreach($child1->children as $child2)
							<li>
							 <div class="family" >
							  <div class="parent">
							   <div class="person child @if($child2->login_status=='pending') female @endif">
							     <div class="teamprofileimg">
								  <span>@if($child2->profile_image)<img src="{{$child2->profile_image}}" width="50"/>
									@else
										<!--<strong style="display: inline-block;margin-top: 13px;">{{strtoupper($child2->name[0])}}</strong>-->
									    <img src="{{url('/')}}/storage/profileimage/1712568050_prof.png" width="50"/>
									@endif
									</span>
									</div>
							  
								<div class="name">{{$child2->user_id}}</div>
								<div class="name">{{$child2->name}}</div>
								
								<a href="#">
								<span class="tooltips">
								<div class="name">Distributor: {{totalDistributor($child2->id)}}</div>
								<div class="name">Dealer: {{totalDealer($child2->id)}}</div>
								<div class="name">Commission: RS {{ number_format($child2->wallet)}}</div>
								</span>
								</a>
							  </div>
							  @if(count($child2->children))
							  <ul>
							   @foreach($child2->children as $child3)
								<li>
								 <div class="family" >
								  <div class="parent">
								  <div class="person child @if($child3->login_status=='pending') female @endif">
								  <div class="teamprofileimg">
								  <span>@if($child3->profile_image)<img src="{{$child3->profile_image}}" width="50"/>
									@else
										<!--<strong style="display: inline-block;margin-top: 13px;">{{strtoupper($child2->name[0])}}</strong>-->
									    <img src="{{url('/')}}/storage/profileimage/1712568050_prof.png" width="50"/>
									@endif
									</span>
									</div>
									<div class="name">{{$child3->user_id}}</div>
									<div class="name">{{$child3->name}}</div>
									
									<a href="#">
					                <span class="tooltips">
									<div class="name">Distributor: {{totalDistributor($child3->id)}}</div>
									<div class="name">Dealer: {{totalDealer($child3->id)}}</div>
									<div class="name">Commission: RS {{ number_format($child3->wallet)}}</div>
									</span>
									</a>
								  </div>
								  @if($child3->children)
									  <ul>
										@foreach($child3->children as $child4)
										<li>
										 <div class="family" >
										  <div class="parent">
										  <div class="person child @if($child4->login_status=='pending') female @endif">					
											<div class="teamprofileimg">
											  <span>@if($child4->profile_image)<img src="{{$child4->profile_image}}" width="50"/>
												@else
												<img src="{{url('/')}}/storage/profileimage/1712568050_prof.png" width="50"/>
												@endif
												</span>
											</div>
											<div class="name">{{$child4->user_id}}</div>
											<div class="name">{{$child4->name}}</div>
											
											<a href="#">
					                         <span class="tooltips">
											 <div class="name">Distributor: {{totalDistributor($child4->id)}}</div>
											<div class="name">Dealer: {{totalDealer($child4->id)}}</div>
											<div class="name">Commission: RS {{ number_format($child4->wallet)}}</div>
											</span>
											</a>
										  </div>
										 
										  </div>
										  </div>
										</li>
										@endforeach
									 </ul>
									@endif 
								  </div>
								  </div>
								</li>
								@endforeach
							 </ul>
							 @endif
							  </div>
							  </div>
							</li>
							@endforeach
							
						  </ul>
						   @endif
						</div>
					   
					  </div>
					</li>
					@endforeach
				  </ul>
				</div>
				</div>
			</li>
			</ul>
</div>
		  </div>
		  </div>
  
  
  


</div>
</div>
</div>
</section>
</div>



@endsection
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
{{-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> --}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>