FloatBackOfffice/application/views/member/view_findmember.php

<!-- Dashboard content -->
<div class="row">
    <div class="col-lg-9">
        <div class="panel panel-flat">
            <div class="row">
                <form id="search-find-member" method="GET" action="/member/findmember">

                    <div class="col-lg-2">
                        <?= $card_find_select ?>
                    </div>
                    <div class="col-lg-3">
                        <?= $card_decision_group ?>
                    </div>

                    <div class="col-lg-4">
                        <input type="search" class="form-control" id="search_text" value="<?= isset($search_text) ? $search_text : '' ?>">
                    </div>
                    <div class="col-lg-1">
                        <button type="button" class="btn btn-info btn-sm" id="extra-btn">Extra</button>
                    </div>
                    <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary btn-sm btn-block" id="refresh-btn">Refresh</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel panel-flat">
            <div class="table-responsive">
                <?= $member_table ?>
            </div>
        </div>
        <div class="panel panel-flat">
            <div class="table-responsive"> <?= $link ?> </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">View a member</h6>

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

<!-- Filter Modal Start-->
<div class="modal fade" id="filter-model" role="dialog" aria-labelledby="Filter data dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h1>
                    Filter Member
                </h1>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <div class="container-fluid">

                    <form class="form-inline" role="form" id="filter_form" method="GET" action="/member/findmember">

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <?= $card_status ?>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">Test</label>
                                    <?= $card_test ?>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">Country</label>
                                    <?= $card_country ?>
                                </div>
                            </div>
                        </div>
                        
                        <div class=row>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">Alert Notification</label>
                                    <?= $card_alert_notification ?>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">Alert Email</label>
                                    <?= $card_alert_email ?>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_added">Added</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_added" name="from_added" value='<?= isset($from_added) ? $from_added : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_added" name="to_added" value='<?= isset($to_added) ? $to_added : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_last_login">Last Login</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_last_login" name="from_last_login" value='<?= isset($from_last_login) ? $from_last_login : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_last_login" name="to_last_login" value='<?= isset($to_last_login) ? $to_last_login : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_last_acct">Last Acc</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_last_acct" name="from_last_acct" value='<?= isset($from_last_acct) ? $from_last_acct : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_last_acct" name="to_last_acct" value='<?= isset($to_last_acct) ? $to_last_acct : '' ?>'>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_last_email">Last Email</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_last_email" name="from_last_email" value='<?= isset($from_last_email) ? $from_last_email : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_last_email" name="to_last_email" value='<?= isset($to_last_email) ? $to_last_email : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_last_audit">Last Audit</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_last_audit" name="from_last_audit" value='<?= isset($from_last_audit) ? $from_last_audit : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_last_audit" name="to_last_audit" value='<?= isset($to_last_audit) ? $to_last_audit : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_points_updated">Points Updated</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_points_updated" name="from_points_updated" value='<?= isset($from_points_updated) ? $from_points_updated : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_points_updated" name="to_points_updated" value='<?= isset($to_points_updated) ? $to_points_updated : '' ?>'>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_updated">Updated</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_updated" name="from_updated" value='<?= isset($from_updated) ? $from_updated : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_updated" name="to_updated" value='<?= isset($to_updated) ? $to_updated : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_decision_updated">Decision Updated</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_decision_updated" name="from_decision_updated" value='<?= isset($from_decision_updated) ? $from_decision_updated : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_decision_updated" name="to_decision_updated" value='<?= isset($to_decision_updated) ? $to_decision_updated : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_gps_enabled">GPS Enabled</label>
                                    <div class="search-by-date">
                                        <input type="search" class="form-control" id="from_gps_enabled" name="from_gps_enabled" value='<?= isset($from_gps_enabled) ? $from_gps_enabled : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_gps_enabled" name="to_gps_enabled" value='<?= isset($to_gps_enabled) ? $to_gps_enabled : '' ?>'>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_min_budget">Min Budget</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_min_budget" name="from_min_budget" value='<?= isset($from_min_budget) ? $from_min_budget : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_min_budget" name="to_min_budget" value='<?= isset($to_min_budget) ? $to_min_budget : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_max_budget">Max Budget</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_max_budget" name="from_max_budget" value='<?= isset($from_max_budget) ? $from_max_budget : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_max_budget" name="to_max_budget" value='<?= isset($to_max_budget) ? $to_max_budget : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_points">Points</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_points" name="from_points" value='<?= isset($from_points) ? $from_points : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_points" name="to_points" value='<?= isset($to_points) ? $to_points : '' ?>'>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_count_acct">Count Acct</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_count_acct" name="from_count_acct" value='<?= isset($from_count_acct) ? $from_count_acct : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_count_acct" name="to_count_acct" value='<?= isset($to_count_acct) ? $to_count_acct : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_count_email">Count Email</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_count_email" name="from_count_email" value='<?= isset($from_count_email) ? $from_count_email : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_count_email" name="to_count_email" value='<?= isset($to_count_email) ? $to_count_email : '' ?>'>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="from_login_failures">Login Failure</label>
                                    <div class="search-by-numeric">
                                        <input type="search" class="form-control" id="from_login_failures" name="from_login_failures" value='<?= isset($from_login_failures) ? $from_login_failures : '' ?>'>
                                        &nbsp;&nbsp;
                                        <input type="search" class="form-control" id="to_login_failures" name="to_login_failures" value='<?= isset($to_login_failures) ? $to_login_failures : '' ?>'>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="selected-city">City</label>
                                    <div class="city-filter">
                                        <select id="selected-city">
                                            <?= ! empty($city)
                                                ? '<option selected value="' . $city . '">' . $city . '</option>'
                                                : ''
                                            ?>
                                        </select>
                                        <button id="clear-city" type="button" class="btn btn-warning">Clear City</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" style="padding-top: 2rem;">
                        <button id="extra-submit" type="button" class="btn btn-primary submitBtn">Submit</button>
                        <button id="extra-clear" type="button" class="btn btn-danger">Clear</button>
                    </form>
                </div>
            </div>

        </div>

        <!-- Modal Footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
<!--Filter Modal End-->

<script src="/assets/js/app.js" type="text/javascript"></script>
<script src="/assets/js/plugins/forms/selects/select2.min.js"></script>
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script type="text/javascript">
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 3.397,
                lng: 10.644
            },
            zoom: 3
        });
    }

    var loaded_data = new Array();

    function showTranspModal(service_request_id) {
        if (typeof event !== 'undefined') {
            event.preventDefault();
        }
        //  alert(service_request_id);
        // collect data - either from forms or from data variables
        var id = $(this).data('id');

        // load the modal content with a loader gif and message
        $('#modal-content').html('Loading...');

        // show modal window
        $('#modal_theme_primary').modal('show');
        //alert(5);
        // do the ajax bit
        var post_data = {
            'interest_id': service_request_id,
        };
        //alert(6);
        $.ajax({
            url: "/transp/transp_modal?service_request_id=" + service_request_id
        }).done(function(data) {
            //alert(data);
            //alert(7);
            $('#modal-content').html(data);
            //initialize_map();
            var myLatlng = new google.maps.LatLng(33.7489954, -84.3879824);
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsDiv"));

            fitMapToBounds_map();

            calcRoute(loaded_data[0], loaded_data[1]);
            //alert(loaded_data[0]);
        });
    }

    function viewMember(member_id) {

        $('#transp_detail').html('Processing...');
        $('#acc' + member_id).prop('disabled', true);
        $.ajax({
            url: "/member/viewmedberdetail?proc=PROCESS&member_id=" + member_id
        }).done(function(data) {
            $('#transp_detail').html(data);
            $('#acc' + member_id).prop('disabled', false);
        });
        return false;
    }

    $(document).ready(function() {
        $("#extra-btn").on('click', function() {
            $("#filter-model").modal();
        })

        // search-find-member press enter => submit search form
        $('#search-find-member #search_text').keyup(function (e) {
            if(e.which == 13)  // the enter key code
            {
                $('#search-find-member #refresh-btn').click();
                return false;
            }
        });

        $('#refresh-btn').on('click', function(e) {
            e.preventDefault();

            const hidden_field = 
            `<input type="hidden" name="search_text" value="${$('#search_text').val()}" />
            <input type="hidden" name="card_decision_group" value="${$('select[name=card_decision_group]').val()}" />
            <input type="hidden" name="card_find_select" value="${$('select[name=card_find_select]').val()}" />`;

            $('#filter_form').append(hidden_field).submit();
        })

        $('#extra-submit').on('click', function(e) {
            e.preventDefault();

            let city_name = '';
            if (city.select2("data").length) {
                city_name = city.select2("data")[0].text;
            }

            const hidden_field =
            `<input type="hidden" name="search_text" value="${$('#search_text').val()}" />
            <input type="hidden" name="card_decision_group" value="${$('select[name=card_decision_group]').val()}" />
            <input type="hidden" name="card_find_select" value="${$('select[name=card_find_select]').val()}" />
            <input type="hidden" name="city" value="${city_name}" />`;

            $('#filter_form').append(hidden_field).submit();
        })

        const city = $("#selected-city").select2({
            placeholder: "Search By City",
            maximumSelectionSize: 1,
            minimumInputLength: 3,
            ajax: {
                url: "/geofence_area_city/getCities",
                type: "GET",
                dataType: "json",
                delay: 250,
                data: function(params) {
                    const query = {
                        search_text: params.term,
                        page: params.page || 1
                    };
                    return query;
                },
                processResults: function(res, params) {
                    const {
                        data,
                        total
                    } = res;
                    params.page = params.page || 1;
                    return {
                        results: data.map(item => ({
                            id: item.id,
                            text: item.city_name
                        })),
                        pagination: {
                            more: params.page * 20 < +total
                        }
                    };
                }
            }
        })

        // add library datepicker
        addDatePicker('.search-by-date input');

        // clear extra form
        $("#extra-clear").on('click', function() {
            const form = $(this).closest('form');
            form.find("input[type=search]").val("");
            form.find("select").val("-1");
            form.find("select[name=card_country]").val("");
            
        });

        // only clear city field
        $("#clear-city").on('click', function() {
            $('#selected-city').empty();
        });

        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        })
    })
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=<?= $google_api_key ?>&callback=initMap" async defer></script>
<style>
    .search-by-date,
    .search-by-numeric {
        display: flex;
    }

    .search-by-date input,
    .search-by-numeric input {
        width: 7.1em !important;
    }

    .form-inline .form-group {
        display: flex;
        flex-direction: column;
    }

    #filter_form .row {
        margin-bottom: 1em;
    }

    .city-filter {
        display: flex;
    }

    #clear-city {
        left: 5px;
    }

    @media (min-width: 769px) {
        .modal-dialog {
            width: 700px;
            margin: 30px auto;
        }
    }
</style>