FloatBackOfffice/application/views/admin/view_crashlog.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-7">    
        <!-- Basic modal -->
        <div id="modal_theme_primary" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content" id="modal-content">
                    <div class="map-container map-symbol-custom">
                    </div>
                    <div id="directionsDiv" style="margin-top:15px"></div>
                </div>
            </div>
        </div>
        <!-- /basic modal -->

        <!-- Support tickets -->
        <div class="panel panel-flat">
            <div class="panel-body">
                <div class="row">
                    <div class="col-12">  
                        <form method="GET" class="crash-log-search-form" action="/tracking/crashlog">
                            <div class="row">
                                <div class="col-xs-4 col-md-2">
                                    <div class="form-group">
                                        <label for="">Member id</label>
                                        <input type="number" 
                                            class="form-control" 
                                            name="member_id_filter" 
                                            value="<?= $filterData['member_id_filter'] ?? '' ?>">
                                    </div>
                                </div>

                                <div class="col-xs-4 col-md-3">
                                    <div class="form-group">
                                        <label for="">Username</label>
                                        <input type="text" 
                                            class="form-control" 
                                            name="username_filter" 
                                            value="<?= $filterData['username_filter'] ?? '' ?>">
                                    </div>
                                </div>

                                <div class="col-xs-4 col-md-3">
                                    <div class="form-group">
                                        <label for="">IP</label>
                                        <input type="text" 
                                            class="form-control" 
                                            name="ip_address_filter" 
                                            value="<?= $filterData['ip_address_filter'] ?? '' ?>">
                                    </div>
                                </div>

                                <div class="col-xs-4 col-md-3">
                                    <div class="form-group">
                                        <label for="">Number</label>
                                        <input type="text" 
                                            class="form-control" 
                                            name="number_filter" 
                                            value="<?= $filterData['number_filter'] ?? '' ?>">
                                    </div>
                                </div>


                                <div class="col-xs-4 col-md-3">
                                    <div class="form-group">
                                        <label for="">Added</label>
                                        <input type="text"
                                            class="form-control"
                                            name="added_filter"
                                            readonly
                                            value="<?= $filterData['added_filter'] ?? (date('Y-m-d', strtotime('-7 days')).' - '.date('Y-m-d')) ?>" >
                                    </div>
                                </div>
                                
                                <div class="col-xs-3 col-sm-2">
                                    <div class="form-group">
                                        <label for=""></label>
                                        <div style="margin-top: 7px">
                                            <button type="submit" class=" btn btn-primary btn-sm">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="m-y-sm"><?= $links ?: '' ?></div> 
                    <div class="table-responsive">
                        <?= $crashlog_table?>   
                    </div>
                    <div class="m-y-sm"><?= $links ?: '' ?></div> 
                </div>
            </div>
        </div>
        <!-- /support tickets -->
    </div>

    <div class="col-lg-5">
        <!-- 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">Selected log entry details</h6>
                    <div class="heading-elements">
                        <span class="heading-text">number: <span id="number" class="text-bold text-danger-600 position-right">N/A</span></span>             
                    </div>
                </div>
                <div class="table-responsive">
                    <div id="crashlogentry" style="border:1px;border-style: dotted;"></div>
                </div>          

            </div>

        </div>
        <!-- /Recent Members -->
    </div>
</div>
<!-- /dashboard content -->

<script type="text/javascript">
    $( document ).ready( function () {
            /*********** date range picker ***********/
            let datepickerOptions = {
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD',
                    cancelLabel: 'Clear'
                }
            };

            let fromToElement = $('input[name="added_filter"]');
            const fromToVal = fromToElement.val();
            if (fromToVal == '') {
                datepickerOptions.startDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
                datepickerOptions.endDate = moment().format('YYYY-MM-DD');
            }
            fromToElement.daterangepicker(datepickerOptions);

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

            fromToElement.on('cancel.daterangepicker', function(ev, picker) {
                fromToElement.val('');
            });
            /***************************************/

            jQuery.validator.addMethod("ip", function(value, element) {
                return this.optional(element) || /^(((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(((\/([4-9]|[12][0-9]|3[0-2]))?)|\s?-\s?((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))))(,\s?|$))+/.test(value);
            }, "Please specify the correct IP Address");

            $(".crash-log-search-form").validate({
                rules: {
                    ip_address_filter: {
                        ip: true
                    },
                },
                errorElement: "em",
                errorPlacement: function ( error, element ) {
                    error.addClass( "text-danger" );
                    error.insertAfter( element );
                }
            });
    });


    function viewCrash(id,number) {
        $.ajax({
            url: "/tracking/crashlogentry?id=" + id
        }).done(function (data) {
            $('#crashlogentry').html(data);
            $('#number').html(number);
        });
    }
</script>