@extends('layouts.authenticated')

@section('title', 'POS Kasir')
@section('page-title', 'POS Kasir')

@section('page-content')
<div class="flex flex-col lg:flex-row gap-4 h-auto lg:h-[calc(100dvh-7rem)] overflow-y-auto lg:overflow-hidden" x-data="posSystem()" x-init="init()" @keydown.window="handleShortcut($event)">

    <!-- Left Panel - Products -->
    <div class="flex flex-col flex-1 min-h-0 bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <!-- Search & Filter -->
        <div class="p-4 border-b border-gray-200 dark:border-slate-700">
            <div class="relative mb-3">
                <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" 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="search"
                       @input="handleSearchInput()"
                       @keydown.enter.prevent="handleSearchEnter()"
                       x-ref="barcodeSearch"
                       autofocus
                       placeholder="Scan barcode atau cari produk..."
                       class="w-full pl-10 pr-12 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 font-mono">
                <!-- Camera Button -->
                <button type="button"
                        @click="toggleCamera()"
                        :class="cameraActive ? 'bg-red-600 hover:bg-red-700' : 'bg-emerald-600 hover:bg-emerald-700'"
                        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-white rounded-lg transition-colors">
                    <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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </button>
            </div>

            <!-- Camera Scanner -->
            <div x-show="cameraActive" x-cloak class="mb-3">
                <div class="relative bg-black rounded-lg overflow-hidden" style="max-width: 400px; margin: 0 auto;">
                    <div id="pos-barcode-reader" style="width: 100%;"></div>
                    <div class="absolute top-2 right-2">
                        <button type="button" @click="toggleCamera()" class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full transition-colors">
                            <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>
                </div>
                <p class="text-xs text-center text-slate-500 dark:text-slate-400 mt-1">📷 Arahkan barcode produk ke kamera</p>
            </div>

            <!-- Categories Pills -->
            <div class="flex gap-2 overflow-x-auto pb-2 -mx-1 px-1">
                <button @click="selectedCategory = null; filterProducts()"
                        :class="selectedCategory === null ? 'bg-blue-600 text-white' : 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-gray-300 dark:border-slate-600'"
                        class="px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors">
                    Semua
                </button>
                @foreach($categories as $category)
                <button @click="selectedCategory = {{ $category->id }}; $nextTick(() => filterProducts())"
                        :class="selectedCategory === {{ $category->id }} ? 'bg-blue-600 text-white' : 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-gray-300 dark:border-slate-600'"
                        class="px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors">
                    {{ $category->name }}
                </button>
                @endforeach
            </div>
        </div>

        <!-- Product Grid -->
        <div class="flex-1 min-h-0 overflow-y-auto p-4 pos-product-scroll">
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-1 sm:gap-3" id="product-grid">
                @include('pos.partials.product-list', ['products' => $products])
            </div>

        </div>
    </div>

    <!-- Right Panel - Cart (Mobile: toggleable) -->
    <div class="flex min-h-0 flex-col bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden lg:w-96">
        <!-- Cart Header -->
        <div class="p-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                    </svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-slate-900 dark:text-white">Keranjang</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400" x-text="cart.length + ' item'"></p>
                </div>
            </div>
            <button @click="clearCart()" class="text-sm text-red-600 dark:text-red-400 hover:text-red-700 font-medium px-2 py-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                Batal
            </button>
        </div>

        <!-- Cart Items -->
        <div class="flex-1 overflow-y-auto p-4 space-y-3">
            <template x-for="(item, index) in [...cart].reverse()" :key="item.product_id">
                <div class="flex gap-3 p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg border border-gray-200 dark:border-slate-600">
                    <div class="flex-1 min-w-0">
                        <h4 class="text-sm font-semibold text-slate-900 dark:text-white truncate" x-text="item.name"></h4>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Rp <span x-text="formatNumber(item.price)"></span> × <span x-text="item.quantity"></span>
                        </p>
                    </div>
                    <div class="flex flex-col items-end justify-between">
                        <span class="text-sm font-bold text-slate-900 dark:text-white">
                            Rp <span x-text="formatNumber(item.price * item.quantity)"></span>
                        </span>
                        <div class="flex items-center gap-1.5">
                            <button @click="updateQuantity(item.product_id, item.quantity - 1)"
                                    class="w-7 h-7 rounded-md bg-gray-200 dark:bg-slate-600 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-slate-500 transition-colors">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                                </svg>
                            </button>
                            <span class="text-sm font-bold w-6 text-center text-slate-900 dark:text-white" x-text="item.quantity"></span>
                            <button @click="updateQuantity(item.product_id, item.quantity + 1)"
                                    class="w-7 h-7 rounded-md bg-gray-200 dark:bg-slate-600 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-slate-500 transition-colors">
                                <svg class="w-3.5 h-3.5" 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>
                            </button>
                        </div>
                    </div>
                </div>
            </template>

            <div x-show="cart.length === 0" class="text-center py-12">
                <div class="w-16 h-16 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                    </svg>
                </div>
                <p class="text-sm text-slate-500 dark:text-slate-400">Keranjang kosong</p>
            </div>
        </div>

        <!-- Cart Summary -->
        <div class="p-4 border-t border-gray-200 dark:border-slate-700">
            <div class="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-slate-500 dark:text-slate-400">Subtotal</span>
                    <span class="font-semibold text-slate-900 dark:text-white">Rp <span x-text="formatNumber(subtotal)"></span></span>
                </div>
                <div class="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-slate-600">
                    <span class="text-base font-bold text-slate-900 dark:text-white">Total</span>
                    <span class="text-xl font-bold text-blue-600 dark:text-blue-400">
                        Rp <span x-text="formatNumber(total)"></span>
                    </span>
                </div>
            </div>

            <button @click="showCheckoutModal = true" :disabled="cart.length === 0"
                    class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-lg transition-colors 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                Bayar
            </button>
        </div>
    </div>

    <!-- Checkout Modal -->
    <div x-show="showCheckoutModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-6">
            <div class="fixed inset-0 bg-black/50" @click="!checkoutLoading && (showCheckoutModal = false)"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                <form @submit.prevent="processCheckout">
                    @csrf
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Pembayaran</h3>
                    </div>

                    <div class="px-6 py-5 space-y-4">
                        <!-- Order Summary -->
                        <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-4">
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-slate-500 dark:text-slate-400">Total Item</span>
                                    <span class="font-semibold text-slate-900 dark:text-white" x-text="cart.reduce((sum, item) => sum + item.quantity, 0)"></span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-500 dark:text-slate-400">Subtotal</span>
                                    <span class="font-semibold text-slate-900 dark:text-white">Rp <span x-text="formatNumber(subtotal)"></span></span>
                                </div>
                                <div class="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-slate-600">
                                    <span class="font-bold text-slate-900 dark:text-white">Total Bayar</span>
                                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">Rp <span x-text="formatNumber(total)"></span></span>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">Metode Pembayaran</label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="cursor-pointer">
                                    <input type="radio" x-model="paymentMethod" value="cash" class="peer sr-only">
                                    <div class="p-3 rounded-lg border-2 border-gray-300 dark:border-slate-600 text-center peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 hover:border-gray-400 transition-colors">
                                        <svg class="w-6 h-6 mx-auto mb-1.5 text-slate-400 peer-checked:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                        </svg>
                                        <span class="text-xs font-medium text-slate-700 dark:text-slate-300 peer-checked:text-blue-600">Tunai</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" x-model="paymentMethod" value="transfer" class="peer sr-only">
                                    <div class="p-3 rounded-lg border-2 border-gray-300 dark:border-slate-600 text-center peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 hover:border-gray-400 transition-colors">
                                        <svg class="w-6 h-6 mx-auto mb-1.5 text-slate-400 peer-checked:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                        </svg>
                                        <span class="text-xs font-medium text-slate-700 dark:text-slate-300 peer-checked:text-blue-600">Transfer</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" x-model="paymentMethod" value="qris" class="peer sr-only">
                                    <div class="p-3 rounded-lg border-2 border-gray-300 dark:border-slate-600 text-center peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 hover:border-gray-400 transition-colors">
                                        <svg class="w-6 h-6 mx-auto mb-1.5 text-slate-400 peer-checked:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
                                        </svg>
                                        <span class="text-xs font-medium text-slate-700 dark:text-slate-300 peer-checked:text-blue-600">QRIS</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" x-model="paymentMethod" value="operasional" class="peer sr-only">
                                    <div class="p-3 rounded-lg border-2 border-gray-300 dark:border-slate-600 text-center peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 hover:border-gray-400 transition-colors">
                                        <svg class="w-6 h-6 mx-auto mb-1.5 text-slate-400 peer-checked:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                        </svg>
                                        <span class="text-xs font-medium text-slate-700 dark:text-slate-300 peer-checked:text-blue-600">Operasional</span>
                                    </div>
                                </label>
                            </div>
                        </div>

                    </div>

                    <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
                        <button type="submit" :disabled="cart.length === 0 || checkoutLoading"
                                class="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-300 disabled:dark:bg-slate-700 disabled:text-gray-500 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2">
                            <template x-if="!checkoutLoading">
                                <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="M5 13l4 4L19 7"></path>
                                </svg>
                            </template>
                            <template x-if="checkoutLoading">
                                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </template>
                            <span x-text="checkoutLoading ? 'Memproses...' : 'Proses Bayar'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Clear Cart Modal -->
    <div x-show="showClearCartModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="showClearCartModal = false"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-md w-full"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Kosongkan Keranjang?</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400">Tindakan ini tidak dapat dibatalkan</p>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <button type="button" @click="showClearCartModal = false"
                                class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors">
                            Batal
                        </button>
                        <button type="button" @click="confirmClearCart()"
                                class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors">
                            Ya, Hapus
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php
    $user = auth()->user();
    $branchId = $user->branch_id;

    $barcodeProducts = \App\Models\Product::where('is_active', true)
        ->whereNotNull('barcode')
        ->where('barcode', '!=', '')
        ->whereHas('branchStock', function ($q) use ($branchId) {
            $q->where('branch_id', $branchId);
        })
        ->with(['branchStock' => function ($q) use ($branchId) {
            $q->where('branch_id', $branchId);
        }])
        ->get();

    $initialBarcodeProductIndex = [];
    foreach ($barcodeProducts as $product) {
        $barcode = trim((string) $product->barcode);
        $branchStock = $product->branchStock->first();
        $initialBarcodeProductIndex[$barcode] = [
            'id' => $product->id,
            'name' => $product->name,
            'price' => (float) ($product->price ?? 0),
            'stock' => (int) ($branchStock ? $branchStock->stock : 0),
            'track_stock' => (bool) ($branchStock ? $branchStock->track_stock : true),
        ];
    }
@endphp

<script>
const initialBarcodeProductIndex = @json($initialBarcodeProductIndex);

function posSystem() {
    return {
        search: '', selectedCategory: null, cart: [],
        paymentMethod: 'cash', paid: 0,
        showCheckoutModal: false, showClearCartModal: false,
        checkoutLoading: false,
        barcodeLoading: false,
        searchTimeout: null,
        barcodeLengthThreshold: 12,
        barcodeDuplicateGuardMs: 1500,
        lastProcessedBarcode: '',
        lastProcessedBarcodeAt: 0,
        productTapCooldownMs: 600,
        recentProductTapAt: {},
        cameraScanLocked: false,
        barcodeIndex: initialBarcodeProductIndex,
        
        // Camera scanning
        cameraActive: false,
        cameraLoading: false,
        html5QrcodeScanner: null,

        init() {
            this.barcodeIndex = Object.entries(this.barcodeIndex).reduce((index, [barcode, product]) => {
                index[barcode] = product;
                index[barcode.toUpperCase()] = product;
                return index;
            }, {});
            this.cart = @json(session('cart') ?? []);
            this.$nextTick(() => {
                this.$refs.barcodeSearch?.focus();
                // Setup event delegation for product grid
                this.setupProductGridEvents();
                // Start periodic stock update check (every 10 seconds)
                this.startStockUpdater();
            });
        },

        setupProductGridEvents() {
            // Use event delegation on the product grid container
            const grid = document.getElementById('product-grid');
            if (grid) {
                grid.addEventListener('click', (event) => {
                    const pageLink = event.target.closest('a[href*="page="]');
                    if (pageLink) {
                        event.preventDefault();
                        const page = new URL(pageLink.href).searchParams.get('page') || 1;
                        this.loadProducts(page);
                        return;
                    }

                    const card = event.target.closest('[data-product-id]');
                    if (card) {
                        const productId = parseInt(card.getAttribute('data-product-id'));
                        const name = card.getAttribute('data-product-name') || '';
                        const price = parseFloat(card.getAttribute('data-product-price')) || 0;
                        const stock = parseInt(card.getAttribute('data-product-stock')) || 0;
                        const trackStock = card.getAttribute('data-product-track-stock') === '1';

                        if (!this.canAddProduct(productId)) {
                            return;
                        }

                        this.addToCart(productId, name, price, stock, trackStock);
                    }
                });
            }
        },

        canAddProduct(productId) {
            const now = Date.now();
            const lastTapAt = this.recentProductTapAt[productId] || 0;

            if (now - lastTapAt < this.productTapCooldownMs) {
                return false;
            }

            this.recentProductTapAt[productId] = now;
            return true;
        },

        handleSearchOrCategoryChange() {
            // Debounced search and filter
            this.loadProducts(1);
        },
        get subtotal() { return this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); },
        get total() { return this.subtotal; },

        handleSearchInput() {
            const keyword = this.normalizeBarcode(this.search);

            if (this.searchTimeout) {
                clearTimeout(this.searchTimeout);
                this.searchTimeout = null;
            }

            if (!keyword) {
                // If search is cleared, reload all products
                if (this.search.length === 0 && !this.selectedCategory) {
                    this.loadAllProducts(1);
                }
                return;
            }

            // PENTING: Jangan langsung addToCart di sini.
            // Scanner fisik mengirim barcode lalu langsung menekan Enter.
            // addToCart dipanggil HANYA dari handleSearchEnter (event Enter)
            // agar tidak double-input (sekali dari input event, sekali dari Enter).
            const barcodeProduct = this.findBarcodeProduct(keyword);
            if (barcodeProduct) {
                // Barcode ditemukan di index — cukup tunggu Enter dari scanner
                return;
            }

            if (this.isBarcodeCandidate(keyword)) {
                return;
            }

            // Regular search - combine with category filter (debounced)
            if (keyword.length >= 2) {
                this.searchTimeout = setTimeout(() => {
                    this.loadProducts(1);
                }, 300);
            }
        },

        handleSearchEnter() {
            const keyword = this.normalizeBarcode(this.search);

            if (this.searchTimeout) {
                clearTimeout(this.searchTimeout);
                this.searchTimeout = null;
            }

            if (!keyword) {
                return;
            }

            const barcodeProduct = this.findBarcodeProduct(keyword);
            if (barcodeProduct) {
                this.handleBarcodeProductMatch(barcodeProduct, keyword);
                return;
            }

            if (this.isBarcodeCandidate(keyword)) {
                this.processBarcode(keyword);
                return;
            }

            this.loadProducts(1);
        },

        normalizeBarcode(value) {
            return (value || '').trim();
        },

        findBarcodeProduct(barcode) {
            const normalizedBarcode = this.normalizeBarcode(barcode);

            if (!normalizedBarcode) {
                return null;
            }

            if (Object.prototype.hasOwnProperty.call(this.barcodeIndex, normalizedBarcode)) {
                return this.barcodeIndex[normalizedBarcode];
            }

            const upperBarcode = normalizedBarcode.toUpperCase();

            if (Object.prototype.hasOwnProperty.call(this.barcodeIndex, upperBarcode)) {
                return this.barcodeIndex[upperBarcode];
            }

            return null;
        },

        isDuplicateBarcodeScan(barcode) {
            const normalizedBarcode = this.normalizeBarcode(barcode);

            return Boolean(
                normalizedBarcode &&
                this.lastProcessedBarcode === normalizedBarcode &&
                (Date.now() - this.lastProcessedBarcodeAt) < this.barcodeDuplicateGuardMs
            );
        },

        markBarcodeAsProcessed(barcode) {
            const normalizedBarcode = this.normalizeBarcode(barcode);

            if (!normalizedBarcode) {
                return;
            }

            this.lastProcessedBarcode = normalizedBarcode;
            this.lastProcessedBarcodeAt = Date.now();
        },

        resetBarcodeSearch() {
            this.search = '';
            this.$nextTick(() => {
                this.$refs.barcodeSearch?.focus();
            });
        },

        handleBarcodeProductMatch(product, barcode) {
            if (!product || this.barcodeLoading) {
                return;
            }

            if (this.isDuplicateBarcodeScan(barcode)) {
                this.resetBarcodeSearch();
                return;
            }

            if (this.searchTimeout) {
                clearTimeout(this.searchTimeout);
                this.searchTimeout = null;
            }

            this.markBarcodeAsProcessed(barcode);
            this.addToCart(
                product.id,
                product.name,
                product.price,
                product.stock,
                product.track_stock
            );
            this.resetBarcodeSearch();
        },

        isBarcodeCandidate(keyword) {
            // Numeric strings of length >= 3 are candidates (e.g. EAN-8, UPC, custom numeric barcodes)
            if (/^\d+$/.test(keyword) && keyword.length >= 3) {
                return true;
            }
            // Alphanumeric strings without spaces of length >= 6 (e.g. SKUs, alphanumeric barcodes)
            if (/^[A-Z0-9]+$/i.test(keyword) && keyword.length >= 6 && !/\s/.test(keyword)) {
                return true;
            }
            return keyword.startsWith('ABBA') || (
                keyword.length >= this.barcodeLengthThreshold &&
                !/\s/.test(keyword) &&
                keyword === keyword.toUpperCase() &&
                /^[A-Z0-9]+$/.test(keyword)
            );
        },

        async processBarcode(barcode) {
            const normalizedBarcode = this.normalizeBarcode(barcode);

            if (!normalizedBarcode) {
                return;
            }

            const barcodeProduct = this.findBarcodeProduct(normalizedBarcode);
            if (barcodeProduct) {
                this.handleBarcodeProductMatch(barcodeProduct, normalizedBarcode);
                return;
            }

            if (this.barcodeLoading) {
                return;
            }

            if (this.isDuplicateBarcodeScan(normalizedBarcode)) {
                this.resetBarcodeSearch();
                return;
            }

            this.barcodeLoading = true;
            this.markBarcodeAsProcessed(normalizedBarcode);

            try {
                const response = await fetch('{{ route('pos.check-barcode') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ barcode: normalizedBarcode })
                });

                const result = await response.json();

                if (result.success) {
                    this.addToCart(
                        result.product.id,
                        result.product.name,
                        result.product.price,
                        result.product.stock,
                        result.product.track_stock
                    );

                    this.resetBarcodeSearch();
                } else {
                    this.showToast('error', result.message || 'Produk tidak ditemukan');
                    this.resetBarcodeSearch();
                    this.loadAllProducts();
                }
            } catch (err) {
                console.error('Barcode error:', err);
                this.showToast('error', 'Gagal memindai barcode');
            } finally {
                this.barcodeLoading = false;
            }
        },

        buildProductParams(page = 1) {
            const params = new URLSearchParams();

            if (this.search.length >= 2) {
                params.append('search', this.search);
            }

            if (this.selectedCategory) {
                params.append('category', this.selectedCategory);
            }

            if (page && Number(page) > 1) {
                params.append('page', page);
            }

            return params;
        },

        async fetchProducts(page = 1) {
            const params = this.buildProductParams(page);
            const url = `{{ route('pos.products') }}?${params.toString()}`;

            try {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });

                const html = await response.text();
                document.getElementById('product-grid').innerHTML = html;
            } catch (err) {
                console.error('Product load error:', err);
                this.showToast('error', 'Gagal memuat produk');
            }
        },

        searchProducts(page = 1) {
            if (this.search.length >= 2 || this.selectedCategory) {
                this.fetchProducts(page);
            } else if (this.search.length === 0 && !this.selectedCategory) {
                this.loadAllProducts(page);
            }
        },

        filterProducts(page = 1) {
            if (this.selectedCategory) {
                this.fetchProducts(page);
            } else {
                this.loadAllProducts(page);
            }
        },

        loadProducts(page = 1) {
            this.fetchProducts(page);
        },

        loadAllProducts(page = 1) {
            this.fetchProducts(page);
        },

        addToCart(productId, name, price, stock, trackStock) {
            const existingItem = this.cart.find(item => item.product_id === productId);
            let previousCart = JSON.parse(JSON.stringify(this.cart));

            if (existingItem) {
                if (trackStock && existingItem.quantity >= stock) { this.showToast('error', 'Stok tidak mencukupi'); return; }
                existingItem.quantity++;
                this.cart = this.cart.filter(item => item.product_id !== productId);
                this.cart.push(existingItem);
            } else {
                if (trackStock && stock <= 0) { this.showToast('error', 'Stok habis'); return; }
                this.cart.push({ product_id: productId, name, price, quantity: 1, stock, track_stock: trackStock });
            }
            this.showToast('success', 'Produk ditambahkan ke keranjang');

            // Optimistic background sync
            fetch('{{ route('pos.cart.add') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ product_id: productId, quantity: 1 })
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    this.cart = previousCart;
                    this.showToast('error', data.message || 'Gagal menyinkronkan keranjang');
                }
            })
            .catch(err => {
                console.error(err);
                this.cart = previousCart;
                this.showToast('error', 'Gagal menyinkronkan keranjang');
            });
        },

        updateQuantity(productId, quantity) {
            if (quantity <= 0) { this.removeFromCart(productId); return; }
            const item = this.cart.find(item => item.product_id === productId);
            if (item && item.track_stock && quantity > item.stock) { this.showToast('error', 'Stok tidak mencukupi'); return; }
            
            let previousCart = JSON.parse(JSON.stringify(this.cart));
            if (item) item.quantity = quantity;

            // Optimistic background sync
            fetch('{{ route('pos.cart.update') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ product_id: productId, quantity: quantity })
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    this.cart = previousCart;
                    this.showToast('error', data.message || 'Gagal mengubah jumlah');
                }
            })
            .catch(err => {
                console.error(err);
                this.cart = previousCart;
                this.showToast('error', 'Gagal mengubah jumlah');
            });
        },

        removeFromCart(productId) {
            let previousCart = JSON.parse(JSON.stringify(this.cart));
            this.cart = this.cart.filter(item => item.product_id !== productId);

            // Optimistic background sync
            fetch('{{ route('pos.cart.remove') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ product_id: productId })
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    this.cart = previousCart;
                    this.showToast('error', data.message || 'Gagal menghapus produk');
                }
            })
            .catch(err => {
                console.error(err);
                this.cart = previousCart;
                this.showToast('error', 'Gagal menghapus produk');
            });
        },

        clearCart() { if (this.cart.length > 0) this.showClearCartModal = true; },
        
        confirmClearCart() {
            let previousCart = JSON.parse(JSON.stringify(this.cart));
            this.cart = [];
            this.showClearCartModal = false;
            this.showToast('success', 'Keranjang berhasil dikosongkan');

            // Optimistic background sync
            fetch('{{ route('pos.cart.clear') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    this.cart = previousCart;
                    this.showToast('error', data.message || 'Gagal mengosongkan keranjang');
                }
            })
            .catch(err => {
                console.error(err);
                this.cart = previousCart;
                this.showToast('error', 'Gagal mengosongkan keranjang');
            });
        },

        processCheckout() {
            if (this.checkoutLoading) return;
            this.checkoutLoading = true;
            const paid = this.total;
            fetch('{{ route('pos.checkout') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: JSON.stringify({ cart: this.cart, payment_method: this.paymentMethod, paid, _token: document.querySelector('meta[name="csrf-token"]').content })
            }).then(res => res.json()).then(data => { 
                if (data.redirect) {
                    window.location.href = data.redirect; 
                } else if (data.error) {
                    this.showToast('error', data.error); 
                    this.checkoutLoading = false;
                } 
            })
            .catch(err => { 
                this.showToast('error', 'Terjadi kesalahan'); 
                this.checkoutLoading = false;
            });
        },

        formatNumber(num) { return new Intl.NumberFormat('id-ID').format(num); },

        showToast(type, message) {
            const colors = { success: 'bg-emerald-600', error: 'bg-red-600', warning: 'bg-amber-600', info: 'bg-blue-600' };
            const icons = {
                success: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>',
                error: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>',
                warning: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>',
                info: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
            };
            const toast = document.createElement('div');
            toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-5 py-3 rounded-lg shadow-lg flex items-center gap-3`;
            toast.innerHTML = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">${icons[type]}</svg><span class="font-medium text-sm">${message}</span>`;
            document.body.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.2s'; setTimeout(() => toast.remove(), 200); }, 3000);
        },

        handleShortcut(event) {
            if ((event.ctrlKey && event.key === 's') || event.key === 'F2') { event.preventDefault(); document.querySelector('input[x-model="search"]').focus(); }
            if (event.key === 'F7') { event.preventDefault(); if (this.cart.length > 0) this.showCheckoutModal = true; }
        },
        
        // Camera scanning functionality
        toggleCamera() {
            if (this.cameraActive) {
                this.stopCamera();
            } else {
                this.startCamera();
            }
        },

        startCamera() {
            this.cameraLoading = true;
            
            if (!window.Html5Qrcode) {
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js';
                script.onload = () => this.initCamera();
                document.head.appendChild(script);
            } else {
                this.initCamera();
            }
        },

        playBeepSound() {
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioCtx.createOscillator();
                const gainNode = audioCtx.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioCtx.destination);

                oscillator.type = 'sine';
                oscillator.frequency.value = 1000;
                gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);

                oscillator.start();
                oscillator.stop(audioCtx.currentTime + 0.1);
            } catch (e) {
                console.warn("AudioContext beep failed:", e);
            }
        },

        initCamera() {
            this.cameraActive = true;
            this.cameraLoading = false;
            this.cameraScanLocked = false;
            
            this.$nextTick(() => {
                const html5QrCode = new Html5Qrcode("pos-barcode-reader");
                this.html5QrcodeScanner = html5QrCode;
                
                const config = {
                    fps: 10,
                    qrbox: { width: 250, height: 150 },
                    aspectRatio: 1.0
                };
                
                html5QrCode.start(
                    { facingMode: "environment" },
                    config,
                    (decodedText, decodedResult) => {
                        if (this.cameraScanLocked) {
                            return;
                        }

                        const barcode = decodedText.trim();
                        if (!barcode) {
                            return;
                        }

                        if (this.isDuplicateBarcodeScan(barcode)) {
                            return;
                        }

                        this.cameraScanLocked = true;

                        this.playBeepSound();
                        this.showToast('success', 'Barcode terdeteksi: ' + barcode);
                        
                        this.processBarcode(barcode).finally(() => {
                            setTimeout(() => {
                                this.cameraScanLocked = false;
                            }, 1500);
                        });
                    },
                    (errorMessage) => {}
                ).catch(err => {
                    console.error('Camera start failed:', err);
                    this.showToast('error', 'Gagal mengakses kamera: ' + err);
                    this.cameraActive = false;
                });
            });
        },

        stopCamera() {
            if (this.html5QrcodeScanner) {
                this.html5QrcodeScanner.stop().then(() => {
                    this.html5QrcodeScanner.clear();
                    this.html5QrcodeScanner = null;
                }).catch(err => {
                    console.error('Camera stop failed:', err);
                });
            }
            this.cameraActive = false;
            this.cameraLoading = false;
        },

        startStockUpdater() {
            setInterval(() => {
                this.updateStocks();
            }, 10000); // 10 seconds
        },

        async updateStocks() {
            // Skip updating if checkout modal is open or scanner is actively scanning
            if (this.showCheckoutModal || this.barcodeLoading || this.cameraScanLocked) {
                return;
            }

            try {
                const response = await fetch('{{ route('pos.stocks') }}', {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });

                if (!response.ok) return;
                const data = await response.json();

                if (data.success && data.stocks) {
                    this.syncStocks(data.stocks);
                }
            } catch (err) {
                console.error('Failed to sync stocks:', err);
            }
        },

        syncStocks(serverStocks) {
            // 1. Update DOM product cards
            Object.keys(serverStocks).forEach(productId => {
                const stockInfo = serverStocks[productId];
                const card = document.querySelector(`.pos-product-card[data-product-id="${productId}"]`);
                if (card) {
                    const oldStock = parseInt(card.getAttribute('data-product-stock')) || 0;
                    const newStock = parseInt(stockInfo.stock) || 0;
                    const trackStock = stockInfo.track_stock;
                    const minStock = parseInt(stockInfo.min_stock) || 0;

                    if (oldStock !== newStock) {
                        card.setAttribute('data-product-stock', newStock);
                        
                        // Update badges container
                        const badgesContainer = card.querySelector('.js-stock-badges-container');
                        if (badgesContainer) {
                            badgesContainer.innerHTML = this.renderStockBadges(newStock, trackStock, minStock);
                        }

                        // Update bottom stock-0 info container
                        const infoContainer = card.querySelector('.js-stock-info-container');
                        if (infoContainer) {
                            infoContainer.innerHTML = this.renderStockInfo(newStock, trackStock);
                        }
                    }
                }
            });

            // 2. Update local barcode index
            Object.values(this.barcodeIndex).forEach(item => {
                const stockInfo = serverStocks[item.id];
                if (stockInfo) {
                    item.stock = parseInt(stockInfo.stock) || 0;
                    item.track_stock = stockInfo.track_stock;
                }
            });

            // 3. Update cart items
            const itemsToRemove = [];
            const itemsToAdjust = [];

            this.cart.forEach(item => {
                const stockInfo = serverStocks[item.product_id];
                if (stockInfo) {
                    const newStock = parseInt(stockInfo.stock) || 0;
                    item.stock = newStock;
                    item.track_stock = stockInfo.track_stock;

                    if (item.track_stock && item.quantity > newStock) {
                        if (newStock <= 0) {
                            itemsToRemove.push({ id: item.product_id, name: item.name });
                        } else {
                            itemsToAdjust.push({ id: item.product_id, name: item.name, newStock });
                        }
                    }
                }
            });

            // Apply removals
            itemsToRemove.forEach(info => {
                this.showToast('warning', `Stok ${info.name} habis, item dihapus dari keranjang`);
                this.removeFromCart(info.id);
            });

            // Apply adjustments
            itemsToAdjust.forEach(info => {
                this.showToast('warning', `Stok ${info.name} tersisa ${info.newStock}, jumlah disesuaikan`);
                this.updateQuantity(info.id, info.newStock);
            });
        },

        renderStockBadges(stock, trackStock, minStock) {
            if (!trackStock) return '';
            
            let html = '';
            if (stock <= 0) {
                html += `<div class="low-stock-badge absolute top-1.5 right-1.5 px-1.5 py-1 sm:top-2 sm:right-2 sm:px-2 sm:py-1 bg-gradient-to-r from-red-500 to-rose-500 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                    Stok Habis
                </div>`;
            } else if (stock <= minStock * 2) {
                html += `<div class="low-stock-badge absolute top-1.5 right-1.5 px-1.5 py-1 sm:top-2 sm:right-2 sm:px-2 sm:py-1 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                    Stok Tipis
                </div>`;
            }
            
            if (stock > 0) {
                html += `<div class="product-stock-badge absolute top-1.5 left-1.5 px-1.5 py-1 sm:top-2 sm:left-2 sm:px-2 sm:py-1 bg-slate-900/75 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                    Stok ${stock}
                </div>`;
            }
            return html;
        },

        renderStockInfo(stock, trackStock) {
            if (trackStock && stock <= 0) {
                return `<span class="inline-flex items-center px-1.5 py-0.5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-[10px] sm:text-xs font-semibold">
                    stok 0
                </span>`;
            }
            return '';
        }
    }
}
</script>

@push('styles')
<style>
    @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fade-in 0.3s ease-out; }

    .pos-product-scroll {
        max-height: 60dvh;
    }

    @media (min-width: 640px) {
        .pos-product-scroll {
            max-height: 62dvh;
        }
    }

    @media (min-width: 1024px) {
        .pos-product-scroll {
            max-height: none;
        }
    }

    @media (max-width: 639px) {
        .pos-product-scroll {
            max-height: 32dvh;
        }

        .pos-product-card .pos-product-image {
            aspect-ratio: 16 / 9;
        }

        .pos-product-card .product-info {
            padding: 0.25rem 0.35rem;
        }

        .pos-product-card .product-name {
            font-size: 0.7rem;
            line-height: 1.15;
            margin-bottom: 0.15rem;
        }

        .pos-product-card .product-price {
            font-size: 0.76rem;
            line-height: 1.15;
        }

        .pos-product-card .product-stock-badge {
            display: inline-flex;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            z-index: 5;
        }

        .pos-product-card .product-category-badge {
            display: inline-flex;
            position: absolute;
            left: 0.25rem;
            bottom: 0.25rem;
            z-index: 5;
        }

        .pos-product-card .low-stock-badge {
            display: inline-flex;
            position: absolute;
            top: 0.25rem;
            right: 0.25rem;
            z-index: 5;
        }

        .pos-product-card .pos-product-icon {
            width: 1.75rem;
            height: 1.75rem;
        }

        .pos-product-card .pos-product-icon svg {
            width: 0.9rem;
            height: 0.9rem;
        }
    }
</style>
@endpush
@endsection