<nav id="navbar" class="bg-transparent border-gray-200 dark:bg-gray-900 dark:border-gray-700">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <!-- Logo -->
        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
            <img src="{{ asset('./images/logo/logo2.png') }}" class="h-8" alt="Flowbite Logo" style="width:150px; height:auto;" />
        </a>

        <!-- Mobile Menu Button -->
        <button data-collapse-toggle="navbar-dropdown" type="button"
            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
            aria-controls="navbar-dropdown" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 17 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M1 1h15M1 7h15M1 13h15" />
            </svg>
        </button>

        <!-- Navbar Menu -->
        <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
            <ul
                class="flex flex-col font-medium p-4 md:p-0 mt-4 border md:space-x-5 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 bg-[#0D1444] md:bg-transparent">
                <!-- Looping Main Menus -->
                @foreach ($mainMenus as $menu)
                    @php
                        // URL for the current menu item
                        $url = is_numeric($menu->url) ? url('page/' . $menu->url) : url($menu->url);
                        // Check if the current URL matches the menu URL
                        $isActive = Request::is(trim(parse_url($url, PHP_URL_PATH), '/')) || url()->current() == $url;
                        $subItems = $subMenus->where('submenu_id', $menu->menu_id);
                    @endphp
                    <li class="relative">
                        @if ($subItems->isNotEmpty())
                            <!-- Dropdown Button -->
                            <button id="dropdownNavbarLink-{{ $menu->menu_id }}"
                                data-dropdown-toggle="dropdownNavbar-{{ $menu->menu_id }}"
                                class="flex font-poppins items-center justify-between w-full py-2 px-2 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-yellow-400 md:p-0 md:w-auto dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {{ $isActive ? 'text-yellow-400' : 'text-white' }}">
                                {{ $menu->menu }}
                                <svg class="w-2.5 h-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>

                            <!-- Dropdown Menu -->
                            <div id="dropdownNavbar-{{ $menu->menu_id }}"
                                class="z-10 hidden font-normal bg- divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-[#0D1444] dark:divide-gray-600" 
                                style="background-color:rgb(10, 38, 130)">
                                <ul class="py-2 text-sm text-gray-700 dark:text-gray-400">
                                    @foreach ($subItems as $submenu)
                                        @php
                                            $subUrl = is_numeric($submenu->url)
                                                ? url('page/' . $submenu->url)
                                                : url($submenu->url);
                                            $isSubActive =
                                                Request::is(trim(parse_url($subUrl, PHP_URL_PATH), '/')) ||
                                                url()->current() == $subUrl;
                                        @endphp
                                        <li>
                                            <a href="{{ $subUrl }}" style="color:#fff"  
                                                class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-accent dark:hover:text- font-poppins {{ $isSubActive ? 'bg-accent text-' : '' }}">
                                                {{ $submenu->menu }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @else
                            <!-- Menu Without Dropdown -->
                            <a href="{{ $url }}" 
                                class="block font-poppins py-2 px-2 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:p-0 hover:text-yellow-400 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {{ $isActive ? 'text-yellow-400' : 'text-white' }}"> 
                                {{ $menu->menu }}
                            </a>
                        @endif
                    </li>
                @endforeach

                <!-- Contact Us Button -->
                <li>
                    <a href="/kontak-form" style="color:#fff"
                        class="bg-yellow-400 hover:bg-accent font-bold py-2 px-4 rounded-full text-center font-poppins ml-2">
                        <i class="fas fa-user"></i> Contact Us
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- CSS untuk tampilan mobile SUPER RAPI & MODERN -->
<style>
    @media (max-width: 767px) {
        /* Container menu mobile */
        #navbar-dropdown {
            background: linear-gradient(135deg, #1f79e0 0%, #1f79e0 100%);
            border-radius: 16px;
            margin-top: 16px;
            padding: 4px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* List container */
        #navbar-dropdown ul {
            gap: 6px;
            padding: 8px;
            border: none !important;
        }
        
        /* Setiap item menu */
        #navbar-dropdown ul li {
            width: 100%;
            margin: 0;
        }
        
        /* Styling link dan button mobile */
        #navbar-dropdown ul li a,
        #navbar-dropdown ul li button {
            padding: 14px 18px;
            border-radius: 12px;
            transition: all 0.25s ease;
            width: 100%;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.3px;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
        }
        
        /* Hover & active state */
        #navbar-dropdown ul li a:active,
        #navbar-dropdown ul li button:active {
            background: rgba(74, 222, 128, 0.15);
            transform: scale(0.98);
        }
        
        #navbar-dropdown ul li a:hover,
        #navbar-dropdown ul li button:hover {
            background: rgba(74, 222, 128, 0.1);
            padding-left: 24px;
        }
        
        /* Icon dropdown */
        #navbar-dropdown button svg {
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0.7;
        }
        
        #navbar-dropdown button[aria-expanded="true"] svg {
            transform: rotate(180deg);
            opacity: 1;
        }
        
        /* Dropdown menu mobile */
        #navbar-dropdown [id^="dropdownNavbar-"] {
            position: relative !important;
            width: 100% !important;
            margin-top: 8px !important;
            margin-bottom: 4px !important;
            transform: none !important;
            left: 0 !important;
            background: rgba(10, 38, 130, 0.98) !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        /* Submenu items */
        #navbar-dropdown [id^="dropdownNavbar-"] ul {
            padding: 4px !important;
            gap: 2px;
        }
        
        #navbar-dropdown [id^="dropdownNavbar-"] ul li a {
            padding: 12px 16px 12px 36px;
            font-size: 14px;
            font-weight: 400;
            background: transparent;
        }
        
        #navbar-dropdown [id^="dropdownNavbar-"] ul li a:active {
            background: rgba(74, 222, 128, 0.12);
        }
        
        #navbar-dropdown [id^="dropdownNavbar-"] ul li a:hover {
            padding-left: 42px;
            background: rgba(74, 222, 128, 0.08);
        }
        
        /* Contact Us button mobile */
        #navbar-dropdown ul li:last-child {
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        #navbar-dropdown ul li:last-child a {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #0D1444;
            text-align: center;
            font-weight: 700;
            padding: 14px 18px;
            border-radius: 40px;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
        }
        
        #navbar-dropdown ul li:last-child a:active {
            transform: scale(0.97);
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        
        #navbar-dropdown ul li:last-child a:hover {
            padding-left: 18px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        
        /* Animasi fade in untuk menu */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #navbar-dropdown:not(.hidden) {
            animation: fadeInUp 0.3s ease-out;
        }
        
        /* Smooth transition untuk dropdown */
        #navbar-dropdown [id^="dropdownNavbar-"] {
            transition: all 0.2s ease;
        }
        
        /* Scroll jika menu terlalu panjang */
        #navbar-dropdown {
            max-height: 80vh;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        
        #navbar-dropdown::-webkit-scrollbar {
            width: 4px;
        }
        
        #navbar-dropdown::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }
        
        #navbar-dropdown::-webkit-scrollbar-thumb {
            background: rgba(74, 222, 128, 0.3);
            border-radius: 10px;
        }
        
        /* Active menu highlight */
        #navbar-dropdown ul li a.text-yellow-400,
        #navbar-dropdown ul li button.text-yellow-400 {
            background: rgba(74, 222, 128, 0.12);
            border-left: 3px solid #4ade80;
        }
        
        /* Badge indicator untuk menu dengan submenu */
        #navbar-dropdown button[data-dropdown-toggle]::after {
            display: none;
        }
    }
</style>

<!-- JavaScript untuk handling dropdown mobile yang smooth -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        function initMobileDropdown() {
            if (window.innerWidth <= 767) {
                const dropdownButtons = document.querySelectorAll('#navbar-dropdown button[data-dropdown-toggle]');
                
                dropdownButtons.forEach(button => {
                    // Remove existing listener
                    const oldHandler = button.clickHandler;
                    if (oldHandler) {
                        button.removeEventListener('click', oldHandler);
                    }
                    
                    // Create new handler
                    const handler = function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        const dropdownId = this.getAttribute('data-dropdown-toggle');
                        const dropdown = document.getElementById(dropdownId);
                        
                        if (!dropdown) return;
                        
                        // Toggle current dropdown with smooth transition
                        if (dropdown.classList.contains('hidden')) {
                            // Close all other dropdowns first
                            dropdownButtons.forEach(otherButton => {
                                if (otherButton !== this) {
                                    const otherDropdownId = otherButton.getAttribute('data-dropdown-toggle');
                                    const otherDropdown = document.getElementById(otherDropdownId);
                                    if (otherDropdown && !otherDropdown.classList.contains('hidden')) {
                                        otherDropdown.classList.add('hidden');
                                        otherButton.setAttribute('aria-expanded', 'false');
                                    }
                                }
                            });
                            
                            // Open current dropdown
                            dropdown.classList.remove('hidden');
                            this.setAttribute('aria-expanded', 'true');
                            
                            // Scroll ke dropdown jika perlu
                            setTimeout(() => {
                                dropdown.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                            }, 100);
                        } else {
                            dropdown.classList.add('hidden');
                            this.setAttribute('aria-expanded', 'false');
                        }
                    };
                    
                    button.addEventListener('click', handler);
                    button.clickHandler = handler;
                });
            }
        }
        
        // Initialize
        initMobileDropdown();
        
        // Re-initialize on resize
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(initMobileDropdown, 250);
        });
    });
</script>