@extends('layouts.base')

@section('body')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Navigation -->
    <nav class="bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 mb-6 relative z-50" x-data="{ mobileMenuOpen: false }">
        <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <!-- Logo -->
                    <div class="flex items-center shrink-0">
                        <a href="{{ route('dashboard') }}" class="flex items-center">
                            @if(App\Models\SystemSetting::getSiteLogo())
                                <img src="{{ App\Models\SystemSetting::getSiteLogo() }}" alt="{{ App\Models\SystemSetting::getSiteTitle() }}" class="h-8 object-contain">
                            @else
                                <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                                <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">{{ App\Models\SystemSetting::getSiteTitle() }}</span>
                            @endif
                        </a>
                    </div>

                    <!-- Navigation Links -->
                    @auth
                    <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex sm:items-stretch">
                        <!-- Dashboard -->
                        <a href="{{ route('dashboard') }}" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('dashboard') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                            Dashboard
                        </a>

                        <!-- Orders -->
                        <a href="{{ route('orders.index') }}" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('orders.*') && !request()->routeIs('checkout*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                            Orders
                        </a>

                        <!-- Checkout -->
                        <a href="{{ route('checkout') }}" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('checkout*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                            Checkout
                        </a>

                        <!-- Products Dropdown -->
                        <div x-data="{ open: false }" class="relative flex items-stretch">
                            <button @click="open = !open" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('products.*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                                Products
                                <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div x-show="open" @click.away="open = false" x-transition x-cloak class="absolute top-full left-0 z-20 w-48 mt-1 origin-top-left bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
                                <div class="py-1">
                                    <a href="{{ route('products.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        All Products
                                    </a>
                                    <a href="{{ route('products.index', ['type' => 'single']) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        Single Products
                                    </a>
                                    <a href="{{ route('products.index', ['type' => 'bundle']) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        Bundles / Packages
                                    </a>
                                    <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                    <a href="{{ route('products.create') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        + Add New Product
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Reports Dropdown -->
                        <div x-data="{ open: false }" class="relative flex items-stretch">
                            <button @click="open = !open" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('reports.*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                                Reports
                                <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div x-show="open" @click.away="open = false" x-transition x-cloak class="absolute top-full left-0 z-20 w-56 mt-1 origin-top-left bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
                                <div class="py-1">
                                    <a href="{{ route('reports.sales') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        Sales Reports
                                    </a>
                                    <a href="{{ route('reports.abandoned-checkouts') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        Abandoned Checkouts
                                    </a>
                                    @if(auth()->user()->can_manage_tiktok_shop || auth()->user()->isAdmin())
                                        <a href="{{ route('reports.tiktok-shop') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            TikTok Shop Reports
                                        </a>
                                    @endif

                                    @if(auth()->user()->isAdmin())
                                        <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                        <a href="{{ route('reports.seller-kpi') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Seller KPIs
                                        </a>
                                        <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                        <a href="{{ route('reports.marketing-strategy') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Marketing Strategy
                                        </a>
                                        <a href="{{ route('reports.forecast') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Overall Forecast
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Settings Menu (Last) -->
                        @if(auth()->user()->isAdmin())
                            <!-- Admin: Settings Mega-Menu -->
                            <div x-data="{ open: false }" class="relative flex items-stretch">
                                <button @click="open = !open" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('settings.*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                                    Settings
                                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition x-cloak class="absolute top-full left-0 z-20 w-56 mt-1 origin-top-left bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
                                    <div class="py-1">
                                        <!-- Group 1: Business Setup -->
                                        <a href="{{ route('settings.stores') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Store
                                        </a>
                                        <a href="{{ route('settings.webhooks.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Channel
                                        </a>
                                        <a href="{{ route('settings.sales-pages.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Sales Page
                                        </a>
                                        <a href="{{ route('settings.tiktok-shops.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            TikTok Shop
                                        </a>

                                        <!-- Group 2: Access & Integration -->
                                        <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                        <a href="{{ route('settings.users.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Users
                                        </a>
                                        <a href="{{ route('settings.google-sheets') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Google Sheets
                                        </a>
                                        <a href="{{ route('settings.facebook.settings') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Facebook
                                        </a>

                                        <!-- Group 3: System Configuration -->
                                        <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                        <a href="{{ route('settings.system') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            System
                                        </a>
                                        <a href="{{ route('settings.couriers') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Courier
                                        </a>
                                        <a href="{{ route('settings.notifications.whatsapp') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Notifications
                                        </a>
                                        <a href="{{ route('settings.cloudflare') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Cloudflare
                                        </a>
                                        <a href="{{ route('settings.seller-domains.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Seller Domains
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @elseif(auth()->user()->isManager())
                            <!-- Manager: Management Dropdown (Custom Domains hidden) -->
                            <div x-data="{ open: false }" class="relative flex items-stretch">
                                <button @click="open = !open" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('stores.*') || request()->routeIs('settings.users.*') || request()->routeIs('settings.sales-pages.*') || request()->routeIs('tiktok-shop.*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                                    Management
                                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition x-cloak class="absolute top-full left-0 z-20 w-48 mt-1 origin-top-left bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
                                    <div class="py-1">
                                        <a href="{{ route('settings.users.index', ['role' => 'seller']) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            View Sellers
                                        </a>
                                        <a href="{{ route('settings.stores') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            View Stores
                                        </a>
                                        <a href="{{ route('settings.sales-pages.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            View Pages
                                        </a>
                                        @if(auth()->user()->can_manage_tiktok_shop)
                                        <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div>
                                        <a href="{{ route('tiktok-shop.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            TikTok Shop
                                        </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @else
                            <!-- Seller: Dropdown for My Stores -->
                            <div x-data="{ open: false }" class="relative flex items-stretch">
                                <button @click="open = !open" class="inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 {{ request()->routeIs('stores.*') || request()->routeIs('settings.sales-pages.*') || request()->routeIs('seller-domains.*') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }}">
                                    My Stores
                                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition x-cloak class="absolute top-full left-0 z-20 w-48 mt-1 origin-top-left bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
                                    <div class="py-1">
                                        <a href="{{ route('settings.stores') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            View My Stores
                                        </a>
                                        <a href="{{ route('settings.sales-pages.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            View My Pages
                                        </a>
                                        <a href="{{ route('settings.seller-domains.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Custom Domains
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    @endauth
                </div>

                <!-- Right Side -->
                <div class="hidden sm:flex sm:items-center sm:ml-6 sm:space-x-4">
                    <!-- Stop Impersonating Button -->
                    @if(session()->has('impersonate_admin_id'))
                        <form action="{{ route('users.stop-impersonating') }}" method="POST" class="inline">
                            @csrf
                            <button type="submit"
                                    class="inline-flex items-center gap-1 px-2 py-1.5 text-white rounded-lg transition-colors"
                                    style="background-color: #f59e0b;"
                                    onmouseover="this.style.backgroundColor='#d97706'"
                                    onmouseout="this.style.backgroundColor='#f59e0b'"
                                    title="Stop viewing as {{ auth()->user()->name }}">
                                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                <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="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </form>
                    @endif

                    <!-- Theme Toggle -->
                    <div x-data="{ open: false }" class="relative mr-3">
                        <button @click="open = !open" type="button" class="relative rounded-full bg-white dark:bg-gray-800 p-1 text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                            
                            <!-- Sun icon for light mode -->
                            <svg class="h-6 w-6 dark:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                            </svg>
                            <!-- Moon icon for dark mode -->
                            <svg class="h-6 w-6 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                            </svg>
                        </button>
                        <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" x-cloak class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white dark:bg-gray-700 py-1 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-600 focus:outline-none">
                            <button onclick="setThemePreference('light')" @click="open = false" class="flex w-full items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                                </svg>
                                Light
                            </button>
                            <button onclick="setThemePreference('dark')" @click="open = false" class="flex w-full items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                                </svg>
                                Dark
                            </button>
                            <button onclick="setThemePreference('system')" @click="open = false" class="flex w-full items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                                </svg>
                                System
                            </button>
                        </div>
                    </div>

                    @guest
                        <a href="{{ route('login') }}" class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                            Log in
                        </a>
                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                                Register
                            </a>
                        @endif
                    @else
                        <!-- User Dropdown -->
                        <div x-data="{ open: false }" class="relative ml-3">
                            <div>
                                <button @click="open = !open" type="button" class="flex items-center text-sm font-medium text-gray-700 transition duration-150 ease-in-out bg-white rounded-md dark:bg-gray-800 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
                                    <div>{{ Auth::user()->name }}</div>
                                    <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                            </div>

                            <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" x-cloak class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-gray-700 py-1 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-600 focus:outline-none">
                                <div class="py-1">
                                    @if(auth()->user()->isSeller())
                                        @php
                                            $managers = auth()->user()->managers;
                                        @endphp
                                        @if($managers->isNotEmpty())
                                            <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                                                <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
                                                    Managed By
                                                </div>
                                                @foreach($managers as $manager)
                                                    <div class="flex items-center gap-2 mt-1">
                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                                                            </svg>
                                                            {{ $manager->name }}
                                                        </span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    @endif
                                    <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                        Profile
                                    </a>
                                    @if(auth()->user()->isSeller() || auth()->user()->isManager())
                                        <a href="{{ route('settings.notifications.whatsapp') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Notifications
                                        </a>
                                    @endif
                                    @if(auth()->user()->isSeller())
                                        <a href="{{ route('settings.google-sheets') }}" class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            <span>Google Sheets</span>
                                            @if(auth()->user()->google_sheets_sync_enabled)
                                                <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                                    <svg class="w-2.5 h-2.5 mr-0.5" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                                    </svg>
                                                    On
                                                </span>
                                            @endif
                                        </a>
                                        <a href="{{ route('settings.facebook.settings') }}" class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            <span>Facebook</span>
                                            @if(auth()->user()->hasFacebookConnection())
                                                <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                                    <svg class="w-2.5 h-2.5 mr-0.5" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                                    </svg>
                                                    On
                                                </span>
                                            @endif
                                        </a>
                                    @endif
                                    <!-- Module Navigation (Admin/Manager) -->
                                    @if(auth()->user()->isAdmin() || auth()->user()->isManager())
                                        <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
                                        <div class="px-4 py-2">
                                            <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                                                Modules
                                            </div>
                                        </div>

                                        <a href="{{ config('services.production.url') }}/dashboard" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            <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"/>
                                            </svg>
                                            Production
                                        </a>

                                        <div class="flex items-center justify-between px-4 py-2 text-sm text-gray-400 dark:text-gray-500 cursor-not-allowed">
                                            <div class="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"/>
                                                </svg>
                                                Finance
                                            </div>
                                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded dark:bg-gray-600 dark:text-gray-400">Soon</span>
                                        </div>

                                        <div class="flex items-center justify-between px-4 py-2 text-sm text-gray-400 dark:text-gray-500 cursor-not-allowed">
                                            <div class="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="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>
                                                HR
                                            </div>
                                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded dark:bg-gray-600 dark:text-gray-400">Soon</span>
                                        </div>
                                    @endif

                                    <div class="border-t border-gray-200 dark:border-gray-600 my-1"></div>
                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                            Log Out
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endguest
                </div>

                <!-- Mobile menu button -->
                <div class="flex items-center space-x-2 -mr-2 sm:hidden">
                    <!-- Mobile Stop Impersonating Button -->
                    @if(session()->has('impersonate_admin_id'))
                        <form action="{{ route('users.stop-impersonating') }}" method="POST" class="inline">
                            @csrf
                            <button type="submit"
                                    class="p-2 text-white bg-orange-500 hover:bg-orange-600 rounded-lg border border-orange-600 transition-colors focus:outline-none shadow-md"
                                    title="Stop impersonating {{ auth()->user()->name }}">
                                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                            </button>
                        </form>
                    @endif

                    <!-- Mobile Theme Toggle -->
                    <button onclick="toggleTheme()" type="button" class="relative rounded-full bg-white dark:bg-gray-800 p-1 text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                        
                        <!-- Sun Icon (shown in light mode) -->
                        <svg class="h-6 w-6 dark:hidden" 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"/>
                        </svg>
                        <!-- Moon Icon (shown in dark mode) -->
                        <svg class="h-6 w-6 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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"/>
                        </svg>
                    </button>

                    <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md dark:text-gray-500 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500">
                        <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                            <path :class="{'hidden': mobileMenuOpen, 'inline-flex': !mobileMenuOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                            <path :class="{'hidden': !mobileMenuOpen, 'inline-flex': mobileMenuOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile menu -->
        <div :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen}" class="hidden sm:hidden" x-data="{ reportsOpen: {{ request()->routeIs('reports.*') ? 'true' : 'false' }}, settingsOpen: {{ request()->routeIs('settings.*') ? 'true' : 'false' }}, managementOpen: {{ request()->routeIs('stores.*') || request()->routeIs('settings.users.*') || request()->routeIs('settings.sales-pages.*') ? 'true' : 'false' }}, myStoresOpen: {{ request()->routeIs('stores.*') || request()->routeIs('settings.sales-pages.*') ? 'true' : 'false' }}, productsOpen: {{ request()->routeIs('products.*') ? 'true' : 'false' }} }">
            @auth
            <div class="pt-2 pb-3 space-y-1">
                <a href="{{ route('dashboard') }}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 {{ request()->routeIs('dashboard') ? 'border-indigo-500 text-indigo-700 bg-indigo-50 dark:bg-indigo-900/50 dark:text-indigo-300' : 'border-transparent text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700' }}">
                    Dashboard
                </a>

                <a href="{{ route('orders.index') }}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 {{ request()->routeIs('orders.*') && !request()->routeIs('checkout*') ? 'border-indigo-500 text-indigo-700 bg-indigo-50 dark:bg-indigo-900/50 dark:text-indigo-300' : 'border-transparent text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700' }}">
                    Orders
                </a>

                <a href="{{ route('checkout') }}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 {{ request()->routeIs('checkout*') ? 'border-indigo-500 text-indigo-700 bg-indigo-50 dark:bg-indigo-900/50 dark:text-indigo-300' : 'border-transparent text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700' }}">
                    Checkout
                </a>

                <!-- Products Section (Accordion) -->
                <div class="border-l-4 {{ request()->routeIs('products.*') ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/50' : 'border-transparent' }}">
                    <button @click="productsOpen = !productsOpen" class="w-full flex items-center justify-between py-2 pl-3 pr-4 text-base font-medium text-gray-800 dark:text-gray-200">
                        <span>Products</span>
                        <svg class="w-5 h-5 transition-transform" :class="{'rotate-180': productsOpen}" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                    <div x-show="productsOpen" x-collapse>
                    <a href="{{ route('products.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('products.index') && !request('type') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                        All Products
                    </a>
                    <a href="{{ route('products.index', ['type' => 'single']) }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request('type') == 'single' ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                        Single Products
                    </a>
                    <a href="{{ route('products.index', ['type' => 'bundle']) }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request('type') == 'bundle' ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                        Bundles / Packages
                    </a>
                    <a href="{{ route('products.create') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('products.create') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                        + Add New Product
                    </a>
                    </div>
                </div>

                <!-- Reports Section (Accordion) -->
                <div class="border-l-4 {{ request()->routeIs('reports.*') ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/50' : 'border-transparent' }}">
                    <button @click="reportsOpen = !reportsOpen" class="w-full flex items-center justify-between py-2 pl-3 pr-4 text-base font-medium text-gray-800 dark:text-gray-200">
                        <span>Reports</span>
                        <svg class="w-5 h-5 transition-transform" :class="{'rotate-180': reportsOpen}" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                    <div x-show="reportsOpen" x-collapse>
                    <a href="{{ route('reports.sales') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('reports.sales*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                        Sales Reports
                    </a>
                    @if(auth()->user()->can_manage_tiktok_shop || auth()->user()->isAdmin())
                        <a href="{{ route('reports.tiktok-shop') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('reports.tiktok-shop*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            TikTok Shop Reports
                        </a>
                    @endif
                    @if(auth()->user()->isAdmin())
                        <div class="border-t border-gray-200 dark:border-gray-700 my-1 mx-6"></div>
                        <a href="{{ route('reports.seller-kpi') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('reports.seller-kpi*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Seller KPIs
                        </a>
                        <div class="border-t border-gray-200 dark:border-gray-700 my-1 mx-6"></div>
                        <a href="{{ route('reports.marketing-strategy') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('reports.marketing-strategy*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Marketing Strategy
                        </a>
                        <a href="{{ route('reports.forecast') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('reports.forecast*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Overall Forecast
                        </a>
                    @endif
                    </div>
                </div>

                <!-- Settings Section -->
                @if(auth()->user()->isAdmin())
                    <!-- Admin: Full Settings Menu (Accordion) -->
                    <div class="border-l-4 {{ request()->routeIs('settings.*') ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/50' : 'border-transparent' }}">
                        <button @click="settingsOpen = !settingsOpen" class="w-full flex items-center justify-between py-2 pl-3 pr-4 text-base font-medium text-gray-800 dark:text-gray-200">
                            <span>Settings</span>
                            <svg class="w-5 h-5 transition-transform" :class="{'rotate-180': settingsOpen}" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                        <div x-show="settingsOpen" x-collapse>
                        <!-- Group 1: Business Setup -->
                        <a href="{{ route('settings.stores') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.stores*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Store
                        </a>
                        <a href="{{ route('settings.webhooks.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.webhooks.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Channel
                        </a>
                        <a href="{{ route('settings.sales-pages.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.sales-pages.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Sales Page
                        </a>
                        <a href="{{ route('settings.tiktok-shops.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.tiktok-shops.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            TikTok Shop
                        </a>
                        <!-- Group 2: Access & Integration -->
                        <div class="border-t border-gray-200 dark:border-gray-700 my-1 mx-6"></div>
                        <a href="{{ route('settings.users.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.users.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Users
                        </a>
                        <a href="{{ route('settings.google-sheets') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.google-sheets*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Google Sheets
                        </a>
                        <a href="{{ route('settings.facebook.settings') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.facebook.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Facebook
                        </a>
                        <!-- Group 3: System Configuration -->
                        <div class="border-t border-gray-200 dark:border-gray-700 my-1 mx-6"></div>
                        <a href="{{ route('settings.system') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.system*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            System
                        </a>
                        <a href="{{ route('settings.couriers') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.couriers*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Courier
                        </a>
                        <a href="{{ route('settings.notifications.whatsapp') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.notifications.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Notifications
                        </a>
                        <a href="{{ route('settings.cloudflare') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.cloudflare*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Cloudflare
                        </a>
                        <a href="{{ route('settings.seller-domains.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.seller-domains.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Seller Domains
                        </a>
                        </div>
                    </div>
                @elseif(auth()->user()->isManager())
                    <!-- Manager: Management Section (Accordion) -->
                    <div class="border-l-4 {{ request()->routeIs('stores.*') || request()->routeIs('settings.users.*') || request()->routeIs('settings.sales-pages.*') ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/50' : 'border-transparent' }}">
                        <button @click="managementOpen = !managementOpen" class="w-full flex items-center justify-between py-2 pl-3 pr-4 text-base font-medium text-gray-800 dark:text-gray-200">
                            <span>Management</span>
                            <svg class="w-5 h-5 transition-transform" :class="{'rotate-180': managementOpen}" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                        <div x-show="managementOpen" x-collapse>
                        <a href="{{ route('settings.users.index', ['role' => 'seller']) }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.users.index') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            View Sellers
                        </a>
                        <a href="{{ route('settings.stores') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.stores') || request()->routeIs('settings.stores.edit') || request()->routeIs('settings.stores.show') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            View Stores
                        </a>
                        <a href="{{ route('settings.sales-pages.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.sales-pages.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            View Pages
                        </a>
                        </div>
                    </div>
                @else
                    <!-- Seller: My Stores Section (Accordion) -->
                    <div class="border-l-4 {{ request()->routeIs('stores.*') || request()->routeIs('settings.sales-pages.*') || request()->routeIs('seller-domains.*') ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/50' : 'border-transparent' }}">
                        <button @click="myStoresOpen = !myStoresOpen" class="w-full flex items-center justify-between py-2 pl-3 pr-4 text-base font-medium text-gray-800 dark:text-gray-200">
                            <span>My Stores</span>
                            <svg class="w-5 h-5 transition-transform" :class="{'rotate-180': myStoresOpen}" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                        <div x-show="myStoresOpen" x-collapse>
                        <a href="{{ route('settings.stores') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.stores') || request()->routeIs('settings.stores.edit') || request()->routeIs('settings.stores.show') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            View My Stores
                        </a>
                        <a href="{{ route('settings.sales-pages.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.sales-pages.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            View My Pages
                        </a>
                        <a href="{{ route('settings.seller-domains.index') }}" class="block py-2 pl-6 pr-4 text-sm font-medium {{ request()->routeIs('settings.seller-domains.*') ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200' }}">
                            Custom Domains
                        </a>
                        </div>
                    </div>
                @endif
            </div>

            <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center px-4">
                    <div class="shrink-0">
                        <div class="flex items-center justify-center w-10 h-10 text-white bg-indigo-600 rounded-full">
                            {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                        </div>
                    </div>
                    <div class="ml-3">
                        <div class="text-base font-medium text-gray-800 dark:text-white">{{ Auth::user()->name }}</div>
                        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ Auth::user()->email }}</div>
                    </div>
                </div>

                <div class="mt-3 space-y-1">
                    <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700">
                        Profile
                    </a>
                    @if(auth()->user()->isSeller() || auth()->user()->isManager())
                        <a href="{{ route('settings.notifications.whatsapp') }}" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700">
                            Notifications
                        </a>
                    @endif
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="block w-full px-4 py-2 text-base font-medium text-left text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700">
                            Log Out
                        </button>
                    </form>
                </div>
            </div>
            @else
            <div class="pt-2 pb-3 space-y-1">
                <a href="{{ route('login') }}" class="block py-2 pl-3 pr-4 text-base font-medium text-gray-600 border-l-4 border-transparent dark:text-gray-400 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-700">
                    Log in
                </a>
                @if (Route::has('register'))
                <a href="{{ route('register') }}" class="block py-2 pl-3 pr-4 text-base font-medium text-gray-600 border-l-4 border-transparent dark:text-gray-400 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-700">
                    Register
                </a>
                @endif
            </div>
            @endauth
        </div>
    </nav>

    <!-- Global Warning Banners -->
    @auth
        {{-- Google Sheets Connection Error Banner (for Sellers) --}}
        @if(auth()->user()->isSeller() && auth()->user()->google_sheets_sync_enabled && auth()->user()->google_sheets_connection_error)
            <div class="bg-amber-500 dark:bg-amber-600">
                <div class="max-w-7xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
                    <div class="flex items-center justify-between flex-wrap">
                        <div class="w-0 flex-1 flex items-center">
                            <span class="flex p-1 rounded-lg bg-amber-600 dark:bg-amber-700">
                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                            </span>
                            <p class="ml-3 font-medium text-white truncate">
                                <span class="md:hidden">Google Sheets sync broken!</span>
                                <span class="hidden md:inline">Google Sheets connection broken - your orders are NOT being recorded. Please reconnect.</span>
                            </p>
                        </div>
                        <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
                            <a href="{{ route('google-sheets.auth') }}"
                               class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-amber-600 bg-white hover:bg-amber-50">
                                Reconnect Now
                            </a>
                        </div>
                        <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
                            <a href="{{ route('settings.google-sheets') }}" class="-mr-1 flex p-2 rounded-md hover:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
                                <span class="sr-only">View details</span>
                                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endauth

    <!-- Page Content -->
    <main>
        @if (session('success'))
            <div class="px-4 py-3 mx-auto mt-4 max-w-7xl sm:px-6 lg:px-8" id="flash-success-message">
                <div class="p-4 text-green-700 bg-green-100 border border-green-400 rounded dark:bg-green-900/50 dark:border-green-700 dark:text-green-300 relative">
                    {{ session('success') }}
                    <button onclick="this.parentElement.parentElement.remove()" class="absolute top-2 right-2 text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100">
                        <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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            <script>
                // Auto-dismiss flash message after 5 seconds
                setTimeout(function() {
                    const flashMsg = document.getElementById('flash-success-message');
                    if (flashMsg) {
                        flashMsg.style.transition = 'opacity 0.5s';
                        flashMsg.style.opacity = '0';
                        setTimeout(function() { flashMsg.remove(); }, 500);
                    }
                }, 5000);
            </script>
        @endif

        @if (session('error'))
            <div class="px-4 py-3 mx-auto mt-4 max-w-7xl sm:px-6 lg:px-8">
                <div class="p-4 text-red-700 bg-red-100 border border-red-400 rounded dark:bg-red-900/50 dark:border-red-700 dark:text-red-300">
                    {{ session('error') }}
                </div>
            </div>
        @endif

        @yield('content')

        @isset($slot)
            {{ $slot }}
        @endisset
    </main>

    <!-- Footer -->
    <footer class="py-6 mt-12 bg-white border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="text-center text-gray-600 dark:text-gray-400">
                <p>{{ App\Models\SystemSetting::getFooterText() }}</p>
            </div>
        </div>
    </footer>
</div>
@endsection