@php
    $agentsGroupActive = request()->routeIs('admin.addresses.*', 'admin.yatayats.*', 'admin.routes.*', 'admin.agents.*');
    $faqGroupActive = request()->routeIs('admin.faq-categories.*', 'admin.faqs.*');
    $contentGroupActive = request()->routeIs('admin.statistics.*', 'admin.partners.*');

    // Clicking a group toggle while the sidebar is icon-collapsed also expands
    // it back to full width — otherwise the submenu it just opened would be
    // hidden by the collapsed-state CSS with no way to see it.
    $expandOnOpen = "if (document.documentElement.classList.contains('sidebar-collapsed')) {"
        . " document.documentElement.classList.remove('sidebar-collapsed');"
        . " localStorage.setItem('admin-sidebar-collapsed', '0'); }";
@endphp

<aside class="admin-sidebar flex flex-col border-r border-slate-100 bg-white" :class="{ 'sidebar-open': sidebarOpen }">
    <div class="flex h-16 shrink-0 items-center justify-center border-b border-slate-100 px-5">
        <a href="{{ route('admin.dashboard') }}" class="flex items-center justify-center" aria-label="Fintech CMS — Dashboard">
            <img src="{{ asset('images/brandings/fintech-logo.png') }}" alt="Fintech" class="h-8 w-8 flex-shrink-0 object-contain">
        </a>
    </div>

    <nav class="flex-1 space-y-1 overflow-y-auto overflow-x-hidden px-3 py-4">
        <a href="{{ route('admin.dashboard') }}"
           class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ request()->routeIs('admin.dashboard') ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
            <i class="fa-solid fa-gauge w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
            <span class="sidebar-label whitespace-nowrap">{{ __('Dashboard') }}</span>
        </a>

        <div x-data="{ open: {{ $agentsGroupActive ? 'true' : 'false' }} }">
            <button type="button" @click="open = !open; {{ $expandOnOpen }}"
                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ $agentsGroupActive ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
                <i class="fa-solid fa-user-tie w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
                <span class="sidebar-label flex-1 whitespace-nowrap text-left">{{ __('Agents') }}</span>
                <i class="sidebar-label fa-solid fa-chevron-down flex-shrink-0 text-xs transition-transform"
                   :class="open && 'rotate-180'" aria-hidden="true"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="sidebar-submenu mt-1 space-y-1 pl-8">
                <a href="{{ route('admin.addresses.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.addresses.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Addresses') }}</a>
                <a href="{{ route('admin.yatayats.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.yatayats.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Yatayat') }}</a>
                <a href="{{ route('admin.routes.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.routes.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Routes') }}</a>
                <a href="{{ route('admin.agents.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.agents.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Agents') }}</a>
            </div>
        </div>

        <div x-data="{ open: {{ $faqGroupActive ? 'true' : 'false' }} }">
            <button type="button" @click="open = !open; {{ $expandOnOpen }}"
                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ $faqGroupActive ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
                <i class="fa-solid fa-circle-question w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
                <span class="sidebar-label flex-1 whitespace-nowrap text-left">{{ __('FAQ') }}</span>
                <i class="sidebar-label fa-solid fa-chevron-down flex-shrink-0 text-xs transition-transform"
                   :class="open && 'rotate-180'" aria-hidden="true"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="sidebar-submenu mt-1 space-y-1 pl-8">
                <a href="{{ route('admin.faq-categories.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.faq-categories.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('FAQ Categories') }}</a>
                <a href="{{ route('admin.faqs.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.faqs.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('FAQs') }}</a>
            </div>
        </div>

        <a href="{{ route('admin.card-applications.index') }}"
           class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ request()->routeIs('admin.card-applications.*') ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
            <i class="fa-solid fa-id-card w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
            <span class="sidebar-label whitespace-nowrap">{{ __('Card Applications') }}</span>
        </a>

        <a href="{{ route('admin.grievances.index') }}"
           class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ request()->routeIs('admin.grievances.*') ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
            <i class="fa-solid fa-scale-balanced w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
            <span class="sidebar-label whitespace-nowrap">{{ __('Grievances') }}</span>
        </a>

        <div x-data="{ open: {{ $contentGroupActive ? 'true' : 'false' }} }">
            <button type="button" @click="open = !open; {{ $expandOnOpen }}"
                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ $contentGroupActive ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
                <i class="fa-solid fa-layer-group w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
                <span class="sidebar-label flex-1 whitespace-nowrap text-left">{{ __('Content') }}</span>
                <i class="sidebar-label fa-solid fa-chevron-down flex-shrink-0 text-xs transition-transform"
                   :class="open && 'rotate-180'" aria-hidden="true"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="sidebar-submenu mt-1 space-y-1 pl-8">
                <a href="{{ route('admin.statistics.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.statistics.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Statistics') }}</a>
                <a href="{{ route('admin.partners.index') }}" class="block rounded-lg px-3 py-2 text-sm font-medium transition {{ request()->routeIs('admin.partners.*') ? 'text-primary' : 'text-slate-500 hover:text-primary' }}">{{ __('Partners') }}</a>
            </div>
        </div>

        <a href="{{ route('admin.users.index') }}"
           class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ request()->routeIs('admin.users.*') ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
            <i class="fa-solid fa-users w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
            <span class="sidebar-label whitespace-nowrap">{{ __('Users') }}</span>
        </a>

        <a href="{{ route('admin.settings.edit') }}"
           class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition {{ request()->routeIs('admin.settings.*') ? 'bg-primary/10 text-primary' : 'text-slate-600 hover:bg-slate-50 hover:text-primary' }}">
            <i class="fa-solid fa-gear w-5 flex-shrink-0 text-center" aria-hidden="true"></i>
            <span class="sidebar-label whitespace-nowrap">{{ __('Settings') }}</span>
        </a>
    </nav>
</aside>