bnmbertsurheoppopopooooooooooooooopoopopdf'tdfg

hjkhghoppoopppooppoppoppoopoirh bnmbertsurheoppopopooooooooooooooopoopopdf'tdfg

<?php
    require_once 'header.php';
    require_once 'navbar.php';
?>

<div class="container-fluid pt-8">
    <div class="page-header mt-0 p-3">
        <h3 class="mb-sm-0">OPERATE CITIES</h3>
        <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-city-modal">
                <i class="fa fa-plus"></i>
        </button>
        
    </div>
    <div id="alert2" class="col-md-12"></div>
    	
    <div class="row">
        <div class="col-12">
            <div class="card shadow p-4">
                
                <div class="">
                    <div class="grid-margin">
                        <div class="">
                            <div class="table-responsive">
                                <table id="example" class="table card-table table-vcenter text-nowrap  align-items-center">
                                    <thead class="">
                                      <tr>
                                        <th style="width: 80px">S.No</th>
                                        <th>City</th>
                                        <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                                      </tr>
                                    </thead>
                                      <tbody id="tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add-city-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Add City <span id="alert"></span></h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <label>City</label>
            <input type="text" class="form-control" name="add-city-name" id="add-city-name" required="required"
              autofocus>
          </div>
        </div>
        <br/>
          <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="button" name="add-city-btn" id="add-city-btn" class="btn btn-primary">Add Data</button>
      </div>
      </div>
    </div>
  </div>
  
</div>


<div class="modal fade" id="edit-city">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Edit City <span id="alert1"></span></h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <label>City</label>
            <input type="text" class="form-control" name="edit-city-name" id="edit-city-name" required="required"
              autofocus>
          </div>
        </div>
        <br/>
          <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="button" name="save-city-btn" id="save-city-btn" class="btn btn-primary">save Changes</button>
      </div>
      </div>
    </div>
  </div>
  
</div>
<?php
  require_once 'footer.php';
  require_once 'jslinks.php';
?>
<script>
  $(document).ready(function () {
    output();

// Adding a city in add modal

$('#add-city-btn').click(function () {
        $("#global-loader").show();
      $.ajax({
        url: "operate_cities_ajax.php",
        type: "POST",
        data: {
          city_name: $('#add-city-name').val(),
        },
        success: function (response) {
            $("#global-loader").fadeOut(); 
          if (response == "Success") {
            $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show()
            setTimeout(function () {
              location.reload();
            }, 1000)
            $('#add-city-name').val('')

} else {
            $('#alert').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t add.</span>').show()
            setTimeout(function () {
              $('#alert').hide()
            }, 1000)
          }
          
        }
      })
    })

// To save changes in edit modal

$('#save-city-btn').click(function () {
        $("#global-loader").show();
      $.ajax({
        url: "operate_cities_ajax.php",
        type: "POST",
        data: {
          save_id: $('#save-city-btn').val(),
          save_city_name: $('#edit-city-name').val(),
        },
        success: function (response) {
            $("#global-loader").fadeOut(); 
          if (response == "Success") {
            $('#alert1').html('<span class="p-1 m-1 alert alert-success">Successfully Updated</span>').show()
            setTimeout(function () {
             location.reload();
            }, 2000)
          } else {
            $('#alert1').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t update.</span>').show()
            setTimeout(function () {
              $('#alert1').hide()
            }, 2000)
          }
        }
      })
    })
  })

// To show all the cities in main menu

// Deletion of cities

//On click of edit button to show values of database in edit modal

function edit(e) {
      $("#global-loader").show();
    $.ajax({
      url: "operate_cities_ajax.php",
      type: "POST",
      dataType: "JSON",
      data: {
        city_id: e,
      },
      success: function (response) {
          $("#global-loader").fadeOut(); 
        var currentcity = response
        $('#edit-city-name').val(currentcity.city)
        $('#save-city-btn').val(currentcity.id)
      },
    })
  }

</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?=$google_key?>&libraries=places"></script>
<script>
  function initialize() {
    var options = {
      types:['(cities)'],
      componentRestrictions: {country: 'IND'}
  };
  var input = document.getElementById('add-city-name');
  var autocomplete = new google.maps.places.Autocomplete(input, options);
  var input = document.getElementById('edit-city-name');
  var autocomplete2 = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>