    <div class="col-md-8 col-xs-12 modal-mob" id="POS_CUSTOMERS_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                CUSTOMERS
            </h5>
            <button type="button" class="btn btn-secondary float-right" id="POS_CUSTOMERS_MODAL_MODAL_CLOSE_CMD">Close</button>
        </div>
        <div class="modal-body p-1">
            <div class="row my-2">
                <div class="col-xs-12 col-md-8 float-left">
                    <div class="input-group">
                        <input id="SEARCH_CUSTOMER_FN_TXT" type="text" class="form-control" placeholder="First Name" onkeydown="if(event.which == 13 || event.keyCode == 13 || event.key === 'Enter'){HTTP_LOAD_CUSTOMERS();}">
                        <input id="SEARCH_CUSTOMER_LN_TXT" type="text" class="form-control" placeholder="Last Name" onkeydown="if(event.which == 13 || event.keyCode == 13 || event.key === 'Enter'){HTTP_LOAD_CUSTOMERS();}">
                        <div class="input-group-append">
                            <button id="SEARCH_CUSTOMER_CMD" class="btn btn-info" type="button">SEARCH</button>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4 anc-btn">
                    <button id="NEWCUSTOMER_BBI" class="btn btn-warning btn-block float-right" type="button"> <i class="fas fa-user-plus"></i> ADD NEW CUSTOMER</button> 
                </div>
            </div>
            <div class="fix-table-head">
                <table class="pos-table" id="CUSTOMERS_DGV">
                    <thead class="bg-blue text-white" style="height: 3em;">
                        <tr id="CUSTOMERS_DGV_HEADER">
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_ID" style="display: none;">ID</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_CODE">Code</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_FIRSTNAME">First Name</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_LASTNAME">Last Name</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_ADDRESS">Address</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_REMARKS">TAG</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_MIDDLENAME" style="display: none;">Middle Name</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_CAT_SUFFIX_ID" style="display: none;">Suffix</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_SYS_GENDER_ID" style="display: none;">Gender</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_CONTACT" style="display: none;">Contact Number</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_EMAIL" style="display: none;">Email</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_CAT_COMPANY_ID" style="display: none;">Company</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_SENIOR_CODE" style="display: none;">Senior Citizen ID</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_PWD_CODE" style="display: none;">PWD ID</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_TIN" style="display: none;">TIN</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_DATE_ISSUED" style="display: none;">Date Issued</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_STATUS" style="display: none;">Status</th>
                            <th id="CUSTOMERS_DGV_HEADER_REC_CLIENT_SYSTEM_GENERATED" style="display: none;">System Generated</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="CUSTOMERS_DGV_ROW" style="height: 3em;">
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_ID" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_CODE"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_FIRSTNAME"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_LASTNAME"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_ADDRESS"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_REMARKS"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_MIDDLENAME" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_CAT_SUFFIX_ID" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_SYS_GENDER_ID" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_CONTACT" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_EMAIL" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_CAT_COMPANY_ID" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_SENIOR_CODE" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_PWD_CODE" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_TIN" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_DATE_ISSUED" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_STATUS" style="display: none;"></td>
                            <td id="CUSTOMERS_DGV_ROW_REC_CLIENT_SYSTEM_GENERATED" style="display: none;"></td>
                        </tr>
                    </tbody> 
                </table>
            </div>
        </div>
        <div class="modal-footer justify-content-between">
            <div id="div-acct-balance">
                <h6 class="d-none">Account Balance: <span class="float-end fw-normal">0.00</span></h6>
            </div>
            <div class="d-none">
                <button type="button" class="btn btn-info" id="VIEW_ACCTS_BBI"><i class="fas fa-hand-holding-usd mr-2"></i>ACCOUNTS</button>
            </div>
            <div>
                <button type="button" class="btn btn-success" id="SEL_CUST_BBI">SELECT</button>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-xs-12 modal-mob" id="POS_CUSTOMERS_NEW_MODAL" style="display: none;">
        <div class="modal-header px-1 pb-2">
            <h5 class="mb-0">
                ADD NEW CUSTOMER
            </h5>
        </div>
        <div class="modal-body">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">First Name:</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="CUSTNEW_FNAME" name="CUSTNEW_FNAME">
                    <div id="CUSTNEW_FNAME_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Last Name:</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="CUSTNEW_LNAME" name="CUSTNEW_LNAME">
                    <div id="CUSTNEW_LNAME_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Gender:</label>
                <div class="col-sm-9">
                    <select class="form-control" id="CUSTNEW_GENDER" name="CUSTNEW_GENDER">
                        <option value="2" selected>FEMALE</option>
                        <option value="1">MALE</option>
                    </select>
                    <div id="CUSTNEW_GENDER_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Address:</label>
                <div class="col-sm-9">
                    <textarea class="form-control" id="CUSTNEW_ADDRESS" name="CUSTNEW_ADDRESS"></textarea>
                    <div id="CUSTNEW_ADDRESS_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Email:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="CUSTNEW_EMAIL" name="CUSTNEW_EMAIL">
                    <div id="CUSTNEW_EMAIL_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Contact Number:</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="CUSTNEW_PHONE" name="CUSTNEW_PHONE">
                    <div id="CUSTNEW_PHONE_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Tag:</label>
                <div class="col-sm-9">
                    <select class="form-control" id="CUSTNEW_TAG" name="CUSTNEW_TAG">
                        <option value="" selected>None</option>
                        <option value="BI">BI</option>
                    </select>
                    <div id="CUSTNEW_TAG_ERROR" class="invalid-feedback"></div>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" id="POS_CUSTOMERS_NEW_MODAL_MODAL_CLOSE_CMD">Cancel</button>
            <button type="button" class="btn btn-success rounded-0" id="SAVE_CUSTOMER_BBI">Save</button>
        </div>
    </div>