<style>
	th, td {
		padding: 6px !important
	}
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header custom_head">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h3>Employee Detail Report</h3>
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item"><a href="">Home</a></li>
						<li class="breadcrumb-item active">Report</li>
					</ol>
				</div>
			</div>
		</div><!-- /.container-fluid -->
	</section>

	<!-- Main content -->
	<section class="content">
		<!-- Default box -->
		<div class="card">
			<?php
			$empId = "";
			if ($this->input->get('empId')) {
				$empId = $this->input->get('empId');
			};
			?>
			<div class="card-body">
				<div class="row mb-4">
					<div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-6">
						<input type="text" class="form-control" id="empId" name="empId" value="<?= $empId; ?>"
							   placeholder="Enter Employee ID" autocomplete="off">
					</div>
					<div class="col-xl-3 col-lg-3 col-md-2 col-sm-2 col-3">
						<button onclick="getdata()" name="" class="btn btn-info" id=""><i class="fas fa-search"></i>
						</button>
					</div>
					<div class="col-xl-6 col-lg-6 col-md-2 col-sm-3 col-3">
						<button onclick="printSheet('report_sheet')" style="float: right" class="btn btn-default"><i
									class="fa fa-print"></i> Print
						</button>


					</div>
				</div>

				<div id="report_sheet">
					<div class="row mb-3">
						<div class="col-md-12">
							<!-- Widget: user widget style 1 -->
							<div class="card card-widget widget-user">
								<div class="widget-user-header bg-info" style=" height: auto;">
									<h3 class="widget-user-username" id="empName"></h3>
									<h5 class="widget-user-desc" id="empDes"></h5>
								</div>

								<div class="card-footer" style="padding-top: 0px;">
									<div class="row">
										<div class="col-sm-3 border-right">
											<div class="description-block">
												<h5 class="description-header" id="emp_num"></h5>
												<span class="description-text">Emp Id</span>
											</div>
											<!-- /.description-block -->
										</div>
										<!-- /.col -->
										<div class="col-sm-3 border-right">
											<div class="description-block">
												<h5 class="description-header" id="dep"></h5>
												<span class="description-text">Department</span>
											</div>
											<!-- /.description-block -->
										</div>
										<!-- /.col -->
										<div class="col-sm-3 border-right">
											<div class="description-block">
												<h5 class="description-header" id="super"></h5>
												<span class="description-text">Supervisor</span>
											</div>
											<!-- /.description-block -->
										</div>
										<!-- /.col -->
										<!-- /.col -->
										<div class="col-sm-3">
											<div class="description-block">
												<h5 class="description-header" id="duration"></h5>
												<span class="description-text">Duration</span>
											</div>
											<!-- /.description-block -->
										</div>
										<!-- /.col -->
									</div>
									<!-- /.row -->
								</div>
							</div>
							<!-- /.widget-user -->
						</div>
					</div>


					<div class="row mb-3">
						<div class="col-md-4 col-sm-6 col-12">
							<div class="info-box bg-warning">
								<span class="info-box-icon"><i class="fas fa-user-clock"></i></span>

								<div class="info-box-content">
									<span class="info-box-text"><span id="w_hours">160</span> Hours</span>
									<span class="info-box-number" id="w_hours_p"></span>

									<div class="progress">
										<div class="progress-bar" id="hoursprogress-bar" style="width: 0%"></div>
									</div>
									<span class="progress-description">
                                        Total hours for month (20 days)
                                    </span>
								</div>
								<!-- /.info-box-content -->
							</div>
							<!-- /.info-box -->
						</div>
						<div class="col-md-4 col-sm-6 col-12">
							<div class="info-box bg-success">
								<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>

								<div class="info-box-content">
									<span class="info-box-text">Satisfaction level</span>
									<span class="info-box-number" id="satis_level">4/5</span>

									<div class="progress">
										<div class="progress-bar" id="satisprogress-bar" style="width: 90%"></div>
									</div>
									<span class="progress-description">
                                        <span id="avg_sat">90%</span> Average Satisfaction
                                    </span>
								</div>
								<!-- /.info-box-content -->
							</div>
							<!-- /.info-box -->
						</div>
						<div hidden class="col-md-4 col-sm-6 col-12">
							<div class="small-box bg-info">
								<div class="inner">
									<h3 id="discrep_lv">0</h3>

									<p>Discrepancy level</p>
								</div>
								<div class="icon">
									<i class="ion ion-stats-bars"></i>
								</div>

							</div>
						</div>
					</div>
					<div class="row mb-3">
						<label>Task List</label>
						<div class="col-md-12">
							<table class="display dataTable responsive nowrap" style="width: 100%" id="tbl2">
								<thead>
								<tr>
									<th>#</th>
									<th>Task</th>
									<th>Frequency</th>
									<th>Hours</th>
									<th>% of the time used by the activity</th>
									<th>Value Addition</th>
									<th>How Easy/Hard</th>
								</tr>
								</thead>
								<tbody id="table2_body">

								</tbody>
							</table>
						</div>

					</div>

					<div class="row mb-3">

						<div class="col-md-8">
							<label>Employee Feedback</label>
							<div class="col-md-12">
								<table class="table table-bordered" style="width: 100%" id="tbl3">
									<thead>
									<tr>
										<th>#</th>
										<th style="vertical-align: middle;text-align: center">Task
										</th>
										<th style="vertical-align: middle;text-align: center">Tartget Expected
										</th>
										<th style="vertical-align: middle;text-align: center">
											How Agree with the target
										</th>
										<th style="vertical-align: middle;text-align: center">
											How Often someone looks at the result</th>
										<th style="vertical-align: middle;
										text-align: center">Comments</th>
									</tr>
									</thead>
									<tbody id="table3_body">

									</tbody>
								</table>
							</div>
						</div>
						<div class="col-md-4" id="char1">

						</div>

					</div>
					<div class="row mb-3">
						<div class="col-md-6">
							<label>Supervisor Expected Time</label>
							<div class="col-md-12">
								<table class="table table-bordered" style="width: 100%" id="tbl4">
									<thead>
									<tr>
										<th>#</th>
										<th>Task</th>
										<th>Expected</th>
										<th>Employee</th>
										<th>Discrepancy</th>
									</tr>
									</thead>
									<tbody id="table4_body">

									</tbody>
								</table>
							</div>
						</div>
						<div style="" class="col-md-6" id="char2">

						</div>
					</div>
					<div class="row mb-3">
						<div class="col-md-10">
							<label>Supervisor's comments on the activities</label>
							<div class="col-md-12">
								<table class="table table-bordered" style="width: 100%" id="tbl5">
									<thead>
									<tr>
										<th>#</th>
										<th style="vertical-align: middle;text-align: center">Task</th>
										<th style="vertical-align: middle;text-align: center">Result/Target expected</th>
										<th style="vertical-align: middle;text-align: center">Value Addition</th>
										<th style="vertical-align: middle;text-align: center">Who looks at the results & how frequently</th>
										<th style="vertical-align: middle;text-align: center">Comments</th>
									</tr>
									</thead>
									<tbody id="table5_body">

									</tbody>
								</table>
							</div>
						</div>
					</div>


				</div>
			</div>
			<!-- /.card-body -->
			<!--            <div class="card-footer">
							Footer
						</div>-->
			<!-- /.card-footer-->
		</div>
		<!-- /.card -->

	</section>
	<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="<?php echo base_url("assets/customJs/report1.js") ?>"></script>



