<nav x-data="{ open: false }" class="bg-gray-900 border-r border-gray-800 md:fixed md:w-64 md:h-screen md:flex md:flex-col md:justify-between overflow-y-auto transition-colors duration-200 z-50 text-white">
    
    <!-- Sidebar Content Wrapper -->
    <div class="flex-1 px-4 py-4 space-y-4">
        <!-- Logo -->
        <div class="flex items-center justify-between md:justify-center h-16 mb-2 border-b border-gray-800">
            <a href="{{ route('dashboard') }}" class="flex items-center gap-3">
                <div class="p-2 bg-blue-600 rounded-lg shadow-lg shadow-blue-500/30">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <span class="text-xl font-bold tracking-tight text-white">{{ config('app.name', 'CHOX') }}</span>
            </a>
            
            <!-- Mobile Hamburger -->
            <button @click="open = ! open" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- Links -->
        <div class="space-y-1">
            <!-- Dashboard Link (Active State Example) -->
            <a href="{{ route('dashboard') }}" 
               class="{{ request()->routeIs('dashboard') ? 'bg-gray-800 text-blue-400 border-l-4 border-blue-500' : 'text-gray-400 hover:bg-gray-800 hover:text-white border-l-4 border-transparent' }} flex items-center gap-3 px-3 py-3 text-sm font-medium rounded-r-md transition-all">
                 <svg class="w-5 h-5 {{ request()->routeIs('dashboard') ? 'text-blue-400' : 'text-gray-400 group-hover:text-white' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                 <span>{{ __('Dashboard') }}</span>
            </a>

            @if(Auth::user()->isAdmin())
                <!-- Management Group -->
                <div class="pt-4 pb-2">
                    <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        System Administration
                    </div>
                     <div class="space-y-1">
                        <x-sidebar-link :href="route('admin.products.index')" :active="request()->routeIs('admin.products.*')">{{ __('Products') }}</x-sidebar-link>
                        <x-sidebar-link :href="route('admin.reps.index')" :active="request()->routeIs('admin.reps.*')">{{ __('Sales Reps') }}</x-sidebar-link>
                        <x-sidebar-link :href="route('admin.vehicles.index')" :active="request()->routeIs('admin.vehicles.*')">{{ __('Fleet') }}</x-sidebar-link>
                    </div>
                </div>

                <!-- Inventory & Logistics -->
                 <div class="pt-2 pb-2">
                    <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-2">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
                        Logistics
                    </div>
                     <div class="space-y-1">
                         <x-sidebar-link :href="route('admin.inventory.index')" :active="request()->routeIs('admin.inventory.*')">{{ __('Warehouse Inventory') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.vehicle-stocks.index')" :active="request()->routeIs('admin.vehicle-stocks.*')">{{ __('Lorry Stocks') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.deliveries.index')" :active="request()->routeIs('admin.deliveries.*')">{{ __('Deliveries') }}</x-sidebar-link>
                    </div>
                </div>

                <!-- Finance -->
                 <div class="pt-2 pb-2">
                     <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-2">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
                        Accounting
                    </div>
                     <div class="space-y-1">
                         <x-sidebar-link :href="route('admin.expenses.index')" :active="request()->routeIs('admin.expenses.*')">{{ __('Expenses') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.payroll.index')" :active="request()->routeIs('admin.payroll.*')">{{ __('Payroll') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.loans.index')" :active="request()->routeIs('admin.loans.*')">{{ __('Loans') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.salary-advances.index')" :active="request()->routeIs('admin.salary-advances.*')">{{ __('Advances') }}</x-sidebar-link>
                    </div>
                </div>

                <!-- Reports -->
                <div class="pt-2 pb-2">
                     <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-2">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
                        Reports
                    </div>
                     <div class="space-y-1">
                         <x-sidebar-link :href="route('admin.reports.sales-summary')" :active="request()->routeIs('admin.reports.sales-summary')">{{ __('Sales Summary') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.reports.cash-collections')" :active="request()->routeIs('admin.reports.cash-collections')">{{ __('Cash Collect.') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.reports.due-balances')" :active="request()->routeIs('admin.reports.due-balances')">{{ __('Due Balances') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.reports.cheques')" :active="request()->routeIs('admin.reports.cheques')">{{ __('Cheques') }}</x-sidebar-link>
                         <x-sidebar-link :href="route('admin.reports.commissions')" :active="request()->routeIs('admin.reports.commissions')">{{ __('Commissions') }}</x-sidebar-link>
                    </div>
                </div>
            @endif

            @if(Auth::user()->isSalesRep())
                 <!-- Sales Rep Links -->
                 <div class="pt-4">
                     <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">My Operations</div>
                     <x-sidebar-link :href="route('sales.billing')" :active="request()->routeIs('sales.billing')">{{ __('New Sale') }}</x-sidebar-link>
                     <x-sidebar-link :href="route('sales.customers.index')" :active="request()->routeIs('sales.customers.*')">{{ __('My Customers') }}</x-sidebar-link>
                     <x-sidebar-link :href="route('sales.payments.index')" :active="request()->routeIs('sales.payments.*')">{{ __('Collections') }}</x-sidebar-link>
                     <x-sidebar-link :href="route('sales.my-stock.index')" :active="request()->routeIs('sales.my-stock.*')">{{ __('My Inventory') }}</x-sidebar-link>
                 </div>
                 
                 <div class="pt-4 pb-2">
                     <div class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">My Finances</div>
                     <x-sidebar-link :href="route('sales.expenses.index')" :active="request()->routeIs('sales.expenses.*')">{{ __('My Expenses') }}</x-sidebar-link>
                     <x-sidebar-link :href="route('sales.my-commissions.index')" :active="request()->routeIs('sales.my-commissions.*')">{{ __('My Commissions') }}</x-sidebar-link>
                     <x-sidebar-link :href="route('sales.my-salary.index')" :active="request()->routeIs('sales.my-salary.*')">{{ __('My Salary') }}</x-sidebar-link>
                 </div>
            @endif
        </div>
    </div>

    <!-- User & Dark Mode Footer -->
    <div class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4">
         <div class="flex items-center justify-between mb-4">
             <button onclick="toggleDarkMode()" 
                    class="p-2 rounded-full text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors">
                 <svg class="sun-icon h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                 <svg class="moon-icon h-5 w-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
             </button>

             <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="p-2 rounded-full text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 focus:outline-none transition-colors" title="Log Out">
                    <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>
                </button>
            </form>
         </div>
         
          <div class="flex items-center gap-3">
             <div class="h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-bold">
                 {{ substr(Auth::user()->name, 0, 1) }}
             </div>
             <div class="overflow-hidden">
                 <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ Auth::user()->name }}</p>
                 <p class="text-xs text-gray-500 truncate">{{ Auth::user()->email }}</p>
             </div>
          </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden md:hidden fixed inset-0 z-40 bg-gray-600 bg-opacity-75" @click="open = false"></div>
    
    <!-- Mobile Drawer -->
    <div :class="{'translate-x-0': open, '-translate-x-full': ! open}" class="fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-xl overflow-y-auto transition-transform duration-300 ease-in-out md:hidden">
         <!-- Clone Desktop Content for Mobile -->
        <div class="h-full flex flex-col justify-between">
             <div class="px-4 py-4 space-y-4">
                 <div class="flex items-center justify-between h-10 mb-6">
                    <span class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ config('app.name') }}</span>
                    <button @click="open = false" class="text-gray-500"><svg class="w-6 h-6" 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"></path></svg></button>
                 </div>
                 
                 <!-- Mobile Links (Simplified Flat List) -->
                 <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">{{ __('Dashboard') }}</x-nav-link>
                 
                 @if(Auth::user()->isAdmin())
                     <div class="text-xs font-bold text-gray-400 uppercase mt-4">Management</div>
                     <x-nav-link :href="route('admin.products.index')" :active="request()->routeIs('admin.products.*')">{{ __('Products') }}</x-nav-link>
                     <x-nav-link :href="route('admin.inventory.index')" :active="request()->routeIs('admin.inventory.*')">{{ __('Inventory') }}</x-nav-link>
                     <x-nav-link :href="route('admin.reps.index')" :active="request()->routeIs('admin.reps.*')">{{ __('Sales Reps') }}</x-nav-link>
                     
                     <div class="text-xs font-bold text-gray-400 uppercase mt-4">Ops</div>
                     <x-nav-link :href="route('admin.deliveries.index')" :active="request()->routeIs('admin.deliveries.*')">{{ __('Deliveries') }}</x-nav-link>
                     <x-nav-link :href="route('admin.reports.sales-summary')" :active="request()->routeIs('admin.reports.*')">{{ __('Reports') }}</x-nav-link>
                 @endif

                 @if(Auth::user()->isSalesRep())
                      <x-nav-link :href="route('sales.billing')" :active="request()->routeIs('sales.billing')">{{ __('Billing') }}</x-nav-link>
                      <x-nav-link :href="route('sales.customers.index')" :active="request()->routeIs('sales.customers.*')">{{ __('Customers') }}</x-nav-link>
                 @endif
             </div>
             
             <!-- Mobile Footer -->
             <div class="p-4 border-t border-gray-200">
                  <div class="font-medium text-gray-800 dark:text-gray-100">{{ Auth::user()->name }}</div>
                  <form method="POST" action="{{ route('logout') }}" class="mt-2">
                        @csrf
                        <button type="submit" class="text-sm text-red-600">Log Out</button>
                  </form>
             </div>
        </div>
    </div>
</nav>
