FloatBackOfffice/application/views/subscription/view_carpoolreport.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="/subscription/carpoolreport/" method="GET" autocomplete="off">
                <div class="search-block-item">
                    <div class="form-group" style="width: 120px">
                        <label for="email">Email</label>
                        <input type="search" class="form-control" id="email" name="email" value='<?= isset($email) ? $email : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 120px">
                        <label for="title">Title</label>
                        <input type="search" class="form-control" id="title" name="title" value='<?= isset($title) ? $title : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 50px">
                        <label for="pool">Pool</label>
                        <input type="search" class="form-control" id="pool" name="pool" value='<?= isset($pool) ? $pool : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 50px">
                        <label for="card_id">Card ID</label>
                        <input type="search" class="form-control" id="card_id" name="card_id" value='<?= isset($card_id) ? $card_id : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 50px">
                        <label for="search_text">Status</label>
                        <input type="search" class="form-control" id="status" name="status" value='<?= isset($status) ? $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">
                <?= $carpool_table ?>
            </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>