<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/employees">Employees</a></li>
	<li class="active">Employee Details</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<tabset tab-theme="orange" tab-position="top">
				<tab heading="General Information">
					<p ng-if="vm.employee.preferences.image" class="text-center">
						<img ng-src="{{vm.employee.image_full}}" class="img-circle" />
					</p>
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Name:</th>
								<td>{{vm.employee.name}}</td>
							</tr>
							<tr>
								<th>Phone:</th>
								<td>{{vm.employee.contacts.phone}}</td>
							</tr>
							<tr ng-if="vm.employee.contacts.phone_secondary">
								<th>Secondary Phone:</th>
								<td>{{vm.employee.contacts.phone_secondary}}</td>
							</tr>
							<tr>
								<th>Email:</th>
								<td>{{vm.employee.contacts.email}}</td>
							</tr>
							<tr ng-if="vm.employee.location.address">
								<th>Address:</th>
								<td>{{vm.employee.location.address}}</td>
							</tr>
							<tr>
								<th>Color:</th>
								<td><span style="display: block; width: 20px; height: 20px; background-color: {{vm.employee.preferences.color}}"></span></td>
							</tr>
							<tr ng-if="vm.employee.salary && vm.employee.salary_recurrency">
								<th>Salary:</th>
								<td>{{vm.employee.salary | currency: "$"}} ({{vm.employee.salary_recurrency}})</td>
							</tr>
							<tr ng-if="vm.employee.about">
								<th>About:</th>
								<td>{{vm.employee.about}}</td>
							</tr>
							<tr ng-if="vm.employee.credential">
								<th>Credential:</th>
								<td>
									<span ng-if="vm.employee.credential.roles.web_access" class="label label-info">WEB ACCESS</span>
									<span ng-if="vm.employee.credential.roles.mobile_access" class="label label-info">MOBILE ACCESS</span>
									<span ng-if="vm.employee.credential.roles.mobile_access_others" class="label label-info">SEE OTHER TECHNICIANS'S VISITS</span>
								</td>
							</tr>
							<tr ng-if="vm.employee.quickbooks_id">
								<th>Quickbooks ID:</th>
								<td>{{vm.employee.quickbooks_id}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Complaints" ng-click="vm._getComplaints(vm.employee.id)">
					<p><a href="#/complaints/new" class="btn btn-sm btn-info" title="New Complaint">+ New Complaint</a></p>
					<table class="table" ng-repeat="complaint in vm._complaints">
						<tr>
							<td style="background-color: #f5f5f5">
								<span><i class="ti ti-user" title="Customer"></i>&nbsp;&nbsp;{{complaint.customer.name}}</span>
								<span class="hidden-xs hidden-sm">
									<i class="ti ti-timer" title="When" style="margin-left: 25px;"></i>&nbsp;&nbsp;{{complaint.created_at_formatted}}
								</span>
								<span class="pull-right">
									<i class="ti ti-pencil-alt" ng-click="vm._editComplaint(complaint.id)" title="Edit" style="cursor: pointer; margin-right: 10px;"></i>
									<i class="ti ti-close" ng-click="vm._removeComplaint(complaint.id)" title="Delete" style="cursor: pointer;"></i>
								</span>
							</td>
						</tr>
						<tr>
							<td>{{complaint.subject}}</td>
						</tr>
						<tr>
							<td>{{complaint.description}}</td>
						</tr>
						<tr class="hidden-md hidden-lg">
							<td>When: <a>{{complaint.created_at_formatted}}</a></td>
						</tr>
					</table>
					<p class="text-center" ng-show="vm._complaints.length == 0">No records found</p>
				</tab>
				<tab heading="Work Orders" ng-click="vm._getWorkOrders(vm.employee.id)">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>ID</th>
								<th>Customer</th>
								<th class="hidden-xs">Property</th>
								<th class="hidden-xs">Start</th>
								<th class="hidden-xs">End</th>
								<th>Schedule</th>
								<th class="hidden-xs">Assigned To</th>
								<th class="hidden-xs">Service(s)</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="work_order in vm._work_orders | itemsPerPage: 10">
								<td>
									<a href="#/work-orders/{{work_order.id}}">
										{{work_order.number}}
									</a>
								</td>
								<td>
									<a href="#/customers/{{work_order.customer.id}}">
										{{work_order.customer.name}}
									</a>
								</td>
								<td class="hidden-xs">
									<a href="#/properties/{{work_order.customer.id}}/detail/{{work_order.property.id}}">
										{{work_order.property.location.address}}
									</a>
								</td>
								<td class="hidden-xs">{{work_order.work_order_schedule.start_date_formatted}}</td>
								<td class="hidden-xs">{{work_order.work_order_schedule.end_date_formatted}}</td>
								<td>{{work_order.work_order_schedule.schedule_formatted}}</td>
								<td class="hidden-xs">
									<div ng-repeat="employee in work_order.employees">
										<a href="#/employees/{{employee.pivot.employee_id}}">
											{{employee.name}}
										</a>
									</div>
								</td>
								<td class="hidden-xs">
									<div ng-repeat="service in work_order.services">
										<a href="#/services/{{service.id}}">
											{{service.name}}
										</a>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
											<i class="ti ti-settings"></i>&nbsp;&nbsp;<span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu">
											<li><a href="#/work-orders/{{work_order.id}}/edit">Edit</a></li>
											<li><a ng-click="vm._destroyWorkOrder(work_order)">Delete</a></li>
										</ul>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm._work_orders.length == 0">No records found</p>
					<div class="row">
						<div class="col-sm-12 text-center">
							<dir-pagination-controls></dir-pagination-controls>
						</div>
					</div>
				</tab>
				<li class="tab-controls dropdown" dropdown>
					<a class="dropdown-toggle" dropdown-toggle>
						<i class="ti ti-settings"></i>&nbsp;&nbsp;Actions&nbsp;&nbsp;<span class="caret"></span>
					</a>
					<ul class="dropdown-menu pull-left">
						<li><a href="#/employees/{{vm.employee.id}}/edit">Edit</a></li>
						<li><a ng-click="vm._destroy(vm.employee.id)">Delete</a></li>
						<li class="divider"></li>
						<li>
							<a ng-click="vm._sendToQuickbooks(vm.employee.id)">
								<span ng-if="vm.employee.quickbooks_id">Update To Quickbooks</span>
								<span ng-if="!vm.employee.quickbooks_id">Add To Quickbooks</span>
							</a>
						</li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
