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

$sql="select id,type from cab_types";
$result=$conn->query($sql);
if($result->num_rows>0)
{
  while($row=$result->fetch_assoc())
  {
   $cab_types[]=$row;
 }
}
?>

<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">DISTANCE FARE</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 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>Distance KM From</th>
                      <th>Distance KM To</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>


<!--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>
      <div class="modal-body">
        <form method="post" id="add_distance">
          <div class="row">
            <div class="col-md-6">
              <label>Distance KM From</label>
              <input type="number" class="form-control" name="km_from" required>
            </div>
            <div class="col-md-6">
              <label>Distance KM To</label>
              <input type="number" class="form-control" name="km_to" required>
            </div>

            <?php
            if(isset($cab_types)){
              $i=1;
              foreach($cab_types as $cab_type){ ?>
                <div class="col-md-12">
                  <label> Amount(<?=$cab_type['type']?>):</label>
                  <input type="text" class="form-control" name="price[]" required>
                  <input type="hidden" class="form-control" name="cab_type_id[]" value="<?=$cab_type['id'];?>" required>
                </div>
                <div class="col-md-12">
                  <label> Extra Amount(<?=$cab_type['type']?>):</label>
                  <input type="text" class="form-control" name="extra_price[]" required>
                </div>
                <?php $i++;} } ?>
              </div>
              <br/>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="submit" name="submit" value="submit" class="btn btn-primary">Add Data</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    <!--Edit Modal-->
    <div class="modal fade" id="edit">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="card-header">
            <h4 style="text-align: left;">Edit <span id="alert1"></span></h4>
          </div>
          <div class="modal-body">
            <form method="post" id="edit_distance">
              <div class="row">
                <div class="col-md-12">
                  <input type="hidden" name="save_id" id="save_id">
                  <label>Distance KM From</label>
                  <input type="number" class="form-control" id="edit_km_from" name="edit_km_from" required>
                </div>
                <div class="col-md-12">
                  <label>Distance KM To</label>
                  <input type="number" class="form-control" id="edit_km_to" name="edit_km_to" required>
                </div>
                <?php
                if(isset($cab_types)){
                  $i=1;
                  foreach($cab_types as $cab_type){ ?>
                    <div class="col-md-12">
                      <label> Amount(<?=$cab_type['type']?>):</label>
                      <input type="text" class="form-control" id="price<?=$i;?>" name="price[]" required>
                      <input type="hidden" class="form-control" id="cab_type_id<?=$i;?>" name="cab_type_id[]" value="<?=$cab_type['id'];?>" required>
                    </div>
                    <div class="col-md-12">
                      <label> Extra Amount(<?=$cab_type['type']?>):</label>
                      <input type="text" class="form-control" id="extra_price<?=$i;?>" name="extra_price[]" required>
                    </div>
                    <?php $i++;} } ?>
                  </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>
                </form>
              </div>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <?php
        require_once 'footer.php';
        require_once 'jslinks.php';
        ?>
        <script>
          $(document).ready(function () {
            output();

    // Adding a distance in add modal
            $('#add_distance').submit(function (e) {
              e.preventDefault();
              $("#global-loader").show();
              $.ajax({
                url: "ajax_distance_fare.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function (response) {
                  $("#global-loader").fadeOut();
                  if (response == "Success") {
                    $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show();

                    $("#add-category-modal").modal('toggle');

                    setTimeout(function () {
                     location.reload();
                   }, 1000)
                    $('#add_distance')[0].reset();

                  } 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    

            $('#edit_distance').submit(function (e) {
              e.preventDefault();
              $("#global-loader").show();
              $.ajax({
                url: "ajax_distance_fare.php",
                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();

                    $("#edit-category").modal('toggle');

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

  // To show all the cities in main menu

          function output() {
            var inHTML = '';
            var i = 1;
            $.getJSON("ajax_distance_fare?show_data=1", function (data) {
              $.each(data, function (key, item) {
                inHTML +=
                `<tr>
                <td>${i}</td>
                <td id="city${i}">${item.km_from}</td>
                <td id="city${i}">${item.km_to}</td>
                <td><button type="button" id="edit-btn" name="edit" class="btn btn-success" value="${item.id}"><a href="edit-distance-fare?id=${item.id}"><i class="fa fa-edit btn-success"></i></a></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({
                layout: {
                  topStart: {
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                  }
                },
                "stateSave": true,
                dom: 'lBfrtip',
            "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']]
              });
            })
          }

  // Deletion of cities

          function del(e) {
            var verify = confirm("Do you really want to delete!!!");
            if (verify) {
              $("#global-loader").show();
              $.ajax({
                url: "ajax_distance_fare.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) {
            var i=1;
            $("#global-loader").show();
            $.ajax({
              url: "ajax_distance_fare.php",
              type: "POST",
              dataType: "JSON",
              data: {
                distance_id: e,
              },
              success: function (response) {
                $("#global-loader").fadeOut(); 
                $('#edit_km_from').val(response.km_from)
                $('#edit_km_to').val(response.km_to)
                $('#price'+i+1).val(response.price)
                $('#extra_price'+i+1).val(response.extra_price)
                $('#cab_type_id'+i+1).val(response.cab_typeid)
                $('#save_id').val(response.id)
              },
            })
          }


        </script>