FloatBackOfffice/application/views/tools/view_gpstriggeraddress.php

<div class="row">
  <div class="col-lg-4">
    <div class="panel panel-flat">
      <div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
        <?php if ($errMsg) { ?>
          <div class="col-12">
            <div class="alert alert-danger alert-dismissible bg-danger text-white border-0" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <strong>Error</strong> <?php echo $errMsg ? $errMsg : '' ?>
            </div>
          </div>
        <?php } ?>
        <?php if ($msg) { ?>
          <div class="col-12">
            <div class="alert alert-danger alert-dismissible bg-danger text-white border-0" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <?php echo $msg ? $msg : '' ?>
            </div>
          </div>
        <?php } ?>
        <font id="message" color=red></font>
        <h3>GPS TRIGGER ADDING </h3>
        <form id="gps_address_form" name="gps_address_form" method="post" action="gpstriggeraddresscreate" autocomplete="off">
          <div class="form-group">
            <label for="description">Location Description</lrbel>
            <input type="text" class="form-control" name="description" id="description" maxlength="35" placeholder="Location name"/>
          </div>

          <div class="form-group">
            <label for="location_country">Location Country</label>
            <?=$location_country?>
          </div>

          <div class="form-group">
            <label for="address">Address</label>
            <textarea class="form-control" name="address" id="address" rows="6" maxlength="250" placeholder="Address"></textarea>
          </div>

          <input type="hidden" class="form-control" name="gps_trigger_selected" id="gps_trigger_selected"></textarea>

          <div class="form-group">
            <button type="submit" name="go" class="btn btn-info btn-block btn-sm">Add Location</button>
            <button type="button" onclick="return updateTouristAttraction();" name="update" class="btn btn-info btn-block btn-sm" style="display: none;">Update</button>
            <button type="button" onclick="return deleteTouristAttraction();" name="delete" class="btn btn-info btn-block btn-sm" style="display: none;">Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="row">
      <div class="col">
        <form  class="gpstriggeraddress-search-form" autocomplete="off">
          <div class="row">
            <div class="form-group col-md-3">
              <?php echo $location_country ?>
            </div>
            <div class="form-group col-md-3">
              <select name="city_id" id="city_id_filter" class="form-control"></select>
            </div>

            <div class="form-group col-md-3">
              <select name="address_id" id="address_id_filter" class="form-control"></select>
            </div>

            <div class="form-group col-md-3">
              <textarea name="description" class="form-control" id="description_filter" rows="1" placeholder="Description"></textarea>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-3">
              <input type="number" class="form-control m-b-xs" name="latitude" id="latitude_filter" placeholder="Latitude"></input>
              <input type="number" class="form-control m-b-xs" name="longitude" id="longitude_filter" placeholder="Longitude"></input>
              <input type="number" class="form-control" name="radius" id="radius_filter" value="5000" placeholder="Radius (meter)"></input>
            </div>
            <div class="form-group col-md-2">
              <button type="button" name="search" id="search" class="btn btn-info btn-block btn-sm">Search</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Media library -->
    <div class="panel-heading">
      <div class="heading-elements">
        <div style='margin-top: 10px;' id='pagination'></div>
      </div>
    </div>
    <div class="panel panel-white">
      <table id="address-list" class="col-lg-12 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 ID</th>
          <th>Country</th>
          <th>Description</th>
          <th>Address</th>
          <th>Latitude</th>
          <th>Longitude</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <!-- /media library -->
  </div>
</div>

<script src="/assets/js/plugins/forms/selects/select2.min.js"></script>
<script>
function updateTouristAttraction() {
  document.gps_address_form.action = origin + "/tools/gpstriggeraddressupdate";
  var frm = document.getElementsByName('gps_address_form')[0];
  frm.submit(); // Submit the form
  return false; // Prevent page refresh
}

function deleteTouristAttraction() {
  document.gps_address_form.action = origin + "/tools/gpstriggeraddressdestroy";
  var frm = document.getElementsByName('gps_address_form')[0];
  frm.submit(); // Submit the form
  return false; // Prevent page refresh
}

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
  e = e || window.event;
  var data = [];
  var target = e.srcElement || e.target;

  while (target && target.nodeName !== "TR") {
      target = target.parentNode;
  }

  if (target) {
    var cells = target.getElementsByTagName("td");
    document.getElementsByName('gps_trigger_selected')[0].value = cells[0].innerHTML;
    document.getElementsByName('location_country')[0].value  = cells[2].innerHTML;
    document.getElementsByName('description')[0].value       = cells[3].innerHTML;
    document.getElementsByName('address')[0].value           = cells[4].innerHTML;
    //document.getElementsByName('description')[0].value       = cells[8].innerHTML;

    document.getElementsByName('go')[0].style.display = "none";
    document.getElementsByName('update')[0].style.display = "block";
    document.getElementsByName('delete')[0].style.display = "block";

    var element = document.getElementById("underline-location");
    if (element !== null) {
      element.removeAttribute('id');
    }
    cells[2].id="underline-location";
  }
}

$(document).ready(function(){
  //Load panigation
  loadPagination(0);
  
   // 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);
    $('#message').html('');
  });

  function loadPagination(pagno) {
    $.ajax({
      url: '/tools/loadRecordGPSTriggerAddress',
      type: 'get',
      dataType: 'json',
      data : {
        'rowno'   : pagno,
        'address_id' : $('#address_id_filter').val(),
        'city_id' : $('#city_id_filter').val(),
        'description' : $('#description_filter').val(),
        'latitude' : $('#latitude_filter').val(),
        'longitude' : $('#longitude_filter').val(),
        'radius' : $('#radius_filter').val(),
        'country' : $('.gpstriggeraddress-search-form select[name="location_country"]') .val(),
      },
      success: function(response) {
        $('#pagination').html(response.pagination);
        createTable(response.result, response.row);
      },
    });
  
  }
  
  function createTable(result) {

    $('#address-list tbody').empty();
    /*
              <th>ID</th>
              <th>Address ID</th>
              <th>Country</th>
              <th>Description</th>
              <th>Address</th>
              <th>Latitude</th>
              <th>Longitude</th>
    */
    for (index in result) {
      var id             = result[index].id;
      var address_id     = result[index].address_id;
      var country        = result[index].country;
      var description    = result[index].description;
      var address        = result[index].address;
      var latitude       = result[index].latitude;
      var longitude      = result[index].longitude;
      var timezone       = result[index].timezone;
      var postal         = result[index].postal;

      var tr = "<tr style='cursor: pointer'>";
      tr += "<td>" + id + "</td>";
      tr += "<td>" + address_id + "</td>";
      tr += "<td>" + country + "</td>";
      tr += "<td>" + description + "</td>";
      tr += "<td>" + address + "</td>";
      tr += "<td>" + latitude + "</td>";
      tr += "<td>" + longitude + "</td>";

      tr += "<td style='display:none'>" + timezone + "</td>";
      tr += "<td style='display:none'>" + postal + "</td>";
      tr += "</tr>";

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

  // address automation
  $('#address_id_filter').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_filter').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>
#underline-location {text-decoration: underline;}

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