
                    <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>Sales by Product</h3>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <select class="form-control" id="SEARCH_SALES_BY_PROD_ACC_ACCOUNT_ID_CMB" style="width: 100%;">
                                </select>
                            </div>

                        
                            <div class="col-md-4 mb-3">
                                <input type="date" placeholder="Search Date From" class="form-control" id="SEARCH_DATE_FROM_SALES_BY_PROD_DTP" required>
                            </div>

                            <div class="col-md-4 mb-3">
                                <input type="date" placeholder="Search Date To" class="form-control" id="SEARCH_DATE_TO_SALES_BY_PROD_DTP" required>
                            </div>

                             <div class="col-md-4 mb-3">
                                <select class="form-control" id="SEARCH_SALES_BY_PROD_CAT_PRODTYPE_ID_CMB" style="width: 100%;">
                                </select>
                            </div>

                             <div class="col-md-4 mb-3 marb5">
                                <input type="time" placeholder="" class="form-control" id="SEARCH_TIME_FROM_SALES_BY_PROD_DTP" required="">
                            </div>
                            
                            <div class="col-md-4 mb-3 marb5">
                                <input type="time" placeholder="" class="form-control" id="SEARCH_TIME_TO_SALES_BY_PROD_DTP" required="">
                            </div>

                            <div class="col-md-12 search-btn-sbp" style="text-align: right;">
                                <button class="btn btn-primary" type="button" id="SEARCH_CMD" title="Search"><i class="fas fa-search"></i></button>
                                <button class="btn btn-danger" type="button" id="PRINT_BBI" title="Print Report"><i class="fas fa-print"></i></button>
                                <button class="btn btn-success" type="button" id="EXPORT_BBI" title="Export to Excel"><i class="fas fa-file-excel"></i></button>
                            </div>
                        </div>

                        <!-- table -->
                        <div class="fix-table-head table-border">
                            <table class="pos-table" id="TRANSFLOW_SMRY_DGV">
                                <thead class="bg-blue text-white">
                                    <tr id="TRANSFLOW_SMRY_DGV_HEADER">
                                        <th id="TRANSFLOW_SMRY_DGV_HEADER_REC_EODPROD_CAT_PRODUCT_ID" style="display: none;">PROD ID</th>
                                        <th id="TRANSFLOW_SMRY_DGV_HEADER_REC_EODPROD_CAT_PRODUCT_DESCRIPTION" class="prod-tb">Product</th>
                                        <th id="TRANSFLOW_SMRY_DGV_HEADER_REC_EODPROD_SF_SOLD_ITEM" style="cursor: pointer;text-align: right;">Total Qty Sold</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="TRANSFLOW_SMRY_DGV_ROW">
                                        <td id="TRANSFLOW_SMRY_DGV_ROW_REC_EODPROD_CAT_PRODUCT_ID" style="display: none;"></td>
                                        <td id="TRANSFLOW_SMRY_DGV_ROW_REC_EODPROD_CAT_PRODUCT_DESCRIPTION" class="prod-tb"></td>
                                        <td id="TRANSFLOW_SMRY_DGV_ROW_REC_EODPROD_SF_SOLD_ITEM" style="cursor: pointer;text-align: right;"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </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>
