@extends('app')
{{-- Web site Title --}}
@section('title') Workman Attendance Summary :: @parent @stop

@section('content')
	<!-- @if (isset($status))
    <div class="pad margin no-print">
        <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
            <ul>
                @foreach ($status['messages'] as $m)
                    <li>{{$m}}</li>
                @endforeach
            </ul>
        </div>
    </div>
	@endif -->
	
	<div class="content-wrapper">
		<div class="content-header">
			<div class="container-fluid mt-3">
				@include('partials.nav') 
				<div class="row mb-2">
					<div class="col-sm-4">
						<h2>Workman</h2>
						<h5>{{$workman->name}} | {{$workman->employee_code}}</h5>
					</div>
					<div class="col-sm-8 textM-right"> 
						<a href="/{{$alias}}/workmans" class="btn btn-secondary btn-radius mt-4">
                            Back
						</a>
					</div>
				</div>
			</div>
		</div>
		<section class="content mb-5">
			<div class="container-fluid">
				<div class="row">
					<section class="col-lg-8 connectedSortable">
						<form>
							<div class="row">
								<div class="col-lg-5">
									<div class="form-label-group">
										<input type="text" id="reservation" name="date_range" class="form-control daterangebg" value="{{$dateRange}}">
	                        			<label for="reservation">Date range</label>
									</div>
								</div>
								<div class="col-lg-5">
									<div class="form-label-group">
										<select class="form-control select2" id="type" name="shift_id" class="form-control" placeholder="EMAIL">
											<option value="">Select shift name</option>
											@foreach($shifts as $shift)
	                                            <option value="{{$shift->id}}" @if(isset($shiftId) && ($shiftId == $shift->id) || (old('shift_id') == $shift->id)) selected @endif>
	                                                {{$shift->name}}
	                                            </option>
	                                        @endforeach
										</select>
									</div>
								</div>
								<div class="col-lg-2">
									<button class="btn btn-secondary btn-radius mt-4" type="submit">
		                                Search    
		                            </button>
								</div>
							</div>
						</form>	
						<!-- <div class="card">
							<div class="card-header">
								<h3 class="card-title">Attendance summary</h3> 
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-md-2 col-6">
										<h6 class="f-13"><strong>Days present: 20</strong></h6>
									</div>
									<div class="col-md-2 col-6">
										<h6 class="f-13"><strong>Days absent: 2</strong></h6>
									</div>
									<div class="col-md-2 col-6">
										<h6 class="f-13"><strong>Days on leave: 2</strong></h6>
									</div>
									<div class="col-md-2 col-6">
										<h6 class="f-13"><strong>Late days: 4</strong></h6>
									</div>
								</div>
							</div>
						</div> -->
						<div class="card">
							<div class="card-header border-0 pt-4">
								<div class="row">
									<div class="col-md-8">
										<h3 class="card-title">Attendance Summary</h3>
									</div>
									<!-- <div class="col-md-4">
										<div class="input-group custom-search">
											<div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-search"></i></span>
											</div>
											<input type="text" class="form-control" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1">
										</div>
									</div>
								</div> -->
							</div>
							<div class="card-body pl-0 pr-0">
								<div class="table-responsive">
									<table class="table table-striped table-bordered admintable table newtabstriped border-0" cellspacing="0" width="100%" id="dataGrid">
										<thead>
											<tr>
												<th>
													<input class="filled-in" name="group1" type="checkbox" id="attendance">
													<label for="attendance"></label>
												</th>
												<th>ATTENDANCE DATE</th>
												<th>IN TIME</th>
												<th>OUT TIME</th>
												<th>WORKING HOURS</th>
												<th>IN ADDRESS</th>
												<th>OUT ADDRESS</th>
												<th>View Logs</th>
											</tr>
										</thead>
										<tbody>	
											@foreach($data as $attendance)
												<tr>
													<td>
														<input class="filled-in" name="group1" type="checkbox" id="attendance1">
														<label for="attendance1"></label>
													</td>
													<td>
														{{date('d M Y', strtotime($attendance->attendance_date))}}
													</td>
													<td>
														{{date('h:i A', strtotime($attendance->in_time))}}
													</td>
													<td>
														{{date('h:i A', strtotime($attendance->out_time))}}
													</td>
													<td>
														{{$attendance->working_time}}
													</td>
													<td>
														@if($attendance->in_address)
									                        {{$attendance->in_address['geo_address']}}
									                        <a target="_blank" href="http://maps.google.com/maps?q={{$attendance->in_address['geo_latitude']}},{{$attendance->in_address['geo_longitude']}}" title="Location" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
																<i class='fa fa-map-marker'></i>
															</a>
														@endif	
													</td>
													<td>
														@if($attendance->out_address)
									                        {{$attendance->out_address['geo_address']}} 
									                        <a target="_blank" href="http://maps.google.com/maps?q={{$attendance->out_address['geo_latitude']}},{{$attendance->out_address['geo_longitude']}}" title="Location" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
																<i class='fa fa-map-marker'></i>
															</a> 
									                    @endif 
													</td>
													<td>
														<a href="/{{$alias}}/workman/{{$workman->id}}/attendance-summary?attendance_id={{$attendance->id}}" title="View Logs" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
															<i class='fa fa-eye'></i>
														</a>
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</section>
					<section class="col-lg-4 connectedSortable">
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Workman selfie images</h3> 
							</div>
							<div class="card-body">
								<div class="row">
									@foreach($attendanceLogs as $log)
										@if($log->photo)
											<div class="col-md-4 col-6 mb-2">
	                                            <img src="{!! $log->photo !!}" alt="your image" style="width:150px;height: 150px;" />
	                                            <p>{{date('d M Y H:i:s', strtotime($log->created_at))}}</p>
											</div>
	                                    @endif
									@endforeach
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">{{$workman->name}}</h3> 
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Workman code:</h6>
										<h4 class="f-20 font-weight-normal">{{$workman->employee_code}}</h4>
									</div>
									<!-- <div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Department:</h6>
										<h4 class="f-20 font-weight-normal">Department Name</h4>
									</div> -->
									<div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Manager:</h6>
										<h4 class="f-20 font-weight-normal">
											{{$workman->hod ? $workman->hod->name : '-'}}
										</h4>
									</div>
									<div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Location:</h6>
										<h4 class="f-20 font-weight-normal">
											{{$workman->location ? $workman->location->name : '-'}}
										</h4>
									</div>
									<div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Email ID:</h6>
										<h4 class="f-20 font-weight-normal">{{$workman->email}}</h4>
									</div>
									<div class="col-md-12 mb-3">
										<h6 class="f-14 font-weight-medium">Contact No.:</h6>
										<h4 class="f-20 font-weight-normal">{{$workman->mobile}}</h4>
									</div>
								</div>
							</div>
						</div>
						@if(count($workmen))
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Team Members</h3> 
							</div>
							<div class="card-body">
								<div id="scrollpart">
									@foreach($workmen as $emp)
										<div class="row favTailor">
											<div class="col-8">
												<div class="favAvatar">
													@if($emp->image)
			                                            <img src="{!! $workman->image !!}" alt="your image" style="width:150px;height: 150px;" />
			                                        @else
														<img src="/assets/img/user.jpg">
			                                        @endif
												</div> <span class="taiName">{{$emp->name}}</span>
												<div class="tailo_rating">{{$emp->employee_code}}</div>
											</div>
											<div class="col-4">
												<div class="avgtime">
													<img src="/assets/img/date-line.svg" />
												</div>
											</div>
										</div>
									@endforeach
								</div>
							</div>
						</div>
						@endif
					</section>
				</div>
			</div>
		</section>
	</div>
	<aside class="control-sidebar control-sidebar-dark"></aside>

@endsection

@section('css')
	<link rel="stylesheet" href="/assets/css/daterangepicker.css">
@endsection

{{-- Scripts --}}
@section('scripts')
    @parent
    <!-- DATA TABES SCRIPT -->
    <script src="/assets/js/moment.min.js"></script>
    <script src="/assets/js/daterangepicker.js"></script>
    <script>
    	var oTable;
		
		$(document).ready(function() {

			$('#dataGrid').DataTable({
			    language: { search: "" },
			    'aoColumnDefs': [{
			        'bSortable': false,
			        'aTargets': [-1],
			    }],
			    buttons: [
					'excel',
				],
			    "language": {
			      	search: '', searchPlaceholder: "Search...",
				    "paginate": {
				      	"previous": "<i class='fa fa-chevron-left'></i>",
				      	"next": "<i class='fa fa-chevron-right'></i>"
				    }
				},
				'olanguage': { 'sSearch': '', 'sSearchPlaceholder': "Search" },
				"ordering": false,
				"info":     true, 
			});
			$("div.toolbar").html('<h3 class="card-title">Total Results: {{count($data)}}</h3>');
		});	

        $('#scrollpart').slimscroll({
            height: '280px',
        });
        $(function () { 
         	$('#reservation').daterangepicker()
        })
    </script>
    <script>
        $(function () { 
         	$('#reservation').daterangepicker()
        })
    </script>
    
@endsection