<nav class="shadow p-4 z-100 bg-secondary " wire:init="loadNav">
    {{-- @if ($navLoaded) --}}
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div>
        <ul class="flex space-x-4 z-50">
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="/server-license">Server License Management</a>
            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <span class="cursor-pointer" @click.stop>Patch</span>
                <ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="/patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
                            Patch</a></li>
                    <li><a href="/master-file" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
                            MasterFile</a></li>
                    <li><a href="/exchange-rate" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
                            Exchangerate</a></li>
                    <li><a href="/discharge-port" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Create
                            Discharge Port</a></li>
                </ul>

            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <span class="cursor-pointer" @click.stop>Send Patch</span>
                <ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="/send-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send
                            Patch</a></li>
                    <li><a href="/send-multi-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send
                            Multi Patch</a></li>
                    <li><a href="/delete-multi-patch" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Delete
                            Multi Patch</a></li>
                </ul>

            </li>

            {{-- <li x-data="{ open: false }"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="/test">Test</a>
            </li> --}}
            <li x-data="{ open: false }"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="/news">News & Update</a>
            </li>

            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <span class="cursor-pointer" @click.stop>Knowledge</span>
                <ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="/parameter" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Parameter</a></li>
                </ul>

            </li>
            <li x-data="{ open: false }"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="/report">Report</a>
            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Configuration</a>
                <ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="/company" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Company</a></li>
                    <li><a href="/role" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a>
                    <li><a href="/group" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Group</a></li>
                    <li><a href="/user" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a></li>
                    <li>
                        <a href="/format-file-master" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Format
                            File Master</a>
                    </li>
                </ul>
            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white  cursor-pointer">
                <i aria-hidden="true" class="fa fa-user" aria-hidden="true"></i>
                <span>Hello , {{ $userName ?? '' }}</span>
                <ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
                class="absolute left-0 mt-2 w-32 bg-white shadow-lg">
                    <li  class="block px-4 py-2 text-gray-700 hover:bg-stone-100">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="button"
                                onclick="event.preventDefault(); this.closest('form').submit();">
                                Logout
                            </button>
                        </form>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
    {{-- @endif --}}
</nav>
