<div class="collapse" id="collapseFamily">
	<div class="card card-body">
		<h4 class="card-title">Family Info</h4>
		<hr>
		<div class="container">
			<?php if ($role == 'admin'): ?>
				<div class="row">
					<div class="btn-group ml-auto">
						<a class="btn btn-info btn-sm" style="margin-bottom:15px; width: 200px;" href="<?php echo base_url('/hr/StaffProfile/actionReport/'.$staff_id.'/2'); ?>" target="_blank">
							<i class="fa fa-print"></i> Print
						</a>
					</div>
				</div>
			<?php endif ?>
			
		</div>
		<div class="table-responsive">
			<table id="table_family" class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>Action type ( effective date ) </th>
						<th>Detail</th>
						<th>Status</th>
						<th>Created At</th>
						<!-- <?php if($role == 'admin'): ?>
						<th>Action</th>
						<?php endif ?> -->
					</tr>
				</thead>
				<tbody>							
					
					<?php if($families) foreach ($families as $key => $family): ?>								
						<tr class="link-row" data-id="">
							<td scope="row">
								<?php
									echo $family->action_type.'<br/><b>( '.date('d-F-Y',strtotime($family->action_efective_date)).' )</b>';
								?>
							</td>
							<?php
								$birthYear = date('Y',strtotime($family->birthdate));
								$currentYear = date('Y');
								$age = $currentYear - $birthYear;
							?>
							<td>
								<?php echo '<b>Name : </b>'.$family->name
										.'<br/><b>Nric : </b>'.$family->ic_no
										.'<br/><b>Relation : </b>'.$family->relations
										.'<br/><b>Birthdate : </b>'.mysql_to_date_format(!empty($family->birthdate)?$family->birthdate:null)
										.'<br/><b>Contact Number : </b>'.$family->phone_no
										.'<br/><b>Email : </b>'.$family->email
										.'<br/><b>Age : </b>'.$age
										.'<br/><b>Occupation : </b>'.$family->occupation
										.'<br/><b>Address : </b>'.$family->address
										.'<br/><b>Academic level : </b>'.$family->level_academic
										.'<br/><b>Academic institution : </b>'.$family->academic_institution; ?>
							</td>
							
							<td>
								<?php if ($family->oku_status == 0): ?>
									<span class="badge badge-primary"><i class="fas fa-wheelchair"></i> OKU</span>
								<?php endif ?>

								<?php if ($family->oku_status == 1): ?>
									<span class="badge badge-success">Not OKU</span>
								<?php endif ?>
								<br/>
								<?php if ($family->study_status == 0): ?>
									<span class="badge badge-primary"><i class="fas fa-graduation-cap"></i> Student</span>
								<?php endif ?>

								<?php if ($family->study_status == 1): ?>
									<span class="badge badge-success">Not Student</span>
								<?php endif ?>
							</td>

							<td><?php echo $family->created_at; ?></td>							
							<?php if($role == 'admin'): ?>
								<!-- <td class="text-center">
									<div class="btn-group" role="group">
										<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#familyModalView"><i class="fas fa-eye"></i></button>
										<button class="btn btn-success btn-sm" data-content="<?php //echo base64_encode(json_encode($family)); ?>" onclick="editFamilyInfo(this)" data-toggle="modal" data-target="#familyModal"><i class="fas fa-edit"></i></button>
										<button class="btn btn-danger btn-sm" onclick="deleteFamily(<?php //echo $family->id; ?>)"><i class="fas fa-trash"></i></button>
									</div>
								</td> -->
							<?php endif ?>
							

						</tr>	
					<?php endforeach ?>
				</tbody>
			</table>
		</div>
	</div><br>
</div>

<div class="modal fade" id="familyModal">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="racks-modal-title">Edit Family Details</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<form action="<?php echo base_url('/hr/StaffProfile/createFamilyMember/'.$staff_id); ?>" method="POST" class="form-horizontal" id="mdl-family-info-form">
				<div class="modal-body">
					<input type="hidden" class="form-control" id="mdl-family-info-id" name="id">
					<div class="form-group">
						<label for="family_name">Name</label>
						<input type="text" class="form-control" id="mdl-family-name" aria-describedby="emailHelp" placeholder="Enter Name" name="name">
					</div>
					<div class="form-group">
						<label for="family_ic">NRIC No</label>
						<input type="text" class="form-control" id="mdl-family-ic" aria-describedby="emailHelp" placeholder="Enter NRIC No" name="ic_no">
					</div>	
					<div class="form-group">
						<label for="relationship">Relations</label>
						<select name="relation" id="mdl-family-relationship" class="form-control">
							<?php foreach ($relations as $key => $relate): ?>
								<option value="<?php echo $relate->id; ?>"><?php echo $relate->relations; ?></option>
							<?php endforeach ?>
						</select>
					</div>
					<div class="row form-group">
						<div class="col">
							<label for="relationship">Birthdate</label>
							<input type="text" class="datepicker form-control form-control-sm" name="birthdate" id="mdl-family-birthdate" autocomplete="off">
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label for="family_phone_no">Phone No</label>
							<input type="text" class="form-control" id="mdl-family-contact" aria-describedby="emailHelp" placeholder="Enter Phone No" name="phone_no">
						</div>
						<div class="col">
							<label for="family_email">Email</label>
							<input type="email" class="form-control" id="mdl-family-email" aria-describedby="emailHelp" placeholder="Enter Email" name="email">
						</div>
					</div>	
					<div class="form-group">
						<label for="family_address">Address</label>
						<input type="text" class="form-control" id="mdl-family-address" aria-describedby="emailHelp" placeholder="Enter Address" name="address">
					</div>	

					<div class="form-row">
						<div class="col">
							<label>OKU Status</label>
							<select class="form-control" name="oku_status" id="mdl-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="mdl-family-student-status" onchange="studentStatusFamilyInfo()" name="study_status">
								<option value="0">Yes</option>
								<option value="1">No</option>
							</select>
						</div>
					</div>

					<div class="form-group d-none" id="mdl-family-occupation">
						<label for="family_occupation">Occupation</label>
						<input type="text" class="form-control" id="mdl-family-occupation" aria-describedby="emailHelp" placeholder="Enter Occupation" name="occupation" autocomplete="off">
					</div>

					<div class="form-group" id="mdl-family-academic">
						<label>Academic</label>
						<select class="form-control" name="academic_lavel" id="mdl-family-academic_lavel">
							<option>Select Academic Level</option>
							<?php if($qualifications) foreach ($qualifications as $key => $qualify): ?>
								<option value="<?php echo $qualify->id; ?>"><?php echo $qualify->level; ?></option>
							<?php endforeach ?>
						</select>
						<label>University / Institution</label>
						<input type="text" class="form-control" name="academic_institution" id="mdl-family-academic_institution" placeholder="Enter Current Acaddemic Institution">
					</div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger btn-sm" style="margin-bottom:15px; width: 200px;" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
					<button type="submit" class="btn btn-success btn-sm" style="margin-bottom:15px; width: 200px;"><i class="fa fa-save"></i> Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>


<!-- view modal -->

<div class="modal fade" id="familyModalView" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document"style="max-width:80%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Family Member Information</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>Name </label>
      			<input type="text" class="form-control" disabled>
      		</div>
      		<div class="col">
      			<label>Relations</label>
      			<input type="text" class="form-control" disabled>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Nric </label>
      			<input type="text" class="form-control" disabled>
      		</div>
      		<div class="col">
      			<label>Birthdate</label>
      			<input type="text" class="form-control" disabled>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Email </label>
      			<input type="text" class="form-control" disabled>
      		</div>
      		<div class="col">
      			<label>Phone No</label>
      			<input type="text" class="form-control" disabled>
      		</div>
      	</div>

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

      	<div class="row">
      		<div class="col">
      			<label>OKU Status </label>
      			<input type="text" class="form-control" disabled>
      		</div>
      		<div class="col">
      			<label>Student Status</label>
      			<input type="text" class="form-control" disabled>
      		</div>
      	</div>

      	<div class="row">
      		<div class="col">
      			<label>Academic Lavel </label>
      			<input type="text" class="form-control" disabled>
      		</div>
      		<div class="col">
      			<label>University / Institution</label>
      			<input type="text" class="form-control" disabled>
      		</div>
      	</div>

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

<!-- ! view modal -->
