@extends('layouts.admin_template')
@section('content')
<!-- container Start -->
<style>
.treeview ul {
    list-style: none;
    padding-left: 32px;
}
.treeview ul li {
    padding: 50px 0px 0px 35px;
    position: relative;
}
.treeview__level {
    padding-left: 30px;
    display: inline-block;
    border-radius: 5px;
    font-weight: 700;
    border: 1px solid #e3e5ef;
    position: relative;
    z-index: 1;
}
.treeview > ul > li > .treeview__level:before {
    height: 50px;
    width: 50px;
    top: -9.5px;
    background-color: #54a6d9;
    border: 7.5px solid #d5e9f6;
    font-size: 18px;
}
.treeview__level:before {
    content: attr(data-level);
    position: absolute;
    left: -27.5px;
    top: -6.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 7.5px solid #eef6d5;
    background-color: #bada55;
    color: #fff;
    font-size: 18px;
}
.treeview .level-title {
    cursor: pointer;
    user-select: none;
}
.treeview > ul > li > ul {
    padding-left: 34px;
}
.treeview ul li:before {
    content: "";
    position: absolute;
    top: -26px;
    left: -31px;
    border-left: 2px dashed #a2a5b5;
    width: 1px;
    height: 100%;
}
.treeview ul li:after {
    content: "";
    position: absolute;
    border-top: 2px dashed #a2a5b5;
    top: 70px;
    left: -30px;
    width: 65px;
}
.treeview ul li:last-child:before {
    top: -22px;
    height: 90px;
}
.treeview>ul>li:after,.treeview>ul>li:last-child:before {
content: unset;
}
.treeview>ul>li:before {
	top: 90px;
    left: 36px;
}
.treeview>ul>li:not(:last-child) >ul>li {
	content: unset;
}
.ibdatabtn {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: 600;
    padding: 10px 15px;
}
.treeview .mainibs .ibdatabtn {
    cursor: default !important;
}
</style>
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head pb-4">
        <h1>Tree Chart</h1>
	</div>
	<div class="flash-message">
		@foreach (['danger', 'warning', 'success', 'info'] as $msg)
		@if(Session::has('alert-' . $msg))
		<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
			<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		@endif
		@endforeach
	</div>
	<div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
			<div class="bg-dark pb-4 rounded-3 box-shadow table-responsive">				
				<div class="treeview">
					<ul>
						<li>
							<div class="treeview__level" data-level="0">
								<span class="level-title mainibs"><button class="ibdatabtn">{{$getibname->name}}</button></span>
							</div>
							<ul>
								@foreach($level1 as $udata)
								<li>
									<div class="treeview__level" data-level="1">
										<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata->id}})">{{$udata->name}}</button></span>
									</div>
									<ul>
										@foreach($level2 as $udata2)
										@if($udata2->parent_id == $udata->id)
										<li>
											<div class="treeview__level" data-level="2">
												<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata2->id}})">{{$udata2->name}}</button></span>
											</div>
											<ul>
												@foreach($level3 as $udata3)
												@if($udata3->parent_id == $udata2->id)
												<li>
													<div class="treeview__level" data-level="3">
														<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata3->id}})">{{$udata3->name}}</button></span>
													</div>
													<ul>
														@foreach($level4 as $udata4)
														@if($udata4->parent_id == $udata3->id)
														<li>
															<div class="treeview__level" data-level="4">
																<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata4->id}})">{{$udata4->name}}</button></span>
															</div>
															<ul>
																@foreach($level5 as $udata5)
																@if($udata5->parent_id == $udata4->id)
																<li>
																	<div class="treeview__level" data-level="5">
																		<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata5->id}})">{{$udata5->name}}</button></span>
																	</div>
																	<ul>
																		@foreach($level6 as $udata6)
																		@if($udata6->parent_id == $udata5->id)
																		<li>
																			<div class="treeview__level" data-level="6">
																				<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata6->id}})">{{$udata6->name}}</button></span>
																			</div>
																			<ul>
																				@foreach($level7 as $udata7)
																				@if($udata7->parent_id == $udata6->id)
																				<li>
																					<div class="treeview__level" data-level="7">
																						<span class="level-title"><button class="ibdatabtn" onclick="IbTreeData({{$udata7->id}})">{{$udata7->name}}</button></span>
																					</div>
																				</li>
																				@endif
																				@endforeach
																			</ul>
																		</li>
																		@endif
																		@endforeach
																	</ul>
																</li>
																@endif
																@endforeach
															</ul>
														</li>
														@endif
														@endforeach
													</ul>
												</li>
												@endif
												@endforeach
											</ul>
										</li>
										@endif
										@endforeach
									</ul>
								</li>
								@endforeach
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div> 
</div>
<div class="modal" tabindex="-1" role="dialog" id="treechartdata-modal">
	<div class="modal-dialog modal-lg" role="treechartdata">
		<div class="modal-content bg-black">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Treechart</h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<table class="table table-striped mb-0 text-center table-hover">
					<thead>
						<tr>
							<th>Client Name</th>
							<th>Total Lot</th>
							<th>Total Commission</th>
							<th>Parent Name</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="clientnm"></td>
							<td class="clientlot"></td>
							<td class="clientcomm"></td>
							<td class="clientparentnm"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	function IbTreeData(id)
	{
		let url = "{{ url('/admin/ib/treechartdata') }}/"+id+"?q=";
		$.ajax({
			url: url,
			type: "GET",
			success: function(response) {
				let result = response.result;
				$(".clientnm").text(result.clientname); 
				$(".clientlot").text(result.lot); 
				$(".clientcomm").text(result.comm); 
				$(".clientparentnm").text(result.ibname);
				$("#treechartdata-modal").modal('show'); 
			},
			error: function(response) {
				console.log(response.responseJSON)
			}
		});
	}
</script>
@endsection