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

<nav class="bg-white shadow-sm relative z-50">
    <div class="flex flex-wrap justify-between items-center mx-auto max-w-6xl px-4 py-3 lg: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>

        <!-- Mobile menu button -->
        <button id="mobile-drawer-button" type="button"
            class="inline-flex items-center p-2 ml-3 text-gray-700 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-400 transition-colors duration-200"
            aria-controls="mobile-drawer" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <i id="menu-icon" class="w-6 h-6 transition-transform duration-300" data-lucide="menu"></i>
        </button>

        <!-- Desktop Menu -->
        <div class="hidden md:flex md:items-center md:w-auto">
            <ul class="flex flex-col md:flex-row md:space-x-6 font-medium">
            <li class="relative group">
                <a href="@Url.Action("Index", "Home")" class="flex items-center py-2 text-gray-900 hover:text-orange-600">
                Beranda
                </a>
            </li>

            @* Dropdown Menu Buttons *@
            @{
                var menus = new[] { "Program", "Profil", "Publikasi Data", "Layanan", "Seputar DLH" };
            }

            @for (int i = 0; i < menus.Length; i++)
            {
                <li class="relative group">
                <button id="dropdown-button-@(i + 1)"
                    class="flex items-center justify-between py-2 text-gray-900 hover:text-orange-600 group">
                    <span>@menus[i]</span>
                    <i class="w-5 h-5 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
                </button>
                </li>
            }
            </ul>
        </div>
    </div>

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

    <!-- Mobile Drawer -->
    <div id="mobile-drawer" class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 md:hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <div class="flex items-center space-x-2">
                    <img src="@Url.Content("~/logo-dlh.png")" class="h-8" alt="DLH Logo" />
                    <span class="text-lg font-bold text-gray-900">DLH Jakarta</span>
                </div>
                <button id="mobile-drawer-close" class="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                    <i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
                </button>
            </div>

            <!-- Menu Content -->
            <div class="flex-1 overflow-y-auto">
                <div class="p-4 space-y-2">
                    <!-- Beranda -->
                    <a href="@Url.Action("Index", "Home")" class="flex items-center gap-3 p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200">
                        <i class="w-5 h-5" data-lucide="home"></i>
                        <span class="font-medium">Beranda</span>
                    </a>

                    @* Mobile Menu Items *@
                    @{
                        var mobileMenus = new[] { 
                            new { Name = "Program", Icon = "briefcase" },
                            new { Name = "Profil", Icon = "building" },
                            new { Name = "Publikasi Data", Icon = "database" },
                            new { Name = "Layanan", Icon = "star" },
                            new { Name = "Seputar DLH", Icon = "info" }
                        };
                    }

                    @for (int i = 0; i < mobileMenus.Length; i++)
                    {
                        <div class="mobile-menu-item">
                            <button class="mobile-dropdown-toggle flex items-center justify-between w-full p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200" data-target="mobile-submenu-@(i + 1)">
                                <div class="flex items-center gap-3">
                                    <i class="w-5 h-5" data-lucide="@mobileMenus[i].Icon"></i>
                                    <span class="font-medium">@mobileMenus[i].Name</span>
                                </div>
                                <i class="w-5 h-5 transition-transform duration-200" data-lucide="chevron-down"></i>
                            </button>
                            <div id="mobile-submenu-@(i + 1)" class="hidden pl-8 pb-2 space-y-1">
                                @if (i == 0) // Program
                                {
                                    <a href="@Url.Action("Udara", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Udara</a>
                                    <a href="@Url.Action("Air", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Air</a>
                                    <a href="@Url.Action("Sampah", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Sampah</a>
                                    <a href="@Url.Action("LKIP", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">LKIP</a>
                                    <a href="@Url.Action("Pengawasan", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Pengawasan</a>
                                    <a href="@Url.Action("PerjanjianKinerja", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Perjanjian Kinerja</a>
                                    <a href="@Url.Action("RencanaStrategis", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Rencana Strategis</a>
                                    <a href="@Url.Action("Anggaran", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Anggaran</a>
                                }
                                else if (i == 1) // Profil
                                {
                                    <a href="@Url.Action("Organisasi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Struktur Organisasi</a>
                                    <a href="@Url.Action("Bidang", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bidang & UPT</a>
                                    <a href="@Url.Action("Tupoksi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Tupoksi</a>
                                }
                                else if (i == 2) // Publikasi Data
                                {
                                    <a href="@Url.Action("DIKPLHD", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">DIKPLH</a>
                                    <a href="@Url.Action("Peraturan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Peraturan</a>
                                    <a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Kualitas Air</a>
                                    <a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Keuangan</a>
                                    <a href="@Url.Action("Kajian", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kajian</a>
                                    <a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Keanekaragaman Hayati</a>
                                }
                                else if (i == 3) // Layanan
                                {
                                    <a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">AMDAL</a>
                                    <a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">PPID</a>
                                    <a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bulky Waste</a>
                                }
                                else if (i == 4) // Seputar DLH
                                {
                                    <a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Berita</a>
                                    <a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kontak Kami</a>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>

            <!-- Footer -->
            <div class="p-4 border-t border-gray-200">
                <div class="text-center text-sm text-gray-500">
                    <p>&copy; @DateTime.Now.Year DLH DKI Jakarta</p>
                </div>
            </div>
        </div>
    </div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileButton = document.getElementById('mobile-drawer-button');
    const mobileDrawer = document.getElementById('mobile-drawer');
    const mobileOverlay = document.getElementById('mobile-overlay');
    const mobileClose = document.getElementById('mobile-drawer-close');
    const menuIcon = document.getElementById('menu-icon');
    
    function openDrawer() {
        mobileDrawer.classList.remove('translate-x-full');
        mobileOverlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        menuIcon.setAttribute('data-lucide', 'x');
        lucide.createIcons();
    }
    
    function closeDrawer() {
        mobileDrawer.classList.add('translate-x-full');
        mobileOverlay.classList.add('hidden');
        document.body.style.overflow = '';
        menuIcon.setAttribute('data-lucide', 'menu');
        lucide.createIcons();
    }
    
    mobileButton.addEventListener('click', function() {
        if (mobileDrawer.classList.contains('translate-x-full')) {
            openDrawer();
        } else {
            closeDrawer();
        }
    });
    
    mobileClose.addEventListener('click', closeDrawer);
    mobileOverlay.addEventListener('click', closeDrawer);
    
    // Mobile dropdown toggles
    document.querySelectorAll('.mobile-dropdown-toggle').forEach(toggle => {
        toggle.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const submenu = document.getElementById(targetId);
            const chevron = this.querySelector('[data-lucide="chevron-down"]');
            
            if (submenu.classList.contains('hidden')) {
                submenu.classList.remove('hidden');
                chevron.style.transform = 'rotate(180deg)';
            } else {
                submenu.classList.add('hidden');
                chevron.style.transform = 'rotate(0deg)';
            }
        });
    });
});
</script>