<div class="modal fade" id="details-beneficiaries">
    <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_tblbeneficiariesedit"></div>
                    <div class="row">

                        <div class="col-4">
                            <div class="form-group">
                                <label>LastName:</label>
                                <input type="text" class="form-control" id="detatil_lastname" alt="lastname2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label>FirstName:</label>
                                <input type="text" class="form-control" id="detatil_firstname" alt="firstname2" autocomplete="off" readonly>
                            </div>
                        </div>
                        
                         <div class="col-4">
                            <div class="form-group">
                                <label>MiddleName:</label>
                                <input type="text" class="form-control" id="detatil_middlename" alt="middlename2" autocomplete="off" readonly>
                            </div>
                        </div>
                        
                    </div>

                    <div class="row">


                        <div class="col-2">
                            <div class="form-group">
                                <label>Age:</label>
                                <input type="number" min="1" id="detatil_age" alt="age2" class="form-control" name=""  autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group">
                                <label>Birthdate:</label>
                                <input type="date" class="form-control" id="detatil_birthdate" alt="birthdate2"  autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group">
                                <label>Gender:</label>
                                 <select type="text" class="form-control" id="detatil_gender" alt="gender" autocomplete="off" readonly>
                                    <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="detatil_householdnumber" alt="household_number2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Birthplace:</label>
                                <input type="text" class="form-control" id="detatil_birthplace" alt="birthplace2" autocomplete="off" readonly>
                            </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="detatil_differentlyabledperson" alt="differently_abledperson2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Gcash Number:</label>
                                <input type="text" class="form-control" id="detatil_gcashnumber" alt="gcash_number2" autocomplete="off" readonly>
                            </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="detatil_bloodtype" alt="blood_type2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Purok #:</label>
                                <input type="text" class="form-control" id="detatil_purokno" alt="purok_no2" autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Civil Status:</label>
                                <select class="custom-select" id="detatil_civilstatus" alt="civil_status" autocomplete="off" readonly>
                                    <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="detatil_totalhouseholdmember" alt="total_householdmember2" autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Religion:</label>
                                <input type="text" class="form-control" id="detatil_religion" alt="religion2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Occupation:</label>
                                <input type="text" class="form-control" id="detatil_occupation" alt="occupation2" autocomplete="off" readonly>
                            </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="detatil_contactnumber" alt="contact_number2" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Monthly Income:</label>
                                <input type="text" class="form-control" id="detatil_monthlyincome" alt="monthly_income2" autocomplete="off" readonly>
                            </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="detatil_educationalattainment" alt="educational_attainment" autocomplete="off" readonly>
                                    <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="Bachelor’s degree">Bachelor’s degree</option>
                                      <option  value="Master’s 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="detatil_nationality" alt="nationality2" autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Philhealth Number:</label>
                                <input  class="form-control" type="text" max="999999999999"  placeholder="eg. 010000000001" id="detatil_philhealthnumber" alt="philhealth_number2" autocomplete="off" readonly>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Skills:</label>
                                <input type="text" class="form-control" id="detatil_skills" alt="skills2" autocomplete="off" readonly>
                            </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="detatil_waterusage" alt="water_usage" autocomplete="off" readonly>
                                    <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="detatil_landownershipstatus" alt="land_ownershipstatus" autocomplete="off" readonly>
                                    <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="detatil_sektor" alt="sektor" autocomplete="off" readonly>
                                    <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="detatil_benificiariesof" alt="benificiaries_of" autocomplete="off" readonly>
                                    <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="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="detatil_lightfacilities" autocomplete="off" readonly>
                                    <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="detatil_remark" alt="remark" autocomplete="off" readonly>
                                    <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="detatil_formeraddress" alt="former_address2" class="form-control input-sm" placeholder="Former Address" readonly>
                            </div>
                        </div>
                      </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Username:</label>
                                <input type="text" class="form-control" id="detatil_username" alt="username2" autocomplete="off" readonly>
                            </div>
                             <label id="msg-username" style="color:#CC0000;" ></label>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Password:</label>
                                <input type="password" class="form-control" id="detatil_password" alt="password2" autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Image:</label><br>
                                <img src="detatil_imageprofile" id="detatil_imageprofile" alt="Profile" class="brand-image img-square elevation-3" width="150px" height="150px" style="opacity: .8;border: 1px solid gray">
                            </div>
                        </div>
                   </div>
              </div>

            <div class="modal-footer justify-content-between">
                <input type="hidden" id="edit_beneficiariesid" name="">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info">Details</button>
            </div>
          </form>
        </div>
    </div>
</div>
 