@php
    use Illuminate\Support\Str;
    use App\Services\CurrencyService;
@endphp
@inject('currencyService', 'App\Services\CurrencyService')
<div class="h-full flex flex-col relative" x-data="{
    cart: @entangle('orderItems'),
    currencySymbol: '{{ $currencyService->current()->symbol }}',
    symbolPosition: '{{ $currencyService->current()->symbol_position ?? 'before' }}',
    formatMoney(amount) {
        let formatted = parseFloat(amount).toFixed(2);
        if (this.symbolPosition === 'after') {
            return formatted + ' ' + this.currencySymbol;
        }
        return this.currencySymbol + ' ' + formatted;
    },
    playSound(sound) {
    console.log('Playing sound:', sound);
        let src = '';
        if (sound === 'beep') {
            src = '{{ asset('sounds/beep.mp3') }}';
        } else if (sound === 'success') {
            src = '{{ asset('sounds/success.mp3') }}'; // Or distinct success sound
        } else if (sound === 'error') {
             src = '{{ asset('sounds/error.mp3') }}'; // If available
        }

        if (src) {
            const audio = new Audio(src);
            audio.play().catch(e => console.log('Audio play failed', e));
        }
    },
    updateQty(id, change) {
        let item = this.cart.find(i => i.id === id);
        if (!item) return;

        let newQty = parseInt(item.qty) + change;
        if (newQty < 1) return;

        // Optimistic update
        item.qty = newQty;
        $wire.updateLineQuantity(id, newQty);
    },
    removeFromCart(id) {
        this.cart = this.cart.filter(i => i.id !== id);
        $wire.removeLine(id);
    },
    calculateLineTotal(item) {
        let optionsTotal = 0;
        if (item.options) {
            let opts = Array.isArray(item.options) ? item.options : Object.values(item.options);
            optionsTotal = opts.reduce((sum, opt) => sum + parseFloat(opt.additional_price || 0), 0);
        }
        let total = (item.qty * (parseFloat(item.base_price) + optionsTotal));
        return this.formatMoney(total);
    }
}"
    x-on:open-print.window="window.open($event.detail.url, '_blank')"
    x-on:play-sound.window="playSound($event.detail.sound)"
    @keydown.window="
        if ($event.key === 'F4') { $event.preventDefault(); $wire.holdOrder(); }
        if ($event.key === 'F9') { $event.preventDefault(); $wire.openPayment(); }
        if ($event.key === 'Escape') { 
            $wire.cancelPayment(); 
            $wire.closeModal(); 
            $wire.closeTableModal();
            $wire.set('showDeliveryAgentModal', false);
            $wire.set('showCancelModal', false);
            $wire.set('showHeldOrdersModal', false);
        }
    ">

    <!-- Notifications -->
    <x-ui.toast on="order-created">{{ __('dashboard.success.created') }}</x-ui.toast>
    <x-ui.toast on="order-updated">{{ __('dashboard.success.updated') }}</x-ui.toast>
    <x-ui.toast on="pos-error">{{ __('dashboard.error') ?? 'Something went wrong' }}</x-ui.toast>
    <x-ui.toast on="notify" />
    
    

    <!-- Header -->
    <div class="p-4 border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center justify-between">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">
                {{ __('dashboard.order') }} @if ($editingOrderId)
                    #{{ $editingOrderId }}
                @endif
            </h3>
            <div class="flex gap-2">
                @if ($editingOrderId)
                    <x-ui.button type="button" size="size-3" wire:click="clearOrder">
                        {{ __('dashboard.new') }}
                    </x-ui.button>
                @else
                    <x-ui.button type="button" size="size-3" wire:click="clearOrder">
                        {{ __('dashboard.clear_order') }}
                    </x-ui.button>
                @endif

                <x-ui.button type="button" size="size-3" wire:click="openTableOrders">
                    {{ __('dashboard.table_orders') }}
                </x-ui.button>

                <x-ui.button type="button" size="size-3" wire:click="openHeldOrders">
                    <span class="flex items-center gap-1">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {{ $this->heldOrders->count() }}
                    </span>
                </x-ui.button>

                @if (count($orderItems) > 0)
                    <x-ui.button type="button" size="size-3" wire:click="holdOrder">
                        {{ __('dashboard.hold') }} (F4)
                    </x-ui.button>
                @endif
            </div>
        </div>
        @error('general')
            <div
                class="mt-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-200">
                {{ $message }}
            </div>
        @enderror
    </div>

    <!-- Status & Info -->
    @if ($editingOrderId)
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs uppercase text-gray-500">{{ __('dashboard.status') }}</p>
                    <span
                        class="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-sm font-medium bg-{{ $this->currentStatusColor }}-50 text-{{ $this->currentStatusColor }}-700 ring-1 ring-inset ring-{{ $this->currentStatusColor }}-600/20 dark:bg-{{ $this->currentStatusColor }}-500/10 dark:text-{{ $this->currentStatusColor }}-400 dark:ring-{{ $this->currentStatusColor }}-500/20">
                        {{ $this->currentStatusLabel }}
                    </span>
                </div>
                @if ($this->nextStatus)
                    <x-ui.button type="button" size="size-3"
                        wire:click="setOrderStatus('{{ $this->nextStatus['value'] }}')">
                        Move to {{ $this->nextStatus['label'] }}
                    </x-ui.button>
                @endif
            </div>
            @if ($editLockReason)
                <div class="mt-2 text-xs text-rose-600 dark:text-rose-400">{{ $editLockReason }}</div>
            @endif
        </div>
    @endif

    <!-- Cart Items -->
    <div class="flex-1 overflow-y-auto p-4 space-y-3">
        <template x-for="line in cart" :key="line.id">
            <div class="rounded-xl border border-gray-200 p-3 dark:border-gray-800 bg-white dark:bg-gray-900 cursor-pointer hover:border-brand-200 dark:hover:border-brand-700 transition"
                @click="$wire.openLineOptions(line.id)">
                <div class="flex justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate" x-text="line.name"></p>
                        <p class="text-xs text-gray-500" x-text="formatMoney(line.base_price)"></p>
                        <template x-if="line.notes">
                            <p class="mt-1 text-xs text-amber-600 truncate" x-text="line.notes"></p>
                        </template>
                        <div class="mt-1 space-y-0.5" x-show="line.options && line.options.length > 0">
                            <template x-for="opt in line.options" :key="opt.id || opt.name">
                                <div class="flex justify-between text-xs text-gray-500">
                                    <span x-text="opt.name"></span>
                                    <span x-show="parseFloat(opt.additional_price) > 0"
                                        x-text="formatMoney(opt.additional_price)"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="flex flex-col items-end gap-2 shrink-0">
                        <button type="button" @click.stop="removeFromCart(line.id)"
                            class="text-rose-500 hover:text-rose-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="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 class="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-0.5">
                            <button type="button" @click.stop="updateQty(line.id, -1)"
                                class="w-6 h-6 flex items-center justify-center rounded bg-white dark:bg-gray-700 shadow-sm text-gray-600 dark:text-gray-300 hover:text-brand-600">-</button>
                            <span class="text-sm font-semibold w-4 text-center text-gray-900 dark:text-white"
                                x-text="line.qty"></span>
                            <button type="button" @click.stop="updateQty(line.id, 1)"
                                class="w-6 h-6 flex items-center justify-center rounded bg-white dark:bg-gray-700 shadow-sm text-gray-600 dark:text-gray-300 hover:text-brand-600">+</button>
                        </div>
                        <p class="text-sm font-semibold text-gray-900 dark:text-white"
                            x-text="calculateLineTotal(line)"></p>
                    </div>
                </div>
            </div>
        </template>
        <div x-show="cart.length === 0" class="flex flex-col items-center justify-center h-48 text-gray-400">
            <svg class="w-12 h-12 mb-2 opacity-50" 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>
            <p class="text-sm">{{ __('dashboard.cart_empty') }}</p>
        </div>
    </div>

    <!-- Footer Actions -->
    <div
        class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
        <!-- Order Type & Table -->
        <div class="space-y-3">
            <div class="grid grid-cols-3 gap-2 bg-gray-100 dark:bg-gray-800 p-1 rounded-xl">
                @foreach ($this->orderTypes as $typeKey => $label)
                    <button type="button" wire:click="setOrderType('{{ $typeKey }}')"
                        class="rounded-lg py-1.5 text-xs font-semibold transition {{ $orderType === $typeKey ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white' : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white' }}">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            @if ($orderType === 'dine_in')
                <div
                    class="flex items-center justify-between rounded-xl border border-gray-200 px-3 py-2 dark:border-gray-800">
                    <div>
                        <p class="text-xs text-gray-500">{{ __('dashboard.table') }}</p>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            @if ($selectedTableId)
                                {{ $this->selectedTable?->name ?? __('dashboard.unknown_table') }}
                            @else
                                <span class="text-amber-600">{{ __('dashboard.select_table_modal_title') }}</span>
                            @endif
                        </p>
                    </div>
                    <x-ui.button type="button" size="size-3" wire:click="openTableModal">
                        {{ $selectedTableId ? __('dashboard.change') : __('dashboard.select') }}
                    </x-ui.button>
                </div>
                @error('table')
                    <p class="text-xs text-rose-500">{{ $message }}</p>
                @enderror
            @endif
        </div>

        <!-- Totals -->
        <div class="space-y-2 pt-2 border-t border-dashed border-gray-200 dark:border-gray-800">
            <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                <span>{{ __('dashboard.subtotal') }}</span>
                <span>{{ currency((float) $this->subtotal) }}</span>
            </div>
            <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400 group cursor-pointer hover:text-brand-600 transition"
                wire:click="openAdjustmentModal">
                <div class="flex items-center gap-2">
                    <span>{{ __('dashboard.tax') }} ({{ $this->taxRate }}%)</span>
                    <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                </div>
                <span>{{ currency((float) $this->taxAmount) }}</span>
            </div>
            <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400 group cursor-pointer hover:text-brand-600 transition"
                wire:click="openAdjustmentModal">
                <div class="flex items-center gap-2">
                    <span>{{ __('dashboard.discount') }}</span>
                    <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                </div>
                <span>-{{ currency((float) $this->discount) }}</span>
            </div>
            <div class="flex justify-between text-lg font-bold text-gray-900 dark:text-white">
                <span>{{ __('dashboard.total') }}</span>
                <span>{{ currency((float) $this->total) }}</span>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="grid gap-2 grid-cols-2">
            @if (!$editingOrderId)
                <x-ui.button class=" w-full justify-center" size="size-4" wire:click="createOrder">
                    {{ $editingOrderId ? __('dashboard.save') : __('dashboard.create_order') }}
                </x-ui.button>
            @endif


            @if (!$editLockReason)
                @if ($this->canSendToKitchen)
                    <x-ui.button class="w-full justify-center" wire:click="sendToKitchen">
                        {{ __('dashboard.send') }}
                    </x-ui.button>
                @endif

                @if ($this->canCharge)
                    <x-ui.button
                        class="w-full justify-center bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600"
                        wire:click="openPayment">
                        {{ __('dashboard.pay') }} (F9)
                    </x-ui.button>
                @endif

                <x-ui.button class="w-full justify-center" wire:click="printBill">
                    {{ __('dashboard.print') }}
                </x-ui.button>

                @if ($this->isEditing && $this->canCancel)
                    <x-ui.button.danger class="w-full justify-center" wire:click="openCancelModal">
                        {{ __('dashboard.cancel') }}
                    </x-ui.button.danger>
                @endif
            @else
                <div class="col-span-2 text-center text-xs text-amber-600 bg-amber-50 rounded p-2">
                    {{ $editLockReason }}
                </div>
            @endif
        </div>
    </div>

    <!-- Modals (Include them here or extracted components) -->
    <!-- Options Modal -->
    @if ($showOptionsModal)
        <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="closeModal"></div>
            <div
                class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-2xl shadow-xl flex flex-col">
                <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ $this->modalItem?->name }}
                        {{ __('dashboard.options') }}</h3>
                </div>
                <div class="p-6 flex-1 overflow-y-auto space-y-6">
                    <!-- Note -->
                    <div>
                        <label class="block text-sm font-medium mb-2 text-gray-900 dark:text-white">Notes</label>
                        <x-ui.input.textarea wire:model="modalNote"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800"
                            rows="2"></x-ui.input.textarea>
                    </div>

                    @if ($this->modalItem)
                        @foreach ($this->groupItemOptions($this->modalItem) as $groupId => $group)
                            <div>
                                <h4 class="font-semibold mb-2 text-gray-900 dark:text-white">{{ $group['name'] }}
                                    <span class="text-xs font-normal text-gray-500">({{ $group['type'] }})</span></h4>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                    @foreach ($group['options'] as $option)
                                        <label
                                            class="flex items-center gap-3 p-3 rounded-xl border border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                            @if ($group['type'] === 'single')
                                                <input type="radio"
                                                    wire:model.live="modalSelections.{{ $groupId }}"
                                                    value="{{ $option->id }}"
                                                    class="text-brand-600 focus:ring-brand-500">
                                            @else
                                                <x-ui.input.checkbox type="checkbox"
                                                    wire:model.live="modalSelections.{{ $groupId }}"
                                                    value="{{ $option->id }}"
                                                    class="rounded text-brand-600 focus:ring-brand-500" />
                                            @endif
                                            <div class="flex-1 flex justify-between">
                                                <span
                                                    class="text-sm font-medium text-gray-900 dark:text-white">{{ $option->name }}</span>
                                                @if ($option->pivot->additional_price > 0)
                                                    <span
                                                        class="text-xs text-gray-500">+{{ currency((float) $option->pivot->additional_price) }}</span>
                                                @endif
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div
                    class="p-6 border-t border-gray-100 dark:border-gray-800 flex justify-end gap-3 bg-gray-50 dark:bg-gray-800/50 rounded-b-2xl">
                    <x-ui.button.secondary
                        wire:click="closeModal">{{ __('dashboard.cancel') }}</x-ui.button.secondary>
                    <x-ui.button wire:click="addProductWithOptions">{{ __('dashboard.add_item') }}</x-ui.button>
                </div>
            </div>
        </div>
    @endif

    <!-- Table Modal -->
    @if ($showTableModal)
        <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="closeTableModal"></div>
            <div
                class="relative w-full max-w-4xl max-h-[85vh] overflow-hidden bg-white dark:bg-gray-900 rounded-3xl shadow-xl flex flex-col">
                <div class="p-6 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                        {{ __('dashboard.select_table_modal_title') }}</h3>
                    <button wire:click="closeTableModal" class="text-gray-500 hover:text-gray-900"><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="p-6 overflow-y-auto bg-gray-50 dark:bg-gray-900/50 flex-1">
                    @foreach ($availableAreas as $area)
                        <div class="mb-8">
                            <h4
                                class="text-lg font-semibold mb-4 flex items-center gap-2 text-gray-900 dark:text-white">
                                {{ $area->name }}
                                <span
                                    class="text-xs font-normal bg-gray-200 dark:bg-gray-700 px-2 py-0.5 rounded-full">{{ $area->tables->count() }}
                                    {{ __('dashboard.tables') }}</span>
                            </h4>
                            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                                @foreach ($area->tables as $table)
                                    <button wire:click="selectTableFromModal({{ $table->id }})"
                                        class="flex flex-col items-center justify-center p-4 rounded-2xl border-2 transition group relative overflow-hidden shadow-sm
                                         {{ $this->tableOrderLookup ? 'bg-amber-50 border-amber-200 hover:border-amber-500 dark:bg-amber-500/10 dark:border-amber-500' : 'bg-white dark:bg-gray-800 border-transparent hover:border-brand-500 dark:hover:border-brand-400' }}">

                                        <span
                                            class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-1">{{ $table->name }}</span>
                                        <span class="text-xs text-gray-500">{{ $table->capacity }} seats</span>

                                        @if ($this->tableOrderLookup && $table->orders->isNotEmpty())
                                            <div
                                                class="mt-2 text-xs bg-amber-200 text-amber-900 px-2 py-1 rounded font-bold">
                                                {{ currency((float) $table->orders->first()->total) }}
                                            </div>
                                        @endif
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <!-- Payment Modal (Simplified) -->
    @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="cancelPayment"></div>
            <div class="relative w-full max-w-2xl bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ __('dashboard.checkout') }}</h3>
                    <p class="text-gray-500">Order Total: <span
                            class="font-bold text-gray-900 dark:text-white">{{ currency((float) $this->total) }}</span>
                    </p>
                </div>
                <div class="p-6 space-y-6">
                    <!-- Payment Methods -->
                    <div class="grid grid-cols-3 gap-3">
                        @foreach ($paymentMethods as $method)
                            <button wire:click="$set('selectedPaymentMethodId', '{{ $method->id }}')"
                                class="p-4 rounded-xl border-2 font-semibold transition {{ (string) $selectedPaymentMethodId === (string) $method->id ? 'border-brand-500 bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-400' : 'border-gray-200 hover:border-brand-200 drark:border-gray-700 dark:hover:border-gray-600 text-gray-600 dark:text-gray-400' }}">
                                {{ $method->name }}
                            </button>
                        @endforeach
                    </div>
                    <!-- Amount -->
                    <div>
                        <label
                            class="block text-sm font-medium mb-2 text-gray-900 dark:text-white">{{ __('dashboard.amount_to_pay') }}</label>
                        <div class="grid grid-cols-4 gap-2 mb-3">
                            @foreach ($this->quickDenominations as $denom)
                                <button wire:click="$set('paymentAmount', {{ $denom }})"
                                    class="px-2 py-2 rounded-lg border border-gray-200 bg-gray-50 hover:bg-brand-50 hover:border-brand-200 hover:text-brand-700 text-gray-700 font-bold text-sm transition dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-brand-500/20 dark:hover:border-brand-500 dark:hover:text-brand-400">
                                    {{ currency($denom) }}
                                </button>
                            @endforeach
                            <button wire:click="$set('paymentAmount', {{ $this->total }})"
                                class="px-2 py-2 rounded-lg border border-brand-600 bg-brand-600 text-white font-bold text-sm transition hover:bg-brand-700 shadow-sm">
                                {{ currency((float) $this->total) }}
                            </button>
                        </div>
                        <x-ui.input.number type="number" step="0.01" wire:model.live="paymentAmount"
                            max="{{ $this->total }}"
                            x-on:input="if(parseFloat($el.value) > {{ $this->total }}) $el.value = {{ $this->total }}"
                            class="text-3xl font-bold w-full p-4 rounded-xl border-gray-300 focus:border-brand-500 focus:ring-brand-500 text-right" />
                    </div>
                </div>
                <div
                    class="p-6 border-t border-gray-100 dark:border-gray-800 flex justify-between items-center bg-gray-50 dark:bg-gray-800/50">
                    <div class="text-sm">
                        <span class="text-gray-500">{{ __('dashboard.total') }}:</span>
                        <span class="font-bold text-gray-900 dark:text-white">
                            {{ currency((float) $this->total) }}
                        </span>
                    </div>
                    <div class="flex gap-3">
                        <x-ui.button.secondary
                            wire:click="cancelPayment">{{ __('dashboard.cancel') }}</x-ui.button.secondary>
                        <x-ui.button size="size-4"
                            wire:click="completePayment">{{ __('dashboard.complete_payment') }}</x-ui.button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Held Orders Modal -->
    @if ($showHeldOrdersModal)
        <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('showHeldOrdersModal', false)"></div>
            <div
                class="relative w-full max-w-2xl 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">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ __('dashboard.held_orders') }}</h3>
                </div>
                <div class="flex-1 overflow-y-auto p-6 space-y-3">
                    @forelse ($this->heldOrders as $held)
                        <div class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-brand-300 transition group cursor-pointer dark:border-gray-700 dark:hover:border-brand-600"
                            wire:click="selectHeldOrder({{ $held->id }})">
                            <div>
                                <p class="font-bold text-gray-900 dark:text-white">Order #{{ $held->id }}</p>
                                <p class="text-xs text-gray-500">{{ $held->created_at->diffForHumans() }} •
                                    {{ $held->items->count() }} {{ __('dashboard.items') }}</p>
                            </div>
                            <div class="flex items-center gap-4">
                                <span
                                    class="font-bold text-gray-900 dark:text-white">{{ currency((float) $held->total) }}</span>
                                <button wire:click.stop="deleteHeldOrder({{ $held->id }})"
                                    class="p-2 text-rose-500 hover:bg-rose-50 rounded-lg"><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>
                        </div>
                    @empty
                        <p class="text-center text-gray-500 py-10">{{ __('dashboard.no_held_orders') }}</p>
                    @endforelse
                </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-700 dark:hover:border-brand-400 dark:hover:bg-brand-500/20"
                                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


    <!-- Adjustment Modal -->
    @if ($showAdjustmentModal)
        <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="closeAdjustmentModal"></div>
            <div class="relative w-full max-w-sm bg-white dark:bg-gray-900 rounded-2xl shadow-xl flex flex-col">
                <div class="p-5 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ __('dashboard.adjustments') }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <x-ui.input.number label="{{ __('dashboard.discount_amount') }}" type="number"
                            step="0.01" wire:model="pendingAdjustment.discount" />

                    </div>
                    <div>
                        <x-ui.input.number label="{{ __('dashboard.tax_rate') }} (%)" type="number" step="0.01"
                            wire:model="pendingAdjustment.taxRate" />
                    </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 rounded-b-2xl">
                    <x-ui.button.secondary
                        wire:click="closeAdjustmentModal">{{ __('dashboard.cancel') }}</x-ui.button.secondary>
                    <x-ui.button wire:click="saveAdjustment">{{ __('dashboard.apply') }}</x-ui.button>
                </div>
            </div>
        </div>
    @endif

    <!-- Cancel 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-2xl shadow-xl flex flex-col">
                <div class="p-5 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="text-lg font-bold text-rose-600 dark:text-rose-400">{{ __('dashboard.cancel_order') }}
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('dashboard.confirm_cancel') }}</p>
                    <div>
                        <label class="block text-sm font-medium mb-1">{{ __('dashboard.reason') }} <span
                                class="text-rose-500">*</span></label>
                        <textarea wire:model="cancelReason"
                            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"
                            rows="3" placeholder="Reason for cancellation..."></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 rounded-b-2xl">
                    <x-ui.button.secondary
                        wire:click="$set('showCancelModal', false)">{{ __('dashboard.no') }}</x-ui.button.secondary>
                    <x-ui.button.danger
                        wire:click="cancelOrder">{{ __('dashboard.yes_cancel') }}</x-ui.button.danger>
                </div>
            </div>
        </div>
    @endif
</div>