@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide

<!-- Desktop Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-4">
        <!-- Top Header with Logo -->
        <div class="flex items-center justify-between py-4">
            <a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
                <img src="@Url.Content("~/logo-dlh.png")" class="h-10" alt="DLH Logo" />
                <div>
                    <span class="text-lg font-bold text-gray-900 leading-tight">DINAS LINGKUNGAN HIDUP</span>
                    <span class="block text-sm text-orange-600 font-medium">PROVINSI DKI JAKARTA</span>
                </div>
            </a>
            
            <!-- Desktop Menu -->
            <div class="hidden md:flex md:items-center md:space-x-8">
                <a href="@Url.Action("Index", "Home")" 
                   class="text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                    Beranda
                </a>
                
                <div class="relative group">
                    <button id="dropdown-button-1" 
                            class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                        Program
                        <i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                    </button>
                </div>
                
                <div class="relative group">
                    <button id="dropdown-button-2" 
                            class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                        Profil
                        <i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                    </button>
                </div>
                
                <div class="relative group">
                    <button id="dropdown-button-3" 
                            class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                        Publikasi Data
                        <i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                    </button>
                </div>
                
                <div class="relative group">
                    <button id="dropdown-button-4" 
                            class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                        Layanan
                        <i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                    </button>
                </div>
                
                <div class="relative group">
                    <button id="dropdown-button-5" 
                            class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
                        Seputar DLH
                        <i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Mobile Bottom Navigation -->
<div class="md:hidden fixed bottom-0 left-0 right-0 z-50">
    <!-- Bottom Navigation Bar -->
    <div class="bg-white/95 backdrop-blur-xl border-t border-gray-200 shadow-2xl">
        <div class="flex items-center justify-around py-2">
            <a href="@Url.Action("Index", "Home")" 
               class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
                <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
                    <i class="w-5 h-5" data-lucide="home"></i>
                </div>
                <span class="text-xs font-medium text-gray-600 mt-1">Beranda</span>
            </a>
            
            <button id="mobile-program-btn" 
                    class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
                <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
                    <i class="w-5 h-5" data-lucide="briefcase"></i>
                </div>
                <span class="text-xs font-medium text-gray-600 mt-1">Program</span>
            </button>
            
            <button id="mobile-profil-btn" 
                    class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
                <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
                    <i class="w-5 h-5" data-lucide="building-2"></i>
                </div>
                <span class="text-xs font-medium text-gray-600 mt-1">Profil</span>
            </button>
            
            <button id="mobile-layanan-btn" 
                    class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
                <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
                    <i class="w-5 h-5" data-lucide="headphones"></i>
                </div>
                <span class="text-xs font-medium text-gray-600 mt-1">Layanan</span>
            </button>
            
            <button id="mobile-menu-btn" 
                    class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
                <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
                    <i class="w-5 h-5" data-lucide="menu"></i>
                </div>
                <span class="text-xs font-medium text-gray-600 mt-1">Lainnya</span>
            </button>
        </div>
    </div>
</div>

<!-- Mobile Modal Overlay -->
<div id="mobile-modal-overlay" class="md:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden transition-all duration-300 opacity-0"></div>

<!-- Mobile Menu Modal -->
<div id="mobile-menu-modal" class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl rounded-t-3xl shadow-2xl transform translate-y-full transition-all duration-300 ease-out z-50 max-h-[80vh] overflow-hidden">
    <div class="flex flex-col h-full">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-6 border-b border-gray-200/50">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg">
                    <i class="w-6 h-6 text-white" data-lucide="menu"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Menu</h3>
                    <p class="text-sm text-orange-600">Pilih menu navigasi</p>
                </div>
            </div>
            <button id="mobile-modal-close" class="p-2 rounded-xl hover:bg-gray-100 transition-all duration-200 active:scale-95">
                <i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
            </button>
        </div>

        <!-- Modal Content -->
        <div id="mobile-modal-content" class="flex-1 overflow-y-auto p-6">
            <!-- Content will be dynamically loaded here -->
        </div>
    </div>
</div>

<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />

<style>
.mobile-nav-item:active {
    transform: scale(0.95);
}

.mobile-nav-item:hover .w-8 {
    transform: scale(1.1);
}

/* Fixed positioning for mega menus */
[id^="mega-menu-"] {
    position: fixed !important;
    top: 74px !important; /* Adjust based on your navbar height */
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
}

/* Ensure navbar stays above mega menu */
nav {
    z-index: 50 !important;
}


/* Safe area for devices with home indicator */
@@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .md\\:hidden.fixed.bottom-0 {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile modal elements
    const mobileModalOverlay = document.getElementById('mobile-modal-overlay');
    const mobileMenuModal = document.getElementById('mobile-menu-modal');
    const mobileModalClose = document.getElementById('mobile-modal-close');
    const mobileModalContent = document.getElementById('mobile-modal-content');
    
    // Mobile navigation buttons
    const mobileProgramBtn = document.getElementById('mobile-program-btn');
    const mobileProfilBtn = document.getElementById('mobile-profil-btn');
    const mobileLayananBtn = document.getElementById('mobile-layanan-btn');
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    
    function showMobileModal(content, title) {
        mobileModalContent.innerHTML = content;
        mobileMenuModal.querySelector('h3').textContent = title;
        
        mobileModalOverlay.classList.remove('hidden');
        setTimeout(() => {
            mobileModalOverlay.classList.remove('opacity-0');
            mobileMenuModal.classList.remove('translate-y-full');
        }, 10);
        
        document.body.style.overflow = 'hidden';
    }
    
    function hideMobileModal() {
        mobileModalOverlay.classList.add('opacity-0');
        mobileMenuModal.classList.add('translate-y-full');
        
        setTimeout(() => {
            mobileModalOverlay.classList.add('hidden');
        }, 300);
        
        document.body.style.overflow = '';
    }
    
    // Event listeners for mobile buttons
    mobileProgramBtn.addEventListener('click', () => {
        showMobileModal(window.programMobileContent || "", 'Program');
        lucide.createIcons();
    });
    
    mobileProfilBtn.addEventListener('click', () => {
        showMobileModal(window.profilMobileContent || "", 'Profil');
        lucide.createIcons();
    });
    
    mobileLayananBtn.addEventListener('click', () => {
        showMobileModal(window.layananMobileContent || "", 'Layanan');
        lucide.createIcons();
    });
    
    mobileMenuBtn.addEventListener('click', () => {
        // Get publikasi data and seputar content from their respective mega menu files
        const publikasiDataContent = window.publikasiDataMobileContent || "";
        const seputarContent = window.seputarMobileContent || "";
        
        const allMenuContent = `
            <div class="space-y-4">
                <!-- Publikasi Data Section -->
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('publikasi-submenu')">
                        <div class="flex items-center gap-3">
                            <i class="w-6 h-6 text-orange-600" data-lucide="database"></i>
                            <div class="text-left">
                                <span class="font-medium text-gray-900">Publikasi Data</span>
                                <p class="text-sm text-orange-600">Data dan informasi lingkungan hidup</p>
                            </div>
                        </div>
                        <i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="publikasi-chevron"></i>
                    </button>
                    <div id="publikasi-submenu" class="hidden bg-white overflow-y-auto max-h-64">
                        ${publikasiDataContent}
                    </div>
                </div>

                <!-- Seputar DLH Section -->
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('seputar-submenu')">
                        <div class="flex items-center gap-3">
                            <i class="w-6 h-6 text-orange-600" data-lucide="info"></i>
                            <div class="text-left">
                                <span class="font-medium text-gray-900">Seputar DLH</span>
                                <p class="text-sm text-orange-600">Informasi dan kegiatan DLH</p>
                            </div>
                        </div>
                        <i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="seputar-chevron"></i>
                    </button>
                    <div id="seputar-submenu" class="hidden bg-white">
                        ${seputarContent}
                    </div>
                </div>
            </div>
        `;
        showMobileModal(allMenuContent, 'Menu Lainnya');
        lucide.createIcons();
    });
    
    // Add global function for toggling submenus
    window.toggleSubmenu = function(submenuId) {
        const submenu = document.getElementById(submenuId);
        const chevron = document.getElementById(submenuId.replace('-submenu', '-chevron'));
        
        if (submenu.classList.contains('hidden')) {
            submenu.classList.remove('hidden');
            submenu.style.maxHeight = submenu.scrollHeight + 'px';
            chevron.style.transform = 'rotate(180deg)';
        } else {
            submenu.style.maxHeight = '0px';
            chevron.style.transform = 'rotate(0deg)';
            setTimeout(() => {
                submenu.classList.add('hidden');
            }, 300);
        }
    };
    
    // Close modal events
    mobileModalClose.addEventListener('click', hideMobileModal);
    mobileModalOverlay.addEventListener('click', hideMobileModal);
    
    // Desktop dropdown functionality
    const dropdownButtons = document.querySelectorAll('[id^="dropdown-button-"]');
    const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');
    
    dropdownButtons.forEach((button, index) => {
        const megaMenu = document.getElementById(`mega-menu-${index + 1}`);
        
        if (megaMenu) {
            button.addEventListener('mouseenter', () => {
                megaMenus.forEach(menu => menu.classList.add('hidden'));
                megaMenu.classList.remove('hidden');
                 // Calculate and set proper positioning
                const navbar = document.querySelector('nav');
                const navbarHeight = navbar ? navbar.offsetHeight : 74;
                megaMenu.style.top = `${navbarHeight}px`;
            });
            
            button.addEventListener('mouseleave', () => {
                setTimeout(() => {
                    if (!megaMenu.matches(':hover') && !button.matches(':hover')) {
                        megaMenu.classList.add('hidden');
                    }
                }, 100);
            });
            
            megaMenu.addEventListener('mouseleave', () => {
                megaMenu.classList.add('hidden');
            });
        }
    });
});
</script>