FloatBackOfffice/application/views/member/extra/member_accountread.php

<div class="panel panel-flat" style="background-color: aliceblue;">
    <div class="panel-body">
        <div class="row">
            <div id="lineoption">
            </div>
        </div>

        <div class="alert alert-danger mt-20" id="print-members-account-receipts-error-msg" style="display:none">
            <a href="#" class="close">&times;</a>
            <p id="members-account-receipts-error-msg"></p>
        </div>

        <div class="table-responsive">
            <div class="col-lg-12">
                <div>
                    <form name="members_account_receipts_form" id="members-account-receipts-form">
                        <div class="form-group">
                            <div class="date">
                                <label for="start_date" class="font-weight-bold col-lg-1 col-form-label">Date</label>
                                <div class="search-by-range">
                                    <div class="col-lg-6">
                                        <input type="search" name="start_date" id="start_date" value="<?= $start_date ?>" class="form-control" />
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="search" name="end_date" id="end_date" value="<?= $end_date ?>" class="form-control" />
                                    </div>
                                </div>
                            </div>
                            <div class="currency">
                                <label for="currency" class="font-weight-bold col-lg-1 col-form-label">Currency</label>
                                <div class="col-lg-12">
                                    <input class="form-control" type="search" id="currency" name="currency">
                                </div>
                            </div>
                            <div class="category">
                                <label for="category" class="font-weight-bold col-lg-1 col-form-label">Category</label>
                                <div class="col-lg-12">
                                    <input class="form-control" type="search" id="category" name="category">
                                </div>
                            </div>
                            <div class="provider_category">
                                <label for="provider_category" class="font-weight-bold col-lg-12 col-form-label">Provider Category</label>
                                <div class="col-lg-12">
                                    <input class="form-control" type="search" id="provider_category" name="provider_category">
                                </div>
                            </div>
                            <div class="merchant_name">
                                <label for="merchant_name" class="font-weight-bold col-lg-12 col-form-label">Merchant Name</label>
                                <div class="col-lg-12">
                                    <input class="form-control" type="search" id="merchant_name" name="merchant_name">
                                </div>
                            </div>
                            <div>
                                <input type="hidden" value="<?= $member_id ?>" id="member_id" name="member_id">
                            </div>
                            <input type="button" name="search_members_account_receipts" id="search_members_account_receipts" value="Search" class="btn btn-info" />
                        </div>
                    </form>
                </div>
                <div class="panel-heading mt-15 mb-10">
                    <div class="heading-elements">
                        <div id="pagination-members-account-receipts"></div>
                    </div>
                </div>
                <table id="members-account-receipts-list" class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="padding:0px; background-color:aliceblue;">
                    <thead class="bg-indigo">
                        <th>ID</th>
                        <th>Import ID</th>
                        <th>Member ID</th>
                        <th>Amount</th>
                        <th>Currency</th>
                        <th>Description</th>
                        <th>Time</th>
                        <th>Category</th>
                        <th>Provider Categpry</th>
                        <th>Merchant Name</th>
                        <th>Added</th>
                        <th>Updated</th>
                        <th>Status</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

    </div>
</div>



<!-- <script type="text/javascript">
  function viewTrackedAdvice(tracked_id) {

    $('#lineoption').html('Processing...');
    // $('#acc' + member_id).prop('disabled', true);
    $.ajax({
      url: "/member/viewTrackedAdvice?proc=PROCESS&tracked_id=" + tracked_id
    }).done(function(data) {
      $('#lineoption').html(data);
      //    $('#acc' + member_id).prop('disabled', false);
    });
    return false;
  }

  //initMap();
  // 
</script> -->
<script src="/assets/js/app.js" type="text/javascript"></script>
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/pages/members_account_receipts/list.js" type="text/javascript"></script>

<style>
    #members-account-receipts-form .form-group {
        display: flex;
        align-items: flex-end;
    }

    .date {
        display: flex;
        flex-direction: column;
    }

    .search-by-range {
        display: flex;
        align-items: flex-end;
    }

    .search-by-range div {
        padding: 1px;
    }
</style>