<?php
session_start();
require_once'lib/config.php';
require_once 'header.php';
require_once 'navbar.php';
$sql="select * from cab_types";
$result=$conn->query($sql);
if($result->num_rows>0)
{
  while($row=$result->fetch_assoc())
  {
    $cab_types[]=$row;
    $cab_types1[]=$row;
  }
}
?>
<link rel="stylesheet" type="text/css" href="multiselect/css/bootstrap-multiselect.css">
<style>
  .multiselect-container{
    transform: inherit!important;
    width: 100%;
  }
  .multiselect-selected-text{
    float: left;
  }
  .btn-group{
    width: 100%;
  }
</style>
<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">HILL STATION ROUTE ONEWAY</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 table-bordered">
                          <thead>
                            <tr>
                              <th style="width: 80px">S.No</th>
                              <th>City</th>
                              <th>Cab Type</th>
                              <th>Price/Km</th>
                              <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                            </tr>
                          </thead>
                          <?php 
                          $q = "select * from no_return_cities where type=1 and low_price=0";
                          $query = mysqli_query($conn,$q);
                          $i=1;
                          while($row = mysqli_fetch_array($query)) {
                            $city = explode(":", $row['city']);
                            ?>
                            <tr>
                              <td><?php echo $i ?></td>
                              <td id="city${i}"><?php echo $city[0]; ?> To <?php echo $city[1]; ?></td>
                              <td id="city${i}" class="cab_types"><?php echo $row['cab_type_id'] ?></td>
                              <td id="city${i}"><?php echo $row['price_km'] ?></td>
                              <td><button type="button" id="edit-btn<?php echo $row['id'] ?>" cab="<?php echo $row['cab_type_id'] ?>" name="edit" class="btn btn-success" onclick="edit(<?php echo $row['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 $row['id'] ?>)" value="${item.id}" ><i class="fa fa-trash"></i></button>
                              </td>
                            </tr>
                            <?php $i++; }  ?>

                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="https://maps.google.com/maps/api/js?key=<?=$google_key?>&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
          <script>
    // $(document).ready(function() {
    // $("#lat_area").addClass("d-none");
    // $("#long_area").addClass("d-none");
    // });
            google.maps.event.addDomListener(window, 'load', initialize);
            function initialize() {
              var options = {
                        types:'cities',
                        componentRestrictions: {country: 'ind'}
                      };
            var input = document.getElementById('add-city-name');
            var from = document.getElementById('from_city');
            var edit_from = document.getElementById('from_cities');
            var edit_to = document.getElementById('edit-city-name');
            var autocomplete = new google.maps.places.Autocomplete(input, options);
            var autocomplete1 = new google.maps.places.Autocomplete(from, options);
            var autocomplete2 = new google.maps.places.Autocomplete(edit_from, options);
            var autocomplete3 = new google.maps.places.Autocomplete(edit_to, options);
            var result = autocomplete.getPlace();
        // for(var i = 0; i < result.address_components.length; i += 1) {
        //   var addressObj = result.address_components[i];
        //   for(var j = 0; j < addressObj.types.length; j += 1) {
        //     if (addressObj.types[j] === 'country') {
        //       console.log(addressObj.types[j]); // confirm that this is 'country'
        //       console.log(addressObj.long_name); // confirm that this is the country name
        //     }
        //   }
        // }
          }
        </script>
        <style>
          .pac-container {
            z-index: 10000 !important;
          }
        </style>
        <!--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 City <span id="alert"></span></h4>
              </div>
              <form method="post" action="no_return_cities_ajax.php">
                <div class="modal-body">
                  <div class="row">
                   <div class="col-md-12">
                    <label>From City</label>
                    <input type="hidden" name="define" value="1">
                    <input type="text" class="form-control" name="from_city" id="from_city" required="required"
                    autofocus>
                  </div>
                  <div class="col-md-12">
                    <label>To City</label>
                    <input type="text" class="form-control" name="city_name" id="add-city-name" required="required"
                    autofocus>
                  </div>
                  <div class="col-md-12">
                   <label> Type :</label><br>
                   <select class="select2 form-control" name="type[]" multiple>
                    <?php
                    if(isset($cab_types))
                    {
                     $x=1;
                     foreach($cab_types as $data)
                     {
                       ?>
                       <option value="<?=$data['type'];?>"><?=$data['type'];?></option>
                       <?php
                     }
                   }
                   ?>
                 </select>
               </div>
               <div class="col-md-12">
                <label>Price/Km</label>
                <input type="text" class="form-control" placeholder="Enter Price" name="city_price" id="add-city-price" 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"></button> -->
              <input type="submit" name="add_data" class="btn btn-primary" value="Add Data">
            </div>
          </div>
        </form>
      </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 City <span id="alert1"></span></h4>
        </div>
        <form method="post" action="no_return_cities_ajax.php">
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <label>From City</label>
                <input type="hidden" name="define" value="1">
                <input type="hidden" name="save_id" id="save-city-btn">
                <input type="text" class="form-control" name="from_city" id="from_cities" required="required"
                autofocus>
              </div>
              <div class="col-md-12">
                <label>To City</label>
                <input type="text" class="form-control" name="edit-city-name" id="edit-city-name" required="required"
                autofocus>
              </div>
              <div class="col-md-12">
               <label> Type :</label>
               <select class="select2 get_data form-control" name="type[]" multiple>

               </select>
             </div>
             <div class="col-md-12">
              <label>Price/Km</label>
              <input type="number" class="form-control" name="edit-city-price" id="edit-city-price" required="required"
              autofocus>
            </div>
          </div>
          <br/>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <input type="submit" name="submit" class="btn btn-primary" value="save Changes">
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- /.modal-content -->
</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: "no_return_cities_ajax.php",
    //     type: "POST",
    //     data: {
    //       from: $('#from_city').val(),
    //       city_name: $('#add-city-name').val(),
    //       city_price: $('#add-city-price').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 () {
    //           $('#alert').hide()
    //         }, 1000)
    //         $('#add-city-name').val('')
    //         $('#add-city-price').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)
    //       }
    //       output();

    //     }
    //   })
    // })
    // To save changes in edit modal    
    // $('#save-city-btn').click(function () {
    //     $("#global-loader").show();
    //   $.ajax({
    //     url: "no_return_cities_ajax.php",
    //     type: "POST",
    //     data: {
    //       save_id: $('#save-city-btn').val(),
    //       from_city: $('#from_cities').val(),
    //       save_city_name: $('#edit-city-name').val(),
    //       save_city_price: $('#edit-city-price').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 () {
    //           $('#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("no_return_cities_ajax?show_cities=1", function (data) {
  //     $.each(data, function (key, item) {
  //       inHTML +=
  //         `<tr><td>${i}</td>
  //         <td id="city${i}">${item.city}</td>
  //         <td id="city${i}">${item.price_km}</td>
  //         <td><button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(${item.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(${item.id})" value="${item.id}" ><i class="fa fa-trash"></i></button>
  //         </td></tr>`;
  //       i++;
  //     })
  //     $('#tbody').html(inHTML);
  //     $('#example').DataTable();
  //   })
  // }
  // Deletion of cities
  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
      $("#global-loader").show();
      $.ajax({
        url: "no_return_cities_ajax.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 modal
  function edit(e) {
    // cab=$('#edit-btn'+e).attr('cab');
    //   alert(cab);
    $("#global-loader").show();
    $.ajax({
      url: "no_return_cities_ajax.php",
      type: "POST",
      data: {
        city_id: e,
      },
      success: function (response) {
        $("#global-loader").fadeOut(); 

        console.log(response);
        var alldata = $.parseJSON(response);
        $('#from_cities').val(alldata.from);
        $('#edit-city-name').val(alldata.to);
        $('#edit-city-price').val(alldata.price);
        $('#save-city-btn').val(alldata.id);
        $('.get_data').html(alldata.output);

      },
    })
  }

</script>

<script src="assets/js/custom.js"></script>
<script src="assets/js/datatable.js"></script>