<section id="sect-family-info" class="border p-3 <?php echo (!empty($default)&& $default=='open')?'':'d-none'; ?>">
	<div class="row title-row" data-toggle="collapse" href="#collapseFamilyInfo" role="button" aria-expanded="false">
		<div class="col">
			<h3 id="sect-family-info-header">Family Info</h3>
		</div>
	</div>
	<div id="collapseFamilyInfo">
			<div class="row">
				<div class="col-12 col-lg-6">
					<label><b>Name</b></label>
					<input type="text" class="form-control" name="family_name">
				</div>
				<div class="col-12 col-lg-6">
					<label><b>NRIC No / passport </b></label>
					<input type="text" class="form-control" name="family_nric">
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-6">
					<label><b>Relations</b></label>
					<div class="input-group mb-3">
					  	<select class="form-control" name="family_relation">
							<?php foreach ($relations as $key => $relation): ?>
								<option value="<?php echo $relation->id; ?>"><?php echo $relation->relations; ?></option>
							<?php endforeach ?>
						</select>
					  <div class="input-group-append">
					    <button class="btn btn-warning btn-sm" type="button" data-toggle="modal" data-target="#newRelation"><i class="fas fa-plus"></i></button>
					  </div>
					</div>
				</div>
				<div class="col-12 col-lg-6">
					<label><b>Birthdate</b></label>
					<input type="text" class="datepicker form-control" name="family_birthdate" value="<?php echo date('d-m-Y'); ?>">
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-6">
					<label><b>Contact Number</b></label>
					<div class="input-group mb-3">
					  <div class="input-group-prepend">
					    <select class="form-control" name="family_contact_header">
					    	<?php 
					    	$phone_codes = $countries;
					    	usort($phone_codes, function($a,$b){
					    		return $a->phone_code > $b->phone_code;
					    	}); 

					    	?>
					    	<?php foreach ($phone_codes as $key => $ct): ?>
					    		<?php if (!empty($ct->phone_code)): 
					    			$list = explode(',', $ct->phone_code);
					    		?>
					    		<?php foreach ($list as $key => $ls): ?>
					    			<option value="<?php echo $ls; ?>" <?php echo ($ls == 60)?'selected':''; ?>><?php echo $ls; ?></option>					    			
					    		<?php endforeach ?>
					    		<?php endif ?>
					    	<?php endforeach ?>
					    	
					    </select>
					  </div>
					  <input type="text" class="form-control" name="family_contact">
					</div>
				</div>
				<div class="col-12 col-lg-6">
					<label><b>Email</b></label>
					<input type="email" class="form-control" name="family_email">
				</div>
			</div>

			<div class="row">
				<div class="col-12">
					<label><b>Address</b></label>
					<input type="text" class="form-control" rows="5" name="family_address">
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-6">
					<label><b>OKU Status</b></label>
					<select class="form-control" name="family_dissability">
						<option value="0">Yes</option>
						<option value="1">No</option>
					</select>
				</div>
				<div class="col-12 col-lg-6">
					<label><b>Student Status</b></label>
					<select class="form-control" name="family_student" onchange="isFamilyStudent();">
						<option value="0">Yes</option>
						<option value="1">No</option>
					</select>
					
				</div>
			</div>

			<div id="sect-family-occupation" class="row">
				<div class="col-12">
					<label><b>Occupation</b></label>
					<input type="text" class="form-control" name="family_occupation">
				</div>
			</div>

			<div class="row">
				<div class="col-12">
					<label><b>Highest academic level</b></label>
					<div class="input-group mb-3">
					  	<select class="form-control"name="family_academic">
							<?php foreach ($qualifications as $key => $qualification): ?>
								<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
							<?php endforeach ?>
						</select>
					  <div class="input-group-append">
					    <button class="btn btn-warning btn-sm" type="button" data-toggle="modal" data-target="#newAcademicLevel"><i class="fas fa-plus"></i></button>
					  </div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-12">
					<label><b>University / Institution</b></label>
					<input type="text" class="form-control" name="family_institution">
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-2 ml-auto mt-3 mb-3">
					<button type="button" class="btn btn-primary btn-block" onclick="addFamilyInfo()" data-tooltip="tooltip" title="" data-original-title="Add new family information"><i class="fas fa-plus"></i></button>
				</div>
			</div>

			<div class="row">
				<div class="col-12">
					<div class="table-responsive">
						<table class="table table-bordered" id="tbl-familyInfo">
							<thead>
								<tr>
									<th>Detail</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<!-- pcb setting -->
			<div class="row">
				<div class="col-12">
					<h3 id="sect-pcb-header">PCB Consideration</h3>
				</div>
			</div>

			<div class="row">
				
				<div class="col-12">
					<label><b>Name</b></label>
					<select class="form-control" id="pcb_name" name="pcb_name"></select>
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-6">
					<label><b>Responsibility</b></label>
					<select class="form-control" name="pcb_responsibility">
						<option value="0">Employee</option>
						<option value="1">Spouse</option>
					</select>
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-2 mb-3 ml-auto">
					<button type="button" class="btn btn-primary btn-block" onclick="addPCB()"  data-tooltip="tooltip" title="" data-original-title="add PCB Consideration">
						<i class="fas fa-plus"></i>
					</button>
				</div>
			</div>

			<div class="row">
				<div class="col-12">
					<div class="table-responsive">
						<table class="table table-bordered" id="tbl-pcb">
							<thead>
								<tr>
									<th>Name</th>
									<th>Nric no</th>
									<th>Responsibility</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
			</div>
			<!-- pcb setting -->
	</div>
</section>
<!-- family info