<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="com.csc.library.utilities.CheckNull, com.csc.library.utilities.CscCalendar, com.csc.library.databean.MyDataList"%>
<%@ include file="../CHECKPROFILE.jsp" %>
<!DOCTYPE html>
<html  ng-app="APP_MBO">
	<head>
		<title>Employee View</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<script src="../public/lib/angular-resource/angular-resource.min.js"></script>
		<script src="JS/APP_MBO/Base.controller.js"></script>
		<script src="JS/APP_MBO/services.js"></script>
		<script src="JS/APP_MBO/Profile.controller.js"></script>
		<script src="JS/APP_MBO/ObjectiveSetting.controller.js"></script>
		<script src="JS/APP_MBO/ObjectiveFirstHalfReview.controller.js"></script>
		<script src="JS/APP_MBO/ObjectiveAppraisal.controller.js"></script>
		<script src="JS/APP_MBO/CareerVision.controller.js"></script>
		<link rel="stylesheet" type="text/css" href="css/APP_MBO/style.css" />
		<script type="text/javascript">
			function NoDataFound(errcode){
				window.location.href="CONTROLERR.jsp?errcode="+errcode;
			}
			/*jQuery(document).ready(function ($) {
				$('#tabs').tab();
			});*/
		
		</script>
		
		<section>
			<form name="cscform" method="post" action="?" >
				<div class="container" id="mainblock">
					<div class="row">
						<div class="col-md-12">
							<img src="Images/Logo.jpg" />
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<h2><strong>PERFORMANCE AND</strong></h2>
							<h2><strong>MANAGEMENT DEVELOPMENT</strong></h2>
							<hr style="border-top: 5px solid #6F6F6F;" />
						</div>
					</div>
					<div class="row">
						<div class="col-md-10 col-md-offset-2">
							<strong>
								FY 2016
								<br/>
								Appraisal & Development Form
							</strong>
						</div>
					</div>
					<br/>
					<br/>
					<div class="row">
						<div class="col-md-10 col-md-offset-2">
							<span>
								Objectives Setting & Appraisal
								<br/>
								Contribution & Overall Appraisal
								<br/>
								Career Vision
							</span>
						</div>
					</div>
					<br/>
					<br/>
					<div id="content">
						<ul id="tabs" class="nav nav-tabs" data-tabs="tabs" >
							<li class="active"><a href="#profile" data-toggle="tab" class="black">Profile</a></li>
							<li><a href="#objective_setting" data-toggle="tab" class="black">Objective Setting</a></li>
							<li><a href="#objective_first_half_review" data-toggle="tab" class="black">Objective First Half Review</a></li>
							<li><a href="#objective_appraisal" data-toggle="tab" class="black">Objective Appraisal</a></li>
							<li><a href="#career_vision" data-toggle="tab" class="black">Career Vision</a></li>
							<li><a href="#overall" data-toggle="tab" class="black">Overall</a></li>
						</ul>
						<div id="my-tab-content" class="tab-content">

<!--################################################ Tab 1 ##################################################-->
							<div class="tab-pane active" id="profile" ng-controller="Profile">
								<br/>
								<table class="table table-bordered">
									<col width="20%" />
									<col width="50%" />
									<col width="10%" />
									<col width="20%" />
									<tr>
										<td>Name:</td>
										<td><strong>{{ aprraisee.fullname }}</strong></td>
										<td>Employee No:</td>
										<td><strong>{{ aprraisee.employeeid }}</strong></td>
									<tr/>
									<tr>
										<td>Title:</td>
										<td colspan="3"><strong>{{ aprraisee.jobname }}</strong></td>
									<tr/>
									<tr>
										<td>Department/Section:</td>
										<td colspan="3"><strong>{{ aprraisee.bu3name }}</strong></td>
									<tr/>
								</table>
								<br/>
								<br/>
								<table class="table table-bordered">
									<col width="20%" />
									<col width="20%" />
									<col width="20%" />
									<col width="20%" />
									<col width="20%" />
									<tr>
										<th class="bold-center bluehead"></th>
										<th class="bold-center bluehead">Name</th>
										<th class="bold-center bluehead">Signature (Start of the process and date)</th>
										<th class="bold-center bluehead">Signature (Middle of the process and date)</th>
										<th class="bold-center bluehead">Signature (End of the process and date)</th>
									</tr>
									<tr class="more-data-lg">
										<td><strong>Appraisee</strong></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="more-data-lg">
										<td><strong>Direct Appraiser</strong></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="more-data-lg">
										<td><strong>Project Director <br/>or Director <br/>with functional link</strong></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
									<tr class="more-data-lg">
										<td><strong>Appraiser + 1</strong></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</table>
							</div>
<!--################################################ End Tab 1 ##################################################-->

<!--################################################ Tab 2 ##################################################-->
							<div class="tab-pane" id="objective_setting" ng-controller="ObjectiveSetting">
								<br/>
								<div class="row">
									<div class="col-md-1" style="border:1px solid black;">Name</div>
									<div class="col-md-4" style="border:1px solid black;">{{ userdata.fullname }}</div>
									<div class="col-md-2 col-md-offset-1" style="border:1px solid black;">Dep. & Title</div>
									<div class="col-md-4" style="border:1px solid black;">{{ userdata.positionname }}</div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-3" ><strong>1.0 Global basic condition:</strong></div>
									<div class="col-md-9" ><input type="text" style="width:100%;" value="{{ global_basic_condition }}"/></div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-12" ><strong>1.1 Product/Function/Region Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="3%" />
									<col width="15%" />
									<col width="15%" />
									<col width="7%" />
									<col width="18%" />
									<col width="18%" />
									<col width="24%" />
									<tr>
										<th class="bold-center bluehead"><!-- <input type="checkbox" ng-model="check_product" /> --></th>
										<th class="bold-center bluehead">BU/Region<br>/Function</th>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight </th>
										<th class="bold-center bluehead">Commitment</th>
										<th class="bold-center bluehead">Target</th>
										<th class="bold-center bluehead">ACTION</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[0].kcatid}" class="more-data-lg">
										<td><input type="checkbox" ng-checked="check_product" value="{{$index}}" ng-model="item.isChecked" /></td>
										<td><textarea class="text-md" ng-model="item.bu" >{{ item.bu }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.obj" >{{ item.obj }} </textarea></td>
										<td style="text-align:center;"><input  type="number" style="text-align:right;width:40px;" ng-model="item.weight" value="{{ item.weight }}" />%</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.commitment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.target }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.action" >{{ item.action }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" style="text-align:center;">
										<button type="button" class="btn btn-success" ng-click="addRow(kpi_category_name[0].kcatid)">Add 1.1</button>
										<button type="button" class="btn btn-danger" ng-click="delRow(kpi_category_name[0].kcatid)">Delete 1.1</button>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12" ><strong>1.2 Individual Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="3%" />
									<col width="30%" />
									<col width="7%" />
									<col width="18%" />
									<col width="18%" />
									<col width="24%" />
									<tr>
										<th class="bold-center bluehead"><!-- <input type="checkbox" ng-model="check_individual" /> --></th>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight</th>
										<th class="bold-center bluehead">Commitment</th>
										<th class="bold-center bluehead">Target</th>
										<th class="bold-center bluehead">ACTION</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[1].kcatid}" class="more-data-lg">
										<td><input type="checkbox" ng-checked="check_individual" value="{{$index}}" ng-model="item.isChecked" /></td>
										<td><textarea class="text-md" ng-model="item.obj" >{{ item.obj }} </textarea></td>
										<td style="text-align:center;"><input  type="number" style="text-align:right;width:40px;" ng-model="item.weight" value="{{ item.weight }}" />%</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.commitment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.target }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.action" >{{ item.action }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" style="text-align:center;">
										<button type="button" class="btn btn-success" ng-click="addRow( kpi_category_name[1].kcatid )">Add 1.2</button>
										<button type="button" class="btn btn-danger" ng-click="delRow( kpi_category_name[1].kcatid )">Delete 1.2</button>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12" ><strong>1.3 Shared Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="33%" />
									<col width="7%" />
									<col width="18%" />
									<col width="18%" />
									<col width="24%" />
									<tr>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight</th>
										<th class="bold-center bluehead">Commitment</th>
										<th class="bold-center bluehead">Target</th>
										<th class="bold-center bluehead">ACTION</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[2].kcatid}" class="more-data-lg">
										<td style="text-align:center;">{{ item.obj }}</td>
										<td style="text-align:center;"><input  type="number" style="text-align:right;width:40px;" ng-model="item.weight" value="{{ item.weight }}" />%</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.commitment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.target }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.action" >{{ item.action }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>1.5 Variable Compensation Total</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="15%" />
									<col width="15%" />
									<col width="7%" />
									<col width="19%" />
									<col width="19%" />
									<col width="25%" />
									<tr>
										<th class="bold-center bluehead" colspan="2">Total</th>
										<th class="bold-center bluehead">Weight</th>
										<th class="bold-center bluehead" colspan="3" style="display:none;"></th>
									</tr>
									<tr class="more-data-sm">
										<td style="text-align:center;" colspan="2">Total of 1.1, 1.2, and 1.3</td>
										<td style="text-align:center;">{{ sum('weight')+'%' }}</td>
										<td colspan="3" style="display:none;"></td>
									</tr>
								</table>
								<br/>
								<div class="col-md-12" style="text-align:center;">
									<button type="button" class="btn btn-primary" ng-click="save()">Save</button>
									<button type="button" class="btn btn-success" ng-click="submit()">Submit</button>
								</div>
						</div>
<!--################################################ End Tab 2 ##################################################-->

<!--################################################ Tab 3 ##################################################-->
							<div class="tab-pane" id="objective_first_half_review" ng-controller="ObjectiveFirstHalfReview">
								<br/>
								<div class="row">
									<div class="col-md-3" ><strong>2.0 Global basic condition:</strong></div>
									<div class="col-md-9" ><input type="text" style="width:100%;" value="{{ global_basic_condition }}"/></div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-12" ><strong>2.1 First Half Review of the Product/Function/Region Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="15%" />
									<col width="15%" />
									<col width="35%" />
									<col width="35%" />
									<tr>
										<th class="bold-center bluehead">BU/Region<br>/Function</th>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Self Comment</th>
										<th class="bold-center bluehead">Supervisor's Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[0].kcatid}" class="more-data-lg">
										<td>{{ item.bu }}</td>
										<td>{{ item.obj }}</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.halfSelfComment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.halfSupComment }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>2.2 First Half Review of the Individual Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="30%" />
									<col width="35%" />
									<col width="35%" />
									<tr>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Self Comment</th>
										<th class="bold-center bluehead">Supervisor's Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[1].kcatid}" class="more-data-lg">
										<td>{{ item.obj }}</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.halfSelfComment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.halfSupComment }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>2.3 First Half Review of the Shared Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="30%" />
									<col width="35%" />
									<col width="35%" />
									<tr>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Self Comment</th>
										<th class="bold-center bluehead">Supervisor's Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveSetting | filter:{kpi_category:kpi_category_name[2].kcatid}" class="more-data-lg">
										<td style="text-align:center;">{{ item.obj }}</td>
										<td><textarea class="text-md" ng-model="item.commitment" >{{ item.halfSelfComment }} </textarea></td>
										<td><textarea class="text-md" ng-model="item.target" >{{ item.halfSupComment }} </textarea></td>
									</tr>
								</table>
								<br/>
								<div class="col-md-12" style="text-align:center;"><button type="button" class="btn btn-primary" ng-click="save()">Save</button></div>
						</div>
<!--################################################ End Tab 3 ##################################################-->

<!--################################################ Tab 4 ##################################################-->
							<div class="tab-pane" id="objective_appraisal" ng-controller="ObjectiveAppraisal">
								<br/>
								<div class="row">
									<div class="col-md-3" ><strong>3.0 Global basic condition:</strong></div>
									<div class="col-md-9" ><input type="text" style="width:100%;" /></div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-12" ><strong>3.1 Product/Function/Region Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="15%" />
									<col width="18%" />
									<col width="7%" />
									<col width="7%" />
									<col width="26%" />
									<col width="27%" />
									<tr>
										<th class="bold-center bluehead">BU/Region<br>/Function</th>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight </th>
										<th class="bold-center bluehead">Result</th>
										<th class="bold-center bluehead">Appraisee Comment</th>
										<th class="bold-center bluehead">Appraiser Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveAppraisal | filter:{kpi_category:kpi_category_name[0].kcatid}" class="more-data-sm">
										<td>{{ item.bu }}</td>
										<td>{{ item.obj }}</td>
										<td style="text-align:center;">{{ item.weight+'%' }}</td>
										<td style="text-align:center;">
											<input  type="number" step="0.01" min="0" style="text-align:right;width:70px;" ng-model="item.result" value="{{ item.result }}" />
										</td>
										<td><textarea class="text-md"  ng-model="item.AppraiseeComment" >{{ item.AppraiseeComment }} </textarea></td>
										<td><textarea class="text-md"  ng-model="item.AppraiserComment" >{{ item.AppraiserComment }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>3.2 Individual Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="33%" />
									<col width="7%" />
									<col width="7%" />
									<col width="26%" />
									<col width="27%" />
									<tr>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight </th>
										<th class="bold-center bluehead">Result</th>
										<th class="bold-center bluehead">Appraisee Comment</th>
										<th class="bold-center bluehead">Appraiser Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveAppraisal | filter:{kpi_category:kpi_category_name[1].kcatid}" class="more-data-sm">
										<td>{{ item.obj }}</td>
										<td style="text-align:center;">{{ item.weight+'%' }}</td>
										<td style="text-align:center;">
											<input  type="number" step="0.01" min="0" style="text-align:right;width:70px;" ng-model="item.result" value="{{ item.result }}" />
										</td>
										<td><textarea class="text-md"  ng-model="item.AppraiseeComment" >{{ item.AppraiseeComment }} </textarea></td>
										<td><textarea class="text-md"  ng-model="item.AppraiserComment" >{{ item.AppraiserComment }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>3.3 Shared Objectives</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="33%" />
									<col width="7%" />
									<col width="7%" />
									<col width="26%" />
									<col width="27%" />
									<tr>
										<th class="bold-center bluehead">OBJECTIVES</th>
										<th class="bold-center bluehead">Weight </th>
										<th class="bold-center bluehead">Result</th>
										<th class="bold-center bluehead">Appraisee Comment</th>
										<th class="bold-center bluehead">Appraiser Comment</th>
									</tr>
									<tr ng-repeat="item in ObjectiveAppraisal | filter:{kpi_category:kpi_category_name[2].kcatid}" class="more-data-sm">
										<td>{{ item.obj }}</td>
										<td style="text-align:center;">{{ item.weight+'%' }}</td>
										<td style="text-align:center;">
											<input  type="number" step="0.01" min="0" style="text-align:right;width:70px;" ng-model="item.result" value="{{ item.result }}" />
										</td>
										<td><textarea class="text-md"  ng-model="item.AppraiseeComment" >{{ item.AppraiseeComment }} </textarea></td>
										<td><textarea class="text-md"  ng-model="item.AppraiserComment" >{{ item.AppraiserComment }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" ><strong>3.4 Variable Compensation Total</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="33%" />
									<col width="7%" />
									<col width="7%" />
									<col width="53%" />
									<tr>
										<th class="bold-center bluehead">Total</th>
										<th class="bold-center bluehead">Weight</th>
										<th class="bold-center bluehead">Overall</th>
										<th class="bold-center bluehead" style="display:none;"></th>
									</tr>
									<tr class="more-data-sm">
										<td style="text-align:center;">Total of 3.1, 3.2, and 3.3</td>
										<td style="text-align:center;">{{ sum('weight')+'%' }}</td>
										<td style="text-align:center;">{{ sum('result') }}</td>
										<td style="display:none;"></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" >
										<strong>3.5 Other relevant Performance Factors (optional)</strong><br/>
										&bull; (Use 3.6 if a consition or changed work responsibility that occurs was not planned at the beginning of the fiscal year))<br/>
										<textarea style="width:100%;height:150px;"></textarea>
									</div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-12" >
										<strong>3.6 General comment (optional)</strong><br/>
										&bull; Appraiser's view of the appraisee's performance with regards the achievement of objectives<br/>
										<textarea style="width:100%;height:150px;"></textarea><br/>
										&bull; Appraisee's comment<br/>
										<textarea style="width:100%;height:150px;"></textarea>
									</div>
								</div>
								<br/>
								<div class="row"><div class="col-md-12" style="text-align:center;"><button type="button" class="btn btn-primary" ng-click="save()">Save</button></div></div>
								<br/>
						</div>
<!--################################################ End Tab 4 ##################################################-->

<!--################################################ Tab 5 ##################################################-->
							<div class="tab-pane" id="career_vision" ng-controller="CareerVision">
								<br/>
								<div class="row">
									<div class="col-md-12" ><strong>4.1 Career goals, mobility and foreign language ability</strong></div>
								</div>
								<table class="table table-bordered">
									<col width="70%" />
									<col width="30%" />
									<tr>
										<th class="bluehead" colspan="2">Career Goals</th>
									</tr>
									<tr class="more-data-lg">
										<td colspan="2" style="vertical-align:top !important;">
											<strong>Employee's short term career goals (1-3 yrs)</strong>
											<br/>
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
									<tr class="more-data-lg">
										<td colspan="2" style="vertical-align:top !important;">
											<strong>Employee's long term goals</strong>
											<br/>
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
									<tr class="more-data-lg">
										<td colspan="2" style="vertical-align:top !important;">
											<strong>Appraiser's Comment</strong>
											<br/>
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
									<tr>
										<th class="bluehead" colspan="2">Geographical Mobility</th>
									</tr>
									<tr class="more-data-lg">
										<td style="vertical-align:top !important;">
											Willingness to: *If yes, tick on either 1 year or 3 years.
											<br/><br/>
											<div class="row">
												<div class="col-md-3" >Domestic mobility:</div>
												<div class="col-md-9" >
													<input type="radio" name="domestic_radio"  value="1" />Yes 
													(Within <input type="radio" name="domestic_y" value="1"/> 1 Year <input type="radio" name="domestic_y" value="3"/> 3 Years )
													<input type="radio" name="domestic_radio" value="0" /> No</div>
											</div>
											<br/><br/>
											<div class="row">
												<div class="col-md-3" >International mobility:</div>
												<div class="col-md-9" >
													<input type="radio" name="domestic_radio"  value="1" />Yes 
													(Within <input type="radio" name="domestic_y" value="1"/> 1 Year <input type="radio" name="domestic_y" value="3"/> 3 Years )
													<input type="radio" name="domestic_radio" value="0" /> No</div>
												</div>
											</div>
										</td>
										<td style="vertical-align:top !important;">
											<div class="row">
												<div class="col-md-12" >
													Please indicate here your foreign<br/>
													language ability<br/>
												</div>
											</div>
											<div class="row">
												<div class="col-md-1" ><!-- <input type="checkbox" ng-checked="check_Language" /> --></div>
												<div class="col-md-4" >Language</div>
												<div class="col-md-3" >Level</div>
												<div class="col-md-4" >Score</div>
											</div>
											<div class="row" ng-repeat="item in Language" style="padding-bottom:5px;">
												<div class="col-md-1" ><input type="checkbox" ng-checked="check_Language" value="{{$index}}" ng-model="item.isChecked" /></div>
												<div class="col-md-4" ><input type="text" style="width:90%;" value="{{ item.language }}"/></div>
												<div class="col-md-3" ><input type="text" style="width:30%;" value="{{ item.level }}"/></div>
												<div class="col-md-4" ><input type="text" style="width:30%;" value="{{ item.score }}"/></div>
											</div>
											<br/>
											<div class="row">
												<div class="col-md-12" style="text-align:center;">
													<button type="button" class="btn btn-success" ng-click="addRowLanguage()">Add</button>
													<button type="button" class="btn btn-danger" ng-click="delRowLanguage()">Delete</button>
												</div>
											</div>
											* Level:<br/>
											[A](good to communicate in any situation),<br/>
											[B](enough in business situation),<br/>
											[C](enough in everyday)
										</td>
									</tr>
									<tr class="more-data-lg">
										<td colspan="2" style="vertical-align:top !important;">
											<strong>Appraisee's Comment</strong>
											<br/>
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" >
										<strong>4.2 Individual development plan</strong>
										<br/>
										<strong>4.2.1 CK Leadership Competency items</strong>
										<span class="tab" style="padding-left:5px;">
											Discuss and prioritize development opportunities identified from CKLC and/or in relation with Career goals<br/>
											expressed above.<br/>
											Up to 3 development opportunities to be identified per year. Then for each development opportunity:<br/>
											&nbsp;&nbsp;1- Jointly identify the related competency by refering to the CKLC description.<br/>
											&nbsp;&nbsp;2- Jointly define an action and timeframe considering all options<br/>
											&nbsp;&nbsp;&nbsp;&nbsp;(training, job enhancement, project involvement, coaching, etc)
										</span>
									</div>
								</div>
								<br/>
								<table class="table table-bordered">
									<col width="3%" />
									<col width="20%" />
									<col width="13%" />
									<col width="32%" />
									<col width="32%" />
									<tr>
										<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_CK" /> --></th>
										<th class="bluehead bold-center" >Development<br/>opportunities</th>
										<th class="bluehead bold-center" >CKLC</th>
										<th class="bluehead bold-center" >Action</th>
										<th class="bluehead bold-center" >Timeframe</th>
									</tr>
									<tr ng-repeat="item in CK" class="more-data-sm">
										<td><input type="checkbox" ng-checked="check_CK" value="{{$index}}" ng-model="item.isChecked" /></td>
										<td><textarea class="text-sm"  >{{ item.development }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.cklc }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.action }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.timeframe }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" style="text-align:center;">
										<button type="button" class="btn btn-success" ng-click="addRowCK()">Add 4.2.1</button>
										<button type="button" class="btn btn-danger" ng-click="delRowCK()">Delete 4.2.1</button>
									</div>
								</div>
								<br/>
								<div class="row">
									<div class="col-md-12" >
										<strong>4.2.2 Expertise area</strong><br/>
										*Input free comments on your strength and development opportunities except for the issues written above,<br/>
										if any. (5 items at maximum) If you have Expertise Area, input the comment based on assessment items.
									</div>
								</div>
								<table class="table table-bordered">
									<col width="3%" />
									<col width="20%" />
									<col width="13%" />
									<col width="32%" />
									<col width="32%" />
									<tr>
										<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_Expertise" /> --></th>
										<th class="bluehead bold-center" >Development<br/>opportunities</th>
										<th class="bluehead bold-center" >Expertise area</th>
										<th class="bluehead bold-center" >Action</th>
										<th class="bluehead bold-center" >Timeframe</th>
									</tr>
									<tr ng-repeat="item in Expertise" class="more-data-sm">
										<td><input type="checkbox" ng-checked="check_Expertise" value="{{$index}}" ng-model="item.isChecked" /></td>
										<td><textarea class="text-sm"  >{{ item.development }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.expertise }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.action }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.timeframe }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" style="text-align:center;">
										<button type="button" class="btn btn-success" ng-click="addRowExpertise()">Add 4.2.2</button>
										<button type="button" class="btn btn-danger" ng-click="delRowExpertise()">Delete 4.2.2</button>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12" >
										<strong>4.3 Other individual development plan</strong><br/>
										Input your individual development plan(eg. Training opportunities) up to 3 items if any.
									</div>
								</div>
								<table class="table table-bordered">
									<col width="3%" />
									<col width="65%" />
									<col width="32%" />
									<tr>
										<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_Other" /> --></th>
										<th class="bluehead bold-center" >Training needs</th>
										<th class="bluehead bold-center" >Timeframe</th>
									</tr>
									<tr ng-repeat="item in Other" class="more-data-sm">
										<td><input type="checkbox" ng-checked="check_Other" value="{{$index}}" ng-model="item.isChecked" /></td>
										<td><textarea class="text-sm"  >{{ item.needs }} </textarea></td>
										<td><textarea class="text-sm"  >{{ item.timeframe }} </textarea></td>
									</tr>
								</table>
								<div class="row">
									<div class="col-md-12" style="text-align:center;">
										<button type="button" class="btn btn-success" ng-click="addRowOther()">Add 4.3</button>
										<button type="button" class="btn btn-danger" ng-click="delRowOther()">Delete 4.3</button>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12" >
										<strong>4.4 Comments</strong><br/>
										&bull; Appraisee's comment<br/>
										<textarea style="width:100%;height:150px;"></textarea><br/>
										&bull; Appraisee's comment on the Career vision expressed by the appraisee<br/>
										<textarea style="width:100%;height:150px;"></textarea>
									</div>
								</div>
						</div>
<!--################################################ End Tab 5 ##################################################-->

<!--################################################ Tab 6 ##################################################-->
							<div class="tab-pane" id="overall">
								<br/>
								<div class="row">
									<div class="col-md-12" >
										<h3><strong>5 - OVERALL COMMENT FROM APPRAISERS</strong></h3>
										<hr style="border-top: 5px solid #6F6F6F;" />
									</div>
								</div>
								<table class="table table-bordered">
									<col width="100%" />
									<tr>
										<th class="bluehead bold-center">Project Manager or Director with functional link</th>
									</tr>
									<tr class="more-data-lg">
										<td style="vertical-align:top !important;">
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
								</table>
								<table class="table table-bordered">
									<col width="100%" />
									<tr>
										<th class="bluehead bold-center">If applicable, leader of CFT, V-up or any task force</th>
									</tr>
									<tr class="more-data-lg">
										<td style="vertical-align:top !important;">
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
								</table>
								<table class="table table-bordered">
									<col width="100%" />
									<tr>
										<th class="bluehead bold-center">Appraiser + 1</th>
									</tr>
									<tr class="more-data-lg">
										<td style="vertical-align:top !important;">
											<textarea style="width:100%;height:100px;"></textarea>
										</td>
									</tr>
								</table>
								
								<center>
									<a href="#" class="btn btn-primary">Save Draft</a> 
									<a href="#" class="btn btn-primary">Submit</a> 
								</center></br></br>
						</div>
<!--################################################ End Tab 6 ##################################################-->

				</div><!-- end div container -->
			</form>
		</section>
	</body>
</html>