<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield("title")</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='icon' href='{{ asset('/images/icons/browserFavIcon.svg') }}' type='image/x-icon'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script>
    <script type="text/javascript">
        function openNav() {
            fixpls();
            var open = document.getElementById("open");
            var close = document.getElementById("close");

            close.style.display = "block";
            open.style.display = "none";

            var nav = document.getElementsByClassName("nav")[0];
            nav.style.width = "";

            var w85 = document.getElementsByClassName("w-85")[0];
            $(".w-85").css({ "width": "85%" });

            $(".segment > div > h3").css({"margin-left": "", "width": ""});
            $(".segment > div > h3 > a").css({ "display": ""});
            $(".segment > div > h3 > a > span").css({"display": ""});

            $(document).on({
                mouseenter: function() {
                    $(this).find('.tooltiptext').css("visibility", "hidden");
                },
                mouseleave: function() {
                    $(this).find('.tooltiptext').css("visibility", "hidden");
                }
            }, ".tooltip");
            $(".segment .hamburger > div").css({"margin-left": "-1rem", "width": "calc(100% - 3rem)"});
            $(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});

            localStorage.setItem("collapsed", "false");
        }

        function closeNav() {
            if (localStorage.getItem("collapsed") !== "true")
                fixpls();

            var open = document.getElementById("open");
            var close = document.getElementById("close");

            close.style.display = "none";
            open.style.display = "block";

            var nav = document.getElementsByClassName("nav")[0];
            nav.style.width = "64px";

            var w85 = document.getElementsByClassName("w-85")[0];
            $(".w-85").css({ "width": "calc(100% - 64px)"});

            $(".segment > div > h3").css({"margin-left": "0", "width": "100%"});
            $(".segment > div > h3 > a").css({"display": "flex"});
            $(".segment > div > h3 > a > span").css({"display": "none"});

            $(document).on({
                mouseenter: function() {
                    $(this).find('.tooltiptext').css("visibility", "visible");
                },
                mouseleave: function() {
                    $(this).find('.tooltiptext').css("visibility", "hidden");
                }
            }, ".tooltip");

            $(".segment.hamburger > div").css({"margin-left": "0", "width": "calc(100% - 4rem)"});
            $(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});

            localStorage.setItem("collapsed", "true");
        }

        function checkIfIShouldCollapse() {
            if (localStorage.getItem("collapsed") == "true" && document.readyState === "complete") {
                closeNav();
                fixpls();
            }
        }
    </script>
    <link type="text/css" rel="stylesheet" href="{{ mix("/css/admin.css") }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<style>
    .tooltip {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        display: flex;
        width: auto;
        height: 100%;
        background-color: #333333;
        color: #fff;
        text-align: center;
        border-bottom-right-radius: 3px;
        margin-top: auto;
        padding: 0 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: auto;
        position: absolute;
        z-index: 3;
        top: 0px;
        left: 100%;
        font-size: 25px;
    }

    .letterSpaceingNavBar{
        letter-spacing: 1.2px;
    }
</style>
@yield("header")
<main class="row">
    <div class="col nav" style="background-color: #333333;">
        <div class="segment hamburger" style="height: 60px;">
            <div class="text-white row align-items-center mt-0 mb-0" style="margin-left: -1rem; font-size: 1.15rem; height: calc(100% - 2rem); padding: 1rem 2rem; width: calc(100% - 3rem); background-color: #333333 !important;">
                <a href="javascript:void(0)" id="open" style="display: none;" onclick="openNav()" class="open-btn text-white p-none ml-auto"><i class="fa fa-bars"></i></a>
                <a href="javascript:void(0)" id="close" onclick="closeNav()" class="close-btn text-white p-none ml-auto"><i class="fa fa-times"></i></a>
            </div>
        </div>


        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "root.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('root.index') }}" class="text-white"><img src="{{asset("/images/icons/statistics.svg")}}" class="fa"><span class="ml-4px">Statistik</span></a></h3><span class="tooltiptext">Statistik</span></div>
        </div>
        @if(auth()->user()->can('user.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "users.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span class="ml-4px">Brugere</span></a></h3><span class="tooltiptext">Brugere</span></div>
        </div>
        @endif
        @if(auth()->user()->can('roles.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "roles.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('roles.index') }}" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span class="ml-4px">Roller</span></a></h3><span class="tooltiptext">Roller</span></div>
        </div>
        @endif
        @if(auth()->user()->can('news.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "news.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('news.index') }}" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span class="ml-4px">Nyheder</span></a></h3><span class="tooltiptext">Nyheder</span></div>
        </div>
        @endif
        @if(auth()->user()->can('menuplan.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "menu-plans.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('menu-plans.index') }}" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span class="ml-4px">Menuplan</span></a></h3><span class="tooltiptext">Menuplan</span></div>
        </div>
        @endif
        @if(auth()->user()->can('event.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "events.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('events.index') }}" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span class="ml-4px">Aktiviteter</span></a></h3><span class="tooltiptext">Aktiviteter</span></div>
        </div>
        @endif
        @if(auth()->user()->can('washing.machine.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-machines.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('washing-machines.index') }}" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span class="ml-4px">Vaskemaskiner</span></a></h3><span class="tooltiptext">Vaskemaskiner</span></div>
        </div>
        @endif
        @if(auth()->user()->can('washing.machine.reservation.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-reservations.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('washing-reservations.index') }}" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span class="ml-4px">Reservationer</span></a></h3><span class="tooltiptext">Reservationer</span></div>
        </div>
        @endif
        @if(auth()->user()->can('contact.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "contacts.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('contacts.index') }}" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span class="ml-4px">Kontakter</span></a></h3><span class="tooltiptext">Kontakter</span></div>
        </div>
        @endif
        @if(auth()->user()->can('guides.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "guides.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span class="ml-4px">Vejledning</span></a></h3><span class="tooltiptext">Vejledning</span></div>
        </div>
        @endif
        @if(auth()->user()->can('feedback.show'))
        <div class="segment letterSpaceingNavBar @if(\Illuminate\Support\Facades\Request::route()->getName() == "feedbacks.index") active @endif">
            <div class="tooltip"><h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><img src="{{asset("/images/icons/feedback.svg")}}" class="fa"><span class="ml-4px">Feedback</span></a></h3><span class="tooltiptext">Feedback</span></div>
        </div>
        @endif
    </div>
    <div class="w-85" style="background-color: #cccccc;">
        <div class="directorypath text-white">
            <a href="{{ route('root.index') }}" class="text-white">Home</a> / @yield("path")
        </div>
        <div class="content">
            @yield("content")
        </div>
    </div>
    <script>
        if(localStorage.getItem("collapsed") == "true")
            closeNav();

        $('.segment.active > .tooltip > h3 > a').click(function (e) {
            e.preventDefault();
        });
    </script>
</main>

<script src="{{ mix("/js/app.js") }}"></script>
<script src="{{ asset("/js/jquery.are-you-sure.js") }}"></script>
<script>
    function fixpls() {
        document.getElementsByClassName("nav")[0].style.transition = "width .5s";
        document.getElementsByClassName("w-85")[0].style.transition = "width .5s";
    }
</script>

<link rel="stylesheet" type="text/css" href="{{ asset("/DataTables/datatables.css") }}">
<script type="text/javascript" charset="utf8" src="{{asset("/DataTables/datatables.js")}}"></script>
@yield("scripts")
<style>
    body.swal2-height-auto {
        height: 100% !important;
    }
</style>
</body>
</html>