<div class="card">
	<div class="card-header">
		<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#add-department"><i class="fa fa-plus-circle"></i> Add Record</button>
	</div>
	<div class="card-body">
		<div class="table-responsive">
			<div id="table_department"></div>
		</div>
	</div>
</div>


<!-- Modal -->
<div class="modal fade" id="add-department" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Department</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<div class="mb-3">
      		<label>DEPARTMENT NAME</label>
      		<input type="text" class="form-control" id="department_name">
      	</div>
      	<div class="mb-3">
      		<label>DESCRIPTION</label>
      		<textarea type="text" class="form-control" id="description"></textarea>
      	</div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="add_department()">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="update-department" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Department</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<div class="mb-3">
      		<label>DEPARTMENT NAME</label>
      		<input type="hidden" id="d_id">
      		<input type="text" class="form-control" id="u_department_name">
      	</div>
      	<div class="mb-3">
      		<label>DESCRIPTION</label>
      		<textarea type="text" class="form-control" id="u_description"></textarea>
      	</div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="update_department()">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
	function update_department(){
		let d_id = $('#d_id').val();
		let u_department_name = $('#u_department_name').val();
		let u_description = $('#u_description').val();
			$.ajax({
					method: 'post',
					url: 'query/department_query.php',
					data:{
						"updating_department": 1,
						"d_id": d_id,
						"u_department_name": u_department_name,
						"u_description": u_description

					},
					success: function(res){
						swal({
						  title: "Success!",
						  text: "Data updated successfully!",
						  icon: "success",
						});
						load_departments();
						$('#update-department').modal('hide');
					}
				});
	}

	function edit_deparment(department_id, department_name, description){
		$("#d_id").val(department_id);
		$("#u_department_name").val(department_name);
		$("#u_description").val(description);
	}

function delete_department(department_id){
	swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this data file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
  	$.ajax({
		method: 'post',
		url: 'query/department_query.php',
		data:{
			"deleting_department": 1,
			"department_id": department_id

		},
		success: function(res){
			load_departments();
		}
	});
    swal("Poof! Your imaginary data has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your data file is safe!");
  }
});
	
}

function add_department() {
	let department_name = $('#department_name').val();
	let description = $('#description').val();

	if (
		department_name === "" ||
		description === "") {
		swal("Oops!", "You have missed some input field!", "warning");
		return;
	}

	$.ajax({
		method: 'post',
		url: 'query/department_query.php',
		data:{
			"adding_department": 1,
			"department_name": department_name,
			"description": description
		},
		success: function(res){
			swal("Success!", "You Added 1 data!", "success");
			load_departments();
		}
	});
}

	load_departments();
	function load_departments(){
		$.ajax({
			method: 'post',
			url: 'query/department_query.php',
			data:{
				"loading_departments": 1
			},
			success: function(res){
				$('#table_department').html(res);
				$('#mytable').DataTable({
					columnControl: [{
				        extend: 'order',
				        statusOnly: true
				    }],
				    ordering: {
				        indicators: false
				    }
				})
			}
		});
	}
</script>