<!-- Mobile sidebar backdrop -->
<div x-show="isSidebarOpen" x-transition:enter="transition ease-in-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in-out duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center md:hidden" @click="isSidebarOpen = false" style="display: none;"></div>

<!-- Sidebar -->
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white border-r border-gray-100 md:relative md:mt-0 md:block md:translate-x-0 shadow-sm transition-transform duration-300 ease-in-out transform" :class="{ '-translate-x-full': !isSidebarOpen, 'translate-x-0': isSidebarOpen }" @click.away="if (window.innerWidth < 768) isSidebarOpen = false">
    <div class="py-4 text-gray-500">
        <a class="ml-6 text-xl font-bold text-gray-800 flex items-center gap-2" href="{{ route('dashboard') }}">
            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
            Broadcasting
        </a>
        
        <div class="mt-8 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Main Menu</div>
        <ul class="mt-2 space-y-1">
            <li class="relative px-4">
                <a class="inline-flex items-center w-full px-4 py-2.5 text-sm font-semibold transition-colors duration-150 rounded-lg {{ request()->routeIs('dashboard') ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-gray-50 hover:text-gray-800' }}" href="{{ route('dashboard') }}">
                    <svg class="w-5 h-5" 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"></path></svg>
                    <span class="ml-4">Dashboard</span>
                </a>
            </li>
            <li class="relative px-4">
                <a class="inline-flex items-center w-full px-4 py-2.5 text-sm font-semibold transition-colors duration-150 rounded-lg {{ request()->routeIs('wallet.*') ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-gray-50 hover:text-gray-800' }}" href="{{ route('wallet.index') }}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                    <span class="ml-4">Wallet & Billing</span>
                </a>
            </li>
        </ul>

        <div class="mt-8 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Management</div>
        <ul class="mt-2 space-y-1">
            <li class="relative px-4">
                <a class="inline-flex items-center w-full px-4 py-2.5 text-sm font-semibold transition-colors duration-150 rounded-lg {{ request()->routeIs('phonebooks.*') || request()->routeIs('contacts.*') ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-gray-50 hover:text-gray-800' }}" href="{{ route('phonebooks.index') }}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                    <span class="ml-4">Phonebooks</span>
                </a>
            </li>
            <li class="relative px-4">
                <a class="inline-flex items-center w-full px-4 py-2.5 text-sm font-semibold transition-colors duration-150 rounded-lg {{ request()->routeIs('voice-records.*') ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-gray-50 hover:text-gray-800' }}" href="{{ route('voice-records.index') }}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
                    <span class="ml-4">Voice Records</span>
                </a>
            </li>
        </ul>

        <div class="mt-8 px-6 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Broadcasting</div>
        <ul class="mt-2 space-y-1">
            <li class="relative px-4">
                <a class="inline-flex items-center w-full px-4 py-2.5 text-sm font-semibold transition-colors duration-150 rounded-lg {{ request()->routeIs('campaigns.*') ? 'bg-indigo-50 text-indigo-700' : 'hover:bg-gray-50 hover:text-gray-800' }}" href="{{ route('campaigns.index') }}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
                    <span class="ml-4">Campaigns</span>
                </a>
            </li>
        </ul>
    </div>
    
    <!-- Logout Button at bottom of sidebar -->
    <div class="absolute bottom-0 w-64 p-4 border-t border-gray-100 bg-white">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="inline-flex items-center w-full px-4 py-2 text-sm font-semibold text-red-600 transition-colors duration-150 rounded-lg hover:bg-red-50">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                <span class="ml-4">Log Out</span>
            </button>
        </form>
    </div>
</aside>
