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

$sql= "SELECT * FROM amenities ORDER BY id DESC";
$result=$conn->query($sql);
?>

<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0 text-uppercase">Amenities</h3>
    <!-- <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-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>Note</th>
                      <th>Price</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php
                    $i=1;
                    while($row=$result->fetch_assoc()){
                     ?>
                     <tr>
                      <td><?=$i;?></td>
                      <td><?=$row['note']?></td>
                      <td><?=$row['price']?></td>
                      <td>
                        <?php if($row['status']==1){
                          echo '<label class="badge badge-success">Active</label>';
                        }else{
                          echo '<label class="badge badge-danger">Disabled</label>';
                        }
                        ?>
                      </td>
                      <td>
                        <button type="button" id="edit-btn" name="edit" class="btn btn-success" onclick="edit(<?=$row['id']?>)" data-toggle="modal" data-target="#edit-category" value="<?=$row['id']?>"><i class="fa fa-edit btn-success"></i></button>
                        <button type="button" class="btn btn-danger" value="<?=$row['id']?>" onclick="del(<?=$row['id']?>)"><i class="fa fa-trash"></i></button>
                      </td>
                    </tr>
                    <?php $i++;} ?>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!--Add Modal-->
<div class="modal fade" id="add-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card-header">
        <h4 style="text-align: left;">Add Amenities <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 mt-3">
            <label>Note</label>
            <textarea class="form-control" rows="3" name="note" required></textarea>
          </div>
          <div class="col-md-12 mt-3">
            <label>Price</label>
            <input type="number" class="form-control" name="price" required>
          </div>
          <div class="col-md-12 mt-3">
            <label>Status</label>
            <select class="form-control" name="status">
              <option value="1">Active</option>
              <option value="0">Disabled</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="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-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 Amenities <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 mt-3">
            <label>Note</label>
            <input type="hidden" name="save_id" id="save_id">
            <textarea class="form-control" id="note" rows="3" name="edit_note" required></textarea>
          </div>
          <div class="col-md-12 mt-3">
            <label>Price</label>
            <input type="number" id="price" class="form-control" name="price" required>
          </div>
          <div class="col-md-12 mt-3">
            <label>Status</label>
            <select class="form-control" name="status" id="status">
              <option value="1">Active</option>
              <option value="0">Disabled</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="submit" 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><script src="assets/js/custom.js"></script>
<script src="assets/js/datatable.js"></script>
<script>
  $(document).ready(function () {

    //  add modal

    $('#add').submit(function (e) {
      e.preventDefault();
      $("#global-loader").show();
      $.ajax({
        url: "ajax_amenities.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function (response) {
          $("#global-loader").fadeOut();
          if (response != "Something Wrong") {
            $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show();
            
            setTimeout(function () {
              location.reload();
            }, 2000)

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

  // Deletion of categories

  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
     $("#global-loader").show();
     $.ajax({
      url: "ajax_amenities.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()
            location.reload();
          }, 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_amenities.php",
    type: "POST",
    dataType: "JSON",
    data: {
      request_id: e,
    },
    success: function (response) { 
      $("#status").val(response.status);
      $('#price').val(response.price);
      $('#note').val(response.note);
      $('#save_id').val(response.id);

    },
  })
 }
</script>