@php
    $productsJson = collect($products ?? [])->map(function ($product) {
        return [
            'id' => $product->id,
            'name' => $product->name,
            'category_id' => $product->category_id,
            'category_name' => $product->category->name ?? '',
            'selling_price' => (float) $product->selling_price,
            'image' => $product->image?->url,
            'stock_qty' => (float) $product->stock_qty,
            'barcode' => $product->barcode ?? '',
        ];
    })->values();

    $paymentMethodsJson = collect($paymentMethods ?? [])->map(function ($method) {
        if (is_array($method)) {
            return [
                'id' => $method['id'] ?? null,
                'name' => $method['name'] ?? '',
            ];
        }

        return [
            'id' => $method->id ?? null,
            'name' => $method->name ?? '',
        ];
    })->values();

    $customersJson = collect($customers ?? [])->map(function ($customer) {
        return [
            'id' => $customer->id,
            'name' => $customer->name,
            'whatsapp' => $customer->whatsapp,
            'email' => $customer->email,
            'address' => $customer->address,
            'status' => $customer->status,
        ];
    })->values();

    $orderTypesJson = collect($orderTypes ?? [])->map(function ($type) {
        return [
            'value' => $type,
            'label' => match ($type) {
                'dine_in' => 'Dine In',
                'takeaway' => 'Take Away',
                'delivery' => 'Delivery',
                'online_gojek' => 'Online Gojek',
                'online_grab' => 'Online Grab',
                'online_shopee' => 'Online Shopee',
                'reservasi' => 'Reservasi',
                'preorder' => 'Pre Order',
                'acara' => 'Acara',
                default => ucwords(str_replace('_', ' ', $type)),
            },
        ];
    })->values();

    $checkoutDefaultsJson = [
        'customerMode' => 'existing',
        'customerId' => '',
        'customerName' => '',
        'customerWhatsapp' => '',
        'customerEmail' => '',
        'customerAddress' => '',
        'paymentMethodId' => $paymentMethodId ?? '',
        'paymentAmount' => $paymentAmount ?? 0,
        'orderStatusId' => $orderStatusId ?? '',
        'orderType' => $orderType ?? \App\Models\Order::ORDER_TYPE_DINE_IN,
    ];
@endphp

<div
    class="h-full overflow-y-auto px-3 py-3 sm:p-4 space-y-4 pb-28 md:pb-6"
    x-data="posPageState({
        initialCart: @js($initialCart ?? []),
        products: @js($productsJson),
        categories: @js($categories ?? []),
        paymentMethods: @js($paymentMethodsJson),
        customers: @js($customersJson),
        orderTypes: @js($orderTypesJson),
        checkoutDefaults: @js($checkoutDefaultsJson),
        bluetoothStatus: @js($bluetoothStatus ?? 'Belum terhubung'),
    })"
    x-init="init()"
>
    @if (session()->has('success'))
        <div class="rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
            {{ session('success') }}
        </div>
    @endif

    @if (session()->has('error'))
        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ session('error') }}
        </div>
    @endif

    <div class="flex-1 h-full flex flex-col dark:bg-[#0f0f10] bg-gray-50 overflow-hidden">
        <div class="p-4 md:p-6 border-b dark:border-white/5 border-gray-200 flex flex-col md:flex-row justify-between md:items-center gap-4 shrink-0">
            <div>
                <h1 class="text-xl md:text-2xl font-bold">POS</h1>
                <p class="text-sm dark:text-gray-400 text-gray-600">
                    Kelola transaksi kasir dengan pilihan kustomer existing atau baru
                </p>
            </div>

            <div class="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
                <div class="relative w-full md:w-auto flex items-center gap-3">
                    <div class="hidden md:flex items-center gap-2 px-3 py-2 rounded-xl bg-gradient-to-r from-brand-500/10 to-brand-500/5 border border-brand-500/20">
                        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">
                            Kasir Aktif
                        </span>
                        <span class="text-sm font-semibold text-brand-500">
                            {{ $userProfile->name ?? 'Kasir' }}
                        </span>
                    </div>

                    <div class="relative w-full md:w-72">
                        <svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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"></path>
                        </svg>

                        <input
                            type="text"
                            x-model="searchProduct"
                            placeholder="Cari produk..."
                            class="pl-10 pr-10 py-2 w-full dark:bg-white/5 bg-white border dark:border-white/10 border-gray-200 rounded-xl focus:border-brand-500 focus:ring-1 focus:ring-brand-500 outline-none transition placeholder-gray-500"
                        >

                        <button
                            x-show="searchProduct !== ''"
                            @click="searchProduct = ''"
                            type="button"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
                            title="Hapus pencarian"
                        >
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <button
                        type="button"
                        x-show="searchProduct !== '' || selectedCategory !== ''"
                        @click="resetFilter()"
                        class="px-4 py-2 rounded-xl bg-gray-200 text-gray-700 dark:bg-white/10 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-white/20 transition whitespace-nowrap"
                    >
                        Reset
                    </button>
                </div>

                <button
                    type="button"
                    @click="openBarcodeMode()"
                    class="w-full sm:w-auto px-4 py-2 bg-brand-500 text-white font-bold rounded-xl hover:bg-brand-600 transition flex items-center justify-center gap-2"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7V5a1 1 0 011-1h2m10 0h2a1 1 0 011 1v2M4 17v2a1 1 0 001 1h2m10 0h2a1 1 0 001-1v-2M7 12h10"></path>
                    </svg>
                    KASIR DENGAN SCAN BARCODE
                </button>

                <button
                    type="button"
                    onclick="window.posBluetooth.connect()"
                    class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition flex items-center justify-center gap-2"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 8l6 4-6 4V8zm6-4l6 8-6 8V4z"></path>
                    </svg>
                    Connect Bluetooth
                </button>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto p-4 md:p-6 pb-24 md:pb-6">
            <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
                <div class="space-y-4 xl:col-span-2 min-w-0">
                    <div class="rounded-2xl border bg-white dark:bg-white/5 dark:border-white/5 border-gray-200 p-4 shadow-sm dark:shadow-none">
                        <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                            <div>
                                <label class="mb-1 block text-sm font-medium">Cari Produk</label>
                                <input
                                    type="text"
                                    x-model="searchProduct"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                    placeholder="Cari nama produk"
                                >
                            </div>

                            <div>
                                <label class="mb-1 block text-sm font-medium">Kategori</label>
                                <select
                                    x-model="selectedCategory"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                >
                                    <option value="">Semua Kategori</option>
                                    <template x-for="category in categories" :key="category.id">
                                        <option :value="String(category.id)" x-text="category.name"></option>
                                    </template>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border bg-white dark:bg-white/5 dark:border-white/5 border-gray-200 p-4 shadow-sm dark:shadow-none">
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <h2 class="text-lg font-semibold">Produk</h2>
                            <div class="shrink-0 text-sm dark:text-gray-400 text-gray-500">
                                <span x-text="filteredProducts.length"></span> produk
                            </div>
                        </div>

                        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
                            <template x-if="filteredProducts.length > 0">
                                <template x-for="product in filteredProducts" :key="product.id">
                                    <button
                                        type="button"
                                        @click="addToCart(product)"
                                        class="dark:bg-white/5 bg-white border dark:border-white/5 border-gray-200 rounded-2xl overflow-hidden group hover:border-brand-500/40 transition flex flex-col shadow-sm dark:shadow-none text-left"
                                    >
                                        <div class="relative h-36 md:h-40 dark:bg-gray-800 bg-gray-100 overflow-hidden">
                                            <template x-if="product.image">
                                                <img
                                                    :src="product.image"
                                                    :alt="product.name"
                                                    loading="lazy"
                                                    decoding="async"
                                                    class="w-full h-full object-cover transition duration-300 group-hover:scale-[1.02]"
                                                >
                                            </template>

                                            <template x-if="!product.image">
                                                <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                                    </svg>
                                                </div>
                                            </template>

                                            <div class="absolute top-2 right-2">
                                                <span class="px-2 py-1 rounded-md text-[10px] md:text-xs font-bold bg-white/90 text-gray-700" x-text="product.category_name || '-'"></span>
                                            </div>
                                        </div>

                                        <div class="p-3 md:p-4 flex-1 flex flex-col">
                                            <div class="mb-2">
                                                <h3 class="font-bold text-sm md:text-base leading-tight line-clamp-2 min-h-[2.5rem]" x-text="product.name"></h3>
                                                <p class="text-[11px] md:text-xs dark:text-gray-400 text-gray-500 mt-1 truncate" x-text="product.category_name || '-'"></p>
                                                <p class="text-[11px] text-red-500 font-semibold mt-1" x-text="'Stok: ' + product.stock_qty"></p>
                                                <p class="text-[11px] text-gray-500 font-mono mt-1 truncate" x-text="product.barcode || '-'"></p>
                                            </div>

                                            <div class="mt-auto pt-3 flex items-center justify-between gap-2">
                                                <span class="text-brand-500 font-bold text-sm md:text-base" x-text="formatCurrency(product.selling_price)"></span>

                                                <span class="p-2 dark:bg-white/10 bg-gray-100 rounded-lg text-brand-500">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>
                                    </button>
                                </template>
                            </template>

                            <template x-if="filteredProducts.length === 0">
                                <div class="col-span-full flex flex-col items-center justify-center py-20 dark:text-gray-500 text-gray-400">
                                    <svg class="w-16 h-16 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                    </svg>
                                    <p class="text-xl font-semibold">Tidak ada produk ditemukan</p>
                                    <p class="text-sm">Coba ubah kata kunci atau kategori</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <div class="space-y-4 min-w-0">
                    <div class="rounded-2xl border bg-white dark:bg-white/5 dark:border-white/5 border-gray-200 p-4 shadow-sm dark:shadow-none">
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <h2 class="text-lg font-semibold">Keranjang</h2>

                            <button
                                type="button"
                                @click="clearCart()"
                                class="shrink-0 text-sm text-red-600 hover:underline"
                            >
                                Clear
                            </button>
                        </div>

                        <div class="max-h-[40vh] space-y-3 overflow-y-auto pr-1 xl:max-h-[52vh]">
                            <template x-if="cartItems.length > 0">
                                <template x-for="item in cartItems" :key="item.id">
                                    <div class="rounded-xl border dark:border-white/10 border-gray-200 p-3">
                                        <div class="flex items-start justify-between gap-3">
                                            <div class="min-w-0 flex-1">
                                                <div class="truncate font-medium" x-text="item.name"></div>
                                                <div class="text-sm text-gray-500" x-text="formatCurrency(item.price)"></div>
                                            </div>

                                            <button
                                                type="button"
                                                @click="removeFromCart(item.id)"
                                                class="shrink-0 text-sm text-red-600"
                                            >
                                                Hapus
                                            </button>
                                        </div>

                                        <div class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                            <div class="flex items-center gap-2">
                                                <button
                                                    type="button"
                                                    @click="decreaseQty(item.id)"
                                                    class="rounded-lg border dark:border-white/10 border-gray-200 px-3 py-1.5"
                                                >
                                                    -
                                                </button>

                                                <span class="min-w-[30px] text-center" x-text="item.quantity"></span>

                                                <button
                                                    type="button"
                                                    @click="increaseQty(item.id)"
                                                    class="rounded-lg border dark:border-white/10 border-gray-200 px-3 py-1.5"
                                                >
                                                    +
                                                </button>
                                            </div>

                                            <div class="text-right font-semibold" x-text="formatCurrency(item.price * item.quantity)"></div>
                                        </div>
                                    </div>
                                </template>
                            </template>

                            <template x-if="cartItems.length === 0">
                                <div class="rounded-xl border border-dashed dark:border-white/10 border-gray-200 p-6 text-center text-sm text-gray-500">
                                    Keranjang kosong
                                </div>
                            </template>
                        </div>

                        <div class="mt-4 space-y-2 border-t dark:border-white/10 border-gray-200 pt-4 text-sm">
                            <div class="flex justify-between gap-3">
                                <span>Subtotal</span>
                                <span class="text-right" x-text="formatCurrency(subtotal)"></span>
                            </div>
                            <div class="flex justify-between gap-3">
                                <span>Pajak</span>
                                <span class="text-right" x-text="formatCurrency(tax)"></span>
                            </div>
                            <div class="flex justify-between gap-3 text-base font-bold">
                                <span>Total</span>
                                <span class="text-right" x-text="formatCurrency(total)"></span>
                            </div>
                        </div>

                        <div class="mt-4 space-y-3">
                            <template x-if="customers.length === 0">
                                <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
                                    Belum ada data kustomer.
                                    <a href="{{ route('customers.index') }}" class="ml-1 font-semibold underline">
                                        Tambah kustomer dulu
                                    </a>
                                </div>
                            </template>

                            <button
                                type="button"
                                @click="openCheckout()"
                                class="w-full rounded-xl bg-green-600 px-4 py-3 text-sm font-semibold text-white hover:bg-green-700 sm:text-base"
                            >
                                Checkout
                            </button>
                        </div>
                    </div>

                    <div class="rounded-2xl border bg-white dark:bg-white/5 dark:border-white/5 border-gray-200 p-4 shadow-sm dark:shadow-none">
                        <h2 class="text-lg font-semibold">Status Perangkat</h2>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                            Status Bluetooth: <span x-text="bluetoothStatus"></span>
                        </p>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                            Status Scanner: <span x-text="scannerStatus"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div
        x-show="showBarcodeModal"
        x-cloak
        class="fixed inset-0 z-[70] flex items-end justify-center bg-black/60 p-3 sm:items-center sm:p-4"
        style="display: none;"
    >
        <div
            @click.away="closeBarcodeMode()"
            class="dark:bg-[#18181b] bg-white border dark:border-white/10 border-gray-200 rounded-2xl w-full max-w-3xl shadow-2xl flex flex-col max-h-[94vh] relative overflow-hidden"
        >
            <div class="p-5 border-b dark:border-white/5 border-gray-200 flex justify-between items-start gap-4">
                <div>
                    <h2 class="text-xl font-bold">Kasir Dengan Scan Barcode</h2>
                    <p class="text-sm dark:text-gray-400 text-gray-600">
                        Scan dengan kamera atau device scanner
                    </p>
                </div>

                <button
                    type="button"
                    @click="closeBarcodeMode()"
                    class="dark:text-gray-400 text-gray-500 hover:text-gray-900 dark:hover:text-white"
                >
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <div class="p-5 overflow-y-auto space-y-5">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3">
                            <h3 class="font-semibold text-base">Scanner Kamera</h3>

                            <div class="flex items-center gap-2">
                                <button
                                    type="button"
                                    x-show="!cameraActive"
                                    @click="startCameraScanner()"
                                    class="rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600 transition"
                                >
                                    Buka Kamera
                                </button>

                                <button
                                    type="button"
                                    x-show="cameraActive"
                                    @click="stopCameraScanner()"
                                    class="rounded-xl bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
                                >
                                    Tutup Kamera
                                </button>
                            </div>
                        </div>

                        <div class="rounded-2xl overflow-hidden border dark:border-white/10 border-gray-200 bg-black relative min-h-[280px]">
                            <video
                                x-ref="barcodeVideo"
                                autoplay
                                playsinline
                                muted
                                class="w-full h-[280px] object-cover"
                            ></video>

                            <div x-show="!cameraActive" class="absolute inset-0 flex flex-col items-center justify-center text-white/80 bg-black/70 text-center px-4">
                                <svg class="w-12 h-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 7V5a2 2 0 012-2h2m12 0h2a2 2 0 012 2v2m0 10v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2m4-5h10"></path>
                                </svg>
                                <p class="text-sm">Tekan buka kamera untuk mulai scan barcode</p>
                            </div>

                            <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
                                <div class="w-[82%] h-20 border-2 border-brand-400 rounded-xl shadow-[0_0_0_9999px_rgba(0,0,0,0.25)]"></div>
                            </div>

                            <div
                                x-show="scanCooldown"
                                class="absolute inset-0 bg-black/45 flex flex-col items-center justify-center text-white text-center px-4"
                            >
                                <div class="text-3xl font-bold" x-text="cooldownRemaining"></div>
                                <p class="mt-2 text-sm">Tunggu sebelum scan berikutnya</p>
                            </div>
                        </div>

                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            Arahkan barcode ke area kotak scan
                        </p>
                    </div>

                    <div class="space-y-4">
                        <div class="rounded-2xl border dark:border-white/10 border-gray-200 p-4">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="font-semibold text-base">Scanner Device</h3>

                                <button
                                    type="button"
                                    @click="focusScannerInput()"
                                    class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 transition"
                                >
                                    Fokus Scanner
                                </button>
                            </div>

                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                                Untuk scanner USB/Bluetooth yang terbaca seperti keyboard
                            </p>

                            <div class="mt-4">
                                <label class="mb-1 block text-sm font-medium">Input Barcode</label>
                                <input
                                    type="text"
                                    x-ref="scannerInput"
                                    x-model="scannerInput"
                                    @input="handleScannerInput()"
                                    @keydown.enter.prevent="submitManualBarcode()"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 font-mono"
                                    placeholder="Scan / input barcode lalu Enter"
                                    autocomplete="off"
                                    autocapitalize="off"
                                    spellcheck="false"
                                    :disabled="scanCooldown"
                                >
                            </div>

                            <div class="mt-3 flex gap-2">
                                <button
                                    type="button"
                                    @click="submitManualBarcode()"
                                    class="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 transition"
                                    :disabled="scanCooldown"
                                >
                                    Scan Barcode
                                </button>

                                <button
                                    type="button"
                                    @click="scannerInput = ''; focusScannerInput()"
                                    class="rounded-xl bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-300 transition dark:bg-white/10 dark:text-gray-200 dark:hover:bg-white/20"
                                >
                                    Reset
                                </button>
                            </div>
                        </div>

                        <div class="rounded-2xl border dark:border-white/10 border-gray-200 p-4">
                            <h3 class="font-semibold text-base">Hasil Scan</h3>

                            <div class="mt-3 space-y-2 text-sm">
                                <div class="flex justify-between gap-3">
                                    <span class="text-gray-500 dark:text-gray-400">Status</span>
                                    <span class="font-semibold text-right" x-text="scannerStatus"></span>
                                </div>

                                <div class="flex justify-between gap-3">
                                    <span class="text-gray-500 dark:text-gray-400">Barcode Terakhir</span>
                                    <span class="font-mono font-semibold text-right break-all" x-text="lastScannedBarcode || '-'"></span>
                                </div>

                                <div class="flex justify-between gap-3">
                                    <span class="text-gray-500 dark:text-gray-400">Produk Terakhir</span>
                                    <span class="font-semibold text-right break-words" x-text="lastScannedProduct || '-'"></span>
                                </div>

                                <div class="flex justify-between gap-3">
                                    <span class="text-gray-500 dark:text-gray-400">Cooldown</span>
                                    <span class="font-semibold text-right" x-text="scanCooldown ? `${cooldownRemaining} detik` : 'Siap'"></span>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-2xl border dark:border-white/10 border-gray-200 p-4">
                            <button
                                type="button"
                                @click="closeBarcodeMode()"
                                class="w-full rounded-xl bg-brand-500 px-4 py-3 text-sm font-semibold text-white hover:bg-brand-600 transition"
                            >
                                Tutup Mode Barcode
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div
        x-show="showCheckoutModal"
        x-cloak
        class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-3 sm:items-center sm:p-4"
        style="display: none;"
    >
        <div
            @click.away="closeCheckout()"
            class="dark:bg-[#18181b] bg-white border dark:border-white/10 border-gray-200 rounded-2xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh] relative"
        >
            <div class="p-6 border-b dark:border-white/5 border-gray-200 flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold">Checkout</h2>
                    <p class="text-sm dark:text-gray-400 text-gray-600">Pilih kustomer existing atau buat baru sebelum simpan order</p>
                </div>

                <button
                    type="button"
                    @click="closeCheckout()"
                    class="dark:text-gray-400 text-gray-500 hover:text-gray-900 dark:hover:text-white"
                >
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <div class="p-6 overflow-y-auto space-y-4">
                <div class="rounded-2xl border dark:border-white/10 border-gray-200 p-4 space-y-4">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <h3 class="font-bold text-base">Data Kustomer</h3>
                            <p class="text-sm dark:text-gray-400 text-gray-600">Hubungkan transaksi ke data kustomer</p>
                        </div>

                        <template x-if="customers.length === 0">
                            <a
                                href="{{ route('customers.index') }}"
                                class="shrink-0 rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600 transition"
                            >
                                Kelola Kustomer
                            </a>
                        </template>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <label class="flex items-center gap-2 cursor-pointer rounded-xl border dark:border-white/10 border-gray-200 px-4 py-3">
                            <input type="radio" value="existing" x-model="checkoutForm.customerMode">
                            <span class="text-sm font-medium">Kustomer Existing</span>
                        </label>

                        <label class="flex items-center gap-2 cursor-pointer rounded-xl border dark:border-white/10 border-gray-200 px-4 py-3">
                            <input type="radio" value="new" x-model="checkoutForm.customerMode">
                            <span class="text-sm font-medium">Kustomer Baru</span>
                        </label>
                    </div>

                    <div x-show="checkoutForm.customerMode === 'existing'" x-cloak class="space-y-3">
                        <template x-if="customers.length > 0">
                            <div>
                                <label class="mb-1 block text-sm font-medium">Pilih Kustomer</label>
                                <select
                                    x-model="checkoutForm.customerId"
                                    @change="syncSelectedCustomer()"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                >
                                    <option value="">Pilih kustomer</option>
                                    <template x-for="customer in activeCustomers" :key="customer.id">
                                        <option :value="String(customer.id)" x-text="customer.name + ' - ' + customer.whatsapp"></option>
                                    </template>
                                </select>
                            </div>
                        </template>

                        <template x-if="customers.length === 0">
                            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
                                Belum ada data kustomer.
                                <a href="{{ route('customers.index') }}" class="ml-1 font-semibold underline">
                                    Tambah kustomer dulu
                                </a>
                            </div>
                        </template>
                    </div>

                    <div x-show="checkoutForm.customerMode === 'new'" x-cloak class="space-y-3">
                        <div>
                            <label class="mb-1 block text-sm font-medium">Nama Kustomer</label>
                            <input
                                type="text"
                                x-model="checkoutForm.customerName"
                                class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                placeholder="Masukkan nama kustomer"
                            >
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                                <label class="mb-1 block text-sm font-medium">WhatsApp</label>
                                <input
                                    type="text"
                                    x-model="checkoutForm.customerWhatsapp"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                    placeholder="62812xxxxxxx"
                                >
                            </div>

                            <div>
                                <label class="mb-1 block text-sm font-medium">Email</label>
                                <input
                                    type="email"
                                    x-model="checkoutForm.customerEmail"
                                    class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                    placeholder="email@contoh.com"
                                >
                            </div>
                        </div>

                        <div>
                            <label class="mb-1 block text-sm font-medium">Alamat</label>
                            <textarea
                                x-model="checkoutForm.customerAddress"
                                rows="3"
                                class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                                placeholder="Masukkan alamat kustomer"
                            ></textarea>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="mb-1 block text-sm font-medium">Jenis Order</label>
                        <select
                            x-model="checkoutForm.orderType"
                            class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                        >
                            <template x-for="type in orderTypes" :key="type.value">
                                <option :value="type.value" x-text="type.label"></option>
                            </template>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium">Metode Pembayaran</label>
                        <select
                            x-model="checkoutForm.paymentMethodId"
                            class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                        >
                            <option value="">Pilih metode pembayaran</option>
                            <template x-for="method in paymentMethods" :key="method.id">
                                <option :value="String(method.id)" x-text="method.name"></option>
                            </template>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium">Jumlah Bayar</label>
                        <input
                            type="number"
                            x-model.number="checkoutForm.paymentAmount"
                            class="w-full rounded-xl border dark:bg-white/5 bg-white dark:border-white/10 border-gray-200 px-3 py-3 text-sm outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
                        >
                    </div>

                    <div class="space-y-2 rounded-xl dark:bg-white/5 bg-gray-50 p-4 text-sm">
                        <div class="flex justify-between gap-3">
                            <span>Total</span>
                            <span class="text-right" x-text="formatCurrency(total)"></span>
                        </div>
                        <div class="flex justify-between gap-3 font-bold">
                            <span>Kembalian</span>
                            <span class="text-right" x-text="formatCurrency(changeAmount)"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-6 border-t dark:border-white/5 border-gray-200 flex flex-col-reverse gap-3 sm:flex-row">
                <button
                    type="button"
                    @click="closeCheckout()"
                    class="w-full rounded-xl border dark:border-white/10 border-gray-200 px-4 py-3 text-sm font-medium"
                >
                    Batal
                </button>

                <button
                    type="button"
                    @click="submitCheckout()"
                    :disabled="isSubmitting"
                    class="w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
                >
                    <span x-show="!isSubmitting">Simpan Order</span>
                    <span x-show="isSubmitting">Memproses...</span>
                </button>
            </div>
        </div>

        <div
            x-show="showStockModal"
            x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
        >
            <div class="bg-white dark:bg-[#18181b] rounded-2xl shadow-xl w-full max-w-md p-6 space-y-4">
                <div class="text-center">
                    <h2 class="text-xl font-bold text-red-600">Stok Tidak Cukup</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
                        Produk <span class="font-semibold" x-text="selectedProduct?.name"></span> stok tidak mencukupi.
                    </p>
                </div>

                <div class="flex flex-col gap-3 mt-4">
                    <button
                        @click="confirmIgnoreStock()"
                        class="w-full py-3 rounded-xl bg-green-600 text-white font-semibold hover:bg-green-700 transition"
                    >
                        Abaikan Stok & Lanjutkan
                    </button>

                    <button
                        @click="goToEditProduct()"
                        class="w-full py-3 rounded-xl bg-yellow-500 text-white font-semibold hover:bg-yellow-600 transition"
                    >
                        Isi Stok Produk
                    </button>

                    <button
                        @click="showStockModal = false"
                        class="w-full py-2 text-sm text-gray-500 hover:underline"
                    >
                        Batal
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        [x-cloak] {
            display: none !important;
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>

    <script>
        function posPageState(config) {
            return {
                searchProduct: '',
                selectedCategory: '',
                showCheckoutModal: false,
                isSubmitting: false,
                bluetoothStatus: config.bluetoothStatus || 'Belum terhubung',

                showStockModal: false,
                selectedProduct: null,

                showBarcodeModal: false,
                scannerInput: '',
                scannerStatus: 'Siap digunakan',
                lastScannedBarcode: '',
                lastScannedProduct: '',
                cameraActive: false,
                scannerBuffer: '',
                scannerBufferTimer: null,
                cameraStream: null,
                barcodeDetector: null,
                cameraLoopRunning: false,
                scanningLocked: false,

                scanCooldown: false,
                scanCooldownSeconds: 3,
                cooldownRemaining: 0,
                cooldownInterval: null,
                audioContext: null,

                products: Array.isArray(config.products) ? config.products : [],
                categories: Array.isArray(config.categories) ? config.categories : [],
                paymentMethods: Array.isArray(config.paymentMethods) ? config.paymentMethods : [],
                customers: Array.isArray(config.customers) ? config.customers : [],
                orderTypes: Array.isArray(config.orderTypes) ? config.orderTypes : [],

                cart: {},
                tax: 0,

                checkoutForm: {
                    customerMode: config.checkoutDefaults?.customerMode || 'existing',
                    customerId: config.checkoutDefaults?.customerId ? String(config.checkoutDefaults.customerId) : '',
                    customerName: config.checkoutDefaults?.customerName || '',
                    customerWhatsapp: config.checkoutDefaults?.customerWhatsapp || '',
                    customerEmail: config.checkoutDefaults?.customerEmail || '',
                    customerAddress: config.checkoutDefaults?.customerAddress || '',
                    paymentMethodId: config.checkoutDefaults?.paymentMethodId ? String(config.checkoutDefaults.paymentMethodId) : '',
                    paymentAmount: Number(config.checkoutDefaults?.paymentAmount || 0),
                    orderStatusId: config.checkoutDefaults?.orderStatusId ? String(config.checkoutDefaults.orderStatusId) : '',
                    orderType: config.checkoutDefaults?.orderType || 'dine_in',
                },

                init() {
                    this.normalizeInitialCart(config.initialCart || []);
                    this.registerBluetoothEvents();
                    this.prepareAudio();
                },

                prepareAudio() {
                    try {
                        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
                        if (AudioContextClass) {
                            this.audioContext = new AudioContextClass();
                        }
                    } catch (e) {
                        this.audioContext = null;
                    }
                },

                registerBluetoothEvents() {
                    window.addEventListener('pos-bluetooth-connected', (event) => {
                        this.bluetoothStatus = 'Terhubung ke ' + (event.detail?.name || 'Unknown Device');
                    });

                    window.addEventListener('pos-bluetooth-error', (event) => {
                        this.bluetoothStatus = 'Error Bluetooth: ' + (event.detail?.message || 'Unknown error');
                    });
                },

                normalizeInitialCart(items) {
                    const normalized = {};

                    (Array.isArray(items) ? items : []).forEach((item) => {
                        const id = Number(item.id || 0);
                        const quantity = Number(item.quantity || 0);

                        if (id < 1 || quantity < 1) return;

                        normalized[id] = {
                            id,
                            name: item.name || '',
                            price: Number(item.price || 0),
                            image: item.image || null,
                            quantity,
                        };
                    });

                    this.cart = normalized;
                },

                insertCart(product) {
                    const id = Number(product.id);

                    if (!this.cart[id]) {
                        this.cart[id] = {
                            id,
                            name: product.name || '',
                            price: Number(product.selling_price || product.price || 0),
                            image: product.image || null,
                            quantity: 1,
                        };
                    } else {
                        this.cart[id].quantity += 1;
                    }
                },

                confirmIgnoreStock() {
                    if (!this.selectedProduct) return;

                    this.insertCart(this.selectedProduct);
                    this.playScanSuccessSound();
                    this.startScanCooldown();
                    this.showStockModal = false;
                    this.selectedProduct = null;
                },

                goToEditProduct() {
                    if (!this.selectedProduct) return;

                    window.location.href = '/products/' + this.selectedProduct.id + '/edit';
                },

                get activeCustomers() {
                    return this.customers.filter(c => (c.status || 'inactive') === 'active');
                },

                get filteredProducts() {
                    const keyword = (this.searchProduct || '').trim().toLowerCase();
                    const categoryId = this.selectedCategory ? String(this.selectedCategory) : '';

                    return this.products.filter(product => {
                        const matchKeyword =
                            !keyword ||
                            (product.name || '').toLowerCase().includes(keyword) ||
                            String(product.id).includes(keyword) ||
                            (product.category_name || '').toLowerCase().includes(keyword) ||
                            (product.barcode || '').toLowerCase().includes(keyword);

                        const matchCategory =
                            !categoryId ||
                            String(product.category_id || '') === categoryId;

                        return matchKeyword && matchCategory;
                    });
                },

                get cartItems() {
                    return Object.values(this.cart);
                },

                get subtotal() {
                    return this.cartItems.reduce((sum, item) => {
                        return sum + (Number(item.price) * Number(item.quantity));
                    }, 0);
                },

                get total() {
                    return this.subtotal + this.tax;
                },

                get changeAmount() {
                    return Math.max(0, Number(this.checkoutForm.paymentAmount || 0) - this.total);
                },

                formatCurrency(value) {
                    return 'Rp ' + new Intl.NumberFormat('id-ID').format(Number(value || 0));
                },

                resetFilter() {
                    this.searchProduct = '';
                    this.selectedCategory = '';
                },

                addToCart(product) {
                    if (Number(product.stock_qty || 0) <= 0) {
                        this.selectedProduct = product;
                        this.showStockModal = true;
                        return;
                    }

                    this.insertCart(product);
                },

                increaseQty(productId) {
                    const id = Number(productId);
                    if (!this.cart[id]) return;
                    this.cart[id].quantity += 1;
                },

                decreaseQty(productId) {
                    const id = Number(productId);
                    if (!this.cart[id]) return;

                    const nextQty = Number(this.cart[id].quantity) - 1;

                    if (nextQty < 1) {
                        delete this.cart[id];
                    } else {
                        this.cart[id].quantity = nextQty;
                    }
                },

                removeFromCart(productId) {
                    const id = Number(productId);
                    if (!this.cart[id]) return;
                    delete this.cart[id];
                },

                clearCart() {
                    this.cart = {};
                    this.showCheckoutModal = false;
                    this.checkoutForm.paymentAmount = 0;
                    this.checkoutForm.orderType = 'dine_in';
                },

                openCheckout() {
                    if (this.cartItems.length === 0) {
                        alert('Keranjang kosong');
                        return;
                    }

                    if (this.customers.length === 0) {
                        this.checkoutForm.customerMode = 'new';
                    }

                    this.showCheckoutModal = true;
                },

                closeCheckout() {
                    this.showCheckoutModal = false;
                },

                openBarcodeMode() {
                    this.showBarcodeModal = true;
                    this.scannerStatus = 'Mode barcode aktif';
                    this.$nextTick(() => {
                        this.focusScannerInput();
                        this.startCameraScanner();
                    });
                },

                closeBarcodeMode() {
                    this.showBarcodeModal = false;
                    this.stopCameraScanner();
                    this.scannerInput = '';
                    this.stopScanCooldown(true);
                    this.scannerStatus = 'Mode barcode ditutup';
                },

                focusScannerInput() {
                    this.$nextTick(() => {
                        if (this.$refs.scannerInput) {
                            this.$refs.scannerInput.focus();
                            this.$refs.scannerInput.select?.();
                        }
                    });

                    if (!this.scanCooldown) {
                        this.scannerStatus = 'Siap menerima input scanner';
                    }
                },

                handleScannerInput() {
                    clearTimeout(this.scannerBufferTimer);
                    this.scannerBufferTimer = setTimeout(() => {
                        if (this.scannerInput && this.scannerInput.trim() !== '') {
                            this.submitManualBarcode();
                        }
                    }, 180);
                },

                submitManualBarcode() {
                    if (this.scanCooldown) return;

                    const value = (this.scannerInput || '').trim();
                    if (!value) return;
                    this.processScannedBarcode(value);
                    this.scannerInput = '';
                    this.focusScannerInput();
                },

                playScanSuccessSound() {
                    try {
                        if (!this.audioContext) {
                            this.prepareAudio();
                        }

                        if (!this.audioContext) return;

                        if (this.audioContext.state === 'suspended') {
                            this.audioContext.resume();
                        }

                        const now = this.audioContext.currentTime;
                        const oscillator = this.audioContext.createOscillator();
                        const gainNode = this.audioContext.createGain();

                        oscillator.type = 'sine';
                        oscillator.frequency.setValueAtTime(1046.5, now);

                        gainNode.gain.setValueAtTime(0.0001, now);
                        gainNode.gain.exponentialRampToValueAtTime(0.18, now + 0.01);
                        gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 0.18);

                        oscillator.connect(gainNode);
                        gainNode.connect(this.audioContext.destination);

                        oscillator.start(now);
                        oscillator.stop(now + 0.2);
                    } catch (e) {}
                },

                startScanCooldown() {
                    this.stopScanCooldown(true);
                    this.scanCooldown = true;
                    this.cooldownRemaining = this.scanCooldownSeconds;
                    this.scannerStatus = `Scan berhasil, tunggu ${this.cooldownRemaining} detik...`;

                    this.cooldownInterval = setInterval(() => {
                        this.cooldownRemaining -= 1;

                        if (this.cooldownRemaining > 0) {
                            this.scannerStatus = `Scan berhasil, tunggu ${this.cooldownRemaining} detik...`;
                            return;
                        }

                        this.stopScanCooldown();
                    }, 1000);
                },

                stopScanCooldown(silent = false) {
                    this.scanCooldown = false;
                    this.cooldownRemaining = 0;

                    if (this.cooldownInterval) {
                        clearInterval(this.cooldownInterval);
                        this.cooldownInterval = null;
                    }

                    if (!silent) {
                        this.scannerStatus = 'Siap digunakan';
                    }
                },

                processScannedBarcode(barcode) {
                    if (this.scanCooldown) return;
                    if (!barcode) return;

                    const clean = String(barcode).trim();
                    const product = this.products.find(item => String(item.barcode || '').trim() === clean);

                    this.lastScannedBarcode = clean;

                    if (!product) {
                        this.scannerStatus = 'Produk tidak ditemukan';
                        alert('Produk dengan barcode tersebut tidak ditemukan');
                        return;
                    }

                    this.lastScannedProduct = product.name || '-';

                    if (Number(product.stock_qty || 0) <= 0) {
                        this.selectedProduct = product;
                        this.showStockModal = true;
                        return;
                    }

                    this.insertCart(product);
                    this.playScanSuccessSound();
                    this.startScanCooldown();
                },

                async startCameraScanner() {
                    if (this.cameraActive) return;

                    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                        this.scannerStatus = 'Browser tidak mendukung kamera';
                        return;
                    }

                    try {
                        this.scannerStatus = 'Meminta akses kamera...';

                        const constraints = {
                            video: {
                                facingMode: { ideal: 'environment' }
                            },
                            audio: false,
                        };

                        this.cameraStream = await navigator.mediaDevices.getUserMedia(constraints);

                        if (this.$refs.barcodeVideo) {
                            this.$refs.barcodeVideo.srcObject = this.cameraStream;
                            await this.$refs.barcodeVideo.play().catch(() => {});
                        }

                        this.cameraActive = true;
                        this.scannerStatus = 'Kamera aktif';

                        if ('BarcodeDetector' in window) {
                            try {
                                this.barcodeDetector = new window.BarcodeDetector({
                                    formats: ['code_128', 'ean_13', 'ean_8', 'upc_a', 'upc_e', 'code_39', 'qr_code']
                                });
                                this.startBarcodeDetectionLoop();
                            } catch (e) {
                                this.barcodeDetector = null;
                            }
                        }
                    } catch (error) {
                        console.error(error);
                        this.scannerStatus = 'Gagal membuka kamera';
                    }
                },

                stopCameraScanner() {
                    this.cameraLoopRunning = false;
                    this.cameraActive = false;

                    if (this.cameraStream) {
                        this.cameraStream.getTracks().forEach(track => track.stop());
                        this.cameraStream = null;
                    }

                    if (this.$refs.barcodeVideo) {
                        this.$refs.barcodeVideo.srcObject = null;
                    }
                },

                async startBarcodeDetectionLoop() {
                    if (!this.barcodeDetector || !this.$refs.barcodeVideo) return;

                    this.cameraLoopRunning = true;

                    const loop = async () => {
                        if (!this.cameraLoopRunning || !this.cameraActive || !this.barcodeDetector) {
                            return;
                        }

                        try {
                            const results = await this.barcodeDetector.detect(this.$refs.barcodeVideo);

                            if (Array.isArray(results) && results.length > 0) {
                                const rawValue = results[0]?.rawValue || '';
                                if (rawValue) {
                                    if (!this.scanningLocked && !this.scanCooldown) {
                                        this.scanningLocked = true;
                                        this.processScannedBarcode(rawValue);
                                        setTimeout(() => {
                                            this.scanningLocked = false;
                                        }, 1200);
                                    }
                                }
                            }
                        } catch (error) {
                            console.error(error);
                        }

                        requestAnimationFrame(loop);
                    };

                    requestAnimationFrame(loop);
                },

                syncSelectedCustomer() {
                    const selected = this.customers.find(c => String(c.id) === String(this.checkoutForm.customerId));

                    if (!selected) {
                        this.checkoutForm.customerName = '';
                        this.checkoutForm.customerWhatsapp = '';
                        this.checkoutForm.customerEmail = '';
                        this.checkoutForm.customerAddress = '';
                        return;
                    }

                    this.checkoutForm.customerName = selected.name || '';
                    this.checkoutForm.customerWhatsapp = selected.whatsapp || '';
                    this.checkoutForm.customerEmail = selected.email || '';
                    this.checkoutForm.customerAddress = selected.address || '';
                },

                async submitCheckout() {
                    if (this.cartItems.length === 0) {
                        alert('Keranjang kosong');
                        return;
                    }

                    if (!this.checkoutForm.paymentMethodId) {
                        alert('Pilih metode pembayaran');
                        return;
                    }

                    if (!this.checkoutForm.orderType) {
                        alert('Pilih jenis order');
                        return;
                    }

                    if (Number(this.checkoutForm.paymentAmount || 0) < Number(this.total || 0)) {
                        alert('Jumlah pembayaran kurang dari total tagihan');
                        return;
                    }

                    this.isSubmitting = true;

                    try {
                        const response = await fetch('/pos/checkout-json', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify({
                                customer_mode: this.checkoutForm.customerMode,
                                customer_id: this.checkoutForm.customerMode === 'existing'
                                    ? this.checkoutForm.customerId || null
                                    : null,

                                customer_name: this.checkoutForm.customerName || 'Guest',
                                customer_whatsapp: this.checkoutForm.customerMode === 'new'
                                    ? (this.checkoutForm.customerWhatsapp || '')
                                    : null,
                                customer_email: this.checkoutForm.customerMode === 'new'
                                    ? (this.checkoutForm.customerEmail || '')
                                    : null,
                                customer_address: this.checkoutForm.customerMode === 'new'
                                    ? (this.checkoutForm.customerAddress || '')
                                    : null,

                                payment_method_id: Number(this.checkoutForm.paymentMethodId),
                                payment_amount: Number(this.checkoutForm.paymentAmount || 0),
                                order_status_id: this.checkoutForm.orderStatusId || null,
                                order_source: 'cashier',
                                order_type: this.checkoutForm.orderType,

                                items: this.cartItems.map(item => ({
                                    product_id: Number(item.id),
                                    quantity: Number(item.quantity || 0),
                                    note: null,
                                })),
                            }),
                        });

                        const data = await response.json();

                        if (!response.ok) {
                            throw new Error(data.error || data.message || 'Gagal memproses checkout');
                        }

                        alert(data.message || 'Order berhasil dibuat');
                        window.location.href = '/pos';

                    } catch (error) {
                        console.error(error);
                        alert(error.message || 'Gagal memproses checkout');
                    } finally {
                        this.isSubmitting = false;
                    }
                },
            };
        }
    </script>
</div>