@extends('Admin/layout')
@section('title','Tree View Downline')
@section('content')
@if(has_permission('Downline Upline','Tree View Downline'))
<div class="container-fluid">
    <div class="row">
    <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <h4 class="card-title mb-0 flex-grow-1">Tree View Downline</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        <button type="button" id="btn1"  onclick="myFunction()" class="btn btn-primary btn1" style="padding: 3px;">Back to top</button> 
                                        <button type="button" id="btn2" onclick="backfunction()" class="btn btn-primary btn2" style="padding: 3px;">One Level up</button>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-end">
                                        <a href="#" class="btn zoom btn btn-primary" id='bt'><i class="mdi mdi-magnify-plus"></i></a>
                                        <a href="#" class="btn zoom-out btn btn-primary" id='btt' ><i class="mdi mdi-magnify-minus"></i></a>
                                    </div>
                                </div>
                            </div>
                          
                            <form method="POST" action="{{route('visitportal.TreeViewDownline')}}" class="needs-validation" novalidate >
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="Nameinput" class="form-label">Search By Associate Name/Gk Code/Rera No </label>
                                            <select class="form-control single-select" id="associates_name" name="associates_name">
                                                <option value="" >Select Associates Name</option>
                                                @if(!empty($tblassociates))
                                                    @foreach($tblassociates as $key => $value)
                                                        <option value="{{$value->id}}" {{$associates_name == $value->id ? 'selected' : ''}}>{{$value->name}}, {{$value->gk_code}}, {{$value->rera_no}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
									  <div class="col-md-2">
                                        <label for="Nameinput" class="form-label">As on Date </label>
                                        <input type="date" class="form-control" name="as_on_date" id="as_on_date" value="{{$as_on_date}}" placeholder="As On Date " >
                                      </div>
                                        <div class="col-md-3" >
                                        <label for="Nameinput" class="form-label" style="margin-top: 30px;">Only active associate on date </label>
                                            <label>
                                            <input type="checkbox"
												id="active_associate_on_date"
												name="active_associate_on_date"
												value="1"
												@checked($active_associate_on_date == 1)>

                                            
                                            </label>
                                      </div>
                                    <div class="col-md-1">
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-primary" style="margin-top: 27px;">Seach</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="flex-shrink-0">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<style>
			

.status-badge{
    /* position: absolute; */
    top: -8px;
    right: -8px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 6px;
	    float: right;
    font-weight: bold;
    color: #fff;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.status-badge.active{
    background: #28a745;
    color: #fff;
}

.status-badge.inactive{
    background: #ffc107;
    color: #212529; /* yellow par white nahi dikhta, isliye dark text */
}

.status-badge.left{
    background: #dc3545;
    color: #fff;
}

.status-badge.terminate{
    background: #343a40;
    color: #fff;
}

.status-badge.suspended{
    background: #fd7e14;
    color: #fff;
}

.status-badge.pending{
    background: #0d6efd;
    color: #fff;
}

.status-badge.unknown{
    background: #6c757d;
    color: #fff;
}


/* Tooltip inner elements */
.tth{font-size:8px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#e8b55a;padding:7px 11px 5px;border-bottom:1px solid rgba(255,255,255,.09)}
.ttr:last-child{border-bottom:none}
/* Text-only color variants — background stays navy */
.ttv.ok{color:#6ee89e;font-weight:600}
.ttv.err{color:#ff9999;font-weight:600}
.ttv.warn{color:#ffc94d;font-weight:600}
.ttv.dim{color:rgba(255,255,255,.32)}
.ttv.mono{font-family:'DM Mono',monospace;font-size:10px}
.ttnote{padding:5px 11px 7px;font-size:10px;color:rgba(255,255,255,.3);
  border-top:1px solid rgba(255,255,255,.07);font-style:italic}
.ttp{padding:7px 11px 8px;font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.5}
.ttr{
    display:grid;
    grid-template-columns:80px 1fr 80px 1fr;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.ttk{
    font-size:9px;
    color:rgba(255,255,255,.38);
    padding:0px 6px 0px 11px;
    font-weight:600;
}

.ttv{
    font-size:11px;
    color:rgba(255,255,255,.85);
    padding:5px 8px 5px 0;
    word-break:break-word;
}
		</style>
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="live-preview">
                    <div class="card">
		<div class="card-body">
			<div class="table-responsive">
					           
						<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
						<script>
						var login_data = "";
						var as_on_date = "";
						var active_associate_on_date = "";
						var adminauthdata = JSON.parse(localStorage.getItem('adminauthdata'));    
						
					</script>
					
						<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

			<script>

			function loadDownlineTree($str1,$str2,$str3,$str4){
				
				var dataString = {
					TokenID: "a38559b9-2192-4a8f-915e-2ee3eb9c395a",
					ID: $str1,
					PageNumber: $str2,
					PageSize: $str3,
					Types: $str4,
					as_on_date : as_on_date,
					active_associate_on_date : active_associate_on_date
				};
				$.ajax({
					url:  "{{ env('APP_URL') }}/api/v1/AdminDownlineTreeView",
					type: "POST",
					contentType: "application/json",
					data: JSON.stringify(dataString),
					dataType: "JSON",
					headers: {"X-Auth-Token": adminauthdata.token,"uuid": adminauthdata.uuid},
					success: function (obj) {
						if (obj.status == 200)
						{
							
						// console.log(obj.DATA);
						var a =obj;
						var finaldata = [];
						var copy = [];
						var seen = {};

						// Status ko normalize karke sahi badge (color-class) + CAPS label banata hai.
						// Case-insensitive; terminate/terminated, suspend/suspended dono handle.
						// List se bahar koi bhi status -> gray "unknown" badge.
						function buildStatusBadge(rawStatus) {
							var s = (rawStatus === null || rawStatus === undefined) ? '' : rawStatus.toString().trim();
							var key = s.toLowerCase();
							var cls;
							if (key === 'active')                               cls = 'active';
							else if (key === 'inactive')                        cls = 'inactive';
							else if (key === 'left')                            cls = 'left';
							else if (key === 'terminate' || key === 'terminated') cls = 'terminate';
							else if (key === 'suspend' || key === 'suspended')  cls = 'suspended';
							else if (key === 'pending')                         cls = 'pending';
							else                                                cls = 'unknown';
							var label = (s === '' ? 'UNKNOWN' : s.toUpperCase()); // UI me sab CAPS
							return '<span class="status-badge ' + cls + '">' + label + '</span>';
						}

						obj.data.forEach(function (item) {

							var AssociateId = item.gk_code;
							var AssociateIdString = AssociateId.toString();

							var IntroducerCode = item.sponsor_gk_code;
							var IntroducerCodeString = IntroducerCode.toString();
							//   console.log(obj.data[0].IntroducerCode.toString());

							// var TotalSales = item.Invest;
                            var TotalSales = 0;
							var TotalSalesString = TotalSales.toString();

							var LVL = item.id;
							var LVLString = LVL.toString();

							var NodeId = item.id;
							var NodeIdString = (NodeId === null || NodeId === undefined) ? '' : NodeId.toString();

							var ParentId = item.sponsor_id;
							var ParentIdString = (ParentId === null || ParentId === undefined) ? '' : ParentId.toString();

							// OrgChart parent column: normal nodes id se link hote hain.
							// Root (level 0) ka effective parent tree me hota nahi, isliye OrgChart
							// uske liye ek phantom top node banata hai — usme raw db id ke bajaye
							// sponsor NAME dikhao (jo procedure se aata hai). Naam id se collide nahi karega.
							var parentColumn = ParentIdString;
							if (item.level == 0) {
								parentColumn = (item.sponsor_name === null || item.sponsor_name === undefined) ? '' : item.sponsor_name.toString();
							}

							if (NodeIdString !== '' && seen[NodeIdString]) {
								return;
							}
							seen[NodeIdString] = true;
							
							// var d  = [{v: item.name, f: '<img src="{{ URL::asset("assets/images/usericon.png") }}" height="45" width="80"> </img><div class="popover__wrapper"><p><b>'+item.name+'</b><img class="popover__title" src="https://image.freepik.com/free-icon/italic-letter-symbol-rounded-square_318-9449.jpg" height="15" width="15"> </img></p>  <div class="popover__content"><p><strong>'+item.name+'</strong></p><p>AssociateId:-'+AssociateIdString+'</p><hr/><br/><p>IntroducerCode:-'+IntroducerCodeString+'</p><p class="popover__message">IntroducerName:- '+item.sponsor_name+'</p><p class="popover__message">Joining Date:- '+item.joining_date+'</p><p class="popover__message">Personal Sale:- '+item.PersonalSale+'</p></div></div>'}, item.sponsor_name,AssociateIdString,IntroducerCodeString,TotalSalesString,LVLString];
							var statusBadge = buildStatusBadge(item.currentStatus);
							var d  = [{
								v: NodeIdString,
								f:   statusBadge +'<img src="{{ URL::asset("assets/images/usericon.png") }}" height="45" width="80"> </img>' +
								'<div class="popover__wrapper">' +
								  '<p><b>' + item.name + '</b>' +
								'<img class="popover__title" src="https://image.freepik.com/free-icon/italic-letter-symbol-rounded-square_318-9449.jpg" height="15" width="15"> </img></p>' +

// 								'<div class="popover__content" style="background:#112240;">' +

//     '<div class="tth">Associate Details</div>' +

//     '<div class="ttr"><div class="ttk">Associate Name</div><div class="ttv mono">' +  item.name +'</div></div>' +
//     '<div class="ttr"><div class="ttk">GK Code</div><div class="ttv mono">' +AssociateIdString + '</div></div>' +
//     // '<div class="ttr"><div class="ttk">Status</div><div class="ttv ' + (item.currentStatus === "ACTIVE" ? 'ok' : 'err') + '">' + item.currentStatus + '</div></div>' +
// 	 '<div class="ttr"><div class="ttk">Upliner Name</div><div class="ttv">' + item.sponsor_name + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Upliner Code</div><div class="ttv mono">' + IntroducerCodeString + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Joining Date</div><div class="ttv">' + item.joining_date + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Opening Stock</div><div class="ttv">' + item.openingStock + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Personal Sale</div><div class="ttv">' + item.PersonalSale + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Team Sale</div><div class="ttv">' + item.TeamSale + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Company Sale</div><div class="ttv">' + item.CompanySaleCurMonth + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Total Sale</div><div class="ttv ok">' + item.TotalSale + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Level</div><div class="ttv warn">' + item.level + '</div></div>' +
//     '<div class="ttr"><div class="ttk">Left Date</div><div class="ttv ' + (item.left_date ? '' : 'dim') + '">' + (item.left_date || 'N/A') + '</div></div>' +

//     '<div class="ttnote">Last updated from system</div>' +

// '</div>'+

'<div class="popover__content" style="background:#112240;width:400px;">' +

'<div class="tth">Associate Details</div>' +

'<div class="ttr">' +
	'<div class="ttk">GK Code</div><div class="ttv mono">' + AssociateIdString + '</div>' +
    '<div class="ttk">Name</div><div class="ttv mono">' + item.name + '</div>' +
    
'</div>' +

'<div class="ttr">' +
'<div class="ttk">Upliner Code</div><div class="ttv mono">' + IntroducerCodeString + '</div>' +
    '<div class="ttk">Upliner Name</div><div class="ttv">' + item.sponsor_name + '</div>' +
    
'</div>' +

'<div class="ttr">' +
    '<div class="ttk">Joining Date</div><div class="ttv">' + item.joining_date + '</div>' +
	'<div class="ttk">Left Date</div><div class="ttv ' + (item.left_date ? '' : 'dim') + '">' + (item.left_date || 'N/A') + '</div>' +
    
'</div>' +

'<div class="ttr">' +
    '<div class="ttk">Opening Sale</div><div class="ttv">' + item.openingStock + '</div>' +
	 '<div class="ttk">Company Sale Cur Month</div><div class="ttv">' + item.CompanySaleCurMonth + '</div>' +
    
'</div>' +

'<div class="ttr">' +
	'<div class="ttk">Personal Sale</div><div class="ttv">' + item.PersonalSale + '</div>' +
    '<div class="ttk">Team Sale</div><div class="ttv">' + item.TeamSale + '</div>' +
   
'</div>' +

'<div class="ttr">' +
    '<div class="ttk">Total Sale</div><div class="ttv ok">' + item.TotalSale + '</div>' +
	'<div class="ttk">Level</div><div class="ttv warn">' + item.level + '</div>' +
'</div>' +

'<div class="ttnote">Last updated from system</div>' +

'</div>'+
								'</div>'
							},
							parentColumn,
							AssociateIdString,
							IntroducerCodeString,
							TotalSalesString,
							LVLString];
							copy.push(d);
							
						});

						if (!obj.data || obj.data.length === 0) {
							document.getElementById('chart_div').innerHTML =
								'<div class="text-center text-muted p-4">No downline data found for the selected criteria.</div>';
							return;
						}

						var TempAssociateId = obj.data[0].id;
						localStorage.setItem("associate_id", TempAssociateId);

							var IntroducerCodefirst = obj.data[0].sponsor_id;
							var IntroducerCodeStringfirst = (IntroducerCodefirst === null || IntroducerCodefirst === undefined) ? '' : IntroducerCodefirst.toString();
							// console.log(IntroducerCodeStringfirst);
						localStorage.setItem("introd_code", IntroducerCodeStringfirst);
						// copy.shift();
						google.charts.load('current', {packages:["orgchart"]});
						google.charts.setOnLoadCallback(drawChart);

						function drawChart() {
							var data = new google.visualization.DataTable();
							data.addColumn('string', 'Name');
							data.addColumn('string', 'IntroducerName');
							//   data.addColumn('string', 'PinName');
							data.addColumn('string', 'AssociateId');
							data.addColumn('string', 'IntroducerCode');
							data.addColumn('string', 'TotalSales');
							data.addColumn('string', 'LVL');
							var str1 = copy;
							// console.log(str1);
							// return false;
							var str = str1
							data.addRows(str1);

							var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
							
							chart.draw(data, {allowHtml:true,compactRows : true, size : 'small'});
							google.visualization.events.addListener(chart, 'select', function() {
							// table.setSelection(chart.getSelection());
							// console.log(chart.getSelection());
							var selection = chart.getSelection();
							if (selection.length > 0) {
								var assoc_id = data.getValue(selection[0].row, 2).toString();
								// console.log(assoc_id);
								var UserDbId = data.getValue(selection[0].row, 5).toString();
								// console.log(UserDbId);
								var introd_code = data.getValue(selection[0].row, 3).toString();
								// console.log(introd_code);
								// alert(data.getValue(selection[0].row, 4));
								document.getElementById("btn1").disabled = false;
								document.getElementById("btn2").disabled = false;
								loadDownlineTree(UserDbId,0,0,"ios");
								// Store
								localStorage.setItem("introd_code", introd_code);
							}
							});

						}
						
						}

						else
						{
						// console.log(obj);
						

						}

					}
				});
			}
			//loadDownlineTree("4",0,0,"ios");
				loadDownlineTree(login_data,0,0,"ios");
				</script>
				<div class="container" >
		
			<div id="chart_div"></div>

			<style>
			.google-visualization-orgchart-node{
				border:0px!important;
			}
			td.google-visualization-orgchart-node.google-visualization-orgchart-node-medium {
				/* background: #fff; */
				cursor: pointer;
			}

			.popover__title {
			text-decoration: none;
			color: rgb(228, 68, 68);
			text-align: center;
			}

			.popover__wrapper {
			position: relative;
			display: inline-block;
			}
			.popover__content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			transform: translate(0, 10px);
			background-color: #ffffff;
			margin-left: -100px;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
			width: 200px;
			}
			.popover__content:before {
			position: absolute;
			z-index: -1;
			content: "";
			right: calc(50% - 10px);
			top: -8px;
			border-style: solid;
			border-width: 0 10px 10px 10px;
			border-color: transparent transparent #bfbfbf transparent;
			transition-duration: 0.3s;
			transition-property: transform;
			}
			.popover__wrapper:hover .popover__content {
			z-index: 10;
			opacity: 1;
			visibility: visible;
			transform: translate(0, -20px);
			transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
			}
			.popover__message {
			text-align: center;
			}

			</style>
			<script>
			function myFunction() {
			
			//loadDownlineTree("4",0,0,"ios");
				//loadDownlineTree("",0,0,"ios");
				loadDownlineTree(login_data,0,0,"ios");
				document.getElementById("btn1").disabled = true;
				document.getElementById("btn2").disabled = true;
			}
			</script>
			<script>
				document.getElementById("btn1").disabled = true;
				document.getElementById("btn2").disabled = true;
			function backfunction() {
			var associateId = localStorage.getItem("associate_id");
				var introd_code = localStorage.getItem("introd_code");
			//
			//if(introd_code.toString() == "4"){
				if(associateId == login_data){
				document.getElementById("btn1").disabled = true;
				document.getElementById("btn2").disabled = true;
			}else{
				loadDownlineTree(introd_code.toString(),0,0,"ios");
			}
			}
			</script>
			<script>
		var zoom = 1;
		
		$('.zoom').on('click', function(){
			zoom += 0.1;
			// $('.google-visualization-orgchart-table').css('transform', 'scale(' + zoom + ')');
			$('.google-visualization-orgchart-node').css('transform', 'scale(' + zoom + ')');
			
		});
		$('.zoom-init').on('click', function(){
			zoom = 1;
			// $('.google-visualization-orgchart-table').css('transform', 'scale(' + zoom + ')');
			$('.google-visualization-orgchart-node').css('transform', 'scale(' + zoom + ')');
		});
		$('.zoom-out').on('click', function(){
			zoom -= 0.1;
			// $('.google-visualization-orgchart-table').css('transform', 'scale(' + zoom + ')');
			$('.google-visualization-orgchart-node').css('transform', 'scale(' + zoom + ')');
		});

		var i = 0;
        var a = 0;
        var b = 0;
        var del;

        bt.onclick = () => {
			btt.innerHTML = '<i class="mdi mdi-magnify-minus"></i>';
            clearInterval(del);
            b = 0;
        if (a == 0) {
            bt.innerHTML = "stop";
            del = setInterval(foo, 16);
            function foo() {
            i = i + 1;
            chart_div.style.transform = "perspective(1000px)translate3D(0,0," + i + "px)";
            a = 1;
            }
        } else if (a == 1) {
            bt.innerHTML = '<i class="mdi mdi-magnify-plus"></i>';
            clearInterval(del);
            a = 0;
        }
        };

        btt.onclick = () => {
			bt.innerHTML = '<i class="mdi mdi-magnify-plus"></i>';
            clearInterval(del);
            a = 0;
        if (b == 0) {
            btt.innerHTML = "stop";
            del = setInterval(foo, 16);
            function foo() {
            i = i - 1;
            chart_div.style.transform = "perspective(1000px)translate3D(0,0," + i + "px)";
            b = 1;
            }
        } else if (b == 1) {
            btt.innerHTML = '<i class="mdi mdi-magnify-minus"></i>';
            clearInterval(del);
            b = 0;
        }
        };


</script>
                    </div>
                    
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div><!-- end col -->
       
    </div>
</div>


@endif
@endsection