@if(!$ajaxRequest)
    @extends(ucfirst(getScope()).'.Layout.master')
    @section('content')
        @endif
        <div class="tree-outer-wrapper portlet light">
            <div class="row">
                <div class="col-sm-2 form-group">
                    <label>{{ _mt($moduleId, 'GenealogyTree.member_id') }}</label>
                    <input class="form-control userFiller" type="text"
                           placeholder="{{ _mt($moduleId, 'GenealogyTree.enter_member_id') }}">
                    <input type="hidden" name="filters[user_id]" id="user_id">
                </div>
                <div class="col-sm-2 form-group">
                    <label>{{ _mt($moduleId, 'GenealogyTree.Tree_Type') }}</label>
                    <select name="type" id="type" class="form-control treeType select2">
                        <option value="placement"
                                @if($type == 'placement') selected @endif >{{ _mt($moduleId, 'GenealogyTree.Placement') }}</option>
                        <option value="sponsor"
                                @if($type == 'sponsor') selected @endif >{{ _mt($moduleId, 'GenealogyTree.Sponsor') }}</option>
                    </select>
                </div>
                <div class="col-sm-5"></div>
                <div class="col-sm-3">
                    @if($iconList)
                        <div class="AvatarBlock currencyPicker dropdown">
                            <button type="button" class="btn btn-sm btn-outline dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                        <span> <i class="fa fa-info"></i>{{ _mt($moduleId, 'GenealogyTree.Avatar_Representations') }}<i
                                class="fa fa-angle-down"></i></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <h3 class="AvatarTitle">{{ $iconRepresentation }}</h3>
                                @foreach ($iconList as $item)
                                    <li>
                                        <span><img src="{{ asset($item['icon']) }}"> {{ $item['title'] }} </span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
            <div class="portlet-body form" style="height: auto;">
                <div class="treeWrapper">
                    {{--<div class="treeOptions">
                        <span class="trigger"><i
                                    class="fa fa-cogs"></i> {{ _mt($moduleId, 'GenealogyTree.options') }}</span>
                    </div>--}}
                    <div class="treeSwitches">
            <span class="reset switch" data-action="reset">
                <i class="fa fa-refresh"></i>
            </span> <span class="switch" data-action="">
                <a href="#" class="full-screen" onclick="toggleFullScreen()"><i class="fa fa-arrows-alt"></i></a>
            </span>

                    </div>
                    {!! $content !!}
                </div>
            </div>
        </div>
        <style>
            .img_highlight {
                filter: drop-shadow(0px 2px 10px #007bff);
                animation: blink 1s linear infinite;
                border: solid 3px green !important;
            }

            @keyframes blink {
                0% {
                    opacity: .5;
                }
                50% {
                    opacity: .6;
                }
                70% {
                    opacity: .8;
                }
                100% {
                    opacity: 1;
                }
            }

            a.full-screen {
                color: #b3b3b3;
            }

            a.full-screen:hover, a.full-screen:focus {
                color: #8a8a8a;
                text-decoration: none;
            }
        </style>
        <script type="text/javascript">
            'use strict';

            $(function () {
                $('.select2').select2({
                    width: '100%'
                });

                $(".img_fill").mouseenter(function () {
                    if ($(".treeType").val() == 'sponsor') {
                        var elementNode = $(this).attr("slhs");

                        $(".img_fill").each(function (index, element) {
                            var left = $(this).attr("slhs");
                            var right = $(this).attr("srhs");
                            if (parseInt(elementNode) >= parseInt(left) && parseInt(elementNode) <= parseInt(right)) {
                                $(this).addClass("img_highlight");
                            }
                        });

                    } else {
                        var elementNode = $(this).attr("lhs");

                        $(".img_fill").each(function (index, element) {
                            var left = $(this).attr("lhs");
                            var right = $(this).attr("rhs");
                            if (parseInt(elementNode) >= parseInt(left) && parseInt(elementNode) <= parseInt(right)) {
                                $(this).addClass("img_highlight");
                            }
                        });
                    }

                    $(".hv-wrapper").find("img").not(".img_highlight").css("opacity", "0.5");
                }).mouseleave(function () {
                    $(".hv-wrapper .img_fill").each(function (index, element) {
                        $(this).removeClass("img_highlight");
                    });
                    $(".hv-wrapper").find("img").css("opacity", "1");
                });
            });

            function toggleFullScreen() {
                $(window).height();
                document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
                    ? document.cancelFullScreen
                        ? document.cancelFullScreen()
                        : document.mozCancelFullScreen
                            ? document.mozCancelFullScreen()
                            : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
                    : document.documentElement.requestFullscreen
                        ? document.documentElement.requestFullscreen()
                        : document.documentElement.mozRequestFullScreen
                            ? document.documentElement.mozRequestFullScreen()
                            : document.documentElement.webkitRequestFullscreen && document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT),
                    $(".full-screen > i").toggleClass("icon-maximize"),
                    $(".full-screen > i").toggleClass("icon-minimize");
            }

            //Adjust dropdown position
            function adjustPosition(elem, target) {
                elem.width(target.outerWidth()).slideDown().offset({
                    left: target.offset().left,
                    top: (target.offset().top + target.outerHeight())
                });
            }

            //Get users
            function getUsers(data) {
                var options = {
                    limit: 10,
                    action: 'getUsersByMemberId'
                };
                options.data = data;

                return $.post("{{ route('user.api') }}", options);
            }

            $(".treeType").change(function () {
                var treeType = $(this).val();
                if ('{{ $type }}' != treeType) {
                    var url = '{{ scopeRoute("tree.genealogyTree") }}' + '/' + treeType;
                    window.location.href = url;
                }
            });
        </script>
        @if(!$ajaxRequest)
            @endsection
        @endif