@extends('Web/layout')
@section('title','Tree View My Team')
@section('content')
<div class="pt-3">
    <div class="page-title d-flex">
        <div class="align-self-center">
            <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
            <i class="bi bi-chevron-left color-theme font-14"></i>
            </a>
        </div>
        <div class="align-self-center me-auto">
            <h1 class="color-theme mb-0 font-18">My Team: <span class="color-highlight font-18">All Downline Tree View</span></h1>
        </div>
        <div class="align-self-center ms-auto">
        
        </div>
    </div>
</div>
<div class="row text-center">
    <h1 class="color-theme mb-2 font-18 text-center">All Downline Tree List</h1>
</div>
<div class="content">
    <div class="container" style="width:100%;overflow: scroll">
            
            <div id="chart_div"></div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    
    <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>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover({
                placement : 'top',
                trigger : 'hover'
            });
        });
        </script>
@endsection