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


<!-- Modal -->
<div class="modal fade" id="add-users" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Users <i class="fa fa-users"></i></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="row">
        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">FIRST NAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="first_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">MIDDLE NAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="middle_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">LAST NAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="last_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">USERNAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="username">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">ADDRESS</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="address">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">CONTACT</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="contact">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">AGE</label> <span class="text-danger">*</span>
        			<input type="number" class="form-control" id="age">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">GENDER</label> <span class="text-danger">*</span>
        			<select class="form-control" id="gender">
        				<option value="" selected>--select--</option>
        				<option value="male">Male</option>
        				<option value="female">Female</option>
        			</select>
        		</div>
        	</div>
        		<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">BIRTHDAY</label> <span class="text-danger">*</span>
        			<input type="date" class="form-control" id="birthday">
        		</div>
        	</div>
        		<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="firt_name">ROLE TYPE</label> <span class="text-danger">*</span>
        			<select  class="form-control" id="role_type">
        				<option value="" selected>--select--</option>
        				<option value="admin">Admin</option>
        				<option value="staff">Staff</option>
        				<option value="official">Officials</option>
        			</select>
        		</div>
        	</div>

        </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_users()">Save <i class="fa fa-save"></i></button>
      </div>
    </div>
  </div>
</div>

<!-- add modal end -->



<!-- Modal -->
<div class="modal fade" id="update-users" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Users <i class="fa fa-users"></i></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="row">
        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_first_name">FIRST NAME</label> <span class="text-danger">*</span>
        			<input type="hidden" id="u_user_id">
        			<input type="text" class="form-control" id="u_first_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_middle_name">MIDDLE NAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="u_middle_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_last_name">LAST NAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="u_last_name">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_username">USERNAME</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="u_username">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_address">ADDRESS</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="u_address">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_contact">CONTACT</label> <span class="text-danger">*</span>
        			<input type="text" class="form-control" id="u_contact">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_age">AGE</label> <span class="text-danger">*</span>
        			<input type="number" class="form-control" id="u_age">
        		</div>
        	</div>

        	<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_gender">GENDER</label> <span class="text-danger">*</span>
        			<select class="form-control" id="u_gender">
        				<option value="" selected>--select--</option>
        				<option value="male">Male</option>
        				<option value="female">Female</option>
        			</select>
        		</div>
        	</div>
        		<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_birthday">BIRTHDAY</label> <span class="text-danger">*</span>
        			<input type="date" class="form-control" id="u_birthday">
        		</div>
        	</div>
        		<div class="col-sm-4">
        		<div class="mb-3">
        			<label for="u_role_type">ROLE TYPE</label> <span class="text-danger">*</span>
        			<select  class="form-control" id="u_role_type">
        				<option value="" selected>--select--</option>
        				<option value="admin">Admin</option>
        				<option value="staff">Staff</option>
        				<option value="official">Officials</option>
        			</select>
        		</div>
        	</div>

        </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_users()">Save <i class="fa fa-save"></i></button>
      </div>
    </div>
  </div>
</div>
<script>

	function update_users(){
		let u_user_id = $("#u_user_id").val();
		let u_first_name = $("#u_first_name").val();
		let u_middle_name = $("#u_middle_name").val();
		let u_last_name = $("#u_last_name").val();
		let u_username = $("#u_username").val();
		let u_address = $("#u_address").val();
		let u_contact = $("#u_contact").val();
		let u_age = $("#u_age").val();
		let u_gender = $("#u_gender").val();
		let u_birthday = $("#u_birthday").val();
		let u_role_type = $("#u_role_type").val();

		$.ajax({
			method: 'post',
			url: 'query/users_query.php',
			data:{
				"updating_officials": 1,
				"u_user_id": u_user_id,
				"u_first_name": u_first_name,
				"u_middle_name": u_middle_name,
				"u_last_name": u_last_name,
				"u_username": u_username,
				"u_address": u_address,
				"u_contact": u_contact,
				"u_age": u_age,
				"u_gender": u_gender,
				"u_birthday": u_birthday,
				"u_role_type": u_role_type
			},
			success: function(res){
				swal("Success!", "Data Update successfully!", "success");
				load_officials();
			}
		});

	}

	function edit_users(user_id,
		first_name,
		middle_name,
		last_name,
		username,
		address,
		contact,
		age,
		gender,
		birthday,
		role_type){
		$("#u_user_id").val(user_id);
		$("#u_first_name").val(first_name);
		$("#u_middle_name").val(middle_name);
		$("#u_last_name").val(last_name);
		$("#u_username").val(username);
		$("#u_address").val(address);
		$("#u_contact").val(contact);
		$("#u_age").val(age);
		$("#u_gender").val(gender);
		$("#u_birthday").val(birthday);
		$("#u_role_type").val(role_type);
	}


	function add_users(){

		let first_name = $('#first_name').val();
		let middle_name = $('#middle_name').val();
		let last_name = $('#last_name').val();
		let username = $('#username').val();
		let address = $('#address').val();
		let contact = $('#contact').val();
		let age = $('#age').val();
		let gender = $('#gender').val();
		let birthday = $('#birthday').val();
		let role_type = $('#role_type').val();

		if (
			first_name ==="" ||
			middle_name ==="" ||
			last_name ==="" ||
			username ==="" ||
			address ==="" ||
			contact ==="" ||
			age ==="" ||
			gender ==="" ||
			birthday ==="" ||
			role_type ===""

			) {
			swal("Oops!", "You missed some empty field!", "warning");
			return;

		}

		$.ajax({
			method: 'post',
			url: 'query/users_query.php',
			data:{
				"adding_officials": 1,
				"first_name": first_name,
				"middle_name": middle_name,
				"last_name": last_name,
				"username": username,
				"address": address,
				"contact": contact,
				"age": age,
				"gender": gender,
				"birthday": birthday,
				"role_type": role_type
			},
			success: function(res){
				swal("Success!", res+ "!", "success");
				// alert(res)
			load_officials();
			}
		});

	}

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