@props(['title' => null, 'subtitle' => null, 'sticky' => true, 'showTitle' => true])

@php
    $isAdmin = auth()->user()?->isAdmin() ?? false;
    $onClients = request()->routeIs('admin.dashboard', 'admin.clients.*');
    $onProducts = request()->routeIs('admin.products.*');
    $onAdmins = request()->routeIs('admin.admins.*');
    $onSettings = request()->routeIs('admin.settings.*');
@endphp

<header @class([
    'border-b border-neutral-200 bg-white',
    'sticky top-0 z-40 shadow-sm' => $sticky,
])>
    <div class="mx-auto flex max-w-[min(100%,92rem)] items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:gap-4">
        <div class="flex min-w-0 items-center gap-3">
            @if ($isAdmin)
                <button
                    type="button"
                    id="oah-nav-toggle"
                    class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-neutral-200 text-oah-black transition hover:border-oah-black hover:bg-neutral-50 lg:hidden"
                    aria-controls="oah-nav-sidebar"
                    aria-expanded="false"
                    aria-label="Open menu"
                >
                    <svg class="h-5 w-5" id="oah-nav-icon-open" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/>
                    </svg>
                    <svg class="hidden h-5 w-5" id="oah-nav-icon-close" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
                    </svg>
                </button>
            @endif

            <a href="{{ route('admin.dashboard') }}" class="flex min-w-0 shrink-0 items-center gap-3 transition hover:opacity-90">
                <img
                    src="{{ asset('images/company-logo.svg') }}?v=1"
                    alt="OAH Partnership Programme"
                    width="197"
                    height="96"
                    class="h-11 w-auto max-w-[min(100%,11rem)] object-contain sm:max-w-none sm:h-[60px]"
                    decoding="async"
                >
            </a>
        </div>

        @if ($isAdmin)
            <nav class="hidden items-center rounded-xl border border-neutral-200 bg-neutral-50 p-1 lg:flex" aria-label="Main">
                <a href="{{ route('admin.dashboard') }}"
                    @class([
                        'rounded-lg px-4 py-2 text-sm font-bold transition sm:px-6',
                        'bg-oah-black text-oah-yellow shadow-sm' => $onClients,
                        'text-oah-muted hover:text-oah-black' => ! $onClients,
                    ])>
                    Clients
                </a>
                <a href="{{ route('admin.products.index') }}"
                    @class([
                        'rounded-lg px-4 py-2 text-sm font-bold transition sm:px-6',
                        'bg-oah-black text-oah-yellow shadow-sm' => $onProducts,
                        'text-oah-muted hover:text-oah-black' => ! $onProducts,
                    ])>
                    Products
                </a>
                <a href="{{ route('admin.admins.index') }}"
                    @class([
                        'rounded-lg px-4 py-2 text-sm font-bold transition sm:px-6',
                        'bg-oah-black text-oah-yellow shadow-sm' => $onAdmins,
                        'text-oah-muted hover:text-oah-black' => ! $onAdmins,
                    ])>
                    Admins
                </a>
            </nav>
        @endif

        <div class="relative hidden shrink-0 items-center lg:flex">
            <button
                type="button"
                id="oah-admin-profile-toggle"
                class="inline-flex h-11 w-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-oah-muted transition hover:border-oah-black hover:text-oah-black"
                aria-haspopup="menu"
                aria-expanded="false"
                aria-controls="oah-admin-profile-menu"
                aria-label="Open profile menu"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 21a8 8 0 10-16 0M12 11a4 4 0 100-8 4 4 0 000 8z"/>
                </svg>
            </button>

            <div
                id="oah-admin-profile-menu"
                class="absolute right-0 top-[calc(100%+0.6rem)] z-50 hidden min-w-[12rem] rounded-xl border border-neutral-200 bg-white p-1 shadow-lg"
                role="menu"
                aria-hidden="true"
            >
                <a
                    href="{{ route('admin.settings.edit') }}"
                    @class([
                        'flex w-full items-center rounded-lg px-3 py-2 text-sm font-semibold transition',
                        'bg-neutral-100 text-oah-black' => $onSettings,
                        'text-oah-muted hover:bg-neutral-100 hover:text-oah-black' => ! $onSettings,
                    ])
                    role="menuitem"
                >
                    Settings
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button
                        type="submit"
                        class="mt-1 flex w-full items-center rounded-lg px-3 py-2 text-left text-sm font-semibold text-oah-muted transition hover:bg-neutral-100 hover:text-oah-black"
                        role="menuitem"
                    >
                        Logout
                    </button>
                </form>
            </div>
        </div>
    </div>

    @if ($title && $showTitle)
        <div class="border-t border-neutral-100">
            <div class="mx-auto max-w-[min(100%,92rem)] px-4 py-6 sm:px-6">
                <h1 class="text-xl font-bold">{{ $title }}</h1>
                @if ($subtitle)
                    <p class="mt-1 text-sm text-oah-muted">{{ $subtitle }}</p>
                @endif
            </div>
        </div>
    @endif
</header>

@if ($isAdmin)
    <div
        id="oah-nav-sidebar"
        class="fixed inset-0 z-50 hidden lg:hidden"
        aria-hidden="true"
    >
        <div
            id="oah-nav-backdrop"
            class="absolute inset-0 bg-oah-black/40 opacity-0 transition-opacity duration-300"
            aria-hidden="true"
        ></div>

        <aside
            id="oah-nav-panel"
            class="absolute left-0 top-0 flex h-full w-[min(100%,18rem)] max-w-xs -translate-x-full flex-col border-r border-neutral-200 bg-white shadow-oah-lg transition-transform duration-300 ease-out"
            role="dialog"
            aria-modal="true"
            aria-label="Navigation menu"
        >
            <div class="flex items-center justify-between border-b border-neutral-100 px-4 py-4">
                <span class="text-xs font-bold uppercase tracking-wider text-oah-muted">Menu</span>
                <button
                    type="button"
                    id="oah-nav-close"
                    class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-neutral-200 text-oah-black transition hover:bg-neutral-50"
                    aria-label="Close menu"
                >
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
                    </svg>
                </button>
            </div>

            <nav class="flex flex-1 flex-col gap-2 p-4" aria-label="Mobile">
                <a href="{{ route('admin.dashboard') }}"
                    @class([
                        'rounded-xl px-4 py-3 text-sm font-bold transition',
                        'bg-oah-black text-oah-yellow' => $onClients,
                        'text-oah-black hover:bg-neutral-50' => ! $onClients,
                    ])>
                    Clients
                </a>
                <a href="{{ route('admin.products.index') }}"
                    @class([
                        'rounded-xl px-4 py-3 text-sm font-bold transition',
                        'bg-oah-black text-oah-yellow' => $onProducts,
                        'text-oah-black hover:bg-neutral-50' => ! $onProducts,
                    ])>
                    Products
                </a>
                <a href="{{ route('admin.admins.index') }}"
                    @class([
                        'rounded-xl px-4 py-3 text-sm font-bold transition',
                        'bg-oah-black text-oah-yellow' => $onAdmins,
                        'text-oah-black hover:bg-neutral-50' => ! $onAdmins,
                    ])>
                    Admins
                </a>
            </nav>

            <div class="border-t border-neutral-100 p-4">
                <a
                    href="{{ route('admin.settings.edit') }}"
                    @class([
                        'mb-2 block w-full rounded-xl border px-4 py-3 text-sm font-semibold transition',
                        'border-oah-black bg-oah-black text-oah-yellow' => $onSettings,
                        'border-neutral-200 text-oah-muted hover:border-oah-black hover:text-oah-black' => ! $onSettings,
                    ])
                >
                    Settings
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                        class="w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm font-semibold text-oah-muted transition hover:border-oah-black hover:text-oah-black">
                        Logout
                    </button>
                </form>
            </div>
        </aside>
    </div>

    @once
        @push('scripts')
            <script>
                (function () {
                    const sidebar = document.getElementById('oah-nav-sidebar');
                    const panel = document.getElementById('oah-nav-panel');
                    const backdrop = document.getElementById('oah-nav-backdrop');
                    const toggle = document.getElementById('oah-nav-toggle');
                    const closeBtn = document.getElementById('oah-nav-close');
                    const iconOpen = document.getElementById('oah-nav-icon-open');
                    const iconClose = document.getElementById('oah-nav-icon-close');
                    const profileToggle = document.getElementById('oah-admin-profile-toggle');
                    const profileMenu = document.getElementById('oah-admin-profile-menu');

                    if (!sidebar || !panel || !toggle) {
                        return;
                    }

                    let isOpen = false;

                    function setOpen(open) {
                        isOpen = open;
                        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
                        toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
                        sidebar.classList.toggle('hidden', !open);
                        sidebar.setAttribute('aria-hidden', open ? 'false' : 'true');
                        document.body.classList.toggle('overflow-hidden', open);

                        if (open) {
                            backdrop.classList.remove('opacity-0');
                            panel.classList.remove('-translate-x-full');
                            iconOpen?.classList.add('hidden');
                            iconClose?.classList.remove('hidden');
                        } else {
                            backdrop.classList.add('opacity-0');
                            panel.classList.add('-translate-x-full');
                            iconOpen?.classList.remove('hidden');
                            iconClose?.classList.add('hidden');
                        }
                    }

                    toggle.addEventListener('click', function () {
                        setOpen(!isOpen);
                    });

                    closeBtn?.addEventListener('click', function () {
                        setOpen(false);
                    });

                    backdrop?.addEventListener('click', function () {
                        setOpen(false);
                    });

                    sidebar.querySelectorAll('nav a').forEach(function (link) {
                        link.addEventListener('click', function () {
                            setOpen(false);
                        });
                    });

                    document.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape' && isOpen) {
                            setOpen(false);
                        }
                    });

                    window.addEventListener('resize', function () {
                        if (window.matchMedia('(min-width: 1024px)').matches && isOpen) {
                            setOpen(false);
                        }
                    });

                    if (profileToggle && profileMenu) {
                        function setProfileMenuOpen(open) {
                            profileMenu.classList.toggle('hidden', !open);
                            profileMenu.setAttribute('aria-hidden', open ? 'false' : 'true');
                            profileToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
                        }

                        profileToggle.addEventListener('click', function (event) {
                            event.stopPropagation();
                            const willOpen = profileMenu.classList.contains('hidden');
                            setProfileMenuOpen(willOpen);
                        });

                        document.addEventListener('click', function (event) {
                            if (!profileMenu.contains(event.target) && !profileToggle.contains(event.target)) {
                                setProfileMenuOpen(false);
                            }
                        });

                        document.addEventListener('keydown', function (event) {
                            if (event.key === 'Escape') {
                                setProfileMenuOpen(false);
                            }
                        });
                    }
                })();
            </script>
        @endpush
    @endonce
@endif