<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield("title")</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="{{ asset("/css/normalize.css") }}">
    @if(request()->cookie("mode") == "dark")
        <link type="text/css" rel="stylesheet" href="{{ mix("/css/webappdark.css") }}">
    @else
        <link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
    @endif

    <script type="text/javascript">
        function setMain() {
            var main = document.getElementsByTagName("main")[0];
            var header = document.getElementsByTagName("header")[0];
            main.style.minHeight = 'calc(100% - ' + (header.clientHeight+10) + 'px)';
        }
    </script>
</head>
<body onresize="setMain()" onload="setMain()">
<header class="row align-items-center" id="header" style="position: fixed; top: 0; width: calc(100% - 1.75rem - 1.75rem); background: #00788a; transition: top 0.3s;">
    @if(request()->cookie("mode") == "dark")
        <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-hvid.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
    @else
        <img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-hvid.svg')}}" onclick="location.href = '{{ route("root.index") }}';" alt="Syddansk Erhvervsskole">
    @endif
    <button class="ml-auto" id="toggle">
        <i id="icon" class="fas fa-bars" style="color: black;"></i>
    </button>
</header>
<div class="d-none bg-sde-blue col" id="menu">
    <a href="{{ route("root.index") }}">
        <img src="{{URL::asset('/images/icons/Home.svg')}}" alt="Home">
        Home
    </a>
    <a href="{{ route("menu-plans.index") }}">
        <img src="{{URL::asset('/images/icons/Menuplan.svg')}}" alt="Menuplan">
        {{ __('msg.menuplan') }}
    </a>
    <a href="{{ route("events.index") }}">
        <img src="{{URL::asset('/images/icons/Aktiviteter.svg')}}" alt="Aktiviteter">
        {{ __('msg.aktiviteter') }}
    </a>
    <a href="{{ route("washing-reservations.appindex") }}">
        <img src="{{URL::asset('/images/icons/Vaske booking liste.svg')}}" alt="Reservationer">
        {{ __('msg.reservationer') }}
    </a>
    <a href="{{ route("contacts.index") }}">
        <img src="{{URL::asset('/images/icons/Kontoret.svg')}}" alt="Kontakter">
        {{ __('msg.kontoret') }}
    </a>
    <a href="{{ route("phones.index") }}">
        <img src="{{URL::asset('/images/icons/Vagttelefon-hvid.svg')}}" alt="Vagttelefon">
        {{ __('msg.vagttelefon') }}
    </a>
    <a href="{{ route("guides.index") }}">
        <img src="{{URL::asset('/images/icons/Vejledninger.svg')}}" alt="Guide">
        {{ __('msg.vejledning') }}
    </a>
    <a href="{{ route("users.account") }}">
        <img src="{{URL::asset('/images/icons/user-hvid.svg')}}" alt="Konto">
        {{ __('msg.konto') }}
    </a>
    <a href="{{ route("settings.index") }}">
        <img src="{{URL::asset('/images/icons/settings-hvid.svg')}}" alt="Indstillinger">
        {{ __('msg.indstillinger') }}
    </a>
    <a href="{{ route('about.index') }}">
        <img src="{{URL::asset('/images/icons/about.svg')}}" alt="Omkring">
        {{ __('msg.omkring') }}
    </a>
    <a href="{{ route('users.logout') }}">
        <img src="{{URL::asset('/images/icons/Logout.svg')}}" alt="Logud">
        {{ __('msg.logud') }}
    </a>
</div>
<style>
    option, textarea {
        color: black;
    }

</style>
@yield("content")
<script src="{{ mix("/js/app.js") }}"></script>
@if(request()->cookie("mode") == "dark")
    <script type="text/javascript">
        function toggleMenu(menu) {
            let menuElement = document.getElementById(menu);
            let logoElement = document.getElementById("sdeLogo");
            let htmlElement = document.getElementsByTagName('html')[0];
            let bodyElement = document.getElementsByTagName('body')[0];
            let mainElement = document.getElementsByTagName('main')[0];
            let iconElement = document.getElementById("icon");
            let headerElement = document.getElementById("header");

            if(menuElement.classList.contains("hide")) {
                menuElement.classList.remove("hide");
                mainElement.classList.remove("d-none");
                htmlElement.style.backgroundColor = '';
                bodyElement.style.backgroundColor = '#666666';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-times");
                iconElement.classList.add("fa-bars");
                headerElement.style.position = 'fixed';
            } else {
                menuElement.classList.add("hide");
                mainElement.classList.add("d-none");
                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
                bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-bars");
                iconElement.classList.add("fa-times");
                headerElement.style.position = 'relative';
                headerElement.style.top = '0';
            }
        }

        if(document.getElementById("toggle"))
            document.getElementById("toggle").onclick = function () {
                toggleMenu('menu');
            };
    </script>
@endif
@yield("scripts")
<script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
            document.getElementById("header").style.top = "0";
        } else if(document.getElementById("header").style.position !== "relative" && window.scrollY > document.getElementById("header").clientHeight - 10) {
            document.getElementById("header").style.top = "-" + document.getElementById("header").clientHeight + "px";
        }
        prevScrollpos = currentScrollPos;
    }

    document.getElementsByTagName("main")[0].style.paddingTop = (10+document.getElementById("header").clientHeight) + "px";
    //document.getElementById("menu").style.paddingTop = document.getElementById("header").clientHeight + "px";
</script>
</body>
</html>
