@section('header')
	@include('common.header')
@stop

@section('js')
	@parent

	<!-- AngularJS Templates (Vue.js should ignore these) -->
	<div style="display: none;" v-pre>
		<script type="text/ng-template" id="hr/modals/request_change.html">
			@include('hr::templates.change_request_modal', array('admin' => true))
		</script>
		<script type="text/ng-template" id="hr/modals/new_record_request.html">
			@include('hr::templates.new_record_request', array('admin' => true))
		</script>
		<script type="text/ng-template" id="hr/modals/approve-decline-time.html">
			@include('hr::templates.approve-decline')
		</script>
		<script type="text/ng-template" id="hr/modals/user-address.html">
			@include('hr::templates.user-address')
		</script>
	</div>
@stop

@section('content')

	<div class="alert alert-warning">
		You are currently viewing {!! $user_details->user->name !!}'s profile. You can quicky jump to
		<span class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">another user <b class="caret"></b></a>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
				<!-- dropdown menu links -->
				<li class="disabled"><a href="#"><b>Select another user:</b></a></li>
				<li>
					<ul class="dropdown-menu scroll-menu">
						@foreach (App\Models\User::getActiveList() as $u)
							<li><a tabindex="-1" href="{!! URL::to('hr/admin/users/'.$u->id) !!}"><i class="fa-fw @if ($u->id == $user_details->user_id) fa fa-check @endif"></i>{!! $u->name !!}</a></li>
						@endforeach
					</ul>
				</li>
			</ul>
		</span>
		or return to the <a href="{!! URL::to('hr/admin') !!}">admin overview</a>.
	</div>

	<div class="row task-beta" ng-controller="AdminUserTimeClockCtrl as admin" ng-init="user_details = {{ $user_details }}">
		<div class="col-sm-6" ng-cloak>
			@include('hr::templates.clocking-logs', array('admin' => true))
		</div>

		<div class="col-sm-6">
			<div class="widget widget-classic" ng-controller="AdminUserHolidaysCtrl as h" ng-cloak>
				<div class="widget-content">

					<div class="headline">
						<h4><i class="fa fa-plane"></i> Holidays</h4>
					</div>

					<div class="row">
						<div class="offset1">
							<div class="col-sm-4">
								<label>Default start time</label>
								<div editable-text="user_details.default_start_time" onbeforesave="saveUserData('default_start_time', $data)" e-class="input-tiny">{[{ user_details.default_start_time }]}</div>
							</div>
							<div class="col-sm-4">
								<label>Default end time</label>
								<div editable-text="user_details.default_end_time" onbeforesave="saveUserData('default_end_time', $data)" e-class="input-tiny">{[{ user_details.default_end_time }]}</div>
							</div>
							<div class="col-sm-4">
								<label>Paid days per year</label>
								<div>
									<span editable-number="user_details.annual_leaves" onbeforesave="saveUserData('annual_leaves', $data)">{[{ user_details.annual_leaves }]}</span> ({[{ user_details.paid_holiday_days_left }]} day(s) left)
								</div>
							</div>
						</div>
					</div>

					<hr>

					<table class="table table-striped" ng-hide="holidays.length == 0">
						<tbody>
							<tr ng-repeat="holiday in holidays">
								<td>{[{ holiday.description }]}</td>
								<td>{[{ holiday.start_date | moment:"DD MMM YYYY" }]}</td>
								<td>{[{ holiday.end_date | moment:"DD MMM YYYY" }]}</td>
								<td>{[{ holiday.total_days }]} days</td>
								<td>{[{ holiday.paid == '1' ? 'Paid' : '' }]}</td>
								<td><span class="label" ng-class="{'label-success': holiday.status == 'approved', 'label-warning': holiday.status == 'pending', 'label-danger': holiday.status == 'declined'}">{[{ holiday.status }]}</span></td>
								<td>
									<div class="text-right">
										<div class="btn-group" ng-show="holiday.status == 'pending'">
											<button class="btn btn-danger btn-sm" ng-click="decline(holiday)">Decline</button>
											<button class="btn btn-success btn-sm" ng-click="approve(holiday)">Approve</button>
										</div>
									</div>
								</td>
								<td>
									<button ng-if="holiday.status == 'approved'"
											ng-confirm-click="Are you sure you want to cancel this holiday?"
											confirmed-click="cancelHoliday(holiday)"
											class="btn btn-danger btn-sm" type="button">Cancel</button>
								</td>
							</tr>
						</tbody>
					</table>
					<p ng-show="holidays.length == 0" style="margin-top: 10px;"><small>No holidays found.</small></p>


				</div>
			</div>
		</div>

	</div>
@stop