FloatBackOfffice/application/views/addresses/list.php

<link href="/assets/css/address/list.css" rel="stylesheet" type="text/css" />

<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row align-items-center">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right text-right action">
                    <a href="/addresses/create" class="btn btn-success">New address</a>
                </div>
                <h4 class="page-title">Addresses</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- start alert -->
    <?php if ($this->session->flashdata('success')) { ?>
        <div class="col-12">
            <div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <?php echo $this->session->flashdata('success') ?>
            </div>
        </div>
    <?php } ?>
    <!-- end alert -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <form class="search-block form-inline" id="searchForm" action="/addresses/search" method="get">
                            <div class="form-group">
                                <label for="city">City</label>
                                <select id="city">
                                    <?= ! empty($city_name)
                                        ? '<option selected value="' . $city . '">' . $city_name . '</option>'
                                        : ''
                                    ?>
                                </select>
                            </div>

                            <div class="form-group" style="width: 40%; display: flex; flex-direction: column;">
                                <label for="address">Address</label>
                                <select id="address">
                                    <?= ! empty($address)
                                        ? '<option selected value="' . $address . '">' . $address . '</option>'
                                        : ''
                                    ?>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>GPS</label>
                                <label for="radius_default">Radius: 5000m</label>
                                <input type="checkbox" name="radius_default" id="radius_default"
                                    <?= empty($radius_default) ? '' : 'checked' ?>
                                >
                                <div class="search-by-gps">
                                    <input style="width: 100px;" type="search" class="form-control" id="lat" name="latitude" placeholder="Latitude" value="<?= isset($latitude) ? $latitude : '' ?>">
                                    <input style="width: 100px;" type="search" class="form-control" id="lng" name="longitude" placeholder="Longitude" value="<?= isset($longitude) ? $longitude : '' ?>">
                                    <input style="width: 100px;" type="search" class="form-control" id="rad" name="radius" placeholder="Radius in km" value="<?= isset($radius) ? $radius : '' ?>">
                                </div>
                            </div>

                            <button class="btn btn-warning btn-search" id="btnClear" type="button">Clear</button>
                            <button class="btn btn-primary btn-search" id="btnSearch" type="submit">Search</button>
                        </form>
                    </div>

                    <div class="table-responsive-sm">
                        <table id="trips-datatable" class="table table-sm table-centered mb-0" width="100%">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Address</th>
                                    <th>Latitude</th>
                                    <th>Longitude</th>
                                    <th>Timezone</th>
                                    <th>Geocoding date</th>
                                    <th>Postal</th>
                                    <th>Country</th>
                                    <th class="actions">Actions</th>
                                </tr>
                            </thead>

                            <tbody class="table-striped">
                                <?php foreach ($list as $item) : ?>
                                    <tr>
                                        <td><?php echo $item['id'] ?></td>
                                        <td><?php echo $item['address'] ?></td>
                                        <td><?php echo $item['latitude'] ?></td>
                                        <td><?php echo $item['longitude'] ?></td>
                                        <td><?php echo $item['timezone'] ?></td>
                                        <td><?php echo $item['geocoding_date'] ?></td>
                                        <td><?php echo $item['postal'] ?></td>
                                        <td><?php echo $item['country'] ?></td>
                                        <td class="actions">
                                            <a href="/addresses/<?php echo $item['id']; ?>/edit" class="btn btn-primary">View</a>
                                            <button type="button" class="btn btn-danger btn-remove" data-id="<?php echo $item['id'] ?>" data-address="<?php echo $item['address'] ?>" data-toggle="modal" data-target="#remove-address-warning-modal">Remove</button>
                                        </td>
                                    </tr>
                                <?php endforeach ?>
                            </tbody>
                        </table>
                    </div>

                    <?php echo $pagination ?>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->

<div id="remove-address-warning-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="warning-header-modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-warning">
                <h4 class="modal-title" id="warning-header-modalLabel"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <h5 class="mt-0">Remove warning</h5>
                <p>This can not be undone. Do you want to conitnue?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning" id="removeBtn" data-id="">Continue</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<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/pages/addresses/list.js" type="text/javascript"></script>

<style>
    .search-block {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
</style>