<div class="h-full text-white bg-main-container w-80 p-4 transition-all duration-300 overflow-y" x-data="{ activeLink: window.location.pathname }">
    <div class="rounded-2xl p-3 bg-white w-full mb-2"  x-init="checkWindowWidth(); window.addEventListener('resize', checkWindowWidth)">
        <ul >
            <li class="flex justify-between">
                <a href="/" class="text-black block py-1 px-4 rounded text-xl">SPN Patch</a>
                <button @click="sidebarOpen = false; if (!sidebarOpen) setTimeout(() => showSidebarButton = true, 400)" class="mb-4 pt-1 focus:outline-none">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="black" viewBox="0 0 24 24"
                        stroke="black">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </li>
            <!-- <li class="mb-1">
                <a href="#" class="block py-1 px-4 rounded hover:primary-focus text-black"> 
                    <i aria-hidden="true" class="fa fa-home mr-2"></i>Home</a>
            </li> -->
            
        </ul>
    </div>

    <div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/patch', '/master-file', '/exchange-rate', '/discharge-port' , '/patch-exchange-rate'].includes(activeLink) }">
        <ul >
            <li class="mb-1">
                <a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa fa-file-code mr-2"></i> Patch
                    <svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </a>
            </li>
            <div  x-show="open" class="transition-all duration-300" x-cloak>
                <li class="mb-1 ml-6">
                    <a href="/patch" :class="activeLink === '/patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-signature mr-2"></i>Create Patch</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/master-file" :class="activeLink === '/master-file' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-shield mr-2"></i>Create Patch MasterFile</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/patch-exchange-rate" :class="activeLink === '/patch-exchange-rate' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-invoice-dollar mr-2"></i>Create Patch Exchange Rate</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/discharge-port" :class="activeLink === '/discharge-port' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-anchor mr-2"></i>Create Patch Discharge Port</a>
                </li>
            </div>
        </ul>
    </div>
    <div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/send-patch', '/send-multi-patch', '/delete-multi-patch'].includes(activeLink) }">
        <ul >
            <li class="mb-1">
                <a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa fa-share-from-square mr-2"></i> Send Patch
                    <svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </a>
            </li>
            <div x-show="open" class="transition-all duration-300" x-cloak>
                <li class="mb-1 ml-6">
                    <a href="/send-patch" :class="activeLink === '/send-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-import mr-2"></i>Send Patch</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/send-multi-patch" :class="activeLink === '/send-multi-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-shuffle mr-2"></i>Send Multi Patch</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/delete-multi-patch" :class="activeLink === '/delete-multi-patch' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-trash-can mr-2"></i>Delete Multi Patch</a>
                </li>
            </div>
        </ul>
    </div>
    <div class="rounded-2xl p-3 bg-white w-full mb-2">
        <ul >
            <li class="mb-1">
                <a href="/server-license" :class="activeLink === '/server-license' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                   class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa-solid fa-building mr-2"></i> Server License Management
                </a>
            </li>
        </ul>
    </div>
    <div class="rounded-2xl p-3 bg-white w-full mb-2">
        <ul >
            <li class="mb-1">
                <a href="/exchange-rate" :class="activeLink === '/exchange-rate' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                   class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa fa-money-bill-transfer mr-2"></i> Exchange Rate
                </a>
            </li>
        </ul>
    </div>
    <div class="rounded-2xl p-3 bg-white w-full mb-2">
        <ul >
            <li class="mb-1">
                <a href="/news" :class="activeLink === '/news' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                   class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa-sharp fa-regular fa-newspaper mr-2"></i> News & Update
                </a>
            </li>
        </ul>
    </div>
    <div class="rounded-2xl p-3 bg-white w-full mb-2">
        <ul >
            <li class="mb-1">
                <a href="/manual-response/index" :class="activeLink === '/manual-response/index' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                   class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa-sharp fa-regular fa-paper-plane mr-2"></i> Manual Response
                </a>
            </li>
        </ul>
    </div>

    <div class="rounded-2xl p-3 bg-white w-full mb-2" x-data="{ open: ['/company', '/role', '/group', '/user', '/format-file-master'].includes(activeLink) }">
        <ul >
            <li class="mb-1">
                <a href="#" @click="open = !open" class="block py-2 px-4 rounded text-black flex items-center">
                    <i aria-hidden="true" class="fa fa-gear mr-2"></i> Configuration
                    <svg class="ml-auto h-4 w-4 transition-transform transform" :class="open ? 'rotate-180' : ''"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </a>
            </li>
            <div x-show="open" class="transition-all duration-300" x-cloak>
                <li class="mb-1 ml-6">
                    <a href="/company" :class="activeLink === '/company' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-building mr-2"></i>Company</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/role" :class="activeLink === '/role' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-id-card mr-2"></i>Role</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/group" :class="activeLink === '/group' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-user-group mr-2"></i>Group</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/user" :class="activeLink === '/user' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-user mr-2"></i>User</a>
                </li>
                <li class="mb-1 ml-6">
                    <a href="/format-file-master" :class="activeLink === '/format-file-master' ? 'bg-primary-focus text-white rounded-xl' : 'text-black'"
                       class="block py-2 px-4 rounded hover:bg-primary-focus hover:text-white"> <i aria-hidden="true" class="fa fa-file-pen mr-2"></i>Format File Master</a>
                </li>
            </div>
        </ul>
    </div>

    <div class="rounded-2xl p-3 bg-white w-full mb-2 bottom-0">
        <div 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 mr-2" 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>
        </div>
    </div>
</div>
