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

<!-- Modal -->
<div class="modal fade" id="add-residents" 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 Resident</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>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>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>LAST NAME</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" id="last_name">
                </div>
        		
        	</div>
        	<div class="col-sm-5">
                <div class="mb-3">
                <label>EMAIL</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" id="email">
                </div>
        		
        	</div>
        	<div class="col-sm-5">
                <div class="mb-3">
                <label>ADDRESS</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" id="address">
                </div>
        		
        	</div>
        	<div class="col-sm-5">
                <div class="mb-3">
                <label>CONTACT</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" id="contact">
                </div>
        		
        	</div>
        	<div class="col-sm-2">
                <div class="mb-3">
                <label>AGE</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" id="age">
                </div>
        		
        	</div>
        	<div class="col-sm-4">
                <div class="mb-3">
                <label>BIRHDAY</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>GENDER</label>
                <span class="text-danger">*</span>
                <select type="text" class="form-control" id="gender">
                    <option>--select--</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
                </div>
        		
        	</div>
        </div>
        <div id="massage"></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_residents()">Save <i class="fa fa-save"></i></button>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="update-residents" 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 Resident</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>FIRST NAME <span class="text-danger">*</span></label>
                <input type="hidden" id="resident_id">
                <input type="text" class="form-control" id="u_first_name">
                </div>
            </div>

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

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

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

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

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

            <div class="col-sm-4">
                <div class="mb-3">
                <label>BIRTHDAY <span class="text-danger">*</span></label>
                <input type="date" class="form-control" id="u_birthday">
                </div>
            </div>

            <div class="col-sm-4">
                <div class="mb-3">
                <label>GENDER <span class="text-danger">*</span></label>
                <select class="form-control" id="u_gender">
                    <option value="">--select--</option>
                    <option value="male">Male</option>
                    <option value="female">Female</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_residents()">Save <i class="fa fa-save"></i></button>
      </div>
    </div>
  </div>
</div>

<script>
   function edit_resident(
    resident_id,
    first_name,
    middle_name,
    last_name,
    email,
    address,
    contact,
    age,
    birthday,
    gender
){
    $("#resident_id").val(resident_id);
    $("#u_first_name").val(first_name);
    $("#u_middle_name").val(middle_name);
    $("#u_last_name").val(last_name);
    $("#u_email").val(email);
    $("#u_address").val(address);
    $("#u_contact").val(contact);
    $("#u_age").val(age);
    $("#u_birthday").val(birthday);

    // This line selects the correct gender in the dropdown
    $("#u_gender").val(gender.toUpperCase());

}

    function update_residents(){
        let u_res_id = $('#resident_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_email = $('#u_email').val();
         let u_address = $('#u_address').val();
        let u_contact = $('#u_contact').val();
        let u_age = $('#u_age').val();
        let u_birthday = $('#u_birthday').val();
        let u_gender = $('#u_gender').val();


        $.ajax({
        method: 'post',
        url: 'query/residents_query.php',
        data:{
            "updating_resident": 1,
            "u_res_id": u_res_id,
            "u_first_name": u_first_name,
            "u_middle_name": u_middle_name,
            "u_last_name": u_last_name,
            "u_email": u_email,
            "u_address": u_address,
            "u_contact": u_contact,
            "u_age": u_age,
            "u_birthday": u_birthday,
            "u_gender": u_gender
        },
        success: function(res){
            // alert(res)
            swal("Success!", "Data updated successfully!", "success");
            // $('#update-residents')modal('hide');
            load_residents();
        }
    });
    }

 

function delete_resident(resident_id){
    swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!"+resident_id,
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    $.ajax({
        method: 'post',
        url: 'query/residents_query.php',
        data:{
            "deleting_resident": 1,
            "resident_id": resident_id
        },
        success: function(res){
            load_residents();
        }
    });
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});
}
    function add_residents() {
    let first_name = $('#first_name').val().trim();
    let middle_name = $('#middle_name').val().trim();
    let last_name = $('#last_name').val().trim();
    let email = $('#email').val().trim();
     let address = $('#address').val().trim();
    let contact = $('#contact').val().trim();
    let age = $('#age').val().trim();
    let birthday = $('#birthday').val().trim();
    let gender = $('#gender').val();

    // Basic validation
    if (!first_name || !middle_name || !last_name || !email || !contact || !age || !birthday || !gender) {
        swal("Oops!", "You missed some input field!", "warning");
        return;
    }

    $.ajax({
        method: 'POST',
        url: 'query/residents_query.php',
        data: {
            adding_residents: 1,
            first_name: first_name,
            middle_name: middle_name,
            last_name: last_name,
            email: email,
            address: address,
            contact: contact,
            age: age,
            birthday: birthday,
            gender: gender
        },
        success: function (res) {
          load_residents(); // refresh data
          swal("Success!", "You adding 1 record!", "success");
        },
        error: function (xhr, status, error) {
            swal("Error!", error, "error");
        }
    });
}



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