FloatBackOfffice/application/views/points/view_pointsreport.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-9">
        <!-- Support tickets -->
        <div class="panel panel-flat">
        </div>
        <div class="panel panel-white">
            <form class="search-block" action="/points/index/" method="GET" autocomplete="off">
                <div class="search-block-item">
                    <div class="form-group" style="width: 65px;">
                        <label for="member_id">Member ID</label>
                        <input type="search" class="form-control" id="member_id" name="member_id" value='<?= isset($member_id) ? $member_id : '' ?>'>
                    </div>
                    <div class="form-group" style="width:120px">
                        <label for="title">Description</label>
                        <input type="search" class="form-control" id="description" name="description" value='<?= isset($description) ? $description : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 50px;">
                        <label for="id">ID</label>
                        <input type="search" class="form-control" id="id" name="id" value='<?= isset($id) ? $id : '' ?>'>
                    </div>
                    <div class="form-group">
                        <label for="from_points">Points</label>
                        <div class="search-by-date">
                            <input style="width: 60px;" type="search" class="form-control" id="from_points" name="from_points" value='<?= isset($from_points) ? $from_points : '' ?>'>
                            &nbsp;&nbsp;
                            <input style="width: 60px;" type="search" class="form-control" id="to_points" name="to_points" value='<?= isset($to_points) ? $to_points : '' ?>'>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="search_text">Status</label>
                        <?= $card_status ?>
                    </div>
                    <div class="form-group">
                        <label for="from_date">Added</label>
                        <div class="default_date">
                            <label for="default_date">One Last Month</label>
                            <input type="checkbox" id="default_date" name="default_date" <?= $default_date === 'on' ? 'checked' : '' ?>>
                        </div>
                        <div class="search-by-date">
                            <input type="search" class="form-control" id="from_date" name="from_date" value='<?= isset($from_date) ? $from_date : '' ?>'>
                            &nbsp;&nbsp;
                            <input type="search" class="form-control" id="to_date" name="to_date" value='<?= isset($to_date) ? $to_date : '' ?>'>
                        </div>
                    </div>
                    <input type="hidden" name="action_hidden" value="search" />
                    <div class="form-group">
                        <button class="btn btn-primary btn-search" type="submit">Search</button>
                    </div>
                </div>
            </form>
        </div>
        <?= $link ?>
        <div class="panel panel-flat">
            <div class="table-responsive">
                <?= $points_report ?>
            </div>
        </div>
        <div class="panel panel-flat">
            <div class="table-responsive"> </div>
        </div>
        <!-- /support tickets -->
    </div>

    <div class="col-lg-3">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ccffff; height: 800px;">
            <div id="transp_detail">
                <div class="panel-heading">
                    <h6 class="panel-title">Process</h6>
                </div>
            </div>
        </div>
        <!-- /Recent Members -->
    </div>
</div>
<!-- /dashboard content -->
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/app.js"></script>
<script>
    $('document').ready(function() {
        function enableDateInput() {
            $('#from_date, #to_date').val('');
            $('#from_date, #to_date').prop('readonly', false);
            $('#from_date, #to_date').css('pointer-events', 'auto');
        }

        function disableDateInput() {
            setDefaultDateWithMonths('.search-block', 1);
            $('#from_date, #to_date').prop('readonly', true);
            $('#from_date, #to_date').css('pointer-events', 'none');
        }

        // add library datepicker
        addDatePicker('#from_date, #to_date');

        // detect change of checkbox
        $('#default_date').on('change', function() {
            if ($(this).prop('checked')) {
                disableDateInput();
            } else {
                enableDateInput();
            }
        })

        // When init page default date checked
        const checked = <?= $default_date === 'on' ? 'true' : 'false' ?>;
        if (checked) {
            disableDateInput();
        }
    })
</script>
<style>
    .search-block-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .search-by-date {
        display: flex;
        flex-direction: row;
    }

    .search-by-date input {
        width: 95px;
    }

    .default_date {
        display: inline-block;
    }

    .btn-search {
        top: 27px;
    }
</style>