@php
    // Dynamic logout icon - can be changed from settings or config
    $logoutIcon = config('app.logout_icon', 'logout');
    
    // Get logos from company settings
    $companySettings = \App\Models\CompanySetting::getSettings();
    // Full logo for expanded state
    $logoUrl = $companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo) 
        ? asset('storage/' . $companySettings->company_logo) 
        : asset('logo.svg');
    // Collapsed logo/icon for collapsed state
    $collapsedLogoUrl = $companySettings->company_icon && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_icon) 
        ? asset('storage/' . $companySettings->company_icon) 
        : ($companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo) 
            ? asset('storage/' . $companySettings->company_logo) 
            : asset('logo.svg'));
@endphp

<!-- Mobile Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay fixed inset-0 bg-black/50 z-40 md:hidden opacity-0 invisible" onclick="toggleSidebar()"></div>

<!-- Sidebar -->
<aside id="sidebar" class="sidebar-transition fixed md:static inset-y-0 left-0 z-50 w-64 bg-[#157fed] flex flex-col shadow-lg md:shadow-none transition-all duration-300">
    <!-- Sidebar Header with Toggle -->
    <div class="flex items-center justify-between h-16 px-4 border-b border-white/10">
        <div class="flex items-center gap-3 sidebar-logo-container">
            <!-- Full Logo (shown when expanded) -->
            <img src="{{ $logoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'ProInvoice') }}" class="h-10 w-auto sidebar-logo-full">
            <!-- Collapsed Logo (shown when collapsed) -->
            <img src="{{ $collapsedLogoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'ProInvoice') }}" class="h-8 w-8 rounded sidebar-logo-collapsed hidden">
        </div>
        <button onclick="toggleSidebar()" class="text-white/70 hover:text-white transition-colors" title="Toggle Sidebar">
            <span class="material-symbols-outlined md:hidden p-5 text-xl">close</span>
            <span class="material-symbols-outlined hidden md:block sidebar-toggle-icon">menu</span>
        </button>
    </div>

    <!-- Sidebar Content -->
    <div class="flex-1 overflow-y-auto py-4 px-3">
        <nav class="flex flex-col gap-1">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.dashboard') ? 'bg-sidebar-active text-primary' : 'text-white/90 hover:bg-white/5' }} transition-colors group">
                <span class="material-symbols-outlined text-lg">dashboard</span>
                <span class="text-sm font-medium sidebar-menu-label">Dashboard</span>
                @if(request()->routeIs('admin.dashboard'))
                    <span class="material-symbols-outlined text-xs ml-auto sidebar-menu-chevron">chevron_right</span>
                @endif
            </a>
            
            <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                <span class="material-symbols-outlined text-lg">business</span>
                <span class="text-sm font-medium sidebar-menu-label">Companies</span>
            </a>
            
            <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                <span class="material-symbols-outlined text-lg">subscriptions</span>
                <span class="text-sm font-medium sidebar-menu-label">Subscription</span>
            </a>
            
            <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                <span class="material-symbols-outlined text-lg">inventory_2</span>
                <span class="text-sm font-medium sidebar-menu-label">Packages</span>
            </a>
            
            <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                <span class="material-symbols-outlined text-lg">receipt_long</span>
                <span class="text-sm font-medium sidebar-menu-label">Purchase Transaction</span>
            </a>
        </nav>
    </div>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-white/10">
        <form method="POST" action="{{ route('logout') }}" class="mb-3">
            @csrf
            <button type="submit" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg bg-[#ff2cff] text-white/90 transition-colors">
                <span class="material-symbols-outlined text-lg">{{ $logoutIcon }}</span>
                <span class="text-sm font-medium sidebar-menu-label">{{ __('common.logout') }}</span>
            </button>
        </form>
        <div class="flex items-center gap-3 px-3 py-2">
            <div class="bg-white/10 rounded-full size-10 flex items-center justify-center">
                <span class="text-white text-sm font-bold">{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}</span>
            </div>
            <div class="flex flex-col flex-1 min-w-0 sidebar-user-info">
                <p class="text-white text-sm font-medium truncate">{{ Auth::user()->name }}</p>
                <p class="text-white/70 text-xs truncate">{{ Auth::user()->email }}</p>
            </div>
        </div>
    </div>
</aside>