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

$sql="SELECT city FROM `statesandcity`";
$res=$conn->query($sql);
if($res->num_rows > 0)
{
  while($row=$res->fetch_assoc())
  {
    $cites[]=$row;
  }
}
$show = "SELECT * FROM working_city";
$result = $conn->query($show);

if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $working[] = $row;
  }
}

?>
<style>
 .pac-container {
  z-index: 10000 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">WORKING 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>
  <!-- Table -->
  <div class="row">
    <div class="col-12">
      <div class="card shadow">
                <!-- <div class="card-header bg-transparent border-0">
                    <h2 class=" mb-0">Cities List</h2>
                  </div> -->
                  <div class="">
                    <div class="grid-margin">
                      <div class="">
                        <div class="table-responsive p-3">
                          <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>From</th>
                                <th>To</th>
                                <th>Status</th>
                                <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                              </tr>
                            </thead>
                            <tbody>
                              <?php $i=1; foreach ($working as $data) { ?>
                              <tr>
                                <td><?php echo $i++; ?></td>
                                <td><?php echo $data['from']; ?></td>
                                <td><?php echo $data['to']; ?></td>
                                <td><?php if ($data['status']==1){
                                  echo "Active";
                                }else{
                                  echo "In Active";
                                } ?>
                                </td>
                                <td>
                                  <button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(<?php echo $data['id']; ?>)" data-toggle="modal" data-target="#edit-city" value="${item.id}"><i class="fa fa-edit btn-success"></i></button><button type="button" id="del" name="del" class="btn btn-danger" onclick="del(<?php echo $data['id']; ?>)" value="<?php echo $data['id']; ?>" ><i class="fa fa-trash"></i></button></td>
                              </tr>
                            <?php } ?>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--Add Modal-->
          <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 Working City <span id="alert"></span></h4>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-12">

                      <label>From</label>
                      <select name="from" class="form-control" id="from" required>
                        <option value="">Select From</option>
                        <?php
                        foreach ($cites as $city)
                        {
                          ?>
                          <option value="<?=$city['city'];?>"><?=$city['city'];?></option>
                        <?php } ?>
                      </select>

                    </div>
                    <div class="col-md-12">

                      <label>To</label>
                      <select name="to" class="form-control" id="to" required>
                        <option value="">Select To</option>
                        <?php
                        foreach ($cites as $city)
                        {
                          ?>
                          <option value="<?=$city['city'];?>"><?=$city['city'];?></option>
                        <?php } ?>
                      </select>

                    </div>
                    <div class="col-md-12">

                      <label>To</label>
                      <select class="form-control" id="status" required>
                        <option value="1">Active</option>
                        <option value="0">In Active</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="button" name="add-city-btn" id="add-city-btn" class="btn btn-primary">Add Data</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
          <!--Edit Modal-->
          <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 State & City <span id="alert1"></span></h4>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-12">

                      <label>From</label>
                      <select name="from" class="form-control" id="efrom" required>
                        <option value="">Select From</option>
                        <?php
                        foreach ($cites as $city)
                        {
                          ?>
                          <option value="<?=$city['city'];?>"><?=$city['city'];?></option>
                        <?php } ?>
                      </select>

                    </div>
                    <div class="col-md-12">

                      <label>To</label>
                      <select name="to" class="form-control" id="eto" required>
                        <option value="">Select To</option>
                        <?php
                        foreach ($cites as $city)
                        {
                          ?>
                          <option value="<?=$city['city'];?>"><?=$city['city'];?></option>
                        <?php } ?>
                      </select>

                    </div>
                    <div class="col-md-12">

                      <label>To</label>
                      <select class="form-control" id="estatus" required>
                        <option value="1">Active</option>
                        <option value="0">In Active</option>

                      </select>

                    </div>

                  </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>
          <!-- /.modal-content -->
        </div>
        <?php
        require_once 'footer.php';
        require_once 'jslinks.php';
        ?>
        <!-- Adon JS -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/datatable.js"></script>
        <script>
          $(document).ready(function () {
          

    $('#add-city-btn').click(function () {
      $("#global-loader").show();
      $.ajax({
        url: "ajax_working_cities.php",
        type: "POST",
        data: {
          from: $('#from').val(),
          to: $('#to').val(),
          status: $('#status').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: "ajax_working_cities.php",
        type: "POST",
        data: {
          save_id: $('#save-city-btn').val(),
          efrom: $('#efrom').val(),
          eto: $('#eto').val(),
          estatus: $('#estatus').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)
          }
        
        }
      })
    })
  })

  // Deletion of cities

  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
      $("#global-loader").show();
      $.ajax({
        url: "ajax_working_cities.php",
        type: "POST",
        data: {
          delete_id: e,
        },
        success: function (response) {
          $("#global-loader").fadeOut(); 
          if (response == "Success") {
            $('#alert2').html('<span class="p-1 m-1 alert alert-success">Successfully Deleted</span><br/>').show()
            setTimeout(function () {
              location.reload();
            }, 2000)
          } else {
            $('#alert2').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t delete.</span><br/>').show()
            setTimeout(function () {
              $('#alert2').hide()
            }, 2000)
          }
        },
      })
    }
  }

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

  function edit(e) {
    $("#global-loader").show();
    $.ajax({
      url: "ajax_working_cities.php",
      type: "POST",
      dataType: "JSON",
      data: {
        city_id: e,
      },
      success: function (response) {
        $("#global-loader").fadeOut(); 
        var currentcity = response
        // $('#edit-city-name').val(currentcity.city).prop('selected', true)
        $('#efrom').val(currentcity.from).prop('selected', true)
        $('#eto').val(currentcity.to).prop('selected', true)
        $('#estatus').val(currentcity.status).prop('selected', true)
        $('#save-city-btn').val(currentcity.id)
      },
    })
  }


</script>