<div class="collapse" id="collapseAttachment">	
	<div class="card">
		<div class="card-header text-center" role="tablist">
			<div class="nav nav-tabs nav-fill card-header-tabs">
				<a class="nav-item nav-link active" id="nav-employee-details-tab" data-toggle="tab" href="#nav-employee-details" role="tab" aria-controls="nav-employee-details" aria-selected="false">Employee Details</a>
				<a class="nav-item nav-link" id="nav-audit-tab" data-toggle="tab" href="#nav-forms" role="tab" aria-controls="nav-forms" aria-selected="false">Forms</a>
				<a class="nav-item nav-link" id="nav-correspondence-tab" data-toggle="tab" href="#nav-correspondence" role="tab" aria-controls="nav-correspondence" aria-selected="false">Correspondence</a>
				<!-- <a class="nav-item nav-link" id="nav-certificate-tab" data-toggle="tab" href="#nav-certificate" role="tab" aria-controls="nav-certificate" aria-selected="false">Certificates</a> -->
			</div>
		</div>
		<div class="card-body">
			<div class="tab-content" id="nav-tabContent">
				<div class="tab-pane fade show active" id="nav-employee-details" role="tabpanel" aria-labelledby="nav-employee-details-tab">
					<h4 class="card-title">Employee Details</h4>
					<hr>
					<button onclick="openNewAttachmentModal(1);" type="button" class="btn btn-primary btn-round btn-sm pull-right" style="margin-bottom:15px; width: 200px;"><i class="fa fa-upload"></i> Upload</button>
					<div class="table-responsive">
						<table id="" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th>No.</th>
									<th>Category</th>
									<th>Attachment</th>
									<th>Description</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								<?php 
									$i = 1;
									if($attachments[1]):
									foreach($attachments[1] as $attachment): ?>
										<tr id="attachment_<?php echo $attachment['id']; ?>" class="link-row" data-id="<?php echo $attachment['id']; ?>" data-attachment="<?php echo htmlspecialchars(json_encode($attachment), ENT_QUOTES, 'UTF-8'); ?>" data-main_id="1">
											<td scope="row"><?php echo $i++; ?></td>
											<td><?php echo $attachment['category_desc']; ?></td>
											<td><a target="_blank" href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>"><?php echo $attachment['file_name']; ?></a></td>
											<td><?php echo $attachment['description']; ?></td>
											<td class="text-center">
												<div class="btn-group btn-group-sm" role="group">
													<button type="button" class="btn btn-warning" onclick="openUpdateAttachmentModal(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Edit" <?php if($role == 'user' && $session_id != $attachment['created_by']){ ?> disabled<?php } ?>><i class="fas fa-edit"></i></button>
													<a download href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>" type="button" class="btn btn-primary" data-trigger="hover" data-toggle="tooltip" title="Download"><i class="fas fa-download"></i></a>
													<button type="button" class="btn btn-danger" onclick="deleteProfilingAttachment(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Delete"><i class="fas fa-trash"></i></button>
												</div>
											</td>
										</tr>
									<?php endforeach; ?>
								<?php endif; ?>
							</tbody>
						</table>
					</div>
				</div>

				<div class="tab-pane fade" id="nav-forms" role="tabpanel" aria-labelledby="nav-forms-tab">
					<h4 class="card-title">Forms</h4>
					<hr>
					<button onclick="openNewAttachmentModal(2);" type="button" class="btn btn-primary btn-round btn-sm pull-right" style="margin-bottom:15px; width: 200px;"><i class="fa fa-upload"></i> Upload</button>
					<div class="table-responsive">
						<table id="table_forms" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th>No.</th>
									<th>Category</th>
									<th>Attachment</th>
									<th>Description</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								<?php 
									$i = 1;
									if($attachments[2]):
									foreach($attachments[2] as $attachment): ?>
										<tr id="attachment_<?php echo $attachment['id']; ?>" class="link-row" data-id="<?php echo $attachment['id']; ?>" data-attachment="<?php echo htmlspecialchars(json_encode($attachment), ENT_QUOTES, 'UTF-8'); ?>" data-main_id="2">
											<td scope="row"><?php echo $i++; ?></td>
											<td><?php echo $attachment['category_desc']; ?></td>
											<td><a target="_blank" href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>"><?php echo $attachment['file_name']; ?></a></td>
											<td><?php echo $attachment['description']; ?></td>
											<td class="text-center">
												<div class="btn-group btn-group-sm" role="group">
													<button type="button" class="btn btn-warning" onclick="openUpdateAttachmentModal(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Edit" <?php if($role == 'user' && $session_id != $attachment['created_by']){ ?> disabled<?php } ?>><i class="fas fa-edit"></i></button>
													<a download href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>" type="button" class="btn btn-primary" data-trigger="hover" data-toggle="tooltip" title="Download"><i class="fas fa-download"></i></a>
													<button type="button" class="btn btn-danger" onclick="deleteProfilingAttachment(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Delete"><i class="fas fa-trash"></i></button>
												</div>
											</td>
										</tr>
									<?php endforeach; ?>
								<?php endif; ?>
							</tbody>
						</table>
					</div>
				</div>

				<div class="tab-pane fade" id="nav-correspondence" role="tabpanel" aria-labelledby="nav-forms-tab">
					<h4 class="card-title">Correspondence</h4>
					<hr>
					<button onclick="openNewAttachmentModal(3);" type="button" class="btn btn-primary btn-round btn-sm pull-right" style="margin-bottom:15px; width: 200px;"><i class="fa fa-upload"></i> Upload</button>
					<div class="table-responsive">
						<table id="table_correspondence" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th>No.</th>
									<th>Category</th>
									<th>Attachment</th>
									<th>Description</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								<?php 
									$i = 1;
									if($attachments[3]):
									foreach($attachments[3] as $attachment): ?>
										<tr id="attachment_<?php echo $attachment['id']; ?>" class="link-row" data-id="<?php echo $attachment['id']; ?>" data-attachment="<?php echo htmlspecialchars(json_encode($attachment), ENT_QUOTES, 'UTF-8'); ?>" data-main_id="3">
											<td scope="row"><?php echo $i++; ?></td>
											<td><?php echo $attachment['category_desc']; ?></td>
											<td><a target="_blank" href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>"><?php echo $attachment['file_name']; ?></a></td>
											<td><?php echo $attachment['description']; ?></td>
											<td class="text-center">
												<div class="btn-group btn-group-sm" role="group">
													<button type="button" class="btn btn-warning" onclick="openUpdateAttachmentModal(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Edit" <?php if($role == 'user' && $session_id != $attachment['created_by']){ ?> disabled<?php } ?>><i class="fas fa-edit"></i></button>
													<a download href="<?php echo base_url($attachment['file_location'].$attachment['file_name']); ?>" type="button" class="btn btn-primary" data-trigger="hover" data-toggle="tooltip" title="Download"><i class="fas fa-download"></i></a>
													<button type="button" class="btn btn-danger" onclick="deleteProfilingAttachment(<?php echo $attachment['id']; ?>);" data-trigger="hover" data-toggle="tooltip" title="Delete"><i class="fas fa-trash"></i></button>
												</div>
											</td>
										</tr>
									<?php endforeach; ?>
								<?php endif; ?>
							</tbody>
						</table>
					</div>
				</div>

				<!-- <div class="tab-pane fade" id="nav-certificate" role="tabpanel" aria-labelledby="nav-forms-tab">
					<h4 class="card-title">Certificates</h4>
					<hr>
					<div class="table-responsive">
						<table id="table_certificate" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th>No.</th>
									<th>Category</th>
									<th>Attachment</th>
								</tr>
							</thead>
							<tbody>
								<?php 
									// $i = 1;
									// if($profiling_attachment_all):
									// foreach($profiling_attachment_all as $profiling_attachment_all): 

									// 	if($profiling_attachment_all['type'] == 'Academic Education'){
									// 		$mode = 1;
									// 	} else if($profiling_attachment_all['type'] == 'Professional Membership'){
									// 		$mode = 2;
									// 	} else if($profiling_attachment_all['type'] == 'Professional License'){
									// 		$mode = 3;
									// 	} else if($profiling_attachment_all['type'] == 'Recognition'){
									// 		$mode = 4;
									// 	} else if($profiling_attachment_all['type'] == 'Professional Certificate' || $profiling_attachment_all['type'] == 'Professional Education'){
									// 		$mode = 6;
									// 	}

										?>
										<tr>
											<td scope="row"><?php //echo $i++; ?></td>
											<td><?php //echo $profiling_attachment_all['type']; ?></td>
											<td><a target="_blank" href="<?php //echo base_url('hr/staffProfile/openAttachment/'.$profiling_attachment_all['mask_id'].'/'.$mode)?>"><?php //echo $profiling_attachment_all['attachment_name']; ?></a></td>
										</tr>
									<?php //endforeach; ?>
								<?php //endif; ?>
							</tbody>
						</table>
					</div>
				</div> -->

			</div>
		</div>
	</div><br>			
</div>

<div class="modal fade" id="attachmentModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Add New Attachment</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<input type="hidden" id="staff_id_pocket_file" name="staff_id_pocket_file" value="<?php echo $staff_id; ?>">
			<div class="modal-body">
				<form id="attachmentForm" class="form">
					<div class="form-group">
						<label for="attachmentType">Category</label>
						<select id="attachmentType" class="custom-select">
							<option value="">Please Choose</option>
							<?php if(!empty($category)) foreach($category as $category): ?>
								<option value="<?php echo $category['id']; ?>"><?php echo $category['description']; ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					<div class="form-group">
						<label for="attachmentDesc">Description</label>
						<input type="text" class="form-control" name="attachmentDesc" id="attachmentDesc" aria-describedby="attachmentDescHelp" placeholder="Enter description.">
					</div>
					<div class="form-group">
						<label for="userAttachment">Upload Attachment</label>
						<input type="file" required data-parsley-error-message="Attachment is required." class="form-control" name="userAttachment" id="userAttachment" aria-describedby="attachmentHelp">
					</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" onclick="uploadAttachment();" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="updateAttachmentModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Update Attachment</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<input type="hidden" id="staff_id_pocket_file" name="staff_id_pocket_file" value="<?php echo $staff_id; ?>">
			<input type="hidden" name="update_attachmentID" id="update_attachmentID" value="">
			<div class="modal-body">
				<form id="updateAttachmentForm" class="form">
					<div class="form-group">
						<label for="update_attachmentType">Category</label>
						<select id="update_attachmentType" class="custom-select">
							<option value="">Please Choose</option>
							<?php if (!empty($category)) foreach($category as $category): ?>
								<option value="<?php echo $category['id']; ?>"><?php echo $category['description']; ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					<div class="form-group">
						<label for="attachmentDesc">Description</label>
						<input type="text" class="form-control" name="update_attachmentDesc" id="update_attachmentDesc" aria-describedby="attachmentDescHelp" placeholder="Enter description.">
					</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" onclick="updateProfilingAttachment();" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	function openNewAttachmentModal(main_id)
	{
		clearForm('#attachmentForm');

		var postData = {
			'main_id' : main_id
		};

		$.ajax({
			url: "<?php echo base_url('hr/StaffProfile/get_attachment_category'); ?>",
			type: "POST",
			data: postData,
			dataType: "JSON",
			success: function(data) {
				if(data.status == 'success')
				{
					var items = [];
                    items.push('<option>Please Select</option>');
                    for (var i = 0; i < data.message.length; i++) {
                        items.push('<option value="' + data.message[i].id + '">'
                                + data.message[i].description + '</option>');
                    }
                    jQuery("#attachmentType").empty();
                    jQuery("#attachmentType").append(items.join('</br>'));
				}
			}
		});

		$("#attachmentDesc").val();
		$("#attachmentModal").modal("show");
	}

	function uploadAttachment()
	{
		validateForm("#attachmentForm", "Are you sure you want to upload this attachment?", function(){
			if($('#userAttachment').prop('files').length > 0)
			{
				var attachment_data = new FormData();
				
				attachment_data.append("staff_id", $("#staff_id_pocket_file").val());
				attachment_data.append("attachment", $('#userAttachment').prop('files')[0]);
				attachment_data.append("description", $('#attachmentDesc').val());
				attachment_data.append("category_id", $("#attachmentType").val());

				$.ajax({
					url: "<?php echo base_url('hr/StaffProfile/uploadAttachment'); ?>",
					type: "POST",
					data: attachment_data,
					dataType: "JSON",
					processData: false,
					contentType: false,
					success: function(data) {
						if(data.status == 'Success')
						{
							$('#attachmentModal').modal('hide');
							
							localStorage.setItem("status",data.status);
							localStorage.setItem("msg",data.msg);

							location.reload();
						}
					}
				});
			}
		});
	}

	function deleteProfilingAttachment(id)
	{
		toastConfirm("Are you sure you want to delete this attachment?", function(){
			$.ajax({
				type: 'POST',
				url: '<?php echo base_url('hr/StaffProfile/deleteAttachment'); ?>',
				data: {
					'id' : id
				},
				dataType: 'JSON',
				success: function(data) {
					if(data.status == 'Success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		})
	}

	function openUpdateAttachmentModal(attachment_id)
	{
		var attachment_data = $("#attachment_"+attachment_id).data('attachment');

		var postData = {
			'main_id' : $("#attachment_"+attachment_id).data('main_id')
		};

		$.ajax({
			url: "<?php echo base_url('hr/StaffProfile/get_attachment_category'); ?>",
			type: "POST",
			data: postData,
			dataType: "JSON",
			success: function(data) {
				if(data.status == 'success')
				{
					var items = [];
                    items.push('<option>Please Select</option>');
                    for (var i = 0; i < data.message.length; i++) {
                        items.push('<option value="' + data.message[i].id + '">'
                                + data.message[i].description + '</option>');
                    }
                    jQuery("#update_attachmentType").empty();
                    jQuery("#update_attachmentType").append(items.join('</br>'));
				}
			}
		});

		$('#update_attachmentID').val(attachment_data.id);
		$('#update_attachmentDesc').val(attachment_data.description);

		$("#updateAttachmentModal").modal("show");
	}

	function updateProfilingAttachment()
	{
		var id = $('#update_attachmentID').val();
		
		validateForm("#updateAttachmentForm", "Are you sure you want to update this attachment?", function(){
			var update_data = {
				'id' : id,
				'description' : $('#update_attachmentDesc').val(),
				'category_id' : $('#update_attachmentType').val(),
			};
			
			$.ajax({
				url: "<?php echo base_url('hr/StaffProfile/updateAttachment'); ?>",
				type: "POST",
				data: update_data,
				dataType: "JSON",
				success: function(data) {
					if(data.status == 'Success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		})
	}

</script>