@extends('layout')
@section('title', 'My Downline')
@section('content')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mt-2">
    <li class="breadcrumb-item"><a href="/account">{{ __('text.dashboard') }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ __('text.my-donwline') }}</li>
  </ol>
</nav>
<div class="in-out">
<button id="zoomIn" class="m-2">Zoom In</button>
<button id="zoomOut" class="m-2 k">Zoom Out</button>
<button id="fullscreen" class="m-2">Full Screen</button>
</div>
<style>
  /*----------------genealogy-scroll----------*/
  .in-out {
    position: relative;
    z-index: 9;
}
.tree_section {
    width: 98.4%;
    margin: 0 auto;
}
.genealogy-scroll::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
.genealogy-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #e4e4e4;
}
.genealogy-scroll::-webkit-scrollbar-thumb {
  background: #212121;
  border-radius: 10px;
  transition: 0.5s;
}
.genealogy-scroll::-webkit-scrollbar-thumb:hover {
  background: #d5b14c;
  transition: 0.5s;
}

/*----------------genealogy-tree----------*/
.genealogy-body {
  white-space: nowrap;
  overflow-y: hidden;
  padding: 50px;
  min-height: 500px;
  padding-top: 10px;
  text-align: center;
}
.genealogy-tree {
  display: inline-block;
}
.genealogy-tree ul {
    padding-top: 20px;
    position: relative;
    padding-left: 0px;
    display: flex;
    justify-content: center;
    margin-left: 25px;
}
.genealogy-tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
}
.genealogy-tree li::before,
.genealogy-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #ccc;
  width: 50%;
  height: 18px;
}
.genealogy-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid #ccc;
}
.genealogy-tree li:only-child::after,
.genealogy-tree li:only-child::before {
  display: none;
}
.genealogy-tree li:only-child {
  padding-top: 0;
}
.genealogy-tree li:first-child::before,
.genealogy-tree li:last-child::after {
  border: 0 none;
}
.genealogy-tree li:last-child::before {
  border-right: 2px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.genealogy-tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}
.genealogy-tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #ccc;
  width: 0;
  height: 20px;
}
.genealogy-tree li a {
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.genealogy-tree li a:hover,
.genealogy-tree li a:hover + ul li a {
  background: #c8e4f8;
  color: #000;
}

.genealogy-tree li a:hover + ul li::after,
.genealogy-tree li a:hover + ul li::before,
.genealogy-tree li a:hover + ul::before,
.genealogy-tree li a:hover + ul ul::before {
  border-color: #fbba00;
}

/*--------------memeber-card-design----------*/

.member-view-box {
  padding-bottom: 10px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  border: 1px;
  border-color: #e4e4e4;
  border-style: solid;
}
.member-image {
  padding: 10px;
  /*width: 120px;*/
  position: relative;
}
.member-image img {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  background-color: #fff;
  z-index: 1;
}
.member-header {
  padding: 5px 0;
  text-align: center;
  /*background: #345;*/
  color: #fff;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
}
.member-footer {
  text-align: center;
}
.member-footer div.name {
  color: #000;
  font-size: 14px;
  margin-bottom: 5px;
}
.member-footer div.downline {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}

</style>

<section class="tree_section">
    <div class="container bg-tree" id="user_card">
        @csrf
        <div class="body genealogy-body genealogy-scroll">
            <div class="genealogy-tree">
                <ul>
                    @foreach($data as $ds)
                    <li>
                        <div class="member-view-box">
                            <div class="member-image">
                                <img src="https://cdn-icons-png.freepik.com/256/11419/11419168.png" alt="Member">
                            </div>
                            <div class="member-footer">
                                <div class="name"><span>{{ $ds->firstname }} {{ $ds->lastname }}</span></div>
                                <div class="downline"><span>Ref: {{ $ds->referralcode }}</span></div>

                                @php
                                $showButton = false;
                                @endphp

                                @foreach($sponsor_id as $sp)
                                    @if($sp->sponsor_id == $ds->customer_id)
                                        @php
                                        $showButton = true;
                                        break;
                                        @endphp
                                    @endif
                                @endforeach

                                @if($showButton)
                                <div class="member-header">
                                    <button type="button" class="btn btn-success btn-sm rounded-circle expend"
                                        style="padding: 0.1rem 0.5rem !important;" data-id="{{ $ds->customer_id }}">
                                        <b> + </b>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>
<!--full screen-->
<script>
$(document).ready(function(){
    $("#fullscreen").click(function(){
        $(".tree_section").toggleClass("fullscreen");
    });
});

$(document).keydown(function(event){
    if(event.keyCode == 27){ // 27 is the keycode for the Escape key
        $(".tree_section").removeClass("fullscreen");
    }
});
</script>
<!--tree data-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
    $(document).on('click', '.expend', function() {
        var customer_id = $(this).data("id");
        var _token = $('input[name="_token"]').val();
        var _this = $(this);

        if (_this.hasClass('expanded')) {
            _this.closest('li').find('> ul').hide();
            _this.closest('li').find('.additional-info').remove();
            _this.removeClass('expanded').html('<b> + </b>');
        } else {
            _this.addClass('loading').html('Loading...');

            $.ajax({
                url: '/administrator/getCustomers',
                type: 'POST',
                data: { customer_id: customer_id, _token: _token },
                success: function(data) {
                    console.log(data);
                    if (data.length > 0) {
                        var html = '<ul class="additional-info">';
                        $.each(data, function(i, e) {
                            html += '<li>' +
                                '<div class="member-view-box">' +
                                '<div class="member-image">' +
                                '<img src="https://cdn-icons-png.freepik.com/256/11419/11419168.png" alt="Member">' +
                                '</div>' +
                                '<div class="member-footer">' +
                                '<div class="name"><span>' + e.firstname + ' ' + e.lastname + '</span></div>' +
                                '<div class="downline"><span>Ref: ' + e.referralcode + '</span></div>';

                            if (e.related_count > 0) {
                                html += '<button type="button" class="btn btn-success btn-sm rounded-circle expend" ' +
                                    'style="padding: 0.1rem 0.5rem !important;" data-id="' + e.customer_id + '">' +
                                    '<b> + </b></button>';
                            }

                            html += '</div></div></li>';
                        });
                        html += '</ul>';

                        _this.closest('li').append(html);
                        _this.removeClass('loading').addClass('expanded').html('<b> - </b>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    _this.removeClass('loading').html('<b> + </b>');
                }
            });
        }
    });
});

</script>
<!--zoom page-->
<script>
        $(document).ready(function(){
            var currentScale = 1;
            
            $("#zoomIn").click(function(){
                currentScale += 0.1;
                $('.tree_section').css('transform', 'scale(' + currentScale + ')');
            });

            $("#zoomOut").click(function(){
                currentScale -= 0.1;
                if(currentScale > 0.5){
                    $('.tree_section').css('transform', 'scale(' + currentScale + ')');
                }
            });
        });
</script>

@endsection