@php
    $user = auth('web')->user();
@endphp

<!-- Sidebar -->
<aside
    data-sidebar
    class="sidebar-initial"
    x-init="sidebarOpen = true; $el.classList.remove('sidebar-initial')"
    :class="[
        sidebarMobile
            ? 'fixed inset-y-0 left-0 z-50 translate-x-0'
            : '-translate-x-full fixed inset-y-0 left-0 z-50 md:relative md:translate-x-0',
        sidebarOpen ? 'md:w-64' : 'md:w-20',
        'transition-all duration-300 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg flex flex-col h-full'
    ]"
    style="transition-property: width, transform;"
>
    <!-- Logo Section -->
    <div class="flex items-center h-16 px-4 text-gray-900 dark:text-white">
        <div class="flex items-center flex-1" :class="sidebarOpen ? 'space-x-3' : 'justify-center'">
            @if(file_exists(public_path('img/logo.png')))
                <img src="{{ asset('img/logo.png') }}" alt="Logo" class="h-8 w-8 rounded flex-shrink-0" />
            @else
                <div x-show="!sidebarOpen" class="h-8 w-8 rounded flex items-center justify-center bg-indigo-100 dark:bg-indigo-900/30">
                    <span class="text-xl font-bold text-indigo-600 dark:text-indigo-400">R</span>
                </div>
            @endif
            <div x-show="sidebarOpen" class="flex flex-col">
                <span class="font-bold text-lg leading-tight uppercase" style="color: #1868b3;">REPLY.REVIEWS</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">AI Powered</span>
            </div>
        </div>
        <!-- Collapse button (desktop) -->
        <button 
            @click="sidebarOpen = !sidebarOpen" 
            class="hidden md:flex p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
            x-show="sidebarOpen"
        >
            <svg class="h-5 w-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </button>
        <!-- Expand button (collapsed) -->
        <button 
            @click="sidebarOpen = !sidebarOpen" 
            class="hidden md:flex p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
            x-show="!sidebarOpen"
        >
            <svg class="h-5 w-5 text-gray-600 dark:text-gray-400 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </button>
        <!-- Close button (mobile) -->
        <button 
            @click="sidebarMobile = false" 
            class="md:hidden p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
        >
            <svg class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 overflow-y-auto px-3 py-6 space-y-1">
        <!-- Dashboard -->
        <a 
            href="{{ route('dashboard') }}" 
            class="relative flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors {{ request()->routeIs('dashboard') ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-semibold' : '' }}"
        >
            @if(request()->routeIs('dashboard'))
                <span class="absolute left-0 w-1 h-8 bg-indigo-600 rounded-r"></span>
            @endif
            <svg class="h-5 w-5 mr-3 min-w-[20px] {{ request()->routeIs('dashboard') ? 'text-indigo-700 dark:text-indigo-400' : 'text-indigo-500' }} group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Home</span>
        </a>

        <!-- Settings -->
        <a 
            href="{{ route('businesses.view') }}" 
            class="relative flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors {{ request()->routeIs('businesses.view') || request()->routeIs('businesses.*') ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-semibold' : '' }}"
        >
            @if(request()->routeIs('businesses.view') || request()->routeIs('businesses.*'))
                <span class="absolute left-0 w-1 h-8 bg-indigo-600 rounded-r"></span>
            @endif
            <svg class="h-5 w-5 mr-3 min-w-[20px] {{ request()->routeIs('businesses.view') || request()->routeIs('businesses.*') ? 'text-indigo-700 dark:text-indigo-400' : 'text-indigo-500' }} group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Automation</span>
        </a>

        <!-- Invite Stats -->
        <a 
            href="{{ route('invite.stats') }}" 
            class="relative flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors {{ request()->routeIs('invite.stats') || request()->routeIs('invite.*') ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-semibold' : '' }}"
        >
            @if(request()->routeIs('invite.stats') || request()->routeIs('invite.*'))
                <span class="absolute left-0 w-1 h-8 bg-indigo-600 rounded-r"></span>
            @endif
            <svg class="h-5 w-5 mr-3 min-w-[20px] {{ request()->routeIs('invite.stats') || request()->routeIs('invite.*') ? 'text-indigo-700 dark:text-indigo-400' : 'text-indigo-500' }} group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Results</span>
        </a>

        <!-- Customer Resolution -->
        <!--a 
            href="{{ route('customer.resolution.index') }}" 
            class="relative flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors {{ request()->routeIs('customer.resolution.*') ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-semibold' : '' }}"
        >
            @if(request()->routeIs('customer.resolution.*'))
                <span class="absolute left-0 w-1 h-8 bg-indigo-600 rounded-r"></span>
            @endif
            <svg class="h-5 w-5 mr-3 min-w-[20px] {{ request()->routeIs('customer.resolution.*') ? 'text-indigo-700 dark:text-indigo-400' : 'text-indigo-500' }} group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Customer Resolution</span>
        </!--a -->

        <!-- Plan -->
        <a 
            href="{{ route('plan.view') }}" 
            class="relative flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors {{ request()->routeIs('plan.view') || request()->routeIs('plan.*') ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-semibold' : '' }}"
        >
            @if(request()->routeIs('plan.view') || request()->routeIs('plan.*'))
                <span class="absolute left-0 w-1 h-8 bg-indigo-600 rounded-r"></span>
            @endif
            <svg class="h-5 w-5 mr-3 min-w-[20px] {{ request()->routeIs('plan.view') || request()->routeIs('plan.*') ? 'text-indigo-700 dark:text-indigo-400' : 'text-indigo-500' }} group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Plan</span>
        </a>

        <!-- Divider -->
    

        <!-- Chrome Extension -->
        <!--a 
            href="https://chrome.google.com/webstore/detail/reply-to-google-reviews/nnlapinnlakdekodfepkeiakidelgfoa" 
            target="_blank"
            class="flex items-center px-3 py-2.5 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-300 group transition-colors"
            x-show="sidebarOpen"
        >
            <svg class="h-5 w-5 mr-3 min-w-[20px] text-indigo-500 group-hover:text-indigo-700 dark:group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
            </svg>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Chrome Extension</span>
        </a -->
    </nav>

    <!-- User Profile Section -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <!-- Expanded Profile -->
        <div class="relative" @click.away="profileOpen = false" x-show="sidebarOpen">
            <button 
                @click="profileOpen = !profileOpen" 
                class="flex items-center w-full px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
            >
                <div class="flex-shrink-0">
                    <div class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
                        {{ strtoupper(substr($user->name ?? 'U', 0, 1)) }}
                    </div>
                </div>
                <div class="ml-3 flex-1 text-left min-w-0">
                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ $user->name ?? 'User' }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $user->email ?? '' }}</p>
                </div>
                <svg class="h-5 w-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <!-- Profile Dropdown -->
            <div 
                x-show="profileOpen" 
                x-cloak
                class="absolute bottom-full left-0 mb-2 w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50"
            >
                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Profile Settings
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full text-left block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        Log Out
                    </button>
                </form>
            </div>
        </div>
        <!-- Collapsed User Icon -->
        <div class="relative flex justify-center" x-show="!sidebarOpen" @click.away="profileOpen = false">
            <button 
                @click="profileOpen = !profileOpen" 
                class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm cursor-pointer hover:opacity-90 transition-opacity" 
                title="{{ $user->name ?? 'User' }}"
            >
                {{ strtoupper(substr($user->name ?? 'U', 0, 1)) }}
            </button>
            <!-- Profile Dropdown (Collapsed) -->
            <div 
                x-show="profileOpen" 
                x-cloak
                class="absolute bottom-full left-full ml-2 mb-0 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50"
            >
                <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ $user->name ?? 'User' }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $user->email ?? '' }}</p>
                </div>
                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Profile Settings
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full text-left block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        Log Out
                    </button>
                </form>
            </div>
        </div>
    </div>
</aside>