@php
    $isVaopeTheme = env('APP_THEME') == 'vaope';
    $logo = $isVaopeTheme
        ? env('VITE_CDN_URL') . '/assets' . '/brand/' . env('APP_THEME') . '/logo.svg'
        : 'https://static.vaope.com/public/repository/5824-tuentrada.png';
    $logoAlt = $isVaopeTheme ? 'Logo Vaope' : 'Logo TuEntrada';
@endphp

<header @class([
    'bg-secondary-blue-200 relative' => env('APP_THEME') == 'vaope',
    'bg-gradient-to-r from-primary-200 to-primary-600' =>
        env('APP_THEME') != 'vaope',
])>
    <div class="container flex items-center h-17 gap-x-11">
        <div class="flex items-center gap-x-1.5 shrink-0">
            <button type="button" id="menu-toggle" data-open="false"
                class="md:hidden shrink-0 size-8 inline-flex text-neutral-50 items-center justify-center data-[open=true]:[&>.menu]:hidden data-[open=true]:[&>.close]:block data-[open=false]:[&>.menu]:block data-[open=false]:[&>.close]:hidden">
                <span class="sr-only">Abrir menú</span>
                <svg class="size-6 menu">
                    <use xlink:href="{{ asset('/assets/sprite.svg#menu') }}" />
                </svg>
                <svg class="size-6 close">
                    <use xlink:href="{{ asset('/assets/sprite.svg#close') }}" />
                </svg>
            </button>
            <a href="/" class="shrink-0 py-2 focus-within:outline-0 focus:outline-0">
                <img src="{{ $logo }}" class="w-auto h-4" decoding="async" fetchpriority="high"
                    alt="{{ $logoAlt }}">
            </a>
        </div>
        <nav class="max-md:hidden flex items-center">
            <a href="/crear-evento" class="text-body text-neutral-50 p-3">Publica tu evento</a>
            <a href="/centro-ayuda" class="text-body text-neutral-50 p-3">Centro de ayuda</a>
        </nav>
        <user-menu></user-menu>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
            @csrf
        </form>
    </div>
    <div role="listbox" id="mobile-menu"
        class="absolute p-4 inset-x-0 top-full bg-white shadow-md md:hidden hidden z-[1000]">
        <ul class="flex flex-col gap-y-4 text-xs">
            <li><a href="{{ route('crear-evento') }}" class="text-neutral-300 text-base">Publica tu evento</a></li>
            <li><a href="{{ route('centro-ayuda') }}" class="text-neutral-300 text-base">Centro de ayuda</a></li>
        </ul>
    </div>
</header>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        const userDropdownToggle = document.getElementById('user-dropdown-toggle');
        const userDropdown = document.getElementById('user-dropdown');

        // Toggle mobile menu
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            const isOpen = this.getAttribute('data-open') === 'true';
            this.setAttribute('data-open', !isOpen);
        });

        // Toggle user dropdown
        if (userDropdownToggle && userDropdown) {
            userDropdownToggle.addEventListener('click', function() {
                userDropdown.classList.toggle('hidden');
                const isOpen = userDropdownToggle.getAttribute('data-open') === 'true';
                menuToggle.setAttribute('data-open', !isOpen);
            });
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            if (userDropdown && userDropdownToggle) {
                if (!userDropdown.contains(event.target) && !userDropdownToggle.contains(event
                        .target)) {
                    userDropdown.classList.add('hidden');
                    menuToggle.setAttribute('data-open', false);
                }
            }
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', function(event) {
            if (!mobileMenu.contains(event.target) && !menuToggle.contains(event.target)) {
                mobileMenu.classList.add('hidden');
                menuToggle.setAttribute('data-open', false);
            }
        });
    });
</script>