FloatBackOfffice/application/views/subscription/view_surveyreport.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-9">
        <!-- Support tickets -->
        <div class="panel panel-flat">
        </div>
        <!-- Support tickets -->
        <div class="panel panel-white">
            <form class="search-block" action="/subscription/surveyreport/" method="GET" autocomplete="off">
                <div class="search-block-item">
                    <div class="form-group" style="width: 70px">
                        <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">
                        <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: 100px">
                        <label for="answer">Answer</label>
                        <input type="search" class="form-control" id="answer" name="answer" value='<?= isset($answer) ? $answer : '' ?>'>
                    </div>

                    <div class="form-group" style="width: 50px">
                        <label for="action">Action</label>
                        <input type="search" class="form-control" id="action" name="action" value='<?= isset($action) ? $action : '' ?>'>
                    </div>
                    <div class="form-group">
                        <label for="search_text">Status</label>
                        <?= $card_status ?>
                    </div>
                    <div class="form-group">
                        <label for="from_date">Date</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">
                <?= $subscription_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="sub_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 type="text/javascript">
    function processSubscription(assign_id) {
        //alert( subscripion_id );
        $('#sub_detail').html('Processing...');
        $('#subb' + assign_id).prop('disabled', true);
        $.ajax({
            url: "/subscription/procSubscription?proc=PROCESS&assign_id=" + assign_id
        }).done(function(data) {
            $('#sub_detail').html(data);
            $('#subb' + assign_id).prop('disabled', false);
        });
        return false;
    }

    $('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();
        }
    })
    //initMap();
    // 
</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>