@php
    $navItems = [
        [
            'label' => 'Dashboard',
            'route' => 'dashboard',
            'active' => request()->routeIs('dashboard'),
            'href' => route('dashboard'),
            'icon' => 'dashboard',
        ],
        [
            'label' => 'Products',
            'route' => 'admin.products.index',
            'active' => request()->routeIs('admin.products.*'),
            'href' => route('admin.products.index'),
            'icon' => 'products',
        ],
        [
            'label' => 'Collections',
            'route' => 'admin.collections.index',
            'active' => request()->routeIs('admin.collections.*'),
            'href' => route('admin.collections.index'),
            'icon' => 'collections',
        ],
        [
            'label' => 'Sliders',
            'route' => 'admin.sliders.index',
            'active' => request()->routeIs('admin.sliders.*'),
            'href' => route('admin.sliders.index'),
            'icon' => 'sliders',
        ],
        [
            'label' => 'Enquiries',
            'route' => 'admin.enquiries.index',
            'active' => request()->routeIs('admin.enquiries.*'),
            'href' => route('admin.enquiries.index'),
            'icon' => 'enquiries',
        ],
        [
            'label' => 'Testimonials',
            'route' => 'admin.testimonials.index',
            'active' => request()->routeIs('admin.testimonials.*'),
            'href' => route('admin.testimonials.index'),
            'icon' => 'testimonials',
        ],
        [
            'label' => 'Settings',
            'route' => 'admin.settings.show',
            'active' => request()->routeIs('admin.settings.*'),
            'href' => route('admin.settings.show'),
            'icon' => 'settings',
        ],
    ];
@endphp

<aside
    x-data="{ expanded: false }"
    @mouseenter="expanded = true"
    @mouseleave="expanded = false"
    :class="expanded ? 'w-60' : 'w-16'"
    class="fixed inset-y-0 left-0 z-40 flex flex-col bg-[#1A1A1A] text-white shadow-xl transition-all duration-300 ease-in-out overflow-hidden"
>
    <div class="flex h-16 shrink-0 items-center border-b border-white/10 px-4">
        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 min-w-0" title="CERAVEL">
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-[#C5181E] text-sm font-bold tracking-wide">
                C
            </span>
            <img
                x-show="expanded"
                x-cloak
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                src="{{ asset('images/brand/logo-white-trim.png') }}"
                alt="CERAVEL"
                class="h-8 w-auto max-w-[10.5rem]"
            >
        </a>
    </div>

    <nav class="flex-1 overflow-y-auto overflow-x-hidden py-5 space-y-2.5 px-2.5">
        @foreach ($navItems as $item)
            <a
                href="{{ $item['href'] }}"
                title="{{ $item['label'] }}"
                class="group flex items-center gap-3 rounded-md px-3 py-3 text-sm transition-colors {{ $item['active'] ? 'bg-[#C5181E] text-white' : 'text-white/70 hover:bg-white/10 hover:text-white' }}"
            >
                <span class="flex h-5 w-5 shrink-0 items-center justify-center">
                    @include('layouts.partials.sidebar-icon', ['name' => $item['icon']])
                </span>
                <span
                    x-show="expanded"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    class="truncate whitespace-nowrap"
                >{{ $item['label'] }}</span>
            </a>
        @endforeach
    </nav>

    <div class="border-t border-white/10 p-2.5 space-y-2.5">
        <a
            href="{{ route('profile.show') }}"
            title="Profile"
            class="flex items-center gap-3 rounded-md px-3 py-3 text-sm text-white/70 hover:bg-white/10 hover:text-white transition-colors {{ request()->routeIs('profile.*') ? 'bg-white/10 text-white' : '' }}"
        >
            <span class="flex h-5 w-5 shrink-0 items-center justify-center">
                @include('layouts.partials.sidebar-icon', ['name' => 'profile'])
            </span>
            <span
                x-show="expanded"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                class="truncate whitespace-nowrap"
            >{{ Auth::user()->name }}</span>
        </a>

        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button
                type="submit"
                title="Log Out"
                class="flex w-full items-center gap-3 rounded-md px-3 py-3 text-sm text-white/70 hover:bg-[#C5181E] hover:text-white transition-colors"
            >
                <span class="flex h-5 w-5 shrink-0 items-center justify-center">
                    @include('layouts.partials.sidebar-icon', ['name' => 'logout'])
                </span>
                <span
                    x-show="expanded"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    class="truncate whitespace-nowrap"
                >Log Out</span>
            </button>
        </form>
    </div>
</aside>