@php
    if(Auth::user()->avatar){
        $user_avatar = Voyager::image(Auth::user()->avatar);
    } else {
        $user_avatar = Voyager::image(setting('site-variable.logo'));
    }

@endphp

<style>

    .main{
        transition: all .5s ease;
    }

    .sidebar{
        transition: all .5s ease;
    }

    .sideNotification i{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #ltr .sideNotification::before{
        width: auto !important;
    }

    .accordionTestPanelTitle{
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .accordionTestPanelTitle > i{
        display: flex;
    }

    .accordionTestPanelBody{
        display: none;
    }

    .mainTopOfSidebar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;
        margin-bottom: 16px;
    }


    .sideNavMainIcon,
    .openSideNavMainIcon{
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        cursor: pointer;
        background-color: #2a5ff5;
        border-radius: 5px;
        transition: all .5s ease;
        padding: 5px;
    }

    .openSideNavMainIcon{
        display: none;
        margin: 30px 25px 0;
    }

    .sideNavMainIcon > span,
    .openSideNavMainIcon > span{
        width: 100%;
        height: 2px;
        display: block;
        background-color: #fff;
        border-radius: 25px;
        transition: all .5s ease;
        margin-bottom: 5px;
    }

    .sideNavMainIcon span:last-child,
    .openSideNavMainIcon span:last-child{
        margin-bottom: 0;
    }

    .sideNavMainIcon > img{
        width: 100%;
        filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(788%) hue-rotate(181deg) brightness(122%) contrast(100%);
        display: none;
    }

    .sideNavMainIcon.active{
        transform: rotate(360deg);
    }

    .sideNavMainIcon.active > img{
        display: block;
    }

    .sideNavMainIcon.active > span{
        display: none;
        margin-bottom: 0;
    }


    .sideNavMainIcon.active span:first-child,
    .sideNavMainIcon.active span:last-child{
        width: 50%;
        transform: rotate(30deg) translate(-3px, -3px);
        margin-left: -8px;

    }


    .sideNavMainIcon.active span:first-child{
        transform: rotate(-30deg) translate(-3px, 3px);
    }

    .sideNavMainIcon.active + .sideNavFullscreenBox{
        display: grid;
    }

    .sideNavFullscreenBox{
        display: none;
        width: 32px;
        height: 32px;
        place-items: center;
        cursor: pointer;
        border-radius: 5px;
        font-size: 18px;
        background-color: #2a5ff5;
        color: #fff;
    }

    .sideNavFullscreenBox span{
        display: grid;
        place-items: center;
    }

    @media screen and (max-width: 768px){
        .openSideNavMainIcon{
            display: none !important;
        }

        .sideNavMainIcon{
            display: none !important;
        }

        #nav-toggle{
            background-color: #2a5ff5 !important;
        }
    }
</style>

<div class="modal modal-danger fade show" tabindex="-1" id="notification_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="title">
                    Notifiction
                </h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    @include('voyager::dashboard.last_5_withdraw')
                    @include('voyager::dashboard.last_5_tickets')
                    @include('voyager::dashboard.last_5_request_agent')
                    @include('voyager::dashboard.last_5_auth')
                </div>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="sidebar">

    <div class="mainTopOfSidebar">
        <div class="sideNavMainIcon active">
            <span></span>
            <span></span>
            <span></span>
            <img src="/assets/images/new/sideMenuIcon.svg" alt="">
        </div>

        <div class="sideNavFullscreenBox" onclick="toggleFullScreen()">
            <span class="voyager-resize-full"></span>
        </div>


    </div>


    <div class="flex-box title-row controlSidenav">
{{--        <a  href="{{ route('voyager.profile') }}" class="logo flex-box">--}}
        <a  href="/kcp/users/{{ auth()->guard('web')->user()->id }}/edit" class="logo flex-box">
            <div class="logo-box flex-box">
                <img height="50px" src="{{  Voyager::image(setting('site-variable.logo')) }}" style="border-radius: 20px">
            </div>
            <div class="logo-text">
                <h5>
                    {{ setting('admin.title') }}
                </h5>
                <p>
                    {{ __('voyager::generic.manage_account') }}
                </p>
            </div>
        </a>
        <a data-tooltip="logout"  href="/kcp/logout" class="flex-box log-out">
            <img src="{{ voyager_asset('icon/logout.svg') }}">
        </a>
        <a data-tooltip="nofication" class="flex-box log-out sideNotification" data-toggle="modal" data-target="#notification_modal">
            <i class="voyager-bell" style="font-size: 18px;height: 25px;margin-right: 12px;margin-left: 12px;color: #fff"></i>
        </a>
    </div>
    <nav class='animated sidebar-list controlSidenav'>

        <ul class="sidebar-list-item">

            {!! menu('admin', 'voyager::menu.sidebarmenu') !!}

        </ul>
    </nav>
</div>

<script>

    function toggleFullScreen() {
        if (!document.fullscreenElement &&    // alternative standard method
            !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    }


    $(document).ready(function (){
        $(document).on('click' , ".accordionTestPanelTitle" , function (){
            $(".accordionTestPanelBody").slideUp(400);
            $(this).next(".accordionTestPanelBody").slideDown(400);
        });
        $(".accordionTestPanelTitle").eq(0).click();

        $(document).on('click' , '.sideNavMainIcon , .openSideNavMainIcon' , function (){

            if(770 <= window.innerWidth <= 1440){
                $(".sideNavMainIcon").toggleClass('active');
                $(".controlSidenav").toggle(400);
                setTimeout(() =>{
                    if($(".sidebar").css('width') == '270px'){
                        $(".sidebar").css({
                            'width' : 0,
                            'padding' : '30px 0'
                        });
                        $(".main").css('max-width','calc(100%)');
                        $(".mainTopOfSidebar").hide();
                        $(".openSideNavMainIcon").fadeIn(400).css('display','grid');

                    }else{
                        $(".sidebar").css({
                            'width': 270,
                            'padding' : '30px 15px'
                        })
                        $(".main").css('max-width','calc(100% - 270px)')
                        $(".openSideNavMainIcon").hide(400);
                        $(".mainTopOfSidebar").show().css('display','flex');

                    }
                },250)
            }

        })

        if(770 <= window.innerWidth <= 1440){
            setTimeout(function (){
                $(".sideNavMainIcon").click();
            } , 1300)
        }

    })





</script>