{{-- ════════════════════════════════════════
     LEFT SIDEBAR  — desktop fixed, mobile drawer
     ════════════════════════════════════════ --}}

<aside
    :class="{ 'mob-open': mobileOpen }"
    @touchstart.passive="onTouchStart($event)"
    @touchmove.passive="onTouchMove($event)"
    @touchend="onTouchEnd()"
    class="app-sidebar"
>

    {{-- ── Logo ── --}}
    <div class="app-sidebar-logo">
        <div class="app-sidebar-logo-mark">
            {{-- OB monogram --}}
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8" cy="10" r="5" stroke="white" stroke-width="2"/>
                <path d="M13 6h2.5A2.5 2.5 0 0118 8.5v3a2.5 2.5 0 01-2.5 2.5H13" stroke="white" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </div>
        <span class="app-sidebar-logo-text">OrderBuddy</span>
    </div>

    {{-- ── Nav ── --}}
    <nav class="app-sidebar-nav">

        {{-- Dashboard --}}
          <a href="{{ route('dashboard') }}"
              @click="mobileOpen = false"
           class="app-sidebar-item {{ request()->routeIs('dashboard') ? 'is-active' : '' }}"
           data-label="Dashboard">
            <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                <rect x="14" y="14" width="7" height="7" rx="1.5"/>
            </svg>
            <span class="app-sidebar-label">{{ __('messages.dashboard') }}</span>
        </a>


        {{-- Reports (with submenu) --}}
        <div x-data="{ reportsOpen: {{ request()->routeIs('reports.*') ? 'true' : 'false' }} }" class="w-full">
            <button
                type="button"
                @click="reportsOpen = !reportsOpen"
                class="app-sidebar-item {{ request()->routeIs('reports.*') ? 'is-active' : '' }}"
                data-label="Reports"
            >
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="12" width="4" height="9" rx="1"/>
                    <rect x="10" y="7" width="4" height="14" rx="1"/>
                    <rect x="17" y="3" width="4" height="18" rx="1"/>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.reports') }}</span>
                <svg class="app-sidebar-chevron h-4 w-4 transition-transform duration-150" :class="reportsOpen ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z" clip-rule="evenodd" />
                </svg>
            </button>
            <div x-show="reportsOpen" class="mt-1 space-y-1">
                <a href="{{ route('reports.x') }}" class="app-sidebar-item pl-8 {{ request()->routeIs('reports.x') ? 'is-active' : '' }}" data-label="X Report">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3z"/>
                        <path d="M9 9l6 6"/>
                        <path d="M15 9l-6 6"/>
                    </svg>
                    <span class="app-sidebar-label">X Report</span>
                </a>
                <a href="{{ route('reports.z') }}" class="app-sidebar-item pl-8 {{ request()->routeIs('reports.z') ? 'is-active' : '' }}" data-label="Z Report">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3z"/>
                        <path d="M9 12l2.2 2.2L15.5 10"/>
                    </svg>
                    <span class="app-sidebar-label">Z Report</span>
                </a>
                <a href="{{ route('reports.sales') }}" class="app-sidebar-item pl-8 {{ request()->routeIs('reports.sales') ? 'is-active' : '' }}" data-label="Sales Report">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="12" width="4" height="9" rx="1"/>
                        <rect x="10" y="7" width="4" height="14" rx="1"/>
                        <rect x="17" y="3" width="4" height="18" rx="1"/>
                    </svg>
                    <span class="app-sidebar-label">Sales Report</span>
                </a>
                <a href="{{ route('reports.index') }}" class="app-sidebar-item pl-8 {{ request()->routeIs('reports.index') ? 'is-active' : '' }}" data-label="Report Section">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M8 12h8M12 8v8"/>
                    </svg>
                    <span class="app-sidebar-label">Report Section</span>
                </a>
            </div>
        </div>

        <div class="app-sidebar-sep"></div>

        <div x-data="{ stockOpen: {{ request()->routeIs('stock.*') ? 'true' : 'false' }} }" class="w-full">
            {{-- Stock --}}
            <button
                type="button"
                @click="stockOpen = !stockOpen"
                class="app-sidebar-item {{ request()->routeIs('stock.*') ? 'is-active' : '' }}"
                data-label="Stock"
            >
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 7h16"></path>
                    <path d="M4 12h16"></path>
                    <path d="M4 17h16"></path>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.stock') }}</span>
                <svg class="app-sidebar-chevron h-4 w-4 transition-transform duration-150" :class="stockOpen ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z" clip-rule="evenodd" />
                </svg>
            </button>

            <div x-show="stockOpen" class="mt-1 space-y-1">
                <a href="{{ route('stock.list') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('stock.list') ? 'is-active' : '' }}"
                    data-label="Stock: Stock List">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="4" y="4" width="16" height="16" rx="2"></rect>
                        <path d="M8 9h8"></path>
                        <path d="M8 13h8"></path>
                        <path d="M8 17h5"></path>
                    </svg>
                    <span class="app-sidebar-label">Stock List</span>
                </a>
            </div>
        </div>

        <div class="app-sidebar-sep"></div>

        <div x-data="{ customersOpen: {{ request()->routeIs('customers.*') ? 'true' : 'false' }} }" class="w-full">
            {{-- Customers --}}
            <button
                type="button"
                @click="customersOpen = !customersOpen"
                class="app-sidebar-item {{ request()->routeIs('customers.*') ? 'is-active' : '' }}"
                data-label="Customers"
            >
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="8" r="3"/>
                    <path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.customers') }}</span>
                <svg class="app-sidebar-chevron h-4 w-4 transition-transform duration-150" :class="customersOpen ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z" clip-rule="evenodd" />
                </svg>
            </button>

            <div x-show="customersOpen" class="mt-1 space-y-1">
                <a href="{{ route('customers.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('customers.*') ? 'is-active' : '' }}"
                    data-label="Customers List">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 6h16"/>
                        <path d="M4 12h16"/>
                        <path d="M4 18h10"/>
                    </svg>
                    <span class="app-sidebar-label">{{ __('messages.customers') }}</span>
                </a>
            </div>
        </div>

        <div class="app-sidebar-sep"></div>

        <div x-data="{ loyaltyOpen: {{ request()->routeIs('loyalty.*') ? 'true' : 'false' }} }" class="w-full">
            {{-- Loyalty --}}
            <button
                type="button"
                @click="loyaltyOpen = !loyaltyOpen"
                class="app-sidebar-item {{ request()->routeIs('loyalty.*') ? 'is-active' : '' }}"
                data-label="Loyalty"
            >
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 21s-6-4.35-8.5-8.5A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 8.5 6.5C18 16.65 12 21 12 21z"/>
                    <path d="M12 8.5v7"/>
                    <path d="M8.5 12h7"/>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.loyalty') }}</span>
                <svg class="app-sidebar-chevron h-4 w-4 transition-transform duration-150" :class="loyaltyOpen ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z" clip-rule="evenodd" />
                </svg>
            </button>

            <div x-show="loyaltyOpen" class="mt-1 space-y-1">
                <a href="{{ route('loyalty.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('loyalty.*') ? 'is-active' : '' }}"
                    data-label="Loyalty Dashboard">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 19V5"/>
                        <path d="M4 19h16"/>
                        <path d="M8 15l3-3 3 2 5-6"/>
                    </svg>
                    <span class="app-sidebar-label">{{ __('messages.loyalty') }}</span>
                </a>
            </div>
        </div>

        <div class="app-sidebar-sep"></div>

                {{-- Live Orders --}}
                    <a href="{{ route('live-orders.index') }}"
              @click="mobileOpen = false"
                     class="app-sidebar-item {{ request()->routeIs('live-orders.*') ? 'is-active' : '' }}"
           data-label="Live Orders">
            <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"/>
                <path d="M6.3 17.7a8 8 0 1111.4 0"/>
                <path d="M9.5 14.5a4 4 0 015 0"/>
            </svg>
            <span class="app-sidebar-label">{{ __('messages.live_orders') }}</span>
        </a>

        <div class="app-sidebar-sep"></div>

        <div x-data="{ settingsOpen: {{ request()->routeIs('staff.*') || request()->routeIs('brands.*') || request()->routeIs('branches.*') || request()->routeIs('notifications.*') ? 'true' : 'false' }} }" class="w-full">
            {{-- Settings --}}
            <button
                type="button"
                @click="settingsOpen = !settingsOpen"
                class="app-sidebar-item {{ request()->routeIs('staff.*') || request()->routeIs('brands.*') || request()->routeIs('branches.*') ? 'is-active' : '' }}"
                data-label="Settings"
            >
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0A1.65 1.65 0 0 0 10 3.09V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.settings') }}</span>
                <svg class="app-sidebar-chevron h-4 w-4 transition-transform duration-150" :class="settingsOpen ? 'rotate-90' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z" clip-rule="evenodd" />
                </svg>
            </button>

            <div x-show="settingsOpen" class="mt-1 space-y-1">
                <a href="{{ route('staff.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('staff.*') ? 'is-active' : '' }}"
                    data-label="Settings: Staff">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="8" r="3"/>
                        <path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/>
                        <path d="M17 11l2 2 4-4"/>
                    </svg>
                    <span class="app-sidebar-label">{{ __('messages.staff') }}</span>
                </a>

                <a href="{{ route('brands.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('brands.*') ? 'is-active' : '' }}"
                    data-label="Settings: Brands">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 3l9 4.5v9L12 21l-9-4.5v-9L12 3z"/>
                        <path d="M12 12l9-4.5"/>
                        <path d="M12 12v9"/>
                        <path d="M12 12L3 7.5"/>
                    </svg>
                    <span class="app-sidebar-label">{{ __('messages.brands') }}</span>
                </a>

                <a href="{{ route('branches.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('branches.*') ? 'is-active' : '' }}"
                    data-label="Settings: Branches">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 21h18"/>
                        <path d="M5 21V7l7-4 7 4v14"/>
                        <path d="M9 10h2m4 0h-2m-2 0v2m0 4h2m-2 0h-2m4-4h-2"/>
                        <rect x="9" y="14" width="6" height="7" rx="0.5"/>
                    </svg>
                    <span class="app-sidebar-label">{{ __('messages.branches') }}</span>
                </a>

                <a href="{{ route('notifications.index') }}"
                    @click="mobileOpen = false"
                    class="app-sidebar-item pl-8 {{ request()->routeIs('notifications.*') ? 'is-active' : '' }}"
                    data-label="Settings: Notifications">
                    <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                        <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                    </svg>
                    <span class="app-sidebar-label">Notifications</span>
                </a>
            </div>
        </div>

    </nav>

    {{-- ── Bottom: Profile / Logout ── --}}
    <div class="app-sidebar-bottom">

        <div class="relative">
            <x-language-switcher />
        </div>

          <a href="{{ route('profile.edit') }}"
              @click="mobileOpen = false"
           class="app-sidebar-item {{ request()->routeIs('profile.*') ? 'is-active' : '' }}"
           data-label="Profile">
            <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="8" r="4"/>
                <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
            </svg>
            <span class="app-sidebar-label">{{ __('messages.profile') }}</span>
        </a>

        <form method="POST" action="{{ route('logout') }}" class="w-full">
            @csrf
            <button type="submit" @click="mobileOpen = false" class="app-sidebar-item w-full text-left" data-label="Log Out">
                <svg class="app-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
                    <polyline points="16 17 21 12 16 7"/>
                    <line x1="21" y1="12" x2="9" y2="12"/>
                </svg>
                <span class="app-sidebar-label">{{ __('messages.logout') }}</span>
            </button>
        </form>

    </div>

</aside>