FloatBackOfffice/application/views/admin/view_country_city.php

<div class="row">
    <div class="col-lg-8">


        <!-- Media library -->
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title text-semibold"><a href="/bkoadmin/country"> << Return to Countries</a></h6>
                <div class="heading-elements">
                    <div class="form-group">
                        <button class="btn btn-warning" type="button" onclick="cleanUp()">CleanUp</button>
                    </div>
                </div>
            </div>
            <?php echo $links ?>
            <table id="trips-datatable" class="table table-sm table-centered mb-0" width="100%">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>City name</th>
                  <th>Country name</th>
                  <th>Latitude</th>
                  <th>Longitude</th>
                  <th>Radius</th>
                  <th>Status</th>
                  <th class="actions">Actions</th>
                </tr>
              </thead>

              <tbody class="table-striped">
                <?php foreach ($cities as $item): ?>
                  <tr>
                    <td><?php echo $item->id ?></td>
                    <td id="lbl_city_name_<?php echo $item->id ?>"><?php echo $item->city ?></td>
                    <td><?php echo $item->country ?></td>
                    <td><?php echo $item->latitude ?></td>
                    <td><?php echo $item->longitude ?></td>
                    <td><?php echo $item->radius ?></td>
                        <td>
                        <?php
                        if ($item->status == Geofence_area_city_model::ACTIVE_STATUS) {
                            echo 'Active';
                        } else {
                            echo 'Inactive';
                        }
                        ?>
                    </td>
                    <td class="actions">
                      <a href="/geofence_area_city/<?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-city-name="<?php echo $item->city ?>"
                        data-toggle="modal"
                        data-target="#remove-geofence-area-city-modal"
                      >Remove</button>
                      <button
						onclick ="correctName('lbl_city_name_<?php echo $item->id ?>','<?php echo $item->id ?>','<?php echo $item->latitude ?>','<?php echo $item->longitude ?>');"
                        type="button"
                        class="btn btn-success btn-remove">Correct</button>
                    </td>
                  </tr>
                <?php endforeach?>
              </tbody>
            </table>
        </div>
        <!-- /media library -->

    </div>

    <div class="col-lg-4">
        <div class="panel panel-flat">
            <font color=red><b><div id="message"><?= $message ?></div></b></font>
            <div id="upload_form" style="display:none;">
                <form class="form-horizontal" action="?" method="POST" enctype="multipart/form-data">
                    <fieldset class="content-group"><?= $message ?>
                        <legend id="top_image_legend" class="text-bold">Top Image</legend>
                        <div class="form-group">
                            <label class="col-lg-3 control-label text-semibold"> Select File:</label>
                            <div class="col-lg-9">
                                <input type="file"  name="cardimg" class="file-input form-control btn btn-danger">
                                <span class="help-block">Upload country top image</code>.</span>
                            </div>
                        </div>
                        <input type="hidden" name="id" id="top_image_country_id" value="0" />
                        <input type="hidden" name="catid" value="4" />
                        <div style="text-align:center;">
                            <input type="submit" class="btn btn-primary" value="Upload">
                        </div>

                    </fieldset>
                </form>
            </div>


            <div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
                <h3>Top Image Standard</h3> 
                <p>The app is optimized for image 400X400 jpg files only. The image must be optimized for web use, the smaller the size the better</p> 
            </div>

        </div>


    </div>

</div>
<script src="/assets/js/app.js" type="text/javascript"></script>
<script src="/assets/js/pages/geofence_area_city/list.js" type="text/javascript"></script>
<script>
    function showUploadForm(id, name) {
        $('#top_image_country_id').val(id);
        $('#top_image_legend').html(name);
        $('#upload_form').show();
        return false;
    }
    function updateCountryStatus(id, enabled) {
        var status = enabled ? 1 : 0;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/bkoadmin/countryStatus?id=' + id + '&status=' + status, true);
        xhr.responseType = 'html';
        xhr.onload = function () {
            var status = xhr.status;
            if (status === 200) {
                alert(xhr.response);
            } else {
                alert('ERROR:' + xhr.response);
            }
        };
        xhr.send();
    }
    function deleteCountryImage(id) {
        if (!confirm('Are you sure you want to delete country top image?'))
            return false;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/bkoadmin/countryImageDelete?id=' + id, true);
        xhr.responseType = 'html';
        xhr.onload = function () {
            var status = xhr.status;
            if (status === 200) {
                $('#message').html(xhr.response);
                $('#country_image_' + id).html('');
                $('#country_image_link_' + id).html('');
            } else {
                $('#message').html('ERROR:' + xhr.response);
            }
        };
        xhr.send();
    }
</script>