<div class="w-full  bg-primary text-white py-4 shadow-lg">
    <div class="container mx-auto flex items-center justify-between md:gap-6">
        <a href="/">
            <img src="{{ asset('images/logo.jpg') }}" alt="{{ config('app.name') }}" class="logo-size mx-3">
        </a>

        <button class="md:hidden bg-secondary p-2 text-white focus:outline-none" id="mobile-nav-toggle">
            <i class="fas fa-bars text-2xl"></i>
        </button>

        <nav
            class="hidden md:flex flex-col md:flex-row w-full md:w-auto md:space-x-6 absolute md:static top-16 left-0 z-50 transition-all"
            id="mobile-nav"
        >
            @foreach(config('routes.web') as $route)
            <a
                class="block md:flex text-lg text-center py-2 md:py-0 px-4 md:px-0 text-white btn btn-secondary @if(Route::currentRouteName() === $route['name']) disabled @endif"
                href="{{ $route['path'] }}"
            >
                {{ $route['name'] }}
                @if(isset($route['icon']))
                    <i class="ml-2 {{ $route['icon'] }}"></i>
                @endif
            </a>
            @endforeach
        </nav>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const toggleButton = document.getElementById("mobile-nav-toggle");
        const mobileNav = document.getElementById("mobile-nav");

        if (toggleButton && mobileNav) {
            toggleButton.addEventListener("click", () => {
                const isHidden = mobileNav.classList.contains("hidden");
                mobileNav.classList.toggle("hidden", !isHidden);
                mobileNav.classList.toggle("flex", isHidden);
                mobileNav.classList.toggle("flex-col", isHidden);
                mobileNav.classList.toggle("space-y-4", isHidden);
            });
        }
    });
</script>
