@section('extrastyles')
    <link href="{{ ('/plugins/orgboard/diagram.css') }}" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

    <link rel="stylesheet" href="/plugins/jquery-ui/jquery-ui.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>


        .top-icon.enrolled {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 40px;
            height: 40px;
            background: #f7f7f7;
            border-radius: 50%;
            border: 5px solid #f7f7f7;
            margin-left: 0px;
        }
        .top-icon.pin {
            width: 20px;
            height: 20px;
            margin-left: 5px;
        }

        .top-icon {
            width: 25px;
            height: 25px;
        }
        .profile-side-item {
            padding: 0.275rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .profile-side-item p {
            font-size: 12px;
            margin-bottom: 2px;

        }
        .profile-side-item span {
            background-color: white;
            border-radius: 50px;
            border: 1px solid #ECECED;
            width: 100%;
            padding: 5px;
            padding-left: 20px;
            height: 35px;

        }
        .shape_content,.dhx_diagram_item {
            cursor: pointer;
        }
        .dhx_diagram_template_a_box {
            background-color: transparent;
        }
        .dhx_diagram_template_a_box {
            padding: 0;
            border: 4px solid #dfdfdf;
            border-radius: 20px;
            background-color: #fff;
            overflow: hidden;
        }
        .dhx_diagram_template_a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            /* padding: 10px; */
            height: 150px;
        }
        .dhx_diagram_template_a__inside {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
        }
        .dhx_diagram_template_a__body {
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 100%;
        }
        .dhx_diagram_template_a__footer {
            display: flex;
            flex-direction: column;
            flex: 1;
            background-color: #F5F6F6;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 12px;
            justify-content: center;
        }

        .dhx_diagram_template_a__icons {
            margin-top: 7px;
            margin-bottom: 7px;
            height: 20px;
        }

        .dhx_item_header {
            background: red;
            height: 3px;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
        }
        .dhx_diagram_template_a__title,
        .dhx_diagram_template_a__text {
            font: normal 14px/20px Roboto, sans-serif;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .dhx_diagram_template_a__title {
            text-align: center;
            color: rgba(0, 0, 0, 0.7);
            font-weight: 500;
            font-size: 1rem;
        }
        .dhx_diagram_template_a__row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 4px 0;
            justify-content: center;
        }
        .dhx_diagram_template_a__icon {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.6);
            z-index: 9999;
        }
        .dhx_diagram_template_a__text {
            color: rgba(0, 0, 0, 0.7);
        }
        .dhx_diagram_template_a__link {
            color: #0288d1;
        }

        .open-body {
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            flex: 1 0;
            text-align: center;
        }
        .open-body .dhx_diagram_template_a__title {
            text-align: center;
        }
        .ui-menu.ui-autocomplete{
            z-index: 10000;
        }
        .card_view_label {
            padding: 4px;
            border-radius: 5px;
            font-size: 12px;
        }

        .item-value {
            font-weight: 600;
        }

        .tree-wrapper {
            display: flex;
            justify-content: space-between;
            flex: 1;
            margin-left: 10px;
            margin-right: 10px;
        }

        .tree-wrapper .tree-wrapper-item {
            flex: 1;
        }
    </style>
@endsection

<div class="rep-dashboard">


    <section class="container mt-5">
        @include('frontend.template.basic.rep-dashboard.navbar')
    </section>

    <!-- Page Title -->
    <section class="container mt-4">
        <div class="row">
            <div class="col">
                <h2 class="page-title">Organizational Trees</h2>
                <p>Your organization up to 5 levels deep. Double click to collapse/open a node. Clicking on a node will display the customer details in a pop-up window</p>
            </div>
        </div>
    </section>
    <section class="container mt-4 section-loader">
        <!-- loader -->
        <div class="custom-loader d-none">
            <div class="loader-inner">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row card-equal-heigh">
            <div class="col-md-12 col-lg-12">
                <div class="row justify-content-between align-items-center py-2">
                    <div class="col-auto py-1">
                        <select class="custom-select" name="tree_type">
                            @foreach($treeTypes as $tree)
                                <option {{ $treeType ==  $tree['id'] ? 'selected' : '' }} value="{{ $tree['id'] }}">{{ $tree['title'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col" style="display: flex; align-items: center; justify-content: center;">
                        <div class="input-group">
                            <input class="form-control py-2" type="text" name="searchTxt" placeholder="{{ __('Search customer by Name or ID') }}">
                            <span class="input-group-append">
                                <button class="btn" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                              </span>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button style="margin-left: 10px;" onclick="javascript:location.reload();" type="button" class="btn btn-danger btn-xs">Reset</button>
                    </div>
                    @if($treeType == 3)
                    <div class="col-auto py-1" style="display: flex; align-items: center; flex-shrink: initial; flex-wrap: wrap;">
                        <button onclick="getBottom(1)" id="leftBtnBottom" class="btn btn-sm btn-dark mr-2 my-1">Bottom Left <i></i></button>
                        <button class="btn btn-sm btn-primary my-1" data-toggle="modal" data-target="#defaultPlacementModal">Set TEAM Placement Preference</button>
                        <button onclick="getBottom(2)" id="rightBtnBottom" class="btn btn-sm btn-dark ml-2 my-1">Bottom Right <i></i></button>

                    </div>
                    @endif
                    <div class="col-auto py-1">
                        <div class="btn-group zooomBtn" role="group">
                            <button type="button" data-type="minus" class="btn btn-light"><i class="far fa-minus"></i></button>
                            <button type="button" data-type="digits" class="btn btn-light">80%</button>
                            <button type="button" data-type="plus" class="btn btn-light"><i class="far fa-plus"></i></button>
                        </div>
                    </div>