@extends('layouts.master')

@section('content')
	<div class="row">
		<div class="col-sm-8">
			<h3>{!! $user_details->user->name !!}</h3>

			<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>

			<hr>
			<div class="clearfix">
				<div class="pull-left">
					<strong>Period: &nbsp;&nbsp; </strong>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<table class="table table-no-header table-striped-odd table-condensed">
				<tbody>
					<tr rowspan="0" colspan="0">
						<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
								{[{ user_details.rate_per_hour | currency:"£" }]}
							@endif
						</td>
					</tr>
					<tr>
						<td>Total amount:</td><td>{[{ service.total_hours * user_details.rate_per_hour | currency:"£" }]}</td>
					</tr>
				</tbody>
			</table>

		</div>
	</div>

	<hr>

	<table class="table table-condensed">
		<thead>
			<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>
		</thead>
		<tbody ng-repeat="(date, records) in data">
			<tr ng-repeat="record in records" rowspan="0" colspan="0">
				<td ng-show="$index == 0">{[{ $parent.$index + 1 }]}.</td>
				<td ng-show="$index == 0">{[{ date | date:"dd/MM/yyyy" }]}</td>
				<td class="centered">
					<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">{[{ 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">{[{ record.hours * user_details.rate_per_hour | currency:"£" }]}</td>
			</tr>
		</tbody>
	</table>
@stop