<?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;
  }
}

$sql="select * from vendor_login,vendor_profile where vendor_profile.vendor_id=vendor_login.id order by vendor_login.contact";
$result=$conn->query($sql);
if($result->num_rows>0)
{
  while($row=$result->fetch_assoc())
  {
    $vendors[]=$row;
  }
}
?>
<style>
  .modal-body select{
    height: 46px!important;
  }
  .badge-warning {
    color: #212529;
    background-color: #ffc107;
}
.badge-danger {
    color: #fff;
    background-color: #dc3545;
}
.badge-success {
    color: #fff;
    background-color: #28a745;
}
#tbody .badge{
    font-size: 12px;
    padding: 10px 20px;
}
</style>
<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">AVAILABLE CABS</h3>
    <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-category-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="">
          <div class="grid-margin">
            <div class="">
              <div class="table-responsive p-3">
                <table class="table text-center card-table table-vcenter text-nowrap  align-items-center" id="example">
                  <thead>
                    <tr>
                      <th>S.No</th>
                      <th>Vendor Name</th>
                      <th>From</th>
                      <th>To</th>
                      <th>Cab Type</th>
                      <th>Date</th>
                      <th>Time</th>
                      <th>Status</th>
                      <th>Message</th>
                      <th>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-category-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Add Available Cabs <span id="alert"></span></h4>
      </div>
      <div class="modal-body">
        <form id="add" enctype="multipart/form-data">
          <div class="row">
            <div class="col-md-12">
              <label>Cab Type</label>
              <select class="select2 form-control w-100" name="cab_type" required>
                <?php foreach($cab_types as $cab){ ?>
                 <option value="<?=$cab['type'];?>"><?=$cab['type']?></option>
               <?php } ?>
             </select>
           </div>
           <div class="col-md-12 mt-3">
            <label>Select Vendor</label>
            <select class="select2 form-control w-100" name="vendor_id" required>
              <?php foreach($vendors as $vendor){ ?>
               <option value="<?=$vendor['id'];?>"><?=$vendor['full_name'].' - '.$vendor['contact'];?></option>
             <?php } ?>
           </select>
         </div>
           <div class="col-md-12 mt-3">
            <label>Status</label>
            <select class="form-control w-100" name="status" required>
               <option value="pending">Pending</option>
               <option value="close">Close</option>
               <option value="cancel">Cancel</option>
           </select>
         </div>
         <div class="col-md-12 mt-3">
          <label>From</label>
          <input type="text" class="form-control" name="from" id="startaddress" required>
        </div>
        <div class="col-md-12 mt-3">
          <label>To</label>
          <input type="text" class="form-control" name="to" id="endaddress" required>
        </div>

        <div class="col-md-6 mt-3">
          <label>Date</label>
          <input type="date" class="form-control" name="date" required>
        </div>
        <div class="col-md-6 mt-3">
          <label>Time</label>
          <input type="time" class="form-control" name="time" required>
        </div>

        <div class="col-md-12 mt-3">
          <label>Message</label>
          <textarea class="form-control" rows="3" name="remark"></textarea>
        </div>


      </div>
      <br/>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="submit" name="add-category-btn" id="add-category-btn" 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-category">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 style="text-align: left">Edit Available Cabs <span id="alert1"></span></h4>
      </div>
      <div class="modal-body">
        <form id="edit_cartype" method="POST" enctype="multipart/form-data">
          <div class="row">
            <div class="col-md-12">
              <label>Cab Type</label>
              <input type="hidden" name="save_id" id="save_id">
              <select class="select2 form-control w-100" name="cab_type" id="cab_type" required>
                <?php foreach($cab_types as $cab){ ?>
                 <option value="<?=$cab['type'];?>"><?=$cab['type']?></option>
               <?php } ?>
             </select>
           </div>
           <div class="col-md-12 mt-3">
            <label>Select Vendor</label>
            <select class="select2 form-control w-100" id="vendor_id" name="edit_vendor_id" required>
              <?php foreach($vendors as $vendor){ ?>
               <option value="<?=$vendor['id'];?>"><?=$vendor['full_name'].' - '.$vendor['contact'];?></option>
             <?php } ?>
           </select>
         </div>
           <div class="col-md-12 mt-3">
            <label>Status</label>
            <select class="form-control w-100" name="status" id="status" required>
               <option value="pending">Pending</option>
               <option value="close">Close</option>
               <option value="cancel">Cancel</option>
           </select>
         </div>
         <div class="col-md-12 mt-3">
          <label>From</label>
          <input type="text" class="form-control" name="from" id="from" required>
        </div>
        <div class="col-md-12 mt-3">
          <label>To</label>
          <input type="text" class="form-control" name="to" id="to" required>
        </div>

        <div class="col-md-6 mt-3">
          <label>Date</label>
          <input type="date" class="form-control" name="date" id="date" required>
        </div>
        <div class="col-md-6 mt-3">
          <label>Time</label>
          <input type="time" class="form-control" name="time" id="time" required>
        </div>

        <div class="col-md-12 mt-3">
          <label>Message</label>
          <textarea class="form-control" rows="3" name="remark" id="remark"></textarea>
        </div>
      </div>
      <br/>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="submit" name="edit-category-btn" id="add-category-btn" class="btn btn-primary">Save Changes</button>
      </div>
    </form>
  </div>
</div>

<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<?php
require_once 'footer.php';
require_once 'jslinks.php';
?>

<script>
  $(document).ready(function () {
    output();



    // Adding a category in add modal

    $('#add').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_available_cabs.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()
            
            setTimeout(function () {
              location.reload();
            }, 2000)
            $('#add-category-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    
    $('#edit_cartype').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_available_cabs.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()
            
            setTimeout(function () {
              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 categories in main menu

  function output() {
    var inHTML = '';
    var i = 1;
    $.getJSON("ajax_available_cabs?show=1", function (data) {
      $.each(data, function (key, item) {
        if (item.status=='pending') {
          var status='<span class="badge badge-warning">Pending</span>';
        }else if(item.status=='close'){
          var status='<span class="badge badge-success">Close</span>';
        }else{
          var status='<span class="badge badge-danger">Cancel</span>';
        }
        inHTML +=
        `<tr>
        <td>${i}</td>
        <td>${item.full_name}</td>
        <td>${item.from}</td>
        <td>${item.to}</td>
        <td>${item.cab_type}</td>
        <td>${item.date}</td>
        <td>${item.time}</td> 
        <td>${status}</td> 
        <td>${item.remark} </td> 
        <td>
        <button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(${item.id})" data-toggle="modal" data-target="#edit-category" 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({
            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 categories

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

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

function edit(e) {
 $("#global-loader").show();
 $.ajax({
  url: "ajax_available_cabs.php",
  type: "POST",
  dataType: "JSON",
  data: {
    available_cab_id: e,
  },
  success: function (response) { 
    $("#cab_type").val(response.cab_type).select2();
    $("#vendor_id").val(response.vendor_id).select2();
    $('#from').val(response.from);
    $('#to').val(response.to);
    $('#date').val(response.date);
    $('#time').val(response.time);
    $('#status').val(response.status);
    $('#remark').val(response.remark);
    $('#save_id').val(response.id);

  },
})
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=
<?=$google_key;?>"></script>
<script>
 function AutoComplete() {

  var options = {
    types:'cities',
    componentRestrictions: {country: "in"}
  };
  var input1 = document.getElementById('startaddress');
  new google.maps.places.Autocomplete(input1,options);
  var input2 = document.getElementById('endaddress');
  new google.maps.places.Autocomplete(input2,options);

  var input3 = document.getElementById('from');
  new google.maps.places.Autocomplete(input3,options);
  var input4 = document.getElementById('to');
  new google.maps.places.Autocomplete(input4,options);
}

google.maps.event.addDomListener(window, 'load', AutoComplete);
</script>