<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                   Transactions
                </h2>
            </div>
            <div class="body">
                <form action="javascript:void(0)" id="__aclSearchTransaction">
                    <div class="row m-b-20">
                        <div class="col-md-2">
                            <label for="email">Email</label>
                            <input class="form-control" id="email" name="email" type="text" placeholder="Skip">
                        </div>
                        <div class="col-md-2">
                            <label for="trxid">TrxID</label>
                            <input class="form-control" id="trxid" name="trxid" type="text" placeholder="Skip">
                        </div>
                        <div class="col-md-3">
                            <label for="datestart">Date</label>
                            <div class="input-daterange input-group">
                                <input type="text" class="form-control" id="datestart" name="datestart" placeholder="Skip" readonly>
                                <span class="input-group-addon bg-dark-grey">to</span>
                                <input type="text" class="form-control" name="dateend" placeholder="Skip" readonly>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label for="reference">Reference</label>
                            <input class="form-control" id="reference" name="reference" type="text" placeholder="Skip"<?php echo isset($find) && !empty($find) ? ' value="'.$find.'"' : '' ?>>
                        </div>
                        <div class="col-md-1">
                            <label for="status">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="">Skip</option>
                                <option value="Y">Paid</option>
                                <option value="N">Unpaid</option>
                                <option value="C">Cancelled</option>
                                <option value="P">Pending</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="other">Any Other</label>
                            <input class="form-control" id="other" name="other" type="text" placeholder="Skip">
                        </div>
                        <div class="col-md-1">
                            <label class="text-blank noselect">ACL</label>
                            <button type="submit" class="btn bg-blue-grey btn-block"><i class="acl-icon-search-7"></i></button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive acl-custom">
                    <table id="transactionlist" class="table table-bordered table-striped table-hover dataTable">
                        <thead>
                        <tr>
                            <th>Date/Time</th>
                            <th>Reference</th>
                            <th>Client Name </th>
                            <th>Email Address</th>
                            <th>Requested</th>
                            <th>Payable</th>
                            <th>Fee</th>
                            <th>Gateway</th>
                            <th class="no-sort">Action</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Date/Time</th>
                            <th>Reference</th>
                            <th>Client Name </th>
                            <th>Email Address</th>
                            <th>Requested</th>
                            <th>Payable</th>
                            <th>Fee</th>
                            <th>Gateway</th>
                            <th class="no-sort">Action</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>