@extends('layouts.app')

@section('scripts')
    @php
        $settings = \App\Models\Setting::getStoreSettings();
        $activeBranchId = session('active_branch_id');
        if ($activeBranchId) {
            $branch = \App\Models\Branch::find($activeBranchId);
            if ($branch) {
                $settings['store_name'] = $branch->name;
                $settings['store_address'] = $branch->address;
                $settings['store_phone'] = $branch->phone;
            }
        }

        $discountRulesPayload = $activeDiscountRules->map(function ($rule) {
            return [
                'id' => $rule->id,
                'name' => $rule->name,
                'discount_type' => $rule->discount_type,
                'discount_value' => (float) $rule->discount_value,
                'applies_to' => $rule->applies_to,
                'product_ids' => $rule->products->pluck('id')->values()->all(),
                'priority' => (int) $rule->priority,
            ];
        })->values()->all();

        $vouchersPayload = $activeVouchers->map(function ($voucher) {
            return [
                'id' => $voucher->id,
                'code' => $voucher->code,
                'name' => $voucher->name,
                'discount_type' => $voucher->discount_type,
                'discount_value' => (float) $voucher->discount_value,
                'applies_to' => $voucher->applies_to,
                'product_ids' => $voucher->products->pluck('id')->values()->all(),
                'min_purchase' => (float) $voucher->min_purchase,
            ];
        })->values()->all();
    @endphp
    <script>
        const STORE_SETTINGS = @json($settings);
        const AUTH_USER = @json(auth()->user() ? ['name' => auth()->user()->name] : ['name' => 'Kasir']);
        const ACTIVE_DISCOUNT_RULES = @json($discountRulesPayload);
        const ACTIVE_VOUCHERS = @json($vouchersPayload);
        const FEATURE_FLAGS = {
            discounts: Boolean(STORE_SETTINGS.enable_discounts ?? true),
            vouchers: Boolean(STORE_SETTINGS.enable_vouchers ?? true),
            marketplace: Boolean(STORE_SETTINGS.enable_marketplace ?? true),
            onlineStore: Boolean(STORE_SETTINGS.enable_online_store ?? true),
        };
    </script>
@endsection

@section('content')
    <div class="p-3 sm:p-5 lg:p-6 xl:p-8 min-h-screen pos-page">
        <!-- Page Header -->
        <div class="mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">🛒 Point of Sale</h1>
                    <p class="text-gray-600 mt-1">Scan, add products, and process transactions</p>
                </div>
                <div class="mt-4 sm:mt-0 flex items-center space-x-3">
                    <div class="flex items-center bg-white rounded-lg shadow-sm border border-gray-200 p-1">
                        <button id="mode-offline-btn" onclick="setStoreMode('offline')"
                            class="store-mode-btn px-3 py-1.5 rounded-md text-sm font-semibold transition-all duration-200 bg-purple-600 text-white">
                            🏪 Offline
                        </button>
                        @if($storeSettings->enable_online_store ?? true)
                            <button id="mode-online-btn" onclick="setStoreMode('online')"
                                class="store-mode-btn px-3 py-1.5 rounded-md text-sm font-semibold transition-all duration-200 text-gray-500 hover:text-gray-700">
                                🌐 Online
                            </button>
                        @endif
                        @if($storeSettings->enable_marketplace ?? true)
                            <button id="mode-marketplace-btn" onclick="setStoreMode('marketplace')"
                                class="store-mode-btn px-3 py-1.5 rounded-md text-sm font-semibold transition-all duration-200 text-gray-500 hover:text-gray-700">
                                🛍️ Marketplace
                            </button>
                        @endif
                    </div>
                    @if(auth()->user()->role === 'kasir' && ($storeSettings->enable_cashier_shift ?? true))
                        <a href="{{ route('cashier-shifts.index') }}"
                            class="hidden sm:flex items-center px-3 py-2 rounded-lg border border-emerald-200 bg-emerald-50 text-emerald-700 text-xs font-semibold">
                            Shift:
                            {{ $activeCashierShift?->shiftDefinition?->name ?? 'Manual' }}
                            ({{ $activeCashierShift?->check_in_at?->format('H:i') ?? '-' }})
                        </a>
                        @if($activeCashierShift)
                            <a href="{{ route('cashier-shifts.index') }}#tutup-shift"
                                class="inline-flex items-center px-3 py-2 rounded-lg border border-red-600 bg-red-600 text-white text-xs font-semibold hover:bg-red-700">
                                Tutup Shift
                            </a>
                        @endif
                    @endif
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 xl:gap-6 pos-main-wrap">
            {{-- Products Section (Left Side) --}}
            <div class="xl:col-span-7 2xl:col-span-8 space-y-4 xl:space-y-6 min-w-0">
                {{-- Search Area --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-5 xl:p-6">
                    <div class="flex flex-col sm:flex-row gap-4">
                        <div class="flex-1 relative">
                            <input type="text" id="product-search" placeholder="Search products by name or barcode..."
                                class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200"
                                autocomplete="off">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-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>
                            </div>
                        </div>
                        <button onclick="openScannerModal()"
                            class="px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl hover:from-indigo-600 hover:to-purple-700 flex items-center justify-center gap-2 transition-all duration-200 shadow-sm hover:shadow-md">
                            <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="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>
                            <span class="hidden sm:inline">Scan</span>
                        </button>
                    </div>
                    <div id="search-results" class="mt-4 space-y-2 max-h-60 overflow-y-auto scrollbar-thin"></div>
                </div>

                {{-- Category Tabs --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                    <div class="border-b border-gray-200">
                        <nav id="category-tabs-container"
                            class="-mb-px flex space-x-1 overflow-x-auto scrollbar-thin px-6 py-4"></nav>
                    </div>
                </div>

                {{-- Products Grid --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Products</h3>
                            <p class="text-sm text-gray-500">Click on a product to add it to cart</p>
                        </div>
                    </div>

                    <div id="products-grid"
                        class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 xl:gap-4 min-h-[320px] md:min-h-[360px] xl:min-h-[400px]">
                        {{-- Products will be loaded here by JavaScript --}}
                    </div>

                    {{-- Pagination --}}
                    <div
                        class="flex flex-col sm:flex-row justify-between items-center mt-8 pt-6 border-t border-gray-200 gap-4">
                        <div class="flex items-center space-x-4">
                            <span id="pagination-info" class="text-sm text-gray-500"></span>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-500">per page</span>
                                <select id="per-page-select" onchange="changePerPage(this.value)"
                                    class="border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                    <option value="10" selected>10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                        </div>
                        <div id="pagination-buttons" class="flex space-x-1"></div>
                    </div>
                </div>
            </div>

            {{-- Cart Section (Right Side) --}}
            <div class="xl:col-span-5 2xl:col-span-4 min-w-0">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 lg:p-5 xl:p-6 xl:sticky xl:top-6 pos-cart-panel">
                    <div class="flex justify-between items-center mb-6">
                        <div>
                            <h3 id="cart-title" class="text-xl font-semibold text-gray-900">Shopping Cart</h3>
                            <p id="cart-mode-hint" class="mt-1 text-xs text-gray-500">Mode toko biasa untuk transaksi langsung.</p>
                        </div>
                        <button onclick="clearCart()"
                            class="bg-red-50 hover:bg-red-100 text-red-600 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200 border border-red-200">
                            <svg class="w-4 h-4 inline mr-1" 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>
                            Clear
                        </button>
                    </div>

                    <div id="marketplace-banner" class="hidden mb-4 rounded-xl border border-orange-200 bg-orange-50 px-4 py-3">
                        <p class="text-sm font-semibold text-orange-800">Mode Marketplace aktif</p>
                        <p class="mt-1 text-xs text-orange-700">Isi `No Pesanan`, lalu atur pajak marketplace global atau per item sesuai kebutuhan order.</p>
                    </div>

                    <div id="cart-items-container" class="space-y-3 mb-6 max-h-[42vh] xl:max-h-[34rem] overflow-y-auto scrollbar-thin">
                        {{-- Cart items will be populated here --}}
                    </div>

                    <div class="border-t border-gray-200 pt-6 space-y-3">
                        <div class="space-y-2">
                            @if($storeSettings->enable_vouchers ?? true)
                                <div class="rounded-xl border border-emerald-100 bg-emerald-50/60 p-3">
                                    <div class="mb-3">
                                        <span class="text-sm font-semibold text-emerald-900">Voucher</span>
                                        <p class="mt-1 text-[11px] text-emerald-700">Input voucher di sini. Diskon otomatis dari menu akan diterapkan sendiri bila item cocok.</p>
                                    </div>
                                    <div class="rounded-lg border border-emerald-100 bg-white p-3">
                                        <div class="flex items-center justify-between gap-3">
                                            <span class="text-sm font-medium text-gray-700">Kode Voucher</span>
                                            <input type="text" id="voucher-code" placeholder="Contoh: HEMAT10"
                                                class="w-40 rounded-lg border-gray-200 px-3 py-1.5 text-sm uppercase focus:ring-emerald-500 focus:border-emerald-500"
                                                oninput="updateCartDisplay()">
                                        </div>
                                        <div id="voucher-status" class="mt-2 text-[11px] text-gray-500">Kosongkan bila tidak memakai voucher.</div>
                                    </div>
                                </div>
                            @endif
                            <div class="rounded-xl border border-gray-200 bg-gradient-to-b from-gray-50 to-white p-3">
                                <div class="mb-3">
                                    <span class="text-sm font-semibold text-gray-800">Pengaturan Pajak</span>
                                    <p class="mt-1 text-[11px] text-gray-500">Pilih jenis pajak dulu, lalu atur tarif dan bebannya.</p>
                                    <input type="hidden" id="active-tax-panel" value="ppn">
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 rounded-xl bg-white p-1 shadow-sm ring-1 ring-gray-200">
                                        <button type="button" id="tax-panel-ppn-btn"
                                            onclick="setActiveTaxPanel('ppn')"
                                            class="min-w-0 rounded-lg border border-indigo-200 bg-indigo-600 px-3 py-2.5 text-sm font-semibold text-white transition">
                                            PPN
                                        </button>
                                        @if($storeSettings->enable_marketplace ?? true)
                                            <button type="button" id="tax-panel-marketplace-btn"
                                                onclick="setActiveTaxPanel('marketplace')"
                                                class="hidden min-w-0 rounded-lg border border-orange-200 bg-white px-3 py-2.5 text-sm font-medium text-orange-700 transition hover:bg-orange-50">
                                                Marketplace
                                            </button>
                                        @endif
                                </div>

                                <div id="ppn-tax-panel" class="mt-3 space-y-3 rounded-xl border border-indigo-100 bg-white p-3 shadow-sm">
                                    <div class="flex items-center justify-between gap-3">
                                        <span class="text-sm font-medium text-gray-700">PPN (%)</span>
                                        <input type="number" id="ppn-tax-rate" value="{{ $settings->tax_rate ?? 0 }}" min="0" max="100"
                                            step="0.1"
                                            class="w-24 text-right text-sm border-gray-200 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 py-1"
                                            oninput="updateCartTotals()">
                                    </div>
                                    <div class="rounded-lg border border-indigo-100 bg-indigo-50/40 p-2.5">
                                        <div class="mb-2 flex items-center justify-between">
                                            <span class="text-sm font-medium text-indigo-900">Beban PPN</span>
                                            <input type="hidden" id="ppn-tax-burden" value="customer">
                                        </div>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                            <button type="button" id="ppn-burden-customer-btn"
                                                onclick="setTaxBurden('ppn', 'customer')"
                                                class="rounded-lg border border-indigo-200 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white transition">
                                                Pelanggan
                                            </button>
                                            <button type="button" id="ppn-burden-store-btn"
                                                onclick="setTaxBurden('ppn', 'store')"
                                                class="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-600 transition hover:border-gray-300">
                                                Toko
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                @if($storeSettings->enable_marketplace ?? true)
                                    <div id="marketplace-tax-settings" class="hidden mt-3">
                                        <div id="marketplace-tax-panel" class="space-y-3 rounded-xl border border-orange-100 bg-white p-3 shadow-sm">
                                            <div class="rounded-lg border border-orange-100 bg-orange-50/50 p-2.5">
                                                <div class="mb-2 flex items-center justify-between">
                                                    <span class="text-sm font-medium text-orange-700">Mode Pajak Marketplace</span>
                                                    <input type="hidden" id="marketplace-tax-mode" value="global">
                                                </div>
                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                                    <button type="button" id="marketplace-mode-global-btn"
                                                        onclick="setMarketplaceTaxMode('global')"
                                                        class="rounded-lg border border-orange-200 bg-orange-500 px-3 py-2 text-sm font-semibold text-white transition">
                                                        Global
                                                    </button>
                                                    <button type="button" id="marketplace-mode-item-btn"
                                                        onclick="setMarketplaceTaxMode('item')"
                                                        class="rounded-lg border border-orange-200 bg-white px-3 py-2 text-sm font-medium text-orange-700 transition hover:bg-orange-50">
                                                        Per Item
                                                    </button>
                                                </div>
                                            </div>
                                            <div id="marketplace-tax-rate-row" class="flex items-center justify-between gap-3">
                                                <span class="text-sm font-medium text-gray-700">Marketplace (%)</span>
                                                <input type="number" id="marketplace-tax-rate" value="0" min="0" max="100"
                                                    step="0.01"
                                                    class="w-24 text-right text-sm border-orange-200 rounded-lg focus:ring-orange-500 focus:border-orange-500 py-1"
                                                    oninput="updateCartTotals()">
                                            </div>
                                            <div class="rounded-lg border border-orange-100 bg-orange-50/40 p-2.5">
                                                <div class="mb-2 flex items-center justify-between">
                                                    <span class="text-sm font-medium text-orange-900">Beban Marketplace</span>
                                                    <input type="hidden" id="marketplace-tax-burden" value="store">
                                                </div>
                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                                    <button type="button" id="marketplace-burden-store-btn"
                                                        onclick="setTaxBurden('marketplace', 'store')"
                                                        class="rounded-lg border border-orange-200 bg-orange-500 px-3 py-2 text-sm font-semibold text-white transition">
                                                        Toko
                                                    </button>
                                                    <button type="button" id="marketplace-burden-customer-btn"
                                                        onclick="setTaxBurden('marketplace', 'customer')"
                                                        class="rounded-lg border border-orange-200 bg-white px-3 py-2 text-sm font-medium text-orange-700 transition hover:bg-orange-50">
                                                        Pelanggan
                                                    </button>
                                                </div>
                                            </div>
                                            <p class="text-[11px] leading-relaxed text-orange-700">
                                                `Global` memakai satu tarif untuk semua item. `Per Item` menampilkan input tarif di tiap produk.
                                            </p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="border-t border-gray-100 pt-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-2">
                                <span>Subtotal</span>
                                <span id="subtotal" class="font-medium">Rp 0</span>
                            </div>
                            <div class="flex justify-between text-sm text-orange-500 mb-1">
                                <span>Pajak Marketplace</span>
                                <span id="display-marketplace-tax">Rp 0</span>
                            </div>
                            <div class="flex justify-between text-sm text-red-500 mb-1">
                                <span>Diskon</span>
                                <span id="display-discount">- Rp 0</span>
                            </div>
                            <div class="flex justify-between text-sm text-gray-600 mb-2">
                                <span>PPN</span>
                                <span id="display-ppn-tax">Rp 0</span>
                            </div>
                            <div class="flex justify-between text-sm text-gray-600 mb-2">
                                <span>Total Pajak</span>
                                <span id="display-tax">+ Rp 0</span>
                            </div>
                            <div class="flex justify-between text-lg font-bold text-gray-900 pt-2 border-t border-gray-200">
                                <span>Total</span>
                                <span id="total">Rp 0</span>
                            </div>
                        </div>
                    </div>

                    <button id="checkout-button" onclick="openPaymentModal()"
                        class="w-full mt-6 bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-4 rounded-xl hover:from-indigo-600 hover:to-purple-700 font-semibold flex items-center justify-center gap-2 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md"
                        disabled>
                        <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="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.5 1.5M7 13l1.5 1.5M17 21a2 2 0 100-4 2 2 0 000 4zM9 21a2 2 0 100-4 2 2 0 000 4z">
                            </path>
                        </svg>
                        Checkout
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- ================================= MODALS ================================= --}}

    {{-- Modal untuk Barcode Scanner --}}
    <div id="scanner-modal" class="fixed inset-0 bg-black bg-opacity-75 hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md mx-auto overflow-hidden">
            <div class="p-4 border-b">
                <h3 class="text-lg font-semibold text-center">Arahkan Kamera ke Barcode</h3>
            </div>
            <div class="p-4 bg-gray-900">
                <div id="reader" style="width: 100%; border-radius: 0.5rem; overflow: hidden;"></div>
            </div>
            <div class="p-4 bg-gray-50 border-t">
                <button onclick="closeScannerModal()"
                    class="w-full py-3 text-center font-bold text-white bg-red-500 hover:bg-red-600 rounded-lg transition">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    {{-- Modal Pilihan Varian --}}
    <div id="variant-modal" class="fixed inset-0 bg-black bg-opacity-75 hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-sm mx-auto overflow-hidden flex flex-col"
            style="max-height: 90vh;">
            <div class="flex justify-between items-center p-4 border-b bg-gray-50 flex-shrink-0">
                <h3 class="text-lg font-bold text-gray-900" id="variant-modal-title">Pilih Varian</h3>
                <button onclick="closeVariantModal()" class="text-gray-400 hover:text-gray-600">
                    <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-4 space-y-2" id="variant-modal-body" style="overflow-y: auto; flex: 1; min-height: 0;">
                <!-- Varian items rendered here -->
            </div>
            <div class="p-4 bg-gray-50 border-t flex-shrink-0">
                <button onclick="closeVariantModal()"
                    class="w-full py-3 text-center font-bold text-gray-700 bg-gray-200 hover:bg-gray-300 rounded-lg transition">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    {{-- Modal Pembayaran --}}
    <div id="payment-modal"
        class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4 transition-opacity duration-300">
        <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md mx-auto overflow-hidden flex flex-col transform transition-all scale-100"
            style="max-height: 90vh;">

            <!-- Header Unified -->
            <div class="bg-gradient-to-br from-indigo-600 to-purple-700 p-6 text-white relative overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-full opacity-10">
                    <div
                        class="absolute -top-10 -right-10 w-40 h-40 bg-white rounded-full mix-blend-overlay filter blur-xl">
                    </div>
                    <div
                        class="absolute -bottom-10 -left-10 w-40 h-40 bg-white rounded-full mix-blend-overlay filter blur-xl">
                    </div>
                </div>

                <div class="relative z-10 flex justify-between items-end">
                    <div class="text-left">
                        <p class="text-indigo-100 font-medium text-xs tracking-wide uppercase mb-1">Total Tagihan</p>
                        <h2 class="text-3xl font-extrabold tracking-tight" id="modal-total">Rp 0</h2>
                    </div>

                    <!-- Status Kembalian/Kurang -->
                    <div id="change-container"
                        class="text-right bg-white px-4 py-2 rounded-xl border-2 border-transparent shadow-lg transition-all duration-300 min-w-[120px]">
                        <p id="change-label" class="text-[10px] font-bold uppercase tracking-wider mb-0.5 text-indigo-900">
                            Kembalian</p>
                        <p id="modal-change" class="font-bold text-xl leading-none text-indigo-900">Rp 0</p>
                    </div>
                </div>
            </div>

            <div class="p-5 space-y-4 overflow-y-auto flex-1 min-h-0 bg-gray-50/50 pb-8">
                <div class="flex items-center bg-white rounded-xl shadow-sm border border-gray-200 p-1">
                    <button id="mode-sale-btn" type="button" onclick="setOrderType('sale')"
                        class="px-3 py-1.5 rounded-md text-sm font-semibold transition-all duration-200 bg-indigo-600 text-white">
                        🧾 Sale
                    </button>
                    @if($storeSettings->enable_booking ?? true)
                        <button id="mode-booking-btn" type="button" onclick="setOrderType('booking')"
                            class="px-3 py-1.5 rounded-md text-sm font-semibold transition-all duration-200 text-gray-500 hover:text-gray-700">
                            📘 Booking
                        </button>
                    @endif
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="customer-name"
                            class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Customer</label>
                        <div class="relative">
                            <select id="customer-name"
                                class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all appearance-none text-gray-700 font-medium">
                                <option value="Umum">Umum</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->name }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            <div
                                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="payment-method"
                            class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Metode</label>
                        <div class="relative">
                            <select id="payment-method"
                                class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all appearance-none text-gray-700 font-medium">
                                <option value="">Pilih...</option>
                                <option value="cash">💵 Tunai</option>
                                <option value="utang">📝 Utang</option>
                                <option value="card">💳 Kartu</option>
                                <option value="ewallet">📱 E-Wallet</option>
                                <option value="transfer">🏦 Transfer</option>
                            </select>
                            <div
                                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="booking-fields-block" class="hidden rounded-xl bg-amber-50 border border-amber-100 p-4 space-y-3">
                    <div class="flex items-center mb-1">
                        <span class="text-xs font-bold text-amber-700 uppercase tracking-wider">Info Booking</span>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label for="booker-name" class="block text-[10px] font-bold text-amber-700 uppercase mb-1">
                                Nama Pemesan <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="booker-name" placeholder="Nama pemesan"
                                class="w-full px-3 py-2 bg-white border-amber-200 rounded-lg text-sm focus:ring-amber-500 focus:border-amber-500">
                        </div>
                        <div>
                            <label for="booker-phone" class="block text-[10px] font-bold text-amber-700 uppercase mb-1">
                                No. HP
                            </label>
                            <input type="text" id="booker-phone" placeholder="08..."
                                class="w-full px-3 py-2 bg-white border-amber-200 rounded-lg text-sm focus:ring-amber-500 focus:border-amber-500">
                        </div>
                    </div>
                    <div>
                        <label for="booking-date" class="block text-[10px] font-bold text-amber-700 uppercase mb-1">
                            Tanggal Booking
                        </label>
                        <input type="datetime-local" id="booking-date" step="60"
                            class="w-full px-3 py-2 bg-white border-amber-200 rounded-lg text-sm focus:ring-amber-500 focus:border-amber-500">
                        <p class="mt-1 text-[10px] text-amber-700/80">Tanggal dan jam bisa diatur (format 24 jam).</p>
                    </div>
                </div>

                @if(auth()->user()->hasPermission('can_backdate_sales'))
                    <div>
                        <label for="transaction-date"
                            class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Tanggal
                            (Backdate)</label>
                        <input type="datetime-local" id="transaction-date" step="60"
                            class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm text-gray-700">
                        <p class="mt-1 text-[10px] text-gray-500">Pilih tanggal dan jam transaksi yang diinginkan.</p>
                    </div>
                @endif

                <div>
                    <label for="amount-paid"
                        class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Nominal
                        Bayar</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-bold">Rp</span>
                        <input type="number" id="amount-paid" placeholder="0"
                            class="w-full pl-10 pr-4 py-3 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-xl font-bold text-gray-800 placeholder-gray-300"
                            oninput="updateModalPayment()">
                    </div>
                </div>

                <!-- Quick Amounts -->
                <div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                    <button type="button" onclick="setQuickAmount(10000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">10rb</button>
                    <button type="button" onclick="setQuickAmount(20000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">20rb</button>
                    <button type="button" onclick="setQuickAmount(50000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">50rb</button>
                    <button type="button" onclick="setQuickAmount(100000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">100rb</button>
                    <button type="button" onclick="setQuickAmount(150000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">150rb</button>
                    <button type="button" onclick="setQuickAmount(200000)"
                        class="px-2 py-1.5 text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-200 transition shadow-sm">200rb</button>
                    <button type="button" onclick="passExactAmount()"
                        class="col-span-2 px-2 py-1.5 text-xs font-bold bg-indigo-50 border border-indigo-100 text-indigo-600 rounded-lg hover:bg-indigo-100 transition shadow-sm">Uang
                        Pas</button>
                </div>

                <div class="pt-2">
                    <button type="button" onclick="toggleExtraFields()"
                        class="flex items-center text-xs font-medium text-indigo-600 hover:text-indigo-800 transition">
                        <span id="extra-fields-icon" class="mr-1">▶</span> Opsi Tambahan (Catatan, Tenggat, Pengiriman)
                    </button>
                </div>

                <div id="extra-fields-container" class="hidden space-y-4 pt-2 border-t border-gray-100">
                    <div>
                        <label for="transaction-note"
                            class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Catatan</label>
                        <textarea id="transaction-note" rows="2" placeholder="Catatan transaksi..."
                            class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm"></textarea>
                    </div>

                    <div>
                        <label for="due-date"
                            class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Tenggat
                            Waktu</label>
                        <input type="date" id="due-date"
                            class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm text-gray-700">
                    </div>

                    {{-- Online Store: Shipping Info Block --}}
                    <div id="shipping-info-block" class="hidden rounded-xl bg-blue-50 border border-blue-100 p-4">
                        <div class="flex items-center mb-3">
                            <span class="text-xs font-bold text-blue-700 uppercase tracking-wider flex items-center">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                    </path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                Info Pengiriman
                            </span>
                        </div>
                        <div class="space-y-3">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-[10px] font-bold text-blue-600 uppercase mb-1">Nama Penerima
                                        <span class="text-red-500">*</span></label>
                                    <input type="text" id="recipient-name" placeholder="Nama..."
                                        class="w-full px-3 py-2 bg-white border-blue-200 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-blue-600 uppercase mb-1">No. HP <span
                                            class="text-red-500">*</span></label>
                                    <input type="text" id="recipient-phone" placeholder="08..."
                                        class="w-full px-3 py-2 bg-white border-blue-200 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-blue-600 uppercase mb-1">Alamat <span
                                        class="text-red-500">*</span></label>
                                <textarea id="recipient-address" rows="2" placeholder="Alamat lengkap..."
                                    class="w-full px-3 py-2 bg-white border-blue-200 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-[10px] font-bold text-blue-600 uppercase mb-1">Kota</label>
                                    <input type="text" id="recipient-city" placeholder="Kota"
                                        class="w-full px-3 py-2 bg-white border-blue-200 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label
                                        class="block text-[10px] font-bold text-blue-600 uppercase mb-1">Ekspedisi</label>
                                    <select id="shipping-courier"
                                        class="w-full px-3 py-2 bg-white border-blue-200 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">Pilih...</option>
                                        <option value="JNE">JNE</option>
                                        <option value="J&T">J&T Express</option>
                                        <option value="SiCepat">SiCepat</option>
                                        <option value="GoSend">GoSend</option>
                                        <option value="Lainnya">Lainnya</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-4 bg-white border-t border-gray-100 grid grid-cols-2 gap-3">
                <button onclick="closePaymentModal()"
                    class="w-full py-2.5 rounded-xl text-gray-500 font-bold bg-gray-50 hover:bg-gray-100 hover:text-gray-700 transition">
                    Batal
                </button>
                <button onclick="processTransaction()"
                    class="w-full py-2.5 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-700 hover:from-indigo-700 hover:to-purple-800 text-white font-bold text-base shadow-lg shadow-indigo-200 transform transition hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center group">
                    <span>Bayar</span>
                    <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
                        </path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- Modal Sukses --}}
    <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <div class="text-center">
                <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4"><svg
                        class="w-8 h-8 text-white" 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></div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Pembayaran Berhasil!</h3>
                <p class="text-gray-600 mb-6">Transaksi telah berhasil diproses</p>
                <div class="bg-gray-50 rounded-lg p-4 mb-6 text-left">
                    <div class="grid grid-cols-2 gap-2 text-sm">
                        <div class="text-gray-600">No. Transaksi</div>
                        <div class="font-medium" id="transaction-id"></div>
                        <div class="text-gray-600">Total Bayar</div>
                        <div class="font-medium" id="success-total"></div>
                        <div class="text-gray-600">Kembalian</div>
                        <div class="font-medium text-green-600" id="success-change"></div>
                    </div>
                </div>
                <div class="space-y-3">
                    <div class="text-sm text-gray-600 mb-4">Cetak Struk?</div>
                    <div class="flex space-x-3">
                        <button onclick="printReceipt()"
                            class="flex-1 bg-green-500 text-white py-3 rounded-md hover:bg-green-600 font-medium">📄
                            Struk</button>
                        <button onclick="printInvoiceA4()"
                            class="flex-1 bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 font-medium">🖨️
                            A4</button>
                        <button onclick="closeSuccessModal()"
                            class="flex-1 bg-gray-500 text-white py-3 rounded-md hover:bg-gray-600 font-medium">✕
                            Lewati</button>
                    </div>
                    <div class="text-xs text-gray-500">Modal akan tertutup dalam <span id="countdown-timer"
                            class="font-medium text-blue-600">10</span> detik</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Custom Product (Dimensions) --}}
    <div id="custom-product-modal"
        class="fixed inset-0 bg-black bg-opacity-75 hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-sm mx-auto overflow-hidden">
            <div class="p-4 border-b bg-gray-50">
                <h3 class="text-lg font-bold text-gray-900" id="custom-modal-title">Detail Pesanan Custom</h3>
            </div>
            <div class="p-6 space-y-4">
                <input type="hidden" id="custom-product-id">
                <input type="hidden" id="custom-product-price">
                <input type="hidden" id="custom-product-name">
                <input type="hidden" id="custom-product-image">
                <input type="hidden" id="custom-product-stock">

                <div id="dimension-inputs" class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Panjang (m/cm)</label>
                        <input type="number" id="custom-width" step="0.01"
                            class="w-full px-3 py-2 bg-gray-100 border-transparent rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Lebar (m/cm)</label>
                        <input type="number" id="custom-height" step="0.01"
                            class="w-full px-3 py-2 bg-gray-100 border-transparent rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div id="manual-price-container" class="hidden">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Harga Kesepakatan (Rp)</label>
                    <input type="number" id="custom-manual-price" placeholder="0"
                        class="w-full px-3 py-2 bg-gray-100 border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 font-bold text-lg">
                </div>

                <div id="estimation-box" class="bg-blue-50 p-3 rounded-lg">
                    <p class="text-xs text-blue-800">Estimasi Luas: <span id="custom-area-display"
                            class="font-bold">0</span></p>
                    <p class="text-xs text-blue-800">Estimasi Harga: <span id="custom-price-display" class="font-bold">Rp
                            0</span></p>
                </div>

                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Catatan Item</label>
                    <textarea id="custom-note" rows="2"
                        class="w-full px-3 py-2 bg-gray-100 border-transparent rounded-lg focus:ring-2 focus:ring-blue-500"
                        placeholder="Keterangan finishing, dll"></textarea>
                </div>
            </div>
            <div class="grid grid-cols-2">
                <button onclick="closeCustomModal()"
                    class="py-3 text-center font-bold text-gray-600 bg-gray-200 hover:bg-gray-300 transition">Batal</button>
                <button onclick="confirmCustomProduct()"
                    class="py-3 text-center font-bold text-white bg-blue-600 hover:bg-blue-700 transition">Simpan</button>
            </div>
        </div>
    </div>

    <style>
        @media (min-width: 768px) and (max-width: 1366px) {
            .pos-page .pos-main-wrap {
                gap: 0.875rem;
            }

            .pos-page .pos-cart-panel {
                font-size: 0.95rem;
            }

            .pos-page .pos-cart-panel #cart-title {
                font-size: 1.05rem;
                line-height: 1.3;
            }

            .pos-page .pos-cart-panel .text-lg {
                font-size: 1rem;
            }
        }

        @media print {
            @page {
                size: 80mm auto;
                margin: 0;
            }

            html,
            body {
                margin: 0 !important;
                padding: 0 !important;
                width: 80mm !important;
                min-width: 80mm !important;
                max-width: 80mm !important;
                overflow: hidden !important;
                background: #fff !important;
            }

            /* Sembunyikan tampilan app tanpa menghilangkan pohon elemen */
            body * {
                visibility: hidden !important;
            }

            /* Tampilkan hanya area struk */
            #print-area,
            #print-area * {
                visibility: visible !important;
            }

            #print-area {
                position: fixed !important;
                left: 0 !important;
                top: 0 !important;
                width: 80mm !important;
                min-width: 80mm !important;
                max-width: 80mm !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }
        }

        .thermal-receipt {
            box-sizing: border-box;
            width: 80mm;
            max-width: 80mm;
            padding: 2mm 3mm;
            color: #000;
            background: #fff;
            font-family: "Courier New", Courier, monospace;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.28;
            margin: 0;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            break-inside: avoid;
            page-break-inside: avoid;
        }

        .thermal-receipt * {
            box-sizing: border-box;
        }

        .thermal-receipt__center {
            text-align: center;
        }

        .thermal-receipt__store {
            font-size: 21px;
            font-weight: 900;
            line-height: 1.12;
            overflow-wrap: anywhere;
            text-transform: uppercase;
        }

        .thermal-receipt__small {
            font-size: 12px;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .thermal-receipt__divider {
            border-top: 1px dashed #000;
            margin: 7px 0;
        }

        .thermal-receipt__section {
            border-top: 1px dashed #000;
            padding-top: 7px;
            margin-top: 7px;
        }

        .thermal-receipt__section-bottom {
            border-bottom: 1px dashed #000;
            padding-bottom: 7px;
            margin-bottom: 7px;
        }

        .thermal-receipt__row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: flex-start;
        }

        .thermal-receipt__label {
            flex: 0 0 auto;
        }

        .thermal-receipt__value {
            flex: 1 1 auto;
            min-width: 0;
            text-align: right;
            overflow-wrap: anywhere;
        }

        .thermal-receipt__item {
            border-bottom: 1px dashed #000;
            margin-bottom: 7px;
            padding-bottom: 7px;
        }

        .thermal-receipt__item-name {
            font-weight: 900;
            overflow-wrap: anywhere;
        }

        .thermal-receipt__item-meta {
            font-size: 12px;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .thermal-receipt__total {
            border-top: 2px solid #000;
            border-bottom: 2px solid #000;
            font-size: 17px;
            font-weight: 900;
            line-height: 1.35;
            margin: 6px 0;
            padding: 4px 0;
        }

        /* Hide spin buttons for number inputs */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>

    <div id="print-area" class="hidden"></div>

    {{-- ================================= SCRIPT ================================= --}}
    <script>
        // === STATE MANAGEME           NT ===
        let cart = [];
        let searchTimeout = null;
        let currentPage = 1;
        let currentCategory = 'all';
        let currentType = 'all'; // New state for standard/service/custom filtering
        let perPage = 10;
        let countdownInterval = null;
        let currentProductsList = []; // New Global store for products
        let storeMode = 'offline'; // 'offline', 'online', or 'marketplace'
        let orderType = 'sale'; // 'sale' or 'booking'
        window.currentTransaction = null;

        // === STORE MODE ===
        function setStoreMode(mode) {
            if (mode === 'online' && !FEATURE_FLAGS.onlineStore) {
                mode = 'offline';
            }

            if (mode === 'marketplace' && !FEATURE_FLAGS.marketplace) {
                mode = 'offline';
            }

            storeMode = mode;
            const offlineBtn = document.getElementById('mode-offline-btn');
            const onlineBtn = document.getElementById('mode-online-btn');
            const marketplaceBtn = document.getElementById('mode-marketplace-btn');
            const shippingBlock = document.getElementById('shipping-info-block');
            const marketplaceBanner = document.getElementById('marketplace-banner');
            const marketplaceTaxSettings = document.getElementById('marketplace-tax-settings');
            const marketplaceTaxPanelButton = document.getElementById('tax-panel-marketplace-btn');
            const cartTitle = document.getElementById('cart-title');
            const cartModeHint = document.getElementById('cart-mode-hint');

            [offlineBtn, onlineBtn, marketplaceBtn].filter(Boolean).forEach(btn => {
                btn.classList.remove('bg-purple-600', 'bg-indigo-600', 'bg-orange-500', 'text-white');
                btn.classList.add('text-gray-500', 'hover:text-gray-700');
            });

            if (mode === 'marketplace') {
                if (marketplaceBtn) {
                    marketplaceBtn.classList.add('bg-orange-500', 'text-white');
                    marketplaceBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
                }
                if (shippingBlock) shippingBlock.classList.add('hidden');
                if (marketplaceBanner) marketplaceBanner.classList.remove('hidden');
                if (marketplaceTaxSettings) marketplaceTaxSettings.classList.remove('hidden');
                if (marketplaceTaxPanelButton) marketplaceTaxPanelButton.classList.remove('hidden');
                if (cartTitle) cartTitle.textContent = 'Marketplace Cart';
                if (cartModeHint) cartModeHint.textContent = 'Cocok untuk order marketplace tanpa wajib data penerima.';
            } else if (mode === 'online') {
                if (onlineBtn) {
                    onlineBtn.classList.add('bg-indigo-600', 'text-white');
                    onlineBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
                }
                if (shippingBlock) shippingBlock.classList.remove('hidden');
                if (marketplaceBanner) marketplaceBanner.classList.add('hidden');
                if (marketplaceTaxSettings) marketplaceTaxSettings.classList.add('hidden');
                if (marketplaceTaxPanelButton) marketplaceTaxPanelButton.classList.add('hidden');
                if (cartTitle) cartTitle.textContent = 'Shopping Cart';
                if (cartModeHint) cartModeHint.textContent = 'Mode online dengan data penerima dan pengiriman.';
            } else {
                if (offlineBtn) {
                    offlineBtn.classList.add('bg-purple-600', 'text-white');
                    offlineBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
                }
                if (shippingBlock) shippingBlock.classList.add('hidden');
                if (marketplaceBanner) marketplaceBanner.classList.add('hidden');
                if (marketplaceTaxSettings) marketplaceTaxSettings.classList.add('hidden');
                if (marketplaceTaxPanelButton) marketplaceTaxPanelButton.classList.add('hidden');
                if (cartTitle) cartTitle.textContent = 'Shopping Cart';
                if (cartModeHint) cartModeHint.textContent = 'Mode toko biasa untuk transaksi langsung.';
            }

            toggleMarketplaceTaxMode();
            setActiveTaxPanel(mode === 'marketplace' ? (document.getElementById('active-tax-panel')?.value || 'ppn') : 'ppn');
            updateCartDisplay();
        }

        function getPayloadStoreType() {
            if (storeMode === 'online' && !FEATURE_FLAGS.onlineStore) {
                return 'offline';
            }

            if (storeMode === 'marketplace' && !FEATURE_FLAGS.marketplace) {
                return 'offline';
            }

            return storeMode;
        }

        function updateVoucherStatus(message = 'Kosongkan bila tidak memakai voucher.', tone = 'neutral') {
            const status = document.getElementById('voucher-status');
            if (!status) return;

            status.textContent = message;
            status.className = 'mt-2 text-[11px]';

            if (tone === 'success') {
                status.classList.add('text-emerald-700');
            } else if (tone === 'error') {
                status.classList.add('text-red-600');
            } else {
                status.classList.add('text-gray-500');
            }
        }

        function setActiveTaxPanel(panel) {
            const activeInput = document.getElementById('active-tax-panel');
            const normalizedPanel = storeMode === 'marketplace' ? panel : 'ppn';
            const ppnButton = document.getElementById('tax-panel-ppn-btn');
            const marketplaceButton = document.getElementById('tax-panel-marketplace-btn');
            const ppnPanel = document.getElementById('ppn-tax-panel');
            const marketplacePanel = document.getElementById('marketplace-tax-panel');

            if (activeInput) {
                activeInput.value = normalizedPanel;
            }

            if (ppnButton) {
                ppnButton.classList.toggle('bg-indigo-600', normalizedPanel === 'ppn');
                ppnButton.classList.toggle('text-white', normalizedPanel === 'ppn');
                ppnButton.classList.toggle('font-semibold', normalizedPanel === 'ppn');
                ppnButton.classList.toggle('bg-white', normalizedPanel !== 'ppn');
                ppnButton.classList.toggle('text-indigo-700', normalizedPanel !== 'ppn');
                ppnButton.classList.toggle('font-medium', normalizedPanel !== 'ppn');
                ppnButton.classList.toggle('shadow-sm', normalizedPanel === 'ppn');
            }

            if (marketplaceButton) {
                marketplaceButton.classList.toggle('bg-orange-500', normalizedPanel === 'marketplace');
                marketplaceButton.classList.toggle('text-white', normalizedPanel === 'marketplace');
                marketplaceButton.classList.toggle('font-semibold', normalizedPanel === 'marketplace');
                marketplaceButton.classList.toggle('bg-white', normalizedPanel !== 'marketplace');
                marketplaceButton.classList.toggle('text-orange-700', normalizedPanel !== 'marketplace');
                marketplaceButton.classList.toggle('font-medium', normalizedPanel !== 'marketplace');
                marketplaceButton.classList.toggle('shadow-sm', normalizedPanel === 'marketplace');
            }

            if (ppnPanel) {
                ppnPanel.classList.toggle('hidden', normalizedPanel !== 'ppn');
            }

            if (marketplacePanel) {
                marketplacePanel.classList.toggle('hidden', normalizedPanel !== 'marketplace' || storeMode !== 'marketplace');
            }
        }

        function setTaxBurden(type, value) {
            const inputId = type === 'ppn' ? 'ppn-tax-burden' : 'marketplace-tax-burden';
            const activeClass = type === 'ppn'
                ? ['border-indigo-200', 'bg-indigo-600', 'text-white', 'font-semibold']
                : ['border-orange-200', 'bg-orange-500', 'text-white', 'font-semibold'];
            const inactiveClass = type === 'ppn'
                ? ['border-gray-200', 'bg-white', 'text-gray-600', 'font-medium']
                : ['border-orange-200', 'bg-white', 'text-orange-700', 'font-medium'];
            const buttons = type === 'ppn'
                ? [
                    { id: 'ppn-burden-customer-btn', value: 'customer' },
                    { id: 'ppn-burden-store-btn', value: 'store' },
                ]
                : [
                    { id: 'marketplace-burden-store-btn', value: 'store' },
                    { id: 'marketplace-burden-customer-btn', value: 'customer' },
                ];

            const input = document.getElementById(inputId);
            if (input) {
                input.value = value;
            }

            buttons.forEach(({ id, value: buttonValue }) => {
                const button = document.getElementById(id);
                if (!button) return;

                [...activeClass, ...inactiveClass].forEach(className => button.classList.remove(className));
                if (buttonValue === value) {
                    activeClass.forEach(className => button.classList.add(className));
                } else {
                    inactiveClass.forEach(className => button.classList.add(className));
                }
            });

            updateCartTotals();
        }

        function setMarketplaceTaxMode(value) {
            const input = document.getElementById('marketplace-tax-mode');
            const activeClass = ['border-orange-200', 'bg-orange-500', 'text-white', 'font-semibold'];
            const inactiveClass = ['border-orange-200', 'bg-white', 'text-orange-700', 'font-medium'];
            const buttons = [
                { id: 'marketplace-mode-global-btn', value: 'global' },
                { id: 'marketplace-mode-item-btn', value: 'item' },
            ];

            if (input) {
                input.value = value;
            }

            buttons.forEach(({ id, value: buttonValue }) => {
                const button = document.getElementById(id);
                if (!button) return;

                [...activeClass, ...inactiveClass].forEach(className => button.classList.remove(className));
                if (buttonValue === value) {
                    activeClass.forEach(className => button.classList.add(className));
                } else {
                    inactiveClass.forEach(className => button.classList.add(className));
                }
            });

            toggleMarketplaceTaxMode();
            updateCartTotals();
        }

        function toggleMarketplaceTaxMode() {
            const rateRow = document.getElementById('marketplace-tax-rate-row');
            const mode = document.getElementById('marketplace-tax-mode')?.value || 'global';

            if (rateRow) {
                rateRow.classList.toggle('hidden', mode !== 'global');
            }

            updateCartDisplay();
        }

        function setOrderType(type) {
            orderType = type;
            const saleBtn = document.getElementById('mode-sale-btn');
            const bookingBtn = document.getElementById('mode-booking-btn');
            const bookingFields = document.getElementById('booking-fields-block');

            if (!saleBtn || !bookingBtn || !bookingFields) return;

            if (type === 'booking') {
                saleBtn.classList.remove('bg-indigo-600', 'text-white');
                saleBtn.classList.add('text-gray-500', 'hover:text-gray-700');
                bookingBtn.classList.add('bg-amber-600', 'text-white');
                bookingBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
                bookingFields.classList.remove('hidden');
            } else {
                bookingBtn.classList.remove('bg-amber-600', 'text-white');
                bookingBtn.classList.add('text-gray-500', 'hover:text-gray-700');
                saleBtn.classList.add('bg-indigo-600', 'text-white');
                saleBtn.classList.remove('text-gray-500', 'hover:text-gray-700');
                bookingFields.classList.add('hidden');
            }
        }

        // === UTILITY FUNCTIONS ===
        const formatRupiah = (amount) => `Rp ${new Intl.NumberFormat('id-ID').format(amount)}`;
        const sanitizeText = (value) => String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');

        function normalizeWholesalePrices(prices = []) {
            return (Array.isArray(prices) ? prices : [])
                .map(tier => ({
                    min_quantity: Number(tier?.min_quantity) || 0,
                    price: Number(tier?.price) || 0,
                }))
                .filter(tier => tier.min_quantity > 0 && tier.price >= 0)
                .sort((a, b) => a.min_quantity - b.min_quantity);
        }

        function getMatchingWholesaleTier(item) {
            if (!item || item.type !== 'standard') {
                return null;
            }

            const quantity = Number(item.quantity) || 0;
            const tiers = normalizeWholesalePrices(item.wholesale_prices);

            return tiers.reduce((matchedTier, tier) => {
                return quantity >= tier.min_quantity ? tier : matchedTier;
            }, null);
        }

        function syncCartItemPricing(item) {
            if (!item) {
                return;
            }

            item.base_price = Number(item.base_price ?? item.price) || 0;
            item.wholesale_prices = normalizeWholesalePrices(item.wholesale_prices);

            if (item.type !== 'standard') {
                item.applied_wholesale_tier = null;
                return;
            }

            const matchedTier = getMatchingWholesaleTier(item);
            item.price = matchedTier ? Number(matchedTier.price) : Number(item.base_price);
            item.applied_wholesale_tier = matchedTier ? matchedTier.min_quantity : null;
        }

        function getItemGrossSubtotal(item) {
            return (Number(item.price) || 0) * (Number(item.quantity) || 0);
        }

        function getItemShopeeAdminFee(item) {
            const gross = getItemGrossSubtotal(item);
            const percent = Math.min(100, Math.max(0, Number(item.shopee_admin_fee_percent) || 0));
            return gross * (percent / 100);
        }

        function getItemDiscountAmount(item, context = null) {
            const breakdown = context || calculateCartBreakdown();
            const matchedItem = breakdown.items.find(entry => entry.cart_key === item.cart_key);
            return Number(matchedItem?.discount_amount || 0);
        }

        function getItemNetSubtotal(item) {
            return Math.max(0, getItemGrossSubtotal(item) - getItemDiscountAmount(item));
        }

        function calculateCartBreakdown() {
            const grossSubtotal = cart.reduce((sum, item) => sum + getItemGrossSubtotal(item), 0);
            const voucherCode = FEATURE_FLAGS.vouchers ? (document.getElementById('voucher-code')?.value?.trim() || '') : '';
            const marketplaceMode = FEATURE_FLAGS.marketplace ? (document.getElementById('marketplace-tax-mode')?.value || 'global') : 'global';
            const marketplaceRate = FEATURE_FLAGS.marketplace
                ? Math.min(100, Math.max(0, parseFloat(document.getElementById('marketplace-tax-rate')?.value) || 0))
                : 0;
            const marketplaceBurden = FEATURE_FLAGS.marketplace ? (document.getElementById('marketplace-tax-burden')?.value || 'store') : 'store';
            const ppnRate = Math.min(100, Math.max(0, parseFloat(document.getElementById('ppn-tax-rate')?.value) || 0));
            const ppnBurden = document.getElementById('ppn-tax-burden')?.value || 'customer';
            const voucher = FEATURE_FLAGS.vouchers && voucherCode
                ? ACTIVE_VOUCHERS.find(item => String(item.code).toUpperCase() === voucherCode.toUpperCase())
                : null;
            let automaticDiscountTotal = 0;
            let voucherDiscountTotal = 0;
            let marketplaceTaxAmount = 0;

            const normalizedItems = cart.map(item => {
                const gross = getItemGrossSubtotal(item);
                const matchingRules = (FEATURE_FLAGS.discounts ? ACTIVE_DISCOUNT_RULES : [])
                    .filter(rule => rule.applies_to === 'all' || (rule.product_ids || []).includes(item.id))
                    .sort((a, b) => (b.priority || 0) - (a.priority || 0));

                let automaticDiscountAmount = 0;

                matchingRules.forEach(rule => {
                    const candidateAmount = rule.discount_type === 'percent'
                        ? gross * (Math.min(100, Number(rule.discount_value) || 0) / 100)
                        : Math.min(Number(rule.discount_value) || 0, gross);

                    if (candidateAmount > automaticDiscountAmount) {
                        automaticDiscountAmount = candidateAmount;
                    }
                });

                automaticDiscountAmount = Math.min(gross, automaticDiscountAmount);
                automaticDiscountTotal += automaticDiscountAmount;

                return {
                    ...item,
                    automatic_discount_amount: automaticDiscountAmount,
                    automatic_discount_percent: gross > 0 ? (automaticDiscountAmount / gross) * 100 : 0,
                    voucher_discount_amount: 0,
                };
            });

            const voucherEligibleSubtotal = voucher
                ? normalizedItems.reduce((sum, item) => {
                    const netAfterAutomatic = Math.max(0, getItemGrossSubtotal(item) - (Number(item.automatic_discount_amount) || 0));
                    const isEligible = voucher.applies_to === 'all' || (voucher.product_ids || []).includes(item.id);
                    return sum + (isEligible ? netAfterAutomatic : 0);
                }, 0)
                : 0;

            if (voucher) {
                if (voucherEligibleSubtotal >= (Number(voucher.min_purchase) || 0)) {
                    voucherDiscountTotal = voucher.discount_type === 'percent'
                        ? voucherEligibleSubtotal * (Math.min(100, Number(voucher.discount_value) || 0) / 100)
                        : Math.min(Number(voucher.discount_value) || 0, voucherEligibleSubtotal);
                } else {
                    updateVoucherStatus(`Voucher ${voucher.code} belum memenuhi minimal belanja.`, 'error');
                }
            } else if (voucherCode) {
                updateVoucherStatus(`Voucher ${voucherCode.toUpperCase()} tidak ditemukan atau tidak aktif.`, 'error');
            } else {
                updateVoucherStatus();
            }

            if (voucher && voucherDiscountTotal > 0) {
                updateVoucherStatus(`Voucher ${voucher.code} aktif: ${voucher.name}.`, 'success');
            }

            let allocatedVoucherDiscount = 0;
            const normalizedItemsWithVoucher = normalizedItems.map((item, index) => {
                const gross = getItemGrossSubtotal(item);
                const automaticDiscountAmount = Number(item.automatic_discount_amount) || 0;
                const netAfterAutomatic = Math.max(0, gross - automaticDiscountAmount);
                const isEligible = voucher && (voucher.applies_to === 'all' || (voucher.product_ids || []).includes(item.id));
                let voucherDiscountAmount = 0;

                if (voucher && voucherDiscountTotal > 0 && isEligible && voucherEligibleSubtotal > 0) {
                    if (index === normalizedItems.length - 1) {
                        voucherDiscountAmount = Math.max(0, voucherDiscountTotal - allocatedVoucherDiscount);
                    } else {
                        voucherDiscountAmount = voucherDiscountTotal * (netAfterAutomatic / voucherEligibleSubtotal);
                        allocatedVoucherDiscount += voucherDiscountAmount;
                    }
                    voucherDiscountAmount = Math.min(netAfterAutomatic, voucherDiscountAmount);
                }

                const totalDiscountAmount = automaticDiscountAmount + voucherDiscountAmount;
                const taxBase = Math.max(0, gross - totalDiscountAmount);
                const itemRate = FEATURE_FLAGS.marketplace && storeMode === 'marketplace'
                    ? (marketplaceMode === 'item'
                        ? Math.min(100, Math.max(0, Number(item.shopee_admin_fee_percent) || 0))
                        : marketplaceRate)
                    : 0;
                const marketplaceTax = FEATURE_FLAGS.marketplace && storeMode === 'marketplace'
                    ? taxBase * (itemRate / 100)
                    : 0;

                marketplaceTaxAmount += marketplaceTax;

                return {
                    ...item,
                    voucher_discount_amount: voucherDiscountAmount,
                    discount_amount: totalDiscountAmount,
                    discount_percent: gross > 0 ? (totalDiscountAmount / gross) * 100 : 0,
                    effective_marketplace_tax_percent: itemRate,
                    effective_marketplace_tax_amount: marketplaceTax,
                };
            });

            const discount = normalizedItemsWithVoucher.reduce((sum, item) => sum + (Number(item.discount_amount) || 0), 0);
            const discountedSubtotal = Math.max(0, grossSubtotal - discount);

            const ppnTaxAmount = discountedSubtotal * (ppnRate / 100);
            const customerTax = (ppnBurden === 'customer' ? ppnTaxAmount : 0)
                + (marketplaceBurden === 'customer' ? marketplaceTaxAmount : 0);
            const storeTax = (ppnBurden === 'store' ? ppnTaxAmount : 0)
                + (marketplaceBurden === 'store' ? marketplaceTaxAmount : 0);
            const total = Math.max(0, discountedSubtotal + customerTax - storeTax);

            return {
                grossSubtotal,
                discount,
                discountedSubtotal,
                voucherCode,
                promoSource: voucher ? 'voucher' : (automaticDiscountTotal > 0 ? 'automatic' : 'none'),
                promoName: voucher?.name || null,
                promoDiscountType: voucher?.discount_type || null,
                promoDiscountValue: Number(voucher?.discount_value || 0),
                automaticDiscountTotal,
                voucherDiscountTotal,
                marketplaceMode,
                marketplaceRate,
                marketplaceBurden,
                marketplaceTaxAmount,
                ppnRate,
                ppnBurden,
                ppnTaxAmount,
                storeTax,
                tax: customerTax,
                total,
                items: normalizedItemsWithVoucher,
            };
        }

        // === INITIALIZATION ===
        document.addEventListener('DOMContentLoaded', function () {
            initPos();
        });

        function initPos() {
            console.log('Initializing POS system...');
            loadCategories();
            loadProducts();
            setupSearch();
            setTaxBurden('ppn', document.getElementById('ppn-tax-burden')?.value || 'customer');
            setTaxBurden('marketplace', document.getElementById('marketplace-tax-burden')?.value || 'store');
            setMarketplaceTaxMode(document.getElementById('marketplace-tax-mode')?.value || 'global');
            setActiveTaxPanel(document.getElementById('active-tax-panel')?.value || 'ppn');
            setStoreMode(storeMode);
            updateCartDisplay();
            document.getElementById('product-search')?.focus();
        }

        // Add this function to handle direct quantity updates


        // === API & DATA FETCHING ===
        async function fetchData(url) {
            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                return await response.json();
            } catch (error) {
                console.error(`Error fetching from ${url}:`, error);
                return null;
            }
        }

        async function loadCategories() {
            const categories = await fetchData('/pos/categories');
            if (categories) renderCategoryTabs(categories);
        }

        async function loadProducts() {
            const searchInput = document.getElementById('product-search');
            const query = searchInput.value.trim();

            const url = `/pos/products/search?q=${encodeURIComponent(query)}&page=${currentPage}&category=${currentCategory}&type=${currentType}&per_page=${perPage}`;

            const data = await fetchData(url);

            if (data) {
                currentProductsList = data.data || []; // Store globally

                // Logika untuk barcode scanner otomatis (Hanya untuk Single Product)
                if (currentProductsList.length === 1 && currentProductsList[0].exact_barcode_match && !currentProductsList[0].is_group) {
                    const product = currentProductsList[0];
                    addToCart(product);
                    searchInput.value = '';
                    currentPage = 1;
                    await loadProducts();
                    return;
                }

                displayProductsGrid(currentProductsList);
                updatePagination(data);
            } else {
                document.getElementById('products-grid').innerHTML = '<p class="text-red-500 text-center col-span-full">Error memuat produk.</p>';
            }
        }

        // === RENDERING & DISPLAY LOGIC ===
        function renderCategoryTabs(categories) {
            const container = document.getElementById('category-tabs-container');
            if (!container) return;

            let tabsHTML = `<button onclick="filterByCategory('all', this)" id="tab-all" class="category-tab px-6 py-4 text-sm font-medium text-white bg-indigo-600 border-b-2 border-indigo-600 whitespace-nowrap active">Semua</button>`;

            // Add Printing specific tabs
            tabsHTML += `<button onclick="filterByType('service', this)" class="category-tab px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300 whitespace-nowrap">🛠️ Jasa/Layanan</button>`;
            tabsHTML += `<button onclick="filterByType('custom', this)" class="category-tab px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300 whitespace-nowrap">🎨 Produk Kustom</button>`;

            categories.forEach(category => {
                tabsHTML += `<button onclick="filterByCategory('${category.id}', this)" class="category-tab px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300 whitespace-nowrap">${category.name}</button>`;
            });
            container.innerHTML = tabsHTML;
        }

        function filterByType(type, el) {
            currentType = type;
            currentCategory = 'all'; // Reset category when filtering by type
            currentPage = 1;
            updateTabHighlight(el);
            loadProducts();
        }

        function filterByCategory(id, el) {
            currentCategory = id;
            currentType = 'all'; // Reset type when filtering by category
            currentPage = 1;
            updateTabHighlight(el);
            loadProducts();
        }

        function updateTabHighlight(el) {
            document.querySelectorAll('.category-tab').forEach(tab => {
                tab.classList.remove('text-white', 'bg-indigo-600', 'border-indigo-600', 'active');
                tab.classList.add('text-gray-500', 'border-transparent');
            });
            el.classList.add('text-white', 'bg-indigo-600', 'border-indigo-600', 'active');
            el.classList.remove('text-gray-500', 'border-transparent');
        }

        function displayProductsGrid(products) {
            const grid = document.getElementById('products-grid');
            if (!products || products.length === 0) {
                grid.innerHTML = '<div class="col-span-full text-center text-gray-500 py-8">Tidak ada produk ditemukan</div>';
                return;
            }

            grid.innerHTML = products.map((p, index) => {
                if (p.is_group) {
                    // Render Group Card
                    return `
                                                                                                                                    <div class="bg-white border rounded-lg p-3 hover:shadow-md transition-shadow cursor-pointer relative" onclick="openVariantModal(${index})">
                                                                                                                                         <div class="absolute top-2 right-2 bg-purple-100 text-purple-700 text-xs font-bold px-2 py-1 rounded-full">Varian</div>
                                                                                                                                        <div class="aspect-square bg-gray-100 rounded-lg mb-2 flex items-center justify-center overflow-hidden">
                                                                                                                                            ${p.image ? `<img src="/storage/${p.image}" alt="${p.name}" class="w-full h-full object-cover">` : `<span class="text-2xl">📦</span>`}
                                                                                                                                        </div>
                                                                                                                                        <div class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">${p.name}</div>
                                                                                                                                        <div class="text-xs text-gray-500 mb-2">Total Stok: ${p.stock}</div>
                                                                                                                                        <div class="text-sm font-bold text-teal-600">${typeof p.price_display === 'number' ? formatRupiah(p.price_display) : formatRupiah(p.selling_price)}</div>
                                                                                                                                    </div>`;
                } else {
                    // Render Single Card
                    const type = p.type || 'standard';
                    const isCustom = p.is_custom_price || false;
                    const stockDisplay = type === 'service' ? '-' : `Stok: ${p.stock}`;
                    const badge = type !== 'standard' ? `<div class="absolute top-2 right-2 ${type === 'service' ? 'bg-blue-100 text-blue-700' : 'bg-orange-100 text-orange-700'} text-xs font-bold px-2 py-1 rounded-full">${type === 'service' ? 'Jasa' : 'Custom'}</div>` : '';
                    const wholesaleBadge = type === 'standard' && Array.isArray(p.wholesale_prices) && p.wholesale_prices.length
                        ? `<div class="mt-2 inline-flex rounded-full bg-teal-50 px-2 py-1 text-[10px] font-semibold text-teal-700">Grosir tersedia</div>`
                        : '';

                    return `
                                                                                                                                    <div class="bg-white border rounded-lg p-3 hover:shadow-md transition-shadow cursor-pointer relative" onclick="addProductFromList(${index})">
                                                                                                                                        ${badge}
                                                                                                                                        <div class="aspect-square bg-gray-100 rounded-lg mb-2 flex items-center justify-center overflow-hidden">
                                                                                                                                            ${p.image ? `<img src="/storage/${p.image}" alt="${p.name}" class="w-full h-full object-cover">` : `<span class="text-2xl">📦</span>`}
                                                                                                                                        </div>
                                                                                                                                        <div class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">${p.name}</div>
                                                                                                                                        <div class="text-xs text-gray-500 mb-2">${stockDisplay}</div>
                                                                                                                                        <div class="text-sm font-bold text-teal-600">${formatRupiah(p.selling_price)}</div>
                                                                                                                                        ${wholesaleBadge}
                                                                                                                                    </div>`;
                }
            }).join('');
        }

        function updatePagination(data) {
            const infoEl = document.getElementById('pagination-info');
            const buttonsEl = document.getElementById('pagination-buttons');
            if (!infoEl || !buttonsEl || !data.total) {
                if (infoEl) infoEl.textContent = '';
                if (buttonsEl) buttonsEl.innerHTML = '';
                return;
            }
            infoEl.textContent = `Menampilkan ${data.from || 0} sampai ${data.to || 0} dari ${data.total} hasil`;
            let buttonsHTML = '';
            data.links.forEach(link => {
                if (link.url) {
                    buttonsHTML += `<button onclick="changePage('${link.url}')" class="px-3 py-2 text-sm ${link.active ? 'bg-teal-600 text-white rounded' : 'text-gray-500 hover:text-gray-700'}">${link.label.replace('&laquo;', '‹').replace('&raquo;', '›')}</button>`;
                } else {
                    buttonsHTML += `<span class="px-3 py-2 text-sm text-gray-400">${link.label.replace('&laquo;', '‹').replace('&raquo;', '›')}</span>`;
                }
            });
            buttonsEl.innerHTML = buttonsHTML;
        }

        // === SEARCH LOGIC ===
        function setupSearch() {
            const searchInput = document.getElementById('product-search');
            searchInput.addEventListener('input', () => {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    currentPage = 1;
                    loadProducts();
                }, 300);
            });
            searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    clearTimeout(searchTimeout);
                    currentPage = 1;
                    loadProducts();
                }
            });
        }

        // === VARIANT MODAL LOGIC ===
        function openVariantModal(index) {
            const group = currentProductsList[index];
            if (!group || !group.variants) return;

            const modalBody = document.getElementById('variant-modal-body');
            const modalTitle = document.getElementById('variant-modal-title');

            modalTitle.textContent = group.name;

            modalBody.innerHTML = group.variants.map((v, variantIndex) => `
                                                                                                                                <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 cursor-pointer ${v.stock <= 0 ? 'opacity-50 pointer-events-none' : ''}" 
                                                                                                                                     onclick="${v.stock > 0 ? `addVariantToCart(${index}, ${variantIndex}); closeVariantModal();` : ''}">
                                                                                                                                    <div class="flex items-center">
                                                                                                                                        <div class="w-10 h-10 bg-gray-200 rounded flex-shrink-0 mr-3 overflow-hidden">
                                                                                                                                             ${v.image || group.image ? `<img src="/storage/${v.image || group.image}" class="w-full h-full object-cover">` : ''}
                                                                                                                                        </div>
                                                                                                                                        <div>
                                                                                                                                            <div class="font-medium text-gray-900">${v.name}</div>
                                                                                                                                            <div class="text-sm text-gray-500">Stok: ${v.stock}</div>
                                                                                                                                            ${Array.isArray(v.wholesale_prices) && v.wholesale_prices.length ? `<div class="mt-1 text-[10px] font-semibold text-teal-700">Grosir tersedia</div>` : ''}
                                                                                                                                        </div>
                                                                                                                                    </div>
                                                                                                                                    <div class="font-bold text-teal-600">${formatRupiah(v.price)}</div>
                                                                                                                                </div>
                                                                                                                            `).join('');

            document.getElementById('variant-modal').classList.remove('hidden');
        }

        function closeVariantModal() {
            document.getElementById('variant-modal').classList.add('hidden');
        }

        // Variabel global untuk instance scanner
        let html5QrcodeScanner = null;

        // Fungsi untuk membuka modal dan memulai scanner
        function openScannerModal() {
            document.getElementById('scanner-modal').classList.remove('hidden');

            // Cek HTTPS atau Localhost
            if (location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Koneksi Tidak Aman',
                    text: 'Fitur kamera mungkin tidak berfungsi jika tidak menggunakan HTTPS.',
                    timer: 3000
                });
            }

            startScanner();
        }

        function startScanner() {
            if (typeof Html5Qrcode === 'undefined' || typeof Html5QrcodeSupportedFormats === 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Scanner Belum Siap',
                    text: 'Library scanner barcode gagal dimuat. Cek koneksi internet atau refresh halaman.'
                });
                closeScannerModal();
                return;
            }

            if (html5QrcodeScanner) {
                // Already running
                return;
            }

            html5QrcodeScanner = new Html5Qrcode("reader");

            const config = {
                fps: 10,
                qrbox: { width: 250, height: 250 },
                formatsToSupport: [
                    Html5QrcodeSupportedFormats.CODE_128,
                    Html5QrcodeSupportedFormats.EAN_13,
                    Html5QrcodeSupportedFormats.UPC_A,
                    Html5QrcodeSupportedFormats.UPC_E,
                    Html5QrcodeSupportedFormats.CODE_39,
                    Html5QrcodeSupportedFormats.EAN_8,
                    Html5QrcodeSupportedFormats.QR_CODE
                ]
            };

            // Attempt 1: Back Camera
            html5QrcodeScanner.start(
                { facingMode: "environment" },
                config,
                onScanSuccess,
                onScanError
            ).catch(err => {
                console.warn("Back camera failed, trying front...", err);
                // Attempt 2: Front/User Camera
                html5QrcodeScanner.start(
                    { facingMode: "user" },
                    config,
                    onScanSuccess,
                    onScanError
                ).catch(err2 => {
                    console.error("Scanner failed:", err2);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Membuka Kamera',
                        text: 'Pastikan izin kamera diberikan dan menggunakan HTTPS.'
                    });
                    closeScannerModal();
                });
            });
        }

        function onScanSuccess(decodedText, decodedResult) {
            // Play beep sound
            playBeep();

            // Stop scanner temporarily for UX
            html5QrcodeScanner.pause();

            // Process Scan
            console.log('Barcode ditemukan:', decodedText);

            const searchInput = document.getElementById('product-search');
            searchInput.value = decodedText;

            closeScannerModal();

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Barcode Berhasil Discanned',
                timer: 1500,
                showConfirmButton: false
            });

            loadProducts();
        }

        function onScanError(error) {
            // Ignore scan errors during continuous scanning
        }

        function playBeep() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                oscillator.frequency.value = 1000;
                oscillator.type = 'sine';
                gainNode.gain.value = 0.3;
                oscillator.start();
                setTimeout(() => oscillator.stop(), 100);
            } catch (e) {
                console.log('Audio not supported', e);
            }
        }

        // Fungsi untuk menutup modal dan menghentikan scanner
        function closeScannerModal() {
            if (html5QrcodeScanner) {
                html5QrcodeScanner.stop().then(() => {
                    html5QrcodeScanner = null;
                    document.getElementById('scanner-modal').classList.add('hidden');
                }).catch(err => {
                    console.error('Error stopping scanner:', err);
                    html5QrcodeScanner = null;
                    document.getElementById('scanner-modal').classList.add('hidden');
                });
            } else {
                document.getElementById('scanner-modal').classList.add('hidden');
            }
        }

        // === CART LOGIC ===
        function addProductFromList(index) {
            const product = currentProductsList[index];
            if (!product) return;

            addToCart(product);
        }

        function addVariantToCart(groupIndex, variantIndex) {
            const group = currentProductsList[groupIndex];
            const variant = group?.variants?.[variantIndex];
            if (!variant) return;

            addToCart({
                id: variant.id,
                name: variant.full_name || variant.name,
                selling_price: variant.price,
                base_price: variant.base_price ?? variant.price,
                stock: variant.stock,
                image: variant.image || group.image || '',
                type: variant.type || 'standard',
                is_custom_price: variant.is_custom_price || false,
                wholesale_prices: variant.wholesale_prices || [],
            });
        }

        function addToCart(product) {
            const id = product?.id;
            const name = product?.name;
            const price = Number(product?.selling_price ?? product?.price ?? 0);
            const basePrice = Number(product?.base_price ?? price);
            const stock = Number(product?.stock ?? 0);
            const image = product?.image || '';
            const type = product?.type || 'standard';
            const isCustomPrice = Boolean(product?.is_custom_price);
            const wholesalePrices = normalizeWholesalePrices(product?.wholesale_prices || []);

            // Handle Custom Products or Services that need extra input
            if (type === 'custom' || (type === 'service' && isCustomPrice)) {
                openCustomModal(id, name, price, stock, image, type, isCustomPrice);
                return;
            }

            // Standard Logic (Stacking items)
            const existingItem = cart.find(item => item.id === id && (!item.type || item.type === 'standard' || item.type === 'service') && !item.custom_width);

            if (existingItem) {
                if (type !== 'service' && existingItem.quantity >= stock) {
                    alert('Stok tidak mencukupi!');
                    return;
                }
                existingItem.quantity++;
                existingItem.wholesale_prices = wholesalePrices;
                existingItem.base_price = basePrice;
                syncCartItemPricing(existingItem);
            } else {
                if (type === 'service' || stock > 0) {
                    const cartItem = {
                        id,
                        cart_key: `${id}-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
                        name,
                        price,
                        base_price: basePrice,
                        stock,
                        image,
                        quantity: 1,
                        type: type,
                        wholesale_prices: wholesalePrices,
                        applied_wholesale_tier: null,
                        is_discount_eligible: false,
                        order_number: '',
                        shopee_admin_fee_percent: 0,
                        custom_width: null,
                        custom_height: null,
                        note: null
                    };
                    syncCartItemPricing(cartItem);
                    cart.push(cartItem);
                } else {
                    alert('Stok produk habis!');
                }
            }
            updateCartDisplay();
            document.getElementById('product-search').value = '';
            document.getElementById('product-search').focus();
        }

        // Custom Modal Functions
        function openCustomModal(id, name, price, stock, image, type, isCustomPrice) {
            document.getElementById('custom-product-id').value = id;
            document.getElementById('custom-product-name').value = name;
            document.getElementById('custom-product-price').value = price;
            document.getElementById('custom-product-stock').value = stock;
            document.getElementById('custom-product-image').value = image;

            document.getElementById('custom-modal-title').textContent = name;
            document.getElementById('custom-width').value = '';
            document.getElementById('custom-height').value = '';
            document.getElementById('custom-note').value = '';
            document.getElementById('custom-manual-price').value = Math.floor(price); // Set default price (rounded)

            const dimensionContainer = document.getElementById('dimension-inputs');
            const manualPriceContainer = document.getElementById('manual-price-container');
            const estimationBox = document.getElementById('estimation-box');

            if (type === 'service' && isCustomPrice) {
                // Mode Harga Manual (Service)
                dimensionContainer.classList.add('hidden');
                manualPriceContainer.classList.remove('hidden');
                estimationBox.classList.add('hidden');
            } else {
                // Mode Dimensi (Custom Printing)
                dimensionContainer.classList.remove('hidden');
                manualPriceContainer.classList.add('hidden');
                estimationBox.classList.remove('hidden');
                updateCustomCalculation();
            }

            document.getElementById('custom-product-modal').classList.remove('hidden');

            if (type === 'service' && isCustomPrice) {
                setTimeout(() => document.getElementById('custom-manual-price').focus(), 100);
            }
        }

        function closeCustomModal() {
            document.getElementById('custom-product-modal').classList.add('hidden');
        }

        // Live calculation in modal
        const customInputs = ['custom-width', 'custom-height'];
        customInputs.forEach(id => {
            const el = document.getElementById(id);
            if (el) el.addEventListener('input', updateCustomCalculation);
        });

        function updateCustomCalculation() {
            const price = parseFloat(document.getElementById('custom-product-price').value) || 0;
            const width = parseFloat(document.getElementById('custom-width').value) || 0;
            const height = parseFloat(document.getElementById('custom-height').value) || 0;

            let area = 0;
            let estimatedPrice = 0;

            if (width > 0 && height > 0) {
                area = width * height;
                estimatedPrice = price * area;
            } else {
                estimatedPrice = price;
            }

            document.getElementById('custom-area-display').textContent = area > 0 ? area.toFixed(2) + ' m²' : '-';
            document.getElementById('custom-price-display').textContent = formatRupiah(estimatedPrice);
        }

        function confirmCustomProduct() {
            const id = parseInt(document.getElementById('custom-product-id').value);
            const name = document.getElementById('custom-product-name').value;
            const price = parseFloat(document.getElementById('custom-product-price').value);
            const stock = parseInt(document.getElementById('custom-product-stock').value);
            const image = document.getElementById('custom-product-image').value;

            const width = parseFloat(document.getElementById('custom-width').value) || null;
            const height = parseFloat(document.getElementById('custom-height').value) || null;
            const note = document.getElementById('custom-note').value;

            // Calculate final price per item
            let unitPrice = price;

            const isManualPrice = !document.getElementById('manual-price-container').classList.contains('hidden');

            if (isManualPrice) {
                const manualPrice = parseFloat(document.getElementById('custom-manual-price').value);
                if (isNaN(manualPrice) || manualPrice < 0) {
                    alert('Harga tidak valid!');
                    return;
                }
                unitPrice = manualPrice;
            } else if (width && height) {
                // Pricing based on dimension
                unitPrice = price * (width * height);
            }

            cart.push({
                id,
                cart_key: `${id}-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
                name,
                price: unitPrice,
                base_price: unitPrice,
                stock,
                image,
                quantity: 1,
                type: 'custom',
                wholesale_prices: [],
                applied_wholesale_tier: null,
                is_discount_eligible: false,
                order_number: '',
                shopee_admin_fee_percent: 0,
                custom_width: width,
                custom_height: height,
                note: note
            });

            updateCartDisplay();
            closeCustomModal();

            document.getElementById('product-search').value = '';
            document.getElementById('product-search').focus();
        }

        function updateCartDisplay() {
            const container = document.getElementById('cart-items-container');
            const checkoutButton = document.getElementById('checkout-button');
            const breakdown = calculateCartBreakdown();
            if (cart.length === 0) {
                container.innerHTML = `<div class="text-center text-gray-500 py-8"><svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.5 1.5M7 13l1.5 1.5M17 21a2 2 0 100-4 2 2 0 000 4zM9 21a2 2 0 100-4 2 2 0 000 4z"></path></svg>Keranjang kosong</div>`;
                checkoutButton.disabled = true;
            } else {
                container.innerHTML = breakdown.items.map((item, index) => `
                                                                                                                        <div class="mb-3 rounded-2xl border border-gray-200 bg-gradient-to-br from-white to-gray-50 p-3 shadow-sm">
                                                                                                                            <div class="flex items-start gap-2.5">
                                                                                                                                <div class="mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-100">
                                                                                                                                    ${item.image ? `<img src="/storage/${item.image}" alt="${item.name}" class="h-full w-full object-cover">` : `<span class="text-xs">📦</span>`}
                                                                                                                                </div>
                                                                                                                                <div class="min-w-0 flex-1">
                                                                                                                                    <div class="flex items-start justify-between gap-2">
                                                                                                                                        <div class="min-w-0">
                                                                                                                                            <div class="break-words text-[13px] font-semibold leading-tight text-gray-900">${item.name}</div>
                                                                                                                                            <div class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] text-gray-500">
                                                                                                                                                <span>${formatRupiah(item.price)}</span>
                                                                                                                                                ${item.applied_wholesale_tier ? `<span class="rounded-full bg-teal-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-teal-700">Grosir ${item.applied_wholesale_tier}+</span>` : ''}
                                                                                                                                            </div>
                                                                                                                                            ${item.applied_wholesale_tier && Number(item.base_price || 0) !== Number(item.price || 0) ? `<div class="mt-0.5 text-[10px] text-gray-400 line-through">${formatRupiah(item.base_price)}</div>` : ''}
                                                                                                                                        </div>
                                                                                                                                        <button onclick="removeFromCart(${index})" class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md bg-red-500 text-[10px] font-bold text-white hover:bg-red-600">×</button>
                                                                                                                                    </div>
                                                                                                                                    ${item.custom_width ? `<div class="mt-1.5 text-[10px] text-blue-600">Dimensi: ${item.custom_width}x${item.custom_height}m</div>` : ''}
                                                                                                                                    ${item.note ? `<div class="mt-1 text-[10px] italic text-gray-500">"${item.note}"</div>` : ''}
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                            ${storeMode === 'marketplace' ? `
                                                                                                                            <div class="mt-2 grid grid-cols-1 gap-1.5">
                                                                                                                                <div>
                                                                                                                                    <label class="mb-1 block text-[9px] font-semibold uppercase tracking-wide text-gray-400">No Pesanan</label>
                                                                                                                                    <input type="text"
                                                                                                                                           value="${sanitizeText(item.order_number || '')}"
                                                                                                                                           oninput="updateItemOrderNumber(${index}, this.value)"
                                                                                                                                          placeholder="Contoh: 24000123456789"
                                                                                                                                          class="w-full rounded-md border-gray-200 px-2 py-1 text-[11px] focus:ring-indigo-500 focus:border-indigo-500">
                                                                                                                                </div>
                                                                                                                                ${(document.getElementById('marketplace-tax-mode')?.value || 'global') === 'item' ? `
                                                                                                                                <div>
                                                                                                                                    <label class="mb-1 block text-[9px] font-semibold uppercase tracking-wide text-gray-400">Pajak Marketplace (%)</label>
                                                                                                                                    <div class="flex items-center gap-2">
                                                                                                                                        <input type="number"
                                                                                                                                           value="${Number(item.shopee_admin_fee_percent || 0)}"
                                                                                                                                           min="0"
                                                                                                                                           max="100"
                                                                                                                                           step="0.01"
                                                                                                                                           oninput="updateItemShopeeAdminFeePercent(${index}, this.value)"
                                                                                                                                           class="w-20 rounded-md border-gray-200 px-2 py-1 text-[11px] focus:ring-indigo-500 focus:border-indigo-500">
                                                                                                                                        <div id="item-marketplace-fee-${index}" class="text-[10px] text-orange-600">Pajak: ${formatRupiah(getItemShopeeAdminFee(item))}</div>
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                                ` : ''}
                                                                                                                            </div>
                                                                                                                            ` : ''}
                                                                                                                            <div class="mt-2 flex items-end justify-between gap-3">
                                                                                                                                <div class="min-w-0">
                                                                                                                                    ${Number(item.discount_amount || 0) > 0 ? `<div class="mb-2 text-[10px] font-medium text-emerald-700">Diskon otomatis: -${formatRupiah(item.discount_amount || 0)}</div>` : `<div class="mb-2 text-[10px] text-gray-400">Tidak ada diskon otomatis</div>`}
                                                                                                                                    <div class="mb-1 text-[9px] font-semibold uppercase tracking-wide text-gray-400">Jumlah</div>
                                                                                                                                    <div class="flex items-center justify-start">
                                                                                                                                        <div class="flex items-center rounded-md border border-gray-200 bg-gray-50 p-0.5">
                                                                                                                                            <button onclick="decreaseQuantity(${index})" class="flex h-7 w-7 items-center justify-center rounded bg-white text-sm font-bold text-gray-600 hover:bg-gray-100">-</button>
                                                                                                                                            <input type="number" 
                                                                                                                                                   value="${item.quantity}" 
                                                                                                                                                   min="1" 
                                                                                                                                                   ${item.type !== 'service' ? `max="${item.stock}"` : ''}
                                                                                                                                                   onchange="updateItemQuantity(${index}, this.value)"
                                                                                                                                                   class="mx-1 w-8 border-0 bg-transparent p-0 text-center text-xs font-semibold text-gray-900 focus:ring-0">
                                                                                                                                            <button onclick="increaseQuantity(${index})" class="flex h-7 w-7 items-center justify-center rounded bg-teal-600 text-sm font-bold text-white hover:bg-teal-700">+</button>
                                                                                                                                        </div>
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                                <div class="min-w-0 rounded-md border border-emerald-100 bg-emerald-50 px-2 py-1 text-right">
                                                                                                                                    <div class="text-[9px] uppercase tracking-wide text-emerald-600">Nominal</div>
                                                                                                                                    <div id="item-net-total-${index}" class="text-[13px] font-bold leading-tight text-emerald-800">${formatRupiah(getItemGrossSubtotal(item))}</div>
                                                                                                                               </div>
                                                                                                                           </div>
                                                                                                                        </div>
                                                                                                                    `).join('');
                checkoutButton.disabled = false;
            }
            updateCartTotals();
        }

        function updateItemOrderNumber(index, value) {
            const item = cart[index];
            if (!item) return;

            item.order_number = value;
        }

        function updateItemShopeeAdminFeePercent(index, value) {
            const item = cart[index];
            if (!item) return;

            let percent = parseFloat(value);
            if (isNaN(percent) || percent < 0) percent = 0;
            if (percent > 100) percent = 100;

            item.shopee_admin_fee_percent = percent;

            const feeEl = document.getElementById(`item-marketplace-fee-${index}`);
            const netTotalEl = document.getElementById(`item-net-total-${index}`);

            if (feeEl) {
                feeEl.textContent = `Pajak: ${formatRupiah(getItemShopeeAdminFee(item))}`;
            }

            if (netTotalEl) {
                netTotalEl.textContent = formatRupiah(getItemGrossSubtotal(item));
            }

            updateCartTotals();
        }

        function increaseQuantity(index) {
            const item = cart[index];
            if (!item) return;

            if (item.type === 'service' || item.quantity < item.stock) {
                item.quantity++;
                syncCartItemPricing(item);
                updateCartDisplay();
            } else {
                alert('Stok tidak mencukupi!');
            }
        }

        function decreaseQuantity(index) {
            const item = cart[index];
            if (!item) return;

            if (item.quantity > 1) {
                item.quantity--;
                syncCartItemPricing(item);
                updateCartDisplay();
            } else {
                removeFromCart(index);
            }
        }

        function updateItemQuantity(index, value) {
            const item = cart[index];
            if (!item) return;

            let newQty = parseInt(value);
            if (isNaN(newQty) || newQty < 1) newQty = 1;

            if (item.type === 'service' || newQty <= item.stock) {
                item.quantity = newQty;
                syncCartItemPricing(item);
                updateCartDisplay();
            } else {
                alert(`Stok tidak mencukupi! Stok tersedia: ${item.stock}`);
                updateCartDisplay();
            }
        }

        function removeFromCart(index) {
            cart.splice(index, 1);
            updateCartDisplay();
        }

        function updateCartTotals() {
            const breakdown = calculateCartBreakdown();
            const marketplacePrefix = breakdown.marketplaceBurden === 'customer' ? '+' : '-';
            const ppnPrefix = breakdown.ppnBurden === 'customer' ? '+' : '-';

            document.getElementById('subtotal').textContent = formatRupiah(breakdown.grossSubtotal);
            document.getElementById('display-marketplace-tax').textContent = `${marketplacePrefix}${formatRupiah(breakdown.marketplaceTaxAmount)}`;
            document.getElementById('display-discount').textContent = `- ${formatRupiah(breakdown.discount)}`;
            document.getElementById('display-ppn-tax').textContent = `${ppnPrefix}${formatRupiah(breakdown.ppnTaxAmount)}`;
            document.getElementById('display-tax').textContent = `+ ${formatRupiah(breakdown.tax)}`;
            document.getElementById('total').textContent = formatRupiah(breakdown.total);

            // Simpan total ke dataset agar mudah diambil
            document.getElementById('total').dataset.value = breakdown.total;
        }

        function clearCart() {
            if (confirm('Anda yakin ingin mereset keranjang?')) {
                cart = [];
                updateCartDisplay();
            }
        }

        // === EVENT HANDLERS & FILTERS ===
        async function changePage(url) {
            if (!url) {
                return; // Hentikan jika URL tidak valid
            }

            // Ambil nomor halaman dari URL yang diklik
            const pageNumber = new URL(url).searchParams.get('page');

            if (!pageNumber) {
                return; // Hentikan jika tidak ada nomor halaman
            }

            // Update variabel halaman saat ini
            currentPage = pageNumber;

            // Panggil fungsi untuk memuat produk dari halaman yang baru
            await loadProducts();
        }

        function filterByCategory(category, element) {
            document.querySelectorAll('.category-tab').forEach(tab => {
                tab.classList.remove('active', 'text-white', 'bg-indigo-600', 'border-indigo-600');
                tab.classList.add('text-gray-500', 'border-transparent');
            });
            element.classList.add('active', 'text-white', 'bg-indigo-600', 'border-indigo-600');
            element.classList.remove('text-gray-500', 'border-transparent');
            currentCategory = category;
            currentPage = 1;
            loadProducts();
        }

        function changePerPage(newPerPage) {
            perPage = parseInt(newPerPage);
            currentPage = 1;
            loadProducts();
        }

        // === MODAL & TRANSACTION LOGIC ===
        function openPaymentModal() {
            if (cart.length === 0) return;

            // Ambil total yang sudah dihitung di updateCartTotals
            const total = parseFloat(document.getElementById('total').dataset.value) || 0;

            document.getElementById('modal-total').textContent = formatRupiah(total);
            document.getElementById('amount-paid').value = total;
            updateModalPayment();
            setOrderType('sale');
            document.getElementById('payment-modal').classList.remove('hidden');
            document.getElementById('amount-paid').focus();
        }

        function closePaymentModal() {
            document.getElementById('payment-modal').classList.add('hidden');
        }

        function setQuickAmount(amount) {
            document.getElementById('amount-paid').value = amount;
            updateModalPayment();
        }

        function passExactAmount() {
            const total = parseFloat(document.getElementById('total').dataset.value) || 0;
            document.getElementById('amount-paid').value = total;
            updateModalPayment();
        }

        function toggleExtraFields() {
            const container = document.getElementById('extra-fields-container');
            const icon = document.getElementById('extra-fields-icon');
            container.classList.toggle('hidden');
            if (container.classList.contains('hidden')) {
                icon.textContent = '▶';
            } else {
                icon.textContent = '▼';
            }
        }

        function updateModalPayment() {
            const total = parseFloat(document.getElementById('total').dataset.value) || 0;
            const amount = parseFloat(document.getElementById('amount-paid').value) || 0;
            const changeLabel = document.getElementById('change-label');
            const changeContainer = document.getElementById('change-container');
            const modalChange = document.getElementById('modal-change');
            const modalChangeLabel = document.getElementById('change-label');

            if (amount >= total) {
                const change = amount - total;
                modalChange.textContent = formatRupiah(change);
                changeLabel.textContent = 'Kembalian';

                // Cleaner style for valid payment (Solid White)
                changeContainer.classList.remove('bg-red-500', 'border-red-300');
                changeContainer.classList.add('bg-white', 'border-transparent');

                modalChange.classList.remove('text-white');
                modalChange.classList.add('text-indigo-900');

                modalChangeLabel.classList.remove('text-white');
                modalChangeLabel.classList.add('text-indigo-900');
            } else {
                const remaining = total - amount;
                modalChange.textContent = formatRupiah(remaining);
                changeLabel.textContent = 'Kurang';

                // Red warning style for shortage
                changeContainer.classList.remove('bg-white', 'border-transparent');
                changeContainer.classList.add('bg-red-500', 'border-red-300');

                modalChange.classList.remove('text-indigo-900');
                modalChange.classList.add('text-white');

                modalChangeLabel.classList.remove('text-indigo-900');
                modalChangeLabel.classList.add('text-white');
            }
        }

        async function processTransaction() {
            // Recalculate everything for safety
            const breakdown = calculateCartBreakdown();
            const total = breakdown.total;

            const amountPaid = parseFloat(document.getElementById('amount-paid').value) || 0;
            const paymentMethod = document.getElementById('payment-method').value;

            if (cart.length === 0) return alert('Keranjang kosong!');
            if (!paymentMethod) return alert('Pilih metode pembayaran!');

            // Logic Pembayaran Parsial / DP
            if (paymentMethod !== 'utang') {
                if (amountPaid <= 0) return alert('Nominal bayar harus diisi!');
                if (amountPaid < total) {
                    if (!confirm('Pembayaran kurang dari total. Lanjutkan sebagai Uang Muka (DP) / Hutang?')) {
                        return;
                    }
                }
            }

            // Online Store Validation
            if (storeMode === 'online') {
                const recipientName = document.getElementById('recipient-name').value.trim();
                const recipientPhone = document.getElementById('recipient-phone').value.trim();
                const recipientAddress = document.getElementById('recipient-address').value.trim();
                if (!recipientName) return alert('Nama penerima wajib diisi untuk pengiriman online!');
                if (!recipientPhone) return alert('No. HP penerima wajib diisi!');
                if (!recipientAddress) return alert('Alamat penerima wajib diisi!');
            }

            if (orderType === 'booking') {
                const bookerName = document.getElementById('booker-name')?.value?.trim() || '';
                if (!bookerName) return alert('Nama booking wajib diisi!');
            }

            const bookerName = document.getElementById('booker-name')?.value?.trim() || '';
            const bookerPhone = document.getElementById('booker-phone')?.value?.trim() || '';
            const bookingDate = document.getElementById('booking-date')?.value || null;
            const customerName = orderType === 'booking'
                ? (bookerName || document.getElementById('customer-name').value || 'Umum')
                : (document.getElementById('customer-name').value || 'Umum');

            const transactionData = {
                items: cart.map(item => ({
                    product_id: item.id,
                    quantity: item.quantity,
                    price: item.price,
                    order_number: item.order_number || null,
                    shopee_admin_fee_percent: Number(
                        breakdown.marketplaceMode === 'item' && storeMode === 'marketplace'
                            ? item.shopee_admin_fee_percent || 0
                            : 0
                    ),
                    custom_width: item.custom_width,
                    custom_height: item.custom_height,
                    note: item.note
                })),
                order_type: orderType,
                payment_method: paymentMethod,
                amount_paid: amountPaid,
                customer_name: customerName,
                booker_name: orderType === 'booking' ? bookerName : null,
                booker_phone: orderType === 'booking' ? (bookerPhone || null) : null,
                booking_date: orderType === 'booking' ? bookingDate : null,
                booking_status: orderType === 'booking' ? 'confirmed' : null,
                discount: breakdown.discount,
                promo_name: breakdown.promoName || null,
                voucher_code: breakdown.voucherCode || null,
                promo_discount_type: breakdown.promoDiscountType,
                promo_discount_value: breakdown.promoDiscountValue,
                tax: breakdown.tax,
                ppn_tax_rate: breakdown.ppnRate,
                ppn_tax_burden: breakdown.ppnBurden,
                marketplace_tax_mode: breakdown.marketplaceMode,
                marketplace_tax_rate: breakdown.marketplaceRate,
                marketplace_tax_burden: breakdown.marketplaceBurden,
                subtotal: breakdown.grossSubtotal,
                shopee_admin_total: breakdown.marketplaceTaxAmount,
                note: document.getElementById('transaction-note').value,
                transaction_date: document.getElementById('transaction-date') ? document.getElementById('transaction-date').value : null,
                due_date: document.getElementById('due-date') ? document.getElementById('due-date').value : null,
                // Online Store / Shipping
                store_type: getPayloadStoreType(),
                recipient_name: storeMode === 'online' ? (document.getElementById('recipient-name')?.value || null) : null,
                recipient_phone: storeMode === 'online' ? (document.getElementById('recipient-phone')?.value || null) : null,
                recipient_address: storeMode === 'online' ? (document.getElementById('recipient-address')?.value || null) : null,
                recipient_city: storeMode === 'online' ? (document.getElementById('recipient-city')?.value || null) : null,
                recipient_postal_code: storeMode === 'online' ? (document.getElementById('recipient-postal')?.value || null) : null,
                shipping_courier: storeMode === 'online' ? (document.getElementById('shipping-courier')?.value || null) : null,
            };

            try {
                const response = await fetch('/pos/transaction', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(transactionData)
                });
                const result = await response.json();
                if (response.ok && result.success) {
                    closePaymentModal();
                    showSuccessModal(result.transaction);
                } else {
                    alert(result.message || 'Transaksi gagal!');
                }
            } catch (error) {
                console.error('Transaction error:', error);
                alert('Terjadi kesalahan saat memproses transaksi.');
            }
        }

        function showSuccessModal(transaction) {
            window.currentTransaction = transaction;
            document.getElementById('transaction-id').textContent = transaction.transaction_code;
            document.getElementById('success-total').textContent = formatRupiah(transaction.total_amount);
            document.getElementById('success-change').textContent = formatRupiah(transaction.change_amount);
            document.getElementById('success-modal').classList.remove('hidden');
            startCountdownTimer();
        }

        function closeSuccessModal() {
            if (countdownInterval) clearInterval(countdownInterval);
            document.getElementById('success-modal').classList.add('hidden');
            cart = [];
            updateCartDisplay();
            loadProducts();
        }

        function startCountdownTimer() {
            let timeLeft = 10;
            const countdownEl = document.getElementById('countdown-timer');
            countdownEl.textContent = timeLeft;
            if (countdownInterval) clearInterval(countdownInterval);
            countdownInterval = setInterval(() => {
                timeLeft--;
                countdownEl.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(countdownInterval);
                    closeSuccessModal();
                }
            }, 1000);
        }

        // === PRINTING LOGIC ===
        async function printReceipt() {
            if (!window.currentTransaction) return alert('Data transaksi tidak ditemukan!');
            try {
                if (!navigator.bluetooth) throw new Error('Web Bluetooth tidak didukung di browser ini.');
                await printReceiptToBluetooth();
            } catch (error) {
                console.error('Print error:', error);
                if (confirm('Gagal terhubung ke printer Bluetooth. Cetak menggunakan printer browser?')) {
                    printReceiptToBrowser();
                }
            }
        }

        async function printReceiptToBluetooth() {
            try {
                // [FIX] Menggunakan acceptAllDevices: true untuk mempermudah menemukan printer.
                const device = await navigator.bluetooth.requestDevice({
                    acceptAllDevices: true,
                    optionalServices: ['000018f0-0000-1000-8000-00805f9b34fb'] // Generic printer service UUID
                });
                const server = await device.gatt.connect();
                const service = await server.getPrimaryService('000018f0-0000-1000-8000-00805f9b34fb');
                const characteristic = await service.getCharacteristic('00002af1-0000-1000-8000-00805f9b34fb'); // Generic write characteristic
                const receiptData = generateThermalReceiptData();
                await writeThermalPrinterData(characteristic, receiptData);
                alert('Struk berhasil dikirim ke printer!');
            } catch (error) {
                console.error('Bluetooth print error:', error);
                throw error;
            }
        }

        async function writeThermalPrinterData(characteristic, data) {
            const chunkSize = 96;
            for (let offset = 0; offset < data.length; offset += chunkSize) {
                const chunk = data.slice(offset, offset + chunkSize);
                if (typeof characteristic.writeValueWithoutResponse === 'function') {
                    await characteristic.writeValueWithoutResponse(chunk);
                } else {
                    await characteristic.writeValue(chunk);
                }
                await new Promise(resolve => setTimeout(resolve, 45));
            }
        }

        function receiptText(value) {
            return String(value ?? '')
                .normalize('NFKD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/[^\x20-\x7E\n]/g, '')
                .replace(/[ \t]+/g, ' ')
                .trim();
        }

        function receiptLine(char = '-', columns = 32) {
            return char.repeat(columns);
        }

        function centerReceiptText(text, columns = 32) {
            const clean = receiptText(text);
            if (clean.length >= columns) return clean;
            const left = Math.floor((columns - clean.length) / 2);
            return `${' '.repeat(left)}${clean}`;
        }

        function wrapReceiptText(text, columns = 32, indent = '') {
            const clean = receiptText(text);
            if (!clean) return [];
            const width = Math.max(8, columns - indent.length);
            const lines = [];
            clean.split(/\s+/).forEach(word => {
                if (word.length > width) {
                    while (word.length > width) {
                        if (!lines.length || lines[lines.length - 1] !== indent) {
                            lines.push(`${indent}${word.slice(0, width)}`);
                        } else {
                            lines[lines.length - 1] += word.slice(0, width);
                        }
                        word = word.slice(width);
                    }
                }

                const current = lines[lines.length - 1] || '';
                const currentText = current.slice(indent.length);
                if (!current || current.length + word.length + 1 > columns) {
                    lines.push(`${indent}${word}`);
                } else {
                    lines[lines.length - 1] = `${indent}${currentText} ${word}`;
                }
            });
            return lines;
        }

        function formatReceiptPair(label, value, columns = 32) {
            const cleanLabel = receiptText(label);
            const cleanValue = receiptText(value);
            const prefix = `${cleanLabel}: `;
            if ((prefix + cleanValue).length <= columns) {
                return `${prefix}${cleanValue}`;
            }
            return [prefix.trim(), ...wrapReceiptText(cleanValue, columns, '  ')].join('\n');
        }

        function formatReceiptAmount(label, value, columns = 32) {
            const cleanLabel = receiptText(label);
            const cleanValue = receiptText(value);
            const space = columns - cleanLabel.length - cleanValue.length;
            if (space > 1) {
                return `${cleanLabel}${' '.repeat(space)}${cleanValue}`;
            }
            return `${cleanLabel}\n${cleanValue.padStart(columns)}`;
        }

        function getTransactionDate(transaction) {
            return transaction?.created_at ? new Date(transaction.created_at) : new Date();
        }

        function shouldShowReceiptDiscount(transaction) {
            return (FEATURE_FLAGS.discounts || FEATURE_FLAGS.vouchers) && (Number(transaction.discount) || 0) > 0;
        }

        function shouldShowReceiptMarketplace(transaction) {
            return FEATURE_FLAGS.marketplace
                && (transaction.store_type === 'marketplace' || (Number(transaction.marketplace_tax_amount) || 0) > 0);
        }

        function getReceiptDiscountLabel(transaction) {
            if (FEATURE_FLAGS.vouchers && transaction.voucher_code) {
                return `Voucher ${transaction.voucher_code}:`;
            }

            return 'Diskon:';
        }

        function getReceiptPaperWidthMm() {
            const saved = localStorage.getItem('adkReceiptPaperWidthMm');
            if (saved === '58') return 58;
            if (saved === '80') return 80;
            return 80;
        }

        function getThermalColumns(paperWidthMm) {
            return paperWidthMm === 58 ? 30 : 42;
        }

        function generateThermalReceiptData() {
            const tx = window.currentTransaction;
            const txDate = getTransactionDate(tx);
            const ESC = '\x1B', GS = '\x1D';
            const paperWidth = getReceiptPaperWidthMm();
            const columns = getThermalColumns(paperWidth);
            const paymentMethodLabels = {
                'cash': 'Tunai',
                'utang': 'UTANG',
                'card': 'Kartu',
                'ewallet': 'E-Wallet',
                'transfer': 'Transfer'
            };
            let receipt = '';
            receipt += ESC + '@'; // Initialize
            receipt += ESC + 't' + '\x00'; // Default code page.
            receipt += ESC + 'G' + '\x01'; // Double-strike ON (lebih gelap/jelas di sebagian besar printer thermal)
            receipt += ESC + 'a' + '\x01'; // Center align
            receipt += ESC + 'E' + '\x01'; // Bold on.
            wrapReceiptText(STORE_SETTINGS.store_name, columns).forEach(line => {
                receipt += `${centerReceiptText(line, columns)}\n`;
            });
            receipt += ESC + 'E' + '\x00'; // Bold off.
            receipt += ESC + '!' + '\x00'; // Normal size
            wrapReceiptText(STORE_SETTINGS.store_address, columns).forEach(line => {
                receipt += `${centerReceiptText(line, columns)}\n`;
            });
            if (STORE_SETTINGS.store_phone) {
                receipt += `${centerReceiptText(`Telp: ${STORE_SETTINGS.store_phone}`, columns)}\n`;
            }
            receipt += `${receiptLine('-', columns)}\n`;
            receipt += ESC + 'a' + '\x00'; // Left align
            receipt += `${formatReceiptPair('No', tx.transaction_code, columns)}\n`;
            receipt += `${formatReceiptPair('Tgl', txDate.toLocaleDateString('id-ID'), columns)}\n`;
            receipt += `${formatReceiptPair('Jam', txDate.toLocaleTimeString('id-ID'), columns)}\n`;
            receipt += `${formatReceiptPair('Kasir', AUTH_USER.name, columns)}\n`;
            if (tx.customer_name && tx.customer_name !== 'Umum') {
                receipt += `${formatReceiptPair('Customer', tx.customer_name, columns)}\n`;
            }
            receipt += `${receiptLine('-', columns)}\n`;
            tx.items.forEach(item => {
                wrapReceiptText(item.product.name, columns).forEach(line => {
                    receipt += `${line}\n`;
                });
                if (shouldShowReceiptMarketplace(tx) && item.order_number) {
                    receipt += `${formatReceiptPair('  Pesanan', item.order_number, columns)}\n`;
                }
                if (item.custom_width && item.custom_height) {
                    receipt += `${formatReceiptPair('  Dimensi', `${item.custom_width}x${item.custom_height}m`, columns)}\n`;
                }
                if (item.note) {
                    wrapReceiptText(`Note: ${item.note}`, columns, '  ').forEach(line => {
                        receipt += `${line}\n`;
                    });
                }
                if (shouldShowReceiptDiscount(tx) && (Number(item.discount_amount) || 0) > 0) {
                    wrapReceiptText(`Diskon: ${item.discount_percent}% (-${formatRupiah(item.discount_amount || 0)})`, columns, '  ').forEach(line => {
                        receipt += `${line}\n`;
                    });
                }
                if (shouldShowReceiptMarketplace(tx) && (Number(item.shopee_admin_fee_percent) || 0) > 0) {
                    wrapReceiptText(`Pajak Marketplace: ${item.shopee_admin_fee_percent}% (${formatRupiah(item.shopee_admin_fee_amount || 0)})`, columns, '  ').forEach(line => {
                        receipt += `${line}\n`;
                    });
                }
                receipt += `${formatReceiptAmount(`  ${item.quantity} x ${formatRupiah(item.price)}`, formatRupiah(item.subtotal), columns)}\n`;
                receipt += `${receiptLine('-', columns)}\n`;
            });
            receipt += ESC + 'a' + '\x02'; // Right align

            receipt += `${formatReceiptAmount('Jumlah Item:', tx.items.reduce((sum, item) => sum + item.quantity, 0), columns)}\n`;
            receipt += `${formatReceiptAmount('Subtotal:', formatRupiah(tx.subtotal), columns)}\n`;
            if (shouldShowReceiptDiscount(tx)) {
                receipt += `${formatReceiptAmount(getReceiptDiscountLabel(tx), `-${formatRupiah(tx.discount || 0)}`, columns)}\n`;
            }
            if (shouldShowReceiptMarketplace(tx)) {
                const marketplacePrefix = tx.marketplace_tax_burden === 'customer' ? '' : '-';
                receipt += `${formatReceiptAmount('Pajak Marketplace:', `${marketplacePrefix}${formatRupiah(tx.marketplace_tax_amount || 0)}`, columns)}\n`;
            }
            if ((Number(tx.ppn_tax_amount) || 0) > 0) {
                const ppnPrefix = tx.ppn_tax_burden === 'customer' ? '' : '-';
                receipt += `${formatReceiptAmount('PPN:', `${ppnPrefix}${formatRupiah(tx.ppn_tax_amount || 0)}`, columns)}\n`;
            }

            receipt += ESC + 'E' + '\x01'; // Bold on.
            receipt += `${receiptLine('-', columns)}\n`;
            receipt += ESC + '!' + '\x00'; // Keep normal width for better alignment on 58mm.
            receipt += `${formatReceiptAmount('Total:', formatRupiah(tx.total_amount), columns)}\n`;
            receipt += `${receiptLine('-', columns)}\n`;
            receipt += ESC + 'E' + '\x00'; // Bold off.
            receipt += `${formatReceiptAmount('Metode:', paymentMethodLabels[tx.payment_method] || tx.payment_method, columns)}\n`;

            receipt += `${formatReceiptAmount('Bayar:', formatRupiah(tx.amount_paid), columns)}\n`;

            if (tx.payment_status === 'paid') {
                receipt += `${formatReceiptAmount('Kembali:', formatRupiah(tx.change_amount), columns)}\n`;
            } else if (tx.payment_status === 'partial') {
                const remaining = tx.total_amount - tx.amount_paid;
                receipt += `${formatReceiptAmount('Sisa:', formatRupiah(remaining), columns)}\n`;
                receipt += `Status: DP / BELUM LUNAS\n`;
            } else {
                receipt += `Status: BELUM LUNAS\n`;
            }

            if (tx.due_date) {
                const dueDate = new Date(tx.due_date);
                receipt += `${formatReceiptPair('Jatuh Tempo', dueDate.toLocaleDateString('id-ID'), columns)}\n`;
            }

            receipt += ESC + 'a' + '\x01'; // Center align
            receipt += `${receiptLine('-', columns)}\n`;
            receipt += 'Terima kasih!\n';
            receipt += '\n\n';
            receipt += ESC + 'G' + '\x00'; // Double-strike OFF
            receipt += GS + 'V' + '\x41' + '\x03'; // Partial cut (most ESC/POS printers)
            receipt += GS + 'V' + '\x00'; // Full cut fallback for printers that expect this mode
            return new TextEncoder().encode(receipt);
        }

        function escapeReceiptHTML(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function receiptRowHTML(label, value, className = '') {
            return `
                <div class="thermal-receipt__row ${className}">
                    <span class="thermal-receipt__label">${escapeReceiptHTML(label)}</span>
                    <span class="thermal-receipt__value">${escapeReceiptHTML(value)}</span>
                </div>
            `;
        }

        function buildBrowserReceiptHTML(transaction) {
            const txDate = getTransactionDate(transaction);
            const paymentMethodLabels = {
                'cash': 'Tunai',
                'utang': 'UTANG',
                'card': 'Kartu',
                'ewallet': 'E-Wallet',
                'transfer': 'Transfer'
            };
            const itemRows = transaction.items.map(item => `
                    <div class="thermal-receipt__item">
                        <div class="thermal-receipt__item-name">${escapeReceiptHTML(item.product.name)}</div>
                        ${shouldShowReceiptMarketplace(transaction) && item.order_number ? `<div class="thermal-receipt__item-meta">Pesanan: ${escapeReceiptHTML(item.order_number)}</div>` : ''}
                        ${item.custom_width ? `<div class="thermal-receipt__item-meta">Dimensi: ${escapeReceiptHTML(item.custom_width)}x${escapeReceiptHTML(item.custom_height)}m</div>` : ''}
                        ${item.note ? `<div class="thermal-receipt__item-meta">Note: ${escapeReceiptHTML(item.note)}</div>` : ''}
                    ${shouldShowReceiptDiscount(transaction) && Number(item.discount_amount || 0) > 0 ? `<div class="thermal-receipt__item-meta">Diskon: ${escapeReceiptHTML(item.discount_percent)}% (-${escapeReceiptHTML(formatRupiah(item.discount_amount || 0))})</div>` : ''}
                    ${shouldShowReceiptMarketplace(transaction) && Number(item.shopee_admin_fee_percent || 0) > 0 ? `<div class="thermal-receipt__item-meta">Pajak Marketplace: ${escapeReceiptHTML(item.shopee_admin_fee_percent)}% (${escapeReceiptHTML(formatRupiah(item.shopee_admin_fee_amount || 0))})</div>` : ''}
                    ${receiptRowHTML(`${item.quantity} x ${formatRupiah(item.price)}`, formatRupiah(item.subtotal))}
                </div>
            `).join('');
            const discountRow = shouldShowReceiptDiscount(transaction)
                ? receiptRowHTML(getReceiptDiscountLabel(transaction), `-${formatRupiah(transaction.discount || 0)}`)
                : '';
            const marketplaceRow = shouldShowReceiptMarketplace(transaction)
                ? receiptRowHTML('Pajak Marketplace:', `${transaction.marketplace_tax_burden === 'customer' ? '' : '-'}${formatRupiah(transaction.marketplace_tax_amount || 0)}`)
                : '';
            const ppnRow = Number(transaction.ppn_tax_amount || 0) > 0
                ? receiptRowHTML('PPN:', `${transaction.ppn_tax_burden === 'customer' ? '' : '-'}${formatRupiah(transaction.ppn_tax_amount || 0)}`)
                : '';
            const receiptHTML = `
                <div class="thermal-receipt">
                    <div class="thermal-receipt__center">
                        <div class="thermal-receipt__store">${escapeReceiptHTML(STORE_SETTINGS.store_name)}</div>
                        <div class="thermal-receipt__small">${escapeReceiptHTML(STORE_SETTINGS.store_address)}</div>
                        ${STORE_SETTINGS.store_phone ? `<div class="thermal-receipt__small">Telp: ${escapeReceiptHTML(STORE_SETTINGS.store_phone)}</div>` : ''}
                    </div>

                    <div class="thermal-receipt__section"></div>

                    <div class="thermal-receipt__section-bottom">
                        ${receiptRowHTML('No', transaction.transaction_code)}
                        ${receiptRowHTML('Tgl', txDate.toLocaleDateString('id-ID'))}
                        ${receiptRowHTML('Jam', txDate.toLocaleTimeString('id-ID'))}
                        ${receiptRowHTML('Kasir', AUTH_USER.name)}
                        ${transaction.customer_name && transaction.customer_name !== 'Umum' ? receiptRowHTML('Customer', transaction.customer_name) : ''}
                    </div>

                    ${itemRows}

                    <div class="thermal-receipt__section"></div>

                    ${receiptRowHTML('Jumlah Item:', transaction.items.reduce((sum, item) => sum + item.quantity, 0))}
                    ${receiptRowHTML('Subtotal:', formatRupiah(transaction.subtotal))}
                    ${discountRow}
                    ${marketplaceRow}
                    ${ppnRow}
                    ${receiptRowHTML('Total:', formatRupiah(transaction.total_amount), 'thermal-receipt__total')}
                    ${receiptRowHTML('Metode:', paymentMethodLabels[transaction.payment_method] || transaction.payment_method)}
                    ${receiptRowHTML('Bayar:', formatRupiah(transaction.amount_paid))}

                    ${transaction.payment_status === 'paid' ? receiptRowHTML('Kembali:', formatRupiah(transaction.change_amount)) : ''}
                    ${transaction.payment_status === 'partial' ? receiptRowHTML('Sisa Tagihan:', formatRupiah(transaction.total_amount - transaction.amount_paid)) : ''}

                    ${transaction.payment_status !== 'paid' ? `
                        <div class="thermal-receipt__section"></div>
                        <div class="thermal-receipt__center thermal-receipt__total">
                            ${transaction.payment_status === 'partial' ? 'DP / BELUM LUNAS' : 'BELUM DIBAYAR'}
                        </div>
                        ${transaction.due_date ? `<div class="thermal-receipt__center thermal-receipt__small">Jatuh Tempo: ${escapeReceiptHTML(new Date(transaction.due_date).toLocaleDateString('id-ID'))}</div>` : ''}
                    ` : ''}

                    <div class="thermal-receipt__section"></div>

                    <div class="thermal-receipt__center">
                        <div>Terima kasih!</div>
                    </div>
                </div>
            `;
            return receiptHTML;
        }

        function getBrowserReceiptPrintDocument(receiptHTML) {
            return `<!doctype html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>Struk ADK-POS</title>
                    <style id="receipt-page-style">
                        @page { size: 80mm auto; margin: 0; }
                    </style>
                    <style>
                        :root {
                            --receipt-paper-width: 80mm;
                            --receipt-font-size: 14px;
                            --receipt-line-height: 1.32;
                            --receipt-store-size: 21px;
                            --receipt-small-size: 12.5px;
                            --receipt-row-gap: 8px;
                            --receipt-divider-space: 7px;
                            --receipt-total-size: 17px;
                        }

                        html,
                        body {
                            width: var(--receipt-paper-width);
                            min-width: var(--receipt-paper-width);
                            max-width: var(--receipt-paper-width);
                            margin: 0;
                            padding: 0;
                            overflow: visible;
                            background: #fff;
                            box-sizing: border-box;
                        }

                        .thermal-receipt {
                            box-sizing: border-box;
                            width: var(--receipt-paper-width);
                            min-width: var(--receipt-paper-width);
                            max-width: var(--receipt-paper-width);
                            padding: 0.8mm 2.2mm 0.4mm;
                            color: #000;
                            background: #fff;
                            font-family: "Courier New", Courier, monospace;
                            font-size: var(--receipt-font-size);
                            font-weight: 800;
                            line-height: var(--receipt-line-height);
                            letter-spacing: 0.05px;
                            margin: 0;
                            -webkit-print-color-adjust: exact;
                            print-color-adjust: exact;
                            break-inside: avoid;
                            page-break-inside: avoid;
                            text-rendering: geometricPrecision;
                        }

                        .thermal-receipt * {
                            box-sizing: border-box;
                        }

                        .thermal-receipt__center {
                            text-align: center;
                        }

                        .thermal-receipt__store {
                            font-size: var(--receipt-store-size);
                            font-weight: 900;
                            line-height: 1.12;
                            overflow-wrap: anywhere;
                            text-transform: uppercase;
                        }

                        .thermal-receipt__small {
                            font-size: var(--receipt-small-size);
                            font-weight: 800;
                            overflow-wrap: anywhere;
                        }

                        .thermal-receipt__divider {
                            border-top: 1px dashed #000;
                            margin: var(--receipt-divider-space) 0;
                        }

                        .thermal-receipt__section {
                            border-top: 1px dashed #000;
                            padding-top: var(--receipt-divider-space);
                            margin-top: var(--receipt-divider-space);
                        }

                        .thermal-receipt__section-bottom {
                            border-bottom: 1px dashed #000;
                            padding-bottom: var(--receipt-divider-space);
                            margin-bottom: var(--receipt-divider-space);
                        }

                        .thermal-receipt__row {
                            display: flex;
                            justify-content: space-between;
                            gap: var(--receipt-row-gap);
                            align-items: flex-start;
                        }

                        .thermal-receipt__label {
                            flex: 0 0 auto;
                        }

                        .thermal-receipt__value {
                            flex: 1 1 auto;
                            min-width: 0;
                            text-align: right;
                            overflow-wrap: anywhere;
                        }

                        .thermal-receipt__item {
                            border-bottom: 1px dashed #000;
                            margin-bottom: var(--receipt-divider-space);
                            padding-bottom: var(--receipt-divider-space);
                        }

                        .thermal-receipt__item-name {
                            font-weight: 900;
                            overflow-wrap: anywhere;
                        }

                        .thermal-receipt__item-meta {
                            font-size: 12px;
                            font-weight: 800;
                            overflow-wrap: anywhere;
                        }

                        .thermal-receipt__total {
                            border-top: 2px solid #000;
                            border-bottom: 2px solid #000;
                            font-size: var(--receipt-total-size);
                            font-weight: 900;
                            line-height: 1.35;
                            margin: 6px 0;
                            padding: 4px 0;
                        }
                    </style>
                </head>
                <body>
                    ${receiptHTML}
                    <script>
                        function getPaperWidthMm() {
                            const saved = localStorage.getItem('adkReceiptPaperWidthMm');
                            if (saved === '58') return 58;
                            if (saved === '80') return 80;
                            return 80;
                        }

                        function printWhenMeasured() {
                            const receipt = document.querySelector('.thermal-receipt');
                            const pageStyle = document.getElementById('receipt-page-style');

                            const paperWidth = getPaperWidthMm();
                            document.documentElement.style.setProperty('--receipt-paper-width', paperWidth + 'mm');
                            document.body.style.setProperty('--receipt-paper-width', paperWidth + 'mm');
                            if (paperWidth === 58) {
                                document.documentElement.style.setProperty('--receipt-font-size', '12px');
                                document.documentElement.style.setProperty('--receipt-line-height', '1.24');
                                document.documentElement.style.setProperty('--receipt-store-size', '17px');
                                document.documentElement.style.setProperty('--receipt-small-size', '10.5px');
                                document.documentElement.style.setProperty('--receipt-row-gap', '5px');
                                document.documentElement.style.setProperty('--receipt-divider-space', '5px');
                                document.documentElement.style.setProperty('--receipt-total-size', '14px');
                            } else {
                                document.documentElement.style.setProperty('--receipt-font-size', '14px');
                                document.documentElement.style.setProperty('--receipt-line-height', '1.32');
                                document.documentElement.style.setProperty('--receipt-store-size', '21px');
                                document.documentElement.style.setProperty('--receipt-small-size', '12.5px');
                                document.documentElement.style.setProperty('--receipt-row-gap', '8px');
                                document.documentElement.style.setProperty('--receipt-divider-space', '7px');
                                document.documentElement.style.setProperty('--receipt-total-size', '17px');
                            }

                            const heightPx = Math.ceil(Math.max(receipt.scrollHeight, receipt.offsetHeight, receipt.getBoundingClientRect().height));
                            const contentHeightMm = (heightPx * 25.4) / 96;
                            const heightMm = Math.max(12, Number((contentHeightMm + 0.8).toFixed(1)));

                            pageStyle.textContent = '@page { size: ' + paperWidth + 'mm ' + heightMm + 'mm; margin: 0; }';
                            document.documentElement.style.height = 'auto';
                            document.body.style.height = 'auto';

                            setTimeout(() => {
                                window.focus();
                                window.print();
                            }, 180);
                        }

                        window.addEventListener('load', printWhenMeasured);
                        window.addEventListener('afterprint', () => window.close());
                    <\/script>
                </body>
                </html>`;
        }

        function printReceiptToBrowser() {
            const transaction = window.currentTransaction;
            if (!transaction) return;

            const receiptHTML = buildBrowserReceiptHTML(transaction);
            const printWindow = window.open('', 'adk-pos-receipt-print', 'width=360,height=640');

            if (!printWindow) {
                alert('Popup print diblokir browser. Izinkan popup untuk mencetak struk.');
                return;
            }

            printWindow.document.open();
            printWindow.document.write(getBrowserReceiptPrintDocument(receiptHTML));
            printWindow.document.close();
            closeSuccessModal();
        }

        function printInvoiceA4() {
            if (!window.currentTransaction || !window.currentTransaction.id) {
                alert('Tidak ada data transaksi untuk dicetak.');
                return;
            }
            const printUrl = `/transactions/${window.currentTransaction.id}/print-invoice?t=${new Date().getTime()}`;
            window.open(printUrl, '_blank');
        }
    </script>
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
@endsection