<data:blog.pageTitle/>

Pengaturan Toko

Nama Toko

Alamat Toko

</div>
                                    <button class='w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded shadow' type='submit'>Simpan Pengaturan</button>
                                </form>
                            </div>
                        </div>
                    </div>

<div class='page-section hidden' id='page-stok'>
                        <h2 class='text-xl md:text-2xl font-bold text-gray-800 mb-4 md:mb-6'>Tambah Stok Barang</h2>
                        <div class='bg-white rounded-lg shadow-sm overflow-hidden w-full max-w-2xl p-4 md:p-6'>
                            <div class='mb-4 md:mb-6'>
                                <label class='block text-sm md:text-base font-bold text-gray-700 mb-2'>Scan Barcode / Masukkan ID</label>
                                <div class='flex gap-2'>
                                    <div class='relative flex-1 min-w-0'>
                                        <i class='fas fa-barcode absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'/>
                                        <input class='w-full pl-9 pr-3 py-2 md:py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-mono text-sm md:text-lg' id='stok-search-input' onkeypress='if(event.key === 'Enter') searchProductForStock()' placeholder='ID Barang...' type='text'/>
                                    </div>
                                    <button class='bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 md:px-4 py-2 md:py-3 rounded-lg shadow font-bold text-sm md:text-base shrink-0' onclick='searchProductForStock()' type='button'>Cari</button>
                                    <button class='bg-blue-600 hover:bg-blue-700 text-white px-3 md:px-4 py-2 md:py-3 rounded-lg shadow flex items-center justify-center shrink-0' onclick='openScanner('stok')' title='Scan Barcode' type='button'>
                                        <i class='fas fa-qrcode text-lg md:text-xl'/>
                                    </button>
                                </div>
                            </div>

<form id='form-tambah-stok' onsubmit='submitAddStock(event)'>
                                    <input id='stok-product-id' type='hidden'/>
                                    <div class='mb-4 md:mb-6'>
                                        <label class='block text-sm md:text-base font-bold text-gray-700 mb-2'>Jumlah Stok Masuk</label>
                                        <input class='w-full px-4 py-2 md:py-3 border-2 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-lg md:text-xl font-bold' id='stok-add-qty' min='1' placeholder='Misal: 50' required='required' type='number'/>
                                    </div>
                                    <button class='w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg shadow-md transition-colors text-base md:text-lg' type='submit'>
                                        <i class='fas fa-save mr-2'/> Update Stok
                                    </button>
                                </form>
                            </div>
                            
                            <div class='hidden border-t pt-4 md:pt-6 mt-2 text-center text-red-500 py-4' id='stok-not-found'>
                                <i class='fas fa-exclamation-triangle text-2xl md:text-3xl mb-2'/>
                                <p class='font-bold text-sm md:text-base'>Barang tidak ditemukan!</p>
                            </div>
                        </div>
                    </div>

</div>
            </main>
        </div>

<div class='fixed inset-0 bg-black/60 z-50 hidden flex justify-center items-center p-4' id='modal-payment'>
            <div class='bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden transform scale-95 transition-transform duration-300' id='modal-payment-content'>
                <div class='bg-blue-600 p-4 text-white flex justify-between items-center'>
                    <h3 class='font-bold text-lg'><i class='fas fa-money-bill-wave mr-2'/>Pembayaran</h3>
                    <button class='text-white hover:text-gray-200' onclick='closePaymentModal()'><i class='fas fa-times text-xl'/></button>
                </div>
                <div class='p-5 md:p-6'>
                    <div class='text-center mb-4 md:mb-6'>
                        <p class='text-xs md:text-sm text-gray-500 mb-1'>Total Tagihan</p>
                        <h2 class='text-3xl md:text-4xl font-bold text-gray-800 break-words' id='pay-total'>Rp 0</h2>
                    </div>
                    <div class='mb-4'>
                        <label class='block text-gray-700 text-xs md:text-sm font-bold mb-2'>Uang Diterima (Rp)</label>
                        <input class='w-full text-xl md:text-2xl font-bold px-3 py-2 border-2 rounded focus:outline-none focus:border-blue-500 text-right' id='pay-cash' oninput='calculateChange()' placeholder='0' type='number'/>
                    </div>
                    <div class='mb-4 md:mb-6 bg-gray-50 p-3 md:p-4 rounded border'>
                        <p class='text-xs md:text-sm text-gray-500 flex justify-between items-center'>Kembalian: <span class='text-lg md:text-xl font-bold text-green-600 break-words max-w-[60%] text-right' id='pay-change'>Rp 0</span></p>
                    </div>
                    <button class='w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg shadow transition-colors disabled:opacity-50 disabled:cursor-not-allowed' disabled='disabled' id='btn-process-pay' onclick='processCheckout()'>
                        Selesaikan Transaksi
                    </button>
                </div>
            </div>
        </div>

<div class='fixed inset-0 bg-black/60 z-50 hidden flex justify-center items-center p-4' id='modal-receipt'>
            <div class='bg-white rounded shadow-2xl w-full max-w-sm flex flex-col max-h-[90vh] overflow-hidden'>
                <div class='p-4 md:p-6 overflow-y-auto hide-scroll flex-1 text-[10px] md:text-xs font-mono' id='receipt-content'>
                    <div class='text-center mb-4'>
                        <h2 class='text-sm md:text-base font-bold break-words' id='receipt-store-name'>TOKOKU POS</h2>
                        <p class='break-words' id='receipt-store-address'>Jl. Contoh Alamat No. 123</p>
                        <p>================================</p>
                    </div>
                    <div class='mb-2'>
                        <p>No: <span class='break-all' id='receipt-id'/></p>
                        <p>Tgl: <span id='receipt-date'/></p>
                        <p>Kasir: <span class='break-words' id='receipt-cashier'/></p>
                    </div>
                    <p class='mb-2'>--------------------------------</p>
                    <div class='mb-2' id='receipt-items'/>
                    <p class='mb-2'>--------------------------------</p>
                    <div class='flex justify-between font-bold gap-2'>
                        <span>Total:</span>
                        <span class='break-words text-right' id='receipt-total'/>
                    </div>
                    <div class='flex justify-between gap-2'>
                        <span>Tunai:</span>
                        <span class='break-words text-right' id='receipt-cash'/>
                    </div>
                    <div class='flex justify-between gap-2'>
                        <span>Kembali:</span>
                        <span class='break-words text-right' id='receipt-change'/>
                    </div>
                    <p class='mt-4 text-center'>================================</p>
                    <p class='text-center'>Terima kasih atas kunjungan Anda</p>
                </div>
                <div class='p-3 md:p-4 border-t flex justify-between bg-gray-50 shrink-0'>
                    <button class='px-3 py-2 bg-gray-300 hover:bg-gray-400 rounded text-gray-800 font-bold text-xs md:text-sm' onclick='closeReceiptModal()'>Tutup</button>
                    <div class='flex gap-2'>
                        <button class='px-3 py-2 bg-red-500 hover:bg-red-600 rounded text-white font-bold text-xs md:text-sm' onclick='downloadPDF()'><i class='fas fa-file-pdf mr-1'/>PDF</button>
                        <button class='px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white font-bold text-xs md:text-sm' onclick='printReceipt()'><i class='fas fa-print mr-1'/>Cetak</button>
                    </div>
                </div>
            </div>
        </div>

<div class='fixed inset-0 bg-black/60 z-50 hidden flex justify-center items-center p-4' id='modal-product'>
            <div class='bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden max-h-[90vh] flex flex-col'>
                <div class='bg-blue-600 p-4 text-white flex justify-between items-center shrink-0'>
                    <h3 class='font-bold text-base md:text-lg' id='modal-product-title'>Tambah Produk</h3>
                    <button class='text-white hover:text-gray-200' onclick='closeProductModal()'><i class='fas fa-times text-xl'/></button>
                </div>
                <div class='p-4 md:p-6 overflow-y-auto'>
                    <form id='form-product' onsubmit='saveProduct(event)'>
                        <input id='prod-id' type='hidden'/>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>ID Barang (Barcode)</label>
                            <div class='flex gap-2'>
                                <input class='w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none text-sm' id='prod-sku' required='required' type='text'/>
                                <button class='bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded shadow flex items-center justify-center shrink-0' onclick='openScanner('product')' title='Scan Barcode' type='button'>
                                    <i class='fas fa-qrcode'/>
                                </button>
                            </div>
                        </div>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Nama Produk</label>
                            <input class='w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none text-sm' id='prod-name' required='required' type='text'/>
                        </div>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Harga Jual (Rp)</label>
                            <input class='w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none text-sm' id='prod-price' required='required' type='number'/>
                        </div>
                        <div class='mb-4'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Stok Awal</label>
                            <input class='w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none text-sm' id='prod-stock' required='required' type='number'/>
                        </div>
                        <button class='w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded shadow text-sm md:text-base' type='submit'>Simpan Produk</button>
                    </form>
                </div>
            </div>
        </div>

<div class='fixed inset-0 bg-black/60 z-50 hidden flex justify-center items-center p-4' id='modal-user'>
            <div class='bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden max-h-[90vh] flex flex-col'>
                <div class='bg-blue-600 p-4 text-white flex justify-between items-center shrink-0'>
                    <h3 class='font-bold text-base md:text-lg' id='modal-user-title'>Tambah Pengguna</h3>
                    <button class='text-white hover:text-gray-200' onclick='closeUserModal()'><i class='fas fa-times text-xl'/></button>
                </div>
                <div class='p-4 md:p-6 overflow-y-auto'>
                    <form id='form-user' onsubmit='saveUser(event)'>
                        <input id='user-id-form' type='hidden'/>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Username (Login)</label>
                            <input class='w-full px-3 py-2 border rounded outline-none text-sm' id='u-username' required='required' type='text'/>
                        </div>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Password</label>
                            <input class='w-full px-3 py-2 border rounded outline-none text-sm' id='u-password' placeholder='Minimal 6 karakter' required='required' type='text'/>
                        </div>
                        <div class='mb-3'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Nama Lengkap</label>
                            <input class='w-full px-3 py-2 border rounded outline-none text-sm' id='u-fullname' required='required' type='text'/>
                        </div>
                        <div class='mb-4'>
                            <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Hak Akses</label>
                            <select class='w-full px-3 py-2 border rounded outline-none bg-white text-sm' id='u-role'>
                                <option value='Kasir'>Kasir</option>
                                <option value='Admin'>Admin</option>
                            </select>
                        </div>
                        <button class='w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded shadow text-sm md:text-base' type='submit'>Simpan Pengguna</button>
                    </form>
                </div>
            </div>
        </div>

<div class='fixed inset-0 bg-black/80 hidden flex justify-center items-center p-4' id='modal-scanner' style='z-index: 60;'>
            <div class='bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col max-h-[90vh]'>
                <div class='bg-gray-800 p-4 text-white flex justify-between items-center shrink-0'>
                    <h3 class='font-bold text-base md:text-lg'><i class='fas fa-qrcode mr-2'/>Scan Barcode</h3>
                    <button class='text-white hover:text-gray-300' onclick='closeScanner()'><i class='fas fa-times text-xl'/></button>
                </div>
                <div class='p-4 bg-gray-100 flex-1 overflow-y-auto'>
                    <div class='mb-3'>
                        <label class='block text-xs md:text-sm font-bold text-gray-700 mb-1'>Pilih Kamera:</label>
                        <select class='w-full px-3 py-2 border border-gray-300 rounded text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500' id='camera-select' onchange='switchCamera(this.value)'>
                            <option value=''>Mencari kamera...</option>
                        </select>
                    </div>
                    <div class='w-full min-h-[250px] md:min-h-[300px] bg-black flex items-center justify-center text-white text-sm rounded relative overflow-hidden' id='reader'>
                        Memuat kamera...
                    </div>
                    <p class='text-center text-xs md:text-sm text-gray-500 mt-4'>Arahkan kamera ke barcode barang.</p>
                </div>
            </div>
        </div>

</div>

<script>
        //<![CDATA[
        // ==========================================
        // KONFIGURASI APLIKASI
        // ==========================================
        const IS_PREVIEW = false; 
        
        // PASTE URL WEB APP GOOGLE APPS SCRIPT ANDA DI SINI (WAJIB)
        const GAS_URL = "https://script.google.com/macros/s/AKfycbygDY64vWQ3B-yag2i3a3Q56M04xpY0HFg1shYJ76PasuiXfx30Bw2HVQxuHU_wfw0/exec";
        // ==========================================

// STATE MANAGEMENT
        let currentUser = null;
        let cart = [];
        let dataProducts = [];
        let dataTransactions = [];
        let dataUsers = [];
        
        // KONFIGURASI TOKO
        let storeConfig = {
            namaToko: "TOKOKU POS",
            alamatToko: "Jl. Contoh Alamat No. 123"
        };
        
        const formatRupiah = (angka) => {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(angka);
        };
        const generateID = () => Math.random().toString(36).substr(2, 9);
        const getTanggalJam = () => {
            const d = new Date();
            return d.toLocaleString('id-ID');
        };

const dummyProducts = [];
        const dummyUsers = [];

// --- UTILITIES UI ---
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            const msg = document.getElementById('toast-message');
            const icon = document.getElementById('toast-icon');
            
            msg.innerText = message;
            if(type === 'success'){
                toast.classList.replace('border-red-500', 'border-blue-500');
                icon.innerHTML = '<i class="fas fa-check-circle text-blue-500 text-xl"></i>';
            } else {
                toast.classList.replace('border-blue-500', 'border-red-500');
                icon.innerHTML = '<i class="fas fa-exclamation-circle text-red-500 text-xl"></i>';
            }
            
            toast.classList.remove('translate-x-full');
            setTimeout(() => { toast.classList.add('translate-x-full'); }, 3000);
        }

function showLoader(show) {
            document.getElementById('loader-screen').classList.toggle('hidden', !show);
        }

// --- FITUR SIDEBAR MOBILE ---
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('-translate-x-full');
            document.getElementById('sidebar-overlay').classList.toggle('hidden');
        }

function closeSidebar() {
            document.getElementById('sidebar').classList.add('-translate-x-full');
            document.getElementById('sidebar-overlay').classList.add('hidden');
        }

// --- CORE LOGIC ---
        
        async function fetchGAS(action, payload = {}) {
            if(IS_PREVIEW) return simulateGAS(action, payload);

if(GAS_URL === "URL_DEPLOY_GAS_ANDA_DISINI") {
                throw new Error("URL GAS Backend belum diisi di kode HTML Anda!");
            }

try {
                const response = await fetch(GAS_URL, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: new URLSearchParams({ action: action, payload: JSON.stringify(payload) })
                });
                const result = await response.json();
                if(result.status === 'success') return result.data;
                else throw new Error(result.message);
            } catch (error) {
                console.error(error);
                if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
                    throw new Error("Koneksi ditolak. Pastikan URL GAS benar dan pengaturan deploy adalah 'Semua Orang (Anyone)'.");
                }
                throw error;
            }
        }

function simulateGAS(action, payload) {
            return new Promise((resolve, reject) => {
                setTimeout(() => { resolve(true); }, 800);
            });
        }

// --- AUTH & NAVIGATION ---

async function handleLogin(e) {
            e.preventDefault();
            const u = document.getElementById('username').value;
            const p = document.getElementById('password').value;
            
            showLoader(true);
            try {
                const user = await fetchGAS('login', {username: u, password: p});
                if(user) {
                    currentUser = user;
                    localStorage.setItem('pos_session', JSON.stringify(user));
                    
                    setupUI();
                    await loadAppData();
                    document.getElementById('login-screen').classList.add('hidden');
                    document.getElementById('main-layout').classList.remove('hidden');
                    navigate('pos');
                    showToast('Selamat datang, ' + user.nama_lengkap + '!');
                }
            } catch (err) {
                showToast(err.message || "Gagal Login", 'error');
            }
            showLoader(false);
        }

function handleLogout() {
            currentUser = null;
            localStorage.removeItem('pos_session');
            
            document.getElementById('form-login').reset();
            document.getElementById('main-layout').classList.add('hidden');
            document.getElementById('login-screen').classList.remove('hidden');
        }

function setupUI() {
            document.getElementById('user-avatar').innerText = currentUser.nama_lengkap.charAt(0).toUpperCase();
            document.getElementById('user-fullname').innerText = currentUser.nama_lengkap;
            document.getElementById('user-role-badge').innerText = currentUser.role;

if(currentUser.role === 'Admin') {
                document.getElementById('menu-admin-only').classList.remove('hidden');
                document.getElementById('menu-kasir-only').classList.add('hidden');
            } else {
                document.getElementById('menu-admin-only').classList.add('hidden');
                document.getElementById('menu-kasir-only').classList.remove('hidden');
            }
        }

async function loadAppData() {
            showLoader(true);
            
            const savedConfig = localStorage.getItem('storeConfig');
            if(savedConfig) {
                storeConfig = JSON.parse(savedConfig);
            }

function navigate(pageId) {
            // Tutup sidebar di versi mobile tiap kali menu diklik
            closeSidebar();

document.querySelectorAll('.page-section').forEach(el => el.classList.add('hidden'));
            document.getElementById('page-' + pageId).classList.remove('hidden');
            
            document.querySelectorAll('.nav-item').forEach(el => {
                el.classList.remove('bg-gray-800', 'text-white', 'border-l-4', 'border-blue-500');
                if(el.dataset.target === pageId) {
                    el.classList.add('bg-gray-800', 'text-white', 'border-l-4', 'border-blue-500');
                }
            });

if(pageId === 'pos') renderPosProducts();
            if(pageId === 'dashboard') renderDashboard();
            if(pageId === 'produk') renderProductTable();
            if(pageId === 'laporan') renderLaporanTable();
            if(pageId === 'riwayat') renderRiwayatTable();
            if(pageId === 'pengguna') renderUsersTable();
            if(pageId === 'pengaturan') renderPengaturan();
            if(pageId === 'stok') {
                document.getElementById('stok-search-input').value = '';
                document.getElementById('stok-product-info').classList.add('hidden');
                document.getElementById('stok-not-found').classList.add('hidden');
                setTimeout(() => document.getElementById('stok-search-input').focus(), 100);
            }
        }

// --- FITUR POS & KERANJANG ---
        
        function renderPosProducts() {
            const query = document.getElementById('search-pos').value.toLowerCase();
            const grid = document.getElementById('pos-product-grid');
            grid.innerHTML = '';

const filtered = dataProducts.filter(p => p.nama_produk.toLowerCase().includes(query) || String(p.kode_sku).toLowerCase().includes(query));
            
            if(filtered.length === 0) {
                grid.innerHTML = '<div class="col-span-full text-center py-10 text-gray-400">Produk tidak ditemukan</div>';
                return;
            }

filtered.forEach(p => {
                const card = document.createElement('div');
                card.className = "bg-white p-3 rounded-lg border shadow-sm hover:shadow-md cursor-pointer transition flex flex-col justify-between";
                card.onclick = () => addToCart(p);
                // line-clamp untuk nama produk agar text terpotong dengan ... jika terlalu panjang
                card.innerHTML = '<div class="min-w-0"><div class="text-xs text-gray-400 mb-1 truncate"><i class="fas fa-barcode"></i> ' + p.kode_sku + '</div><div class="font-semibold text-gray-800 text-sm md:text-base mb-2 leading-tight break-words" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">' + p.nama_produk + '</div></div><div class="flex flex-col xl:flex-row xl:justify-between xl:items-end mt-2 gap-1"><div class="text-blue-600 font-bold text-sm truncate">' + formatRupiah(p.harga_jual) + '</div><div class="text-xs ' + (p.stok > 0 ? 'text-green-500' : 'text-red-500') + '">Stok: ' + p.stok + '</div></div>';
                grid.appendChild(card);
            });
        }

function clearCart() {
            cart = [];
            updateCartUI();
        }

function updateCartUI() {
            const list = document.getElementById('cart-items');
            list.innerHTML = '';
            let subtotal = 0;

if(cart.length === 0) {
                list.innerHTML = '<div class="h-full flex flex-col items-center justify-center text-gray-400"><i class="fas fa-shopping-basket text-4xl mb-2"></i><p class="text-sm">Keranjang kosong</p></div>';
                document.getElementById('btn-pay').disabled = true;
            } else {
                document.getElementById('btn-pay').disabled = false;
                cart.forEach(item => {
                    const lineTotal = item.qty * item.harga_jual;
                    subtotal += lineTotal;
                    
                    list.innerHTML += '<div class="flex justify-between items-center p-2 border-b bg-white rounded mb-1 shadow-sm gap-2"><div class="flex-1 min-w-0"><div class="text-xs md:text-sm font-semibold truncate" title="' + item.nama_produk + '">' + item.nama_produk + '</div><div class="text-[10px] md:text-xs text-gray-500">' + formatRupiah(item.harga_jual) + '</div></div><div class="flex items-center gap-2 shrink-0"><div class="flex bg-gray-100 rounded border"><button onclick="changeQty(\'' + item.id_produk + '\', -1)" class="px-2 py-1 hover:bg-gray-200 text-sm">-</button><span class="px-2 py-1 text-xs md:text-sm font-bold w-6 text-center">' + item.qty + '</span><button onclick="changeQty(\'' + item.id_produk + '\', 1)" class="px-2 py-1 hover:bg-gray-200 text-sm">+</button></div><div class="text-xs md:text-sm font-bold text-right min-w-[70px] truncate">' + formatRupiah(lineTotal) + '</div></div></div>';
                });
            }

document.getElementById('cart-subtotal').innerText = formatRupiah(subtotal);
            document.getElementById('cart-total').innerText = formatRupiah(subtotal);
            document.getElementById('btn-pay').dataset.total = subtotal;
        }

// --- PEMBAYARAN & CHECKOUT ---

function openPaymentModal() {
            if(cart.length === 0) return;
            const total = parseInt(document.getElementById('btn-pay').dataset.total);
            document.getElementById('pay-total').innerText = formatRupiah(total);
            document.getElementById('pay-total').dataset.val = total;
            document.getElementById('pay-cash').value = '';
            document.getElementById('pay-change').innerText = 'Rp 0';
            document.getElementById('btn-process-pay').disabled = true;
            
            document.getElementById('modal-payment').classList.remove('hidden');
            document.getElementById('modal-payment-content').classList.remove('scale-95');
            setTimeout(() => document.getElementById('pay-cash').focus(), 100);
        }

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

async function processCheckout() {
            const total = parseInt(document.getElementById('pay-total').dataset.val);
            const cash = parseInt(document.getElementById('pay-cash').value);
            const change = cash - total;
            
            const id_trx = "TRX-" + new Date().getTime().toString().substr(-6) + generateID().substr(0,3).toUpperCase();
            
            const payload = {
                id_transaksi: id_trx,
                tanggal_waktu: getTanggalJam(),
                kasir: currentUser.username,
                detail_keranjang: JSON.stringify(cart),
                total_belanja: total,
                tunai: cash,
                kembalian: change
            };

showLoader(true);
            const res = await fetchGAS('saveTransaction', payload);
            showLoader(false);

if(res) {
                cart.forEach(c => {
                    const p = dataProducts.find(prod => prod.id_produk === c.id_produk);
                    if(p) p.stok -= c.qty;
                });
                
                dataTransactions.unshift(payload);
                
                closePaymentModal();
                showReceipt(payload);
                clearCart();
                renderPosProducts(); 
                showToast("Transaksi Berhasil!");
            }
        }

// --- STRUK & CETAK ---
        function showReceipt(trx) {
            document.getElementById('receipt-store-name').innerText = storeConfig.namaToko;
            document.getElementById('receipt-store-address').innerText = storeConfig.alamatToko;
            document.getElementById('receipt-id').innerText = trx.id_transaksi;
            document.getElementById('receipt-date').innerText = trx.tanggal_waktu;
            
            const kasirUser = dataUsers.find(u => u.username === trx.kasir);
            document.getElementById('receipt-cashier').innerText = kasirUser ? kasirUser.nama_lengkap : trx.kasir;
            
            const items = JSON.parse(trx.detail_keranjang);
            let itemsHtml = '';
            items.forEach(i => {
                itemsHtml += '<div class="flex justify-between gap-2"><span class="break-words w-2/3">' + i.nama_produk + '</span></div><div class="flex justify-between text-gray-500 mb-1 gap-2"><span class="shrink-0">' + i.qty + ' x ' + formatRupiah(i.harga_jual) + '</span><span class="break-words text-right">' + formatRupiah(i.qty * i.harga_jual) + '</span></div>';
            });
            document.getElementById('receipt-items').innerHTML = itemsHtml;
            document.getElementById('receipt-total').innerText = formatRupiah(trx.total_belanja);
            document.getElementById('receipt-cash').innerText = formatRupiah(trx.tunai);
            document.getElementById('receipt-change').innerText = formatRupiah(trx.kembalian);

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

function downloadPDF() {
            const element = document.getElementById('receipt-content');
            const trxId = document.getElementById('receipt-id').innerText;
            
            element.scrollTop = 0;

const originalClasses = element.className;
            const originalHeight = element.style.height;
            const originalMaxHeight = element.style.maxHeight;
            const originalOverflow = element.style.overflow;
            
            element.className = 'p-6 text-sm font-mono bg-white text-black break-words';
            element.style.height = 'max-content';
            element.style.maxHeight = 'none';
            element.style.overflow = 'visible';

setTimeout(() => {
                const heightPx = element.scrollHeight;
                const contentHeightInches = (heightPx / 96) + 0.5; 
                const pdfHeight = Math.max(5, contentHeightInches);

// --- PENGATURAN TOKO ---
        function renderPengaturan() {
            document.getElementById('set-nama-toko').value = storeConfig.namaToko;
            document.getElementById('set-alamat-toko').value = storeConfig.alamatToko;
        }

function savePengaturan(e) {
            e.preventDefault();
            storeConfig.namaToko = document.getElementById('set-nama-toko').value;
            storeConfig.alamatToko = document.getElementById('set-alamat-toko').value;
            
            localStorage.setItem('storeConfig', JSON.stringify(storeConfig));
            showToast("Pengaturan toko berhasil disimpan!");
        }

// --- FITUR TAMBAH STOK BARANG ---
        function searchProductForStock() {
            const sku = document.getElementById('stok-search-input').value.trim();
            if(!sku) return;
            
            const product = dataProducts.find(p => String(p.kode_sku).toLowerCase() === String(sku).toLowerCase());
            
            if(product) {
                document.getElementById('stok-product-info').classList.remove('hidden');
                document.getElementById('stok-not-found').classList.add('hidden');
                
                document.getElementById('stok-product-name').innerText = product.nama_produk;
                document.getElementById('stok-product-sku').innerText = product.kode_sku;
                document.getElementById('stok-product-current').innerText = product.stok;
                document.getElementById('stok-product-id').value = product.id_produk;
                
                document.getElementById('stok-add-qty').value = '';
                document.getElementById('stok-add-qty').focus();
            } else {
                document.getElementById('stok-product-info').classList.add('hidden');
                document.getElementById('stok-not-found').classList.remove('hidden');
            }
        }

async function submitAddStock(e) {
            e.preventDefault();
            const id = document.getElementById('stok-product-id').value;
            const addQty = parseInt(document.getElementById('stok-add-qty').value);
            
            const product = dataProducts.find(p => p.id_produk === id);
            if(!product) return;

const updatedProduct = { ...product };
            updatedProduct.stok = parseInt(updatedProduct.stok) + addQty;

showLoader(true);
            const res = await fetchGAS('saveProduct', updatedProduct);
            showLoader(false);

if(res) {
                product.stok = updatedProduct.stok;
                showToast('Stok ' + product.nama_produk + ' berhasil ditambah ' + addQty + '!');
                
                document.getElementById('stok-search-input').value = '';
                document.getElementById('stok-product-info').classList.add('hidden');
                document.getElementById('stok-add-qty').value = '';
                document.getElementById('stok-search-input').focus();
                
                renderProductTable();
            }
        }

// --- DASHBOARD ADMIN ---
        function renderDashboard() {
            const omzet = dataTransactions.reduce((sum, t) => sum + parseInt(t.total_belanja), 0);
            document.getElementById('dash-omzet').innerText = formatRupiah(omzet);
            document.getElementById('dash-trx').innerText = dataTransactions.length;
            document.getElementById('dash-produk').innerText = dataProducts.length;

const tbody = document.getElementById('dash-recent-trx');
            tbody.innerHTML = '';
            dataTransactions.slice(0, 5).forEach(t => {
                tbody.innerHTML += '<tr class="border-b"><td class="px-3 py-3 font-mono text-xs break-words">' + t.id_transaksi + '</td><td class="px-3 py-3 text-xs md:text-sm">' + t.tanggal_waktu + '</td><td class="px-3 py-3 text-xs md:text-sm">' + t.kasir + '</td><td class="px-3 py-3 font-bold text-blue-600 text-xs md:text-sm">' + formatRupiah(t.total_belanja) + '</td></tr>';
            });
        }

// --- MANAJEMEN PRODUK ---
        function renderProductTable() {
            const query = document.getElementById('search-product-table').value.toLowerCase();
            const tbody = document.getElementById('table-products');
            tbody.innerHTML = '';

const filtered = dataProducts.filter(p => p.nama_produk.toLowerCase().includes(query) || String(p.kode_sku).toLowerCase().includes(query));
            
            filtered.forEach(p => {
                tbody.innerHTML += '<tr class="hover:bg-gray-50"><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-900 font-mono">' + p.kode_sku + '</td><td class="px-4 md:px-6 py-4 text-xs md:text-sm font-medium text-gray-900 break-words max-w-[200px] whitespace-normal">' + p.nama_produk + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500">' + formatRupiah(p.harga_jual) + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500 ' + (p.stok <= 5 ? 'text-red-500 font-bold' : '') + '">' + p.stok + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-center text-xs md:text-sm font-medium"><button onclick=\'editProduct(' + JSON.stringify(p) + ')\' class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button><button onclick="deleteProduct(\'' + p.id_produk + '\')" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button></td></tr>';
            });
        }

async function saveProduct(e) {
            e.preventDefault();
            const id = document.getElementById('prod-id').value || 'PRD-' + new Date().getTime();
            const skuInput = String(document.getElementById('prod-sku').value).trim();
            
            const existingSku = dataProducts.find(p => String(p.kode_sku) === skuInput && p.id_produk !== id);
            if (existingSku) {
                showToast("Gagal: ID Barang (Barcode) sudah digunakan oleh produk lain!", "error");
                return;
            }

const payload = {
                id_produk: id,
                kode_sku: skuInput,
                nama_produk: document.getElementById('prod-name').value,
                harga_jual: parseInt(document.getElementById('prod-price').value),
                stok: parseInt(document.getElementById('prod-stock').value)
            };

showLoader(true);
            const res = await fetchGAS('saveProduct', payload);
            showLoader(false);

if(res) {
                const existingIndex = dataProducts.findIndex(p => p.id_produk === payload.id_produk);
                if(existingIndex >= 0) {
                    dataProducts[existingIndex] = payload;
                } else {
                    dataProducts.push(payload);
                }

closeProductModal();
                renderProductTable();
                showToast("Produk berhasil disimpan");
            }
        }

async function deleteProduct(id) {
            if(confirm("Yakin ingin menghapus produk ini?")) {
                showLoader(true);
                const res = await fetchGAS('deleteProduct', id);
                showLoader(false);
                if(res) {
                    renderProductTable();
                    showToast("Produk dihapus");
                }
            }
        }

// --- LAPORAN ADMIN ---
        function renderLaporanTable() {
            const tbody = document.getElementById('table-reports');
            tbody.innerHTML = '';
            dataTransactions.forEach(t => {
                tbody.innerHTML += '<tr class="hover:bg-gray-50"><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm font-mono text-gray-900">' + t.id_transaksi + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500">' + t.tanggal_waktu + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500">' + t.kasir + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm font-bold text-right text-gray-900">' + formatRupiah(t.total_belanja) + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-center text-xs md:text-sm"><button onclick=\'showReceipt(' + JSON.stringify(t) + ')\' class="text-blue-600 hover:text-blue-900 bg-blue-100 px-3 py-1 rounded">Struk</button></td></tr>';
            });
        }

// --- RIWAYAT KASIR ---
        function renderRiwayatTable() {
            const tbody = document.getElementById('table-history');
            tbody.innerHTML = '';
            const todayDate = new Date().toLocaleDateString('id-ID'); 
            
            const myTrx = dataTransactions.filter(t => t.kasir === currentUser.username && t.tanggal_waktu.includes(todayDate.split('/')[0]));

if(myTrx.length === 0) {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4 text-gray-500 text-xs md:text-sm">Belum ada transaksi hari ini</td></tr>';
            }

myTrx.forEach(t => {
                tbody.innerHTML += '<tr class="hover:bg-gray-50"><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm font-mono text-gray-900 cursor-pointer text-blue-600 hover:underline" onclick=\'showReceipt(' + JSON.stringify(t) + ')\'>' + t.id_transaksi + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500">' + (t.tanggal_waktu.split(', ')[1] || t.tanggal_waktu) + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm font-bold text-right text-gray-900">' + formatRupiah(t.total_belanja) + '</td></tr>';
            });
        }

// --- MANAJEMEN PENGGUNA ---
        function renderUsersTable() {
            const tbody = document.getElementById('table-users');
            tbody.innerHTML = '';
            dataUsers.forEach(u => {
                tbody.innerHTML += '<tr class="hover:bg-gray-50"><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm font-bold text-gray-900">' + u.username + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm text-gray-500">' + u.nama_lengkap + '</td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-xs md:text-sm"><span class="px-2 py-1 rounded text-[10px] md:text-xs font-bold ' + (u.role === 'Admin' ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700') + '">' + u.role + '</span></td><td class="px-4 md:px-6 py-4 whitespace-nowrap text-center text-xs md:text-sm font-medium"><button onclick="deleteUser(\'' + u.id_user + '\')" class="text-red-600 hover:text-red-900" ' + (u.username === 'admin' ? 'disabled style="opacity:0.3"' : '') + '><i class="fas fa-trash"></i></button></td></tr>';
            });
        }

function openUserModal() {
            document.getElementById('form-user').reset();
            document.getElementById('modal-user').classList.remove('hidden');
        }
        function closeUserModal() { document.getElementById('modal-user').classList.add('hidden'); }

async function saveUser(e) {
            e.preventDefault();
            const payload = {
                id_user: 'USR-' + new Date().getTime(),
                username: document.getElementById('u-username').value,
                password: document.getElementById('u-password').value,
                nama_lengkap: document.getElementById('u-fullname').value,
                role: document.getElementById('u-role').value
            };

showLoader(true);
            const res = await fetchGAS('saveUser', payload);
            showLoader(false);

if(res) {
                if(IS_PREVIEW) dataUsers.push(payload);
                closeUserModal();
                renderUsersTable();
                showToast("Pengguna berhasil ditambahkan");
            }
        }

async function deleteUser(id) {
            if(confirm("Hapus pengguna ini?")) {
                showLoader(true);
                const res = await fetchGAS('deleteUser', id);
                showLoader(false);
                if(res) {
                    if(IS_PREVIEW) dataUsers = dataUsers.filter(u => u.id_user !== id);
                    renderUsersTable();
                    showToast("Pengguna dihapus");
                }
            }
        }

// --- FITUR SCANNER BARCODE ---
        let html5QrCode = null;
        let scanMode = '';
        let isScannerRunning = false;

function switchCamera(deviceId) {
            if (!deviceId) return;
            startScannerWithDevice(deviceId);
        }

function onScanSuccess(decodedText, decodedResult) {
            playBeep();

if (scanMode === 'product') {
                document.getElementById('prod-sku').value = decodedText;
                closeScanner();
                showToast("ID Barang berhasil discan!");
            } else if (scanMode === 'stok') {
                document.getElementById('stok-search-input').value = decodedText;
                closeScanner();
                searchProductForStock();
            } else if (scanMode === 'pos') {
                const product = dataProducts.find(p => String(p.kode_sku) === String(decodedText));
                if (product) {
                    addToCart(product);
                    showToast(product.nama_produk + ' ditambahkan!');
                } else {
                    showToast("Barang tidak terdaftar!", "error");
                }
                closeScanner(); 
            }
        }

Memproses Data...

POS Kasir

Ringkasan Hari Ini

Rp 0

0

0

5 Transaksi Terakhir

Master Produk

Laporan Penjualan

Riwayat (Hari Ini)

Kelola Pengguna

Pengaturan Toko

Memproses Data...

Sistem Kasir Pintar

Keranjang

Ringkasan Hari Ini

Rp 0

0

0

5 Transaksi Terakhir

Master Produk

Laporan Penjualan

Riwayat (Hari Ini)

Kelola Pengguna

Pengaturan Toko