
                    <a class="navbar-brand text-white d-none">
                        <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 py-3 px-1">

                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label> Search: </label>
                            <input type="number" class="form-control" name="SEARCH_TXT" id="SEARCH_TXT" onkeydown="if(event.which == 13 || event.keyCode == 13 || event.key === 'Enter'){HTTP_SEARCH();}">
                        </div>
                        <div class="col-12 px-0 d-flex justify-content-between">
                            <div class="form-group col-6 pl-0 pr-1">
                                <label> Date From:</label>
                                <input type="date" class="form-control" name="START_DATE_TXT"  id="START_DATE_TXT">
                            </div>
                            <div class="form-group col-6 pl-0 pr-1">
                                <label> Date To: </label>
                                <input type="date" class="form-control" name="END_DATE_TXT"  id="END_DATE_TXT">
                            </div>
                        </div>
                        <div class="col-12 px-0">
                            <button id="SEARCH_CMD" class="btn btn__primary--cus btn-block"><i class="fas fa-search"></i> Search</button>
                        </div>
                    </div>
                    
                    <div class="table-responsive table-fixed" style="padding-bottom:10vh;">
                        <table class="table table-fit table-header-fixed table-header-primary-color" id="PO_ORDER_DGV">
                            <thead class="bg_primary--cus table-info text-white">
                                <tr id="PO_ORDER_DGV_HEADER">
                                    <th id="PO_ORDER_DGV_HEADER_ROW_COUNT" style="display: none;">#</th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_ID" style="display: none;">ID</th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_ACC_GROUP_ID" style="display: none;"></th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_ACC_GROUP_ID_DESCRIPTION" style="display: none;"></th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_DATE_REQUEST" style="width: 200px">Requested Date</th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_DATE_EXPECT" style="display: none;">Requested Date</th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_CODE" style="width: 200px">Reference No.</th>
                                    <th id="PO_ORDER_DGV_HEADER_REC_PORDER_REMARKS" style="width: 300px">Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="PO_ORDER_DGV_ROW">
                                    <td id="PO_ORDER_DGV_ROW_ROW_COUNT" style="display: none;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_ID" style="display: none;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_ACC_GROUP_ID" style="display: none;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_ACC_GROUP_ID_DESCRIPTION" style="display: none;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_DATE_REQUEST" style="width: 200px;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_DATE_EXPECT" style="display: none;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_CODE" style="width: 200px;"></td>
                                    <td id="PO_ORDER_DGV_ROW_REC_PORDER_REMARKS" style="width: 300px"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <button class="btn round btn-floating btn__secondary--cus btn-lg" style="bottom:10px;" id="ADD_BBI"><i class="fas fa-plus"></i> New Order</button>

    <div class="col-xs-8 col-12 modal-mob modal-po-mob" id="PO_ORDER_MODAL" style="display: none;left: 0 !important;">
        <div class="modal-header py-2">
            <h5 class="modal-title font-weight-bold" style="color:black;"><span id="MODAL_TITLE_MM"></span> Purchase Order</h5>
            <button type="button" class="btn btn-secondary float-right" id="MODAL_CLOSE_CMD">Close</button>
            <input type="hidden">
        </div>
        <div class="modal-body modal__body--limiter"> 
            <div class="form-group" id="REC_PORDER_CODE_DLG_BLOCK">
                <label class="">Reference No.</label>
                <div class="">
                    <input type="text" class="form-control" id="REC_PORDER_CODE_TXT">
                </div>
            </div> 
            <div class="form-group" id="REC_PORDER_DATE_REQUEST_DLG_BLOCK">
                <label class="">P.O. Date</label>
                <div class="">
                    <input type="text" class="form-control" id="REC_PORDER_DATE_REQUEST_TXT">
                </div>
            </div>
            <div class="form-group" id="REC_PORDER_DATE_EXPECT_DLG_BLOCK">
                <label class="">Delivery Date</label>
                <div class="">
                    <input type="date" class="form-control" id="REC_PORDER_DATE_EXPECT_DTP">
                </div>
            </div>  
            <div class="form-group" id="REC_PORDER_REMARKS_DLG_BLOCK">
                <label class="">Remarks</label>
                <div class="">
                    <input type="text" class="form-control" id="REC_PORDER_REMARKS_TXT">
                </div>
            </div>
            <div id="PO_ORDER_LIST_DIV" class="form-row my-4">
                <div class="table-responsive table-fixed">
                    <table class="table table-fit table-header-fixed table-header-primary-color" id="PO_ORDER_LIST_DGV">
                        <thead class="bg_primary--cus table-info text-white">
                            <tr id="PO_ORDER_LIST_DGV_HEADER">
                                <th id="PO_ORDER_LIST_DGV_HEADER_ROW_COUNT" style="display: none;">#</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_ID" style="display: none;">ID</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_CAT_PRODUCT_ID" style="display: none;">Product Id</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_CAT_PRODUCT_ID_DESCRIPTION">Product</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_COST" style="display: none;">Unit Cost</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_QUANTITY_EXPECT" style="text-align: right;">Ordered Qty</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_QUANTITY_APPROVE" style="display: none;">Approved Qty</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_QUANTITY_RECEIVE" style="display: none;">Received Qty</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_DESCRIPANCY" style="display: none;">Discrepancy</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_QUANTITY_CANCEL" style="display: none;">Cancelled Qty</th>
                                <th id="PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_STATUS" style="display: none;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="PO_ORDER_LIST_DGV_ROW">
                                <td id="PO_ORDER_LIST_DGV_ROW_ROW_COUNT" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_ID" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_CAT_PRODUCT_ID" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_CAT_PRODUCT_ID_DESCRIPTION"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_COST" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_QUANTITY_EXPECT" style="text-align: right;">
                                    <input type="number" class="form-control text-right" value="0.00" onfocus="this.select();">
                                </td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_QUANTITY_APPROVE" style="display: none;"></td>
                                <td class="received-qty" id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_QUANTITY_RECEIVE" style="display: none;"></td>
                                <td class="discrepancy" id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_DESCRIPANCY" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_QUANTITY_CANCEL" style="display: none;"></td>
                                <td id="PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_STATUS" style="display: none;"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="PRODUCT_BRANCH_LIST_DIV" class="form-row my-4">
                <div class="table-responsive table-fixed">
                    <table class="table table-fit table-header-fixed table-header-primary-color" id="PRODUCT_BRANCH_DGV">
                        <thead class="bg_primary--cus table-info text-white">
                            <tr id="PRODUCT_BRANCH_DGV_HEADER">
                                <th id="PRODUCT_BRANCH_DGV_HEADER_ROW_COUNT" style="display: none">#</th>     
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_ID" style="display: none;">ID</th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODUCT_AMOUNT_PRICE" class="d-none">ID</th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_ACC_GROUP_ID" style="display: none;">Branch</th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_CAT_PRODUCT_ID" style="display: none;"></th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_CAT_PRODUCT_ID_DESCRIPTION">Product</th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_AMOUNT_PRICE" style="display: none">Pricing</th>
                                <th id="PRODUCT_BRANCH_DGV_HEADER_CAT_PRODBRANCH_QUANTITY" style="text-align: right;">Quantity</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="PRODUCT_BRANCH_DGV_ROW">
                                <td id="PRODUCT_BRANCH_DGV_ROW_ROW_COUNT" style="display: none;"></td>
                                <th id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_ID" style="display: none;">ID</th>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODUCT_AMOUNT_PRICE" class="d-none">ID</td>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_ACC_GROUP_ID" style="display: none;"></td>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_CAT_PRODUCT_ID" style="display: none;"></td>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_CAT_PRODUCT_ID_DESCRIPTION"></td>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_AMOUNT_PRICE" style="display: none;"></td>
                                <td id="PRODUCT_BRANCH_DGV_ROW_CAT_PRODBRANCH_QUANTITY" style="text-align: right;">
                                    <input type="number" class="form-control text-right" value="0.00" onfocus="this.select();">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-end">
            <button type="button" class="btn btn__secondary--cus" id="SAVE_BBI">Save</button>
        </div>
    </div>


    <!--[#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>
