{% extends "base.html" %}

{% block title %}Penjualan - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Transaksi Penjualan{% endblock %}

{% block content %}
<!-- Quick Actions -->
<div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-3 mb-4">
    <div class="flex-1">
        <button onclick="openCashier()"
                class="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg font-bold transition-all shadow-lg text-sm sm:text-base">
            <i class="fas fa-cash-register mr-1 sm:mr-2"></i>Buka Kasir
            <span class="ml-2 text-xs bg-blue-500 px-1.5 py-0.5 rounded font-mono">F12</span>
        </button>
    </div>
    <div class="flex-1 sm:flex-initial">
        <form method="GET" class="flex gap-2">
            <div class="relative flex-1 sm:flex-initial">
                <input type="text" name="search" value="{{ search }}"
                       placeholder="Cari nota/pelanggan..."
                       class="w-full sm:w-48 pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
            </div>
        </form>
    </div>
</div>

<!-- Transaction History -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-3 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
        <h3 class="text-base sm:text-xl font-bold text-gray-800">
            <i class="fas fa-history text-blue-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
            Riwayat Transaksi
        </h3>
    </div>
    <!-- Mobile Card View -->
    <div class="block lg:hidden divide-y divide-gray-100">
        {% for sale in sales.items %}
        <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1 min-w-0 pr-2">
                    <div class="flex items-center gap-2 mb-1 flex-wrap">
                        <span class="text-xs font-bold text-blue-600">{{ sale.nomor_nota }}</span>
                        {% if sale.status == 'Lunas' %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700">Lunas</span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700">Belum Lunas</span>
                        {% endif %}
                    </div>
                    <p class="text-sm font-semibold text-gray-900 truncate">{{ sale.customer.nama }}</p>
                    <p class="text-xs text-gray-500 mt-0.5">{{ sale.tanggal.strftime('%d/%m/%Y %H:%M') }}</p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-base font-bold text-gray-900">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</p>
                    <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-100 border border-gray-300 text-gray-700">
                        {{ sale.metode_pembayaran }}
                    </span>
                </div>
            </div>
            <div class="flex items-center justify-end gap-4 pt-2 border-t border-gray-100">
                <button onclick="showPrintChoice({{ sale.id }})" class="text-green-600 active:text-green-800 p-1.5" title="Cetak">
                    <i class="fas fa-print"></i>
                </button>
                <button onclick="viewDetail({{ sale.id }})" class="text-blue-600 active:text-blue-800 p-1.5">
                    <i class="fas fa-eye"></i>
                </button>
                <a href="{{ url_for('delete_sale', id=sale.id) }}"
                   onclick="return confirm('Yakin ingin menghapus transaksi ini?')"
                   class="text-red-600 active:text-red-800 p-1.5">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
        </div>
        {% else %}
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-inbox text-4xl mb-2"></i>
            <p class="text-sm">Belum ada transaksi</p>
        </div>
        {% endfor %}
    </div>
    <!-- Desktop Table View -->
    <div class="hidden lg:block overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No. Nota</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Pelanggan</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Total</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Metode</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for sale in sales.items %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ sale.nomor_nota }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ sale.tanggal.strftime('%d/%m/%Y %H:%M') }}</td>
                    <td class="px-4 py-3 text-sm text-gray-900">{{ sale.customer.nama }}</td>
                    <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-700 border border-gray-200">{{ sale.metode_pembayaran }}</span>
                    </td>
                    <td class="px-4 py-3">
                        {% if sale.status == 'Lunas' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Lunas</span>
                        {% else %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Belum Lunas</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        <div class="flex items-center justify-center gap-2">
                            <button onclick="showPrintChoice({{ sale.id }})" class="text-green-600 hover:text-green-800 p-1" title="Cetak">
                                <i class="fas fa-print"></i>
                            </button>
                            <button onclick="viewDetail({{ sale.id }})" class="text-blue-600 hover:text-blue-800 p-1">
                                <i class="fas fa-eye"></i>
                            </button>
                            <a href="{{ url_for('delete_sale', id=sale.id) }}"
                               onclick="return confirm('Yakin ingin menghapus transaksi ini?')"
                               class="text-red-600 hover:text-red-800 p-1">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
                        <p>Belum ada transaksi</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if sales.pages > 1 %}
    <div class="p-3 sm:p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                {{ sales.per_page * (sales.page - 1) + 1 }} -
                {{ [sales.per_page * sales.page, sales.total]|min }} dari {{ sales.total }}
            </p>
            <div class="flex space-x-1 sm:space-x-2">
                {% if sales.has_prev %}
                <a href="?page={{ sales.prev_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100"><i class="fas fa-chevron-left"></i></a>
                {% endif %}
                {% for page_num in sales.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == sales.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100{% endif %}">{{ page_num }}</a>
                    {% endif %}
                {% endfor %}
                {% if sales.has_next %}
                <a href="?page={{ sales.next_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100"><i class="fas fa-chevron-right"></i></a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- ================= MODALS ================= -->

<!-- 1. MODAL PILIHAN CETAK -->
<div id="printChoiceModal" class="modal fixed inset-0 bg-black bg-opacity-60 items-center justify-center z-[70] hidden p-4">
    <div class="bg-white rounded-xl shadow-2xl max-w-sm w-full overflow-hidden">
        <div class="p-4 bg-gray-50 border-b flex justify-between items-center">
            <h3 class="font-bold text-gray-800 text-lg"><i class="fas fa-print mr-2 text-blue-600"></i>Pilih Format Cetak</h3>
            <button onclick="closeModal('printChoiceModal')" class="text-gray-400 hover:text-gray-600 p-1"><i class="fas fa-times text-xl"></i></button>
        </div>
        <div class="p-4 space-y-3">
            <button id="btnChoiceThermal" onclick=""
                    class="w-full flex items-center justify-between p-4 bg-blue-50 border border-blue-200 rounded-xl hover:bg-blue-100 active:bg-blue-200 transition-all">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center shadow"><i class="fas fa-desktop text-lg"></i></div>
                    <div class="text-left"><div class="font-bold text-gray-800">Thermal Desktop</div><div class="text-xs text-blue-600">Aplikasi Python</div></div>
                </div>
                <i class="fas fa-chevron-right text-blue-300"></i>
            </button>
            <a id="linkChoiceWebThermal" href="#" target="_blank" onclick="closeModal('printChoiceModal')"
               class="w-full flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl hover:bg-green-100 active:bg-green-200 transition-all">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center shadow"><i class="fas fa-globe text-lg"></i></div>
                    <div class="text-left"><div class="font-bold text-gray-800">Struk Web (58mm)</div><div class="text-xs text-green-600">Cetak via Browser</div></div>
                </div>
                <i class="fas fa-chevron-right text-green-300"></i>
            </a>
            <a id="linkChoiceA5" href="#" target="_blank" onclick="closeModal('printChoiceModal')"
               class="w-full flex items-center justify-between p-4 bg-purple-50 border border-purple-200 rounded-xl hover:bg-purple-100 active:bg-purple-200 transition-all">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center shadow"><i class="fas fa-file-invoice text-lg"></i></div>
                    <div class="text-left"><div class="font-bold text-gray-800">Invoice A5</div><div class="text-xs text-purple-600">Cetak PDF / Browser</div></div>
                </div>
                <i class="fas fa-chevron-right text-purple-300"></i>
            </a>
        </div>
    </div>
</div>

<!-- 2. CASHIER MODAL — RESPONSIVE POS -->
<div id="cashierModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden">
    <div class="bg-white w-full h-full flex flex-col overflow-hidden">

        <!-- ── Header ── -->
        <div class="bg-gradient-to-r from-slate-800 to-slate-900 text-white flex-shrink-0">
            <!-- Title row -->
            <div class="flex items-center justify-between px-3 py-2 sm:px-4 sm:py-2.5">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-cash-register text-yellow-400 flex-shrink-0"></i>
                    <span class="font-bold text-sm sm:text-base tracking-wide truncate">KASIR POS</span>
                    <span id="hdr_price_mode" class="hidden text-[10px] bg-yellow-500 text-black px-1.5 py-0.5 rounded font-bold flex-shrink-0">GROSIR</span>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <!-- Total always visible in header -->
                    <div class="text-right">
                        <div class="text-[9px] text-slate-400 uppercase tracking-widest leading-none mb-0.5">Total</div>
                        <div id="hdr_total" class="text-lg sm:text-2xl font-black text-yellow-400 font-mono leading-none">Rp 0</div>
                    </div>
                    <button onclick="closeModal('cashierModal')" class="text-slate-300 hover:text-white text-xl p-1.5 -mr-1">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Shortcut Bar — desktop only -->
            <div class="hidden lg:block bg-slate-700 border-t border-slate-600 px-2 py-1.5 overflow-x-auto scrollbar-none">
                <div class="flex gap-1 lg:w-auto lg:flex-wrap">
                    <button type="button" onclick="focusBarcodeInput()" class="shortcut-btn bg-blue-600 hover:bg-blue-500 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-blue-800 px-1 rounded text-[9px] font-mono">F1</kbd>Scan
                    </button>
                    <button type="button" onclick="switchTab('produk')" class="shortcut-btn bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-slate-800 px-1 rounded text-[9px] font-mono">F3</kbd>Produk
                    </button>
                    <button type="button" onclick="switchTab('jasa')" class="shortcut-btn bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-slate-800 px-1 rounded text-[9px] font-mono">F4</kbd>Jasa
                    </button>
                    <button type="button" onclick="editSelectedQty()" class="shortcut-btn bg-amber-600 hover:bg-amber-500 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-amber-800 px-1 rounded text-[9px] font-mono">F2</kbd>Edit
                    </button>
                    <button type="button" onclick="deleteSelected()" class="shortcut-btn bg-red-700 hover:bg-red-600 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-red-900 px-1 rounded text-[9px] font-mono">Del</kbd>Hapus
                    </button>
                    <div class="w-px bg-slate-500 mx-0.5 self-stretch flex-shrink-0"></div>
                    <button type="button" onclick="setTunaiMode()" class="shortcut-btn bg-green-700 hover:bg-green-600 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-green-900 px-1 rounded text-[9px] font-mono">F9</kbd>Tunai
                    </button>
                    <button type="button" onclick="setQrisMode()" class="shortcut-btn bg-cyan-700 hover:bg-cyan-600 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-cyan-900 px-1 rounded text-[9px] font-mono">F8</kbd>QRIS
                    </button>
                    <button type="button" onclick="setTempoMode()" class="shortcut-btn bg-purple-700 hover:bg-purple-600 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-purple-900 px-1 rounded text-[9px] font-mono">F10</kbd>Tempo
                    </button>
                    <button type="button" onclick="submitSale()" class="shortcut-btn bg-yellow-500 hover:bg-yellow-400 text-black text-xs px-2 py-1 rounded flex items-center gap-1 font-bold whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-yellow-700 text-white px-1 rounded text-[9px] font-mono">F11</kbd>BAYAR
                    </button>
                    <button type="button" onclick="clearCart()" class="shortcut-btn bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded flex items-center gap-1 whitespace-nowrap flex-shrink-0">
                        <kbd class="bg-slate-800 px-1 rounded text-[9px] font-mono">F5</kbd>Kosong
                    </button>
                </div>
            </div>
        </div>

        <!-- ── Form: flex-col mobile / flex-row desktop ── -->
        <form method="POST" action="{{ url_for('add_sale') }}" id="cashierForm"
              class="flex-1 flex flex-col lg:flex-row overflow-hidden min-h-0">

            <!-- ── LEFT: Input + Cart ── -->
            <div class="flex-1 flex flex-col overflow-hidden min-h-0 lg:border-r border-gray-200">

                <!-- Input Area -->
                <div class="flex-shrink-0 bg-white border-b border-gray-200 px-3 pt-2.5 pb-2 space-y-2">

                    <!-- Pelanggan -->
                    <div class="flex items-center gap-2">
                        <label class="text-xs font-bold text-gray-500 w-20 flex-shrink-0 hidden sm:block">Pelanggan</label>
                        <div class="flex-1 flex items-center gap-2 min-w-0">
                            <select name="customer_id" id="customer_select" required
                                    class="flex-1 min-w-0 text-sm border border-gray-300 rounded-lg py-1.5">
                                <option value="">-- Pilih Pelanggan --</option>
                                {% for customer in customers %}
                                <option value="{{ customer.id }}" data-jenis="{{ customer.jenis }}"
                                    {% if customer.nama == 'Pelanggan Umum' %}data-default="true"{% endif %}>
                                    {{ customer.nama }} ({{ customer.jenis }})
                                </option>
                                {% endfor %}
                            </select>
                            <span id="priceInfo" class="text-[11px] font-bold text-green-700 whitespace-nowrap flex-shrink-0"></span>
                        </div>
                    </div>

                    <!-- Tab + Barcode input row -->
                    <div class="flex items-center gap-2">
                        <!-- Tab switcher -->
                        <div class="flex border border-gray-300 rounded-lg overflow-hidden flex-shrink-0">
                            <button type="button" onclick="switchTab('produk')" id="tab_produk"
                                    class="px-2.5 py-1.5 text-xs font-bold text-white bg-blue-600 transition-colors">
                                <i class="fas fa-box sm:mr-1"></i><span class="hidden sm:inline">Produk</span>
                            </button>
                            <button type="button" onclick="switchTab('jasa')" id="tab_jasa"
                                    class="px-2.5 py-1.5 text-xs font-bold text-gray-500 bg-white hover:bg-purple-50 transition-colors">
                                <i class="fas fa-tools sm:mr-1"></i><span class="hidden sm:inline">Jasa</span>
                            </button>
                        </div>

                        <!-- Barcode input (produk mode) -->
                        <div class="flex-1 relative min-w-0" id="panel_produk">
                            <i class="fas fa-barcode absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
                            <input type="text" id="barcode_input"
                                   placeholder="Scan / ketik produk..."
                                   class="w-full pl-7 pr-3 py-1.5 text-sm border border-blue-400 rounded-lg focus:ring-2 focus:ring-blue-500 bg-blue-50"
                                   autocomplete="off">
                            <div id="product_dropdown"
                                 class="hidden absolute z-50 left-0 right-0 top-full mt-1 bg-white border border-blue-300 rounded-lg shadow-2xl max-h-56 overflow-y-auto"></div>
                        </div>

                        <!-- Jasa input (jasa mode) -->
                        <div class="flex-1 relative min-w-0 hidden" id="panel_jasa_input">
                            <i class="fas fa-tools absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
                            <input type="text" id="search_service"
                                   placeholder="Ketik nama jasa..."
                                   class="w-full pl-7 pr-3 py-1.5 text-sm border border-purple-400 rounded-lg focus:ring-2 focus:ring-purple-500 bg-purple-50"
                                   oninput="searchService(this.value)">
                        </div>

                        <!-- Camera button -->
                        <button type="button" onclick="startScanner()" id="btn_camera"
                                class="flex-shrink-0 px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 active:bg-indigo-800 text-sm shadow">
                            <i class="fas fa-camera"></i>
                        </button>
                    </div>

                    <!-- Scanner view -->
                    <div id="scanner-container" class="hidden rounded-lg border-2 border-indigo-300 overflow-hidden relative bg-black">
                        <div id="reader" style="width:100%"></div>
                        <button type="button" onclick="stopScanner()"
                                class="absolute top-2 right-2 bg-red-600 text-white px-2.5 py-1 rounded-full z-10 text-xs font-bold">
                            <i class="fas fa-times mr-1"></i>Tutup
                        </button>
                    </div>

                    <!-- Jasa grid -->
                    <div id="panel_jasa" class="hidden">
                        <div id="service_results"
                             class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 gap-2 max-h-36 overflow-y-auto"></div>
                    </div>
                </div>

                <!-- Cart -->
                <div class="flex-1 flex flex-col overflow-hidden min-h-0">
                    <!-- Cart header -->
                    <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-shopping-cart text-blue-600 text-sm"></i>
                            <span class="text-sm font-bold text-gray-700">Keranjang</span>
                            <span id="cart_count" class="px-2 py-0.5 bg-blue-600 text-white rounded-full text-xs font-bold min-w-[1.5rem] text-center">0</span>
                        </div>
                        <div class="text-xs text-gray-400 hidden sm:flex items-center gap-2">
                            <kbd class="bg-gray-200 text-gray-600 px-1 rounded font-mono">↑↓</kbd>nav
                            <kbd class="bg-gray-200 text-gray-600 px-1 rounded font-mono">F2</kbd>edit
                            <kbd class="bg-gray-200 text-gray-600 px-1 rounded font-mono">Del</kbd>hapus
                        </div>
                    </div>

                    <!-- Cart items scroll -->
                    <div class="flex-1 overflow-y-auto min-h-0">
                        <!-- Desktop table -->
                        <table class="w-full text-sm hidden lg:table">
                            <thead class="bg-gray-100 sticky top-0 z-10">
                                <tr>
                                    <th class="px-2 py-2 text-xs font-bold text-gray-500 text-center w-8">#</th>
                                    <th class="px-3 py-2 text-xs font-bold text-gray-600 text-left">Produk / Jasa</th>
                                    <th class="px-2 py-2 text-xs font-bold text-gray-600 text-center w-24">Satuan</th>
                                    <th class="px-2 py-2 text-xs font-bold text-gray-600 text-right w-28">Harga</th>
                                    <th class="px-2 py-2 text-xs font-bold text-gray-600 text-center w-28">Qty</th>
                                    <th class="px-2 py-2 text-xs font-bold text-gray-600 text-right w-28">Subtotal</th>
                                    <th class="px-2 py-2 w-10"></th>
                                </tr>
                            </thead>
                            <tbody id="cart_items_desktop" class="divide-y divide-gray-100"></tbody>
                        </table>
                        <!-- Mobile cards -->
                        <div id="cart_items_mobile" class="lg:hidden divide-y divide-gray-100"></div>
                    </div>
                </div>
            </div>

            <!-- ── RIGHT: Payment Panel ── -->
            <div class="flex-shrink-0 lg:w-72 xl:w-80 flex flex-col
                        border-t lg:border-t-0 lg:border-l border-gray-200 bg-slate-50">

                <!-- ════ DESKTOP ONLY: Grand Total header ════ -->
                <div class="hidden lg:block bg-slate-800 text-white flex-shrink-0 text-center py-4">
                    <div class="text-xs text-slate-400 uppercase tracking-widest mb-1">Grand Total</div>
                    <div id="total_display" class="text-3xl font-black text-yellow-400 font-mono">Rp 0</div>
                </div>

                <!-- ════ MOBILE: Collapsible payment sheet (default: hidden) ════ -->
                <div id="mob_payment_sheet"
                     class="hidden lg:hidden overflow-y-auto bg-white border-b border-gray-200"
                     style="max-height:60vh">
                    <div class="p-3 space-y-3">

                        <!-- Subtotal + Diskon -->
                        <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 space-y-2">
                            <div class="flex justify-between text-sm text-gray-600">
                                <span>Sub Total</span>
                                <span id="subtotal_display_mob" class="font-semibold">Rp 0</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <label class="text-xs text-gray-600 flex-shrink-0">Diskon (Rp)</label>
                                <input type="number" id="diskon_input_mob" value="0" step="any" min="0"
                                       oninput="syncDiskon(this.value)"
                                       class="flex-1 min-w-0 px-2 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 text-right font-mono">
                            </div>
                            <div class="flex justify-between items-center border-t pt-1.5">
                                <span class="font-bold text-gray-800 text-sm">TOTAL</span>
                                <span id="total_display_mob" class="text-base font-black text-blue-700 font-mono">Rp 0</span>
                            </div>
                        </div>

                        <!-- Metode -->
                        <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Metode Pembayaran</label>
                            <!-- Grup 1: Bayar Langsung -->
                            <div class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">⚡ Bayar Langsung</div>
                            <div class="grid grid-cols-2 gap-2">
                                <button type="button" onclick="setMetode('Tunai')" id="mob_btn_tunai"
                                        class="mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 border-green-600 bg-green-600 text-white transition-all active:scale-95">
                                    <i class="fas fa-money-bill-wave block text-sm mb-0.5"></i>Tunai
                                </button>
                                <button type="button" onclick="setMetode('Transfer/QRIS')" id="mob_btn_qris"
                                        class="mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-qrcode block text-sm mb-0.5"></i>Transfer/QRIS
                                </button>
                            </div>
                            <!-- Grup 2: Piutang/Cicilan -->
                            <div class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider mt-1">📋 Bayar Nanti</div>
                            <div class="grid grid-cols-2 gap-2">
                                <button type="button" onclick="setMetode('Tempo')" id="mob_btn_tempo"
                                        class="mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-calendar-alt block text-sm mb-0.5"></i>Tempo
                                </button>
                                <button type="button" onclick="setMetode('Cicilan')" id="mob_btn_cicilan"
                                        class="mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-credit-card block text-sm mb-0.5"></i>Cicilan
                                </button>
                            </div>
                        </div>

                        <!-- Tunai: Jumlah Uang -->
                        <div id="mob_tunai_fields" class="bg-gray-50 rounded-lg border border-green-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Jumlah Uang</label>
                            <div class="flex gap-2">
                                <input type="number" id="jumlah_uang_input_mob" value="0" step="any"
                                       oninput="syncJumlahUang(this.value)"
                                       class="flex-1 min-w-0 px-3 py-2.5 text-sm border-2 border-green-300 rounded-lg focus:ring-2 focus:ring-green-500 text-right font-mono font-bold text-base">
                                <button type="button" onclick="setUangPas()"
                                        class="flex-shrink-0 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-bold active:bg-green-800">
                                    PAS
                                </button>
                            </div>
                            <div class="flex justify-between items-center bg-green-50 rounded-lg px-3 py-2.5">
                                <span class="text-sm font-bold text-gray-700">Kembalian</span>
                                <span id="kembalian_display" class="text-lg font-black text-green-700 font-mono">Rp 0</span>
                            </div>
                        </div>

                        <!-- DP / Cicilan -->
                        <div id="mob_dp_fields" class="hidden bg-gray-50 rounded-lg border border-purple-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Uang Muka / DP (Rp)</label>
                            <input type="number" id="dp_input_mob" value="0" step="any"
                                   oninput="syncDP(this.value)"
                                   class="w-full px-3 py-2.5 text-sm border-2 border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-right font-mono">
                        </div>

                    </div>
                </div>

                <!-- ════ MOBILE: Bottom action bar (always visible) ════ -->
                <div class="lg:hidden flex-shrink-0 bg-white border-t border-gray-100 shadow-[0_-2px_8px_rgba(0,0,0,0.08)]">
                    <!-- Total strip + toggle -->
                    <button type="button" onclick="togglePaymentSheet()"
                            class="w-full flex items-center justify-between px-4 py-2.5 active:bg-gray-50 transition-colors">
                        <div class="flex items-center gap-3">
                            <div>
                                <div class="text-[10px] text-gray-400 uppercase leading-none">Grand Total</div>
                                <div id="mob_total_display" class="text-xl font-black text-blue-700 font-mono leading-tight">Rp 0</div>
                            </div>
                            <span id="mob_metode_badge"
                                  class="text-[10px] bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-bold border border-green-200">Tunai</span>
                        </div>
                        <div class="flex items-center gap-1.5 text-gray-400">
                            <span class="text-xs">Detail Bayar</span>
                            <i id="mob_sheet_chevron" class="fas fa-chevron-up text-xs transition-transform duration-200"></i>
                        </div>
                    </button>
                    <!-- Action buttons row -->
                    <div class="flex items-center gap-2 px-3 pb-3">
                        <button type="button" onclick="clearCart()"
                                class="px-3 py-2.5 bg-red-50 text-red-600 rounded-lg text-xs font-bold border border-red-200 active:bg-red-100 flex items-center gap-1.5 flex-shrink-0">
                            <i class="fas fa-trash text-xs"></i>Hapus
                        </button>
                        <button type="button" onclick="closeModal('cashierModal')"
                                class="px-3 py-2.5 bg-gray-100 text-gray-600 rounded-lg text-xs font-bold border border-gray-200 active:bg-gray-200 flex items-center gap-1.5 flex-shrink-0">
                            <i class="fas fa-times text-xs"></i>Tutup
                        </button>
                        <button type="submit" id="mob_pay_button" disabled
                                class="flex-1 py-2.5 bg-green-600 text-white rounded-lg font-black text-sm
                                       disabled:bg-gray-300 disabled:cursor-not-allowed active:bg-green-800
                                       flex items-center justify-center gap-2 shadow">
                            <i class="fas fa-check-circle"></i>PROSES BAYAR
                        </button>
                    </div>
                </div>

                <!-- ════ DESKTOP ONLY: Payment details + actions ════ -->
                <div class="hidden lg:flex lg:flex-col lg:flex-1 lg:overflow-y-auto">
                    <div class="p-3 space-y-3 flex-1">
                        <!-- Subtotal + Diskon -->
                        <div class="bg-white rounded-lg border border-gray-200 p-3 space-y-2">
                            <div class="flex justify-between text-sm text-gray-600">
                                <span>Sub Total</span>
                                <span id="subtotal_display" class="font-semibold">Rp 0</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <label class="text-xs text-gray-600 flex-shrink-0">Diskon (Rp)</label>
                                <input type="number" name="diskon" id="diskon_input" value="0" step="any" min="0"
                                       oninput="calculateTotal()"
                                       class="flex-1 min-w-0 px-2 py-1 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 text-right font-mono">
                            </div>
                            <div class="flex justify-between items-center border-t pt-1.5">
                                <span class="font-bold text-gray-800 text-sm">TOTAL</span>
                                <span id="total_display_side" class="text-base font-black text-blue-700 font-mono">Rp 0</span>
                            </div>
                        </div>

                            <!-- Metode -->
                        <div class="bg-white rounded-lg border border-gray-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Metode</label>
                            <!-- Grup 1: Bayar Langsung -->
                            <div class="text-[10px] text-gray-400 font-medium uppercase tracking-widest">⚡ Bayar Langsung</div>
                            <div class="grid grid-cols-2 gap-1.5">
                                <button type="button" onclick="setMetode('Tunai')" id="btn_tunai"
                                        class="metode-btn py-2 text-xs font-bold rounded-lg border-2 border-green-600 bg-green-600 text-white transition-all active:scale-95">
                                    <i class="fas fa-money-bill-wave block text-sm mb-0.5"></i>Tunai
                                    <div class="text-[9px] opacity-70 font-mono">[F9]</div>
                                </button>
                                <button type="button" onclick="setMetode('Transfer/QRIS')" id="btn_qris"
                                        class="metode-btn py-2 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-qrcode block text-sm mb-0.5"></i>Transfer/QRIS
                                    <div class="text-[9px] opacity-70 font-mono">[F8]</div>
                                </button>
                            </div>
                            <!-- Grup 2: Bayar Nanti -->
                            <div class="text-[10px] text-gray-400 font-medium uppercase tracking-widest mt-1">📋 Bayar Nanti</div>
                            <div class="grid grid-cols-2 gap-1.5">
                                <button type="button" onclick="setMetode('Tempo')" id="btn_tempo"
                                        class="metode-btn py-2 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-calendar-alt block text-sm mb-0.5"></i>Tempo
                                    <div class="text-[9px] opacity-70 font-mono">[F10]</div>
                                </button>
                                <button type="button" onclick="setMetode('Cicilan')" id="btn_cicilan"
                                        class="metode-btn py-2 text-xs font-bold rounded-lg border-2 border-gray-300 bg-white text-gray-600 transition-all active:scale-95">
                                    <i class="fas fa-credit-card block text-sm mb-0.5"></i>Cicilan
                                    <div class="text-[9px] opacity-70">&nbsp;</div>
                                </button>
                            </div>
                            <input type="hidden" name="metode_pembayaran" id="metode_pembayaran" value="Tunai">
                        </div>

                        <!-- Tunai Fields -->
                        <div id="tunai_fields" class="bg-white rounded-lg border border-green-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Jumlah Uang</label>
                            <div class="flex gap-2">
                                <input type="number" name="jumlah_uang_tunai" id="jumlah_uang_input" value="0" step="any"
                                       oninput="calculateChange()"
                                       class="flex-1 min-w-0 px-3 py-2 text-sm border-2 border-green-300 rounded-lg focus:ring-2 focus:ring-green-500 text-right font-mono font-bold">
                                <button type="button" onclick="setUangPas()"
                                        class="flex-shrink-0 px-3 py-2 bg-green-600 text-white rounded-lg text-xs font-bold hover:bg-green-700 active:bg-green-800">
                                    PAS
                                </button>
                            </div>
                            <div class="flex justify-between items-center bg-green-50 rounded-lg px-3 py-2">
                                <span class="text-sm font-bold text-gray-700">Kembalian</span>
                                <span id="kembalian_display_desktop" class="text-lg font-black text-green-700 font-mono">Rp 0</span>
                            </div>
                        </div>

                        <!-- DP / Cicilan Fields -->
                        <div id="dp_fields" class="hidden bg-white rounded-lg border border-purple-200 p-3 space-y-2">
                            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block">Uang Muka / DP (Rp)</label>
                            <input type="number" name="uang_muka_dp" id="dp_input" value="0" step="any"
                                   class="w-full px-3 py-2 text-sm border-2 border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-right font-mono">
                        </div>

                        <!-- Hidden cart inputs -->
                        <div id="hidden_inputs"></div>
                    </div>

                    <!-- Desktop Action Buttons -->
                    <div class="p-3 space-y-2 border-t border-gray-200 bg-white flex-shrink-0 sticky bottom-0">
                        <button type="submit" id="pay_button" disabled
                                class="w-full py-3 bg-green-600 text-white rounded-xl font-black text-base
                                       disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-green-700 active:bg-green-800
                                       shadow-lg transition-colors flex items-center justify-center gap-2">
                            <i class="fas fa-check-circle"></i>
                            PROSES BAYAR
                            <kbd class="bg-green-800 text-xs px-1.5 py-0.5 rounded font-mono ml-1">F11</kbd>
                        </button>
                        <div class="grid grid-cols-2 gap-2">
                            <button type="button" onclick="clearCart()"
                                    class="py-2 bg-red-50 text-red-700 rounded-lg text-sm font-bold hover:bg-red-100 active:bg-red-200 border border-red-200 flex items-center justify-center gap-1.5">
                                <i class="fas fa-trash text-xs"></i>Kosongkan
                            </button>
                            <button type="button" onclick="closeModal('cashierModal')"
                                    class="py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-bold hover:bg-gray-200 active:bg-gray-300 border border-gray-200 flex items-center justify-center gap-1.5">
                                <i class="fas fa-times text-xs"></i>Tutup
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>

<!-- 3. MODAL DETAIL TRANSAKSI -->
<div id="detailModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden p-3 sm:p-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[95vh] overflow-y-auto">
        <div class="p-4 border-b bg-blue-600 text-white sticky top-0 z-10 flex justify-between items-center">
            <h3 class="font-bold">Detail Transaksi</h3>
            <button onclick="closeModal('detailModal')" class="text-white/70 hover:text-white"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-4">
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-3 bg-gray-50 p-3 rounded-lg text-sm">
                    <div><p class="text-xs text-gray-500">Nota</p><p class="font-bold" id="detail_nota"></p></div>
                    <div><p class="text-xs text-gray-500">Tgl</p><p class="font-bold" id="detail_tanggal"></p></div>
                    <div><p class="text-xs text-gray-500">Pelanggan</p><p class="font-bold" id="detail_customer"></p></div>
                    <div><p class="text-xs text-gray-500">Status</p><p id="detail_status"></p></div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="p-2 text-left">Item</th>
                                <th class="p-2 text-center">Satuan</th>
                                <th class="p-2 text-right">Qty</th>
                                <th class="p-2 text-right">Sub</th>
                            </tr>
                        </thead>
                        <tbody id="detail_items" class="divide-y"></tbody>
                    </table>
                </div>
                <div class="border-t pt-2 space-y-1 text-right text-sm">
                    <p>Total: <span id="detail_total" class="font-bold"></span></p>
                    <p>Diskon: <span id="detail_diskon" class="text-red-600"></span></p>
                    <p class="text-base font-bold text-blue-600">Bayar: <span id="detail_total_bayar"></span></p>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button id="detail_print_btn" type="button"
                        class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-bold hover:bg-green-700 active:bg-green-800">
                    <i class="fas fa-print mr-1"></i>Cetak
                </button>
                <button onclick="closeModal('detailModal')"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- 4. MODAL SUKSES -->
<div id="printSuccessModal" class="modal fixed inset-0 bg-black bg-opacity-60 items-center justify-center z-[70] hidden p-4">
    <div class="bg-white rounded-xl shadow-2xl max-w-sm w-full p-5 text-center">
        <i class="fas fa-check-circle text-green-600 text-4xl mb-3"></i>
        <h3 class="text-lg font-bold mb-1">Transaksi Berhasil!</h3>
        <p class="text-gray-500 text-sm mb-4">Pilih format cetak nota:</p>
        <div class="space-y-2.5">
            <button id="print_success_thermal"
                    class="block w-full py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 active:bg-blue-800">
                <i class="fas fa-desktop mr-2"></i>Thermal Desktop
            </button>
            <a id="print_success_web" href="#" target="_blank" onclick="closeModal('printSuccessModal')"
               class="block w-full py-3 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 active:bg-green-800">
                <i class="fas fa-globe mr-2"></i>Struk Web (58mm)
            </a>
            <a id="print_success_a5" href="#" target="_blank" onclick="closeModal('printSuccessModal')"
               class="block w-full py-3 bg-purple-600 text-white rounded-lg font-bold hover:bg-purple-700 active:bg-purple-800">
                <i class="fas fa-file-invoice mr-2"></i>Invoice A5
            </a>
            <button onclick="closeModal('printSuccessModal')"
                    class="w-full py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm">Tutup</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/html5-qrcode"></script>

<style>
/* Hide scrollbar on shortcut bar (mobile) */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
/* Prevent body scroll when modal open */
body.pos-open { overflow: hidden; }
</style>

<script>
// ============================================================
// GLOBAL STATE
// ============================================================
let cart = [];
let customerType = '';
let searchTimeout;
let currentTotal = 0;
let html5QrCode;
let selectedCartIndex = -1;

// ============================================================
// FEEDBACK
// ============================================================
function playBeep() {
    try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const o = ctx.createOscillator(), g = ctx.createGain();
        o.connect(g); g.connect(ctx.destination);
        o.frequency.value = 880; o.type = 'square';
        g.gain.setValueAtTime(0.3, ctx.currentTime);
        g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
        o.start(ctx.currentTime); o.stop(ctx.currentTime + 0.15);
    } catch(e) {}
}
function triggerVibrate() { if (navigator.vibrate) navigator.vibrate(100); }

// ============================================================
// INIT
// ============================================================
$(document).ready(function() {
    $('#customer_select').select2({ width: '100%', dropdownParent: $('#cashierModal') });
    $('#customer_select').on('select2:select', () => updatePriceType());

    const barcodeInput = document.getElementById('barcode_input');
    if (barcodeInput) {
        barcodeInput.addEventListener('input', e => {
            clearTimeout(searchTimeout);
            const q = e.target.value.trim();
            if (q.length < 2) { hideDropdown(); return; }
            searchTimeout = setTimeout(() => searchProductAutocomplete(q), 280);
        });
        barcodeInput.addEventListener('keydown', e => {
            if (e.key === 'Enter') {
                e.preventDefault();
                const val = barcodeInput.value.trim();
                if (val) { hideDropdown(); searchProductFromScanner(val); }
            }
            if (e.key === 'ArrowDown') { e.preventDefault(); navigateDropdown(1); }
            if (e.key === 'ArrowUp')   { e.preventDefault(); navigateDropdown(-1); }
            if (e.key === 'Escape')    { hideDropdown(); }
        });
    }

    // Print success param
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('print_id')) {
        const pid = urlParams.get('print_id');
        document.getElementById('print_success_thermal').onclick = () => { openTkinterPrint(pid); closeModal('printSuccessModal'); };
        document.getElementById('print_success_web').href  = `/sales/print/${pid}/thermal_web`;
        document.getElementById('print_success_a5').href   = `/sales/print/${pid}/a5`;
        openModal('printSuccessModal');
        window.history.replaceState({}, document.title, window.location.pathname);
    }

    document.addEventListener('keydown', handleGlobalShortcut);
});

// ============================================================
// KEYBOARD SHORTCUTS
// ============================================================
function handleGlobalShortcut(e) {
    const modal  = document.getElementById('cashierModal');
    const isOpen = modal && !modal.classList.contains('hidden');
    const tag    = document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
    const inInput = ['input','select','textarea'].includes(tag)
                 && document.activeElement.id !== 'barcode_input'
                 && document.activeElement.id !== 'search_service';

    if (e.key === 'F12' && !isOpen) { e.preventDefault(); openCashier(); return; }
    if (!isOpen) return;

    switch (e.key) {
        case 'F1':  e.preventDefault(); focusBarcodeInput(); break;
        case 'F2':  e.preventDefault(); editSelectedQty(); break;
        case 'F3':  e.preventDefault(); switchTab('produk'); break;
        case 'F4':  e.preventDefault(); switchTab('jasa'); break;
        case 'F5':  e.preventDefault(); clearCart(); break;
        case 'F8':  e.preventDefault(); setQrisMode(); break;
        case 'F9':  e.preventDefault(); setTunaiMode(); break;
        case 'F10': e.preventDefault(); setTempoMode(); break;
        case 'F11': e.preventDefault(); submitSale(); break;
        case 'Delete':
            if (!inInput) { e.preventDefault(); deleteSelected(); }
            break;
        case 'ArrowDown':
            if (!inInput) { e.preventDefault(); navigateCart(1); }
            break;
        case 'ArrowUp':
            if (!inInput) { e.preventDefault(); navigateCart(-1); }
            break;
        case 'Escape':
            const dd = document.getElementById('product_dropdown');
            if (dd && !dd.classList.contains('hidden')) hideDropdown();
            else closeModal('cashierModal');
            break;
        case '+':
            if (!inInput && selectedCartIndex >= 0) { e.preventDefault(); updateQty(selectedCartIndex, cart[selectedCartIndex].qty + 1); }
            break;
        case '-':
            if (!inInput && selectedCartIndex >= 0 && cart[selectedCartIndex].qty > 1) { e.preventDefault(); updateQty(selectedCartIndex, cart[selectedCartIndex].qty - 1); }
            break;
    }
}

// ============================================================
// CART KEYBOARD NAVIGATION
// ============================================================
function navigateCart(dir) {
    if (!cart.length) return;
    selectedCartIndex = Math.max(0, Math.min(cart.length - 1, selectedCartIndex + dir));
    renderCart();
    const el = document.querySelector(`[data-cart-idx="${selectedCartIndex}"]`);
    if (el) el.scrollIntoView({ block: 'nearest' });
}
function selectCartRow(idx) { selectedCartIndex = idx; renderCart(); }
function editSelectedQty() {
    if (selectedCartIndex < 0) return;
    const inp = document.getElementById(`qty_input_${selectedCartIndex}`);
    if (inp) { inp.focus(); inp.select(); }
}
function deleteSelected() {
    if (selectedCartIndex < 0 || selectedCartIndex >= cart.length) return;
    removeFromCart(selectedCartIndex);
}
function navigateDropdown(dir) {
    const items = [...document.querySelectorAll('#product_dropdown [data-dd-item]')];
    if (!items.length) return;
    let cur = items.findIndex(el => el.classList.contains('bg-blue-100'));
    items.forEach(el => el.classList.remove('bg-blue-100'));
    cur = Math.max(0, Math.min(items.length - 1, cur + dir));
    items[cur].classList.add('bg-blue-100');
    items[cur].scrollIntoView({ block: 'nearest' });
    document.getElementById('product_dropdown').dataset.highlighted = cur;
}

// ============================================================
// MOBILE PAYMENT SHEET TOGGLE
// ============================================================
function togglePaymentSheet() {
    const sheet   = document.getElementById('mob_payment_sheet');
    const chevron = document.getElementById('mob_sheet_chevron');
    const isHidden = sheet.classList.contains('hidden');
    sheet.classList.toggle('hidden', !isHidden);
    chevron.style.transform = isHidden ? 'rotate(180deg)' : '';
    if (isHidden && document.getElementById('metode_pembayaran').value === 'Tunai') {
        setTimeout(() => {
            const mInp = document.getElementById('jumlah_uang_input_mob');
            if (mInp) { mInp.focus(); mInp.select(); }
        }, 80);
    }
}

// ============================================================
// SYNC HELPERS — mobile mirror inputs → real form inputs
// ============================================================
function syncDiskon(val) {
    document.getElementById('diskon_input').value = val || 0;
    calculateTotal();
}
function syncJumlahUang(val) {
    document.getElementById('jumlah_uang_input').value = val || 0;
    calculateChange();
}
function syncDP(val) {
    document.getElementById('dp_input').value = val || 0;
}

// ============================================================
// SHARED PAY BUTTON STATE
// ============================================================
function setPayButtons(disabled) {
    const d = document.getElementById('pay_button');
    const m = document.getElementById('mob_pay_button');
    if (d) d.disabled = disabled;
    if (m) m.disabled = disabled;
}

// ============================================================
// PAYMENT SHORTCUTS
// ============================================================
function setTunaiMode() {
    setMetode('Tunai');
    setTimeout(() => {
        setUangPas();
        document.getElementById('jumlah_uang_input').focus();
        document.getElementById('jumlah_uang_input').select();
        const sheet = document.getElementById('mob_payment_sheet');
        if (sheet && sheet.classList.contains('hidden')) togglePaymentSheet();
        setTimeout(() => {
            const mInp = document.getElementById('jumlah_uang_input_mob');
            if (mInp) { mInp.focus(); mInp.select(); }
        }, 100);
    }, 50);
}
function setQrisMode() { setMetode('Transfer/QRIS'); }
function setTempoMode() { setMetode('Tempo'); }

function setMetode(mode) {
    // Map nilai metode → ID elemen button (tanpa karakter berbahaya)
    const METODE_ID_MAP = {
        'Tunai':         { desk: 'btn_tunai',   mob: 'mob_btn_tunai' },
        'Transfer/QRIS': { desk: 'btn_qris',    mob: 'mob_btn_qris' },
        'Tempo':         { desk: 'btn_tempo',   mob: 'mob_btn_tempo' },
        'Cicilan':       { desk: 'btn_cicilan', mob: 'mob_btn_cicilan' },
    };

    const hiddenInput = document.getElementById('metode_pembayaran');
    if (hiddenInput) hiddenInput.value = mode;

    const colorMap = {
        'Tunai':          'border-green-600 bg-green-600 text-white',
        'Transfer/QRIS':  'border-cyan-600 bg-cyan-600 text-white',
        'Tempo':          'border-purple-600 bg-purple-600 text-white',
        'Cicilan':        'border-blue-600 bg-blue-600 text-white',
    };
    const inactiveD = 'metode-btn py-2 text-xs font-bold rounded-lg border-2 transition-all active:scale-95 border-gray-300 bg-white text-gray-600 hover:border-gray-400';
    const inactiveM = 'mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 transition-all active:scale-95 border-gray-300 bg-white text-gray-600';

    Object.entries(METODE_ID_MAP).forEach(([m, ids]) => {
        const btn  = document.getElementById(ids.desk);
        const mBtn = document.getElementById(ids.mob);
        if (btn)  btn.className  = m === mode ? `metode-btn py-2 text-xs font-bold rounded-lg border-2 transition-all active:scale-95 ${colorMap[m]}` : inactiveD;
        if (mBtn) mBtn.className = m === mode ? `mob-metode-btn py-2.5 text-xs font-bold rounded-lg border-2 transition-all active:scale-95 ${colorMap[m]}` : inactiveM;
    });

    const badge = document.getElementById('mob_metode_badge');
    if (badge) {
        const bc = {
            'Tunai':         'bg-green-100 text-green-700 border-green-200',
            'Transfer/QRIS': 'bg-cyan-100 text-cyan-700 border-cyan-200',
            'Tempo':         'bg-purple-100 text-purple-700 border-purple-200',
            'Cicilan':       'bg-blue-100 text-blue-700 border-blue-200',
        };
        badge.textContent = mode;
        badge.className   = `text-[10px] px-2 py-0.5 rounded-full font-bold border ${bc[mode] || bc['Tunai']}`;
    }
    togglePaymentFields();
}

function submitSale() {
    if (!document.getElementById('pay_button').disabled)
        document.getElementById('cashierForm').submit();
}
function focusBarcodeInput() {
    const prodPanel = document.getElementById('panel_produk');
    if (prodPanel && !prodPanel.classList.contains('hidden')) {
        document.getElementById('barcode_input').focus();
        document.getElementById('barcode_input').select();
    } else {
        document.getElementById('search_service').focus();
    }
}

// ============================================================
// PRINTING
// ============================================================
function showPrintChoice(saleId) {
    document.getElementById('btnChoiceThermal').onclick    = () => { openTkinterPrint(saleId); closeModal('printChoiceModal'); };
    document.getElementById('linkChoiceWebThermal').href   = `/sales/print/${saleId}/thermal_web`;
    document.getElementById('linkChoiceA5').href           = `/sales/print/${saleId}/a5`;
    openModal('printChoiceModal');
}
function openTkinterPrint(saleId) {
    fetch(`/sales/open_print_dialog/${saleId}`)
        .then(r => r.json())
        .then(d => { if (!d.success) alert('Gagal: ' + d.message); })
        .catch(() => alert('Koneksi server print terputus.'));
}

// ============================================================
// OPEN / CLOSE CASHIER
// ============================================================
function openCashier() {
    cart = []; selectedCartIndex = -1;
    renderCart();
    openModal('cashierModal');
    document.body.classList.add('pos-open');
    switchTab('produk');
    setMetode('Tunai');

    const def = $('#customer_select').find('option[data-default="true"]').val();
    if (def) $('#customer_select').val(def).trigger('change');

    // Reset semua input — desktop
    document.getElementById('jumlah_uang_input').value = 0;
    document.getElementById('diskon_input').value      = 0;
    // Reset semua input — mobile mirror
    const mJumlah = document.getElementById('jumlah_uang_input_mob');
    const mDiskon = document.getElementById('diskon_input_mob');
    const mDP     = document.getElementById('dp_input_mob');
    if (mJumlah) mJumlah.value = 0;
    if (mDiskon) mDiskon.value = 0;
    if (mDP)     mDP.value     = 0;
    // Tutup payment sheet (collapsed by default)
    const sheet = document.getElementById('mob_payment_sheet');
    if (sheet) sheet.classList.add('hidden');
    const chevron = document.getElementById('mob_sheet_chevron');
    if (chevron) chevron.style.transform = '';

    setTimeout(() => focusBarcodeInput(), 150);
}

// Patch closeModal to remove body lock
const _origClose = window.closeModal;
window.closeModal = function(id) {
    if (id === 'cashierModal') document.body.classList.remove('pos-open');
    if (typeof _origClose === 'function') _origClose(id);
    else {
        const el = document.getElementById(id);
        if (el) { el.classList.add('hidden'); el.classList.remove('flex'); }
    }
};

// ============================================================
// TABS
// ============================================================
function switchTab(tab) {
    const prodPanel      = document.getElementById('panel_produk');
    const jasaInput      = document.getElementById('panel_jasa_input');
    const jasaResults    = document.getElementById('panel_jasa');
    const tabProduk      = document.getElementById('tab_produk');
    const tabJasa        = document.getElementById('tab_jasa');
    const btnCamera      = document.getElementById('btn_camera');

    const activeP  = 'px-2.5 py-1.5 text-xs font-bold text-white bg-blue-600 transition-colors';
    const inactiveP= 'px-2.5 py-1.5 text-xs font-bold text-gray-500 bg-white hover:bg-blue-50 transition-colors';
    const activeJ  = 'px-2.5 py-1.5 text-xs font-bold text-white bg-purple-600 transition-colors';
    const inactiveJ= 'px-2.5 py-1.5 text-xs font-bold text-gray-500 bg-white hover:bg-purple-50 transition-colors';

    if (tab === 'produk') {
        prodPanel.classList.remove('hidden');
        jasaInput.classList.add('hidden');
        jasaResults.classList.add('hidden');
        tabProduk.className = activeP;
        tabJasa.className   = inactiveJ;
        btnCamera.classList.remove('hidden');
        setTimeout(() => document.getElementById('barcode_input').focus(), 80);
    } else {
        prodPanel.classList.add('hidden');
        jasaInput.classList.remove('hidden');
        jasaResults.classList.remove('hidden');
        tabProduk.className = inactiveP;
        tabJasa.className   = activeJ;
        btnCamera.classList.add('hidden');
        searchService('');
        setTimeout(() => document.getElementById('search_service').focus(), 80);
    }
}

// ============================================================
// SCANNER
// ============================================================
async function startScanner() {
    document.getElementById('scanner-container').classList.remove('hidden');
    html5QrCode = new Html5Qrcode('reader');
    try {
        await html5QrCode.start(
            { facingMode: 'environment' },
            { fps: 15, qrbox: { width: 280, height: 120 } },
            text => {
                playBeep(); triggerVibrate();
                document.getElementById('barcode_input').value = text;
                searchProductFromScanner(text);
                stopScanner();
            }
        );
    } catch {
        alert('Kamera gagal diakses. Gunakan input manual.');
        document.getElementById('scanner-container').classList.add('hidden');
    }
}
function stopScanner() {
    if (html5QrCode && html5QrCode.isScanning)
        html5QrCode.stop().then(() => document.getElementById('scanner-container').classList.add('hidden'));
    else
        document.getElementById('scanner-container').classList.add('hidden');
}

// ============================================================
// PRODUCT SEARCH
// ============================================================
function searchProductFromScanner(barcode) {
    fetch('/api/product/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: barcode })
    }).then(r => r.json()).then(data => {
        if (data.success) {
            addToCart(data.product);
            playBeep();
            document.getElementById('barcode_input').value = '';
            document.getElementById('barcode_input').focus();
        } else {
            const inp = document.getElementById('barcode_input');
            inp.classList.add('border-red-500', 'bg-red-50');
            inp.placeholder = `"${barcode}" tidak ditemukan`;
            setTimeout(() => {
                inp.classList.remove('border-red-500', 'bg-red-50');
                inp.placeholder = 'Scan / ketik produk...';
                inp.value = ''; inp.focus();
            }, 1500);
        }
    });
}

function searchProductAutocomplete(query) {
    fetch('/api/products/autocomplete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, type: 'product' })
    }).then(r => r.json()).then(data => {
        const dd = document.getElementById('product_dropdown');
        dd.innerHTML = '';
        if (data.success && data.products.length > 0) {
            data.products.forEach((p, idx) => {
                const price = customerType === 'Sub Agen' ? p.harga_grosir : p.harga_ecer;
                const div = document.createElement('div');
                div.setAttribute('data-dd-item', idx);
                div.className = 'p-2.5 hover:bg-blue-50 active:bg-blue-100 cursor-pointer border-b last:border-0 text-sm flex justify-between items-center transition-colors';
                div.innerHTML = `
                    <div class="min-w-0 mr-2">
                        <div class="font-semibold text-gray-800 truncate">${p.nama}</div>
                        <div class="text-xs text-gray-500">Stok: ${p.stok}</div>
                    </div>
                    <div class="text-right flex-shrink-0 font-bold text-blue-700 text-sm">Rp ${price.toLocaleString('id-ID')}</div>`;
                div.onclick = () => {
                    addToCart(p); hideDropdown();
                    document.getElementById('barcode_input').value = '';
                    document.getElementById('barcode_input').focus();
                };
                dd.appendChild(div);
            });
            dd.classList.remove('hidden');
        } else {
            hideDropdown();
        }
    });
}

function hideDropdown() {
    const dd = document.getElementById('product_dropdown');
    if (dd) dd.classList.add('hidden');
}

function searchService(query) {
    fetch('/api/products/autocomplete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: query || ' ', type: 'service' })
    }).then(r => r.json()).then(data => {
        const container = document.getElementById('service_results');
        container.innerHTML = '';
        if (data.success) {
            data.products.forEach(p => {
                const btn = document.createElement('div');
                btn.className = 'p-2.5 bg-purple-50 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-100 active:bg-purple-200 text-center transition-colors';
                btn.innerHTML = `<div class="font-bold text-xs truncate text-purple-800">${p.nama}</div><div class="text-xs text-purple-600 mt-0.5">Rp ${p.harga_ecer.toLocaleString('id-ID')}</div>`;
                btn.onclick = () => { addToCart(p); playBeep(); };
                container.appendChild(btn);
            });
        }
    });
}

// ============================================================
// CART LOGIC
// ============================================================
function updatePriceType() {
    const opt = document.getElementById('customer_select').selectedOptions[0];
    if (!opt) return;
    customerType = opt.getAttribute('data-jenis');
    const isGrosir = customerType === 'Sub Agen';
    document.getElementById('priceInfo').textContent = isGrosir ? '💰 Grosir' : '💰 Ecer';
    document.getElementById('hdr_price_mode').classList.toggle('hidden', !isGrosir);
    cart.forEach((item, i) => changeUnit(i, item.selectedUnit));
    renderCart();
}

function addToCart(product) {
    const unitToUse = product.satuan || 'Pcs';
    const idx = cart.findIndex(i => i.id === product.id && i.selectedUnit === unitToUse);
    if (idx >= 0) {
        cart[idx].qty++;
        selectedCartIndex = idx;
    } else {
        const basePrice = customerType === 'Sub Agen' ? product.harga_grosir : product.harga_ecer;
        cart.push({
            id: product.id, nama: product.nama, price: basePrice,
            harga_ecer_base: product.harga_ecer, harga_grosir_base: product.harga_grosir,
            qty: 1, stok: product.stok,
            satuan_base: product.satuan || 'Pcs', selectedUnit: unitToUse,
            units: product.units || []
        });
        selectedCartIndex = cart.length - 1;
    }
    renderCart();
    // Scroll newly added item into view
    setTimeout(() => {
        const el = document.querySelector(`[data-cart-idx="${selectedCartIndex}"]`);
        if (el) el.scrollIntoView({ block: 'nearest' });
    }, 30);
}

function changeUnit(idx, unitName) {
    const item = cart[idx];
    item.selectedUnit = unitName;
    const unitObj = item.units.find(u => u.nama === unitName);
    if (unitObj) {
        if (customerType === 'Sub Agen' && unitObj.grosir > 0) item.price = unitObj.grosir;
        else item.price = unitObj.ecer > 0 ? unitObj.ecer
            : (customerType === 'Sub Agen' ? item.harga_grosir_base : item.harga_ecer_base) * unitObj.qty;
    } else {
        item.price = customerType === 'Sub Agen' ? item.harga_grosir_base : item.harga_ecer_base;
    }
    renderCart();
}

function renderCart() {
    const dBody = document.getElementById('cart_items_desktop');
    const mBody = document.getElementById('cart_items_mobile');
    const hBody = document.getElementById('hidden_inputs');
    dBody.innerHTML = ''; mBody.innerHTML = ''; hBody.innerHTML = '';

    if (cart.length === 0) {
        dBody.innerHTML = `<tr><td colspan="7" class="py-10 text-center text-gray-400">
            <i class="fas fa-shopping-cart text-3xl block mb-2 opacity-25"></i>
            <p class="text-sm">Keranjang kosong</p>
            <p class="text-xs text-gray-300 mt-1">Scan barcode atau pilih produk</p>
        </td></tr>`;
        mBody.innerHTML = `<div class="py-10 text-center text-gray-400">
            <i class="fas fa-shopping-cart text-3xl block mb-2 opacity-25"></i>
            <p class="text-sm">Keranjang kosong</p>
        </div>`;
        setPayButtons(true);
    } else {
        cart.forEach((item, i) => {
            const sub = item.price * item.qty;
            const sel = i === selectedCartIndex;
            let opts = `<option value="${item.satuan_base}" ${item.selectedUnit === item.satuan_base ? 'selected':''}>${item.satuan_base}</option>`;
            item.units.forEach(u => opts += `<option value="${u.nama}" ${item.selectedUnit === u.nama ? 'selected':''}>${u.nama}</option>`);
            const unitSel = `<select onclick="event.stopPropagation()" onchange="changeUnit(${i},this.value)" class="border rounded text-xs px-1 py-0.5 bg-white">${opts}</select>`;

            // ── Desktop row ──
            dBody.innerHTML += `
            <tr data-cart-idx="${i}" onclick="selectCartRow(${i})"
                class="border-b cursor-pointer transition-colors ${sel ? 'bg-blue-50 ring-1 ring-inset ring-blue-400' : 'hover:bg-gray-50'}">
                <td class="px-2 py-2.5 text-center text-xs text-gray-400 font-mono">${i+1}</td>
                <td class="px-3 py-2.5 font-medium text-gray-800 text-sm">${item.nama}</td>
                <td class="px-2 py-2.5 text-center">${unitSel}</td>
                <td class="px-2 py-2.5 text-right text-sm text-gray-600 font-mono">Rp ${item.price.toLocaleString('id-ID')}</td>
                <td class="px-2 py-2.5 text-center">
                    <div class="flex items-center justify-center gap-1">
                        <button type="button" onclick="event.stopPropagation();updateQty(${i},(cart[${i}].qty||1)-1)"
                                class="w-7 h-7 rounded-full bg-gray-200 hover:bg-red-100 hover:text-red-600 font-bold text-base flex items-center justify-center transition-colors">−</button>
                        <input type="number" id="qty_input_${i}" value="${item.qty}" min="1"
                               onchange="event.stopPropagation();updateQty(${i},this.value)"
                               onclick="event.stopPropagation()"
                               class="w-12 text-center text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 py-1 font-bold">
                        <button type="button" onclick="event.stopPropagation();updateQty(${i},(cart[${i}].qty||1)+1)"
                                class="w-7 h-7 rounded-full bg-gray-200 hover:bg-green-100 hover:text-green-600 font-bold text-base flex items-center justify-center transition-colors">+</button>
                    </div>
                </td>
                <td class="px-2 py-2.5 text-right font-bold text-gray-900 font-mono">Rp ${sub.toLocaleString('id-ID')}</td>
                <td class="px-2 py-2.5 text-center">
                    <button type="button" onclick="event.stopPropagation();removeFromCart(${i})"
                            class="text-red-400 hover:text-red-600 active:text-red-800 transition-colors p-1">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                </td>
            </tr>`;

            // ── Mobile card ──
            mBody.innerHTML += `
            <div data-cart-idx="${i}" onclick="selectCartRow(${i})"
                 class="px-3 py-2.5 transition-colors ${sel ? 'bg-blue-50 border-l-4 border-blue-500' : 'border-l-4 border-transparent'}">
                <div class="flex items-start justify-between gap-2 mb-1.5">
                    <div class="flex-1 min-w-0">
                        <div class="font-semibold text-gray-900 text-sm truncate">${item.nama}</div>
                        <div class="text-xs text-gray-500">@ Rp ${item.price.toLocaleString('id-ID')}</div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <div class="font-black text-gray-900 font-mono text-sm">Rp ${sub.toLocaleString('id-ID')}</div>
                        <button type="button" onclick="event.stopPropagation();removeFromCart(${i})"
                                class="text-red-400 text-xs mt-0.5 active:text-red-700">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    ${unitSel}
                    <div class="flex items-center border rounded-lg overflow-hidden flex-shrink-0">
                        <button type="button" onclick="event.stopPropagation();updateQty(${i},(cart[${i}].qty||1)-1)"
                                class="px-3 py-1.5 bg-gray-100 active:bg-gray-200 text-gray-700 font-bold text-base leading-none">−</button>
                        <input type="number" value="${item.qty}" min="1"
                               onchange="event.stopPropagation();updateQty(${i},this.value)"
                               onclick="event.stopPropagation()"
                               class="w-12 text-center text-sm border-x focus:outline-none py-1.5 font-bold">
                        <button type="button" onclick="event.stopPropagation();updateQty(${i},(cart[${i}].qty||1)+1)"
                                class="px-3 py-1.5 bg-gray-100 active:bg-gray-200 text-gray-700 font-bold text-base leading-none">+</button>
                    </div>
                </div>
            </div>`;

            hBody.innerHTML += `
            <input type="hidden" name="product_id[]" value="${item.id}">
            <input type="hidden" name="qty[]" value="${item.qty}">
            <input type="hidden" name="satuan[]" value="${item.selectedUnit}">`;
        });
        setPayButtons(false);
    }
    document.getElementById('cart_count').textContent = cart.length;
    calculateTotal();
}

function updateQty(i, v) {
    const val = parseInt(v);
    cart[i].qty = (!val || val < 1) ? 1 : val;
    renderCart();
}
function removeFromCart(i) {
    cart.splice(i, 1);
    if (selectedCartIndex >= cart.length) selectedCartIndex = cart.length - 1;
    renderCart();
}
function clearCart() {
    if (!cart.length) return;
    if (confirm('Kosongkan semua item di keranjang?')) {
        cart = []; selectedCartIndex = -1;
        renderCart(); focusBarcodeInput();
    }
}

// ============================================================
// PAYMENT
// ============================================================
function calculateTotal() {
    let sub = 0;
    cart.forEach(i => sub += i.price * i.qty);
    const disc = parseFloat(document.getElementById('diskon_input').value) || 0;
    currentTotal = Math.max(0, sub - disc);
    const fmt = v => 'Rp ' + v.toLocaleString('id-ID');
    // Desktop displays
    const sd = document.getElementById('subtotal_display');
    const td = document.getElementById('total_display');
    const ts = document.getElementById('total_display_side');
    if (sd) sd.textContent = fmt(sub);
    if (td) td.textContent = fmt(currentTotal);
    if (ts) ts.textContent = fmt(currentTotal);
    // Mobile displays
    const sdm = document.getElementById('subtotal_display_mob');
    const tdm = document.getElementById('total_display_mob');
    const hdr = document.getElementById('hdr_total');
    const mob = document.getElementById('mob_total_display');
    if (sdm) sdm.textContent = fmt(sub);
    if (tdm) tdm.textContent = fmt(currentTotal);
    if (hdr) hdr.textContent = fmt(currentTotal);
    if (mob) mob.textContent = fmt(currentTotal);
    calculateChange();
}

function togglePaymentFields() {
    const m = document.getElementById('metode_pembayaran').value;
    // Transfer/QRIS diperlakukan sama seperti Tunai: langsung lunas, tanpa DP
    const isCash = (m === 'Tunai' || m === 'Transfer/QRIS');
    // Desktop
    const tf = document.getElementById('tunai_fields');
    const df = document.getElementById('dp_fields');
    if (tf) tf.classList.toggle('hidden', !isCash);
    if (df) df.classList.toggle('hidden', isCash);
    // Mobile
    const mtf = document.getElementById('mob_tunai_fields');
    const mdf = document.getElementById('mob_dp_fields');
    if (mtf) mtf.classList.toggle('hidden', !isCash);
    if (mdf) mdf.classList.toggle('hidden', isCash);
    calculateChange();
}

function calculateChange() {
    const m = document.getElementById('metode_pembayaran').value;
    const isCash = (m === 'Tunai' || m === 'Transfer/QRIS');
    // Baca dari real input (desktop)
    const uangInput = document.getElementById('jumlah_uang_input');
    const uang      = parseFloat(uangInput.value) || 0;
    const kembali   = uang - currentTotal;
    const kembaliStr = 'Rp ' + (kembali > 0 ? kembali.toLocaleString('id-ID') : '0');

    const belumIsi = isCash && uang <= 0;
    const kurang   = isCash && uang > 0 && kembali < 0;

    // Update kembalian — mobile
    const kMob = document.getElementById('kembalian_display');
    if (kMob) {
        kMob.textContent = kembaliStr;
        kMob.className   = `text-lg font-black font-mono ${kurang ? 'text-red-600' : 'text-green-700'}`;
    }
    // Update kembalian — desktop
    const kDsk = document.getElementById('kembalian_display_desktop');
    if (kDsk) {
        kDsk.textContent = kembaliStr;
        kDsk.className   = `text-lg font-black font-mono ${kurang ? 'text-red-600' : 'text-green-700'}`;
    }

    // Visual feedback pada input desktop
    if (isCash) {
        if (belumIsi) {
            uangInput.classList.add('border-orange-400', 'bg-orange-50');
            uangInput.classList.remove('border-green-300', 'border-red-400', 'bg-red-50');
        } else if (kurang) {
            uangInput.classList.add('border-red-400', 'bg-red-50');
            uangInput.classList.remove('border-orange-400', 'bg-orange-50', 'border-green-300');
        } else {
            uangInput.classList.add('border-green-300');
            uangInput.classList.remove('border-orange-400', 'bg-orange-50', 'border-red-400', 'bg-red-50');
        }
    }
    // Visual feedback pada input mobile
    const mInp = document.getElementById('jumlah_uang_input_mob');
    if (mInp && isCash) {
        if (belumIsi) {
            mInp.classList.add('border-orange-400', 'bg-orange-50');
            mInp.classList.remove('border-green-300', 'border-red-400', 'bg-red-50');
        } else if (kurang) {
            mInp.classList.add('border-red-400', 'bg-red-50');
            mInp.classList.remove('border-orange-400', 'bg-orange-50', 'border-green-300');
        } else {
            mInp.classList.add('border-green-300');
            mInp.classList.remove('border-orange-400', 'bg-orange-50', 'border-red-400', 'bg-red-50');
        }
    }

    setPayButtons(belumIsi || kurang || cart.length === 0);
}

function setUangPas() {
    // Set real (desktop) input
    document.getElementById('jumlah_uang_input').value = currentTotal;
    // Sync ke mobile mirror
    const mInp = document.getElementById('jumlah_uang_input_mob');
    if (mInp) mInp.value = currentTotal;
    calculateChange();
}

// ============================================================
// DETAIL MODAL
// ============================================================
function viewDetail(id) {
    fetch(`/sales/detail/${id}`).then(r => r.json()).then(d => {
        document.getElementById('detail_nota').textContent       = d.nomor_nota;
        document.getElementById('detail_tanggal').textContent    = d.tanggal;
        document.getElementById('detail_customer').textContent   = d.customer;
        document.getElementById('detail_total').textContent      = 'Rp ' + d.total.toLocaleString('id-ID');
        document.getElementById('detail_diskon').textContent     = 'Rp ' + d.diskon.toLocaleString('id-ID');
        document.getElementById('detail_total_bayar').textContent= 'Rp ' + d.total_bayar.toLocaleString('id-ID');
        document.getElementById('detail_status').innerHTML = d.status === 'Lunas'
            ? '<span class="text-green-600 font-bold">Lunas</span>'
            : '<span class="text-red-600 font-bold">Belum Lunas</span>';
        let html = '';
        d.items.forEach(i => html += `<tr class="border-b">
            <td class="p-2">${i.nama}</td>
            <td class="p-2 text-center">${i.satuan||'-'}</td>
            <td class="p-2 text-right">${i.qty}</td>
            <td class="p-2 text-right">Rp ${i.subtotal.toLocaleString('id-ID')}</td>
        </tr>`);
        document.getElementById('detail_items').innerHTML = html;
        document.getElementById('detail_print_btn').onclick = () => { closeModal('detailModal'); showPrintChoice(id); };
        openModal('detailModal');
    });
}
</script>
{% endblock %}