
                    <a class="navbar-brand text-white">
                        <img id="with-internet" class="img-icon" src="<!--[#SITE_URL;]-->/res/img/with-internet.svg" alt="PeakPOS">
                        <img id="no-internet" class="img-icon d-none" src="<!--[#SITE_URL;]-->/res/img/no-internet.svg" alt="PeakPOS">
                    </a>
                </nav>

                <!-- main content -->
                <section id="POS_MAIN_CONTAINER" class="page-content-wrapper row no-gutters d-print-none">

                    <!-- products -->
                    <div class="col-sm-7 bg-dark d-flex flex-column justify-content-between pb-4">
                        <div id="products-filter-wrapper" class="p-3">
                            <div class="div-categories">
                                <!-- category filter -->
                                <div class="input-group">
                                    <select id="CATEGORY_CMB" class="rounded-0" style="width: 91%;"></select>
                                    <div class="input-group-append">
                                        <button id="OPEN_SEARCH_BBI" class="btn btn-primary btn-sm rounded-0" type="button"><i class="fas fa-search"></i></button>
                                        <button id="SCAN_BARCODE_CMD" class="btn btn-danger btn-sm rounded-0" type="button"><i class="fas fa-barcode"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="div-search d-none">
                                <!-- product search -->
                                <div class="input-group">
                                    <input id="SEARCH_DESC_TXT" type="text" class="form-control" placeholder="Search Item">
                                    <div class="input-group-append">
                                        <button id="SEARCH_CMD" class="btn btn-info" type="button">GO</button>
                                        <button id="CLOSE_SEARCH_BBI" class="btn btn-danger" type="button"><i class="fas fa-times"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="div-products bg-dark d-print-none">
                            <div class="row mx-3" id="PRODUCT_BRANCH_LV">
                                <div class="col-lg-4 col-md-3 col-4 mb-2 p-1" id="PRODUCT_BRANCH_LV_ROW">
                                    <div class="card item-card">
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_ID" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_BARCODE" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_CAT_PRODTYPE_ID_LV1" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_AMOUNT_VAT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_AMOUNT_POINT" style="display: none;"></div>
                                        
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_ALLOW_DISCOUNT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_ALLOW_SENIOR" style="display: none;"></div>
                                        
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_PER_PIECE_QTY" style="display: none;"></div>
                                        
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_CAT_TAXMODEL_ID" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_TAXMODEL_AMOUNT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_TAXMODEL_PERCENTAGE" style="display: none;"></div>

                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_ID" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_PERCENTAGE" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_AMOUNT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_VAT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_HAS_POINT" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_CHANGE_TAX_TYPE" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_DISCOUNT_CAT_TAXMODEL_ID" style="display: none;"></div>

                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_CAT_UOM_ID" style="display: none;"></div>
                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_UOM_CODE" style="display: none;"></div>

                                        <div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODUCT_IMAGE"></div>
                                        <div class="card-body p-1">
                                            <h4 class="card-title item-name mb-1"><div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODBRANCH_CAT_PRODUCT_ID_DESCRIPTION"></div></h4>
                                            <h4 class="card-title item-price mb-0 py-1 pr-1 border-top border-blue"><div id="PRODUCT_BRANCH_LV_ROW_CAT_PRODBRANCH_AMOUNT_PRICE" style="text-align: right;"></div></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <footer class="footer bg-blue d-flex justify-content-between align-items-center p-2 footer-ico bakery-pos-btn d-none">
                            <div>
                                <button id="VOID_BBI" class="btn btn-danger font-weight-bold" type="button" title="Void Order"> <img src="<!--[#SITE_URL;]-->/res/img/void.svg"> <span>VOID</span></button> 
                                <div class="btn-group dropup">
                                  <button type="button" id="OTHERS_BBI" class="btn btn-light dropdown-toggle font-weight-bold" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span>OTHERS</span>
                                  </button>
                                  <div class="dropdown-menu dropupmenu">
                                    <button id="TRANSACTIONS_BBI" class="btn btn-light font-weight-bold" type="button" title="Orders"> <img src="<!--[#SITE_URL;]-->/res/img/order.svg"> <span>ORDERS</span></button>
                                    <button id="SALES_RETURN_BBI" class="btn btn-light font-weight-bold" type="button" title="Orders"> <img src="<!--[#SITE_URL;]-->/res/img/return.svg"> <span>RETURN</span></button>
                                    <button id="CUSTOMERS_BBI" class="btn btn-light font-weight-bold" type="button" title="Add Customer"><img src="<!--[#SITE_URL;]-->/res/img/cust.svg"> <span>CUST</span></button>
                                    <button id="PRICING_BBI" class="btn btn-light font-weight-bold" type="button" title="Change Pricing Scheme"><img src="<!--[#SITE_URL;]-->/res/img/price.svg"> <span>PRICE</span></button>
                                    <button id="LOYALTYCARD_BBI" class="btn btn-light font-weight-bold d-none" type="button" title="Use Loyalty Card"><img src="<!--[#SITE_URL;]-->/res/img/loyalty.svg"> <span>LOYALTY</span></button>
                                  </div>
                                </div>
                                
                            </div>
                            <div>
                                <button id="EDIT_QTY_BBI" class="btn btn-light font-weight-bold" type="button" title="Quanity"><img src="<!--[#SITE_URL;]-->/res/img/qty.svg"> <span>QTY</span></button>
                                <button id="DISCOUNTS_BBI" class="btn btn-light font-weight-bold" type="button" title="Discounts"><img src="<!--[#SITE_URL;]-->/res/img/disc.svg"> <span>DISC</span></button>
                            </div>
                        </footer>
                    </div>

                    <div class="col-sm-5">
                        <div class="div-cart d-flex flex-column justify-content-between d-print-none">
                            <!-- cart header -->
                            <div class="div-cart-header">
                                <table class="table table-sm mb-0">
                                    <thead>
                                        <tr class="table-info">
                                            <th width="50%">Transaction No.</th>
                                            <th width="50%" class="text-right" id="POS_TRANSACTION_NO">000000001</th>
                                        </tr>
                                        <tr id="POS_REFERENCE_DISPLAY" class="taable-secondary d-none">
                                            <th width="50%">Reference No.</th>
                                            <th width="50%" class="text-right" id="POS_REFERENCE_NO">-</th>
                                        </tr>
                                        <tr id="CUSTOMER_INFO_TXT" class="table-secondary d-none">
                                            <th width="50%">Customer <a href="javascript:void(0);" class="text-danger ml-1 d-none" id="DESEL_CUST_BBI"><small>REMOVE</small></a></th>
                                            <th width="50%" class="text-right"><span id="POS_CUSTOMER_ID" class="d-none">1</span><span id="POS_CUSTOMER_NAME">-</span><span id="POS_CUSTOMER_TAG" class="ml-2"></span><span id="POS_CUSTOMER_TIN" class="d-none"></span><span id="POS_CUSTOMER_ADDRESS" class="d-none"></span></th>
                                        </tr>
                                        <tr id="LOYALTYCARD_INFO_TXT" class="table-secondary d-none">
                                            <th width="50%">Loyalty Card <a href="javascript:void(0);" class="text-danger ml-1 d-none" id="DESEL_LOYALTYCARD_BBI"><small>REMOVE</small></a></th>
                                            <th width="50%" class="text-right"><span id="POS_LOYALTYCARD_ID" class="d-none"></span><span id="POS_LOYALTYCARD_POINTS" class="d-none"></span><span id="POS_LOYALTYCARD_NUMBER">-</span></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <!-- cart content -->
                            <div class="fix-table-head-mob">
                                <table class="pos-table-mob table-sm" id="CART_DGV">
                                    <thead class="bg-blue text-white cart-header-mob">
                                        <tr id="CART_DGV_HEADER">
                                            <th id="CART_DGV_HEADER_COUNT" style="display: none;"></th>

                                            <th id="CART_DGV_HEADER_PRODUCT_LV_INDEX" style="display: none;"></th>

                                            <th id="CART_DGV_HEADER_REMOVE_ITEM_CMD" class="text-center"></th>
                                            
                                            <th id="CART_DGV_HEADER_PRODUCT_ID" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_PRODUCT_DESCRIPTION" width="40%">Item</th>
                                            <th id="CART_DGV_HEADER_PRODUCT_VAT" style="display: none;">Item</th>

                                            <th id="CART_DGV_HEADER_QTY" width="10%" class="text-right"></th>
                                            <th id="CART_DGV_HEADER_QTY_PCS" style="display: none;"></th>
                                            
                                            <th id="CART_DGV_HEADER_POINTS" style="display: none;"></th>

                                            <th id="CART_DGV_HEADER_DISCOUNT_ID" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_VALUE" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_PERCENTAGE" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_AMOUNT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_VAT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_HAS_POINT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_CHANGE_TAX_TYPE" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_DISCOUNT_CAT_TAXMODEL_ID" style="display: none;"></th>

                                            <th id="CART_DGV_HEADER_UOM_ID" style="display: none;">QTY</th>
                                            <th id="CART_DGV_HEADER_UOM_CODE" width="10%" class="text-right">QTY</th>

                                            <th id="CART_DGV_HEADER_PRICE" width="20%" class="text-right">Price</th>
                                            <th id="CART_DGV_HEADER_AMOUNT" width="20%" class="text-right">Amount</th>
                                            
                                            <th id="CART_DGV_HEADER_NONVAT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_VAT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_VATABLE" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_VATEXEMPT" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_VATOTHER" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_VATLESS" style="display: none;"></th>
                                            <th id="CART_DGV_HEADER_ZERORATED" style="display: none;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="CART_DGV_ROW">
                                            <td id="CART_DGV_ROW_COUNT" style="display: none;"></td>

                                            <td id="CART_DGV_ROW_PRODUCT_LV_INDEX" style="display: none;"></td>
                                            
                                            <td id="CART_DGV_ROW_REMOVE_ITEM_CMD" class="text-center">
                                                <button type="button" class="btn btn-link text-decoration-none p-0 m-0 text-danger">X</button>
                                            </td>

                                            <td id="CART_DGV_ROW_PRODUCT_ID" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_PRODUCT_DESCRIPTION" width="40%"></td>
                                            <td id="CART_DGV_ROW_PRODUCT_VAT" style="display: none;"></td>

                                            <td id="CART_DGV_ROW_QTY" width="10%" class="text-right"></td>
                                            <td id="CART_DGV_ROW_QTY_PCS" style="display: none;"></td>

                                            <td id="CART_DGV_ROW_POINTS" style="display: none;"></td>

                                            <td id="CART_DGV_ROW_DISCOUNT_ID" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_VALUE" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_PERCENTAGE" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_AMOUNT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_VAT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_HAS_POINT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_DISCOUNT_CHANGE_TAX_TYPE" style="display: none;"></td>
                                            <th id="CART_DGV_ROW_DISCOUNT_CAT_TAXMODEL_ID" style="display: none;"></th>

                                            <td id="CART_DGV_ROW_UOM_ID" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_UOM_CODE" width="10%" class="text-right"></td>

                                            <td id="CART_DGV_ROW_PRICE" width="20%" class="text-right"></td>
                                            <td id="CART_DGV_ROW_AMOUNT" width="20%" class="text-right"></td>

                                            <td id="CART_DGV_ROW_NONVAT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_VAT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_VATABLE" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_VATEXEMPT" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_VATOTHER" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_VATLESS" style="display: none;"></td>
                                            <td id="CART_DGV_ROW_ZERORATED" style="display: none;"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- footer collapse -->
                             <button class="btn btn-primary btn-pay-mob" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-money-bill-wave mr-2"></i> PAY</button>

                             <div class="collapse collapse-mob" id="collapseExample">
                                <div class="card card-body card-mob">
                                    <!-- cart footer -->
                                    <div class="div-cart-footer">
                                        <table class="table table-sm mb-2 mr-1">
                                            <tfoot>
                                                <tr class="d-none">
                                                    <th colspan="6">Total Points Earned:</th>
                                                    <td class="text-right" id="TOTAL_POINTS">0</td>
                                                </tr>
                                                <tr>
                                                    <th colspan="6">Total Items:</th>
                                                    <td class="text-right" id="TOTAL_ITEMS">0</td>
                                                </tr>
                                                <tr>
                                                    <th colspan="6">Sub-Total:</th>
                                                    <td class="text-right" id="TOTAL_SUBTOTAL">0.00</td>
                                                </tr>
                                                <tr>
                                                    <th colspan="6">Less Discount: <a href="javascript:void(0);" class="text-danger ml-1 d-none" id="REMOVE_DISCOUNT" onclick="COMPUTE_DISCOUNT_REMOVE_ALL()"><small>REMOVE</small></a></th>
                                                    <td class="text-right" id="TOTAL_DISCOUNT">0.00</td>
                                                </tr>
                                                <tr>
                                                    <th colspan="6">Total Amount Due:</th>
                                                    <td class="text-right h2" id="TOTAL_AMOUNT">0.00</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>

                                    <!-- cart options -->
                                    <div class="div-cart-options px-2 pb-3 d-flex justify-content-between align-items-center">
                                        <div>
                                            Pricing Scheme: <br><span id="PRICE_MODEL_TXT">SRP</span> 
                                        </div>
                                        <button id="PAY_BBI" class="btn btn-success btn-lg w-50 btn-pay-cart-mob" type="button" title="Payment"><i class="fas fa-money-bill-wave mr-2"></i> PAY</button>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">OTHERS</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <button id="TRANSACTIONS_BBI" class="btn btn-outline-primary font-weight-bold" type="button" title="Orders"> <img src="<!--[#SITE_URL;]-->/res/img/order.svg"> <span>ORDERS</span></button>
                                    <button id="SALES_RETURN_BBI" class="btn btn-outline-primary font-weight-bold" type="button" title="Orders"> <img src="<!--[#SITE_URL;]-->/res/img/order.svg"> <span>RETURN</span></button>
                                    <button id="CUSTOMERS_BBI" class="btn btn-outline-primary font-weight-bold" type="button" title="Add Customer"><img src="<!--[#SITE_URL;]-->/res/img/cust.svg"> <h6>CUST</h6></button>
                                    <button id="PRICING_BBI" class="btn btn-outline-primary font-weight-bold" type="button" title="Change Pricing Scheme"><img src="<!--[#SITE_URL;]-->/res/img/price.svg"> <span>PRICE</span></button>
                                    <button id="LOYALTYCARD_BBI" class="btn btn-outline-primary font-weight-bold" type="button" title="Use Loyalty Card"><img src="<!--[#SITE_URL;]-->/res/img/loyalty.svg"> <span>LOYALTY</span></button>
                                  </div>
                                </div>
                              </div>
                            </div>

                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
    
    <!--[#IMPORT:app/pos/modal_pos_sales_history.txt;]-->