FloatBackOfffice/application/views/booking/view_booking_summary.php

<style>
    .d-flex {
        display: flex;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .col-1 {
        flex-basis: 8.333333%;
    }
    .col-2 {
        flex-basis: 16.666667%;
    }
    .col-3 {
        flex-basis: 25%;
    }
    .d-none {
        display: none;
    }
    .p-15 {
        padding: 15px;
    }
    .pr-15 {
        padding-right: 15px !important;
    }
    .mb-15 {
        margin-bottom: 15px;
    }
    .overflow-auto {
        overflow: auto;
    }
</style>

<div class="panel panel-white overflow-auto p-15">
    <form id="filter-form" class="d-flex flex-wrap">
        <div class="col-2 mb-15 pr-15"><input type="text" name="id" class="form-control" placeholder="ID"></div>
        <div class="col-2 mb-15 pr-15"><input type="text" name="quote_id" class="form-control" placeholder="Quote ID"></div>
        <div class="col-2 mb-15 pr-15"><input type="text" name="provider_booking_ref" class="form-control" placeholder="Provider Booking Ref"></div>
        <!-- <div class="col-2 mb-15 pr-15"><input type="text" name="details" class="form-control" placeholder="Detail"></div> -->
        <div class="col-2 mb-15 pr-15"><input type="text" name="message" class="form-control" placeholder="Message"></div>
        <div class="col-2 mb-15 pr-15">
            <select name="status" id="" class="form-control">
                <option value="recent">Recent Bookings</option>
                <option value="pending">Pending Bookings</option>
                <option value="cancelled">Cancelled Bookings</option>
                <option value="active">Active Bookings</option>
            </select>
        </div>
        <div class="col-1 mb-15 pr-15"><input type="text" name="member_id" class="form-control" placeholder="Member ID"></div>
        <div class="col-1 mb-15 pr-15"><input type="text" name="cost" class="form-control" placeholder="Cost"></div>
        <div class="input-group col-3 mb-15 pr-15">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            <input type="text" name="created" value="" class="form-control" placeholder="Created"/>
        </div>
        <div class="input-group col-3 mb-15 pr-15">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            <input type="text" name="updated" value="" class="form-control" placeholder="Updated"/>
        </div>
        <div class="input-group col-3 mb-15 pr-15">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            <input type="text" name="completed" value="" class="form-control" placeholder="Completed"/>
        </div>
        <div class="col pr-15">
            <button class="btn btn-primary">Search</button>
        </div>
    </form>
    <h5 id="booking-table-loading" class="col-12 d-none">Loading...</h5>
    <table id="booking-table" class="table-bordered table-condensed table-hover table-striped table-condensed d-none mb-15" style="background-color:#f0f8ff;" width="100%">
        <thead class="bg-indigo">
            <tr>
                <th>ID</th>
                <th>Quote ID</th>
                <th>Provider Booking Ref</th>
                <th>Detail</th>
                <th>Created</th>
                <th>Updated</th>
                <th>Completed</th>
                <th>Status</th>
                <th>Message</th>
                <th>Member ID</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
                <td>No result</td>
            </tr>
        </tbody>
    </table>
    <div id="booking-pagination" class="col-12 text-center"></div>
</div>

<script src="/assets/js/plugins/pagination/bootpag.min.js"></script>
<script src="/assets/js/pages/booking/index.js"></script>

<script>
    loadPage();

    $(function() {
        var daterangeInputs = 'input[name="created"], input[name="updated"], input[name="completed"]';
        var start = moment().subtract(29, 'days');
        var end = moment();

        $(daterangeInputs).daterangepicker({
            opens: 'right',
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'YYYY/MM/DD'
            },
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'Last 60 Days': [moment().subtract(59, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'Last 2 Months': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')]
            },
            alwaysShowCalendars: true,
        });

        $(daterangeInputs).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
        });

        $(daterangeInputs).on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>