@php
    $month = \Carbon\Carbon::parse(\Carbon\Carbon::now())->format('M')
@endphp

<nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Mobile menu button-->
                <button id="hamburgerbtn" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!-- Icon when menu is closed. -->
                    <!--
                      Heroicon name: menu

                      Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!-- Icon when menu is open. -->
                    <!--
                      Heroicon name: x

                      Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0 flex items-center">
                    @switch($month)
                        @case('Dec')
                        <img class="block lg:hidden h-auto w-36 logo" src="{{ asset('img/branding/ch_logo.png') }}" alt="Simulator FM">
                        <img class="hidden lg:block h-auto w-36 logo" src="{{ asset('img/branding/ch_logo.png') }}" alt="Simulator FM">
                        @break

                        @default
                        <img class="block lg:hidden h-auto w-36 logo" src="{{ asset('img/branding/logo.png') }}" alt="Simulator FM">
                        <img class="hidden lg:block h-auto w-36 logo" src="{{ asset('img/branding/logo.png') }}" alt="Simulator FM">
                    @endswitch
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4 nav-menu">
                        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
                        <router-link class="text-white px-3 py-2 rounded-md text-sm font-medium" to="/" exact>Home</router-link>
                        <router-link class="text-white px-3 py-2 rounded-md text-sm font-medium" to="/request">Request</router-link>
                        <router-link class="text-white px-3 py-2 rounded-md text-sm font-medium" to="/timetable">Timetable</router-link>
                        <div class="dropdown inline-block relative">
                            <button class="text-white px-3 py-2 rounded inline-flex items-center">
                                <span class="mr-1">Info</span>
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
                            </button>
                            <ul class="dropdown-menu absolute hidden origin-top-right absolute w-min rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5">
                                <router-link class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white hover:text-gray-800 hover:bg-gray-50 border-custom focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" to='/team'>Team</router-link>
                                <router-link class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white hover:text-gray-800 hover:bg-gray-50 border-custom focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" to='/contact-us'>Contact</router-link>
                            </ul>
                        </div>
                        <div class="dropdown inline-block relative">
                            <button class="text-white px-3 py-2 rounded inline-flex items-center">
                                <span class="mr-1">Apps</span>
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
                            </button>
                            <ul class="dropdown-menu absolute hidden origin-top-right absolute w-min rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5">
                                <router-link class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white hover:text-gray-800 hover:bg-gray-50 border-custom focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" to='/apply'>Presenter</router-link>
                                <router-link class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white hover:text-gray-800 hover:bg-gray-50 border-custom focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" to='/streamer'>Streamer</router-link>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="absolute inset-y-0 right-0 flex items-center pe-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                <!-- Profile dropdown -->
                <div class="ml-3 relative">
                    @guest
                        <a class="text-white px-2 w-full py-1 rounded text-sm font-medium" href="{{ route('login') }}">Login</a>
                    @endguest

                    @auth
                    <div class="dropdown">
                        <button class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-haspopup="true">
                            <img class="h-8 w-8 rounded-full" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}">
                        </button>
                        <ul class="dropdown-menu absolute hidden origin-top-right absolute w-min rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                            @can('Staff Dashboard')
                                <x-jet-responsive-nav-link target="_blank" href="{{ route('staff.dashboard.index') }}" :active="request()->routeIs('staff.dashboard.index')">
                                    Staff
                                </x-jet-responsive-nav-link>
                            @endcan
                            <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')">
                                {{ __('Profile') }}
                            </x-jet-responsive-nav-link>

                            <form method="POST" action="{{ route('logout') }}">
                                @csrf

                                <x-jet-responsive-nav-link href="{{ route('logout') }}"
                                                           onclick="event.preventDefault();
                                        this.closest('form').submit();">
                                    {{ __('Logout') }}
                                </x-jet-responsive-nav-link>
                            </form>
                        </ul>
                    </div>
                    @endauth
                </div>
            </div>

            <div class="flex items-center justify-right sm:items-stretch sm:justify-end">
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <div class="block">

                        </div>
                        <a target="_blank" href="https://discord.simulator.fm/" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"><i class="fab fa-discord"></i></a>
                        <a target="_blank" href="https://www.instagram.com/simulatorfm/" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"><i class="fab fa-instagram"></i></a>
                        <a target="_blank" href="https://twitter.com/simulator_fm" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"><i class="fab fa-twitter"></i></a>
                        <a target="_blank" href="https://www.facebook.com/simulatorfm" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--
      Mobile menu, toggle classes based on menu state.

      Menu open: "block", Menu closed: "hidden"
    -->
    <div id="mobileMenu" class="hidden sm:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <router-link class="block text-white px-3 py-2 rounded-md text-sm font-medium" to='/' exact>Home</router-link>
            <router-link class="block text-white px-3 py-2 rounded-md text-sm font-medium" to='/request'>Request</router-link>
            <router-link class="block text-white px-3 py-2 rounded-md text-sm font-medium" to='/timetable'>Timetable</router-link>
            <div class="dropdown inline-block relative">
                <button class="text-white px-3 py-2 rounded inline-flex items-center">
                    <span class="mr-1">Info</span>
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
                </button>
                <ul class="dropdown-menu absolute hidden text-center text-gray-700 p-2 pt-1 bg-gray-800">
                    <li class="rounded py-1"><router-link class="block text-white px-2 w-full py-1 rounded text-sm font-medium" to='/team'>Team</router-link></li>
                    <li class="rounded py-1"><router-link class="block text-white px-2 w-full py-1 rounded text-sm font-medium" to='/apply'>Apply</router-link></li>
                    <li class="rounded py-1"><router-link class="block text-white px-2 w-full py-1 rounded text-sm font-medium" to='/contact-us'>Contact</router-link></li>
                </ul>
            </div>
        </div>
    </div>
</nav>