@extends('layouts.apps')
@section('content')
<div class="col-sm-12 text-left ">
   <h1 class="border-bottom border-bot pt-3">Resident Information</h1>
</div>
<div class="Resident-Content main-wrapper col-sm-12 text-left h-100  pr-0 pl-0 " >
   <div class="col-sm-12 pl-0 pr-0 search-bars" >
      <div class="topnav navbar navbar" style="background: linear-gradient(135deg, #fffefe,#ebecec, #16beca,#000000);">
         <div>
         <button id="createresident" class="btn btn-success text-dark mr-2 " data-toggle="modal" data-target="#residentmodal"> <i class="fa fa-plus"> Resident</i></button>
         <button id="bulkdelete" class="btn btn-danger text-white " style="margin-left:2px;" > <i class="fa fa-trash"></i></button>
      </div>
      

      

         <div class="modal fade" id="residentmodal" name="residentmodal" tabindex="-1" role="dialog" aria-labelledby="resident-modal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
               <div class="modal-content">
                  <div class="modal-header" >
                     <h5 class="modal-title" id="modelHeading"></h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true" style="color: #000000">&times;</span>
                     </button>
                  </div>

                  <div class="modal-body">
                     <form id="residentform"  class="modal-input">
                        {{ csrf_field() }}
                        <input type="hidden" name="resident_id" id="resident_id">
                        <div class="row">
                            <div class="col-sm-6">





                        <div class="row" style="margin-left: 0px;margin-right: 0px;">
                           
                            <div class="col-sm-6 ">
                              <label >First Name</label>
                              <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Enter first name" value="" required="">
                              <span id="firstname_err" class="text-danger error-text firstname_err"></span>
                            </div>
                            <div class="col-sm-6" >
                              <label >Last Name</label>
                              <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Enter last name" value="" required="">
                              <span id="lastname_err" class="text-danger error-text lastname_err"></span>
                            </div>
                          </div>

                          <div class="row" style="margin-left: 0px;margin-right: 0px;">
                            <div class="col-sm-6" >
                              <label >Middle Name</label>
                              <input type="text" class="form-control" name="middlename" id="middlename" placeholder="Enter middle name" value="">
                              <span id="middlename_err" class="text-danger error-text middlename_err"></span>
                            </div>
                            <div class="col-sm-6 ">
                              <label >Nickname</label>
                              <input type="text" class="form-control" name="alias" id="alias" placeholder="Enter Nickname" value="" required="">
                              <span id="alias_err" class="text-danger error-text alias_err"></span>
                            </div>
                          </div>





                          <div class="row" style="margin-left: 0px;margin-right: 0px;">
                            <div class="col-sm-6">
                              <label>Birthday</label>
                              <input type="date" id="birthday" name="birthday" required="required" class="form-control">
                              <span id="birthday_err" class="text-danger error-text birthday_err"></span>
                            </div>
                            <div class="col-sm-6">
                              <label>Age</label>
                              <br>
                              <input type="number" id="selectAge" name="age" class="form-control" readonly>
                            </div>
                            <span id="age_err" class="text-danger error-text age_err"></span>
                          </div>
                          









                         <div class="item form-group">
                            <label class="col-form-label col-md-5 col-sm-5 label-align" for="first-name">Birth of Place
                            </label>
                            <div class="col-md-12 col-sm-12 ">
                               <input type="text" id="birthplace" name="birthplace" placeholder="Enter Birth place"   required="required" class="form-control ">
                               <span id="birthplace_err" class="text-danger error-text birthplace_err"></span>
                            </div>
                         </div>


                         <div class="item form-group border solid" style="margin-left: 15px;margin-right: 15px;">
                          
                           <div class="row" style="margin-left: 0px;margin-right: 0px;">
                              <div class="col-sm-4" >
                            <label class="col-form-label col-md-3 col-sm-3 " for="first-name">Gender</label>
                            <div class="col-md-4 col-sm-4">
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" id="male" value="Male">
                                <label class="form-check-label" for="male">Male</label>
                              </div>
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" id="female" value="Female">
                                <label class="form-check-label" for="female">Female</label>
                              </div>
                            </div>
                                <span id="gender_err" class="text-danger error-text gender_err"></span>
                              </div>
                              <div class="col-sm-4" >
                                 <label class="col-form-label col-md-3 col-sm-3 " for="trancient">Trancient</label>
                                 <div class="col-md-4 col-sm-4">
                                   <div class="form-check form-check-inline">
                                     <input class="form-check-input" type="radio" name="trancient" id="yes" value="Yes">
                                     <label class="form-check-label" for="yes">Yes</label>
                                   </div>
                                   <div class="form-check form-check-inline">
                                     <input class="form-check-input" type="radio" name="trancient" id="no" value="No">
                                     <label class="form-check-label" for="no">No</label>
                                   </div>
                                 </div>
                                     <span id="resident_err" class="text-danger error-text resident_err"></span>
                                   </div>
                                   <div class="col-sm-4" >
                                    <label class="col-form-label col-md-3 col-sm-3 " for="migrant">Migrant</label>
                                    <div class="col-md-4 col-sm-4">
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="migrant" id="in" value="In">
                                        <label class="form-check-label" for="in">In</label>
                                      </div>
                                      <div class="form-check form-check-inline mb-3">
                                        <input class="form-check-input" type="radio" name="migrant" id="out" value="Out">
                                        <label class="form-check-label" for="out">Out</label>
                                      </div>
                                    </div>
                                        <span id="migrant_err" class="text-danger error-text migrant_err"></span>
                                      </div>
                                       </div>
                                       </div>





                         <div class="row" style="margin-left: 0px;margin-right: 0px;">
                            <div class="col-sm-6 item form-group" >
                                <label >Voter Status</label>
                                <br>
                                <select name="voterstatus" id="voterstatus" style="height:38px; width: 100%">
                                <option value="">-Select Voter Status-</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>

                              </select>
                              <span id="voterstatus_err" class="text-danger error-text voterstatus_err"></span>
                            </div>
                            <div class="col-sm-6 item form-group">
                              <label >Civil Status</label>
                              <br>
                              <select name="civilstatus" id="civilstatus" style="height:38px; width: 100%">
                              <option value="">-Select Marital Status-</option>
                              <option value="Single">Single</option>
                              <option value="Married">Married</option>
                              <option value="Widowed">Widowed</option>
                              <option value="Separated">Separated</option>
                              <option value="Divorced">Divorced</option>
                              <option value="LiveIn">Live In</option>
                            </select>
                            <span id="civilstatus_err" class="text-danger error-text civilstatus_err"></span>
                            </div>
                          </div>
                          
                          <div class="row" style="margin-left: 0px;margin-right: 0px;">
                           <div class="col-sm-6 item form-group">
                            <label  for="citizenship">CitizenShip</label>
                            <div>
                               <input type="text" id="citizenship" name="citizenship" placeholder="Ex: Filipino"  required="required" class="form-control ">
                               <span id="citizenship_err" class="text-danger error-text citizenship_err"></span>
                            </div>
                           </div>
                           <div class="col-sm-6 item form-group">
                            <label for="zipcode">Zip-Code</label>
                           <div>
                              <input type="text" id="zipcode" name="zipcode" placeholder="Ex:0000"  required="required" class="form-control ">
                              <span id="zipcode_err" class="text-danger error-text zipcode_err"></span>
                           </div>
                        </div>
                         </div>
                        
                     




                        <div class="row" style="margin-left: 0px;margin-right: 0px;">
                           <div class="col-sm-6" >
                             <label >Telephone</label>
                             <input type="text" class="form-control"   name="telephone" id="telephone" placeholder="0000-000-0000"  value="" >
                             <span id="telephone_err" class="text-danger error-text telephone_err"></span>
                           </div>
                           <div class="col-sm-6 ">
                             <label >Mobile</label>
                             <input type="text" class="form-control" name="mobile" id="mobile"  placeholder="0000-000-0000" value="" required="">
                             <span id="mobile_err" class="text-danger error-text mobile_err"></span>
                           </div>
                         </div>
                         <div class="row mt-3 mb-3" style="margin-left: 0px;margin-right: 0px;">
                           <div class="col-sm-4 ">
                           <label >Purok/Sitio</label>
                           
                              <select name="area" id="area" style="height:38px; width: 100%">
                                 <option value="">-Select Area-</option>
                                 @if(count($area_setting) > 0)
                                 @foreach ($area_setting as $area_setting)
                                 <option value="{{  $area_setting->area}}" >{{ $area_setting->area }}</option>
                                 @endforeach
                                 @endif
                               </select>
                               <span id="area_err" class="text-danger error-text area_err"></span>
                              </div>
                           <div class="col-sm-4" >
                             <label >Barangay</label>
                             <input type="text" class="form-control"  name="barangay" id="barangay"  placeholder="Ex: North Poblacion"  required>
                             <span id="barangay_err" class="text-danger error-text barangay_err"></span>
                           </div>
                           <div class="col-sm-4 ">
                             <label >Municipality</label>
                             <input type="text" class="form-control"  name="municipal" id="municipal"  placeholder="Ex:Maramag" required>
                             <span id="municipal_err" class="text-danger error-text municipal_err"></span>
                           </div>
                         </div>

                    </div>

                    <div class="col-sm-6">
                        <div class="row" style="margin-left: 0px;margin-right: 0px;">
                            <div class="col-sm-6" >
                              <label >Height</label>
                              <input type="number" class="form-control" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="height" id="height" placeholder="" value="0" >
                              <span id="height_err" class="text-danger error-text height_err"></span>
                            </div>
                            <div class="col-sm-6 ">
                              <label >Weight</label>
                              <input type="number" class="form-control" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="weight" id="weight" placeholder="" value="0" >
                              <span id="weight_err" class="text-danger error-text weight_err"></span>
                            </div>
                          </div>

                          <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Email
                            </label>
                            <div class="col-md-12 col-sm-12 ">
                               <input type="email" id="email" name="email" required="required" placeholder="Enter email" class="form-control ">
                               <span id="email_err" class="text-danger error-text email_err"></span>
                            </div>
                         </div>







                          <div class="row" style="margin-left: 0px;margin-right: 0px;">
                           <div class="col-sm-6" >
                             <label >PAG-IBIG</label>
                             <input type="text" class="form-control" onkeypress="return isNumberKey(event)"  name="PAG_IBIG" id="PAG_IBIG" placeholder="Ex: 1234-5678-9101" maxlength = "14" value="" >
                             <span id="PAG_IBIG_err" class="text-danger error-text PAG_IBIG_err"></span>
                           </div>
                           <div class="col-sm-6 ">
                             <label >PHILHEALTH</label>
                             <input type="text" class="form-control" onkeypress="return isNumberKey(event)" name="PHILHEALTH" id="PHILHEALTH" placeholder="Ex: 0028-1215160-9" maxlength = "14" value="" >
                             <span id="PHILHEALTH_err" class="text-danger error-text PHILHEALTH_err"></span>
                           </div>
                         </div>


                         <div class="row" style="margin-left: 0px;margin-right: 0px;">
                           <div class="col-sm-6" >
                             <label >SSS</label>
                             <input type="text" class="form-control" onkeypress="return isNumberKey(event)" name="SSS" id="SSS" placeholder="Ex: 04-0751449-0"  maxlength = "12" value="" >
                             <span id="SSS_err" class="text-danger error-text SSS_err"></span>
                           </div>
                           <div class="col-sm-6 ">
                             <label >TIN</label>
                             <input type="text" class="form-control" onkeypress="return isNumberKey(event)" name="TIN" id="TIN" placeholder="Ex: 123-456-789-000" maxlength = "15" value="" >
                             <span id="TIN_err" class="text-danger error-text TIN_err"></span>
                           </div>
                         </div>







                         <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Spouse
                            </label>
                            <div class="col-md-12 col-sm-12 ">
                               <input type="text" id="spouse" name="spouse"  placeholder="N/A" class="form-control ">
                               <span id="spouse_err" class="text-danger error-text spouse_err"></span>
                            </div>
                         </div>



                         <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Father
                            </label>
                            <div class="col-md-12 col-sm-12 ">
                               <input type="text" id="father" name="father" placeholder="Enter father name"  class="form-control ">
                               <span id="father_err" class="text-danger error-text father_err"></span>
                            </div>
                         </div>



                         <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Mother
                            </label>
                            <div class="col-md-12 col-sm-12 ">
                               <input type="text" id="mother" name="mother" value="" placeholder="Enter mother name" class="form-control ">
                               <span id="mother_err" class="text-danger error-text mother_err"></span>
                            </div>
                         </div>


                         <div class="row" style="margin-left: 0px;margin-right: 0px;">
                          <div class="col-sm-6 item form-group" >
                            <label >PWD</label>
                            <br>
                            <select name="pwd" id="pwd" style="height:38px; width: 100%">
                            <option value="">-Select-</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>

                          </select>
                          <span id="voterstatus_err" class="text-danger error-text voterstatus_err"></span>
                        </div>
                        <div class="col-sm-6 item form-group" >
                          <label >Condition</label>
                          <br>
                          <select name="condition" id="condition" style="height:38px; width: 100%;" >
                          <option value="">-Select-</option>
                          <option value="Visually impaired">Visually impaired</option>
                          <option value="earing impaired">Hearing impaired</option>
                          <option value="Orthopedically disabled">Orthopedically disabled</option>
                          <option value="cleft palate">cleft palate</option>
                          <option value="harelip">harelip</option>
                          <option value="Improved mental patients">Improved mental patients</option>
                          <option value="Mentally retarded">Mentally retarded</option>
                          <option value="Autistic">Autistic</option>
                          <option value="Attention deficit disorder">Attention deficit disorder</option>
                          <option value="Attention deficit hyperactive disorder">Attention deficit hyperactive disorder</option>

                        </select>
                        <span id="voterstatus_err" class="text-danger error-text voterstatus_err"></span>
                      </div>
                        </div>

                         <div class="item form-group">
                           <label class="col-form-label col-md-5 col-sm-5 label-align" for="first-name">Permanent Address
                           </label>
                           <div class="col-md-12 col-sm-12 ">
                              <input type="text" id="address_1" name="address_1" placeholder="Enter address" required="required" class="form-control ">
                              <span id="address_1_err" class="text-danger error-text address_1_err"></span>
                           </div>
                        </div>

                    </div>


                <!----------------
                -->
                    </div>
                        <div class="ln_solid"></div>
                        <div class="item form-group">
                           <div class="col-md-12 col-sm-12 offset-md-4">
                              <button type="submit" id="submit" class="btn btn-success resident-button">Submit</button>
                              <a class="btn btn-danger" type="button" data-dismiss="modal" style="margin-left: 4px;" >Cancel</a>
                              <input class="btn btn-primary" type="reset" value="Reset">
                           </div>
                        </div>
                     </form>
                  </div>
                  <div class="modal-footer text-white">
                  </div>
               </div>
            </div>
         </div>
         <div class="search-container">
            <input class="global_filter" type="text" id="global_filter" placeholder="Search..." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
            </form>
         </div>
      </div>
      <div class=" col-sm-12 text-left h-100  pr-0 pl-0 pt-2 pb-2 text-white" >
         <div class="row pl-4 pr-4   ">
            <div class="col-sm-12 border border-bot ">
            </div>
         </div>
         <div class="row pt-4 pl-4 pr-4">
            <div  class=" col-sm-12 overflow-auto display-nones ">
               <table   class="  table resident-table table-striped jambo_table table-sm bulk_action text-center border dataTable no-footer">
                  <thead>
                     <tr class="headings" style="background: linear-gradient(135deg, #000000,#000000);">
                        <th >
                            <input class="icheckbox_flat-green" type="checkbox"   id="check-all" >

                          </th>
                        <th class="column-title">Action</th>
                        <th class="column-title">Resident_ID</th>
                        <th class="column-title">Last Name </th>
                        <th class="column-title">First Name </th>
                        <th class="column-title">Middle Name </th>
                        <th class="column-title">Mobile No.</th>
                        <th class="column-title">Gender</th>


                        </th>
                     </tr>
                  </thead>
                  </tbody>
               </table>


            </div>
         </div>
      </div>
   </div>
   
</div>
<script>
    var pwdSelect = document.getElementById("pwd");
   var conditionSelect = document.getElementById("condition");
 
   // add event listener to pwd select element
   pwdSelect.addEventListener("change", function() {
     if (pwdSelect.value === "No") {
       // disable condition select element if pwd is "No"
       conditionSelect.disabled = true;
      
       
     } else {
       // enable condition select element if pwd is "Yes"
       conditionSelect.disabled = false;
     }
   });
//age automatic 
 // get the input element and the age input element
 var input = document.getElementById("birthday");
  var ageInput = document.getElementById("selectAge");

  // add an event listener to the input element
  input.addEventListener("input", function() {
    // get the birthdate value and convert it to a Date object
    var birthdate = new Date(this.value);
    // calculate the age based on the current date and the birthdate
    var age = Math.floor((Date.now() - birthdate) / (365.25 * 24 * 60 * 60 * 1000));
    // set the value of the age input element to the calculated age
    ageInput.value = age;
  });


 </script>








<div class="modal fade" id="residentviewmodal" name="residentviewmodal" tabindex="-1" role="dialog" aria-labelledby="resident-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
       <div class="modal-content">
          <div class="modal-header">
             <h5 class="modal-title" id="modelHeading">View Resident Data</h5>



             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
             </button>
          </div>




          <div class="modal-body">
             <form id="residentviewform"  class="modal-input">
                {{ csrf_field() }}
                <input type="hidden" name="resident_idv" id="resident_idv">



                <div class="row">
                    <div class="col-sm-6">





                <div class="row" style="margin-left: 0px;margin-right: 0px;">
                    <div class="col-sm-6" >
                      <label >Last Name</label>
                      <input type="text" class="form-control" readonly id="lastnamev" name="lastnamev"   readonly>

                    </div>
                    <div class="col-sm-6 ">
                      <label >First Name</label>
                      <input  type="text" class="form-control" id="firstnamev" name="firstnamev"  readonly >

                    </div>
                  </div>

                  <div class="row" style="margin-left: 0px;margin-right: 0px;">
                    <div class="col-sm-6" >
                      <label >Middle Name</label>
                      <input type="text"  readonly class="form-control" name="middlenamev" id="middlenamev" >

                    </div>
                    <div class="col-sm-6 ">
                      <label >Alias</label>
                      <input type="text" class="form-control" readonly name="aliasv" id="aliasv" >

                    </div>
                  </div>





                  <div class="row" style="margin-left: 0px;margin-right: 0px;">
                    <div class="col-sm-6" >
                      <label >Birthday</label>
                      <input type="date" id="birthdayv" name="birthdayv" readonly required="required" class="form-control ">

                    </div>
                    <div class="col-sm-6 ">
                      <label >Age</label>
                      <input type="text" id="agev" name="agev" readonly required="required" class="form-control ">

                    </div>
                  </div>










                 <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" >Birth of Place
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="text" id="birthplacev" readonly name="birthplacev"  class="form-control ">
                    </div>
                 </div>


                 <div class="item form-group border solid" style="margin-left: 15px;margin-right: 15px;">
                          
                  <div class="row" style="margin-left: 0px;margin-right: 0px;">
                     <div class="col-sm-4" >
                   <label class="col-form-label col-md-3 col-sm-3 " for="genderv">Gender</label>
                   <div class="col-md-4 col-sm-4">
                     <div class="form-check form-check-inline">
                       <input class="form-check-input" type="radio" name="genderv" id="male"  readonly>
                       <label class="form-check-label" for="male">Male</label>
                     </div>
                     <div class="form-check form-check-inline">
                       <input class="form-check-input" type="radio" name="genderv" id="female" readonly>
                       <label class="form-check-label" for="female">Female</label>
                     </div>
                   </div>
                       <span id="gender_err" class="text-danger error-text gender_err"></span>
                     </div>
                     <div class="col-sm-4" >
                        <label class="col-form-label col-md-3 col-sm-3 " for="trancientv">Trancient</label>
                        <div class="col-md-4 col-sm-4">
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="trancientv" id="yes"  readonly>
                            <label class="form-check-label" for="yes">Yes</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="trancientv" id="no"  readonly>
                            <label class="form-check-label" for="no">No</label>
                          </div>
                        </div>
                            <span id="trancient_err" class="text-danger error-text trancient_err"></span>
                          </div>
                          <div class="col-sm-4" >
                           <label class="col-form-label col-md-3 col-sm-3 " for="migrantv">Migrant</label>
                           <div class="col-md-4 col-sm-4">
                             <div class="form-check form-check-inline">
                               <input class="form-check-input" type="radio" name="migrantv" id="in" value="In"readonly>
                               <label class="form-check-label" for="in">In</label>
                             </div>
                             <div class="form-check form-check-inline mb-3">
                               <input class="form-check-input" type="radio" name="migrantv" id="out"  value="Out" readonly>
                               <label class="form-check-label" for="out">Out</label>
                             </div>
                           </div>
                               <span id="migrant_err" class="text-danger error-text migrant_err"></span>
                             </div>
                              </div>
                              </div>



                              <div class="col-sm-4" >
                                <label class="col-form-label col-md-3 col-sm-3 " for="migrant">Migrant</label>
                                <div class="col-md-4 col-sm-4">
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="migrant" id="in" value="In">
                                    <label class="form-check-label" for="in">In</label>
                                  </div>
                                  <div class="form-check form-check-inline mb-3">
                                    <input class="form-check-input" type="radio" name="migrant" id="out" value="Out">
                                    <label class="form-check-label" for="out">Out</label>
                                  </div>
                                </div>
                                    <span id="migrant_err" class="text-danger error-text migrant_err"></span>
                                  </div>



                 <div class="row" style="margin-left: 0px;margin-right: 0px;">
                    <div class="col-sm-6" >
                      <label >Voter Status</label>
                      <input type="text" class="form-control" readonly id="voterstatusv" name="voterstatusv"   readonly>

                    </div>
                    <div class="col-sm-6 ">
                      <label >Civil Status</label>
                      <input readonly  type="text" class="form-control" name="civilstatusv" id="civilstatusv" >

                    </div>
                  </div>



                 <div class="row mt-3" style="margin-left: 0px;margin-right: 0px;">
                  <div class="col-sm-6 item form-group">
                   <label  for="citizenship">CitizenShip</label>
                   <div>
                      <input type="text" id="citizenshipv" name="citizenshipv"  class="form-control " readonly>
                  
                   </div>
                  </div>
                  <div class="col-sm-6 item form-group">
                   <label for="zipcode">Zip-Code</label>
                  <div>
                     <input type="text" id="zipcodev" name="zipcodev"  class="form-control " readonly>
                  
                  </div>
               </div>
                </div>






                <div class="row" style="margin-left: 0px;margin-right: 0px;">
                   <div class="col-sm-6" >
                     <label >Telephone</label>
                     <input type="text" class="form-control"  readonly name="telephonev" id="telephonev" >

                   </div>
                   <div class="col-sm-6 ">
                     <label >Mobile</label>
                     <input type="text" class="form-control" readonly name="mobilev" id="mobilev"  >

                   </div>
                 </div>
                 <div class="row mt-3"  style="margin-left: 0px;margin-right: 0px;">
                  <div class="col-sm-4" >
                     <label>Area</label>
                      <input type="text" class="form-control" readonly name="areav" id="areav"  >
                     </div>
                  <div class="col-sm-4" >
                    <label >Barangay</label>
                    <input type="text" class="form-control"name="barangayv" id="barangayv"readonly>
      
                  </div>
                  <div class="col-sm-4 ">
                    <label >Municipality</label>
                    <input type="text" class="form-control" name="municipalv" id="municipalv"readonly>
                  </div>
                </div>
                
                 
                

                

            


                

                

            </div>

            <div class="col-sm-6">
                <div class="row" style="margin-left: 0px;margin-right: 0px;">
                    <div class="col-sm-6" >
                      <label >Height</label>
                      <input type="number" class="form-control" readonly name="heightv" id="heightv" >

                    </div>
                    <div class="col-sm-6 ">
                      <label >Weight</label>
                      <input type="number" class="form-control" readonly name="weightv" id="weightv" >

                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Email
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="email" id="emailv" name="emailv" readonly   class="form-control ">
                    </div>
                 </div>







                  <div class="row" style="margin-left: 0px;margin-right: 0px;">
                   <div class="col-sm-6" >
                     <label >PAG-IBIG</label>
                     <input type="text" class="form-control" readonly  name="PAG_IBIGv" id="PAG_IBIGv" >

                   </div>
                   <div class="col-sm-6 ">
                     <label >PHILHEALTH</label>
                     <input type="text" class="form-control" readonly name="PHILHEALTHv" id="PHILHEALTHv" >

                   </div>
                 </div>


                 <div class="row" style="margin-left: 0px;margin-right: 0px;">
                   <div class="col-sm-6" >
                     <label >SSS</label>
                     <input type="text" class="form-control" readonly name="SSSv" id="SSSv" >

                   </div>
                   <div class="col-sm-6 ">
                     <label >TIN</label>
                     <input type="text" class="form-control"  readonly name="TINv" id="TINv" >

                   </div>
                 </div>







                 <div class="item form-group mt-3">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" >Spouse
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="text" id="spousev" readonly name="spousev"  class="form-control ">
                    </div>
                 </div>



                 <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" >Father
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="text" id="fatherv" readonly name="fatherv"  class="form-control ">
                    </div>
                 </div>



                 <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" >Mother
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="text" id="motherv" readonly name="motherv"  class="form-control ">
                    </div>
                 </div>


                 
                 <div class="row mt-3" style="margin-left: 0px;margin-right: 0px;">
                  <div class="col-sm-6" >
                    <label >PWD</label>
                    <input type="text" class="form-control" readonly id="pwdv" name="pwdv"   readonly>

                  </div>
                  <div class="col-sm-6 ">
                    <label >Condition</label>
                    <input  type="text" class="form-control" id="conditionv" name="conditionv"  readonly >

                  </div>
                </div>



                 <div class="item form-group mt-3">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">Address 1
                    </label>
                    <div class="col-md-12 col-sm-12 ">
                       <input type="text" id="address_1v" readonly  name="address_1v" class="form-control ">
                    </div>
                 </div>



                
                 </div>



            </div>


        <!----------------
        -->



            </div>





                <div class="row p-0 m-0">


            <div class="col-sm-12">



                <table  id="blotter-resident" class=" dataTables_info table blotter-resident datatable-element resident table-striped jambo_table bulk_action text-center border border-modal dataTable no-footer" >
                  
                  
                  <thead>
                       <tr class="headings">

                          <th class="column-title">Blotter-ID</th>
                          <th class="column-title">Incident Type</th>
                          <th class="column-title">Status </th>
                          <th class="column-title">Date Reported </th>
                          <th class="column-title">Date Incident </th>
                          <th class="column-title">Incident Location</th>



                       </tr>
                    </thead>

                 </table>
            </div>



        </div>
                <div class="ln_solid"></div>

             </form>
          </div>
          <div class="modal-footer text-white">
          </div>
       </div>
    </div>
 </div>

@endsection