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

$package = $conn->query("SELECT * FROM package_types WHERE parent_id=0");
$editpackage = $conn->query("SELECT * FROM package_types WHERE parent_id=0");
?>

<!-- Page content -->
<div class="container-fluid pt-8">
  <div class="page-header mt-0 p-3">
    <h3 class="mb-sm-0">PACKAGE CATEGORYs</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="card-body">
          <div class="grid-margin">
            <div class="">
              <div class="table-responsive">
                <table id="examples" class="table card-table table-vcenter text-nowrap  align-items-center">
                  <thead>
                    <tr>
                      <th style="width: 80px">S.No</th>
                      <th>Category Name</th>
                      <th>Sub Category</th>
                      <th style="width: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php
                    $show = $conn->query("SELECT * FROM package_types");
                    $i = 1;
                    while ($list = $show->fetch_assoc()) {
                      $subcatdatasubcat = $conn->query("SELECT * FROM package_types WHERE id='" . $list['parent_id'] . "'");
                      $subcat = $subcatdatasubcat->fetch_assoc();
                      ?>
                      <tr>
                        <td><?= $i++ ?></td>
                        <td><?= $list['type'] ?></td>
                        <td><?= $subcat['type'] ?></td>
                        <td><button type="button" id="edit-btn" name="edit" class="btn btn-success"
                            onclick="edit(<?= $list['id'] ?>)" data-toggle="modal" data-target="#edit-category"
                            value="<?= $list['id'] ?>"><i class="fa fa-edit btn-success"></i></button>
                          <button type="button" id="del" name="del" class="btn btn-danger" onclick="del(<?= $list['id'] ?>)"
                            value="<?= $list['id'] ?>">
                            <i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                    <?php } ?>
                  </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 Category <span id="alert"></span></h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <label>Select Package Category</label>
            <select class="form-control" name="parent_id" id="add-parent-id">
              <option value="0">Select</option>
              <?php while ($row = $package->fetch_assoc()) { ?>
                <option value="<?= $row['id'] ?>"><?= $row['type'] ?></option>
              <?php } ?>
            </select>
          </div>
          <div class="col-md-12">
            <label>Category Name</label>
            <input type="text" class="form-control" name="add-category-name" id="add-category-name" 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-category-btn" id="add-category-btn" class="btn btn-primary">Add Data</button>
        </div>
      </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 Package Category <span id="alert1"></span></h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <label>Select Package Category</label>
            <select class="form-control" name="cat_id" id="save-parent-id">
              <option value="0">Select</option>
              <?php while ($row = $editpackage->fetch_assoc()) { ?>
                <option value="<?= $row['id'] ?>"><?= $row['type'] ?></option>
              <?php } ?>
            </select>
          </div>
          <div class="col-md-12">
            <label>Type</label>
            <input type="text" class="form-control" name="edit-category-name" id="edit-category-name" required>
          </div>
          <br />
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="button" name="save-category-btn" id="save-category-btn" class="btn btn-primary">Save
              Changes</button>
          </div>
        </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-category-btn').click(function () {
      $.ajax({
        url: "ajax_package_category.php",
        type: "POST",
        data: {
          parent_id: $('#add-parent-id').val(),
          category_name: $('#add-category-name').val(),
        },
        success: function (response) {
          if (response == "Success") {
            $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show()
            setTimeout(function () {
              $('#alert').hide()
            }, 1000)
            $('#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)
          }
          output();

        }
      })
    })

    // To save changes in edit modal    

    $('#save-category-btn').click(function () {
      $.ajax({
        url: "ajax_package_category.php",
        type: "POST",
        data: {
          save_id: $('#save-category-btn').val(),
          save_category_name: $('#edit-category-name').val(),
          save_parent_id: $('#save-parent-id').val(),
        },
        success: function (response) {
          if (response == "Success") {
            $('#alert1').html('<span class="p-1 m-1 alert alert-success">Successfully Updated</span>').show()
            setTimeout(function () {
              $('#alert1').hide()
            }, 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)
          }
          output();
        }
      })
    })
  })

  // To show all the categories in main menu

  function output() {
    var inHTML = '';
    var i = 1;
    $.getJSON("ajax_package_category?show_categories=1", function (data) {
      $.each(data, function (key, item) {
        inHTML +=
          `<tr><td>${i}</td><td id="category${i}">${item.type}</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);
      new DataTable('#examples', {
        layout: {
          topStart: {
            buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5']
          }
        },
        "stateSave": true,
        dom: 'lBfrtip',
        "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']],
        ordering: false,
      });
    })
  }

  // Deletion of categories

  function del(e) {
    var verify = confirm("Do you really want to delete!!!");
    if (verify) {
      $.ajax({
        url: "ajax_package_category.php",
        type: "POST",
        data: {
          delete_id: e,
        },
        success: function (response) {
          if (response == "Success") {
            $('#alert2').html('<span class="p-1 m-1 alert alert-success">Successfully Deleted</span><br/>').show()
            setTimeout(function () {
              $('#alert2').hide()
            }, 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)
          }
          output();
        },
      })
    }
  }

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

  function edit(e) {
    $.ajax({
      url: "ajax_package_category.php",
      type: "POST",
      dataType: "JSON",
      data: {
        cab_type_id: e,
      },
      success: function (response) {
        var currentCategory = response
        $('#edit-category-name').val(currentCategory.type)
        $('#save-parent-id').val(currentCategory.parent_id)
        $('#save-category-btn').val(currentCategory.id)
      },
    })
  }
  $(function () {
    $('#update_drivers_data').validate({
      rules: {
        'add-notification-name': {
          required: true,
        }
      }
    });
  }); 
</script>