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

                <!-- main content -->
                <section class="page-content-wrapper row p-3 d-print-none">
                    <div class="col-sm-12">
                        <h3>Reservation Summary</h3>
                        <h5 class="text-black my-3" style="display: none;">Total Number of Transactions: <span id="transaction_count"></span></h5>
                        
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="input-group mb-3 marb5">
                                    <select class="form-control" id="REC_POSRESERVE_DATE_CMB">
                                        <option value="1">Date Reserved</option>
                                        <option selected="selected" value="2">Delivery Schedule</option>
                                    </select>
                                </div>
                            </div>  
                            <div class="col-md-3">
                                <div class="input-group mb-3 marb5">
                                    <input type="date" class="form-control" id="SEARCH_REC_POSRESERVE_DATE_RECORDED_FROM_DTP" />
                                </div>
                            </div>  
                            <div class="col-md-3">
                                <div class="input-group mb-3">
                                    <input type="date" class="form-control" id="SEARCH_REC_POSRESERVE_DATE_RECORDED_TO_DTP" />
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group mb-3">
                                    <button id="SEARCH_CMD" class="btn btn-blue rounded-0 btn-block ">Search</button>
                                </div>
                            </div>
                        </div>

                        <!-- table -->
                        <div class="table-responsive">
                            <table class="table table-striped table-sm thead-custom" id="POS_RESERVE_DGV">
                          
                                <thead class="bg-blue" style="color: #fff;">
                                    <tr id="POS_RESERVE_DGV_HEADER">
                                        <th id="POS_RESERVE_DGV_HEADER_ROW_COUNT" style="display: none;">#</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_ID" style="display: none;">ID</th>
                                        
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_ACC_GROUP_ID" style="display: none;">Branch</th>
                                        
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_CODE" style="cursor: pointer;width: 78px;display: none;">Ref. No.</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_LASTNAME" style="display: none;">Last Name</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_FIRSTNAME" style="display: none;">First Name</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_NAME" style="cursor: pointer;width: 125px;">Customer</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_ITEMS" style="cursor: pointer;">Items</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_CONTACT" style="cursor: pointer;width: 125px;display: table-cell;">Contact No.</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_ADDRESS" style="cursor: pointer;width: 112px;">Address</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_REFERENCE_CODE" style="display: none;">Receipt Code</th>                  
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_DATE_RECORDED" style="cursor: pointer;width: 110px;">Date Reserved</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_DATE_RECORDED_RAW" style="display: none;"></th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_DATE_EXPECTED">Delivery Sched</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_DATE_EXPECTED_RAW" style="display: none;"></th>           
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_AMOUNT" style="display: none;">Amount</th>

                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_LONG_A" style="display: none;"></th>  
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_DECIMAL_B" style="display: none;"></th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_REMARKS">Remarks</th>         
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_ACC_ACCOUNT_ID" style="display: none;">Recorded By</th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_STATUS" style="display: none;"></th>
                                        <th id="POS_RESERVE_DGV_HEADER_REC_POSRESERVE_STATUS_DESCRIPTION" style="display: none;">Status</th>

                                        <th id="POS_RESERVE_DGV_HEADER_REC_CLIENT_ID" style="display: none;">Status</th>
                                    </tr>
                                </thead>
                            
                                <tbody style="font-size: .8rem; color: black;">
                                    <tr style="cursor: pointer;" id="POS_RESERVE_DGV_ROW">
                                        <td id="POS_RESERVE_DGV_ROW_ROW_COUNT" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_ID" style="display: none;"></td>
                                        
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_ACC_GROUP_ID" style="display: none;"></td>
                                        
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_CODE" style="width: 80px;display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_LASTNAME" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_FIRSTNAME" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_NAME" style="width: 125px;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_ITEMS"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_CONTACT" style="word-break: break-word;width: 118px;padding: 0; border-bottom: 0;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_ADDRESS" style="width: 105px;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_REFERENCE_CODE" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_DATE_RECORDED" style="width: 110px;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_DATE_RECORDED_RAW" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_DATE_EXPECTED"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_DATE_EXPECTED_RAW" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_AMOUNT" style="display: none;"></td>
                                        
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_LONG_A" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_DECIMAL_B" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_REMARKS"></td>
                                        
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_ACC_ACCOUNT_ID" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_STATUS" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_POSRESERVE_STATUS_DESCRIPTION" style="display: none;"></td>
                                        <td id="POS_RESERVE_DGV_ROW_REC_CLIENT_ID" style="display: none;"></td>
                                    </tr>
                                </tbody>
                            
                            </table>
                            <!-- <button style="float: right; width: 250px;" class="btn btn-lg btn-primary" id="LOAD_MORE_BBI"><i class="fas fa-plus" style="margin-right: 20px;"></i>Load More</button> -->
                        </div>

                        <div class="footer-txt"><h6><i>Scroll up to view more data</i></h6></div>
                    </div>
                    
                </section>
            </div>
        </div>
    </main>

    <!--[#IMPORT:pos-end-shift-modal.tpl;]-->

    <!-- jQuery -->
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/res/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap -->
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/res/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Alertify -->
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/res/vendor/alertifyjs/alertify.min.js"></script>

    <!-- Select2 -->
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/res/vendor/select2/js/select2.min.js"></script>

    <!--  Import Libraries  -->
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/res/lib/javascript.js"></script>
    <script type="text/javascript" src="<!--[#SITE_URL;]-->/p/comm/common.js"></script>
