FloatBackOfffice/application/views/subscription/view_subscriptionreport.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/subscriptionreport/" method="GET" autocomplete="off">
                <div class="search-block-item">
                    <div class="form-group" style="width: 80px">
                        <label for="email">ID</label>
                        <input type="search" class="form-control" id="id"
                               name="id" value='<?= isset($id) ? $id : '' ?>'
                               style="max-width: 100px"
                               onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="search" class="form-control" id="email" name="email" value='<?= isset($email) ? $email : '' ?>'>
                    </div>
                    <div class="form-group">
                        <label for="title">Description</label>
                        <input type="search" class="form-control" id="title" name="title" value='<?= isset($title) ? $title : '' ?>'>
                    </div>
                    <div class="form-group" style="width: 102px">
                        <label for="card_receipts">Card Reciept</label>
                        <input type="search" class="form-control" id="card_receipts" name="card_receipts" value="<?= $card_receipts??'' ?>">
                    </div>
                    <div class="form-group" style="width: 92px">
                        <label for="reciept_count">Num Reciepts</label>
                        <input type="number" class="form-control" id="reciept_count" name="reciept_count" value="<?= $reciept_count??'' ?>">
                    </div>
                    <div class="form-group">
                        <label for="from_date">Date Subscribed</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>
                    <div class="form-group">
                        <label>Ready</label>
                        <?= $card_ready ?>
                    </div>
                    <div class="form-group">
                        <label>Dt. Completed</label>
                        <?= $card_completed ?>
                    </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();
        }
    })
</script>
<style>
    .search-block{
        padding: 12px 5px 4px 5px;
    }
    .search-block-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .search-block-item .form-control{
        padding: 4px 6px !important;
    }
    .search-block-item .search-by-date{
        margin-top: -3px;
    }

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

    .search-by-date input {
        width: 95px;
    }
    
    .default_date {
        display: inline-block;
    }

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