<div class="flex flex-shrink-0 h-screen sticky top-0 w-72">
    <div class="flex flex-col w-full">
        <div class="flex flex-col h-full bg-sulis-blue">
            <!-- Logo -->
            <div class="flex items-center justify-between flex-shrink-0 px-3 py-3 bg-sulis-yellow bg-opacity-95">
                <div class="flex items-center space-x-6">
                    @php
                        $companyLogo = null;
                        $companyName = 'Sulis-PMS'; // Default fallback
                        if (auth()->check() && auth()->user()->company) {
                            $companyLogo = auth()->user()->company->CompanyLogo;
                            $fullCompanyName = auth()->user()->company->CompanyName ?? 'Sulis-PMS';
                            
                            // Create short form: Take first letter of each word, limit to 4 letters max
                            $words = explode(' ', $fullCompanyName);
                            $acronym = '';
                            foreach ($words as $word) {
                                if (!empty($word) && strlen($word) > 0) {
                                    $acronym .= strtoupper(substr($word, 0, 1));
                                    if (strlen($acronym) >= 4) break; // Limit to 4 characters
                                }
                            }
                            
                            $companyName = $acronym . '-PMS';
                        }
                    @endphp
                    <img src="{{ $companyLogo ? asset('logo/' . $companyLogo) : asset('logo/sulispmslogo.png') }}"
                         alt="Company Logo"
                         class="h-9 w-24"
                         onerror="this.src='{{ asset('logo/sulispmslogo.png') }}'">
                    <span class="text-sulis-blue text-xl font-bold">{{ Str::limit($companyName, 15) }}</span>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="flex-1 px-3 pb-4 space-y-1 overflow-y-auto">
                <!-- Dashboard -->
                <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" 
                    class="w-full bg-cyan-500 text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2.5 text-sm font-medium rounded-md mb-1 mt-4">
                    <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>
                    {{ __('Dashboard') }}
                </x-nav-link>
                
                <!-- Property Management -->
                <div x-data="{ open: {{ request()->routeIs('properties.*') || request()->routeIs('prop-services.*') ? 'true' : 'false' }} }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>Property Operations</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark">
                        <x-nav-link :href="route('properties.index')" :active="request()->routeIs('properties.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                            {{ __('All Properties') }}
                        </x-nav-link>
                        <!-- <x-nav-link :href="route('prop-services.index')" :active="request()->routeIs('prop-services.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            {{ __('Property Services') }}
                        </x-nav-link> -->
                    </div>
                </div>
                
                <!-- Customer Management -->
                <div x-data="{ 
                    open: {{ 
                        request()->routeIs('customers.*') ||
                        request()->routeIs('tenancy.*')
                        ? 'true' : 'false' 
                    }} 
                }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            <span>Tenant Management</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <x-nav-link :href="route('customers.index')" :active="request()->routeIs('customers.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            {{ __('All Tenants') }}
                        </x-nav-link>
                        
                        <!-- <x-nav-link :href="route('tenancy.index')" :active="request()->routeIs('tenancy.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                            {{ __('Tenancy Agreements') }}
                        </x-nav-link>
                        
                        <x-nav-link :href="route('tenancy.create')" :active="request()->routeIs('tenancy.create')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            {{ __('New Tenancy') }}
                        </x-nav-link> -->
                    </div>
                </div>
                
                <!-- Meter & Billing Setup -->
                <div x-data="{ 
                    open: {{ 
                        request()->routeIs('periods.*') ||
                        request()->routeIs('meter-readings.*')
                        ? 'true' : 'false' 
                    }} 
                }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                            <span>Meter & Billing Setup</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <x-nav-link :href="route('periods.create')" :active="request()->routeIs('periods.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            {{ __('Billing Periods') }}
                        </x-nav-link>
                        
                        <x-nav-link :href="route('meter-readings.index')" 
                            :active="request()->routeIs('meter-readings.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                            {{ __('Meter Readings') }}
                        </x-nav-link>
                    </div>
                </div>

                <!-- Meter Readers Management -->
                <div x-data="{ 
                    open: {{ 
                        request()->routeIs('meter-readers.*')
                        ? 'true' : 'false' 
                    }} 
                }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            <span>Meter Readers</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <x-nav-link :href="route('meter-readers.index')" :active="request()->routeIs('meter-readers.index')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                            {{ __('All Meter Readers') }}
                        </x-nav-link>
                        <x-nav-link :href="route('meter-readers.create')" :active="request()->routeIs('meter-readers.create')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            {{ __('Add New Reader') }}
                        </x-nav-link>
                    </div>
                </div>

                <!-- Billing & Invoicing -->
                <div x-data="{ 
                    open: {{ 
                        request()->routeIs('bills.utility.*') || 
                        request()->routeIs('bills.rent.*') || 
                        request()->routeIs('invoices.rent.*') ||
                        request()->routeIs('invoices.bulk.*')
                        ? 'true' : 'false' 
                    }} 
                }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>Billing & Invoicing</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <!-- Bulk Invoices -->
                        <div class="pt-2">
                             <p class="text-xs font-semibold text-sulis-yellow/80 uppercase tracking-wider px-3 py-1">Bulk Invoice</p>
                            <x-nav-link :href="route('invoices.bulk.index')" :active="request()->routeIs('invoices.bulk.*')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg>
                                {{ __('View Bulk Invoices') }}
                            </x-nav-link>
                        </div>

                        <!-- Power/Electricity -->
                        <div class="pt-2">
                            <p class="text-xs font-semibold text-sulis-yellow/80 uppercase tracking-wider px-3 py-1">Power/Electricity</p>
                            <x-nav-link :href="route('bills.utility.index')" :active="request()->routeIs('bills.utility.*')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                </svg>
                                {{ __('Process Power Bills') }}
                            </x-nav-link>
                        </div>

                        <!-- Water -->
                         <div class="pt-2">
                            <p class="text-xs font-semibold text-sulis-yellow/80 uppercase tracking-wider px-3 py-1">Water</p>
                            <x-nav-link :href="route('bills.water.index')" :active="request()->routeIs('bills.water.index')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                </svg>
                                {{ __('Water Bills') }}
                            </x-nav-link>
                            <x-nav-link :href="route('bills.water.process')" :active="request()->routeIs('bills.water.process')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg>
                                {{ __('Process Water Bills') }}
                            </x-nav-link>
                        </div>

                        <!-- Rent & Services -->
                        <div class="pt-2">
                            <p class="text-xs font-semibold text-sulis-yellow/80 uppercase tracking-wider px-3 py-1">Rent & Services</p>
                            <x-nav-link :href="route('bills.rent.process')" :active="request()->routeIs('bills.rent.*')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <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" />
                                </svg>
                                {{ __('Process Rent Bills') }}
                            </x-nav-link>
                            <x-nav-link :href="route('invoices.rent.index')" :active="request()->routeIs('invoices.rent.*')" 
                                class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                                <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                {{ __('View All Invoices') }}
                            </x-nav-link>
                        </div>
                    </div>
                </div>

                <!-- Financial Operations -->
                <div x-data="{ open: false }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                            <span>Financial Operations</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <!-- <x-nav-link href="#" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {{ __('Expense Tracking') }}
                        </x-nav-link> -->
                        <!-- <x-nav-link href="#" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                            {{ __('Financial Reports') }}
                        </x-nav-link> -->
                        <x-nav-link :href="route('payments.index')" 
                            :active="request()->routeIs('payments.*')"
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                            {{ __('Payment Details') }}
                        </x-nav-link>
                        <x-nav-link :href="route('tracking.invoices')" 
                            :active="request()->routeIs('tracking.*')"
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            {{ __('Invoice Tracking') }}
                        </x-nav-link>
                        <!-- <x-nav-link href="#" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                            </svg>
                            {{ __('Revenue Analysis') }}
                        </x-nav-link> -->
                    </div>
                </div>

                <!-- Reports -->
<div x-data="{ open: {{ request()->routeIs('reports.*') ? 'true' : 'false' }} }" class="space-y-1">
    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
        <div class="flex items-center">
            <svg class="mr-3 h-5 w-5 text-sulis-yellow group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <span>Reports</span>
        </div>
        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
    </button>
    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
        <!-- <x-nav-link :href="route('reports.index')" :active="request()->routeIs('reports.index')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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>
            {{ __('Reports Dashboard') }}
        </x-nav-link>
        <x-nav-link :href="route('reports.financial')" :active="request()->routeIs('reports.financial')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            {{ __('Financial Report') }}
        </x-nav-link>
        <x-nav-link :href="route('reports.occupancy')" :active="request()->routeIs('reports.occupancy')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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>
            {{ __('Occupancy Report') }}
        </x-nav-link>
        <x-nav-link :href="route('reports.rent-roll')" :active="request()->routeIs('reports.rent-roll')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            {{ __('Rent Roll Report') }}
        </x-nav-link> -->
        <x-nav-link :href="route('reports.bill-display')" :active="request()->routeIs('reports.bill-display')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            {{ __('Bill Display') }}
        </x-nav-link>
        <x-nav-link :href="route('reports.bill-summary')" :active="request()->routeIs('reports.bill-summary')" 
            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            {{ __('Bill Summary') }}
        </x-nav-link>
    </div>
</div>

                <!-- Settings -->
                <div x-data="{ open: {{ request()->routeIs('sms-templates.*') ? 'true' : 'false' }} }" class="space-y-1">
                    <button @click="open = !open" class="w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium text-white hover:bg-sulis-blue-dark hover:text-sulis-yellow rounded-md group">
                        <div class="flex items-center">
                            <svg class="mr-3 h-5 w-5 text-sulis-yellow/70 group-hover:text-sulis-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span>Company Configuration</span>
                        </div>
                        <svg :class="{'rotate-90': open}" class="h-4 w-4 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    <div x-show="open" x-collapse class="ml-2 pl-5 border-l-2 border-sulis-blue-dark space-y-1">
                        <!-- Message Templates -->
                        <x-nav-link :href="route('company.settings')" :active="request()->routeIs('company.settings*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            {{ __('Email & SMS Templates') }}
                        </x-nav-link>
                        <!-- SMS Templates -->
                        <!-- <x-nav-link :href="route('sms-templates.index')" :active="request()->routeIs('sms-templates.*')" 
                            class="text-green-300 hover:bg-sulis-blue-dark hover:text-sulis-yellow group flex items-center px-3 py-2 text-sm rounded-md">
                            <svg class="mr-3 h-4 w-4 text-sulis-yellow opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                            {{ __('SMS Templates') }}
                        </x-nav-link> -->
                    </div>
                </div>
            </nav>

            <!-- Footer -->
            <div class="flex-shrink-0 mt-auto">
                <div class="bg-gradient-to-r from-sulis-blue-dark to-sulis-blue-dark/80 backdrop-blur-sm border-t border-sulis-yellow/20 px-3 py-1">
                    <div class="text-center space-y-1">
                        <!-- Logo/Brand -->
                        <div class="flex items-center justify-center space-x-2 mb-2">
                            <div class="w-4 h-4 bg-sulis-yellow/20 rounded-full flex items-center justify-center">
                                <i class="fas fa-building text-sulis-yellow text-xs"></i>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-xs font-semibold text-sulis-yellow tracking-wide">
                                    SULIS-PMS
                                </span>
                                <span class="text-xs text-gray-300 font-medium">
                                    Property Management System
                                </span>
                            </div>
                        </div>

                        <!-- Copyright -->
                        <p class="text-xs text-gray-400">
                            © {{ date('Y') }} Sulis Technologies
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
