@php use App\Enums\OrderStatus; @endphp
<div class="{{ $isSlideOver ? '' : 'space-y-6 max-w-[1600px] mx-auto p-4 md:p-6 pb-20' }}">
    
    <!-- Conflict Alert -->
    @error('conflict')
        <div class="mb-4  border border-red-200 bg-red-50 p-4 dark:border-red-900/50 dark:bg-red-900/20">
            <div class="flex items-start gap-3">
                <svg class="h-5 w-5 text-red-600 dark:text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <div class="flex-1">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">{{ __('dashboard.conflict_detected') }}</h3>
                    <div class="mt-1 text-sm text-red-700 dark:text-red-300">{{ $message }}</div>
                    <div class="mt-2">
                         <button wire:click="$dispatch('refresh')" onclick="window.location.reload()" class="rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                            {{ __('dashboard.reload_page') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @enderror

    <!-- Header: Hide in SlideOver as parent handles it -->
    @unless($isSlideOver)
    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div class="flex items-center gap-3">
             <a href="{{ route('orders.index') }}" wire:navigate class="flex items-center justify-center p-2 rounded-xl bg-white border border-gray-200 text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                    {{ __('dashboard.order') }} #{{ $form->model->id }}
                </h1>
                <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                    <span>{{ $form->model->created_at->format('d M Y, h:i A') }}</span>
                    <span>&bull;</span>
                    @php
                         $typeLabel = match($form->model->type) {
                            \App\Enums\OrderType::DineIn => 'Dine In',
                            \App\Enums\OrderType::Takeaway => 'Takeaway',
                            \App\Enums\OrderType::Delivery => 'Delivery',
                            \App\Enums\OrderType::Pos => 'POS',
                            default => $form->model->type->value ?? $form->model->type,
                         };
                    @endphp
                    <span>{{ $typeLabel }}</span>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('orders.print', $form->model->id) }}" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700">
                <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="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>
                {{ __('dashboard.print') }}
            </a>
            @if($readOnly)
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-amber-200 bg-amber-50 text-amber-700 text-sm font-medium dark:border-amber-900/50 dark:bg-amber-500/10 dark:text-amber-400">
                    <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                    {{ __('dashboard.read_only') }}
                </span>
            @endif
             @unless($readOnly)
                <x-ui.button.danger type="button" wire:click="$dispatch('openDetailModal', { component: 'modals.delete-order', arguments: { order: {{ $form->model->id }} } })">
                     <svg class="w-4 h-4 me-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                    {{ __('dashboard.delete') }}
                </x-ui.button.danger>
            @endunless
        </div>
    </div>
    @endunless

    {{-- @if($readOnly && $editLockReason)
        <div class="flex items-start gap-3 p-4 rounded-xl border border-amber-200 bg-amber-50 text-sm text-amber-800 dark:border-amber-900/60 dark:bg-amber-500/10 dark:text-amber-200">
            <svg class="w-5 h-5 text-amber-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
            <div><span class="font-semibold">{{ __('dashboard.note') }}:</span> {{ $editLockReason }}</div>
        </div>
    @endif --}}

    <!-- Status Wizard -->
    @unless($isSlideOver)
    <div class="rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 overflow-hidden">
        <div class="bg-gray-50/50 dark:bg-gray-800/50 px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ __('dashboard.order_status') }}</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('dashboard.track_and_manage_status') }}</p>
            </div>
            
            <div class="flex items-center gap-3">
                 <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <span class="relative flex h-2.5 w-2.5">
                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-{{ $this->currentStatusColor }}-400 opacity-75"></span>
                      <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-{{ $this->currentStatusColor }}-500"></span>
                    </span>
                    <span class="text-sm font-bold text-gray-700 dark:text-gray-200">
                        {{ $this->currentStatusLabel }}
                    </span>
                </div>

                @if ($this->nextStatus)
                    <button type="button" 
                        wire:click="setOrderStatus('{{ $this->nextStatus['value'] }}')"
                        class="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-brand-500/20 hover:bg-brand-700 hover:-translate-y-0.5 transition-all">
                        <span>{{ __('dashboard.next') }}</span>
                        <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>
                @endif
            </div>
        </div>

        <div class="p-6 overflow-x-auto">
            <div class="min-w-max flex items-center justify-between">
                @foreach ($this->statusSteps as $index => $step)
                    <div class="flex flex-col items-center gap-3 relative z-10 group cursor-pointer" wire:click="setOrderStatus('{{ $step['value'] }}')">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300 {{ $step['active'] ? 'border-brand-500 bg-brand-50 text-brand-600 scale-110 shadow-lg shadow-brand-500/20 ring-4 ring-brand-50 dark:ring-brand-900/20' : ($step['completed'] ? 'border-emerald-500 bg-emerald-50 text-emerald-600' : 'border-gray-200 bg-white text-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-600') }}">
                            @if($step['completed'])
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /></svg>
                            @elseif($step['active'])
                                <div class="w-2.5 h-2.5 rounded-full bg-brand-500"></div>
                            @else
                                <span class="text-xs font-bold">{{ $index + 1 }}</span>
                            @endif
                        </div>
                        <span class="text-xs font-bold uppercase tracking-wider {{ $step['active'] ? 'text-brand-600 dark:text-brand-400' : ($step['completed'] ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-400 dark:text-gray-500') }}">
                            {{ $step['label'] }}
                        </span>
                    </div>
                    @if(!$loop->last)
                        <div class="flex-1 h-0.5 mx-4 {{ $step['completed'] ? 'bg-emerald-500/50' : 'bg-gray-100 dark:bg-gray-800' }}"></div>
                    @endif
                @endforeach
            </div>
        </div>
    @endunless

    <div class="{{ $isSlideOver ? 'flex flex-col h-full' : 'grid grid-cols-1 lg:grid-cols-3 gap-6' }} {{ $isSlideOver ? 'pb-6' : '' }}">
        
        @if($isSlideOver)
            <!-- Top Progress Bar -->
            @php
                $allowedParams = \App\Enums\OrderStatus::allowedForType($form->model->type);
                $currentIdx = array_search($form->model->status, $allowedParams);
                $totalSteps = count($allowedParams);
                $progress = $totalSteps > 1 ? ($currentIdx / ($totalSteps - 1)) * 100 : 0;
                
                if ($form->model->status === \App\Enums\OrderStatus::Completed) {
                    $progress = 100;
                }
            @endphp
            <div class="h-1 bg-gray-100 dark:bg-gray-700 w-full flex-none">
                <div class="h-full bg-{{ $form->model->status->color() }}-500 transition-all duration-500" style="width: {{ $progress }}%"></div>
            </div>

            <div class="flex-none pt-5 pb-2 px-6 flex items-start justify-between">
                <div>
                     <h3 class="font-bold text-gray-900 dark:text-white text-2xl">#{{ $form->model->id }}</h3>
                     <div class="flex items-center gap-2 mt-1.5">
                        <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">
                            {{ $form->model->type->label() }}
                        </span>
                        @if($form->model->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">
                                {{ $form->model->table->name }}
                            </span>
                        @endif
                         <span class="text-xs text-gray-400">&bull; {{ $form->model->created_at->format('H:i') }}</span>
                     </div>
                </div>
                
                <div class="flex flex-col items-end gap-2">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-{{ $form->model->status->color() }}-50 text-{{ $form->model->status->color() }}-700 dark:bg-{{ $form->model->status->color() }}-500/10 dark:text-{{ $form->model->status->color() }}-400 border border-{{ $form->model->status->color() }}-100 dark:border-{{ $form->model->status->color() }}-500/20">
                        {{ $form->model->status->label() }}
                    </span>
                    
                     @if ($this->nextStatus)
                        <button type="button" 
                            wire:click="setOrderStatus('{{ $this->nextStatus['value'] }}')"
                            class="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-1.5 text-xs font-bold text-white shadow-sm hover:bg-brand-700 transition-all hover:scale-105 active:scale-95">
                            <span>{{ $this->nextStatus['label'] }}</span>
                            <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="M9 5l7 7-7 7" /></svg>
                        </button>
                    @endif
                </div>
            </div>
             <!-- Driver Info (if assigned) -->
            @if($form->model->deliveryAgent)
                <div class="mx-6 mt-2 mb-4 flex items-center gap-3 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-xl border border-indigo-100 dark:border-indigo-800/50">
                    <div class="relative">
                        <div class="w-10 h-10 rounded-full bg-indigo-200 dark:bg-indigo-800 flex items-center justify-center text-sm font-bold text-indigo-700 dark:text-indigo-300 ring-2 ring-white dark:ring-gray-900">
                            {{ $form->model->deliveryAgent->initials() }}
                        </div>
                        <div class="absolute -bottom-1 -right-1 bg-green-500 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900"></div>
                    </div>
                    <div class="flex-1">
                        <span class="block text-[10px] text-gray-500 uppercase font-bold tracking-wider">{{ __('dashboard.driver') }}</span>
                        <span class="block text-sm font-bold text-gray-900 dark:text-white leading-tight">{{ $form->model->deliveryAgent->name }}</span>
                    </div>
                     <a href="tel:{{ $form->model->deliveryAgent->phone }}" class="p-2 text-indigo-600 hover:bg-white dark:hover:bg-gray-800 rounded-lg transition-colors">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                    </a>
                </div>
            @endif
        @endif

        <!-- Left Column: Items (2/3) -->
        <div class="{{ $isSlideOver ? 'flex-1 overflow-y-auto min-h-0 px-6' : 'lg:col-span-2 space-y-6' }}">
            <div class="{{ $isSlideOver ? '' : 'rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 overflow-hidden' }}">
                <div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{{ __('dashboard.order_items') }} ({{ count($orderItems) }})</h2>
                     @unless($readOnly)
                        <x-ui.button.secondary size="sm" type="button" wire:click="openAddItemModal">
                            <svg class="w-4 h-4 me-1.5" 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.add_item') }}
                        </x-ui.button.secondary>
                    @endunless
                </div>
                
                
                <div class="divide-y divide-gray-100 dark:divide-gray-800">
                     @forelse ($orderItems as $line)
                        <div class="p-4 hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors group">
                            <div class="flex gap-3">
                                <!-- Quantity Badge -->
                                <div class="flex-shrink-0">
                                    <div class="w-10 h-10 rounded-lg bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/20 flex items-center justify-center">
                                        <span class="text-sm font-bold text-brand-600 dark:text-brand-400">{{ $line['qty'] }}x</span>
                                    </div>
                                </div>

                                <!-- Item Details -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between gap-3">
                                        <div class="flex-1">
                                            <h4 class="font-semibold text-gray-900 dark:text-white">{{ $line['name'] }}</h4>
                                            @php $grouped = collect($line['options'])->groupBy(fn($opt) => $opt['group'] ?: '-'); @endphp
                                            @if($grouped->isNotEmpty())
                                                <div class="mt-1.5 flex flex-wrap gap-1">
                                                    @foreach ($grouped as $groupName => $opts)
                                                        @foreach ($opts as $opt)
                                                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300">
                                                                {{ $opt['name'] }}
                                                                @if ((float) ($opt['additional_price'] ?? 0) !== 0.0)
                                                                    <span class="ms-1 text-brand-600 dark:text-brand-400">+{{ currency((float) $opt['additional_price']) }}</span>
                                                                @endif
                                                            </span>
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            @endif
                                            <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                                {{ currency((float) $line['base_price']) }} each
                                            </div>
                                        </div>

                                        <!-- Price -->
                                        <div class="text-right flex-shrink-0">
                                            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ currency((float) $line['line_total']) }}</div>
                                        </div>
                                    </div>

                                    <!-- Actions Row -->
                                    @unless($readOnly)
                                        <div class="mt-3 flex items-center justify-between">
                                            <div class="inline-flex items-center rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
                                                <button wire:click="updateQuantity({{ $line['id'] }}, {{ $line['qty'] - 1 }})" class="px-3 py-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-l-lg transition-colors">
                                                    <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="M20 12H4" /></svg>
                                                </button>
                                                <span class="px-4 py-1.5 min-w-[40px] text-center font-bold text-gray-900 dark:text-white">{{ $line['qty'] }}</span>
                                                <button wire:click="updateQuantity({{ $line['id'] }}, {{ $line['qty'] + 1 }})" class="px-3 py-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-r-lg transition-colors">
                                                    <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="M12 4v16m8-8H4" /></svg>
                                                </button>
                                            </div>
                                            
                                            <button wire:click="confirmDeleteItem({{ $line['id'] }})" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all">
                                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                            </button>
                                        </div>
                                    @endunless
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="flex flex-col items-center justify-center py-12 text-center">
                            <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
                                <svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
                            </div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('dashboard.no_items') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Right Column: Summary & Actions (1/3) -->
        <div class="{{ $isSlideOver ? 'mt-auto border-t border-gray-100 dark:border-gray-800 pt-4 px-6 bg-gray-50/50 dark:bg-gray-800/50' : 'space-y-6' }}">
            
            <!-- Summary Card -->
            <div class="{{ $isSlideOver ? '' : 'rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900' }}">
                <div class="space-y-3">
                     <!-- Order Type Display -->
                    <div class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800">
                         <span class="text-sm text-gray-500">{{ __('dashboard.type') }}</span>
                         <span class="font-medium text-gray-900 dark:text-white">{{ $form->model->type->label() }}</span>
                    </div>

                    <!-- Totals Section (POS Style) -->
                    <div class="space-y-2 pt-2">
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                            <span>{{ __('dashboard.subtotal') }}</span>
                            <span>{{ currency($form->subtotal) }}</span>
                        </div>
                        @if($form->discount > 0)
                            <div class="flex justify-between text-sm text-success-600 dark:text-success-400">
                                <span>{{ __('dashboard.discount') }}</span>
                                <span>-{{ currency($form->discount) }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                            <span>{{ __('dashboard.tax') }}</span>
                            <span>{{ currency($form->tax) }}</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold text-gray-900 dark:text-white pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
                            <span>{{ __('dashboard.total') }}</span>
                            <span>{{ currency($form->total) }}</span>
                        </div>

                        @if(!$form->model->isPaid() && !$form->model->isClosed())
                            <button type="button" wire:click="openPaymentModal" class="w-full mt-4 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 shadow-lg shadow-emerald-500/20 transition-all flex items-center justify-center gap-2">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                {{ __('dashboard.pay_now') }}
                            </button>
                        @endif
                        
                        @if($isSlideOver)
                            <div class="grid grid-cols-2 gap-3 pt-4 border-t border-gray-100 dark:border-gray-800 mt-4">
                                {{-- <a href="{{ route('orders.print', $form->model->id) }}" target="_blank" class="flex items-center justify-center gap-2 px-4 py-2 rounded-xl border border-gray-200 bg-white text-gray-700 font-medium hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">
                                    <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="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>
                                    {{ __('dashboard.print') }}
                                </a> --}}
                                @if($this->canCancel)
                                    <button type="button" wire:click="openCancelModal" class="flex items-center justify-center gap-2 px-4 py-2 rounded-xl border border-rose-200 bg-rose-50 text-rose-700 font-medium hover:bg-rose-100 dark:border-rose-900/30 dark:bg-rose-900/20 dark:text-rose-400 transition-colors">
                                        <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>
                                        {{ __('dashboard.cancel') }}
                                    </button>
                                @endif
                                @unless($readOnly)
                                     <button type="button" wire:click="$dispatch('openDetailModal', { component: 'modals.delete-order', arguments: { order: {{ $form->model->id }} } })" class="flex items-center justify-center gap-2 px-4 py-2 rounded-xl border border-red-200 bg-red-50 text-red-700 font-medium hover:bg-red-100 dark:border-red-900/30 dark:bg-red-900/20 dark:text-red-400 transition-colors">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                        {{ __('dashboard.delete') }}
                                    </button>
                                @endunless
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Settings Card -->
            <div class="{{ $isSlideOver ? 'pt-4 border-t border-gray-100 dark:border-gray-800' : 'rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900' }}">
                 <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ __('dashboard.details') }}</h3>
                 <form wire:submit.prevent="save" class="space-y-4">
                    <fieldset class="space-y-4" @if($readOnly) disabled @endif>


                         <!-- Branch/Table -->
                        {{-- @if($form->type !== 'delivery')
                            <div class="grid grid-cols-2 gap-3">
                                <x-ui.input.select wire:model.live="form.branch_id" :label="__('dashboard.branch')">
                                     @foreach($branches as $branch)
                                        <option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
                                    @endforeach
                                </x-ui.input.select>
                                <x-ui.input.select wire:model.live="form.table_id" :label="__('dashboard.table')">
                                    <option value="">{{ __('dashboard.select') }}</option>
                                    @foreach($tables as $table)
                                        <option value="{{ $table['id'] }}">{{ $table['name'] }}</option>
                                    @endforeach
                                </x-ui.input.select>
                            </div>
                        @else
                             <x-ui.input.select wire:model.live="form.branch_id" :label="__('dashboard.branch')">
                                     @foreach($branches as $branch)
                                        <option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
                                    @endforeach
                            </x-ui.input.select>
                        @endif --}}

                        <!-- Payment & Billed Toggles -->
                         <div class="flex items-center justify-between py-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ __('dashboard.billed_status') }}</span>
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-1 rounded text-xs font-medium {{ $form->model->billed ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' }}">
                                    {{ $form->model->billed ? __('dashboard.billed') : __('dashboard.not_billed') }}
                                </span>
                            </div>
                        </div>
                         <div class="flex items-center justify-between py-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ __('dashboard.payment_status') }}</span>
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-1 rounded text-xs font-medium {{ $form->model->isPaid() ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' }}">
                                    {{ $form->model->payment_status?->label() ?? 'Unpaid' }}
                                </span>
                            </div>
                        </div>
                    </fieldset>

                    @unless($readOnly)
                    <div class="pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between gap-4">
                        <x-ui.button.danger type="button" class="w-auto" wire:click="$dispatch('openDetailModal', { component: 'modals.delete-order', arguments: { order: {{ $form->model->id }} } })">
                            {{ __('dashboard.delete') }}
                        </x-ui.button.danger>
                        <x-ui.button type="submit" class="flex-1 justify-center">
                            {{ __('dashboard.save_changes') }}
                        </x-ui.button>
                    </div>
                    @endunless
                 </form>
            </div>
            <!-- History Card -->
            <div class="{{ $isSlideOver ? 'pt-6 border-t border-gray-100 dark:border-gray-800' : 'rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900 mt-6' }}">
                 <h3 class="mb-5 text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                    <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    {{ __('dashboard.activity_log') }}
                 </h3>
                 
                 <div class="relative pl-3 space-y-8">
                    <!-- Vertical Line -->
                    <div class="absolute left-[19px] top-2 bottom-2 w-0.5 bg-gray-100 dark:bg-gray-800"></div>

                    @forelse($histories as $history)
                        <div class="relative flex gap-4 group">
                            <!-- Icon/Dot -->
                            <div class="relative z-10 flex-shrink-0 w-10 h-10 rounded-full border-4 border-white dark:border-gray-900 flex items-center justify-center
                                {{ $history['type'] === 'status_change' ? 'bg-brand-100 text-brand-600 dark:bg-brand-900/30 dark:text-brand-400' : 
                                   ($history['type'] === 'payment' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400' : 
                                   'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400') }}">
                                
                                @if($history['type'] === 'status_change')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                                @elseif($history['type'] === 'payment')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                @else
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
                                @endif
                            </div>
                            
                            <div class="flex-1 py-1">
                                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-1">
                                    <div>
                                        <div class="text-sm font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 transition-colors">
                                            {!! Str::markdown($history['description']) !!}
                                        </div>
                                        <div class="flex items-center gap-2 mt-1.5">
                                            @if($history['user_avatar'])
                                                <img src="{{ $history['user_avatar'] }}" class="w-5 h-5 rounded-full object-cover ring-2 ring-white dark:ring-gray-900">
                                            @else
                                                <div class="w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[10px] font-bold text-gray-500">
                                                    {{ substr($history['user'], 0, 1) }}
                                                </div>
                                            @endif
                                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ $history['user'] }}</span>
                                        </div>
                                    </div>
                                    <span class="text-xs font-mono text-gray-400 whitespace-nowrap bg-gray-50 dark:bg-gray-800 px-2 py-1 rounded-md" title="{{ $history['timestamp'] }}">
                                        {{ $history['date'] }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="flex flex-col items-center justify-center py-6 text-center text-gray-400">
                            <div class="w-12 h-12 rounded-full bg-gray-50 dark:bg-gray-800 flex items-center justify-center mb-2">
                                <svg class="w-6 h-6 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            </div>
                            <span class="text-sm">{{ __('dashboard.no_history') }}</span>
                        </div>
                    @endforelse
                 </div>
            </div>
        </div>
    </div>


    <!-- POS-Style Wizard Modal -->
    @unless($readOnly)
        <div x-cloak wire:key="add-item-modal" x-data x-show="$wire.showAddItemModal" class="fixed inset-0 z-[60] flex items-center justify-center p-4 sm:p-6 overflow-hidden" style="display: none;">
            <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity" wire:click="closeAddItemModal"></div>
            
            <div class="relative w-full max-w-5xl h-[85vh] bg-white dark:bg-gray-900 rounded-3xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden">
                
                <!-- Header -->
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 z-10">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ __('dashboard.add_item') }}</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('dashboard.select_category_and_item') }}</p>
                    </div>
                    <button wire:click="closeAddItemModal" class="p-2 -me-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
                        <svg class="w-6 h-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>

                <!-- Content Area -->
                <div class="flex-1 flex overflow-hidden">
                    
                    <!-- Sidebar: Menus & Categories -->
                    <div class="w-64 flex-shrink-0 border-r border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 flex flex-col overflow-y-auto">
                        <div class="p-4 space-y-6">
                            <!-- Menus -->
                            <div class="space-y-2">
                                <label class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500 tracking-wider px-2">{{ __('dashboard.menu') }}</label>
                                <div class="space-y-1">
                                    @foreach ($menus as $menu)
                                        <button wire:click="selectMenu({{ $menu['id'] }})" 
                                            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all {{ $selectedMenuId === $menu['id'] ? 'bg-brand-600 text-white shadow-lg shadow-brand-600/20' : 'text-gray-600 dark:text-gray-400 hover:bg-white dark:hover:bg-gray-800 hover:shadow-sm' }}">
                                            <span class="truncate">{{ $menu['name'] }}</span>
                                        </button>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Categories -->
                            <div class="space-y-2">
                                <label class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500 tracking-wider px-2">{{ __('dashboard.categories') }}</label>
                                <div class="space-y-1">
                                    @foreach ($categories as $category)
                                        <button wire:click="selectCategory({{ $category['id'] }})"
                                            class="w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all {{ $selectedCategoryId === $category['id'] ? 'bg-white dark:bg-gray-800 text-brand-600 dark:text-brand-400 font-semibold shadow-sm ring-1 ring-gray-200 dark:ring-gray-700' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50' }}">
                                            {{ $category['name'] }}
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Main: Items Grid -->
                    <div class="flex-1 bg-white dark:bg-gray-900 overflow-y-auto p-6 scrollbar-thin">
                        @if($selectedItem) <!-- Options Selection Mode -->
                            <div class="max-w-xl mx-auto animate-fadeIn">
                                <div class="mb-6 flex items-start gap-4">
                                     @if($selectedItem->image)
                                        <img src="{{ asset('storage/' . $selectedItem->image) }}" class="w-24 h-24 rounded-2xl object-cover bg-gray-100 shadow-sm">
                                    @else
                                        <div class="w-24 h-24 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center shadow-sm">
                                            <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
                                        </div>
                                    @endif
                                    <div>
                                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1">{{ $selectedItem->name }}</h2>
                                        <p class="text-lg font-semibold text-brand-600 dark:text-brand-400">{{ currency((float)$selectedItem->price) }}</p>
                                        <p class="text-sm text-gray-500 mt-2">{{ $selectedItem->description }}</p>
                                    </div>
                                </div>

                                <div class="space-y-6">
                                     <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800">
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('dashboard.quantity') }}</span>
                                        <div class="flex items-center gap-1 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-1">
                                            <button wire:click="$set('newItemQty', {{ max(1, $newItemQty - 1) }})" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md text-gray-500">
                                                <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="M20 12H4" /></svg>
                                            </button>
                                            <input type="number" wire:model.live="newItemQty" class="w-12 text-center border-none p-0 focus:ring-0 text-sm font-semibold bg-transparent text-gray-900 dark:text-white">
                                            <button wire:click="$set('newItemQty', {{ $newItemQty + 1 }})" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md text-gray-500">
                                                <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="M12 4v16m8-8H4" /></svg>
                                            </button>
                                        </div>
                                    </div>

                                    @php
                                        $groups = $selectedItem->options->groupBy('option_group_id');
                                    @endphp
                                    
                                    @foreach ($groups as $groupId => $groupOptions)
                                        @php $group = optional($groupOptions->first()->group); @endphp
                                        <div class="space-y-3">
                                            <div class="flex items-center justify-between">
                                                <label class="text-sm font-bold text-gray-900 dark:text-white">{{ $group?->name }}</label>
                                                <span class="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500">{{ $group?->type === 'single' ? 'Pick 1' : 'Optional' }}</span>
                                            </div>
                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                                @foreach ($groupOptions as $option)
                                                    <label class="cursor-pointer group relative flex items-center justify-between p-3 rounded-xl border-2 transition-all {{ ($group?->type === 'single' ? ($optionSelections[$groupId] ?? null) == $option->id : in_array($option->id, $optionSelections[$groupId] ?? [])) ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-500/10' : 'border-gray-200 dark:border-gray-700 hover:border-brand-200 dark:hover:border-gray-600' }}">
                                                        <div class="flex items-center gap-3">
                                                            @if ($group?->type === 'single')
                                                                <div class="w-4 h-4 rounded-full border border-gray-300 {{ ($optionSelections[$groupId] ?? null) == $option->id ? 'border-brand-500 bg-brand-500' : '' }} flex items-center justify-center">
                                                                    <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                                                                </div>
                                                                <input type="radio" wire:model.live="optionSelections.{{ $groupId }}" value="{{ $option->id }}" class="sr-only" />
                                                            @else
                                                                <div class="w-4 h-4 rounded border border-gray-300 {{ in_array($option->id, $optionSelections[$groupId] ?? []) ? 'bg-brand-500 border-brand-500' : '' }} flex items-center justify-center text-white">
                                                                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
                                                                </div>
                                                                <input type="checkbox" wire:model.live="optionSelections.{{ $groupId }}" value="{{ $option->id }}" class="sr-only" />
                                                            @endif
                                                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $option->name }}</span>
                                                        </div>
                                                        @if ((float) ($option->pivot?->additional_price ?? 0) !== 0.0)
                                                            <span class="text-xs font-semibold text-brand-600 dark:text-brand-400">+{{ currency((float) $option->pivot?->additional_price) }}</span>
                                                        @endif
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach

                                    <div class="pt-6 flex gap-3">
                                        <button wire:click="$set('selectedItem', null)" class="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-600 font-medium hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors">
                                            {{ __('dashboard.back') }}
                                        </button>
                                        <button wire:click="addOrderItem" class="flex-[2] px-4 py-3 rounded-xl bg-brand-600 text-white font-bold hover:bg-brand-700 shadow-lg shadow-brand-500/30 transition-all transform active:scale-95">
                                            {{ __('dashboard.add_to_order') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @else
                            <!-- Grid Mode -->
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                                @forelse ($itemsList as $item)
                                    <button wire:click="selectItem({{ $item['id'] }})" 
                                        class="group flex flex-col text-left bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg hover:border-brand-300 dark:hover:border-brand-500/50 transition-all duration-200">
                                        <div class="aspect-[4/3] w-full bg-gray-100 dark:bg-gray-900 relative overflow-hidden">
                                           <!-- Image placeholder or actual image if available -->
                                           <div class="absolute inset-0 flex items-center justify-center text-gray-300">
                                                <svg class="w-8 h-8 opacity-50 block" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                           </div>
                                            <!-- If you have images in the array, use them here. $item['image'] check needed. For now using placeholder -->
                                        </div>
                                        <div class="p-3 flex-1 flex flex-col justify-between">
                                            <div>
                                                <h4 class="font-bold text-gray-900 dark:text-white text-sm line-clamp-2 leading-tight group-hover:text-brand-600 transition-colors">{{ $item['name'] }}</h4>
                                            </div>
                                            <div class="mt-2 flex items-center justify-between">
                                                <span class="font-bold text-brand-600 dark:text-brand-400 text-sm">{{ currency((float)$item['price']) }}</span>
                                                <div class="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 group-hover:bg-brand-500 group-hover:text-white flex items-center justify-center transition-colors">
                                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                @empty
                                    <div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
                                        <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                                            <svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                                        </div>
                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ __('dashboard.no_result') }}</h3>
                                        <p class="text-gray-500 text-sm mt-1">Try selecting a different category or menu.</p>
                                    </div>
                                @endforelse
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endunless

    <!-- Delete Confirmation -->
    @if(!$readOnly && $confirmingDeleteItemId)
        <div x-cloak wire:key="confirm-delete-item-modal" class="fixed inset-0 flex items-center justify-center p-5 z-[70]">
            <div class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm" wire:click="$set('confirmingDeleteItemId', null)"></div>
            <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-xl max-w-sm w-full p-6 text-center border border-gray-200 dark:border-gray-800">
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
                    <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">{{ __('dashboard.remove_item') }}?</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">{{ __('dashboard.confirm_delete_item_msg') }}</p>
                <div class="flex justify-center gap-3">
                    <button wire:click="$set('confirmingDeleteItemId', null)" 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 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
                        {{ __('dashboard.cancel') }}
                    </button>
                    <button wire:click="deleteItemConfirmed" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        {{ __('dashboard.remove') }}
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- Delivery Agent Modal -->
    @if ($showDeliveryAgentModal)
         <div class="fixed inset-0 z-[100] flex items-center justify-center p-4">
             <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" wire:click="$set('showDeliveryAgentModal', false)"></div>
              <div class="relative w-full max-w-lg max-h-[80vh] bg-white dark:bg-gray-900 rounded-3xl shadow-xl flex flex-col">
                  <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                       <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ __('dashboard.select_driver') }}</h3>
                        <button wire:click="$set('showDeliveryAgentModal', false)" class="text-gray-400 hover:text-gray-600">
                             <svg class="w-6 h-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 class="flex-1 overflow-y-auto p-6 space-y-3">
                       <div class="grid grid-cols-1 gap-3">
                           @forelse ($deliveryAgents as $agent)
                                <div class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-brand-500 hover:bg-brand-50 hover:text-brand-700 transition cursor-pointer dark:border-gray-800 dark:hover:bg-brand-900/30 dark:hover:text-brand-400"
                                    wire:click="saveDeliveryAgent({{ $agent->id }})">
                                    <div class="flex items-center gap-3">
                                         <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold text-gray-600">
                                            {{ $agent->initials() }}
                                         </div>
                                         <div>
                                             <p class="font-bold text-gray-900 dark:text-white">{{ $agent->name }}</p>
                                             <p class="text-xs text-gray-500">{{ $agent->phone ?? 'No Phone' }}</p>
                                         </div>
                                    </div>
                                    <svg class="w-5 h-5 opacity-0 group-hover:opacity-100" 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>
                                </div>
                           @empty
                                 <p class="text-center text-gray-500 py-10">{{ __('dashboard.no_drivers_found') }}</p>
                           @endforelse
                       </div>
                  </div>
              </div>
         </div>
    @endif

    <!-- Cancel Order Modal -->
    @if ($showCancelModal)
         <div class="fixed inset-0 z-[100] flex items-center justify-center p-4">
             <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" wire:click="$set('showCancelModal', false)"></div>
              <div class="relative w-full max-w-sm bg-white dark:bg-gray-900 rounded-3xl shadow-xl flex flex-col overflow-hidden">
                  <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                       <h3 class="text-xl font-bold text-rose-600">{{ __('dashboard.cancel_order') }}</h3>
                       <p class="text-sm text-gray-500">{{ __('dashboard.cancel_order_confirmation') }}</p>
                  </div>
                  <div class="p-6 space-y-4">
                       <div>
                            <label class="block text-sm font-medium mb-1">{{ __('dashboard.reason') }} <span class="text-rose-500">*</span></label>
                           <textarea wire:model="cancelReason" rows="3" class="w-full rounded-xl border-gray-300 focus:border-rose-500 focus:ring-rose-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white" placeholder="{{ __('dashboard.cancel_reason_placeholder') }}"></textarea>
                           @error('cancelReason') <span class="text-xs text-rose-500">{{ $message }}</span> @enderror
                       </div>
                  </div>
                  <div class="p-5 border-t border-gray-100 dark:border-gray-800 flex justify-end gap-3 bg-gray-50 dark:bg-gray-800/50">
                    <button wire:click="$set('showCancelModal', 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">{{ __('dashboard.cancel') }}</button>
                     <button wire:click="cancelOrder" class="px-4 py-2 text-sm font-bold text-white bg-rose-600 rounded-lg hover:bg-rose-700 shadow-lg shadow-rose-500/30">{{ __('dashboard.confirm_cancel') }}</button>
                </div>
              </div>
         </div>
    @endif

    <!-- Payment Modal -->
    @if($showPaymentModal)
    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" wire:click="$set('showPaymentModal', false)"></div>
        <div class="relative w-full max-w-lg bg-white dark:bg-gray-900 rounded-3xl shadow-xl flex flex-col p-6 animate-fadeIn">
            <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">{{ __('dashboard.process_payment') }}</h3>
            
            <div class="space-y-4">
                <div>
                     <label class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">{{ __('dashboard.amount') }}</label>
                     <div class="relative">
                         <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 font-bold">$</span>
                         <x-ui.input.number step="0.01" wire:model="paymentAmount" class="w-full pl-8 pr-4 py-3 rounded-xl border-gray-300 focus:ring-brand-500 focus:border-brand-500 font-bold text-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"/>
                     </div>
                </div>
                
                <div>
                     <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">{{ __('dashboard.payment_method') }}</label>
                     <div class="grid grid-cols-2 gap-2">
                         @foreach($paymentMethods as $method)
                             <button type="button" wire:click="$set('selectedPaymentMethodId', {{ $method->id }})" 
                                 class="px-4 py-3 rounded-xl border-2 font-bold transition-all {{ $selectedPaymentMethodId === $method->id ? 'border-brand-500 bg-brand-50 text-brand-600 dark:bg-brand-500/20 dark:text-brand-400' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-600 dark:text-gray-400' }}">
                                 {{ $method->name }}
                             </button>
                         @endforeach
                     </div>
                </div>
                
                <div class="pt-4 flex gap-3">
                     <x-ui.button.ghost wire:click="$set('showPaymentModal', false)" class="flex-1 py-3 rounded-xl border border-gray-200 font-medium hover:bg-gray-50 text-gray-700 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">{{ __('dashboard.cancel') }}</x-ui.button.ghost>
                     <x-ui.button.index wire:click="processPayment" class="flex-[2] py-3 rounded-xl bg-brand-600 text-white font-bold hover:bg-brand-700 shadow-lg shadow-brand-500/30 transition-transform active:scale-95">
                         {{ __('dashboard.confirm_payment') }}
                     </x-ui.button.index>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>