<div class="collapse" id="collapseFamily">
	<div class="card card-body">
		<div class="container">
			<div class="row">
				<h4 class="card-title float-left">Family Info</h4>
				<div class="btn-group ml-auto float-right">
					<button type="button" class="btn btn-primary btn-sm d-print-none <?php echo $btn_hidden ?>" style="margin-bottom:15px; width: 200px;" onclick="openFamilyInfoModal();" data-trigger="hover" data-tooltip="tooltip" title="Add New Family Info">
						<i class="fa fa-plus"></i> Add New
					</button>
				</div>
			</div>
			<div class="row">
				<small><i style="color: red;">* Please add at least one Next of Kin from your family members.</i></small>
			</div>
		</div>

		<hr>

		<div class="table-responsive">
			<table id="table_family" class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>Detail</th>
						<th>Status</th>
						<th>Created At</th>
						<?php if($btn_hidden == ''): ?>
							<th>Action</th>
						<?php endif ?>
					</tr>
				</thead>
				<tbody>							
					
					<?php if($families) foreach ($families as $key => $family): ?>								
						<tr class="link-row" data-id="">
							<?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($btn_hidden == ''){ ?>	
								<?php if(strtolower($family->action_type) == 'personal data update' && date('m-Y',strtotime($family->created_at)) == date('m-Y', $live_date)){ ?>					
									<td class="text-center">
										<div class="btn-group" role="group">
											<button id="editFamilyInfoButton" type="button" class="btn btn-success btn-sm d-print-none" onclick="editFamilyInfo(<?php echo $family->id; ?>)" title="Edit Family Info" data-profilingID="<?php echo $family->profiling_id; ?>" data-userID="<?php echo $family->user_id; ?>"><span class="fa fa-edit"></span></button>
											<button type="button" class="btn btn-danger btn-sm d-print-none" onclick="deleteFamilyInfo(<?php echo $family->id; ?>)" title="Delete family"><span class="fa fa-trash"></span></button>
										</div>
									</td> 
								<?php } else { ?>
									<td class="text-center">
										<div class="btn-group" role="group">
											<button class="btn btn-success btn-sm d-print-none" disabled style="cursor: not-allowed;" data-trigger="hover" data-tooltip="tooltip" title="Not allowed to update"><i class="fas fa-edit" ></i></button>
											<button class="btn btn-danger btn-sm d-print-none" disabled style="cursor: not-allowed;" data-trigger="hover" data-tooltip="tooltip" title="Not allowed to delete"><i class="fas fa-trash-alt"></i></button>
										</div>
									</td> 
								<?php } ?>
							<?php } ?>
						</tr>	
					<?php endforeach ?>
				</tbody>
			</table>
		</div>
	</div><br>
</div>

<!-- Modal -->
<div class="modal fade" id="familyInfoModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="racks-modal-title">Add Family Member</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="familyInfoForm" class="form">
					<div class="form-row">
						<div class="col-12 col-sm-6">
							<label for="familyInfo_name">Name</label>
							<input type="text"class="form-control" name="familyInfo_name" id="familyInfo_name">
						</div>
						<div class="col-12 col-sm-6">
							<label for="familyInfo_relation">Relation</label>
							<select class="form-control" name="familyInfo_relation" id="familyInfo_relation">
								<?php foreach ($relations as $key => $relation): ?>
									<option value="<?php echo $relation->id; ?>"><?php echo $relation->relations; ?></option>
								<?php endforeach ?>
							</select>
						</div>
					</div>
					<div class="form-row">
						<div class="col-12 col-sm-6">
							<label for="familyInfo_nric">NRIC</label>
							<input type="text"class="form-control" name="familyInfo_nric" id="familyInfo_nric">
						</div>
						<div class="col-12 col-sm-6">
							<label for="familyInfo_bod">Birthdate</label>
							<input class="datepicker form-control" name="familyInfo_bod" id="familyInfo_bod">
						</div>
					</div>
					<div class="form-row">
						<div class="col-12 col-sm-6">
							<label for="familyInfo_phone" class="col-form-label">Phone No</label>
							<input type="text" class="form-control" name="familyInfo_phone" id="familyInfo_phone">
						</div>
						<div class="col-12 col-sm-6">
							<label for="familyInfo_email" class="col-form-label">Email</label>
							<input type="text" class="form-control" name="familyInfo_email" id="familyInfo_email">
						</div>
					</div>
					<div class="form-row">
						<div class="col-12">
							<label for="familyInfo_address" class="col-form-label">Address</label>
							<input type="text" class="form-control" name="familyInfo_address" id="familyInfo_address">
						</div>
					</div>
					<div class="form-row">
						<div class="col-12 col-sm-6">
							<label for="familyInfo_oku" class="col-form-label">OKU Status (Yes/No)</label>
							<select class="form-control" name="familyInfo_oku" id="familyInfo_oku">
								<option value="0">Yes</option>
								<option value="1">No</option>
							</select>
						</div>
						<div class="col-12 col-sm-6">
							<label for="familyInfo_student" class="col-form-label">Student (Yes/No)</label>
							<select class="form-control" name="familyInfo_student" id="familyInfo_student">
								<option value="0">Yes</option>
								<option value="1">No</option>
							</select>
						</div>
					</div>
					<div class="form-row d-none" id="sect-family-occupation">
						<div class="col-12">
							<label for="familyInfo_occupation">Occupation</label>
							<input type="text"class="form-control" name="familyInfo_occupation" id="familyInfo_occupation">
						</div>
					</div>
					<div class="form-row">
						<div class="col-12">
							<label for="familyInfo_academic">Academic Level</label>
							<select class="form-control" name="familyInfo_academic" id="familyInfo_academic">
								<?php foreach ($qualifications as $key => $qualification): ?>
									<option value="<?php echo $qualification->id; ?>"><?php echo $qualification->level; ?></option>
								<?php endforeach ?>
							</select>
						</div>
					</div>
					<div class="form-row">
						<div class="col-12">
							<label for="familyInfo_institution" class="col-form-label">Academic Institution</label>
							<input type="text" class="form-control" name="familyInfo_institution" id="familyInfo_institution">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div class="btn-group float-right">
					<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
					<button type="button" id="saveFamilyInfoButton" onclick="saveFamilyInfo();" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	$('#familyInfo_student').change(function(){

		let select = $('#familyInfo_student').val();

		if (select == 1) {
			$('#sect-family-occupation').removeClass('d-none');
			$('#sect-family-occupation').addClass('d-block');
		}else {
			$('#sect-family-occupation').addClass('d-none');
			$('#sect-family-occupation').removeClass('d-block');
		}
	});

	function openFamilyInfoModal()
	{

		clearForm("#familyInfoForm");

		$('#familyInfoModal').find('#racks-modal-title').text('Add Family Member');
        $('#saveFamilyInfoButton').attr('onclick', 'saveFamilyInfo()');
		$('#familyInfoModal').modal('show');
	}

	function saveFamilyInfo()
	{
		var postData = {
			'profiling_id' 	:$("#profiling_id_new").val(),
			'name' 			: $("#familyInfo_name").val(),
			'ic_no' 		: $("#familyInfo_nric").val(),
			'relation' 		: $("#familyInfo_relation").val(),
			'birthdate' 	: $("#familyInfo_bod").val(),
			'phone_no' 		: $("#familyInfo_phone").val(),
			'email' 		: $("#familyInfo_email").val(),
			'address' 		: $("#familyInfo_address").val(),
			'oku_status' 			: $("#familyInfo_oku").val(),
			'study_status' 			: $("#familyInfo_student").val(),
			'academic_level' 		: $("#familyInfo_academic").val(),
			'academic_institution' 	: $("#familyInfo_institution").val(),
			'occupation' 			: $("#familyInfo_occupation").val(),
		};

		$.ajax({
			type: 'POST',
			url: '<?php echo base_url('hr/Myprofile/saveFamilyInfo'); ?>',
			data: postData,
			dataType: 'JSON',
			success: function(data) {
				if(data.status == 'success')
				{
					localStorage.setItem("status",data.status);
					localStorage.setItem("msg",data.msg);

					location.replace(data.redirect);
				}
			}
		});
	}

	function editFamilyInfo(familyInfo_id)
	{
		clearForm("#familyInfoForm");
		var profiling_id = $("#profiling_id_new").val();

		$.ajax({
			type: 'POST',
			url: '<?php echo base_url('hr/Myprofile/getFamilyInfo'); ?>',
			data: {
				'familyInfo_id' : familyInfo_id,
				'profiling_id'  : profiling_id
			},
			dataType: 'JSON',
			success: function(data) {
				if ($.trim(data.status) == "success")
                {
                    var familyInfoData = data.familyInfo;

                    $("#familyInfo_name").val(familyInfoData[0]['name']);
                    $("#familyInfo_address").val(familyInfoData[0]['address']);
                    $("#familyInfo_nric").val(familyInfoData[0]['ic_no']);
                    $("#familyInfo_relation").val(familyInfoData[0]['relation']);
                    $("#familyInfo_bod").val(moment(familyInfoData[0]['birthdate']).format('DD-MM-YYYY'));
                    $("#familyInfo_phone").val(familyInfoData[0]['phone_no']);
                    $("#familyInfo_email").val(familyInfoData[0]['email']);
					$("#familyInfo_oku").val(familyInfoData[0]['oku_status']);
					$("#familyInfo_student").val(familyInfoData[0]['study_status']);
					$("#familyInfo_academic").val(familyInfoData[0]['academic_lavel']);
					$("#familyInfo_institution").val(familyInfoData[0]['academic_institution']);
					$("#familyInfo_occupation").val(familyInfoData[0]['occupation']);

					if(familyInfoData[0]['study_status'] == 0){
						$('#sect-family-occupation').addClass('d-none');
						$('#sect-family-occupation').removeClass('d-block');
					}else{
						$('#sect-family-occupation').removeClass('d-none');
						$('#sect-family-occupation').addClass('d-block');
					}
					
                }
			}
		});

		$('#familyInfoModal').find('#racks-modal-title').text('Edit Family Member');
        $('#saveFamilyInfoButton').attr('onclick', 'save_editFamilyInfo('+ familyInfo_id +')');
		$('#familyInfoModal').modal('show');
	}

	function save_editFamilyInfo(familyInfo_id) 
	{
		var postData = {
			'id'		: familyInfo_id,
			'name' 		: $("#familyInfo_name").val(),
			'ic_no' 	: $("#familyInfo_nric").val(),
			'relation' 	: $("#familyInfo_relation").val(),
			'birthdate' : $("#familyInfo_bod").val(),
			'phone_no' 	: $("#familyInfo_phone").val(),
			'email' 	: $("#familyInfo_email").val(),
			'address' 	: $("#familyInfo_address").val(),
			'oku_status' 			: $("#familyInfo_oku").val(),
			'study_status' 			: $("#familyInfo_student").val(),
			'academic_level' 		: $("#familyInfo_academic").val(),
			'academic_institution' 	: $("#familyInfo_institution").val(),
			'occupation' 			: $("#familyInfo_occupation").val(),
		};

		$.ajax({
			type: 'POST',
			url: '<?php echo base_url('hr/Myprofile/save_editFamilyInfo'); ?>',
			data: postData,
			dataType: 'JSON',
			success: function(data) {
				if(data.status == 'success')
				{
					localStorage.setItem("status",data.status);
					localStorage.setItem("msg",data.msg);

					location.replace(data.redirect);
				}
			}
		});
	}

	function deleteFamilyInfo(familyInfo_id)
	{
		toastConfirm("Are you sure you want to delete this family member?", function(){

			$.ajax({
				type: 'POST',
				url: '<?php echo base_url('hr/Myprofile/deleteFamilyInfo'); ?>',
				data: {
					'id' : familyInfo_id
				},
				dataType: 'JSON',
				success: function(data) {
					if(data.status == 'success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.replace(data.redirect);
					}
				}
			});
		})
	}
</script>	