@php
    use App\Enums\OrderStatus;
    $orderSound = asset('sounds/notify.mp3');
@endphp
<div class="space-y-6 p-4 md:p-6 pb-20">

    <!-- Edit Slide Over -->
    <x-ui.slide-over wire:model.live="editingOrderId" max-width="6xl">
        @if ($editingOrderId)
            <div class="h-full flex flex-col">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('dashboard.edit_order') }}
                        #{{ $editingOrderId }}</h2>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('orders.print', $editingOrderId) }}" target="_blank"
                            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <span class="sr-only">{{ __('dashboard.print') }}</span>
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2-2v4h10z" />
                            </svg>
                        </a>
                        <button wire:click="closeOrder" class="text-gray-400 hover:text-gray-500">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
                <!-- Load Edit Component -->
                <!-- We pass a key to ensure it re-initializes on change -->
                <livewire:orders.edit :order="$editingOrderId" :key="'order-edit-' . $editingOrderId" :is-slide-over="true" />
            </div>
        @endif
    </x-ui.slide-over>

    <!-- Stats Header -->
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <div class="flex items-center gap-3">
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ __('dashboard.active_orders') }}
                    </p>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['active'] }}</h3>
                </div>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <div class="flex items-center gap-3">
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ __('dashboard.pending') }}</p>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['pending'] }}</h3>
                </div>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <div class="flex items-center gap-3">
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">
                        {{ __('dashboard.completed_today') }}</p>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['completed_today'] }}</h3>
                </div>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <div class="flex items-center gap-3">
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            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>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ __('dashboard.revenue') }}</p>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ currency($stats['revenue_today']) }}
                    </h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Controls & Filters -->
    <div
        class="flex flex-col gap-4 sticky top-0 z-10 bg-gray-50/95 backdrop-blur dark:bg-black/20 py-2 -mx-4 px-4 md:-mx-6 md:px-6">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="flex items-center gap-2 overflow-x-auto pb-1 md:pb-0 no-scrollbar">
                <!-- Status Tabs -->
                @php
                    $tabs = [
                        ['id' => 'all', 'label' => __('All'), 'icon' => 'M4 6h16M4 10h16M4 14h16M4 18h16'],
                        [
                            'id' => 'pending',
                            'label' => __('Pending'),
                            'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
                        ],
                        [
                            'id' => 'processing',
                            'label' => __('Kitchen'),
                            'icon' =>
                                'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C13 5 16.08 5.54 17.657 8.343a8 8 0 010 10.314z',
                        ],
                        [
                            'id' => 'ready',
                            'label' => __('Ready'),
                            'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
                        ],
                        ['id' => 'delivery', 'label' => __('Service'), 'icon' => 'M13 10V3L4 14h7v7l9-11h-7z'],
                        ['id' => 'completed', 'label' => __('History'), 'icon' => 'M5 13l4 4L19 7'],
                    ];
                @endphp

                <div
                    class="flex p-1 space-x-1 bg-gray-100/50 hover:bg-gray-100 dark:bg-gray-800/50 dark:hover:bg-gray-800 rounded-xl transition-colors">
                    @foreach ($tabs as $tab)
                        <button wire:click="$set('activeTab', '{{ $tab['id'] }}')"
                            class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                            {{ $activeTab === $tab['id']
                                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm ring-1 ring-gray-200 dark:ring-gray-600'
                                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
                            <svg class="w-4 h-4 {{ $activeTab === $tab['id'] ? 'text-brand-500' : 'opacity-70' }}"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="{{ $tab['icon'] }}" />
                            </svg>
                            {{ $tab['label'] }}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center gap-3 w-full md:w-auto">

                <div class="relative mb-2 sm:mb-0">
                    <span class="absolute top-1/2 left-4 -translate-y-1/2">
                        <svg class="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M3.04175 9.37363C3.04175 5.87693 5.87711 3.04199 9.37508 3.04199C12.8731 3.04199 15.7084 5.87693 15.7084 9.37363C15.7084 12.8703 12.8731 15.7053 9.37508 15.7053C5.87711 15.7053 3.04175 12.8703 3.04175 9.37363ZM9.37508 1.54199C5.04902 1.54199 1.54175 5.04817 1.54175 9.37363C1.54175 13.6991 5.04902 17.2053 9.37508 17.2053C11.2674 17.2053 13.003 16.5344 14.357 15.4176L17.177 18.238C17.4699 18.5309 17.9448 18.5309 18.2377 18.238C18.5306 17.9451 18.5306 17.4703 18.2377 17.1774L15.418 14.3573C16.5365 13.0033 17.2084 11.2669 17.2084 9.37363C17.2084 5.04817 13.7011 1.54199 9.37508 1.54199Z"
                                fill="" />
                        </svg>
                    </span>
                    <x-ui.input.text id="search-input" icon="magnifying-glass" wire:model.live="search"
                        class="py-2.5 pe-14 ps-12 bg-white dark:bg-gray-800 "
                        placeholder="{{ __('dashboard.search') }}" />

                    <button type="button" id="search-button"
                        class="absolute top-1/2 right-2.5 inline-flex -translate-y-1/2 items-center gap-0.5 rounded-lg border border-gray-200 bg-gray-50 px-[7px] py-[4.5px] text-xs -tracking-[0.2px] text-gray-500 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400">
                        <span> ⌘ </span>
                        <span> K </span>
                    </button>
                </div>

                @can('create', $this->getModelClass())
                    <x-ui.button.index wire:navigate href="{{ route('pos.index') }}"
                        class="!h-10 !px-4 shadow-sm hover:shadow-md transition-shadow">
                        <svg class="h-4 w-4 me-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        {{ __('dashboard.new_order') }}
                    </x-ui.button.index>
                @endcan
            </div>
        </div>

        <!-- Secondary Filters Row -->
        <div
            class="flex flex-col md:flex-row gap-4 items-center justify-between pt-4 border-t border-gray-200/50 dark:border-gray-700/50">
            <div class="flex items-center gap-3 w-full md:w-auto overflow-x-auto no-scrollbar pb-1">
                <!-- Date Preset -->
                <div class="min-w-[150px]">
                    <x-ui.input.select wire:model.live="filters.date_preset"
                        class="!h-10 !text-sm bg-white dark:bg-gray-800">
                        <option value="">{{ __('All Time') }}</option>
                        <option value="today">{{ __('Today') }}</option>
                        <option value="yesterday">{{ __('Yesterday') }}</option>
                        <option value="this_week">{{ __('This Week') }}</option>
                        <option value="this_month">{{ __('This Month') }}</option>
                    </x-ui.input.select>
                </div>

                <!-- Date Range (Custom) -->
                @if (($filters['date_preset'] ?? '') === 'custom' || empty($filters['date_preset'] ?? ''))
                    <div class="flex items-center gap-2">
                        <x-ui.input.date wire:model.live="filters.date_from"
                            class="!h-10 !w-auto !text-sm bg-white dark:bg-gray-800" />
                        <span class="text-gray-400">-</span>
                        <x-ui.input.date wire:model.live="filters.date_to"
                            class="!h-10 !w-auto !text-sm bg-white dark:bg-gray-800" />
                    </div>
                @endif
            </div>

            <div class="flex items-center gap-4 shrink-0">
                <!-- Auto Refresh Toggle -->
                <div class="flex items-center gap-3">
                    <div wire:loading wire:target="autoRefresh" class="animate-spin h-4 w-4 text-brand-500">
                        <svg fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                            </path>
                        </svg>
                    </div>
                    <x-ui.input.switch wire:model.live="autoRefresh" :label="__('Auto-Refresh')" />
                </div>
            </div>
        </div>
    </div>

    <!-- Main Grid Content -->
    <div @if ($autoRefresh) wire:poll.KeepAlive.{{ $refreshInterval }} @endif class="min-h-[500px]">

        @if ($rows->isEmpty())
            <div class="flex flex-col items-center justify-center py-20 text-center">
                <div class="bg-gray-50 dark:bg-gray-800/50 rounded-full p-6 mb-4">
                    <svg class="w-12 h-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ __('dashboard.no_orders_found') }}
                </h3>
                <p class="text-gray-500 dark:text-gray-400 mt-1 max-w-sm">
                    {{ __('Try adjusting your filters or active tab to find what you are looking for.') }}</p>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach ($rows as $order)
                    <div
                        class="group relative bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700/50 shadow-sm hover:shadow-lg hover:border-brand-500/30 dark:hover:border-brand-500/30 transition-all duration-300 flex flex-col overflow-hidden">

                        <!-- Selection Checkbox -->
                        {{-- <div class="absolute top-3 right-3 z-20" onclick="event.stopPropagation()">
                            <input type="checkbox" wire:model.live="selectedRecords" value="{{ $order->id }}"
                                class="rounded border-gray-300 text-brand-600 shadow-sm focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600">
                        </div> --}}

                        <!-- Progress Bar -->
                        @php
                            $allowedParams = \App\Enums\OrderStatus::allowedForType($order->type);
                            $currentIdx = array_search($order->status, $allowedParams);
                            $totalSteps = count($allowedParams);
                            $progress = $totalSteps > 1 ? ($currentIdx / ($totalSteps - 1)) * 100 : 0;

                            if ($order->status === \App\Enums\OrderStatus::Completed) {
                                $progress = 100;
                            }

                            $nextStatus = $allowedParams[$currentIdx + 1] ?? null;
                            if ($nextStatus === \App\Enums\OrderStatus::Cancelled) {
                                $nextStatus = $allowedParams[$currentIdx + 2] ?? null;
                            }
                        @endphp
                        <div class="absolute top-0 left-0 right-0 h-1 bg-gray-100 dark:bg-gray-700">
                            <div class="h-full bg-{{ $order->status->color() }}-500 transition-all duration-500"
                                style="width: {{ $progress }}%"></div>
                        </div>

                        <div class="p-5 flex-1" wire:click="openOrder({{ $order->id }})">
                            <!-- Header -->
                            <div class="flex items-start justify-between mb-3 mt-1">
                                <div>
                                    <h3 class="font-bold text-gray-900 dark:text-white text-lg">#{{ $order->id }}
                                    </h3>
                                    <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-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                            {{ $order->type->label() }}
                                        </span>
                                        @if ($order->table)
                                            <span
                                                class="text-xs text-brand-600 dark:text-brand-400 font-medium bg-brand-50 dark:bg-brand-500/10 px-2 py-0.5 rounded">
                                                {{ $order->table->name }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <span
                                    class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-{{ $order->status->color() }}-50 text-{{ $order->status->color() }}-700 dark:bg-{{ $order->status->color() }}-500/10 dark:text-{{ $order->status->color() }}-400 border border-{{ $order->status->color() }}-100 dark:border-{{ $order->status->color() }}-500/20">
                                    {{ $order->status->label() }}
                                </span>
                            </div>

                            <!-- Items Preview -->
                            <div class="space-y-2 mb-4">
                                @foreach ($order->items->take(2) as $item)
                                    <div
                                        class="flex justify-between text-sm group-hover/item:bg-gray-50 rounded p-1 -mx-1 transition-colors">
                                        <div class="flex items-center gap-2 truncate pr-2">
                                            <span
                                                class="flex-none flex items-center justify-center w-5 h-5 rounded bg-gray-100 dark:bg-gray-700 text-xs font-bold text-gray-600 dark:text-gray-300">{{ $item->qty }}</span>
                                            <span
                                                class="text-gray-700 dark:text-gray-200 truncate">{{ $item->name }}</span>
                                        </div>
                                        <span
                                            class="text-gray-500 dark:text-gray-400 text-xs font-medium">{{ currency($item->line_total) }}</span>
                                    </div>
                                @endforeach
                                @if ($order->items->count() > 2)
                                    <p class="text-xs text-gray-400 pl-1">+ {{ $order->items->count() - 2 }}
                                        {{ __('dashboard.more_items') }}</p>
                                @endif
                            </div>

                            <!-- Driver Info -->
                            @if ($order->deliveryAgent)
                                <div
                                    class="mt-3 flex items-center gap-2 p-2 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-100 dark:border-indigo-800">
                                    <div
                                        class="w-6 h-6 rounded-full bg-indigo-200 dark:bg-indigo-800 flex items-center justify-center text-xs font-bold text-indigo-700 dark:text-indigo-300">
                                        {{ $order->deliveryAgent->initials() }}
                                    </div>
                                    <div class="flex flex-col">
                                        <span
                                            class="text-[10px] text-gray-500 uppercase font-semibold leading-none">{{ __('dashboard.driver') }}</span>
                                        <span
                                            class="text-xs font-bold text-gray-900 dark:text-white leading-tight">{{ $order->deliveryAgent->name }}</span>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Footer Actions -->
                        <div
                            class="p-4 bg-gray-50/50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700/50 flex items-center justify-between gap-3">
                            <div class="flex flex-col">
                                <span
                                    class="text-xs text-gray-400 font-medium uppercase">{{ __('dashboard.total') }}</span>
                                <span
                                    class="font-bold text-gray-900 dark:text-white text-lg leading-none">{{ currency($order->total) }}</span>
                            </div>

                            @if ($nextStatus)
                                <button wire:click.stop="advanceStatus({{ $order->id }})"
                                    class="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm font-bold text-gray-900 dark:text-white hover:border-brand-500 hover:text-brand-600 dark:hover:border-brand-500 dark:hover:text-brand-400 shadow-sm transition-all group-hover:translate-x-1">
                                    {{ $nextStatus->label() }}
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                </button>
                            @else
                                <div
                                    class="px-3 py-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-xs font-bold rounded-lg flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7" />
                                    </svg>
                                    {{ __('Completed') }}
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-8">
                {{ $rows->links() }}
            </div>

            <!-- Bulk Selection Floating Bar -->
            <div x-data x-show="$wire.selectedRecords.length > 0"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="translate-y-full opacity-0"
                x-transition:enter-end="translate-y-0 opacity-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="translate-y-0 opacity-100"
                x-transition:leave-end="translate-y-full opacity-0"
                class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-2xl rounded-2xl p-4 flex items-center gap-6 min-w-[300px]"
                style="display: none;">

                <div class="flex items-center gap-3">
                    <span
                        class="flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 text-brand-600 font-bold text-sm"
                        x-text="$wire.selectedRecords.length"></span>
                    <span
                        class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ __('dashboard.selected') }}</span>
                </div>

                <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>

                <div class="flex items-center gap-2">
                    <button wire:click="openBulkStatusModal"
                        class="px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm font-semibold transition-colors">
                        {{ __('dashboard.change_status') }}
                    </button>
                    <button wire:click="confirmBulkDeletion"
                        class="px-4 py-2 rounded-xl bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 text-sm font-semibold transition-colors">
                        {{ __('dashboard.delete') }}
                    </button>
                </div>

                <button wire:click="resetBulkDeleteState"
                    class="absolute -top-2 -right-2 p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        @endif
    </div>

    <!-- Bulk Status Update Modal -->
    <x-ui.modal wire:model="showBulkStatusModal" max-width="sm">
        <div class="p-6">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">
                {{ __('Update Status for') }} {{ count($selectedRecords) }} {{ __('Orders') }}
            </h3>

            <div class="mb-6">
                <x-ui.input.label for="bulk_status" value="{{ __('New Status') }}" />
                <x-ui.input.select wire:model="bulkTargetStatus" id="bulk_status" class="w-full">
                    <option value="">{{ __('Select Status') }}</option>
                    @foreach ($statuses as $status)
                        <option value="{{ $status['value'] }}">{{ $status['label'] }}</option>
                    @endforeach
                </x-ui.input.select>
                @error('bulkTargetStatus')
                    <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                @enderror
            </div>

            <div class="flex justify-end gap-3">
                <button wire:click="$set('showBulkStatusModal', false)"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
                    {{ __('Cancel') }}
                </button>
                <button wire:click="updateBulkStatus"
                    class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                    {{ __('Update Status') }}
                </button>
            </div>
        </div>
    </x-ui.modal>

    <div class="bg-blue-500 bg-rose-500 bg-orange-500 bg-teal-500 bg-teal-50 bg-violet-500 bg-purple-500 dark:bg-green-500/10 dark:border-green-500/20 dark:bg-blue-500/10 dark:border-blue-500/20  dark:bg-orange-500/10 dark:border-orange-500/20  dark:bg-indigo-500/10 dark:border-indigo-500/20 dark:bg-emerald-500/10 dark:border-emerald-500/20 dark:bg-rose-500/10 dark:border-rose-500/20 dark:bg-slate-500/10 dark:border-slate-500/20"></div>
    <span class="dark:bg-slate-400/10 dark:border-slate-400/30"></span>
    <span class="bg-teal-50 text-teal-700 dark:bg-teal-500/10 dark:text-teal-400 border border-teal-100 dark:border-teal-500/20"></span>
    <span class="bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-400 border border-violet-100 dark:border-violet-500/20"></span>
    <span class="bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20"></span>
    <span class="bg-slate-50 text-slate-700 dark:bg-slate-500/10 dark:text-slate-400 border border-slate-100 dark:border-slate-500/20"></span>

</div>


<script>
    (() => {
        if (window.orderSoundState) return;

        const state = {
            audio: null,
            unlocked: false,
            pendingPlay: false,
            init(soundUrl) {
                this.audio = new Audio(soundUrl);
                this.autoUnlock();
            },
            autoUnlock() {
                if (!this.audio || this.unlocked) return;
                this.audio.muted = true;
                this.audio.play().then(() => {
                    this.audio.pause();
                    this.audio.muted = false;
                    this.audio.currentTime = 0;
                    this.unlocked = true;
                    if (this.pendingPlay) {
                        this.play();
                        this.pendingPlay = false;
                    }
                }).catch(() => {
                    window.addEventListener('click', () => this.unlock(), {
                        once: true
                    });
                    window.addEventListener('touchstart', () => this.unlock(), {
                        once: true
                    });
                    window.addEventListener('keydown', () => this.unlock(), {
                        once: true
                    });
                });
            },
            unlock() {
                if (this.unlocked || !this.audio) return;
                this.audio.muted = true;
                this.audio.play().then(() => {
                    this.audio.pause();
                    this.audio.muted = false;
                    this.audio.currentTime = 0;
                    this.unlocked = true;
                    if (this.pendingPlay) {
                        this.play();
                        this.pendingPlay = false;
                    }
                }).catch(() => {});
            },
            play() {
                if (!this.audio) return;
                this.audio.currentTime = 0;
                this.audio.play().catch(() => {});
            },
            handleNewOrder() {
                if (this.unlocked) {
                    this.play();
                } else {
                    this.pendingPlay = true;
                }
            }
        };

        const register = () => {
            if (!window.Livewire || register.done) return;
            register.done = true;

            window.Livewire.on('orders-order-arrived', () => state.handleNewOrder());

            // Unlock on interaction
            window.addEventListener('click', () => state.unlock(), {
                once: true
            });

            state.init('{{ $orderSound }}');
        };

        document.addEventListener('livewire:initialized', register);
        document.addEventListener('livewire:navigated', register);

        // Fallback for immediate load if script runs late
        if (window.Livewire) register();

        window.orderSoundState = state;
    })();
</script>