<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>Work Orders</li>
	<li class="active">
		<span ng-if="vm.filter == 'one-off'">One-off Jobs</span>
		<span ng-if="vm.filter == 'recurring'">Recurring</span>
		<span ng-if="vm.filter == 'all'">All</span>
	</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Work Orders</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._downloadCSV()" title="Download CSV"><i class="ti ti-save"></i></a>
						<a class="button-icon" ng-click="vm._reload()" title="Reload"><i class="ti ti-reload"></i></a>
						<a href="#/work-orders/new" class="button-icon" title="New Work Order"><i class="ti ti-plus"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<p><input type="text" class="form-control" ng-model="searchInput" placeholder="Search here..."></p>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>ID</th>
								<th class="hidden-xs">Customer</th>
								<th class="hidden-xs">Property</th>
								<th class="hidden-xs">Type</th>
								<th>Start</th>
								<th class="hidden-xs">End</th>
								<th>Schedule</th>
								<th class="hidden-xs">Service(s)</th>
								<th class="hidden-xs">Assigned To</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="work_order in vm.work_orders | filter: searchInput | itemsPerPage: 10">
								<td>
									<a href="#/work-orders/{{work_order.id}}">
										{{work_order.number}}
									</a>
								</td>
								<td class="hidden-xs">
									<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.type}}</td>
								<td>{{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="service in work_order.services">
										<a href="#/services/{{service.id}}">
											{{service.name}}
										</a>
									</div>
								</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>
									<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 ng-if="work_order.recurring"><a href="#/work-orders/{{work_order.id}}/edit">Edit</a></li>
											<li><a ng-click="vm._destroy(work_order.id)">Delete</a></li>
											<li class="divider" ng-if="work_order.recurring && !work_order.work_order_schedule.count"></li>
											<li ng-if="work_order.recurring && !work_order.work_order_schedule.count"><a ng-click="vm._createNextVisits(work_order.id)">Create Next Work Order Visits</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>
				</div>
			</div>
		</div>
	</div>
</div>
