<div class="modal fade" id="modal-editAddress" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Address</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="row">
        	<div class="col">
        		<label>Type</label>
        		<select class="form-control" id="edit_address_type">
        			<option value="1">Permanent Residence</option>
        			<option value="2">Temporary Residence</option>
        			<option value="3">Correspondence Residence</option>
        		</select>
        	</div>
        </div>

        <div class="row">
        	<div class="col">
        		<label>Address</label>
        		<input type="text" class="form-control" id="edit_address">
        	</div>
        </div>

        <div class="row">
        	<div class="col">
        		<label>Postcode</label>
        		<input type="text" class="form-control" id="edit_address_postcode">
        	</div>
        	<div class="col">
        		<label>City</label>
        		<input type="text" class="form-control" id="edit_address_city">
        	</div>
        </div>

        <div class="row">
        	<div class="col">
        		<label>State</label>
        		<select class="form-control" id="edit_address_state">
        			<?php if($states) foreach ($states as $key => $state): ?>
                    	<option value="<?php echo $state->id; ?>"><?php echo $state->state; ?></option>
                    <?php endforeach ?>
        		</select>
        	</div>
        	<div class="col">
        		<label>Country</label>
        		<select class="form-control" id="edit_address_country">
        			<?php foreach ($countries as $key => $country): ?>
						<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
					<?php endforeach ?>
        		</select>
        	</div>
        </div>

        <div class="row">
        	<div class="col">
        		<label>Contact Number</label>
        		<div class="input-group">
				  <!-- <div class="input-group-prepend">
				  	<select class="form-control">
				  		<option>+60</option>
				  		<option>+65</option>
				  	</select>
				  </div> -->
				  <input type="text" class="form-control" id="edit_address_contact_number">
				</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" data-dismiss="modal" onclick="updateAddress()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editFamilyInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Family Information</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      	<div class="row">
      		<div class="col">
      			<label>Name</label>
      			<input type="text" class="form-control" id="edit_family_name">
      		</div>
      		<div class="col">
      			<label>NRIC No / Passport</label>
      			<input type="text" class="form-control" id="edit_family_nric">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Relations</label>
      			<select class="form-control" id="edit_family_relation">
      				<?php foreach ($relations as $key => $relation): ?>
						<option value="<?php echo $relation->id; ?>"><?php echo $relation->relations; ?></option>
					<?php endforeach ?>
      			</select>
      		</div>
      		<div class="col">
      			<label>Birthdate</label>
      			<input type="text" class="form-control datepicker" id="edit_family_birthdate">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Contact Number</label>
      			<div class="input-group">
				  <!-- <div class="input-group-prepend">
				  	<select class="form-control">
				  		<option>+60</option>
				  		<option>+65</option>
				  	</select>
				  </div> -->
				  <input type="text" class="form-control" id="edit_family_contact_number">
				</div>
      		</div>
      		<div class="col">
      			<label>Email</label>
      			<input type="text" class="form-control" id="edit_family_email">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Address</label>
      			<input type="text" class="form-control" id="edit_family_address">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>OKU Status</label>
      			<select class="form-control" id="edit_family_oku_status">
      				<option value="0">Yes</option>
      				<option value="1">No</option>
      			</select>
      		</div>
      		<div class="col">
      			<label>Student Status</label>
      			<select class="form-control" id="edit_family_student_status">
      				<option value="0">Yes</option>
      				<option value="1">No</option>
      			</select>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Occupation</label>
      			<input type="text" class="form-control" id="edit_family_occupation">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Highest Academic Level</label>
      			<select class="form-control" id="edit_family_academic_level">
      				<?php foreach ($qualifications as $key => $qualification): ?>
						<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
					<?php endforeach ?>
      			</select>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>University / Institution</label>
      			<input type="text" class="form-control" id="edit_family_academic_insitution">
      		</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" data-dismiss="modal" onclick="updateFamilyInfo()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editAcademic" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Academic Education</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
      	<div class="row">
      		<div class="col">
      			<label>Level</label>
      			<select class="form-control" id="edit_academic_qualification_level">
      				<?php foreach ($qualifications as $key => $qualification): ?>
						<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
					<?php endforeach ?>
      			</select>
      		</div>
      		<div class="col">
      			<label>Year Graduated</label>
      			<input type="text" class="form-control datepicker-yyyy" id="edit_academic_qualification_year_graduate">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>University / Institution</label>
      			<input type="text" class="form-control" id="edit_academic_qualification_institution">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Program</label>
      			<input type="text" class="form-control" id="edit_academic_qualification_program">
      		</div>
      	</div>

      	<!-- 
      		disabling for a edit attachment for a while
      	<div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control" id="edit_academic_qualification_attachment">
      		</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" data-dismiss="modal" onclick="updateAcademicQualification()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editPersonalData" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Additional personal data attachment</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      	<div class="row">
      		<div class="col">
      			<label>Detail</label>
      			<input type="text" class="form-control" id="edit_personal_data_detail">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Description</label>
      			<input type="text" class="form-control" id="edit_personal_data_description">
      		</div>
      	</div>

      	<!--
      	 <div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control" id="edit_personal_data_attachment">
      		</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" data-dismiss="modal" onclick="updatePersonalData()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editPrevEmployment" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Previous Employment Detail</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      	<div class="row">
      		<div class="col">
      			<label>Date Join</label>
      			<input type="text" class="form-control datepicker" id="edit_prev_emp_date_join">
      		</div>
      		<div class="col">
      			<label>Date To</label>
      			<input type="text" class="form-control datepicker" id="edit_prev_emp_date_to">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Employer Name</label>
      			<input type="text" class="form-control" id="edit_prev_emp_name">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Employer Address</label>
      			<textarea class="form-control" id="edit_prev_emp_address"></textarea>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Position</label>
      			<input type="text" class="form-control" id="edit_prev_emp_position">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Length Of Service</label>
      			<div class="input-group">
				  <input type="text" class="form-control" id="edit_prev_emp_los">
				  <!-- <div class="input-group-append">
				    <select class="form-control" id="edit_prev_emp_duration">
				    	<option>Days</option>
				    </select>
				  </div> -->
				</div>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Description</label>
      			<textarea class="form-control" id="edit_prev_emp_description"></textarea>
      		</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" data-dismiss="modal" onclick="updatePreviousEmployment()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editProMembership" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Professional Membership</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	
      	<div class="row">
      		<div class="col">
      			<label>Professional Bodies</label>
      			<input type="text" class="form-control" id="edit_professional_membership_bodies">
      		</div>
      		<div class="col">
      			<label>Name of Membership</label>
      			<input type="text" class="form-control" id="edit_professional_membership_certificate">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Type of Membership</label>
      			<input type="text" class="form-control" id="edit_professional_membership">
      		</div>
      		<div class="col">
      			<label>Membership Number</label>
      			<input type="text" class="form-control" id="edit_professional_membership_number">
      		</div>	
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Year</label>
      			<input type="text" class="form-control datepicker-yyyy" id="edit_professional_membership_year">
      		</div>
      	</div>

      	<!-- 
      	<div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control" id="edit_professional_membership_attachment">
      		</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" data-dismiss="modal" onclick="updateProfessionalMembership()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editProLicense" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Professional Licenses</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	
      	<div class="row">
      		<div class="col">
      			<label>Name of License</label>
      			<input type="text" class="form-control" id="edit_pro_license_profession">
      		</div>

      		<div class="col">
      			<label>License No</label>
      			<input type="text" class="form-control" id="edit_pro_license_no">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
            <label>License Body/Authority</label>
            <input type="text" class="form-control datepicker" id="edit_pro_license_body_authority">
          </div>
          <div class="col">
      			<label>Initial Registration Date</label>
      			<input type="text" class="form-control datepicker" id="edit_pro_license_reg_date">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Latest Renewed Valid</label>
      			<input type="text" class="form-control datepicker" id="edit_pro_license_renewal_date">
      		</div>
          <div class="col">
            <label>Next Renewal Valid</label>
            <input type="text" class="form-control datepicker" id="edit_pro_license_next_renewal_date">
          </div>
        </div>

   <!--    	<div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control" id="edit_pro_license_attachment">
      		</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" data-dismiss="modal" onclick="updateProfessionalLicense()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editRecognition" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Recognition</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
      	<div class="row">
      		<div class="col">
      			<label>Achievement</label>
      			<input type="text" class="form-control" id="edit_recognition_achievement">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Award</label>
      			<input type="text" class="form-control" id="edit_recognition_award">
      		</div>
      		<div class="col">
      			<label>Year</label>
      			<input type="text" class="form-control datepicker-yyyy" id="edit_recognition_year">
      		</div>
      	</div>

      	<!-- <div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control" id="edit_recognition_attachment">
      		</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" data-dismiss="modal" onclick="updateRecognition()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editBankDetail" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Bank Details</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      	<div class="row">
      		<div class="col">
      			<label>Bank Name</label>
      			<select class="form-control" id="edit_bank_detail_name">
      				<?php foreach ($banks as $key => $bank): ?>
						<option value="<?php echo $bank->id; ?>"><?php echo $bank->name; ?></option>
					<?php endforeach ?>
      			</select>
      		</div>

      		<div class="col">
      			<label>Branch</label>
      			<input type="text" class="form-control" id="edit_bank_detail_branch">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Account Number</label>
      			<input type="text" class="form-control" id="edit_bank_detail_acct_no">
      		</div>
      		<div class="col">
      			<label>Status</label>
      			<input type="text" class="form-control" id="edit_bank_detail_status">
      		</div>
      	</div>

    <!--   	<div class="row">
      		<div class="col">
      			<label>Attachment</label>
      			<input type="file" class="form-control">
      		</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" data-dismiss="modal" onclick="updateBank()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editRecurring" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Recurring</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
      	<div class="row">
      		<div class="col">
      			<label>Date From</label>
      			<input type="text" class="form-control datepicker" id="edit_recurring_date_from">
      		</div>
      		<div class="col">
      			<label>Date To</label>
      			<input type="text" class="form-control datepicker" id="edit_recurring_date_to">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Recurring</label>
      			<select class="form-control" id="edit_recurring">
      				<option value="0">Payment</option>
      				<option value="1">Deduction</option>
      			</select>
      		</div>
      		<div class="col">
      			<label>Type</label>
      			<input type="text" class="form-control" id="edit_recurring_type">
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Amount</label>
      			<div class="input-group mb-3">
				  <div class="input-group-prepend">
				    <span class="input-group-text">RM</span>
				  </div>
				  <input type="text" class="form-control" id="edit_recurring_amount">
				</div>
      		</div>
      		<div class="col">
      			<label>Status</label>
      			<select class="form-control" id="edit_recurring_status">
      				<option value="0">ongoing</option>
      				<option value="1">end</option>
      			</select>
      		</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" data-dismiss="modal" onclick="updateRecurring()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editThirdParty" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Third Party Payment</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
    		
    		<div class="row">
    			<div class="col">
    				<label>Date From</label>
    				<input type="text" class="form-control datepicker" id="edit_third_party_date_from">
    			</div>
    			<div class="col">
    				<label>Date To</label>
    				<input type="text" class="form-control datepicker" id="edit_third_party_date_to">
    			</div>
    		</div>

    		<div class="row">
    			<div class="col">
    				<label>Third Party Institution / Organisation</label>
    				<input type="text" class="form-control" id="edit_third_party_institution">
    			</div>
    		</div>

    		<div class="row">
    			<div class="col">
    				<label>Amount</label>
    				<div class="input-group mb-3">
					  <div class="input-group-prepend">
					    <span class="input-group-text">RM</span>
					  </div>
					  <input type="text" class="form-control" id="edit_third_party_amount">
					</div>
    			</div>
    			<div class="col">
    				<label>Status</label>
    				<select class="form-control" id="edit_third_party_status">
    					<option value="0">ongoing</option>
    					<option value="1">end</option>
    				</select>
    			</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" data-dismiss="modal" onclick="updateThirdParty()">changes</button>
      </div>
    </div>
  </div>
</div>

<!-- modal editWorkflow-->
<div class="modal" id="edit_workflow" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Workflow</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">
            <label><b>Workflow Name : </b></label>
            <input type="text" class="form-control" id="modal_workflow_id" hidden>
            <input type="text" class="form-control" id="modal_workflow_name">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="btn-group">
          <button type="submit" id="btn-edit-workflows" class="btn btn-primary"><i class="far fa-save" onclick="updateWorkflow()"></i></button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- modal editWorkflow-->

<div class="modal fade" id="modal-editEducationInProgress" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Education In Progress</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12 col-lg-6">
            <label><b>Start Date</b></label>
            <input class="form-control datepicker" name="edit_eip_date_start" id="edit_eip_date_start" autocomplete="off">
          </div>

          <div class="col-12 col-lg-6">
            <label><b>Expected Of Completion Date</b></label>
            <input class="form-control datepicker" name="edit_eip_date_end" id="edit_eip_date_end" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>University / Institution</b></label>
            <input type="text" class="form-control" name="edit_eip_institution" id="edit_eip_institution" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>Program</b></label>
            <input type="text" class="form-control" name="edit_eip_program" id="edit_eip_program" autocomplete="off">
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-12 col-lg-6">
            <label><b>Progress Paper In Hand</b></label>
            <input type="text" class="form-control" name="edit_eip_progress_paper" id="edit_eip_progress_paper" autocomplete="off">
          </div>
          <div class="col-12 col-lg-6">
            <label><b>Status</b></label>  
            <select class="form-control" name="edit_eip_status" id="edit_eip_status">
              <option value="1">Graduated</option>
              <option value="2">Withdrawn</option>
              <option value="3">Deferred</option>
              <option value="0">On Going</option>
            </select>
          </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" data-dismiss="modal" onclick="updateEducationInProgress()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editEmergencyContact" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Emergency Contact</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <label><b>Name</b></label>
            <input class="form-control" name="edit_ec_name" id="edit_ec_name" autocomplete="off">
          </div>

          <div class="col">
            <label><b>Relation</b></label>
            <input class="form-control" name="edit_ec_relation" id="edit_ec_relation" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>Phone No</b></label>
            <input class="form-control" name="edit_ec_phone" id="edit_ec_phone" autocomplete="off">
          </div>

          <div class="col">
            <label><b>Email</b></label>
            <input class="form-control" name="edit_ec_email" id="edit_ec_email" autocomplete="off">
          </div>
        </div>

        <div class="row mb-3">
          <div class="col">
            <label><b>Address</b></label>
            <textarea class="form-control" name="edit_ec_address" id="edit_ec_address" rows="2" autocomplete="off"></textarea>
          </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" data-dismiss="modal" onclick="updateEmergencyContact()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editProfessionalEducation" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Professional Education</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <label><b>Level</b></label>
            <input type="text"class="form-control" name="edit_professional_education_type" id="edit_professional_education_type" value='0' hidden>
            <input type="text"class="form-control" name="edit_professional_education_level" id="edit_professional_education_level" value="Professional" readonly>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>Name of Professional Association</b></label>
            <input type="text"class="form-control" name="edit_professional_education_associate_name" id="edit_professional_education_associate_name" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>Name of Course Study</b></label>
            <input type="text"class="form-control" name="edit_professional_education_program" id="edit_professional_education_program" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-lg-6">
            <label><b>Date Graduated</b></label>
            <input type="text"class="form-control datepicker" name="edit_professional_education_date_finish" id="edit_professional_education_date_finish" autocomplete="off">
          </div>

          <div class="col-12 col-lg-6">
            <label><b>Final Result</b></label>
            <input type="text"class="form-control" name="edit_professional_education_result" id="edit_professional_education_result" autocomplete="off">
          </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" data-dismiss="modal" onclick="updateProfessionalEducation()">changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-editProfessionalCertificate" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Professional Education</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <input type="text"class="form-control" name="edit_professional_certificate_type" id="edit_professional_certificate_type" value='1' hidden>
            <label><b>Name of Certification Body</b></label>
            <input type="text"class="form-control" name="edit_professional_certificate_associate_name" id="edit_professional_certificate_associate_name" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col">
            <label><b>Name of Certification Programme</b></label>
            <input type="text"class="form-control" name="edit_professional_certificate_program" id="edit_professional_certificate_program" autocomplete="off">
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-lg-6">
            <label><b>Date Finish</b></label>
            <input type="text"class="form-control datepicker" name="edit_professional_certificate_date_finish" id="edit_professional_certificate_date_finish" autocomplete="off">
          </div>

          <div class="col-12 col-lg-6">
            <label><b>Result</b></label>
            <input type="text"class="form-control" name="edit_professional_certificate_result" id="edit_professional_certificate_result" autocomplete="off">
          </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" data-dismiss="modal" onclick="updateProfessionalCertificate()">changes</button>
      </div>
    </div>
  </div>
</div>