<?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 ROUND TRIP</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_round_cities where type=1 and low_price!=''";
                          $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}"><?php echo $row['cab_type_id'] ?></td>
                              <td id="city${i}"><?php echo $row['low_price'] ?></td>
                              <td><button type="button" id="edit-btn" 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>
            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();

          }
        </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 <span id="alert"></span></h4>
              </div>
              <form method="post" action="ajax_low_price_roundway.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 <span id="alert1"></span></h4>
        </div>
        <form method="post" action="ajax_low_price_roundway.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>
  
  // Deletion of cities

  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
      $("#global-loader").show();
      $.ajax({
        url: "ajax_low_price_roundway.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) {
    $("#global-loader").show();
    $.ajax({
      url: "ajax_low_price_roundway.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>