@php
    /** @var \App\Domain\MasterData\Models\Tax|null $tax */
@endphp

<x-pos-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Point of Sale') }}
        </h2>
    </x-slot>

    <div
        class="py-6"
        x-data="posTerminal({
            warehouseId: {{ Illuminate\Support\Js::from($warehouseOptions->keys()->first()) }},
            taxRate: {{ Illuminate\Support\Js::from($tax ? (float) $tax->rate : 0) }},
            taxType: {{ Illuminate\Support\Js::from($tax?->type->value ?? 'exclusive') }},
            barcodeUrl: {{ Illuminate\Support\Js::from(url('/pos/products/barcode')) }},
            searchUrl: {{ Illuminate\Support\Js::from(route('pos.products.search')) }},
            customerSearchUrl: {{ Illuminate\Support\Js::from(route('pos.customers.search')) }},
            discountUrl: {{ Illuminate\Support\Js::from(url('/pos/discounts')) }},
            qrCodeUrl: {{ Illuminate\Support\Js::from(route('pos.qr-code')) }},
            checkoutUrl: {{ Illuminate\Support\Js::from(route('sales.store')) }},
            csrfToken: {{ Illuminate\Support\Js::from(csrf_token()) }},
        })"
        @keydown.window="handleShortcut($event)"
    >
        <div class="max-w-[1600px] mx-auto sm:px-6 lg:px-8">
            <template x-if="errorMessage">
                <div class="mb-4 rounded-md bg-red-50 dark:bg-red-900/40 px-4 py-3 text-sm text-red-800 dark:text-red-200" x-text="errorMessage"></div>
            </template>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Cart column -->
                <div class="lg:col-span-2 space-y-4">
                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                        <div class="flex items-center gap-3">
                            <div class="flex-1">
                                <x-input-label for="warehouse_id" :value="__('Warehouse')" />
                                <select id="warehouse_id" x-model="warehouseId" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach ($warehouseOptions as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex-[2]">
                                <x-input-label for="barcode_input" :value="__('Scan Barcode or Search (F2)')" />
                                <div class="relative">
                                    <input
                                        id="barcode_input"
                                        type="text"
                                        x-ref="barcodeInput"
                                        x-model="query"
                                        @keydown.enter.prevent="onScanEnter()"
                                        @input.debounce.300ms="onSearchInput()"
                                        autocomplete="off"
                                        class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        placeholder="{{ __('Scan a barcode, or type a name/SKU...') }}"
                                    >
                                    <div
                                        x-show="searchResults.length > 0"
                                        x-transition
                                        x-cloak
                                        @click.outside="searchResults = []"
                                        class="absolute z-40 mt-1 w-full rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 max-h-64 overflow-y-auto"
                                    >
                                        <template x-for="result in searchResults" :key="result.id">
                                            <button type="button" @click="addToCart(result)" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
                                                <span x-text="result.name"></span>
                                                <span class="text-gray-400 dark:text-gray-400 text-xs" x-text="'(' + result.sku + ')'"></span>
                                                <span class="float-right tabular-nums" x-text="formatMoney(result.selling_price)"></span>
                                            </button>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-900/40">
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Product') }}</th>
                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Price') }}</th>
                                    <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Qty') }}</th>
                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{{ __('Total') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                                <template x-for="(item, index) in cart" :key="item.product_id">
                                    <tr>
                                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">
                                            <span x-text="item.name"></span>
                                            <div class="text-xs text-gray-400 dark:text-gray-500" x-text="item.sku"></div>
                                        </td>
                                        <td class="px-4 py-2 text-sm text-right tabular-nums text-gray-500 dark:text-gray-400" x-text="formatMoney(item.unit_price)"></td>
                                        <td class="px-4 py-2 text-center">
                                            <div class="inline-flex items-center gap-2">
                                                <button type="button" @click="decrement(index)" class="w-6 h-6 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">-</button>
                                                <span class="w-8 text-center tabular-nums" x-text="item.quantity"></span>
                                                <button type="button" @click="increment(index)" class="w-6 h-6 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">+</button>
                                            </div>
                                        </td>
                                        <td class="px-4 py-2 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100" x-text="formatMoney(item.unit_price * item.quantity)"></td>
                                        <td class="px-4 py-2 text-right">
                                            <button type="button" @click="cart.splice(index, 1)" class="text-red-600 dark:text-red-400 text-sm hover:underline">{{ __('Remove') }}</button>
                                        </td>
                                    </tr>
                                </template>
                                <tr x-show="cart.length === 0">
                                    <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">{{ __('Cart is empty. Scan or search a product to begin.') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Checkout column -->
                <div class="space-y-4">
                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-2">{{ __('Member') }}</h3>
                        <template x-if="member">
                            <div class="flex items-center justify-between text-sm bg-gray-50 dark:bg-gray-900/40 rounded-md px-3 py-2">
                                <div>
                                    <div class="text-gray-900 dark:text-gray-100" x-text="member.name"></div>
                                    <div class="text-gray-400 dark:text-gray-500 text-xs" x-text="member.phone"></div>
                                </div>
                                <button type="button" @click="member = null" class="text-red-600 dark:text-red-400 hover:underline">{{ __('Clear') }}</button>
                            </div>
                        </template>
                        <template x-if="! member">
                            <div class="relative">
                                <input type="text" x-model="memberQuery" @input.debounce.300ms="onMemberSearch()" placeholder="{{ __('Search by name or phone...') }}" class="block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <div x-show="memberResults.length > 0" x-cloak @click.outside="memberResults = []" class="absolute z-40 mt-1 w-full rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5">
                                    <template x-for="result in memberResults" :key="result.id">
                                        <button type="button" @click="member = result; memberResults = []; memberQuery = ''" class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100" x-text="result.name + ' (' + (result.phone ?? '—') + ')'"></button>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>

                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-2">{{ __('Voucher / Discount Code') }}</h3>
                        <div class="flex gap-2">
                            <input type="text" x-model="discountCode" placeholder="{{ __('Enter code...') }}" class="block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <x-secondary-button type="button" @click="applyDiscount()">{{ __('Apply') }}</x-secondary-button>
                        </div>
                        <p x-show="discountInfo && discountInfo.valid" class="mt-2 text-sm text-emerald-600 dark:text-emerald-400" x-text="discountInfo ? discountInfo.name + ' applied' : ''"></p>
                        <p x-show="discountError" class="mt-2 text-sm text-red-600 dark:text-red-400" x-text="discountError"></p>
                    </div>

                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4 space-y-1 text-sm">
                        <div class="flex justify-between text-gray-600 dark:text-gray-400">
                            <span>{{ __('Subtotal') }}</span>
                            <span class="tabular-nums" x-text="formatMoney(subtotal)"></span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-gray-400" x-show="discountAmount > 0">
                            <span>{{ __('Discount') }}</span>
                            <span class="tabular-nums" x-text="'-' + formatMoney(discountAmount)"></span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-gray-400" x-show="taxAmount > 0">
                            <span>{{ __('Tax') }}</span>
                            <span class="tabular-nums" x-text="formatMoney(taxAmount)"></span>
                        </div>
                        <div class="flex justify-between text-base font-semibold text-gray-900 dark:text-gray-100 pt-2 border-t border-gray-100 dark:border-gray-700">
                            <span>{{ __('Total') }}</span>
                            <span class="tabular-nums" x-text="formatMoney(total)"></span>
                        </div>
                    </div>

                    <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                        <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Payment (F4)') }}</h3>
                        <div class="flex gap-2 mb-3" x-ref="paymentTabs">
                            <button type="button" @click="paymentMethod = 'cash'" :class="paymentMethod === 'cash' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200'" class="flex-1 rounded-md py-2 text-sm font-medium">{{ __('Cash') }}</button>
                            <button type="button" @click="paymentMethod = 'transfer'" :class="paymentMethod === 'transfer' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200'" class="flex-1 rounded-md py-2 text-sm font-medium">{{ __('Transfer') }}</button>
                            <button type="button" @click="paymentMethod = 'qris'" :class="paymentMethod === 'qris' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200'" class="flex-1 rounded-md py-2 text-sm font-medium">{{ __('QRIS') }}</button>
                        </div>

                        <template x-if="paymentMethod === 'cash'">
                            <div class="space-y-2">
                                <x-input-label for="tendered" :value="__('Amount Tendered')" />
                                <input id="tendered" type="number" min="0" step="0.01" x-model.number="tenderedAmount" class="block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                                    <span>{{ __('Change') }}</span>
                                    <span class="tabular-nums" x-text="formatMoney(Math.max(0, tenderedAmount - total))"></span>
                                </div>
                            </div>
                        </template>

                        <template x-if="paymentMethod === 'transfer'">
                            <div>
                                <x-input-label for="transfer_reference" :value="__('Transfer Reference')" />
                                <input id="transfer_reference" type="text" x-model="paymentReference" class="block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                        </template>

                        <template x-if="paymentMethod === 'qris'">
                            <div class="space-y-2 text-center">
                                <img :src="qrCodeUrl + '?amount=' + total" alt="QRIS" class="mx-auto w-40 h-40 bg-white p-2 rounded-md" x-show="total > 0">
                                <x-input-label for="qris_reference" :value="__('Transaction Reference (from your QRIS terminal)')" />
                                <input id="qris_reference" type="text" x-model="paymentReference" class="block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                        </template>

                        <button
                            type="button"
                            x-ref="checkoutButton"
                            @click="checkout()"
                            :disabled="cart.length === 0 || submitting"
                            class="mt-4 w-full py-3 rounded-md bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold"
                        >
                            <span x-show="! submitting">{{ __('Complete Sale (F10)') }}</span>
                            <span x-show="submitting">{{ __('Processing...') }}</span>
                        </button>

                        <button type="button" @click="clearCart()" class="mt-2 w-full py-2 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm">
                            {{ __('Clear Cart (F6)') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-pos-layout>