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

<!-- Page content -->
<div class="container-fluid pt-8">
    <div class="page-header mt-0 p-3">
        <h3 class="mb-sm-0">GOOGLE API KEY</h3>
        
    </div>
    <div id="alert2" class="col-md-12"></div>
    	<!-- Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <div class="grid-margin">
                        <div class="">
                            <div class="table-responsive">
                                <table id="example" class="text-center table card-table table-vcenter text-nowrap  align-items-center">
                                    <thead>
                                      <tr>
                                        <th style="width: 80px">S.No</th>
                                        <th>Google Api Key</th>
                                        <th>Status</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>


<!--Edit Modal-->
<div class="modal fade" id="edit-keys">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Edit Google Api Key <span id="alert1"></span></h4>
      </div>
      <form method="post" id="update_data">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <label>Google Api Key</label>
              <input type="text" class="form-control" name="key" id="key"  required="required" autofocus>
          </div>

          <div class="col-md-12">
            <label>Status</label>
            <select type="text" class="form-control" name="status" id="status" required>
              <option value="Active">Active</option>
              <option value="Disabled">Disabled</option>
            </select>
          </div>
          
        </div>
        <br/>
          <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">save Changes</button>
      </div>
      </div>
    </form>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<?php
  require_once 'footer.php';
  require_once 'jslinks.php';
?>
<script>
  $(document).ready(function () {
    output();

    // To save changes in edit modal    
    $('#update_data').submit(function(e) {
    e.preventDefault();
    $("#global-loader").show();
    $.ajax({
      url: "ajax-google-api-key",
      type: "POST",
      data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
      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 () {
              $('#alert1').hide()
            }, 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)
          }
          output();
        }
      })
    })
  })

  // To show all the cities in main menu

  function output() {
    var inHTML = '';
    var i = 1;
    $.getJSON("ajax-google-api-key?show_keys=1", function (data) {
      $.each(data, function (key, item) {
        inHTML +=
          `<tr><td>${i}</td>
          <td>${item.key_id}</td>
          <td>${item.status}</td>
          <td><button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(${item.id})" data-toggle="modal" data-target="#edit-keys" value="${item.id}"><i class="fa fa-edit btn-success"></i></button></td></tr>`;
        i++;
      })
      $('#tbody').html(inHTML);
      $('#example').DataTable({
        layout: {
          topStart: {
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
          }
        },
        dom: 'lBfrtip',
        "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']]
      });
    })
  }

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

  function edit(e) {
      $("#global-loader").show();
    $.ajax({
      url: "ajax-google-api-key",
      type: "POST",
      dataType: "JSON",
      data: {
        key_id: e,
      },
      success: function (response) {
          $("#global-loader").fadeOut(); 
        $('#key').val(response.key_id)
        $('#status').val(response.status)
      },
    })
  }
    

</script>