<div class="modal fade" id="add-beneficiaries<?= htmlentities($user_session); ?>">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Manage Beneficiaries</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="POST">
                  <div id="msgs_tblbeneficiaries"></div>
                    <div class="row">

                        <div class="col-4">
                            <div class="form-group">
                                <label>LastName:</label>
                                <input type="text" class="form-control" id="lastname" alt="lastname" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label>FirstName:</label>
                                <input type="text" class="form-control" id="firstname" alt="firstname" autocomplete="off">
                            </div>
                        </div>
                        
                         <div class="col-4">
                            <div class="form-group">
                                <label>MiddleName:</label>
                                <input type="text" class="form-control" id="middlename" alt="middlename" autocomplete="off">
                            </div>
                        </div>
                        
                    </div>

                    <div class="row">


                        <div class="col-2">
                            <div class="form-group">
                                <label>Age:</label>
                                <input type="number" min="1" id="age" alt="age" class="form-control" name=""  autocomplete="off">
                            </div>
                        </div>

                        <div class="col-5">
                            <div class="form-group">
                                <label>Birthdate:</label>
                                <input type="date" class="form-control" id="birthdate" alt="birthdate"  autocomplete="off">
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group">
                                <label>Gender:</label>
                                 <select type="text" class="form-control" id="gender" alt="gender" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Gender &rarr;</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Household Number:</label>
                                <input type="text" class="form-control" id="household_number" alt="household_number" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Birthplace:</label>
                                <input type="text" class="form-control" id="birthplace" alt="birthplace" autocomplete="off">
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Differently abled Person:</label>
                                <input type="text" class="form-control" id="differently_abledperson" alt="differently_abledperson" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Gcash Number:</label>
                                <input type="text" class="form-control" id="gcash_number" alt="gcash_number" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Blood Type:</label>
                                <input type="text" class="form-control" id="blood_type" alt="blood_type" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Purok #:</label>
                                <select type="text" class="form-control" id="purok_no" alt="purok_no" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Purok No. &rarr;</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                </select>

                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Civil Status:</label>
                                <select class="custom-select" id="civil_status" alt="civil_status" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Status &rarr;</option>
                                    <option value="Single">Single</option>
                                    <option value="Married">Married</option>
                                    <option value="Widow/er">Widow/er</option>
                                    <option value="Married">Anulled</option>
                                    <option value="Legally Separated">Legally Separated</option>
                                </select>

                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Total Household Member:</label>
                                <input type="text" class="form-control" id="total_householdmember" alt="total_householdmember" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Religion:</label>
                                <input type="text" class="form-control" id="religion" alt="religion" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Occupation:</label>
                                <input type="text" class="form-control" id="occupation" alt="occupation" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Contact Number:</label>
                                <input type="text" class="form-control" id="contact_number" alt="contact_number" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Monthly Income:</label>
                                <input type="text" class="form-control" id="monthly_income" alt="monthly_income" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Educational Attainment:</label>
                                <select type="text" class="form-control" id="educational_attainment" alt="educational_attainment" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Educational Attainment &rarr;</option>
                                      <option  value="No schooling completed">No schooling completed</option>
                                      <option  value="Elementary">Elementary</option>
                                      <option  value="High school, undergrad">High school, undergrad</option>
                                      <option  value="High school graduate">High school graduate</option>
                                      <option  value="College, undergrad">College, undergrad</option>
                                      <option  value="College, graduate">College, graduate</option>
                                      <option  value="Vocational">Vocational</option>
                                      <option  value="Bachelors degree">Bachelor’s degree</option>
                                      <option  value="Masters degree">Master’s degree</option>
                                      <option  value="Doctorate degree">Doctorate degree</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Nationality:</label>
                                <input type="text" class="form-control" id="nationality" alt="nationality" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Philhealth Number:</label>
                                <input  class="form-control" type="number" max="999999999999" min="1" placeholder="eg. 010000000001"/ id="philhealth_number" alt="philhealth_number" autocomplete="off">
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Skills:</label>
                                <input type="text" class="form-control" id="skills" alt="skills" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Water Usage:</label>
                                <select type="text" class="form-control" id="water_usage" alt="water_usage" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Water Usage &rarr;</option>
                                    <option value="Faucet">Faucet</option>
                                    <option value="Deep Well">Deep Well</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Land Ownership Status:</label>
                                <select type="text" class="form-control" id="land_ownershipstatus" alt="land_ownershipstatus" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Land Ownership Status &rarr;</option>
                                    <option value="Owned">Owned</option>
                                    <option value="Landless">Landless</option>
                                    <option value="Tenant">Tenant</option>
                                    <option value="Care Taker">Care Taker</option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Sektor:</label>
                                <select type="text" class="form-control" id="sektor" alt="sektor" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Sektor &rarr;</option>
                                    <option value="Nakakatanda">Nakakatanda</option>
                                    <option value="Buntis">Buntis</option>
                                    <option value="Nagpasusong ina">Nagpasusong ina</option>
                                    <option value="PWD">PWD</option>
                                    <option value="Solo Parent">Solo Parent</option>
                                    <option value="Walang Tirahan">Walang Tirahan</option>
                                    <option value="None">None</option>
                                    <option value="Prefer not to say">Prefer not to say</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Benificiaries of:</label>
                                <select type="text" class="form-control" id="benificiaries_of" alt="benificiaries_of" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Benificiaries of &rarr;</option>
                                    <option value="UCT">UCT</option>
                                    <option value="4PS">4PS</option>
                                    <option value="UCT&4PS">UCT&4PS</option>
                                    <option value="Katutubo">Katutubo</option>
                                     <option value="None">None</option>
                                    <option value="Prefer not to say">Prefer not to say</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Light Facilities:</label>
                                <select type="text" class="form-control" id="light_facilities" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Light Facilities &rarr;</option>
                                    <option value="Electric">Electric</option>
                                    <option value="Lamp">Lamp</option>

                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Remark:</label>
                                <select type="text" class="form-control" id="remark" alt="remark" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Remark &rarr;</option>
                                    <option value="Granted ">Granted </option>
                                    <option value="Not Granted">Not Granted</option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                              <label class="control-label">Former Address:</label>
                              <input type="text"  id="former_address" alt="former_address" class="form-control input-sm" placeholder="Former Address"/>
                            </div>
                        </div>
                      </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Username:</label>
                                <input type="text" class="form-control" id="username" alt="username" autocomplete="off">
                            </div>
                             <label id="msg-username" style="color:#CC0000;" ></label>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Password:</label>
                                <input type="text" class="form-control" id="password" alt="password" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Image:</label>
                                <input type="file" class="form-control" id="image_profile" alt="image_profile" accept=".jpg, .JPEG, .png, .gif" autocomplete="off">
                            </div>
                        </div>
                   </div>
              </div>

            <div class="modal-footer justify-content-between">
                <input type="hidden" alt="user" id="user" value="<?= htmlentities($user_session); ?>">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="add_bene_2">Add</button>
            </div>
          </form>
        </div>
    </div>
</div>
       <script>
                document.addEventListener('DOMContentLoaded', () => {
                    let btn = document.querySelector('#add_bene_2');
                    btn.addEventListener('click', () => {

                        const lastname = document.querySelector('input[alt=lastname]').value;
                        const firstname = document.querySelector('input[alt=firstname]').value;
                        const middlename = document.querySelector('input[alt=middlename]').value;
                        const age = document.querySelector('input[alt=age]').value;
                        const birthdate = document.querySelector('input[alt=birthdate]').value;
                        const gender = $('#gender option:selected').val();
                        const household_number = document.querySelector('input[alt=household_number]').value;
                        const birthplace = document.querySelector('input[alt=birthplace]').value;
                        const differently_abledperson = document.querySelector('input[alt=differently_abledperson]').value;
                        const gcash_number = document.querySelector('input[alt=gcash_number]').value;
                        const blood_type = document.querySelector('input[alt=blood_type]').value;
                        const purok_no = $('#purok_no option:selected').val();
                        const civil_status = $('#civil_status option:selected').val();
                        const total_householdmember = document.querySelector('input[alt=total_householdmember]').value;
                        const religion = document.querySelector('input[alt=religion]').value;
                        const occupation = document.querySelector('input[alt=occupation]').value;
                        const contact_number = document.querySelector('input[alt=contact_number]').value;
                        const monthly_income = document.querySelector('input[alt=monthly_income]').value;
                        const educational_attainment = $('#educational_attainment option:selected').val();
                        const nationality = document.querySelector('input[alt=nationality]').value;
                        const philhealth_number = document.querySelector('input[alt=philhealth_number]').value;
                        const skills = document.querySelector('input[alt=skills]').value;
                        const water_usage = $('#water_usage option:selected').val();
                        const land_ownershipstatus = $('#land_ownershipstatus option:selected').val();
                        const sektor = $('#sektor option:selected').val();
                        const benificiaries_of = $('#benificiaries_of option:selected').val();
                        const light_facilities = $('#light_facilities option:selected').val();
                        const remark = $('#remark option:selected').val();
                        const former_address = document.querySelector('input[alt=former_address]').value;
                        const username = document.querySelector('input[alt=username]').value;
                        const password = document.querySelector('input[alt=password]').value;
                        const image_profile = $('input[id=image_profile]').val();
                        const user = document.querySelector('input[alt=user]').value;

                      var data = new FormData(this.form);

                      data.append('lastname', lastname);
                      data.append('firstname', firstname);
                      data.append('middlename', middlename);
                      data.append('age', age);
                      data.append('birthdate', birthdate);
                      data.append('gender', gender);
                      data.append('household_number', household_number);
                      data.append('birthplace', birthplace);
                      data.append('differently_abledperson', differently_abledperson);
                      data.append('gcash_number', gcash_number);
                      data.append('blood_type', blood_type);
                      data.append('purok_no', purok_no);
                      data.append('civil_status', civil_status);
                      data.append('total_householdmember', total_householdmember);
                      data.append('religion', religion);
                      data.append('occupation', occupation);
                      data.append('contact_number', contact_number);
                      data.append('monthly_income', monthly_income);
                      data.append('educational_attainment', educational_attainment);
                      data.append('nationality', nationality);
                      data.append('philhealth_number', philhealth_number);
                      data.append('skills', skills);
                      data.append('water_usage', water_usage);
                      data.append('land_ownershipstatus', land_ownershipstatus);
                      data.append('sektor', sektor);
                      data.append('benificiaries_of', benificiaries_of);
                      data.append('light_facilities', light_facilities);
                      data.append('remark', remark);
                      data.append('former_address', former_address);
                      data.append('username', username);
                      data.append('password', password);
                      data.append('image_profile', $('#image_profile')[0].files[0]);
                      data.append('user', user);
                      if (lastname == '') {

                        } else {
                            $.ajax({
                                url: '../../controllers/add_beneficiaries.php',
                                type: "POST",
                                data: data,
                                processData: false,
                                contentType: false,

                                async: false,
                                cache: false,

                                success: function(data) {
                                    $('#msgs_tblbeneficiaries').html(data);

                                },
                                error: function(data) {
                                    console.log("Failed");
                                }
                            });
                        }     

                    });
                });
            </script>


<script type="text/javascript">
    $(document).ready(function() {
 
        var timeOut = null; // this used for hold few seconds to made ajax request
 
        var loading_html02 = '<img src="../../images/ajax-loader.gif" style="height: 20px; width: 20px;"/>'; // just an loading image or we can put any texts here
 
        //when button is clicked
        $('#username').keyup(function(e){
 
            // when press the following key we need not to make any ajax request, you can customize it with your own way
            switch(e.keyCode)
            {
                //case 8:   //backspace
                case 9:     //tab
                case 13:    //enter
                case 16:    //shift
                case 17:    //ctrl
                case 18:    //alt
                case 19:    //pause/break
                case 20:    //caps lock
                case 27:    //escape
                case 33:    //page up
                case 34:    //page down
                case 35:    //end
                case 36:    //home
                case 37:    //left arrow
                case 38:    //up arrow
                case 39:    //right arrow
                case 40:    //down arrow
                case 45:    //insert
                //case 46:  //delete
                    return;
            }
            if (timeOut != null)
                clearTimeout(timeOut);
            timeOut = setTimeout(is_available02, 500);  // delay delay ajax request for 1000 milliseconds
            $('#msg-username').html(loading_html02); // adding the loading text or image
        });
  });
function is_available02(){
    //get the username
    var username = $('#username').val();
 
    //make the ajax request to check is username available or not
    $.post("check_username.php", { username: username },
    function(result)
    {
        console.log(result);
        if(result != 0)
        {
            $('#msg-username').html('Not Available');
            document.getElementById("add_beni").disabled = true;
        }
        else
        {
            $('#msg-username').html('<span style="color:#006600;">Available</span>');
            document.getElementById("add_beni").disabled = false;
        }
    });
 
}
</script>