@extends('layouts.default')
@section('content')

<div class="right_col" role="main">
  	<div class="">
	    <div class="page-title">
	      	<div class="title_left">
	        	<h3>{{ ucwords($pg_title) }}</h3>
	      	</div>
	    </div>
	</div>

	<div class="col-md-12">
		<div class="panel-heading">
			<select name="employee_id" id="employee_select" class="form-control">
				<option value="">Select Employee</option>
				@foreach($employees as $employee)
					<option value="{{ $employee->si_no }}">{{ ucwords($employee->name) }}</option>
				@endforeach
			</select>
		</div>
		<div class="panel">
			<div class="panel-body" id="details_div">
				<table class="table table-striped table-bordered dt-responsive nowrap datatable-responsive jambo_table">
					<thead>
						<tr>
							<th>Month</th>
							<th>Week-1</th>
							<th>Week-2</th>
							<th>Week-3</th>
							<th>Week-4</th>
							<th>Week-5</th>
							<th>Worked Hrs</th>
							<th>OT Hrs</th>
							<th>Approved-Total Worked Hrs</th>
							<th>Hold Hrs</th>
							<th>Paid Hrs</th>
							<th>Original Payrate</th>
							<th>OT Payrate</th>
							<th>Cunsultant Payrate</th>
							<th>Salary Hold</th>
							<th>Paid Salary</th>
							<th>Actual Paid</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
					<!-- <tfoot>
						<tr>
							<th>Totals</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
															<th>0</th>
														<th>0</th>
						</tr>
					</tfoot> -->
				</table>
			</div>
		</div>
	</div>
	<input type="hidden" name="country_id" value="{{ $country_id }}" id="country_id">
</div>

<script>
	$("#employee_select").on('change', function() {
		var employee_id = $(this).val();		
		var country_id = $("#country_id").val();
		if(employee_id != ''){
			$.ajax({
				url: '/get_employee_week_hrs',
				data: {employee_id: employee_id, country_id: country_id},
			})
			.done(function(result) {
				console.log("success");
				$("#details_div").html('');
				$("#details_div").html(result)
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
			
		}
		else{
			alert('Please Select Proper Employee!');
		}
	});
</script>
@endsection