@extends('Admin/layout')
@section('title','Tree View Downline')
@section('content')
@if(has_permission('Downline Upline','Tree View Downline'))
<link href="{{ URL::asset('assets/css/Hierarchymain.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/css/hierarchy-view.css') }}" rel="stylesheet" type="text/css" />
<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-6">
                                        <div class="mb-3">
                                            <label for="Nameinput" class="form-label">Search By Associate Email/Phone/Rear 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->phone_1}}, {{$value->rera_no}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </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>
        <div class="col-xl-12">
            <section class="management-hierarchy">
                <a href="https://github.com/zikosichi/hierarchi-view" target="_blank" class="github-badge">
                    <img src="images/github-blue.svg">
                </a>
                <!-- <h1> 1. Management Hierarchy</h1> -->
                <div class="hv-container">
                    <div class="hv-wrapper">

                        <!-- Key component -->
                        <div class="hv-item">

                            <div class="hv-item-parent">
                                <div class="person">
                                    <img src="https://pbs.twimg.com/profile_images/762654833455366144/QqQhkuK5.jpg" alt="">
                                    <p class="name">
                                        {{@$tblassociatesdata->name}} <b>/ {{@$tblassociatesdata->rera_no}}</b>
                                    </p>
                                </div>
                            </div>

                            <div class="hv-item-children">
                                @if(!empty($downlinedata))
                                    @for($i=1; $i <= count($downlinedata); $i++)
                                    <div class="hv-item-child">
                                        <!-- Key component -->
                                        <div class="hv-item">

                                            <div class="hv-item-parent">
                                                <div class="person">
                                                    <img src="https://randomuser.me/api/portraits/women/50.jpg" alt="">
                                                    <p class="name">
                                                        Annie Wilner <b>/ Creative Director</b>
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="hv-item-children">

                                                <div class="hv-item-child">
                                                    <div class="person">
                                                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
                                                        <p class="name">
                                                            Anne Potts <b>/ UI Designer</b>
                                                        </p>
                                                    </div>
                                                </div>


                                                <div class="hv-item-child">
                                                    <div class="person">
                                                        <img src="https://randomuser.me/api/portraits/men/81.jpg" alt="">
                                                        <p class="name">
                                                            Dan Butler <b>/ UI Designer</b>
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="hv-item-child">
                                                    <div class="person">
                                                        <img src="https://randomuser.me/api/portraits/women/18.jpg" alt="">
                                                        <p class="name">
                                                            Mary Bower <b>/ UX Designer</b>
                                                        </p>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    @endfor
                                @endif
                                


                                <div class="hv-item-child">
                                    <!-- Key component -->
                                    <div class="hv-item">

                                        <div class="hv-item-parent">
                                            <div class="person">
                                                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
                                                <p class="name">
                                                    Gordon Clark <b>/ Senior Developer</b>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="hv-item-children">

                                            <div class="hv-item-child">
                                                <div class="person">
                                                    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="">
                                                    <p class="name">
                                                        Harry Bell <b>/ Front-end</b>
                                                    </p>
                                                </div>
                                            </div>


                                            <div class="hv-item-child">
                                                <div class="person">
                                                    <img src="https://randomuser.me/api/portraits/men/90.jpg" alt="">
                                                    <p class="name">
                                                        Matt Davies <b>/ Back-end</b>
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </section>
                        
        </div><!-- end col -->
       
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var login_data = "";
    var adminauthdata = JSON.parse(localStorage.getItem('adminauthdata'));    
</script>


@endif
@endsection