     <div class="col-6" id="POS_PAYMENT_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2 align-items-center">
            <h5 class="mb-0">Total Amount Due</h5> 
            <h1 class="float-right mb-0" id="CHECKOUT_TOTAL"></h1>
        </div>
        <div class="modal-body p-1">
        
            <table class="table table-sm table-striped" id="PAYMENT_DGV">
				<thead class="bg-blue">
					<tr id="PAYMENT_DGV_HEADER">
						<th id="PAYMENT_DGV_HEADER_REC_POSPAY_CAT_PAYTYPE_ID" style="display: none;"></th>
						<th id="PAYMENT_DGV_HEADER_CAT_PAYTYPE_DESCRIPTION" style="width:60%;"></th>
						<th id="PAYMENT_DGV_HEADER_REC_POSPAY_AMOUNT_PAID" style="width:40%;"></th>
					</tr>
				</thead>
				<tbody>
					<tr style="cursor: pointer;" id="PAYMENT_DGV_ROW">
						<td id="PAYMENT_DGV_ROW_REC_POSPAY_CAT_PAYTYPE_ID" style="display: none;"></td>
						<td id="PAYMENT_DGV_ROW_CAT_PAYTYPE_DESCRIPTION"></td>
						<td id="PAYMENT_DGV_ROW_REC_POSPAY_AMOUNT_PAID"><input type="number" step='0.01' class="form-control text-right"></td>
					</tr>
				</tbody>
			</table>
                
            <div class="my-2 d-flex justify-content-between flex-wrap">
                <button class="btn btn-blue flex-fill rounded-0 mr-1" onclick="PAYMENT_QUICK_CASH(1000.00)">1000</button>
                <button class="btn btn-blue flex-fill rounded-0 mx-1" onclick="PAYMENT_QUICK_CASH(500.00)">500</button>
                <button class="btn btn-blue flex-fill rounded-0 mx-1" onclick="PAYMENT_QUICK_CASH(200.00)">200</button>
                <button class="btn btn-blue flex-fill rounded-0 mx-1" onclick="PAYMENT_QUICK_CASH(100.00)">100</button>
                <button class="btn btn-blue flex-fill rounded-0 mx-1" onclick="PAYMENT_QUICK_CASH(50.00)">50</button>
                <button class="btn btn-blue flex-fill rounded-0 ml-1" onclick="PAYMENT_QUICK_CASH(20.00)">20</button>
            </div> 

            <button id="PAYMENT_OPTIONS_BBI" type="button" class="btn btn-secondary btn-block rounded-0 my-2">Other Payment Options</button>

            <div id="PAYMENT_OPTIONS" class="d-none my-2 justify-content-between flex-wrap">
                <button class="btn btn-primary rounded-0 mr-1 my-1 flex-fill" onclick="PAYMENT_METHOD_SHOW(2)">CARD</button>
                <button class="btn btn-primary rounded-0 m-1 flex-fill" onclick="PAYMENT_METHOD_SHOW(3)">CHECK</button>
                <button class="btn btn-primary rounded-0 m-1" onclick="PAYMENT_METHOD_SHOW(4)">LOYALTY</button>
                <button class="btn btn-primary rounded-0 m-1 flex-fill" onclick="PAYMENT_METHOD_SHOW(6)">ACCOUNTS</button>
                <button class="btn btn-primary rounded-0 ml-1 my-1 flex-fill" onclick="PAYMENT_METHOD_SHOW(7)">VOUCHER</button>
            </div>  

            <table class="table table-sm mb-0">
                <tr class="table-info">
                    <th width="60%" class="align-middle">CHANGE <input type="hidden" id="CHECKOUT_CHANGE_VALUE" name="CHECKOUT_CHANGE_VALUE" value="0"></th>
                    <th width="40%" class="text-right text-blue h3" id="CHECKOUT_CHANGE">0.00</th>
                </tr>
            </table>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-danger" id="POS_PAYMENT_MODAL_MODAL_CLOSE_CMD">CANCEL</button>
            <button type="button" class="btn btn-success rounded-0" id="CHECKOUT_BBI">PROCEED</button>
        </div>
    </div>
 
 	<div class="col-8" id="POS_PAYMENT_DETAIL_MODAL" style="display: none;">
         <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY ##
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-CARD" method="post">

                <div class="form-group row">
                    <label class="col-4 col-form-label">Payment Method:</label>
                    <div class="col-8">
                        <select class="form-control" id="REC_POSPAY_CAT_PAYTYPE_ID_CMB">
                        	<option value="2">Card</option>
                        	<option value="3">Check</option>
                        	<option value="4">Bank Transfer</option>
                        	<option value="5">Account</option>
                        	<option value="6">Loyalty Points</option>
                        	<option value="7">Gift Certificate</option>
                        </select>
                    </div>
                </div>
                            
                <div class="form-group row" id="REC_POSPAY_CAT_BANK_ID_BLOCK">
                    <label class="col-4 col-form-label">Bank:</label>
                    <div class="col-8">
                        <select class="form-control" id="REC_POSPAY_CAT_BANK_ID_CMB"></select>
                        <div id="REC_POSPAY_CAT_BANK_ID_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <div class="form-group row" id="REC_POSPAY_CAT_CARDTYPE_ID_BLOCK">
                    <label class="col-4 col-form-label">Card Type:</label>
                    <div class="col-8">
                        <select class="form-control" id="REC_POSPAY_CAT_CARDTYPE_ID_CMB"></select>
                        <div id="REC_POSPAY_CAT_CARDTYPE_ID_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <hr>
                
                <div class="form-group row" id="REC_POSPAY_PAYEE_BLOCK">
                    <label class="col-4 col-form-label" id="REC_POSPAY_PAYEE_LBL">Name on Card:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="REC_POSPAY_PAYEE_TXT" name="CARD_NAME" autocomplete="off">
                        <div id="REC_POSPAY_PAYEE_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <div class="form-group row" id="REC_POSPAY_NUMBER_BLOCK">
                    <label class="col-4 col-form-label" id="REC_POSPAY_NUMBER_LBL">Card Number (LAST 4 DIGITS):</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="REC_POSPAY_NUMBER_TXT" autocomplete="off">
                        <div id="REC_POSPAY_NUMBER_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <div class="form-group row" id="REC_POSPAY_CHECK_DATE_BLOCK">
                    <label class="col-4 col-form-label" id="REC_POSPAY_CHECK_DATE_LBL">Check Date:</label>
                    <div class="col-8">
                        <input type="date" class="form-control" id="REC_POSPAY_CHECK_DATE_DTP">
                        <div id="REC_POSPAY_CHECK_DATE_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <div class="form-group row" id="REC_POSPAY_REMARKS_BLOCK">
                    <label class="col-4 col-form-label" id="REC_POSPAY_REMARKS_LBL">Reference:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="REC_POSPAY_REMARKS_TXT" autocomplete="off">
                        <div id="REC_POSPAY_REMARKS_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <!-- AR PAYMENT ONLY -->
                <div class="form-group row" id="CAT_PAYTERM_ID_BLOCK">
                    <label class="col-4 col-form-label">Payment Terms:</label>
                    <div class="col-8">
                        <select class="custom-select" id="CAT_PAYTERM_ID_CMB"></select>
                        <div id="CAT_PAYTERM_ID_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row" id="REC_POSSALE_DATE_DUE_BLOCK">
                    <label class="col-4 col-form-label">Due Date:</label>
                    <div class="col-8">
                        <input type="date" class="form-control" id="REC_POSSALE_DATE_DUE_DTP">
                        <div id="REC_POSSALE_DATE_DUE_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
                <!-- LOYALTY / VOUCHER PAYMENT ONLY -->
                <div class="form-group row" id="LOYALTY_VOUCHER_CODE_BLOCK">
                    <label class="col-4 col-form-label" id="LOYALTY_VOUCHER_CODE_LBL">Voucher Loyalty Search:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="LOYALTY_VOUCHER_CODE_TXT" autocomplete="off"><button class="form-control">Scan</button>
                        <div id="LOYALTY_VOUCHER_CODE_ELBL" class="invalid-feedback"></div>
                        <input type="hidden" id="REC_POSPAY_REC_LOYALTY_ID_TXT">
                        <input type="hidden" id="REC_POSPAY_REC_VOUCHER_ID_TXT">
                    </div>
                </div>
                             
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amount:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="REC_POSPAY_AMOUNT_PAID_TXT" name="CARD_AMOUNT" value="" autocomplete="off" onclick="this.select();">
                        <div id="REC_POSPAY_AMOUNT_PAID_ELBL" class="invalid-feedback"></div>
                    </div>
                </div>
                
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYMENT_DETAIL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_CARD_BBI">SUBMIT</button>
        </div>	
 	</div>
 
 
 
 
    <div class="col-8" id="POS_PAYBYCARD_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY CARD
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-CARD" method="post">
                <div class="form-group row">
                    <label class="col-4 col-form-label">Bank:</label>
                    <div class="col-8">
                        <select class="form-control" id="CARD_BANK" name="CARD_BANK"></select>
                        <div id="CARD_BANK_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Card Type:</label>
                    <div class="col-8">
                        <select class="form-control" id="CARD_TYPE" name="CARD_TYPE"></select>
                        <div id="CARD_TYPE_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <hr>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Name on Card:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="CARD_NAME" name="CARD_NAME" autocomplete="off">
                        <div id="CARD_NAME_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Card Number (LAST 4 DIGITS):</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="CARD_NUMBER" name="CARD_NUMBER" maxlength="4" minlength="4" autocomplete="off">
                        <div id="CARD_NUMBER_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Reference:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="CARD_REFERENCE" name="CARD_REFERENCE" autocomplete="off">
                        <div id="CARD_REFERENCE_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amount:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="CARD_AMOUNT" name="CARD_AMOUNT" value="" autocomplete="off" onclick="this.select();">
                        <div id="CARD_AMOUNT_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYBYCARD_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_CARD_BBI">SUBMIT</button>
        </div>
    </div>

    <div class="col-8" id="POS_PAYBYCHECK_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY CHECK
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-CHECK" method="post">
                <div class="form-group row">
                    <label class="col-4 col-form-label">Bank:</label>
                    <div class="col-8">
                        <select class="form-control" id="CHECK_BANK" name="CHECK_BANK"></select>
                        <div id="CHECK_BANK_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <hr>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Check Number:</label>
                    <div class="col-8">
                        <input type="number" class="form-control" id="CHECK_NUMBER" name="CHECK_NUMBER" maxlength="4" minlength="4" autocomplete="off">
                        <div id="CHECK_NUMBER_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Check Date:</label>
                    <div class="col-8">
                        <input type="date" class="form-control" id="CHECK_DATE" name="CHECK_DATE">
                        <div id="CHECK_DATE_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amount:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="CHECK_AMOUNT" name="CHECK_AMOUNT" value="" autocomplete="off" onclick="this.select();">
                        <div id="CHECK_AMOUNT_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYBYCHECK_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_CHECK_BBI">SUBMIT</button>
        </div>
    </div>

    <div class="col-8" id="POS_PAYBYCREDIT_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY CREDIT SALES
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-CREDIT" method="post">
                <div class="form-group row">
                    <label class="col-4 col-form-label">CHARGED TO ACCOUNT:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="CREDIT_NAME" name="CREDIT_NAME" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Payment Terms:</label>
                    <div class="col-8">
                        <select class="custom-select" id="CREDIT_TERMS" name="CREDIT_TERMS"></select>
                        <div id="CREDIT_TERMS_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Due Date:</label>
                    <div class="col-8">
                        <input type="date" class="form-control" id="CREDIT_DATE" name="CREDIT_DATE" disabled>
                        <div id="CREDIT_DATE_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amount:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="CREDIT_AMOUNT" name="CREDIT_AMOUNT" value="" autocomplete="off" disabled>
                        <div id="CREDIT_AMOUNT_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYBYCREDIT_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_CREDIT_BBI">SUBMIT</button>
        </div>
    </div>

    <div class="col-8" id="POS_PAYBYLOYALTY_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY LOYALTY POINTS
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-LOYALTY" method="post">
                <div class="form-group row">
                    <label class="col-4 col-form-label">SCAN CARD:</label>
                    <div class="col-8">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <button class="btn btn-info" type="button" id="SCAN_LOYALTY_CMD"><i class="fab fa-searchengin"></i></button>
                            </div>
                            <input type="text" class="form-control" id="LOYALTY_NUMBER" name="LOYALTY_NUMBER" disabled>
                        </div>
                        <div id="LOYALTY_NUMBER_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">TOTAL AVAILABLE POINTS:</label>
                    <div class="col-8">
                        <input type="text" class="form-control text-right" id="LOYALTY_POINTS" name="LOYALTY_POINTS" disabled>
                        <div id="LOYALTY_POINTS_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Redeem Points:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="LOYALTY_AMOUNT" name="LOYALTY_AMOUNT" value="" autocomplete="off" onclick="this.select();">
                        <div id="LOYALTY_AMOUNT_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYBYLOYALTY_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_LOYALTY_BBI">SUBMIT</button>
        </div>
    </div>

    <div class="col-8" id="POS_PAYBYVOUCHER_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                PAY BY VOUCHER / GIFT CERTIFICATES
            </h5>
        </div>
        <div class="modal-body p-1">
            <form id="FORM-VOUCHER" method="post">
                <div class="form-group row">
                    <label class="col-4 col-form-label">Control Number:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="VOUCHER_NUMBER" name="VOUCHER_NUMBER" autocomplete="off">
                        <div id="VOUCHER_NUMBER_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amounts:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="VOUCHER_AMOUNT" name="VOUCHER_AMOUNT" value="" autocomplete="off" onclick="this.select();">
                        <div id="VOUCHER_AMOUNT_ERROR" class="invalid-feedback"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary float-right" id="POS_PAYBYVOUCHER_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-primary" id="SUBMIT_VOUCHER_BBI">SUBMIT</button>
        </div>
    </div>