FloatBackOfffice/application/views/tools/view_neighborhood.php

<div class="row">
  <div class="col-lg-8">
  <div class="panel panel-flat">
    <h3 class="m-l-md">Neighborhood Settings</h3>
    <div class="jumbotron" style="background-color:#F3DFE5; padding: 20px 10px 50px 10px;">
      <form id="neighborhood_form" autocomplete="off">
        <div class="row">
          <div class="form-group col-lg-3">
            <?= $card_country ?>
          </div>

          <div class="form-group col-lg-4">
            <select name="city_id" id="city_id" class="form-control"></select>
          </div>

          <div class="form-group col-lg-4">
            <select name="address_id" id="address_id" class="form-control"></select>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-lg-3">
            <input type="number" class="form-control m-b-xs" name="latitude" id="latitude" placeholder="Latitude"></input>
            <input type="number" class="form-control m-b-xs" name="longitude" id="longitude" placeholder="Longitude"></input>
            <input type="number" class="form-control" name="radius" id="radius" value="5000" placeholder="Radius (meter)"></input>
          </div>
          <div class="form-group col-lg-2">
            <button type="button" name="search" id="search" class="btn btn-info btn-block btn-sm">Search</button>
          </div>
        </div>
        
      </form>
    </div>
  </div>
  <!-- Paginate -->

  <div class="panel panel-white">
    <div class="row col-lg-12">
      <div class="panel-heading">
        <div class="heading-elements">
          <div style='margin-top: 10px;' id='pagination'></div>
        </div>
      </div>
      <table id="neighborhood-list" class="table-bordered table-condensed table-hover table-striped table-condensed" style="padding:0px; background-color:lightgreen;">
        <thead class="bg-indigo">
          <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></th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

</div>

<div class="col-lg-4">
  <!-- Media library -->
  <font id="message" color=red></font>
  <div class="panel panel-white" id="neighborhood-detail" style="display: none;">
    <table id="neighborhood-detail__list" class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="table-layout: fixed; padding:0px; background-color:lightgreen;">
      <tbody>
      </tbody>
    </table>
    <div id="neighborhood-detail__combo">
      <?= $card_neighborhood ?>
    </div>
    <div class="neighborhood-detail__btn">
      <button type="button" name="btn-set-neighbor" id="btn-set-neighbor" class="btn btn-info btn-block btn-sm">Set Neighborhood</button>
    </div>
  </div>
  <!-- /media library -->
</div>
<!-- Script -->
<script src="/assets/js/plugins/forms/selects/select2.min.js"></script>
<script type='text/javascript'>
  $(document).ready(function() {

    // Detect pagination click
    $('#pagination').on('click', 'a', function(e) {
      e.preventDefault();
      var pageno = $(this).attr('data-ci-pagination-page');
      loadPagination(pageno);
    });

    // Detect search click
    $('#search').on('click', function(e)  {
      loadPagination(0);
      $('#neighborhood-detail').css('display', 'none');
      $('#message').html('');
    });

    // Prevent submit form by press the enter button
    $(window).keydown(function(event){
      if(event.keyCode == 13) {
        loadPagination(0);
        event.preventDefault();
        return false;
      }
    });

    function loadPagination(pagno) {

      $('#search').button("loading");
      
      $.ajax({
        url: '/tools/loadRecord',
        type: 'get',
        dataType: 'json',
        data : {
          'rowno'   : pagno,
          'address_id' : $('#address_id').val(),
          'city_id' : $('#city_id').val(),
          'latitude' : $('#latitude').val(),
          'longitude' : $('#longitude').val(),
          'radius' : $('#radius').val(),
          'country' : $('[name="card_country"]') .val(),
        },
        success: function(response) {
          $('#pagination').html(response.pagination);
          createTable(response.result, response.row);

          $(".btn-select").on('click', function(e)  {
            
            showNeighborDetail($(this));
            
            $("#btn-set-neighbor").unbind('click');
            $("#btn-set-neighbor").on('click', function(e)  {
              setNeighborHood();
            });

          });
        },
        complete: function() {
          $('#search').button("reset");
        }
      });
    }

    function createTable(result) {

      $('#neighborhood-list tbody').empty();
      
      for (index in result) {
        var id             = result[index].id;
        var address        = result[index].address;
        var latitude       = result[index].latitude;
        var longitude      = result[index].longitude;
        var timezone       = result[index].timezone;
        var geocoding_date = result[index].geocoding_date;
        var postal         = result[index].postal;
        var country        = result[index].country;
        var geometry       = result[index].geometry;
        var description    = result[index].description;

        var tr = "<tr>";
        tr += "<td>" + id + "</td>";
        tr += "<td>" + address + "</td>";
        tr += "<td>" + latitude + "</td>";
        tr += "<td>" + longitude + "</td>";
        tr += "<td>" + timezone + "</td>";
        tr += "<td>" + geocoding_date + "</td>";
        tr += "<td>" + postal + "</td>";
        tr += "<td>" + country + "</td>";
        tr += "<td style='display:none'>" + geometry + "</td>";
        tr += "<td style='display:none'>" + description + "</td>";
        tr += "<td><button type='button' class='btn btn-info btn-block btn-sm btn-select'>Select</button></td>";
        tr += "</tr>";

        $('#neighborhood-list tbody').append(tr);
      }
    }

    function showNeighborDetail(thisObj) {
      var $row = thisObj.closest("tr");       // Finds the closest row <tr> 
      var $tds = $row.find("td");             // Finds all children <td> elements

      var id             = $tds[0].innerText;
      var address        = $tds[1].innerText;
      var latitude       = $tds[2].innerText;
      var longitude      = $tds[3].innerText;
      var geocoding_date = $tds[5].innerText;
      var country        = $tds[7].innerText;
      var geometry       = $tds[8].innerText;
      var description    = $tds[9].innerText;

      $('#neighborhood-detail__list tbody').empty();

      var tr = "<tr style='display:none'>";
      tr += "<th>Id</th>";
      tr += "<td id='selected_address'>" + id + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Address</th>";
      tr += "<td style='word-wrap: break-word;'>" + address + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Latitude</th>";
      tr += "<td>" + latitude + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Longitude</th>";
      tr += "<td>" + longitude + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Geocoding Date</th>";
      tr += "<td>" + geocoding_date + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Country</th>";
      tr += "<td id='selected_country'>" + country + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Geometry</th>";
      tr += "<td style='word-wrap: break-word;'>" + geometry + "</td>";
      tr += "</tr>";
      tr += "<tr>";
      tr += "<th>Description</th>";
      tr += "<td>" + description + "</td>";
      tr += "</tr>";

      $('#neighborhood-detail__list tbody').append(tr);
      $('#neighborhood-detail').css('display', '');
    }

    function setNeighborHood() {
      var addressId  = $("#selected_address")[0].innerText;
      var country    = $("#selected_country")[0].innerText;
      var neighborId = $("[name=card_neighborhood]").children("option:selected").val();

      $('#btn-set-neighbor').button("loading");
      $('#message').html('');

      $.ajax({
        url: '/tools/setNeighborHood',
        type: 'post',
        dataType: 'json',
        data : {
          'addressId'  : addressId,
          'country'    : country,
          'neighborId' : neighborId
        },
        success: function(response) {
          $("#message").html(response.message);
        },
        complete: function() {
          $('#btn-set-neighbor').button("reset");
        }
      });
    }


    // address automation
    $('#address_id').select2({
      placeholder: "Search by address",
      allowClear: true,
      maximumSelectionSize: 1,
      minimumInputLength: 3,
      ajax: {
          url: "/addresses/getAddressesAjax",
          type: "GET",
          dataType: "json",
          delay: 250,
          data: function(params) {
          const query = {
              name: params.term,
              page: params.page || 1,
              per_page: 20,
          };
          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.address })),
              pagination: {
                  more: params.page * 20 < +total
              }
          };
          }
      }
    });

    // city automation
    $('#city_id').select2({
      placeholder: "Search by city",
      allowClear: true,
      maximumSelectionSize: 1,
      minimumInputLength: 2,
      ajax: {
          url: "/geofence_area_city/getcityAjax",
          type: "GET",
          dataType: "json",
          delay: 250,
          data: function(params) {
          const query = {
              city_name: params.term,
              page: params.page || 1,
              per_page: 20,
          };
          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 })),
              pagination: {
                  more: params.page * 20 < +total
              }
          };
          }
      }
    });
  });
</script>

<style>
a {
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>