
{{-- Shared template between the user view & admin view. It is included from another blade template. Not an AngularJS template --}}

<div class="widget widget-classic">
	<div class="widget-content">

		<div class="headline">
			<h4><i class="fa fa-clock-o"></i> Your clocking logs</h4>
		</div>

		<div class="row">
			<div class="col-sm-8">
				<h3>{!! $user_details->user->name !!}</h3>
				<span ng-init="departments = {{ json_encode(App\Modules\Hr\UserDetails::departments()) }}"></span>
				@if (isset($admin) && $admin === true)
					<p editable-text="user_details.national_insurance" onbeforesave="saveUserData('national_insurance', $data)">National Insurance Number: {[{ user_details.national_insurance || 'Not defined. Click to edit' }]}</p>
					<p><a href="#" ng-click="editAddress()" ng-class="{'editable editable-empty': !user_details.inline_address}" data-eat-click>{[{ user_details.inline_address || 'Click to add an address' }]} <i class="fa fa-pencil"></i></a></p>
					<p editable-select="user_details.department_id" e-ng-options="key as name for (key, name) in departments" onbeforesave="saveUserData('department_id', $data)">{[{ departments[user_details.department_id] || 'No department' }]}</p>
				@else
					<p class="muted" ng-show="user_details.national_insurance">NI: {[{ user_details.national_insurance }]}</p>
					<p class="muted" ng-show="user_details.inline_address">{[{ user_details.inline_address }]}</p>
					<p class="muted" ng-show="user_details.department_id">{[{ departments[user_details.department_id] }]}</p>
				@endif				
			</div>
			<div class="col-sm-4">
				<table class="table table-no-header table-striped-odd table-condensed">
					<tbody>
						<tr>
							<td>Total hours:</td><td>{[{ service.total_hours }]}</td>
						</tr>
						<tr>
							<td>Your hourly rate:</td>
							<td>
								@if (isset($admin) && $admin === true)
									<span editable-text="user_details.rate_per_hour" onbeforesave="saveUserData('rate_per_hour', $data)" e-class="input-tiny">{[{ user_details.rate_per_hour | currency:"£" }]}</span>
								@else
									<span class="confidential">{[{ user_details.rate_per_hour | currency:"£" }]}<span>
								@endif
							</td>
						</tr>
						<tr>
							<td>Total amount:</td><td><span class="confidential">{[{ service.total_hours * user_details.rate_per_hour | currency:"£" }]}<span></td>
						</tr>
					</tbody>
				</table>

				{{-- Render only if the template is for the admin view --}}
				@if (isset($admin) && $admin === true)
					<a ng-href="{!! URL::to('hr/admin/users/'.$user_details->user_id.'/excel') !!}?start={[{ service.selected_period.startDate.format('YYYY-MM-DD') }]}&end={[{ service.selected_period.endDate.format('YYYY-MM-DD') }]}" target="_blank" class="btn btn-default btn-block pull-right" style="margin-top: 20px;"><i class="fa fa-print"></i> Generate Excel Invoice</a>
				@endif

			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
			<hr>				
				<div class="pull-left" ng-model="service.selected_period" ng-daterangepicker data-ranges="service.daterangepicker.ranges" data-format="MMMM D, YYYY">
					<strong>Period: &nbsp;&nbsp; </strong>
						<i class="fa fa-calendar fa-lg"></i>
						<span>{[{ service.selected_period.startDate.format('D MMM YYYY') }]} - {[{ service.selected_period.endDate.format('D MMM YYYY') }]}</span>
				</div>
				{{-- Show Generate Timesheet button only for regular HR users, not admin --}}
				@if (!isset($admin) || $admin !== true)
					<div class="pull-right">
							<button class="btn btn-primary" data-ng-click="generateTimesheet()">Generate Timesheet</button>
					</div>
				@endif				
			</div>
		</div>
		<hr>

		<table class="table table-condensed">
			<thead>
				<th></th>
				<th></th>
				<th></th>
				<th class="centered"><i class="fa fa-circle text-success"></i> Clock In</th>
				<th class="centered"><i class="fa fa-circle text-danger"></i> Clock Out</th>
				<th class="centered">Hours</th>
				<th class="centered">Amount</th>
				<th></th>
			</thead>
			<tbody ng-repeat="date in keys(data)">
				<tr ng-click="show[date]=!show[date]" ng-class="{'hr-header':show[date]}">
					<td >{[{ $index + 1 }]}.</td>
					<td >{[{ date | date:"EEE" }]}</td>
					<td >{[{ date | date:"dd/MM/yyyy" }]}</td>
					<td class="centered">
						{[{
							data[date][0].in.time.format("HH:mm")
						}]}
					</td>
					<td class="centered">
						{[{
							data[date][data[date].length-1].out.time.format("HH:mm")
						}]}
					</td>
					<td class="centered">
						{[{
							days[date] || ''
						}]}
					</td>
					<td class="centered ">
						<span class="confidential">{[{
							days[date] * user_details.rate_per_hour | currency:"£"
						}]}<span>
					</td>
					<td class="centered ">
						<i
							class="fa fa-chevron-down"
							ng-show='!show[date]'
						></i>
						<i
							class="fa fa-chevron-up" 
							ng-show='show[date]'
						></i>
					</td>
				</tr>
				<tr
				ng-repeat="record in data[date]"
				ng-show='show[date]'
				ng-class="{'hr-header':record.in.lunch}"
				>
					<td class="centered"><td>
					<td class="centered"></td>
					<td class="centered">
						<span ng-show="record.in.lunch">
							<i class="fa fa-cutlery" tooltip="lunch brake"></i>
						</span>
						<span ng-show="record.in">
							{[{ record.in.time.format("HH:mm") }]}
							<a 
								href="#" 
								ng-click="requestChange(record.in)"
								ng-hide="record.in.new_record_request == '1' || record.in.pending_change_requests.length > 0"
								data-eat-click
							>
								<i class="fa fa-pencil" tooltip="Request a change"></i>
							</a>
						</span>
						<span
							class="label label-warning"
							ng-show="record.in.pending_change_requests.length > 0 && record.in.new_record_request == '0'"
							ng-click="showApproveDeclineModal(record.in.pending_change_requests[0])"
							tooltip="Change to {[{ record.in.pending_change_requests[0].time }]}"
						>
							Pending update
						</span>
						<span
							class="label label-warning"
							ng-show="record.in.new_record_request == '1'"
							ng-click="showApproveDeclineModal(record.in)"
						>
							Pending approval
						</span>
						<span ng-hide="record.in">
							<a
								href="#"
								ng-click="newRecord(date, 'in')"
								eat-click
							>
								Add a record
							</a>
						</span>
					</td>
					<td class="centered">
						<span
							ng-show="record.out.lunch"
						>
							<i class="fa fa-cutlery" tooltip="lunch break"></i>
						</span>
						<span ng-show="record.out">
							{[{record.out.time.format("HH:mm") }]}
							<a href="#"
							ng-click="requestChange(record.out)"
							ng-hide="record.out.new_record_request == '1' || record.out.pending_change_requests.length > 0"
							data-eat-click
							>
								<i class="fa fa-pencil"
									tooltip="Request a change">
								</i>
							</a>
						</span>
						<span
							class="label label-warning"
							ng-show="record.out.pending_change_requests.length > 0 && record.out.new_record_request == '0'"
							ng-click="showApproveDeclineModal(record.out.pending_change_requests[0])"
							tooltip="Change to {[{ record.out.pending_change_requests[0].time }]}">
							Pending update
						</span>
						<span
							class="label label-warning"
							ng-show="record.out.new_record_request == '1'"
							ng-click="showApproveDeclineModal(record.out)">
							Pending approval
						</span>
						<span ng-hide="record.out">
							<a
								href="#"
								ng-click="newRecord(date, 'out')"
								eat-click
							>
								Add a record
							</a>
						</span>
					</td>

					<td class="centered">{[{ record.hours }]}</td>
					<td class="centered">
						<span class="confidential">{[{ record.hours * user_details.rate_per_hour | currency:"£" }]}</span>
					</td>
					<td>
						<span 
							class="label label-warning"
							ng-if="record.in.holiday_id"
						>
							Holiday
						</span>
					</td>
				</tr>

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