{{-- Payment Interface (Full Screen) - Included by cashier_pos.blade.php --}}
<!-- Payment Interface (Full Screen) -->
<div id="paymentInterface" class="hidden fixed inset-0 bg-white z-50">
    <div class="h-full flex flex-col">
        <div class="bg-white border-b border-gray-200 px-6 py-4 shadow-sm">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <button onclick="backToMain()" class="text-gray-700 p-2 rounded-lg hover:bg-gray-100" title="Back to POS">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </button>
                    <div>
                        <h2 class="text-2xl font-bold text-black">PAYMENT PROCESSING</h2>
                        <p class="text-sm text-gray-500">Complete your transaction</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-base font-bold text-gray-600">Trans: <span id="paymentTransNo">...</span></p>
                    <p class="text-base text-gray-500" id="paymentTime">09:02 PM</p>
                </div>
            </div>   
        </div>
        <div class="flex-1 overflow-hidden bg-gray-100">
            <div class="h-full max-w-[96rem] mx-auto p-4 flex justify-center">
                <div class="w-full h-full flex flex-col lg:flex-row gap-4 items-stretch">
                    <!-- LEFT: Current Order -->
                    <div class="flex-1 min-w-0 flex flex-col gap-4 h-full">
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-5 flex-shrink-0">
                            <div class="space-y-3 text-base">
                                <div class="flex justify-between text-gray-700">
                                    <span>Subtotal:</span>
                                    <span class="font-semibold text-lg" id="paymentSubtotal">₱0.00</span>
                                </div>
                                <div class="flex justify-between text-gray-700">
                                    <span>Discount:</span>
                                    <span class="font-semibold text-lg text-red-600" id="paymentDiscount">₱0.00</span>
                                </div>
                                <div class="flex justify-between text-gray-700">
                                    <span>Service Charge:</span>
                                    <span class="font-semibold text-lg" id="paymentServiceCharge">₱0.00</span>
                                </div>
                                <div class="border-t-2 border-gray-300 pt-3 flex justify-between items-center">
                                    <span class="text-xl font-bold text-black">TOTAL:</span>
                                    <span class="text-3xl font-bold text-black" id="paymentGrandTotal">₱0.00</span>
                                </div>
                            </div>
                        </div>
                        <!-- Cart Items List -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-5 flex-1 flex flex-col overflow-hidden hidden">
                            <h3 class="text-lg font-bold text-black mb-4">Order Items</h3>
                            <div class="flex-1 overflow-y-auto" id="paymentCartItems">
                                <div class="text-center text-gray-400 py-8">
                                    <i class="fas fa-shopping-cart text-4xl mb-3 opacity-30"></i>
                                    <p>No items in cart</p>     
                                </div>
                            </div>
                        </div>
                        <div id="cashPaymentArea" class="rounded-xl border border-gray-200 overflow-hidden flex-shrink-0 flex flex-col">
                            <div class="bg-[#1E1E1E]/80 text-white px-6 py-4 flex-1 flex flex-col justify-center">
                                <div class="mb-2">
                                    <div class="text-sm text-white">Amount Payable</div>
                                    <div class="text-2xl font-bold" id="amountPayableDisplay">₱0.00</div>
                                </div>
                                <div class="border-t border-gray-500 pt-3 mt-3">
                                    <div class="text-sm text-white">Tender Amount</div>
                                    <input type="number" id="amountTendered" placeholder="0.00" step="any" value=""
                                        onkeydown="if(event.key==='Enter'){ event.preventDefault(); event.stopPropagation(); handleCompletePaymentClick(); }"
                                        class="w-full mt-1 bg-transparent text-2xl font-bold text-white placeholder-white/70 border-none p-0 focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                </div>
                            </div>
                            <div id="changeArea" class="px-6 py-4 bg-black border-t-2 border-black flex-shrink-0">
                                <div class="flex justify-between items-center">
                                    <span class="text-white font-semibold text-lg">CHANGE</span>
                                    <span class="text-2xl font-bold" id="changeAmount">₱0.00</span>
                                </div>    
                            </div>     
                        </div>
                        <!-- Payment Details -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6 flex-1 flex flex-col">
                            <h3 class="text-lg font-bold text-black mb-5">Payment Details</h3>
                            <div class="space-y-5 flex-1 flex flex-col">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-base text-gray-700 mb-3">Mode / Type / Kind</label>
                                       <select id="paymentMethodSelect" class="w-full px-6 py-4 border border-gray-300 rounded-xl bg-white text-gray-800 text-base focus:outline-none focus:ring-2 focus:ring-[#DDE2FF]">
                                            <option value="" selected>Select Payment</option>
                                            <option value="cash">CASH</option>
                                            <option value="card">CARD</option>
                                            <option value="gcash">GCASH</option>
                                            <option value="bank2bank">BANK2BANK</option>
                                            <option value="check">CHECK</option>
                                            <option value="other">OTHER</option>
                                            <option value="split">SPLIT</option>
                                            <option value="add_new" class="text-blue-600 font-semibold">+ ADD PAYMENT METHOD</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-base text-gray-700 mb-3">Description/Ver. Notes</label>
                                        <div class="flex items-center gap-3">
                                            <select class="flex-1 px-6 py-4 border border-gray-300 rounded-xl bg-white text-gray-800 text-base focus:outline-none focus:ring-2 focus:ring-[#DDE2FF]">
                                                <option value="onspot" selected>ONSPOT</option>
                                                <option value="deferred">DEFERRED</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <button type="button" onclick="openOverAllDiscountModal()" class="px-5 py-4 rounded-xl border-2 border-gray-300 bg-white text-black text-sm font-medium hover:bg-gray-50 text-left">
                                        <span class="text-gray-500">[ F4 ]</span> <u>Over All Discount</u>
                                    </button>
                                    <button type="button" onclick="openSplitPaymentsModal()" class="px-5 py-4 rounded-xl border-2 border-gray-300 bg-white text-black text-sm font-medium hover:bg-gray-50 text-left">
                                        <span class="text-gray-500">[ F1 ]</span> <u>Split Payments</u>
                                    </button>
                                    <button type="button" onclick="openSubsidyModal()" class="px-5 py-4 rounded-xl border-2 border-gray-300 bg-white text-black text-sm font-medium hover:bg-gray-50 text-left">
                                        <span class="text-gray-500">[ F3 ]</span> <u>Subsidy</u>
                                    </button>
                                    <button type="button" onclick="autoPayWithoutPrint()" class="px-5 py-4 rounded-xl border-2 border-gray-300 bg-white text-black text-sm font-medium hover:bg-gray-50 text-left">
                                        <span class="text-gray-500">[ F7 ]</span> <u>Auto Pay w/o Print</u>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- CENTER: Sales Order Option, Serve & Delivery -->
                    <div class="w-full lg:w-[300px] flex-shrink-0 flex flex-col gap-4 h-full">
                        <!-- Sales Order Option -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6 flex-1 flex flex-col">
                            <h3 class="text-lg font-bold text-black mb-5">Sales Order Option</h3>
                            <div class="space-y-4 flex-1 flex flex-col justify-between">
                                <button type="button" onclick="openOutrightSaleModal()" class="w-full text-left px-6 py-5 rounded-xl border-2 border-gray-300 bg-white text-black text-base font-medium hover:bg-gray-50">
                                    <span class="text-gray-500">[ F5 ]</span> Outright Sale
                                </button>
                                <button type="button" onclick="openReservedModal()" class="w-full text-left px-6 py-5 rounded-xl border-2 border-gray-300 bg-white text-black text-base font-medium hover:bg-gray-50">
                                    <span class="text-gray-500">[ F6 ]</span> Reserved
                                </button>
                                <button type="button" onclick="openCreditTermsModal()" class="w-full text-left px-6 py-5 rounded-xl border-2 border-gray-300 bg-white text-black text-base font-medium hover:bg-gray-50">
                                    <span class="text-gray-500">[ F10 ]</span> Credit/Terms
                                </button>
                                <button type="button" onclick="openFreeChargeModal()" class="w-full text-left px-6 py-5 rounded-xl border-2 border-gray-300 bg-white text-black text-base font-medium hover:bg-gray-50">
                                    <span class="text-gray-500">[ F11 ]</span> Free Charge
                                </button>
                            </div>
                        </div>
                        <!-- Serve & Delivery -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-5 flex-1 flex flex-col">
                            <h3 class="text-lg font-bold text-black mb-4">Serve & Delivery</h3>
                            <div class="space-y-3 flex-1 flex flex-col">
                                <div>
                                    <label class="block text-sm text-gray-700 mb-2">OUT*R</label>
                                    <select class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#DDE2FF]">
                                        <option value="none" selected>NONE</option>
                                        <option value="dine-in">Dine In</option>
                                        <option value="takeout">Take Out</option>
                                        <option value="delivery">Delivery</option>
                                    </select>
                                </div>
                                <div class="text-sm text-gray-700">Outright Released Sale</div>
                                <button type="button" onclick="openVoidModalForWhole()" class="w-full mt-3 px-4 py-3 rounded-xl border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 font-medium text-center" title="Void entire transaction">
                                    <i class="fas fa-ban mr-1"></i> Void Transaction
                                </button>
                                <button type="button" onclick="openCancelAndExchangeModal()" class="w-full mt-3 px-4 py-3 rounded-xl border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 font-medium text-center" title="Cancel and choose other products with same amount">
                                    <i class="fas fa-times-circle mr-1"></i> Cancel
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT: Number keypad (top) + Payment method (below) -->
                    <div class="w-full lg:w-[480px] flex-shrink-0 flex flex-col gap-4 h-full">
                        <!-- Number keypad -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-5 flex-1 flex flex-col">
                            <div class="grid gap-3 keypad-grid flex-1 min-h-0" style="grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr;">
                                <button type="button" onclick="keypadInput('1')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">1</button>
                                <button type="button" onclick="keypadInput('2')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">2</button>
                                <button type="button" onclick="keypadInput('3')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">3</button>
                                <button type="button" onclick="keypadInput('4')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">4</button>
                                <button type="button" onclick="keypadInput('5')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">5</button>
                                <button type="button" onclick="keypadInput('6')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">6</button>
                                <button type="button" onclick="keypadInput('7')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">7</button>
                                <button type="button" onclick="keypadInput('8')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">8</button>
                                <button type="button" onclick="keypadInput('9')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">9</button>
                                <button type="button" onclick="keypadInput('0')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">0</button>
                                <button type="button" onclick="keypadInput('.')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">.</button>
                                <button type="button" onclick="keypadDel()" class="keypad-btn min-h-[3.25rem] text-base border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">DEL</button>
                                <button type="button" onclick="keypadBksp()" class="keypad-btn min-h-[3.25rem] text-base border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">BKSP</button>
                                <button type="button" onclick="handleCompletePaymentClick()" class="keypad-btn min-h-[3.25rem] text-lg col-span-2 border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">ENTER</button>
                                <button type="button" onclick="keypadEquals()" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">=</button>
                                <button type="button" onclick="keypadInput('+')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">+</button>
                                <button type="button" onclick="keypadInput('-')" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-gray-50 font-bold text-black hover:bg-gray-100">−</button>
                                <button type="button" onclick="keypadPayExact()" class="keypad-btn min-h-[3.25rem] text-sm col-span-2 border border-gray-300 rounded-xl bg-[#EB0A1E]/20 font-bold text-black hover:bg-gray-100">Yes Pay Exact</button>
                                <button type="button" onclick="keypadPreset(10)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">10</button>
                                <button type="button" onclick="keypadPreset(20)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">20</button>
                                <button type="button" onclick="keypadPreset(50)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">50</button>
                                <button type="button" onclick="keypadPayLater()" class="keypad-btn min-h-[3.25rem] text-xs col-span-2 border border-gray-300 rounded-xl bg-[#EB0A1E]/20 font-bold text-black hover:bg-gray-100">No Payment & Pay It Later</button>
                                <button type="button" onclick="keypadPreset(100)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">100</button>
                                <button type="button" onclick="keypadPreset(500)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">500</button>
                                <button type="button" onclick="keypadPreset(1000)" class="keypad-btn min-h-[3.25rem] text-xl border border-gray-300 rounded-xl bg-[#7DF9FF]/40 font-bold text-black hover:bg-gray-100">1000</button>
                                <button type="button" onclick="keypadCOD()" class="keypad-btn min-h-[3.25rem] text-xs col-span-2 border border-gray-300 rounded-xl bg-[#EB0A1E]/20 font-bold text-black hover:bg-gray-100">[COD] Cash On Delivery</button>
                            </div>
                        </div>      

                        <!-- Select Payment Method (below keypad) -->
                        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 flex-shrink-0">
                            <h3 class="text-base font-bold text-black mb-3">Select Payment Method</h3>
                            <div class="grid grid-cols-3 gap-2.5">
                                <button type="button" data-method="cash" onclick="selectPaymentMethod('cash')" class="payment-method-btn p-3 border border-gray-300 rounded-lg text-black">
                                    <i class="fas fa-money-bill-wave text-2xl text-black mb-1.5"></i>
                                    <div class="font-bold text-sm">CASH</div>
                                </button>
                                <button type="button" data-method="card" onclick="selectPaymentMethod('card')" class="payment-method-btn p-3 border border-gray-300 rounded-lg text-black">
                                    <i class="fas fa-credit-card text-2xl text-black mb-1.5"></i>
                                    <div class="font-bold text-sm">CARD</div>
                                </button>
                                <button type="button" data-method="gcash" onclick="selectPaymentMethod('gcash')" class="payment-method-btn p-3 border border-gray-300 rounded-lg text-black">
                                    <i class="fas fa-mobile-alt text-2xl text-black mb-1.5"></i>
                                    <div class="font-bold text-sm">GCASH</div>
                                </button>
                                <button type="button" data-method="bank2bank" onclick="selectPaymentMethod('bank2bank')" class="payment-method-btn p-3 border border-gray-300 rounded-lg text-black">
                                    <i class="fas fa-exchange-alt text-2xl text-black mb-1.5"></i>
                                    <div class="font-bold text-sm">BANK2BANK</div>
                                </button>
                                <button type="button" data-method="check" onclick="selectPaymentMethod('check')" class="payment-method-btn p-3 border border-gray-300 rounded-lg text-black">
                                    <i class="fas fa-file-invoice text-2xl text-black mb-1.5"></i>
                                    <div class="font-bold text-sm">CHECK</div>
                                </button>
                            </div>
                        </div>
                        <div class="flex space-x-2.5 flex-shrink-0">
                            <button onclick="backToMain()" class="flex-1 px-5 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold text-base bg-white">
                                CANCEL
                            </button>
                            <button onclick="handleCompletePaymentClick()" id="completeBtn" class="flex-1 px-5 py-3 bg-[#7DF9FF] text-black rounded-lg font-bold text-base disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fas fa-check-circle mr-2"></i> COMPLETE PAYMENT
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal (product-style: white card, centered content, footer buttons) -->
<div id="successModal" class="hidden fixed inset-0 z-50 items-center justify-center p-4 md:p-6">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="relative bg-white rounded-xl md:rounded-2xl shadow-xl w-[94%] max-w-lg mx-auto overflow-hidden">
        <div class="px-5 py-4 md:px-8 md:py-6 border-b bg-black">
            <div class="flex items-center justify-between">
                <h3 class="text-lg md:text-2xl font-semibold text-white">Payment Successful</h3>
                <button type="button" onclick="newTransaction()" class="text-gray-500 hover:text-gray-700 text-base w-9 h-9 md:w-11 md:h-11 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="p-5 md:p-8">
            <div class="text-center mb-8">
                <div class="mx-auto mb-4 md:mb-5 w-20 h-20 md:w-24 md:h-24 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-4xl md:text-5xl"></i>
                </div>
                <p class="text-gray-600 text-base md:text-lg">Your transaction has been processed successfully.</p>
            </div>
            <div class="flex flex-col gap-3 md:gap-4 border-t border-gray-200 pt-6">
                <button type="button" onclick="printReceipt()" class="w-full inline-flex items-center justify-center gap-2 bg-black text-white px-5 py-3 md:px-8 md:py-4 text-base md:text-lg font-medium rounded-lg hover:bg-gray-800 shadow">
                    <i class="fas fa-print"></i> Print Receipt
                </button>
                <button type="button" onclick="newTransaction()" class="w-full inline-flex items-center justify-center gap-2 bg-gray-300 text-black px-5 py-3 md:px-8 md:py-4 text-base md:text-lg font-medium rounded-lg hover:bg-gray-400 shadow">
                    <i class="fas fa-plus"></i> New Transaction
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Choose Payment Method Modal (product-style: black header, body, footer) -->
<div id="choosePaymentMethodModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-4 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeChoosePaymentMethodModal()"></div>
    <div class="relative w-[95%] max-w-lg bg-white rounded-xl md:rounded-2xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-5 py-4 md:px-8 md:py-6 border-b bg-black">
            <div class="flex items-center justify-between">
                <h3 class="text-lg md:text-2xl font-semibold text-white">Choose Payment Method</h3>
                <button type="button" onclick="closeChoosePaymentMethodModal()" class="text-gray-500 hover:text-gray-700 text-base w-9 h-9 md:w-11 md:h-11 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="p-5 md:p-8">
            <p class="text-gray-600 text-base md:text-lg">Please select a payment method first before completing the payment.</p>
        </div>
        <div class="flex-shrink-0 border-t border-gray-200 px-5 md:px-8 py-5 flex justify-end">
            <button type="button" onclick="closeChoosePaymentMethodModal()" class="inline-flex items-center gap-2 bg-gray-300 text-black px-5 py-3 md:px-8 md:py-3.5 text-base md:text-lg font-medium rounded-lg hover:bg-gray-400 shadow">OK</button>
        </div>
    </div>
</div>

<!-- Reference Information Modal (product-style: black header, body, footer) -->
<div id="referenceInfoModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-4 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeReferenceInfoModal()"></div>
    <div class="relative w-[95%] max-w-xl bg-white rounded-xl md:rounded-2xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-5 py-4 md:px-8 md:py-6 border-b bg-black">
            <div class="flex items-center justify-between">
                <h3 class="text-lg md:text-2xl font-semibold text-white">Reference Information</h3>
                <button type="button" onclick="closeReferenceInfoModal()" class="text-gray-500 hover:text-gray-700 text-base w-9 h-9 md:w-11 md:h-11 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="p-5 md:p-8">
            <label for="referenceNumberInput" class="block text-sm md:text-base font-semibold text-gray-600 mb-2 md:mb-3">Please input here</label>
            <input type="text" id="referenceNumberInput" inputmode="numeric" pattern="[0-9]*" maxlength="50"
                placeholder="Enter reference number (numbers only)..."
                class="w-full border border-gray-300 rounded-lg px-4 py-3 md:px-5 md:py-4 text-base md:text-lg text-gray-800 focus:ring-2 focus:ring-gray-300 focus:outline-none">
        </div>
        <div class="flex-shrink-0 border-t border-gray-200 px-5 md:px-8 py-5 flex items-center justify-end gap-3 md:gap-4">
            <button type="button" onclick="closeReferenceInfoModal()" class="inline-flex items-center gap-2 bg-gray-300 text-black px-5 py-3 md:px-8 md:py-3.5 text-base md:text-lg font-medium rounded-lg hover:bg-gray-400 shadow">Cancel</button>
            <button type="button" onclick="confirmReferenceAndProceed()" class="inline-flex items-center gap-2 bg-black text-white px-5 py-3 md:px-8 md:py-3.5 text-base md:text-lg font-medium rounded-lg hover:bg-gray-800 shadow">Confirm & Proceed</button>
        </div>
    </div>
</div>
              
<!-- Add Payment Method Modal -->
<div id="addPaymentMethodModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeAddPaymentMethodModal()"></div>
    <div class="relative w-[95%] max-w-4xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white">ADD NEW PAYMENT METHOD</h3>
                <button type="button" onclick="closeAddPaymentMethodModal()" class="text-gray-500 hover:text-gray-700 text-sm md:text-base w-8 h-8 md:w-10 md:h-10 flex items-center justify-center">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="p-4 md:p-8 flex flex-col max-h-[85vh]">
            <form id="addPaymentMethodForm" class="flex flex-col min-h-0 flex-1">
                @csrf
                <div class="modal-form-scroll overflow-y-auto overflow-x-hidden pr-1 max-h-[calc(85vh-8rem)] min-h-0">
                    <div class="grid md:grid-cols-2 gap-3 md:gap-6 pb-2">
                        <div>
                            <label for="payment_method_name" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Payment Method Name <span class="text-red-500">*</span></label>
                            <input 
                                id="payment_method_name" 
                                name="name" 
                                type="text" 
                                required
                                placeholder="Enter payment method name"
                                class="border rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring w-full uppercase-input"
                            >
                        </div>
                        <div class="md:col-span-2">
                            <label for="payment_method_description" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Description</label>
                            <textarea 
                                id="payment_method_description" 
                                name="description" 
                                rows="3"
                                placeholder="Enter description (optional)"
                                class="border rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring w-full resize-none"
                            ></textarea>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0 border-t border-gray-200 pt-4 mt-2 flex items-center justify-end gap-2 md:gap-3">    
                    <button type="button" onclick="closeAddPaymentMethodModal()"
                            class="inline-flex items-center gap-1.5 md:gap-2 bg-gray-300 text-black px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-400 shadow">
                        Cancel
                    </button>
                    <button type="submit"
                            class="inline-flex items-center gap-1.5 md:gap-2 bg-black text-white px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-500 shadow">
                        <i class="fas fa-plus-square text-xs md:text-base"></i>
                        Add Payment Method
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Over All Discount Modal (theme like product.blade.php modals) -->
<div id="overAllDiscountModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeOverAllDiscountModal()"></div>
    <div class="relative w-[95%] max-w-2xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white">Amount Due</h3>
                <button type="button" onclick="closeOverAllDiscountModal()" class="text-gray-400 hover:text-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-lg hover:bg-white/10">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-4 md:p-6 flex flex-col max-h-[85vh]">
            <div class="mb-4">
                <div class="bg-white border border-gray-200 rounded-xl px-4 py-4 text-center">
                    <span id="overAllDiscountAmountDueDisplay" class="text-2xl md:text-3xl font-bold text-black">0.00</span>
                </div>
            </div>
            <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
                <div class="bg-green-600 text-white px-4 py-3 grid grid-cols-3 gap-2 text-sm font-semibold">
                    <span>Discount Name</span>
                    <span>Value</span>
                    <span>Amount</span>
                </div>
                <div class="p-4 grid grid-cols-3 gap-3 items-center bg-gray-50">
                    <div>
                        <select id="overAllDiscountName" class="w-full border border-gray-300 rounded-lg px-3 py-2.5 bg-white text-black text-sm focus:ring-2 focus:ring-[#DDE2FF] focus:outline-none">
                            <option value="">Choose Discount</option>
                            <option value="SENIOR">SENIOR</option>      
                            <option value="PWD">PWD</option>
                            <option value="WHOLESALE">WHOLESALE</option>
                            <option value="SUKI">SUKI</option>
                            <option value="SUBSIDY">SUBSIDY</option>
                        </select>
                    </div>
                    <div class="flex items-center gap-2">
                        <input type="number" id="overAllDiscountValue" value="0" min="0" step="0.01" placeholder="0"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 bg-white text-black text-sm focus:ring-2 focus:ring-[#DDE2FF] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                        <select id="overAllDiscountOperator" class="border border-gray-300 rounded-lg px-2 py-2.5 bg-white text-black text-sm focus:ring-2 focus:ring-[#DDE2FF] focus:outline-none w-14">
                            <option value="%">%</option>
                            <option value="fixed">₱</option>
                        </select>
                    </div>
                    <div>
                        <input type="text" id="overAllDiscountAmountDisplay" readonly value="0.00"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 bg-white text-black text-sm font-semibold">
                    </div>
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-2">ID Number / Verification Notes</label>
                <input type="text" id="overAllDiscountIdNotes" placeholder="-"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2.5 bg-white text-black text-sm focus:ring-2 focus:ring-[#DDE2FF] focus:outline-none">
            </div>
            <div class="mb-4">
                <button type="button" class="text-sm text-gray-600 underline hover:text-black">Senior & PWD Special Discount Calculator</button>
            </div>
            <div class="flex flex-wrap gap-2 justify-end border-t border-gray-200 pt-4">
                <button type="button" onclick="recalcOverAllDiscount()" class="inline-flex items-center gap-2 bg-gray-200 text-black px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-300">
                    ReCalc
                </button>
                <button type="button" onclick="removeOverAllDiscount()" class="inline-flex items-center gap-2 bg-gray-600 text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-700">
                    [ F9 ] Remove
                </button>
                <button type="button" onclick="applyOverAllDiscount()" class="inline-flex items-center gap-2 bg-black text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-700">
                    [ F10 ] Apply
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Split Payments Modal (F1) -->
<div id="splitPaymentsModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeSplitPaymentsModal()"></div>
    <div class="relative w-[95%] max-w-2xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white">Split Payments [ F1 ]</h3>
                <button type="button" onclick="closeSplitPaymentsModal()" class="text-gray-400 hover:text-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-lg hover:bg-white/10">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-4 md:p-6 flex flex-col max-h-[85vh]">
            <div class="mb-4 flex justify-between items-center">
                <span class="text-sm font-semibold text-gray-700">Amount Due:</span>
                <span id="splitPaymentsAmountDue" class="text-xl font-bold text-black">₱0.00</span>
            </div>
            <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
                <div class="bg-gray-700 text-white px-4 py-3 grid grid-cols-12 gap-2 text-sm font-semibold">
                    <span class="col-span-5">Method</span>
                    <span class="col-span-4">Amount</span>
                    <span class="col-span-2 text-center">Ref</span>
                    <span class="col-span-1"></span>
                </div>
                <div id="splitPaymentsRows" class="divide-y divide-gray-200 max-h-48 overflow-y-auto">
                    <!-- Rows added by JS -->
                </div>
            </div>
            <div class="mb-4 flex justify-between items-center">
                <span class="text-sm font-semibold text-gray-700">Total Split:</span>
                <span id="splitPaymentsTotal" class="text-lg font-bold text-black">₱0.00</span>
            </div>
            <p id="splitPaymentsMessage" class="text-sm text-red-600 mb-3 hidden">Total must equal amount due.</p>
            <div class="flex flex-wrap gap-2 justify-end border-t border-gray-200 pt-4">
                <button type="button" onclick="addSplitPaymentRow()" class="inline-flex items-center gap-2 bg-gray-200 text-black px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-300">
                    <i class="fas fa-plus"></i> Add Row
                </button>
                <button type="button" onclick="closeSplitPaymentsModal()" class="inline-flex items-center gap-2 bg-gray-400 text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-500">Cancel</button>
                <button type="button" onclick="applySplitPayments()" class="inline-flex items-center gap-2 bg-black text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-700">Apply Split</button>
            </div>
        </div>
    </div>
</div>

<!-- Free Charge Confirmation Modal (F11) -->
<div id="freeChargeModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeFreeChargeModal()"></div>
    <div class="relative w-[95%] max-w-xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-4 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-lg font-semibold text-white">Free Charge [ F11 ]</h3>
                <button type="button" onclick="closeFreeChargeModal()" class="text-gray-400 hover:text-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-lg hover:bg-white/10">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-6 md:p-8">
            <p class="text-center font-bold text-black text-lg md:text-xl mb-6">Are you sure to transact this Sales Order for FREE ?</p>
            <label class="block text-base font-medium text-gray-800 mb-3">Reason and Notes</label>
            <textarea id="freeChargeReasonNotes" rows="5" placeholder="Enter reason or notes (required)"
                class="w-full border-2 border-gray-300 rounded-xl px-5 py-4 bg-white text-black text-base md:text-lg focus:ring-2 focus:ring-[#DDE2FF] focus:outline-none resize-y min-h-[140px]"></textarea>
            <p id="freeChargeReasonError" class="text-base text-red-600 mt-3 hidden">Please enter a reason or notes before proceeding.</p>
            <div class="flex flex-wrap gap-4 justify-end mt-6 pt-5 border-t border-gray-200">
                <button type="button" onclick="confirmFreeChargeProceed()" class="inline-flex items-center justify-center bg-gray-300 text-black px-6 py-4 rounded-xl font-medium text-base md:text-lg hover:bg-gray-400">
                    Confirm & Proceed
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Outright Sale Modal [ F5 ] -->
<div id="outrightSaleModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeOutrightSaleModal()"></div>
    <div class="relative w-[95%] max-w-md bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-4 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-lg font-semibold text-white">Outright Sale [ F5 ]</h3>
                <button type="button" onclick="closeOutrightSaleModal()" class="text-gray-400 hover:text-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-lg hover:bg-white/10">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-4 md:p-6">
            <p class="text-gray-600 text-base mb-4">Set this order as <strong>Outright Sale</strong> — released immediately with no reservation.</p>
            <div class="flex flex-wrap gap-3 justify-end pt-4 border-t border-gray-200">
                <button type="button" onclick="closeOutrightSaleModal()" class="inline-flex items-center gap-2 bg-gray-300 text-black px-5 py-3 rounded-lg font-medium text-base hover:bg-gray-400">Cancel</button>
                <button type="button" onclick="confirmOutrightSale()" class="inline-flex items-center gap-2 bg-black text-white px-5 py-3 rounded-lg font-medium text-base hover:bg-gray-700">Confirm Outright Sale</button>
            </div>
        </div>
    </div>
</div>

<!-- Reserved Modal [ F6 ]: same modal as cashier_pos (Save/Load Orders) – opened via openReservedModal() from main POS -->

<!-- Utang (Credit) confirmation modal: when CHANGE is negative, ask to proceed to Credit/Terms -->
<div id="utangConfirmModal" class="modal fixed inset-0 z-[59] items-center justify-center p-4 md:p-6" style="display: none;">
    <div class="absolute inset-0 bg-black/50" onclick="closeUtangConfirmModal()"></div>
    <div class="relative bg-white rounded-xl md:rounded-2xl shadow-xl w-[94%] max-w-md mx-auto overflow-hidden" onclick="event.stopPropagation()">
        <div class="px-5 py-4 md:px-8 md:py-6 border-b bg-black">
            <div class="flex items-center justify-between">
                <h3 class="text-lg md:text-xl font-semibold text-white">Proceed to Utang (Credit)?</h3>
                <button type="button" onclick="closeUtangConfirmModal()" class="text-gray-500 hover:text-gray-700 text-base w-9 h-9 md:w-10 md:h-10 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="p-5 md:p-8">
            <p class="text-gray-600 text-sm md:text-base mb-6">Amount tendered is less than the total. Customer wants to pay on credit (Utang). Proceed to Credit/Terms?</p>
            <div class="flex flex-col sm:flex-row gap-3 justify-end">
                <button type="button" onclick="closeUtangConfirmModal()" class="inline-flex items-center justify-center gap-2 bg-gray-300 text-black px-5 py-3 rounded-lg font-medium hover:bg-gray-400">Cancel</button>
                <button type="button" onclick="confirmUtangProceed()" class="inline-flex items-center justify-center gap-2 bg-[#7DF9FF] text-black px-5 py-3 rounded-lg font-bold hover:opacity-90">Yes, Proceed to Utang</button>
            </div>
        </div>
    </div>
</div>

<!-- Credit/Terms Modal [ F10 ] - Layout similar to admin stock_in modals -->
<div id="creditTermsModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6">
    <div class="absolute inset-0 bg-black/50" onclick="closeCreditTermsModal()"></div>
    <div class="relative w-[95%] max-w-6xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0 max-h-[90vh] overflow-y-auto" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white">Credit / Terms [ F10 ]</h3>
                <button type="button" onclick="closeCreditTermsModal()" class="closeCreditTerms text-gray-500 hover:text-gray-700 text-sm md:text-base w-8 h-8 md:w-10 md:h-10 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="p-6 md:p-10">
            <p class="text-gray-600 text-sm md:text-base mb-4 md:mb-6">Process this order on credit or payment terms.</p>
            <div class="grid md:grid-cols-2 gap-4 md:gap-6">
                <div class="md:col-span-2">
                    <label class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Customer / Account <span class="text-red-500">*</span></label>
                    <div class="flex flex-wrap gap-2">
                        <div class="flex-1 min-w-[280px] md:min-w-[400px] relative" id="creditTermsCustomerWrap">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"><i class="fas fa-search text-base"></i></span>
                            <input type="text" id="creditTermsCustomer" autocomplete="off" placeholder="Type to search customer or account name..."
                                class="w-full pl-11 pr-4 py-3 md:py-3.5 border border-gray-300 rounded-lg text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] focus:border-gray-400 text-black">
                            <input type="hidden" id="creditTermsContactId" value="">
                            <div id="creditTermsContactResults" class="absolute left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto hidden">
                                <div id="creditTermsContactResultsList" class="py-1"></div>
                                <div id="creditTermsContactResultsEmpty" class="px-4 py-3 text-gray-500 text-sm hidden">No contacts found.</div>
                                <div id="creditTermsContactResultsLoading" class="px-4 py-3 text-gray-500 text-sm hidden">Searching...</div>
                            </div>
                        </div>
                        <button type="button" id="creditTermsAddContactBtn" class="flex-shrink-0 inline-flex items-center gap-1 md:gap-2 bg-black text-white px-3 py-2 md:px-4 md:py-2.5 rounded-lg hover:bg-gray-600 shadow text-xs md:text-sm font-medium"><i class="fas fa-plus text-[10px] md:text-sm"></i> Add</button>
                    </div>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Selected contact</label>
                    <div id="creditTermsSelectedContact" class="min-h-[48px] md:min-h-[52px] px-4 py-3 md:px-5 md:py-4 border border-gray-200 rounded-lg bg-gray-50 text-gray-600 text-sm md:text-base">
                        — No contact selected —
                    </div>
                </div>
                <div>
                    <label for="creditTermsType" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Terms (e.g. Net 30, COD)</label>
                    <select id="creditTermsType" class="w-full border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] focus:border-gray-400 bg-white text-black">
                        <option value="">Select terms</option>
                        <option value="net7">Net 7 days</option>
                        <option value="net15">Net 15 days</option>
                        <option value="net30">Net 30 days</option>
                        <option value="net60">Net 60 days</option>
                        <option value="cod">COD</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label for="creditTermsReference" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Reference / PO Number (optional)</label>
                    <input type="text" id="creditTermsReference" placeholder="PO or reference number"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] focus:border-gray-400 text-black">
                </div>
                <div class="md:col-span-2 flex items-center justify-end gap-2 md:gap-3 pt-2">
                    <button type="button" onclick="closeCreditTermsModal()" class="inline-flex items-center gap-1.5 md:gap-2 bg-gray-300 text-black px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-400 shadow">Cancel</button>
                    <button type="button" onclick="confirmCreditTerms()" class="inline-flex items-center gap-1.5 md:gap-2 bg-black text-white px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-500 shadow">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Contact Modal (from Credit/Terms - same layout as admin contacts add modal) -->
<!-- Only the form fields area scrolls; header and footer with buttons stay fixed -->
<div id="addContactModalCT" class="modal fixed inset-0 z-[70] items-start md:items-center justify-center p-3 md:p-6" style="display: none;">
    <div class="absolute inset-0 bg-black/50" id="addContactModalCTBackdrop"></div>
    <div class="relative w-[95%] max-w-4xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0 flex flex-col max-h-[90vh]">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white">Add New Contact</h3>
                <button type="button" id="closeAddContactCT" class="text-gray-500 hover:text-gray-700 text-sm md:text-base w-8 h-8 md:w-10 md:h-10 flex items-center justify-center"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <form id="addContactFormCT" class="flex flex-col min-h-0 flex-1 flex">
            @csrf
            <div class="overflow-y-auto overflow-x-hidden flex-1 min-h-0 p-4 md:p-8 pr-3 md:pr-7">
                <div class="grid md:grid-cols-2 gap-3 md:gap-6 pb-2">
                    <div>
                        <label for="id_number_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">ID Number</label>
                        <input id="id_number_add_ct" type="text" name="id_number" placeholder="ID NUMBER" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="id_barcode_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">ID Barcode</label>
                        <input id="id_barcode_add_ct" type="text" name="id_barcode" placeholder="ID BARCODE" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="stats_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Status</label>
                        <input id="stats_add_ct" type="text" name="stats" placeholder="STATUS" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="customer_name_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Customer / Consignee Name</label>
                        <input id="customer_name_add_ct" type="text" name="customer_consignee_name" placeholder="CUSTOMER / CONSIGNEE NAME" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="contact_person_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Contact Person</label>
                        <input id="contact_person_add_ct" type="text" name="contact_person" placeholder="CONTACT PERSON" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="group_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Group</label>
                        <select id="group_add_ct" name="group" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full bg-white">
                            <option value="">SELECT</option>
                            <option value="CUSTOMER">CUSTOMER</option>
                            <option value="SUPPLIER">SUPPLIER</option>
                            <option value="VENDOR">VENDOR</option>
                        </select>
                    </div>
                    <div>
                        <label for="vat_tin_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">VAT TIN (NOS.)</label>
                        <input id="vat_tin_add_ct" type="text" name="vat_tin_nos" placeholder="VAT TIN" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="terms_display_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Terms of Payment</label>
                        <div class="flex gap-2">
                            <input id="terms_display_add_ct" type="text" readonly placeholder="#" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base bg-gray-50 w-full" title="Click :: to set">
                            <input type="hidden" name="terms_of_payment" id="terms_of_payment_add_ct">
                            <input type="hidden" name="payment_c_type" id="payment_c_type_add_ct">
                            <input type="hidden" name="payment_days_month" id="payment_days_month_add_ct">
                            <input type="hidden" name="payment_credit_limit" id="payment_credit_limit_add_ct">
                            <button type="button" id="openTermsModalAddCT" class="flex-shrink-0 w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 font-mono" title="Terms of Payment">::</button>
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <label for="address_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Address</label>
                        <textarea id="address_add_ct" name="address" rows="2" placeholder="ADDRESS" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input"></textarea>
                    </div>
                    <div>
                        <label for="contact_no_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Contact No.</label>
                        <input id="contact_no_add_ct" type="text" name="contact_no" placeholder="CONTACT NO." class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input">
                    </div>
                    <div>
                        <label for="discount_id_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Discount ID #</label>
                        <input id="discount_id_add_ct" type="number" name="discount_id" value="0" min="0" placeholder="0" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full">
                    </div>
                    <div class="md:col-span-2">
                        <label for="note_add_ct" class="block text-xs md:text-sm font-semibold text-gray-600 mb-1 md:mb-2">Note / Comment</label>
                        <textarea id="note_add_ct" name="note_comment" rows="3" placeholder="NOTE / COMMENT" class="border border-gray-300 rounded-lg px-3 py-2.5 md:px-4 md:py-3.5 text-sm md:text-base focus:ring-2 focus:ring-[#DDE2FF] w-full uppercase-input"></textarea>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0 border-t border-gray-200 pt-4 pb-4 md:pb-6 px-4 md:px-8 flex items-center justify-end gap-2 md:gap-3 bg-white">
                <button type="button" id="addContactBackBtnCT" class="inline-flex items-center gap-1.5 md:gap-2 bg-gray-300 text-black px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-400 shadow">Back to Credit/Terms</button>
                <button type="submit" class="inline-flex items-center gap-1.5 md:gap-2 bg-black text-white px-4 py-2.5 md:px-6 md:py-3.5 text-sm md:text-base font-medium rounded-lg hover:bg-gray-500 shadow"><i class="fas fa-plus-square text-xs md:text-base"></i> Add Contact</button>
            </div>
        </form>
    </div>
</div>

<!-- Terms Of Payment sub-modal (for Add Contact from Credit/Terms) -->
<div id="termsModalCT" class="modal fixed inset-0 z-[80] items-center justify-center p-4" style="display: none;">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="relative bg-white rounded-lg md:rounded-xl shadow-2xl w-full max-w-md overflow-hidden">
        <div class="px-4 py-3 border-b bg-black flex items-center justify-between">
            <h3 class="text-base font-semibold text-white">Terms Of Payment</h3>
            <button type="button" id="closeTermsModalCT" class="w-8 h-8 flex items-center justify-center text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-4 space-y-4">
            <div>
                <label for="terms_c_type_ct" class="block text-xs font-semibold text-gray-600 mb-1">C-Type</label>
                <select id="terms_c_type_ct" class="border rounded-lg px-3 py-2.5 text-sm w-full focus:ring">
                    <option value="CASH">CASH</option>
                    <option value="CREDIT">CREDIT</option>
                </select>
            </div>
            <div>
                <label for="terms_days_month_ct" class="block text-xs font-semibold text-gray-600 mb-1">Days/Month</label>
                <select id="terms_days_month_ct" class="border rounded-lg px-3 py-2.5 text-sm w-full focus:ring">
                    <option value="ONSPOT">ONSPOT</option>
                    <option value="15">15</option>
                    <option value="30">30</option>
                    <option value="60">60</option>
                    <option value="90">90</option>
                </select>
            </div>
            <div>
                <label for="terms_credit_limit_ct" class="block text-xs font-semibold text-gray-600 mb-1">Credit Limit</label>
                <input id="terms_credit_limit_ct" type="number" min="0" step="0.01" value="0" class="border rounded-lg px-3 py-2.5 text-sm w-full focus:ring">
            </div>
        </div>
        <div class="p-4 border-t flex justify-center">
            <button type="button" id="termsModalOKCT" class="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-500 font-medium text-sm shadow">O K</button>
        </div>
    </div>
</div>

<!-- Cancel & Choose Other Products Modal (same style as Over All Discount / Split / Credit Terms) -->
<div id="cancelAndExchangeModal" class="modal fixed inset-0 z-[60] items-start md:items-center justify-center p-3 md:p-6" style="display: none;">
    <div class="absolute inset-0 bg-black/50" onclick="closeCancelAndExchangeModal()"></div>
    <div class="relative w-[95%] max-w-2xl bg-white rounded-lg md:rounded-xl shadow-2xl overflow-hidden mt-12 md:mt-0" onclick="event.stopPropagation()">
        <div class="px-4 py-3 md:px-6 md:py-5 border-b bg-black flex-shrink-0">
            <div class="flex items-center justify-between">
                <h3 class="text-base md:text-xl font-semibold text-white"><i class="fas fa-exchange-alt mr-2"></i>Cancel & Choose Other Products</h3>
                <button type="button" onclick="closeCancelAndExchangeModal()" class="text-gray-400 hover:text-white w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-lg hover:bg-white/10">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-4 md:p-6 flex flex-col max-h-[85vh]">
            <p class="text-gray-600 text-sm md:text-base mb-4">Choose one: <strong>cancel selected product(s)</strong> and replace with other product(s) of the same amount, or <strong>cancel all</strong> </p>
            <div class="bg-gray-50 border border-gray-200 rounded-xl px-4 py-4 mb-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-700 font-medium">Current order total:</span>
                    <span id="cancelAndExchangeAmountDisplay" class="text-2xl font-bold text-black">₱0.00</span>
                </div>
                <p class="text-xs text-gray-500 mt-2">Use this amount as reference when adding replacement products (for selected cancel only).</p>
            </div>
            <div class="mb-4">
                <p class="text-sm font-medium text-gray-700 mb-2">Select product(s) to cancel:</p>
                <div id="cancelAndExchangeProductList" class="border border-gray-200 rounded-xl overflow-hidden max-h-48 overflow-y-auto bg-white">
                    <!-- Filled by openCancelAndExchangeModal -->
                </div>
                <p class="text-xs text-gray-500 mt-2">Check the items the customer wants to cancel and replace with others of the same total; or use "Cancel all" below if they will not buy.</p>
            </div>
            <div class="flex flex-wrap gap-2 justify-end border-t border-gray-200 pt-4">
                <button type="button" onclick="closeCancelAndExchangeModal()" class="inline-flex items-center gap-2 bg-gray-200 text-black px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-300">Keep Current Order</button>
                <button type="button" id="btnCancelSelectedAndExchange" onclick="confirmCancelAndExchange()" class="inline-flex items-center gap-2 bg-black text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-700">Cancel selected & Go to Products</button>
                <button type="button" onclick="confirmCancelAll()" class="inline-flex items-center gap-2 bg-gray-600 text-white px-4 py-2.5 rounded-lg font-medium text-sm hover:bg-gray-700">Cancel all</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Methods that require reference number (non-cash)
    var PAYMENT_METHODS_REQUIRING_REFERENCE = ['card', 'gcash', 'bank2bank', 'check'];

    /** Cancel & Choose Other Products modal: show product list with checkboxes, then cancel selected (exchange) or cancel all */
    window.openCancelAndExchangeModal = function() {
        var modal = document.getElementById('cancelAndExchangeModal');
        var amountEl = document.getElementById('cancelAndExchangeAmountDisplay');
        var listEl = document.getElementById('cancelAndExchangeProductList');
        if (!modal || !amountEl) return;
        var grandTotalEl = document.getElementById('paymentGrandTotal');
        var amountText = (grandTotalEl && grandTotalEl.textContent) ? grandTotalEl.textContent.trim() : '₱0.00';
        amountEl.textContent = amountText;
        if (listEl && typeof cart !== 'undefined' && cart && cart.length > 0) {
            listEl.innerHTML = cart.map(function(item, index) {
                var lineTotal = (item.quantity * item.price);
                var name = (item.name || '—').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                return '<label class="flex items-center gap-3 px-4 py-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer last:border-b-0">' +
                    '<input type="checkbox" class="cancelAndExchangeItem w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500" data-index="' + index + '" value="' + index + '">' +
                    '<span class="flex-1 min-w-0 font-medium text-gray-800 text-sm truncate">' + name + '</span>' +
                    '<span class="text-gray-600 text-sm shrink-0">' + item.quantity + ' × ₱' + (item.price != null ? Number(item.price).toFixed(2) : '0.00') + '</span>' +
                    '<span class="font-semibold text-gray-900 text-sm shrink-0">₱' + lineTotal.toFixed(2) + '</span>' +
                    '</label>';
            }).join('');
        } else {
            listEl.innerHTML = '<div class="px-4 py-6 text-center text-gray-500 text-sm">No products in order.</div>';
        }
        modal.classList.add('show');
        modal.style.display = 'flex';
    };

    window.closeCancelAndExchangeModal = function() {
        var modal = document.getElementById('cancelAndExchangeModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };

    /** Cancel selected items and go to products to choose replacements with same total */
    window.confirmCancelAndExchange = function() {
        var checkboxes = document.querySelectorAll('.cancelAndExchangeItem:checked');
        if (!checkboxes || checkboxes.length === 0) {
            alert('Please select at least one product to cancel and replace.');
            return;
        }
        var indices = [];
        for (var i = 0; i < checkboxes.length; i++) {
            var idx = parseInt(checkboxes[i].getAttribute('data-index'), 10);
            if (!isNaN(idx)) indices.push(idx);
        }
        indices.sort(function(a, b) { return a - b; });
        var amount = 0;
        if (typeof cart !== 'undefined' && cart) {
            for (var j = 0; j < indices.length; j++) {
                var item = cart[indices[j]];
                if (item) amount += (item.quantity * (item.price != null ? item.price : 0));
            }
        }
        closeCancelAndExchangeModal();
        if (typeof cancelAndExchangeToMain === 'function') {
            cancelAndExchangeToMain(amount, { removeIndices: indices });
        } else if (typeof backToMain === 'function') {
            backToMain();
        }
    };

    /** Cancel all: pass order total so it is recorded for Sales Report → Deductions & Adjustments (Cancelled) */
    window.confirmCancelAll = function() {
        var grandTotal = 0;
        var el = document.getElementById('cancelAndExchangeAmountDisplay') || document.getElementById('paymentGrandTotal');
        if (el && el.textContent) {
            var raw = el.textContent.replace(/[^\d.-]/g, '');
            grandTotal = parseFloat(raw) || 0;
        }
        closeCancelAndExchangeModal();
        if (typeof cancelAndExchangeToMain === 'function') {
            cancelAndExchangeToMain(grandTotal, { cancelAll: true });
        } else if (typeof backToMain === 'function') {
            backToMain();
        }
    };

    window.handleCompletePaymentClick = function() {
        var exchangeAmountRaw = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('posCancelAndExchangeAmount') : null;
        if (exchangeAmountRaw !== null && exchangeAmountRaw !== '') {
            var targetAmount = parseFloat(exchangeAmountRaw);
            if (!isNaN(targetAmount)) {
                var grandTotalEl = document.getElementById('paymentGrandTotal');
                var currentTotalVal = 0;
                if (grandTotalEl && grandTotalEl.textContent) {
                    var raw = grandTotalEl.textContent.replace(/[^\d.-]/g, '');
                    currentTotalVal = parseFloat(raw) || 0;
                }
                var orderTotal = Math.round(currentTotalVal * 100) / 100;
                var targetRounded = Math.round(targetAmount * 100) / 100;
                if (Math.abs(orderTotal - targetRounded) > 0.001) {
                    alert('Order total must exactly match the exchange amount (₱' + targetAmount.toFixed(2) + ').\nCurrent total: ₱' + orderTotal.toFixed(2) + '.\nGo back and adjust items to match.');
                    return;
                }
            }
        }
        var paymentMethodSelect = document.getElementById('paymentMethodSelect');
        var selectValue = paymentMethodSelect ? paymentMethodSelect.value : '';
        var noMethodFromSelect = !selectValue || selectValue === 'add_new';
        if (noMethodFromSelect || typeof selectedPaymentMethod === 'undefined' || selectedPaymentMethod === null || selectedPaymentMethod === '') {
            // Auto default to CASH if cashier didn't select a payment method
            if (typeof selectPaymentMethod === 'function') selectPaymentMethod('cash');
            if (paymentMethodSelect) paymentMethodSelect.value = 'cash';
        }
        if (PAYMENT_METHODS_REQUIRING_REFERENCE.indexOf(selectedPaymentMethod) !== -1) {
            openReferenceInfoModal();
            return;
        }
        var tenderedEl = document.getElementById('amountTendered');
        var tendered = (tenderedEl && tenderedEl.value) ? (parseFloat(tenderedEl.value) || 0) : 0;
        if (tendered <= 0) {
            alert('Please enter amount tendered or use Credit/Terms (F10) / Pay Later.');
            return;
        }
        // Cash: show utang confirmation modal only when tender has a number AND change is negative
        if (selectedPaymentMethod === 'cash') {
            var amountPayableEl = document.getElementById('amountPayableDisplay');
            var amountDue = 0;
            if (amountPayableEl && amountPayableEl.textContent) {
                var raw = amountPayableEl.textContent.replace(/[^\d.-]/g, '');
                amountDue = parseFloat(raw) || 0;
            }
            var change = tendered - amountDue;
            if (change < 0) {
                openUtangConfirmModal();
                return;
            }
        }
        // Proceed to complete
        if (typeof completeTransaction === 'function') completeTransaction();
    };

    window.openChoosePaymentMethodModal = function() {
        var modal = document.getElementById('choosePaymentMethodModal');
        if (modal) {
            modal.classList.add('show');
            modal.style.display = 'flex';
        }
    };

    window.closeChoosePaymentMethodModal = function() {
        var modal = document.getElementById('choosePaymentMethodModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };

    window.openReferenceInfoModal = function() {
        var modal = document.getElementById('referenceInfoModal');
        var input = document.getElementById('referenceNumberInput');
        if (modal) {
            if (input) input.value = '';
            modal.classList.add('show');
            modal.style.display = 'flex';
            setTimeout(function() { if (input) input.focus(); }, 100);
        }
    };

    window.closeReferenceInfoModal = function() {
        var modal = document.getElementById('referenceInfoModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };

    window.confirmReferenceAndProceed = function() {
        var input = document.getElementById('referenceNumberInput');
        var reference = (input && input.value) ? String(input.value).trim() : '';
        closeReferenceInfoModal();
        if (typeof completeTransaction === 'function') completeTransaction(reference);
    };

    // Payment Method Modal Functions - Make them globally accessible
    window.openAddPaymentMethodModal = function() {
        const modal = document.getElementById('addPaymentMethodModal');
        if (modal) {
            modal.classList.add('show');
            modal.style.display = 'flex';
            setTimeout(function() {
                const nameInput = document.getElementById('payment_method_name');
                if (nameInput) nameInput.focus();
            }, 100);
        }
    };

    window.closeAddPaymentMethodModal = function() {
        const modal = document.getElementById('addPaymentMethodModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
            const form = document.getElementById('addPaymentMethodForm');
            if (form) {
                form.reset();
            }
        }
    };

    // Over All Discount Modal (uses currentDiscount, updatePaymentInterface, calculateTotals from cashier_pos)
    window.openOverAllDiscountModal = function() {
        var modal = document.getElementById('overAllDiscountModal');
        if (!modal) return;
        var amountDueEl = document.getElementById('amountPayableDisplay');
        var amountDue = 0;
        if (amountDueEl && amountDueEl.textContent) {
            var raw = amountDueEl.textContent.replace(/[^\d.-]/g, '');
            amountDue = parseFloat(raw) || 0;
        }
        document.getElementById('overAllDiscountAmountDueDisplay').textContent = '₱' + amountDue.toFixed(2);
        document.getElementById('overAllDiscountValue').value = '0';
        document.getElementById('overAllDiscountOperator').value = '%';
        document.getElementById('overAllDiscountAmountDisplay').value = '0.00';
        document.getElementById('overAllDiscountIdNotes').value = '';
        document.getElementById('overAllDiscountName').value = '';
        recalcOverAllDiscount();
        modal.classList.add('show');
        modal.style.display = 'flex';
    };

    window.closeOverAllDiscountModal = function() {
        var modal = document.getElementById('overAllDiscountModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };

    window.recalcOverAllDiscount = function() {
        var amountDueEl = document.getElementById('amountPayableDisplay');
        var amountDue = 0;
        if (amountDueEl && amountDueEl.textContent) {
            var raw = amountDueEl.textContent.replace(/[^\d.-]/g, '');
            amountDue = parseFloat(raw) || 0;
        }
        var valueInput = document.getElementById('overAllDiscountValue');
        var operatorSelect = document.getElementById('overAllDiscountOperator');
        var value = parseFloat(valueInput.value) || 0;
        var isPercent = operatorSelect && operatorSelect.value === '%';
        var amount = isPercent ? (amountDue * value / 100) : value;
        document.getElementById('overAllDiscountAmountDisplay').value = amount.toFixed(2);
    };

    window.applyOverAllDiscount = function() {
        var amountDisplay = document.getElementById('overAllDiscountAmountDisplay');
        var discountAmount = parseFloat(amountDisplay.value) || 0;
        if (typeof currentDiscount !== 'undefined') {
            currentDiscount = discountAmount;
        }
        if (typeof updatePaymentInterface === 'function') updatePaymentInterface();
        if (typeof calculateTotals === 'function') calculateTotals();
        closeOverAllDiscountModal();
    };

    window.removeOverAllDiscount = function() {
        if (typeof currentDiscount !== 'undefined') {
            currentDiscount = 0;
        }
        if (typeof updatePaymentInterface === 'function') updatePaymentInterface();
        if (typeof calculateTotals === 'function') calculateTotals();
        closeOverAllDiscountModal();
    };

    // --- Split Payments (F1) ---
    var SPLIT_PAYMENT_ROW_INDEX = 0;
    var SPLIT_PAYMENT_METHODS = [
        { value: 'cash', label: 'CASH' },
        { value: 'card', label: 'CARD' },
        { value: 'gcash', label: 'GCASH' },
        { value: 'bank2bank', label: 'BANK2BANK' },
        { value: 'check', label: 'CHECK' },
        { value: 'other', label: 'OTHER' }
    ];

    window.openSplitPaymentsModal = function() {
        var modal = document.getElementById('splitPaymentsModal');
        if (!modal) return;
        var amountDueEl = document.getElementById('amountPayableDisplay');
        var amountDue = 0;
        if (amountDueEl && amountDueEl.textContent) {
            var raw = amountDueEl.textContent.replace(/[^\d.-]/g, '');
            amountDue = parseFloat(raw) || 0;
        }
        document.getElementById('splitPaymentsAmountDue').textContent = '₱' + amountDue.toFixed(2);
        var container = document.getElementById('splitPaymentsRows');
        container.innerHTML = '';
        SPLIT_PAYMENT_ROW_INDEX = 0;
        addSplitPaymentRow();
        addSplitPaymentRow();
        recalcSplitPaymentsTotal();
        document.getElementById('splitPaymentsMessage').classList.add('hidden');
        modal.classList.add('show');
        modal.style.display = 'flex';
    };

    window.closeSplitPaymentsModal = function() {
        var modal = document.getElementById('splitPaymentsModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };

    function toggleSplitRefForMethod(row) {
        if (!row) return;
        var methodSelect = row.querySelector('.split-method');
        var refInput = row.querySelector('.split-ref');
        if (!methodSelect || !refInput) return;
        var isCash = (methodSelect.value || '').toLowerCase() === 'cash';
        refInput.disabled = isCash;
        refInput.placeholder = isCash ? '—' : 'Ref';
        if (isCash) refInput.value = '';
    }

    function addSplitPaymentRow() {
        var container = document.getElementById('splitPaymentsRows');
        if (!container) return;
        var idx = SPLIT_PAYMENT_ROW_INDEX++;
        var row = document.createElement('div');
        row.className = 'p-3 grid grid-cols-12 gap-2 items-center bg-white hover:bg-gray-50';
        row.dataset.splitRowIndex = idx;
        var methodOptions = SPLIT_PAYMENT_METHODS.map(function(m) {
            return '<option value="' + m.value + '">' + m.label + '</option>';
        }).join('');
        row.innerHTML =
            '<div class="col-span-5"><select class="split-method w-full border border-gray-300 rounded-lg px-2 py-2 text-sm">' + methodOptions + '</select></div>' +
            '<div class="col-span-4"><input type="number" step="any" min="0" placeholder="0.00" class="split-amount w-full border border-gray-300 rounded-lg px-2 py-2 text-sm [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"></div>' +
            '<div class="col-span-2"><input type="text" placeholder="Ref" class="split-ref w-full border border-gray-300 rounded-lg px-2 py-2 text-sm"></div>' +
            '<div class="col-span-1"><button type="button" onclick="removeSplitPaymentRow(this)" class="text-red-600 hover:text-red-800 p-1" title="Remove"><i class="fas fa-trash-alt text-sm"></i></button></div>';
        container.appendChild(row);
        var methodSelect = row.querySelector('.split-method');
        var refInput = row.querySelector('.split-ref');
        methodSelect.addEventListener('change', function() { toggleSplitRefForMethod(row); });
        toggleSplitRefForMethod(row);
        row.querySelector('.split-amount').addEventListener('input', recalcSplitPaymentsTotal);
        row.querySelector('.split-amount').addEventListener('change', recalcSplitPaymentsTotal);
    }

    window.removeSplitPaymentRow = function(btn) {
        var row = btn && btn.closest('[data-split-row-index]');
        if (row) row.remove();
        recalcSplitPaymentsTotal();
    };

    function recalcSplitPaymentsTotal() {
        var rows = document.querySelectorAll('#splitPaymentsRows [data-split-row-index]');
        var total = 0;
        rows.forEach(function(r) {
            var input = r.querySelector('.split-amount');
            if (input) total += parseFloat(input.value) || 0;
        });
        var totalEl = document.getElementById('splitPaymentsTotal');
        if (totalEl) totalEl.textContent = '₱' + total.toFixed(2);
    }

    window.applySplitPayments = function() {
        var amountDueEl = document.getElementById('amountPayableDisplay');
        var amountDue = 0;
        if (amountDueEl && amountDueEl.textContent) {
            var raw = amountDueEl.textContent.replace(/[^\d.-]/g, '');
            amountDue = parseFloat(raw) || 0;
        }
        var rows = document.querySelectorAll('#splitPaymentsRows [data-split-row-index]');
        var total = 0;
        var entries = [];
        rows.forEach(function(r) {
            var methodSelect = r.querySelector('.split-method');
            var amountInput = r.querySelector('.split-amount');
            var refInput = r.querySelector('.split-ref');
            var amt = parseFloat(amountInput && amountInput.value ? amountInput.value : 0) || 0;
            if (amt > 0) {
                total += amt;
                entries.push({
                    method: methodSelect ? methodSelect.value : 'cash',
                    amount: amt,
                    reference: (refInput && refInput.value) ? String(refInput.value).trim() : ''
                });
            }
        });
        var diff = Math.abs(total - amountDue);
        if (diff > 0.01) {
            document.getElementById('splitPaymentsMessage').classList.remove('hidden');
            return;
        }
        document.getElementById('splitPaymentsMessage').classList.add('hidden');
        var tenderedEl = document.getElementById('amountTendered');
        if (tenderedEl) tenderedEl.value = total.toFixed(2);
        closeSplitPaymentsModal();
        if (typeof window.applySplitPaymentsToTransaction === 'function') {
            window.applySplitPaymentsToTransaction(entries);
        }
    };

    // --- Subsidy (F3): open Over All Discount with SUBSIDY pre-selected ---
    // --- Free Charge Modal (F11) ---
    window.openFreeChargeModal = function() {
        var modal = document.getElementById('freeChargeModal');
        var reasonEl = document.getElementById('freeChargeReasonNotes');
        var errEl = document.getElementById('freeChargeReasonError');
        if (!modal) return;
        if (reasonEl) reasonEl.value = '';
        if (errEl) { errEl.classList.add('hidden'); errEl.textContent = ''; }
        modal.classList.add('show');
        modal.style.display = 'flex';
        setTimeout(function() { if (reasonEl) reasonEl.focus(); }, 100);
    };
    window.closeFreeChargeModal = function() {
        var modal = document.getElementById('freeChargeModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };
    window.confirmFreeChargeProceed = function() {
        var reasonEl = document.getElementById('freeChargeReasonNotes');
        var errEl = document.getElementById('freeChargeReasonError');
        var reason = (reasonEl && reasonEl.value) ? String(reasonEl.value).trim() : '';
        if (!reason) {
            if (errEl) {
                errEl.textContent = 'Please enter a reason or notes before proceeding.';
                errEl.classList.remove('hidden');
            }
            if (reasonEl) reasonEl.focus();
            return;
        }
        if (errEl) errEl.classList.add('hidden');
        window.freeChargeReason = reason;
        var amountTenderedEl = document.getElementById('amountTendered');
        if (amountTenderedEl) amountTenderedEl.value = '0';
        if (typeof selectPaymentMethod === 'function') selectPaymentMethod('cash');
        if (typeof updateChangeDisplay === 'function') updateChangeDisplay();
        closeFreeChargeModal();
        if (typeof completeTransaction === 'function') completeTransaction();
    };

    // --- Outright Sale Modal [ F5 ] ---
    window.openOutrightSaleModal = function() {
        var modal = document.getElementById('outrightSaleModal');
        if (modal) {
            modal.classList.add('show');
            modal.style.display = 'flex';
        }
    };
    window.closeOutrightSaleModal = function() {
        var modal = document.getElementById('outrightSaleModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };
    window.confirmOutrightSale = function() {
        // Set order type as outright sale (you can store in a global or pass to completeTransaction later)
        if (typeof window.setSalesOrderOption === 'function') window.setSalesOrderOption('outright');
        closeOutrightSaleModal();
    };

    // --- Reserved Modal [ F6 ]: uses same modal and openReservedModal/closeReservedModal from cashier_pos (set on window by main POS script) ---

    // --- Utang confirmation modal (when CHANGE is negative on Complete Payment) ---
    window.openUtangConfirmModal = function() {
        var modal = document.getElementById('utangConfirmModal');
        if (modal) {
            modal.classList.add('show');
            modal.style.display = 'flex';
        }
    };
    window.closeUtangConfirmModal = function() {
        var modal = document.getElementById('utangConfirmModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };
    window.confirmUtangProceed = function() {
        closeUtangConfirmModal();
        openCreditTermsModal();
    };

    // --- Credit/Terms Modal [ F10 ] ---
    window.openCreditTermsModal = function() {
        var modal = document.getElementById('creditTermsModal');
        if (!modal) return;
        document.getElementById('creditTermsCustomer').value = '';
        document.getElementById('creditTermsType').value = '';
        document.getElementById('creditTermsReference').value = '';
        var contactIdEl = document.getElementById('creditTermsContactId');
        if (contactIdEl) contactIdEl.value = '';
        var resultsEl = document.getElementById('creditTermsContactResults');
        if (resultsEl) { resultsEl.classList.add('hidden'); resultsEl.classList.remove('block'); }
        var selectedEl = document.getElementById('creditTermsSelectedContact');
        if (selectedEl) selectedEl.textContent = '— No contact selected —';
        modal.classList.add('show');
        modal.style.display = 'flex';
        setTimeout(function() {
            var el = document.getElementById('creditTermsCustomer');
            if (el) el.focus();
        }, 100);
    };
    window.closeCreditTermsModal = function() {
        var modal = document.getElementById('creditTermsModal');
        if (modal) {
            modal.classList.remove('show');
            modal.style.display = 'none';
        }
    };
    window.confirmCreditTerms = function() {
        var customerEl = document.getElementById('creditTermsCustomer');
        var customer = (customerEl && customerEl.value) ? customerEl.value.trim() : '';
        var contactIdEl = document.getElementById('creditTermsContactId');
        var contactId = (contactIdEl && contactIdEl.value) ? contactIdEl.value : '';
        var terms = (document.getElementById('creditTermsType') && document.getElementById('creditTermsType').value) ? document.getElementById('creditTermsType').value : '';
        var ref = (document.getElementById('creditTermsReference') && document.getElementById('creditTermsReference').value) ? document.getElementById('creditTermsReference').value.trim() : '';
        if (typeof window.setSalesOrderOption === 'function') window.setSalesOrderOption('credit_terms', { customer: customer, contact_id: contactId, terms: terms, reference: ref });
        closeCreditTermsModal();
        window.creditTermsProceedFlag = true;
        if (typeof completeTransaction === 'function') completeTransaction();
    };

    // Contact search for Credit/Terms modal (debounce + fetch + dropdown)
    (function() {
        var searchTimeout;
        var contactsSearchUrl = '{{ route("cashier.pos.contacts.search") }}';
        var customerInput = document.getElementById('creditTermsCustomer');
        var contactIdInput = document.getElementById('creditTermsContactId');
        var resultsContainer = document.getElementById('creditTermsContactResults');
        var resultsList = document.getElementById('creditTermsContactResultsList');
        var resultsEmpty = document.getElementById('creditTermsContactResultsEmpty');
        var resultsLoading = document.getElementById('creditTermsContactResultsLoading');
        var selectedContactDiv = document.getElementById('creditTermsSelectedContact');
        var wrap = document.getElementById('creditTermsCustomerWrap');

        function showResults(show) {
            if (!resultsContainer) return;
            if (show) { resultsContainer.classList.remove('hidden'); resultsContainer.classList.add('block'); }
            else { resultsContainer.classList.add('hidden'); resultsContainer.classList.remove('block'); }
        }
        function showLoading(show) {
            if (resultsLoading) resultsLoading.classList.toggle('hidden', !show);
            if (resultsList) resultsList.classList.toggle('hidden', show);
            if (resultsEmpty) resultsEmpty.classList.add('hidden');
        }
        function showEmpty(show) {
            if (resultsEmpty) resultsEmpty.classList.toggle('hidden', !show);
            if (resultsList) resultsList.classList.toggle('hidden', show);
            if (resultsLoading) resultsLoading.classList.add('hidden');
        }
        function renderContacts(contacts) {
            if (!resultsList) return;
            if (resultsLoading) resultsLoading.classList.add('hidden');
            if (resultsEmpty) resultsEmpty.classList.add('hidden');
            resultsList.classList.remove('hidden');
            if (!contacts || contacts.length === 0) {
                resultsList.innerHTML = '';
                if (resultsEmpty) { resultsEmpty.classList.remove('hidden'); resultsList.classList.add('hidden'); }
                return;
            }
            resultsList.innerHTML = contacts.map(function(c) {
                var name = (c.customer_consignee_name || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                var sub = [c.id_number, c.contact_person].filter(Boolean).join(' · ');
                if (sub) sub = ' <span class="text-gray-400 text-xs">' + sub.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</span>';
                return '<button type="button" class="credit-terms-contact-item w-full text-left px-4 py-3 hover:bg-gray-100 border-b border-gray-100 last:border-b-0 text-black text-sm" data-id="' + (c.id || '') + '" data-name="' + (name || '').replace(/"/g, '&quot;') + '">' + name + sub + '</button>';
            }).join('');
        }
        function selectContact(id, name) {
            if (customerInput) customerInput.value = name || '';
            if (contactIdInput) contactIdInput.value = id || '';
            if (selectedContactDiv) selectedContactDiv.textContent = name ? name : '— No contact selected —';
            showResults(false);
        }
        function doSearch() {
            var q = customerInput ? customerInput.value.trim() : '';
            showResults(true);
            showLoading(true);
            fetch(contactsSearchUrl + '?q=' + encodeURIComponent(q))
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var contacts = (data && data.contacts) ? data.contacts : [];
                    renderContacts(contacts);
                    if (contacts.length === 0 && resultsEmpty) { resultsEmpty.classList.remove('hidden'); resultsList.classList.add('hidden'); }
                })
                .catch(function() { renderContacts([]); })
                .finally(function() { if (resultsLoading) resultsLoading.classList.add('hidden'); });
        }
        if (customerInput) {
            customerInput.addEventListener('input', function() {
                if (contactIdInput) contactIdInput.value = '';
                if (selectedContactDiv) selectedContactDiv.textContent = '— No contact selected —';
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(doSearch, 280);
            });
            customerInput.addEventListener('focus', function() {
                if (this.value.trim()) doSearch();
            });
        }
        document.addEventListener('click', function(e) {
            if (wrap && resultsContainer && !wrap.contains(e.target)) showResults(false);
        });
        document.addEventListener('DOMContentLoaded', function() {
            if (!resultsList) return;
            resultsList.addEventListener('click', function(e) {
                var btn = e.target && e.target.closest('.credit-terms-contact-item');
                if (!btn) return;
                var id = btn.getAttribute('data-id');
                var name = btn.getAttribute('data-name');
                if (name) name = name.replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
                selectContact(id, name);
            });
        });
    })();

    // --- Add Contact from Credit/Terms modal (open, close back to Credit/Terms, Terms sub-modal, form submit) ---
    // When Add Contact is shown, hide Credit/Terms so only one modal is visible. When Add Contact closes, show Credit/Terms again.
    window.openAddContactFromCreditTerms = function() {
        var creditTermsModal = document.getElementById('creditTermsModal');
        var addModal = document.getElementById('addContactModalCT');
        if (!addModal) return;
        if (creditTermsModal) {
            creditTermsModal.classList.remove('show');
            creditTermsModal.style.display = 'none';
        }
        document.getElementById('addContactFormCT')?.reset();
        var discountEl = document.getElementById('discount_id_add_ct');
        if (discountEl) discountEl.value = '0';
        updateTermsDisplayCT();
        addModal.style.display = 'flex';
        addModal.classList.add('show');
    };
    window.closeAddContactToCreditTerms = function() {
        var addModal = document.getElementById('addContactModalCT');
        var creditTermsModal = document.getElementById('creditTermsModal');
        if (addModal) {
            addModal.classList.remove('show');
            addModal.style.display = 'none';
        }
        if (creditTermsModal) {
            creditTermsModal.classList.add('show');
            creditTermsModal.style.display = 'flex';
        }
    };
    function updateTermsDisplayCT() {
        var cType = document.getElementById('payment_c_type_add_ct');
        var days = document.getElementById('payment_days_month_add_ct');
        var limit = document.getElementById('payment_credit_limit_add_ct');
        var displayEl = document.getElementById('terms_display_add_ct');
        var termsEl = document.getElementById('terms_of_payment_add_ct');
        var c = (cType && cType.value) || '';
        var d = (days && days.value) || '';
        var l = (limit && limit.value) || '';
        var display = [c, d, l].filter(Boolean).join(' / ') || '#';
        var terms = [c, d, l].filter(Boolean).join(' / ') || '';
        if (displayEl) displayEl.value = display;
        if (termsEl) termsEl.value = terms;
    }
    document.addEventListener('DOMContentLoaded', function() {
        var addBtn = document.getElementById('creditTermsAddContactBtn');
        var addModal = document.getElementById('addContactModalCT');
        var closeAddBtn = document.getElementById('closeAddContactCT');
        var backBtn = document.getElementById('addContactBackBtnCT');
        var backdrop = document.getElementById('addContactModalCTBackdrop');
        if (addBtn) addBtn.addEventListener('click', function() { window.openAddContactFromCreditTerms(); });
        if (closeAddBtn) closeAddBtn.addEventListener('click', function() { window.closeAddContactToCreditTerms(); });
        if (backBtn) backBtn.addEventListener('click', function() { window.closeAddContactToCreditTerms(); });
        if (backdrop) backdrop.addEventListener('click', function() { window.closeAddContactToCreditTerms(); });

        var termsModalCT = document.getElementById('termsModalCT');
        var openTermsAddCT = document.getElementById('openTermsModalAddCT');
        var closeTermsCT = document.getElementById('closeTermsModalCT');
        var termsOKCT = document.getElementById('termsModalOKCT');
        var termsCTypeCT = document.getElementById('terms_c_type_ct');
        var termsDaysCT = document.getElementById('terms_days_month_ct');
        var termsLimitCT = document.getElementById('terms_credit_limit_ct');
        if (openTermsAddCT && termsModalCT) {
            openTermsAddCT.addEventListener('click', function() {
                termsCTypeCT.value = (document.getElementById('payment_c_type_add_ct') && document.getElementById('payment_c_type_add_ct').value) || 'CASH';
                termsDaysCT.value = (document.getElementById('payment_days_month_add_ct') && document.getElementById('payment_days_month_add_ct').value) || 'ONSPOT';
                termsLimitCT.value = (document.getElementById('payment_credit_limit_add_ct') && document.getElementById('payment_credit_limit_add_ct').value) || '0';
                termsModalCT.style.display = 'flex';
                termsModalCT.classList.add('show');
            });
        }
        if (closeTermsCT && termsModalCT) closeTermsCT.addEventListener('click', function() { termsModalCT.classList.remove('show'); termsModalCT.style.display = 'none'; });
        if (termsOKCT && termsModalCT) {
            termsOKCT.addEventListener('click', function() {
                var cType = termsCTypeCT.value || 'CASH';
                var days = termsDaysCT.value || 'ONSPOT';
                var limit = termsLimitCT.value || '0';
                var elC = document.getElementById('payment_c_type_add_ct');
                var elD = document.getElementById('payment_days_month_add_ct');
                var elL = document.getElementById('payment_credit_limit_add_ct');
                if (elC) elC.value = cType;
                if (elD) elD.value = days;
                if (elL) elL.value = limit;
                updateTermsDisplayCT();
                termsModalCT.classList.remove('show');
                termsModalCT.style.display = 'none';
            });
        }

        var formCT = document.getElementById('addContactFormCT');
        var storeContactUrl = '{{ route("cashier.pos.contacts.store") }}';
        var csrfToken = document.querySelector('meta[name="csrf-token"]');
        csrfToken = csrfToken ? csrfToken.getAttribute('content') : '';
        if (formCT && storeContactUrl) {
            formCT.addEventListener('submit', function(e) {
                e.preventDefault();
                var fd = new FormData(formCT);
                var submitBtn = formCT.querySelector('button[type="submit"]');
                if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = ' Adding...'; }
                fetch(storeContactUrl, { method: 'POST', body: fd, headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        if (data && data.success && data.contact) {
                            window.closeAddContactToCreditTerms();
                            var custEl = document.getElementById('creditTermsCustomer');
                            var idEl = document.getElementById('creditTermsContactId');
                            var selEl = document.getElementById('creditTermsSelectedContact');
                            var name = (data.contact.customer_consignee_name || '').trim();
                            if (custEl) custEl.value = name;
                            if (idEl) idEl.value = (data.contact.id || '').toString();
                            if (selEl) selEl.textContent = name || '— No contact selected —';
                        } else {
                            alert(data && data.message ? data.message : 'Failed to add contact.');
                        }
                    })
                    .catch(function() { alert('Failed to add contact. Please try again.'); })
                    .finally(function() { if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-plus-square text-xs md:text-base"></i> Add Contact'; } });
            });
        }
    });

    window.openSubsidyModal = function() {
        if (typeof openOverAllDiscountModal === 'function') openOverAllDiscountModal();
        var nameSelect = document.getElementById('overAllDiscountName');
        if (nameSelect) {
            nameSelect.value = 'SUBSIDY';
            if (typeof recalcOverAllDiscount === 'function') recalcOverAllDiscount();
        }
    };

    // --- Auto Pay w/o Print (F7): complete payment and skip receipt modal ---
    window.autoPayWithoutPrint = function() {
        window.autoPayWithoutPrintFlag = true;
        if (typeof handleCompletePaymentClick === 'function') handleCompletePaymentClick();
    };

    // Initialize when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        // Restrict reference number input to numeric only
        var refInput = document.getElementById('referenceNumberInput');
        if (refInput) {
            refInput.addEventListener('input', function() {
                this.value = this.value.replace(/\D/g, '');
            });
            refInput.addEventListener('paste', function(e) {
                e.preventDefault();
                var pasted = ((e.clipboardData || window.clipboardData).getData('text') || '').replace(/\D/g, '');
                var start = this.selectionStart, end = this.selectionEnd;
                this.value = this.value.substring(0, start) + pasted + this.value.substring(end);
                this.setSelectionRange(start + pasted.length, start + pasted.length);
            });
        }

        const paymentMethodSelect = document.getElementById('paymentMethodSelect');
        if (paymentMethodSelect) {
            paymentMethodSelect.addEventListener('change', function() {
                if (this.value === 'add_new') {
                    window.openAddPaymentMethodModal();
                    this.value = '';
                    if (typeof selectPaymentMethod === 'function') selectPaymentMethod(null);
                } else if (this.value && typeof selectPaymentMethod === 'function') {
                    selectPaymentMethod(this.value);
                } else {
                    // User chose "Select Payment" (empty) – clear method so modal can show on Complete
                    if (typeof selectPaymentMethod === 'function') selectPaymentMethod(null);
                }
            });
        }
        var discountValueInput = document.getElementById('overAllDiscountValue');
        var discountOperatorSelect = document.getElementById('overAllDiscountOperator');
        if (discountValueInput) discountValueInput.addEventListener('input', window.recalcOverAllDiscount);
        if (discountValueInput) discountValueInput.addEventListener('change', window.recalcOverAllDiscount);
        if (discountOperatorSelect) discountOperatorSelect.addEventListener('change', window.recalcOverAllDiscount);
        document.addEventListener('keydown', function(e) {
            var modal = document.getElementById('overAllDiscountModal');
            if (!modal || !modal.classList.contains('show')) return;
            if (e.key === 'F10') {
                e.preventDefault();
                window.applyOverAllDiscount();
            } else if (e.key === 'F9') {
                e.preventDefault();
                window.removeOverAllDiscount();
            }
        });
        document.addEventListener('keydown', function(e) {
            var paymentInterface = document.getElementById('paymentInterface');
            var paymentVisible = paymentInterface && !paymentInterface.classList.contains('hidden');
            var freeChargeModal = document.getElementById('freeChargeModal');
            var freeChargeOpen = freeChargeModal && freeChargeModal.classList.contains('show');
            var overAllDiscountOpen = document.getElementById('overAllDiscountModal') && document.getElementById('overAllDiscountModal').classList.contains('show');
            if (e.key === 'F11' && paymentVisible) {
                e.preventDefault();
                if (freeChargeOpen) {
                    window.confirmFreeChargeProceed();
                } else if (typeof openFreeChargeModal === 'function') {
                    openFreeChargeModal();
                }
                return;
            }
            if (freeChargeOpen && e.key === 'Escape') {
                e.preventDefault();
                closeFreeChargeModal();
            }
            if (e.key === 'Escape') {
                if (document.getElementById('outrightSaleModal') && document.getElementById('outrightSaleModal').classList.contains('show')) {
                    e.preventDefault();
                    closeOutrightSaleModal();
                } else if (document.getElementById('reservedModal') && document.getElementById('reservedModal').classList.contains('show')) {
                    e.preventDefault();
                    closeReservedModal();
                } else if (document.getElementById('creditTermsModal') && document.getElementById('creditTermsModal').classList.contains('show')) {
                    e.preventDefault();
                    closeCreditTermsModal();
                }
            }
            if (paymentVisible && !freeChargeOpen) {
                if (e.key === 'F5') {
                    e.preventDefault();
                    if (typeof openOutrightSaleModal === 'function') openOutrightSaleModal();
                } else if (e.key === 'F6') {
                    e.preventDefault();
                    if (typeof openReservedModal === 'function') openReservedModal();
                } else if (e.key === 'F10' && !overAllDiscountOpen) {
                    e.preventDefault();
                    if (typeof openCreditTermsModal === 'function') openCreditTermsModal();
                }
            }
        });

        const addPaymentMethodForm = document.getElementById('addPaymentMethodForm');
        if (addPaymentMethodForm) {
            addPaymentMethodForm.addEventListener('submit', function(e) {
                e.preventDefault();
                savePaymentMethod();
            });
        }

        // Load payment methods on page load
        loadPaymentMethods();
    });

    function loadPaymentMethods() {
        fetch('{{ route("cashier.pos.payment-methods.index") }}', {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('paymentMethodSelect');
            if (select && data.length > 0) {    
                // Remove existing custom payment methods (keep default ones)
                const defaultOptions = ['', 'cash', 'card', 'gcash', 'bank2bank', 'check', 'other', 'split', 'add_new'];
                Array.from(select.options).forEach(option => {
                    if (!defaultOptions.includes(option.value)) {
                        option.remove();
                    }
                });

                // Add custom payment methods before the "add_new" option
                const addNewOption = select.querySelector('option[value="add_new"]');
                data.forEach(method => {
                    const option = document.createElement('option');
                    option.value = method.id;
                    option.textContent = method.name.toUpperCase();
                    select.insertBefore(option, addNewOption);
                });
            }
        })
        .catch(function() {});
    }

    function savePaymentMethod() {
        const form = document.getElementById('addPaymentMethodForm');
        const formData = new FormData(form);
        const data = {
            name: formData.get('name'),
            description: formData.get('description') || null,
        };

        fetch('{{ route("cashier.pos.payment-methods.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            credentials: 'same-origin',
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Add the new payment method to the select
                const select = document.getElementById('paymentMethodSelect');
                const addNewOption = select.querySelector('option[value="add_new"]');
                const option = document.createElement('option');
                option.value = data.data.id;
                option.textContent = data.data.name.toUpperCase();
                option.selected = true;
                select.insertBefore(option, addNewOption);
                
                // Close modal and reset form
                closeAddPaymentMethodModal();
                
                // Show success message (optional)
                alert('Payment method added successfully!');
            } else {
                alert('Error: ' + (data.message || 'Failed to add payment method'));
            }
        })
        .catch(function() {
            alert('Error saving payment method. Please try again.');
        });
    }
</script>