<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>UBIHRM | My Appraisal</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="<?php echo URL;?>public/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="<?php echo URL;?>public/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="<?php echo URL;?>public/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
         folder instead of downloading all of them to reduce the load. -->
    <link href="<?php echo URL;?>public/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
	<?php include(VIEWS_PATH."_templates/sidebar.php");?>
 <!-- Ionicons -------->

    
    <!-- DATA TABLES -------->
	<!-- css for responsive -->
    <link rel="stylesheet" type="text/css" href="<?php echo URL;?>public/plugins/responsive/dataTables.responsive.css">
    <!------------------------>
    <link href="<?php echo URL;?>public/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
  </head>
  <style>
  #ex1Slider .slider-selection {
	background: #BABABA;
}
  </style>
  <body class="skin-green" ng-app="performanceapp" ng-controller="assessmentCtrl">
    <!-- Site wrapper -->
    <div class="wrapper">
      
      <header>
		<?php echo topmenu(6);?>
	  </header>
		<?php echo help('performanceassesment');?>
		<?php echo help('skillgapanalysis');?>
		<?php echo help('goals');?>

      <!-- =============================================== -->

      <!-- Left side column. contains the sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <?php echo sidemenu(6.3, 6);?>
        <!-- /.sidebar -->
      </aside>

      <!-- =============================================== -->

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Performance
            <!-----<small>it all starts here</small>------->
          </h1>
          
        </section>

        <!-- Main content -->
        <section class="content">
			<ul class="nav nav-tabs" role="tablist">
			<?php if(checkPermission(223,1)) { ?>
				<li role="presentation" class="active" ><a style="color:green;" href="#assessmentkpi" aria-controls="assessmentkpi" role="tab" data-toggle="tab">Assess Performance</a></li>
			<?php } if(checkPermission(184,1)) { ?>	
				<li role="presentation" ><a style="color:green;" href="#assessment" aria-controls="assessment" role="tab" data-toggle="tab">Performance Assessment </a></li>
			<?php } if(checkPermission(132,1)) { ?>
				<li role="presentation"><a style="color:green;" href="#skillgap" aria-controls="skillgap" role="tab" data-toggle="tab">skillgap </a></li>
			<?php } if(checkPermission(236,1)) { ?>
				<li role="presentation"><a style="color:green;" href="#skillgapassessment" aria-controls="skillgapassessment" role="tab" data-toggle="tab">skillgapassessment </a></li>
			<?php } if(checkPermission(253,1)) { ?>
				<li role="presentation"><a style="color:green;" href="#goals" aria-controls="goals" role="tab" data-toggle="tab">Goals </a></li>
			<?php } ?>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content"> 
			<!-- Tab 1 starts here -->

				<div role="tabpanel" class="tab-pane fade in active" id="assessmentkpi">
								
					<div class="row">
						<div class="col-xs-12">
							<div class="box box-solid box-success" style="border: 1px solid transparent;">
								<div class="box-header with-border" style="background:#fff;">
									<h3 class="box-title"></h3>
									<div class="box-tools pull-right">
									<!--<button class="btn btn-box-tool" data-toggle="tooltip" title="Grid Column"><i class="fa fa-table"></i></button>-->
										<a href="#" data-toggle="modal" data-target="#filter_modal"><button class="btn btn-info" data-widget="filter" data-toggle="tooltip" title="Filter" style="background:#00a65a;"><i class="fa fa-filter"></i></button></a>
										
										<button class="btn btn-info" data-widget="refresh" id="refresh_" data-toggle="tooltip" title="Refresh"style="background:#00a65a;"><i class="fa fa-refresh"></i></button>
										
										<button class="btn btn-info"  data-toggle="tooltip" title="Help" onclick="openNav();" style="background:#00a65a;"><i class="fa fa-question"></i></button>
									</div>
								</div>
								<div class="box-body">
              
									<table id="example1" class="table table-bordered table-striped table-hover dt-responsive" width="100%">
										<thead>
											<tr>
												<th>Employee</th>
												<th>Designation</th>
												<th>Assessment Period</th>
												<th>From</th>
												<th>To</th>
												<th>Assessment level</th>
												<th>Pending at</th>
												<th>Status</th>
												<th width="10%" class="no-sort">Action</th>
											</tr>
										</thead>
										<tbody>
                      
										</tbody>
									</table>
								</div><!-- /.box-body -->
								<div class="overlay" id="refresh">
								  <i class="fa fa-refresh fa-spin"></i>
								</div>
							</div><!-- /.box -->
						</div><!-- /.col-xs-12 -->

					</div><!-- /.row -->
				</div><!-- / End Tab 1 -->
											
				<!-- Tab 2 starts here -->
											
				<div role="tabpanel" class="tab-pane fade" id="assessment">
					<div class="row">
						<div class="col-xs-12">

							<!-- Default box -->
							<div class="box box-solid box-success" style="border: 1px solid transparent;">
								<div class="box-header with-border" style="background:#fff;">
									<h3 class="box-title"></h3>
									<div class="box-tools pull-right">
										<!--<button class="btn btn-box-tool" data-toggle="tooltip" title="Grid Column"><i class="fa fa-table"></i></button>-->
										<a href="#" data-toggle="modal" data-target="#filter_modal1"><button class="btn btn-box-tool" data-widget="filter" data-toggle="tooltip" title="Filter" style="background:#00a65a;"><i class="fa fa-filter"></i></button></a>
										
										<button class="btn btn-box-tool" data-widget="refresh1" id="refresh_1" data-toggle="tooltip" title="Refresh" style="background:#00a65a;"><i class="fa fa-refresh"></i></button>
										
										<button class="btn btn-box-tool"  data-toggle="tooltip" title="Help" style="background:#00a65a;" onclick="openNav();"><i class="fa fa-question"></i></button>
									</div>
								</div>
								<div class="box-body">
              
									<table id="example2" class="table table-bordered table-striped table-hover dt-responsive" width="100%">
										<thead>
											<tr>
												<th >Employee</th>
												<th >Designation</th>
												<th >Assessment Period</th>
												<th >From</th>
												<th >To</th>
												<th >Assessment level</th>
												<th >Status</th>
												<th width="10%" class="no-sort">Action</th>
											</tr>
										</thead>
										<tbody>
                      
										</tbody>
									</table>
								</div><!-- /.box-body -->
								<div class="overlay" id="refresh1">
								  <i class="fa fa-refresh fa-spin"></i>
								</div>
							</div><!-- /.box -->
						</div><!-- /.col-xs-12 -->
					</div><!-- /.row -->
				</div><!-- / End Tab 2 -->
				
				<!-- Tab 3 starts here -->
											
				<div role="tabpanel" class="tab-pane fade" id="skillgap">
					<div class="row">
						<div class="col-xs-12">
							<!-- Default box -->
							<div class="box box-solid box-success" >
								<div class="box-header with-border">
									<h3 class="box-title">Skill Gap Analysis</h3>
									<div class="box-tools pull-right">
										<!--<button class="btn btn-box-tool" data-toggle="tooltip" title="Grid Column"><i class="fa fa-table"></i></button>-->
										<a href="#" data-toggle="modal" data-target="#filter_modal2"><button class="btn btn-box-tool" data-widget="filter" data-toggle="tooltip" title="Filter"><i class="fa fa-filter"></i></button></a>
                
										<button class="btn btn-box-tool" data-widget="refresh" id="refresh_3" data-toggle="tooltip" title="Refresh"><i class="fa fa-refresh"></i></button>
				
										<button class="btn btn-box-tool" data-toggle="tooltip" title="Help" onclick="openNav();"><i class="fa fa-question"></i></button>
									</div>
								</div>
								<div class="box-body">
              
									<table id="example3" class="table table-bordered table-striped table-hover dt-responsive" width="100%">
										<thead>
											<tr>
												<th>Employee</th>
												<th>Designation</th>
												<th>Assessment Period</th>
												<th>From</th>
												<th>To</th>
												<th>Assessment level</th>
												<th>Pending at</th>
												<th>Status</th>
												<th width="10%" class="no-sort">Action</th>
											</tr>
										</thead>
										<tbody>
						  
										</tbody>
									</table>
								</div><!-- /.box-body -->
								<div class="overlay" id="refresh3">
									<i class="fa fa-refresh fa-spin"></i>
								</div>
							</div><!-- /.box -->
						</div><!-- /.col-xs-12 -->
					</div><!-- /.row -->
				</div><!-- / End Tab 3 -->
				
				<!-- Tab 4 starts here -->
											
				<div role="tabpanel" class="tab-pane fade" id="skillgapassessment">
					<div class="row">
						<div class="col-xs-12">
							
							<!-- Default box -->
							<div class="box box-solid box-success" style="border: 1px solid transparent;">
								<div class="box-header with-border" style="background:#fff;">
									<h3 class="box-title"> </h3>
									<div class="box-tools pull-right">
										<!--<button class="btn btn-box-tool" data-toggle="tooltip" title="Grid Column"><i class="fa fa-table"></i></button>-->
										<button class="btn btn-box-tool" data-widget="refresh" id="refresh_4" data-toggle="tooltip" title="Refresh" style="background:#00a65a;"><i class="fa fa-refresh"></i></button>
										<button class="btn btn-box-tool"  data-toggle="tooltip" title="Help" onclick="openNav();"style="background:#00a65a;"><i class="fa fa-question"></i></button>
									</div>
								</div>
								<div class="box-body">
              
									<table id="example4" class="table table-bordered table-striped table-hover dt-responsive" width="100%">
										<thead>
											<tr>
												<th >Employee</th>
												<th >Assessment Period</th>
												<th >From</th>
												<th >To</th>
												<th >Status</th>
												<th width="10%" class="no-sort">Action</th>
											</tr>
										</thead>
										<tbody>
                      
										</tbody>
									</table>
								</div><!-- /.box-body -->
								<div class="overlay" id="refresh4">
								  <i class="fa fa-refresh fa-spin"></i>
								</div>
							</div><!-- /.box -->
						</div><!-- /.col-xs-12 -->
					</div><!-- /.row -->
				</div><!-- / End Tab 4 -->
				
				<!-- Tab 5 starts here -->
											
	<!--		<div role="tabpanel" class="tab-pane fade" id="goals">
					<div class="row">
						<div class="col-xs-12">
							<div class="box box-solid box-success" >
								<div class="box-header with-border">
									<h3 class="box-title"></h3>
									<div class="box-tools pull-right">
										<?php if($this->addper){ ?>
										<a href="<?php echo URL;?>performance/addgoals" class="btn btn-box-tool" data-toggle="tooltip" title="Add"><i class="fa fa-plus"></i></a>
										<?php }else{?>
										<a href="#" class="btn btn-box-tool" data-toggle="tooltip" title="No permission to add"><i class="fa fa-plus"></i></a>
										<?php } ?>
					
										<button class="btn btn-box-tool" data-widget="refresh" id="refresh_5" data-toggle="tooltip" title="Refresh"><i class="fa fa-refresh"></i></button>
					
										<!--  <button class="btn btn-box-tool" data-toggle="tooltip" title="Grid Column"><i class="fa fa-table"></i></button>
					
										<a href="#" data-toggle="modal" data-target="#filter_modal"><button class="btn btn-box-tool" data-widget="filter" data-toggle="tooltip" title="Filter"><i class="fa fa-filter"></i></button></a>-->
					
	<!--									<button class="btn btn-box-tool" data-toggle="tooltip" title="Help" onclick="openNav();"><i class="fa fa-question"></i></button>
									</div>
								</div>
								<div class="box-body">
               
									<div ng-show="goalsarray.length==0"><h5>No data available</h5></div>
					
									<div ng-repeat="g in goalsarray" class="row" style="padding: 13px;">
										<div class="row " style="padding: 10px;background: #8080804d;margin: -3px;">
											<label class="col-sm-2">Division</label>
											<label  class="col-sm-1">KPA</label>
											<label  class="col-sm-3">Objective</label>
											<label  class="col-sm-2">Duration</label>
											<label  class="col-sm-1">Weightage</label>
											<label  class="col-sm-2">Progress</label>
											<label  class="col-sm-1" >Action</label>
										</div>
										<div class="row " style="padding: 10px;margin: -3px;">
											<div class="col-sm-2">{{g.dept}}</div>
											<div class="col-sm-1">{{g.quadrant}}</div>
											<div  class="col-sm-3">{{g.goal}}</div>
											<div  class="col-sm-2">{{g.fromdate}} - {{g.todate}}</div>
											<div  class="col-sm-1">{{g.weightage}}%</div>
											<div  class="col-sm-2">
												<div class="progress" style="height: 20px;background-color: #808080;">
													<div class="progress-bar" role="progressbar" style="width: {{g.progress}}%; height: 20px;background-color: #cb2565;"  title="{{g.givenweightage}}/{{g.taskgiven}}" rel="tooltip">{{g.progress}}%
													</div><!--/.Progress bar -->
	<!--											</div><!--/.Progress  -->
	<!--									</div>
											<div  class="col-sm-1">
												<a rel="tooltip" title="Edit" href="<?=URL?>performance/editgoals/{{g.gid}}" ><i class="fa fa-edit"></i></a>
											</div>
											<div  class="col-sm-12" style="margin-top: 15px;">
												<h3 ng-show="g.departmentgoal.length>0">Department goal</h3>
												<hr ng-show="g.departmentgoal.length>0">
												<div class="row" style="padding: 10px;margin: -3px;" ng-show="g.departmentgoal.length>0">
													<label  class="col-sm-3">Department</label>
													<label  class="col-sm-2">KPA</label>
													<label  class="col-sm-3">Objective</label>
													<label  class="col-sm-1">Weightage</label>
													<label  class="col-sm-2">Progress</label>
													<!--<label  class="col-sm-1" >Action</label>-->
	<!--										</div>
												<div class="row" ng-repeat="a in g.departmentgoal" style="padding: 13px;margin: -3px;">
													<div  class="col-sm-3">{{a.deptname}}</div>
													<div  class="col-sm-2">{{a.quadrant}}</div>
													<div  class="col-sm-3">{{a.goal}}</div>
													<div  class="col-sm-1">{{a.weightage}}%</div>
													<div  class="col-sm-2">
														<div class="progress" style="height: 20px;background-color: #808080;">
															<div class="progress-bar" role="progressbar" style="width: {{a.progress}}%; height: 20px;background-color: #cb2565;"  title="{{a.givenweightage}}/{{a.taskgiven}}" rel="tooltip">{{a.progress}}%
															</div><!--/.Progress bar -->
	<!--												</div><!--/.Progress  -->
	<!--											</div>
													<!--<div  class="col-sm-1">
													<a rel="tooltip"  title="Comments" ng-click="getcomments(a.id)" data-toggle="modal" data-target="#comments" href="#" ><i class="fa fa-comments-o"></i></a>&nbsp;&nbsp;
													<a rel="tooltip"  title="Tasks" ng-click="gettasks(a.empid,a.id,a.emp,a.goal)" data-toggle="modal" data-target="#tasks" href="#" ><i class="fa fa-bars"></i></a>&nbsp;&nbsp;
										
													</div>-->
	<!--											<div  class="col-sm-12" style="margin-top: 15px;">
														<h3 ng-show="a.teamgoals.length>0">Team goal</h3>
														<hr ng-show="a.teamgoals.length>0">
								
														<div class="row" ng-repeat="t in a.teamgoals" style="padding: 13px;margin: -3px;">
															<div  class="col-sm-8">
																<div class="media">
																	<div class="media-left">
																		<img src="{{t.empimg}}" ng-show="t.empimg" class="img-circle" style="width:42px;height:42px;">
																		<span data-letters="{{t.empletter}}" ng-show="t.empletter" style="background-color:#b0095b"></span>
																	</div>
																	<div class="media-body">
																		<h4 class="media-heading">{{t.emp}}</h4>
																		<h5><label>{{t.quadrant}}</label>: {{t.goal}}</h5>
																		<p ng-show="t.bonus>0">Bonus: {{t.currency}}   {{t.bonus}} </p>
																		<p  ng-show="t.salaryincrement>0">Salary Increment: {{t.currency}}   {{t.salaryincrement}} </p>
													
																		<p>
																			<a rel="tooltip"  title="Comments" ng-click="getcomments(t.id)" data-toggle="modal" data-target="#comments" href="#" ><i class="fa fa-comments-o"></i></a>&nbsp;&nbsp;
																			<a rel="tooltip"  title="Tasks" ng-click="gettasks(t.empid,t.id,t.emp,t.goal,t.taskgiven)" data-toggle="modal" data-target="#tasks" href="#" ><i class="fa fa-bars"></i></a>
																			&nbsp;&nbsp;
																			<!--<a rel="tooltip"  title="Bonus & Salary Increment" ng-click="getbonus(t.empid,t.id,t.emp,t.goal,t.taskgiven)" data-toggle="modal" data-target="#bonus" href="#" ><i class="fa fa-credit-card"></i></a>-->
	<!--																</p>
																	</div><!--/.Media-body  -->
	<!--														</div><!--/.Media  -->
	<!--													</div><!--/.col-sm-8  -->
	<!--													<div  class="col-sm-2">
																<h5>&nbsp;&nbsp;{{t.weightage}}%</h5>
															</div>
															<div  class="col-sm-2">
																<div class="progress" style="height: 20px;background-color: #808080;">
																	<div class="progress-bar" role="progressbar" style="width: {{t.progress}}%; height: 20px;background-color: #cb2565;"  title="{{t.givenweightage}}/{{t.taskgiven}}" rel="tooltip">{{t.progress}}%
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<hr>
										<br>
									</div>
								</div><!-- /.box-body -->
	<!--						<div class="overlay" id="refresh5">
								  <i class="fa fa-refresh fa-spin"></i>
								</div>
							</div><!-- /.box -->
	<!--				</div><!-- /.col-xs-12 -->
	<!--			</div><!-- /.row -->
	<!--		</div><!-- / End Tab 5 -->
			</div><!-- End Tab panel -->	
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <?php footertext();?>
      </footer>
    </div><!-- ./wrapper -->
	
	<!--MODAL TAB 1 STARTS HERE -->
 	<div class="modal fade" id="confirm" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">            
				<div class="modal-body">
					<h4>Do you want to delete the record?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger" data-dismiss="modal" ng-click="ondelete()">Delete</a>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" data-backdrop="static" data-keyboard="false" id="filter_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
		<div class="modal-dialog">
			<div class="modal-content">   
				<div class="modal-header">
					
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Filter</h4>
                  </div>
				<div class="modal-body">
					<form role="form" class="form-horizontal"  name="myForm" novalidate id="myForm">
						<div class="form-group">
							<label class="control-label col-sm-4">Designation</label>
							<div class="col-sm-4" >
								<select class="form-control" id="designation" name="designation" ng-model="designation" >
								<option value="">All</option>
								<option ng-repeat="d in desigarray" value="{{d.id}}">{{d.name}}</option>
								</select>
							</div>
						</div>	
						<!--<div class="form-group">
							<label class="control-label col-sm-4">From</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="from" name="from" ng-model="from"   >
								
							</div>
						</div>	
						<div class="form-group">
							<label class="control-label col-sm-4">To</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="to" name="to" ng-model="to"   >
							</div>
						</div>	-->
						
						
						<!--<div class="form-group">
							<label class="control-label col-sm-4">Ex-Employee</label>
							<div class="col-sm-4" >
								<input type="checkbox" id="exemployee" name="exemployee" value="1"/>
							</div>
						</div>	-->
					</form>
				</div>
				<div class="modal-footer">					
					<a href="#" class="btn btn-success" data-dismiss="modal" id="filter">Apply Filter</a>
					<button type="reset" class="btn btn-success" data-dismiss="modal" id="clearfilter">Clear Filter</button>
					<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>	
	
	<!--MODAL TAB 1 ENDS HERE -->
	
	<!--MODAL TAB 2 STARTS HERE -->
	
	<div class="modal fade" id="confirm" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">            
				<div class="modal-body">
					<h4>Do you want to delete the record?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger" data-dismiss="modal" ng-click="ondelete()">Delete</a>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" data-backdrop="static" data-keyboard="false" id="filter_modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
		<div class="modal-dialog">
			<div class="modal-content">   
				<div class="modal-header">
					
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Filter</h4>
                  </div>
				<div class="modal-body">
					<form role="form" class="form-horizontal"  name="myForm" novalidate id="myForm">
						<div class="form-group">
							<label class="control-label col-sm-4">Designation</label>
							<div class="col-sm-4" >
								<select class="form-control" id="designation1" name="designation" ng-model="designation" >
								<option value="">All</option>
								<option ng-repeat="d in desigarray" value="{{d.id}}">{{d.name}}</option>
								</select>
							</div>
						</div>	
						<!--<div class="form-group">
							<label class="control-label col-sm-4">From</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="from" name="from" ng-model="from"   >
								
							</div>
						</div>	
						<div class="form-group">
							<label class="control-label col-sm-4">To</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="to" name="to" ng-model="to"   >
							</div>
						</div>	-->
						
						
						<!--<div class="form-group">
							<label class="control-label col-sm-4">Ex-Employee</label>
							<div class="col-sm-4" >
								<input type="checkbox" id="exemployee" name="exemployee" value="1"/>
							</div>
						</div>	-->
					</form>
				</div>
				<div class="modal-footer">					
					<a href="#" class="btn btn-success" data-dismiss="modal" id="filter1">Apply Filter</a>
					<button type="reset" class="btn btn-success" data-dismiss="modal" id="clearfilter1">Clear Filter</button>
					<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>	
	
	<!--MODAL TAB 2 ENDS HERE -->
	
	<!--MODAL TAB 3 STARTS HERE -->

	
	<div class="modal fade" id="confirm" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">            
				<div class="modal-body">
					<h4>Do you want to delete the record?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger" data-dismiss="modal" ng-click="ondelete()">Delete</a>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" data-backdrop="static" data-keyboard="false" id="filter_modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
		<div class="modal-dialog">
			<div class="modal-content">   
				<div class="modal-header">
					
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Filter</h4>
                  </div>
				<div class="modal-body">
					<form role="form" class="form-horizontal"  name="myForm" novalidate id="myForm">
						<div class="form-group">
							<label class="control-label col-sm-4">Designation</label>
							<div class="col-sm-4" >
								<select class="form-control" id="designation" name="designation" ng-model="designation" >
								<option value="">All</option>
								<option ng-repeat="d in desigarray" value="{{d.id}}">{{d.name}}</option>
								</select>
							</div>
						</div>	
						<!--<div class="form-group">
							<label class="control-label col-sm-4">From</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="from" name="from" ng-model="from"   >
								
							</div>
						</div>	
						<div class="form-group">
							<label class="control-label col-sm-4">To</label>
							<div class="col-sm-4" >
								<input type="text" class="form-control" id="to" name="to" ng-model="to"   >
							</div>
						</div>	-->
						
						
						<!--<div class="form-group">
							<label class="control-label col-sm-4">Ex-Employee</label>
							<div class="col-sm-4" >
								<input type="checkbox" id="exemployee" name="exemployee" value="1"/>
							</div>
						</div>	-->
					</form>
				</div>
				<div class="modal-footer">					
					<a href="#" class="btn btn-success" data-dismiss="modal" id="filter3">Apply Filter</a>
					<button type="reset" class="btn btn-success" data-dismiss="modal" id="clearfilter3">Clear Filter</button>
					<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	
	<!--MODAL TAB 3 ENDS HERE -->

	<!--MODAL TAB 4 STARTS HERE -->
	
	<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">   
				<div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Delete Confirmation</h4>
                  </div>
				<div class="modal-body">
					<h4>Do you want to delete the record?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger">Delete</a>
				</div>
			</div>
		</div>
	</div>	
	
	<!--MODAL TAB 4 ENDS HERE -->
	
	<!--MODAL TAB 5 STARTS HERE -->

<!--<div class="modal fade" id="confirm" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">            
				<div class="modal-body">
					<h4>Do you want to delete the record?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger" data-dismiss="modal" ng-click="ondelete()">Delete</a>
				</div>
			</div>
		</div>
	</div>
 	<div class="modal fade" id="bonus" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
		
			<div class="modal-content"> 
				<div class="modal-header" >
					<a class="pull-right" data-dismiss="modal">X</a>
					<h4 >Bonus & Salary Increment of {{empname}}</h4>
					<h5 >Objective: {{goal}}</h5>
					<h5 >Weightage: {{weightage}}</h5>
					<h5 >Threshold: {{threshold}}</h5>
					<h5 >Achievement: {{achivement}}</h5>
					
				
				</div>
				<div class="modal-body">
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
					<a href="#" class="btn btn-danger danger" data-dismiss="modal" ng-click="ondelete()">Delete</a>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="comments" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog">
			<div class="modal-content">   
				<div class="modal-header">
					<a class="pull-right" data-dismiss="modal">X</a>
					<h4>Comments</h4>
				</div>
				<div class="modal-body">
					<div class="comment-tabs">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#comments-logout" role="tab" data-toggle="tab"><h4 class="reviews text-capitalize">Comments</h4></a></li>
                <li><a href="#add-comment" role="tab" data-toggle="tab"><h4 class="reviews text-capitalize">Add comment</h4></a></li>
                
            </ul>            
            <div class="tab-content">
                <div class="tab-pane active" id="comments-logout">    
					
                    <ul class="media-list">
						<li ng-show="commentsarr.length==0"><h5>No comments available</h5></li>
                      <li class="media" ng-repeat="c in commentsarr">
                        <a class="pull-left" href="#">
                         
						  <img src="{{c.empimg}}" ng-show="c.empimg" class="img-circle" style="width:42px;height:42px;">
								<span data-letters="{{c.empletter}}" ng-show="c.empletter" style="background-color:#cb2565"></span>
                        </a>
                        <div class="media-body">
                          <div class="well well-lg">
							 <span class="pull-right">{{c.givenon}} </span>
                              <h4 class="media-heading text-uppercase reviews">{{c.givenby}} </h4>
                             
                              <p class="media-comment">
							  {{c.comments}}
                              </p>
                              
                          </div>              
                        </div>
                        
                      </li>          
                   </ul> 
                </div>
                <div class="tab-pane" id="add-comment">
				<br>
                    <form action="#" method="post" class="form-horizontal" id="commentForm" role="form" name="myForm2"> 
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">Comment</label>
                            <div class="col-sm-8">
                              <textarea class="form-control" ng-model="comments" name="comments" id="addComment" required rows="4"></textarea>
                            </div>
                        </div>
							<div class="modal-footer ">
							
								<a href="#" class="btn btn-primary " ng-disabled="myForm2.$invalid" data-dismiss="modal" ng-click="onsavecomments()">Save</a>
								<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
						</div>       
                    </form>
                </div>
             </div>
        </div>
				</div>
				
				
			</div>
		</div>
	</div>
	<div class="modal fade right" id="tasks"  >
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header" >
					<a class="pull-right" data-dismiss="modal">X</a>
					<h4 >Setup tasks for {{empname}}</h4>
					<h5 >Objective: {{goal}}</h5>
					
				
				</div>
			
			<div class="modal-body">
				 <div class="panel with-nav-tabs panel-default">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#tab1default" data-toggle="tab"><label  style="margin-left: 40px;margin-right: 40px;">Add Task</label></a></li>
						<li><a href="#tab2default" data-toggle="tab"><label style="margin-left: 40px;margin-right: 40px;">Associated Tasks</label></a></li>
						
					</ul>
					<br>
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1default">
							<form class="form-horizontal tab-pane pad fade active in" role="tabpanel" id="addgoal_list" name="myForm1">
								<!--<div class="form-group">
									<label class="control-label col-sm-3"> Employee</label>
									<div class="col-sm-6">
										<select  class="form-control"  name="employeeid" ng-model="employeeid" ng-options="d.id as d.name for d in employeearray" required ng-disabled="val" >
								<option value="">Select Employee</option>
								</select>
									</div>
								</div>-->
	<!--						<div class="form-group">
									<label class="control-label col-sm-3"> Task</label>
									<div class="col-sm-6" ng-class="{ true: 'has-success', false : 'has-error'  }[myForm1.task.$valid]">
										<input id="task" ng-model="task" id="task" class="form-control" name="task" type="text"  required>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-3" for="fromdate">Duration </label>
									<div class="col-sm-3" ng-class="{ true: 'has-success', false : 'has-error'  }[myForm1.fromdate.$valid]">
										<input type="text" name="fromdate" id="fromdate" class="form-control" placeholder="From" ng-model="fromdate"  data-provide="datepicker" data-date-autoclose="true" data-date-format="<?php echo $date;?>"ng-disabled="val" required>
									</div>
									<div class="col-sm-3" ng-class="{ true: 'has-success', false : 'has-error'  }[myForm1.todate.$valid]">
										<input type="text" name="todate" id="todate" class="form-control" placeholder="To" ng-model="todate" data-provide="datepicker" data-date-autoclose="true" data-date-format="<?php echo $date;?>" ng-disabled="val" required>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-3">Hour(s)</label>
									<div class="col-sm-3" ng-class="{ true: 'has-success', false : 'has-error'  }[myForm1.hours.$valid]">
										<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
											<input type="text" class="form-control" required name="hours" ng-model="hours">
											<span class="input-group-addon">
												<span class="glyphicon glyphicon-time"></span>
											</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-3">Achievement</label>
									<div class="col-sm-6" >
										<div class="row">
											<label class="col-sm-1">0</label>
											<div class="col-sm-8">
												<div class="range">
													<input type="range" name="range" min="0" max="{{weightage}}" value="0"  ng-model="givenwt">
													
												  </div>
												
											</div>
											<div class="col-sm-1">
												{{givenwt}} 
											</div>
										</div>
										
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-sm-3">Description</label>
									<div class="col-sm-6" ng-class="{ true: 'has-success', false : 'has-error'  }[myForm1.jobdesc.$valid]">
										<textarea class="form-control" id="jobdesc" ng-model="jobdesc" name="jobdesc" required></textarea>
									</div>
								</div>
								<br>
								<div class="text-center" >
									<button class="btn btn-primary text-center" data-dismiss="modal"  ng-click="addtask(1)" ng-disabled="myForm1.$invalid">Submit</button>
									<button class="btn btn-default text-center"  data-dismiss="modal">Cancel</button>
								</div>
							</form>
						</div>
                        <div class="tab-pane fade" id="tab2default">
						<br>
							<div class="row">.
								<!-- Team member -->
	<!--						<div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="t in taskarray">
									<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
										<div class="mainflip">
											<div class="frontside">
												<div class="card">
													<div class="card-body text-center" style="padding: 19px;">
														<h4 >{{t.task_no}}</h4>
														<h5 class="card-title">{{t.task}}</h5>
														<p class="card-text">{{t.fromdate}} to {{t.todate}}</p>
														<p class="card-text">{{t.hours}} hrs</p>
														<div class="progress" style="height: 20px;background-color: #808080;">
															<div class="progress-bar" role="progressbar" style="width: {{t.progress}}%; height: 20px;background-color: #cb2565;"  title="{{t.givenweightage}}/{{t.goalweightage}}" rel="tooltip">{{t.progress}}%</div>
														</div>
													</div>
												</div>
											</div>
											<div class="backside">
												<div class="card">
													<div class="card-body text-center mt-4">
														<h4 class="card-title">{{t.task_no}}</h4>
														<p class="card-text">{{t.desc}}</p>
														
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- ./Team member -->
								
	<!--					</div>
						
						</div>
                       
                    </div>
                
            </div>
			</div>
			
			
			</div>
		</div>
	</div>
	<!--MODAL TAB 5 ENDS HERE -->

	
    <!-- jQuery 2.1.3 -->
   <script type="text/javascript" src="<?php echo URL;?>public/plugins/responsive/jquery-1.11.1.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="<?php echo URL;?>public/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="<?php echo URL;?>public/angularjs/angular.min.js" type="text/javascript"></script>
 	<script src="<?php echo URL;?>public/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
  <!-- DATA TABES SCRIPT -->
	<script type="text/javascript" src="<?php echo URL;?>public/plugins/responsive/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="<?php echo URL;?>public/plugins/responsive/dataTables.responsive.min.js"></script>
	<script type="text/javascript" src="<?php echo URL;?>public/plugins/responsive/dataTables.bootstrap.js"></script>
	<script src="<?php echo URL;?>public/angularjs/performance.js" type="text/javascript"></script>
    <!-- SlimScroll -->
    <script src="<?php echo URL;?>public/plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='<?php echo URL;?>public/plugins/fastclick/fastclick.min.js'></script>
		 <script src="<?php echo URL;?>public/plugins/morris/raphael-min.js" type="text/javascript"></script>
    <script src="<?php echo URL;?>public/plugins/morris/morris.min.js" type="text/javascript"></script>

  <!---------------------------------------------------->

   <script type="text/javascript">
     var table = $('#example1').DataTable({
				"bProcessing": true,
				"bServerSide": true,
				"stateSave": true,
				"deferRender": true,
				"sAjaxSource": path+"performance/getAssessmentData",
				"columnDefs": [ {
					"searchable": false,
					"orderable": false,
					"targets"  : 'no-sort'
					}]
				
        });
	
	$("#filter").click(function(){
		//table.column(4).visible(false);
		
		table.columns( 1 ).search( document.getElementById('designation').value ).draw();
		//table.columns( 16 ).search( document.getElementById('grade').value ).draw();
	});
	$("#clearfilter").click(function(){
	table.columns().search( '' ).draw();
	$('#myForm').get(0).reset();
	});
	$('body').tooltip({
		selector: '[rel=tooltip]'
	});	
	$( "#refresh" ).hide();
		$( "#refresh_" ).click(function() {
			$( "#refresh" ).show();
			table.draw();
		  setTimeout(function(){ $( "#refresh" ).hide(); }, 1000);
		});
    </script>
	
	<script type="text/javascript">
     var table = $('#example2').DataTable({
				"bProcessing": true,
				"bServerSide": true,
				"stateSave": true,
				"deferRender": true,
				"sAjaxSource": path+"performancedubai/getAssessmentData",
				"columnDefs": [ {
					"searchable": false,
					"orderable": false,
					"targets"  : 'no-sort'
					}]
				
        });
	
	$("#filter1").click(function(){
		//table.column(4).visible(false);
		
		table.columns( 1 ).search( document.getElementById('designation1').value ).draw();
		//table.columns( 16 ).search( document.getElementById('grade').value ).draw();
		
		
	});
	$("#clearfilter1").click(function(){
	table.columns().search( '' ).draw();
	$('#myForm').get(0).reset();
	});
	$('body').tooltip({
		selector: '[rel=tooltip]'
	});	
	$( "#refresh1" ).hide();
		$( "#refresh_1" ).click(function() {
			$( "#refresh1" ).show();
			table.draw();
		  setTimeout(function(){ $( "#refresh1" ).hide(); }, 1000);
		});
    </script>
	
	<script type="text/javascript">
     var table = $('#example3').DataTable({
				"bProcessing": true,
				"bServerSide": true,
				"stateSave": true,
				"deferRender": true,
				"sAjaxSource": path+"performance/getSkillAssessmentData",
				"columnDefs": [ {
					"searchable": false,
					"orderable": false,
					"targets"  : 'no-sort'
					}]
        });
	
	$("#filter3").click(function(){
		//table.column(4).visible(false);
		table.columns( 1 ).search( document.getElementById('designation2').value ).draw();
		//table.columns( 16 ).search( document.getElementById('grade').value ).draw();
	});
	$("#clearfilter3").click(function(){
	table.columns().search( '' ).draw();
	$('#myForm').get(0).reset();
	});
	$('body').tooltip({
		selector: '[rel=tooltip]'
	});	
	$( "#refresh3" ).hide();
		$( "#refresh_3" ).click(function() {
			$("#refresh3").show();
			table.draw();
		  setTimeout(function(){ $( "#refresh3" ).hide(); }, 1000);
		});
    </script>
	
	 <script type="text/javascript">
     var table = $('#example4').DataTable({
				"bProcessing": true,
				"bServerSide": true,
				"stateSave": true,
				"deferRender": true,
				"sAjaxSource": path+"performance/getSkillgapAssessmentData",
				"columnDefs": [ {
					"searchable": false,
					"orderable": false,
					"targets"  : 'no-sort'
					}]
				
        });
	
	$('body').tooltip({
		selector: '[rel=tooltip]'
	});
	$( "#refresh4" ).hide();
		$( "#refresh_4" ).click(function() {
			$( "#refresh4" ).show();
			table.draw();
		  setTimeout(function(){ $( "#refresh4" ).hide(); }, 1000);
		});
    </script>
	
<!--	<script type="text/javascript">
     
	$('.clockpicker').clockpicker();
	$('body').tooltip({
		selector: '[rel=tooltip]'
	});
	$( "#refresh5" ).hide();
		$( "#refresh_5" ).click(function() {
			$( "#refresh5" ).show();
			table.draw();
		  setTimeout(function(){ $( "#refresh5" ).hide(); }, 1000);
		});
		
		$('#ex1').slider({
			formatter: function(value) {
				return 'Current value: ' + value+"%";
			}
		});
    </script>
	-->
  </body>
</html>
