<div class="row" style="margin-bottom: 15px;">
	<div class="col-sm-3">
		<select class="form-control" ng-model="workOrderVisitsMainCtrl.has_notes_filter">
			<option value="">-- Has Notes --</option>
			<option value="Yes">Yes</option>
			<option value="No">No</option>
			<option value="-1">All</option>
		</select>
	</div>
	<div class="col-sm-3">
		<select class="form-control" ng-model="workOrderVisitsMainCtrl.status_filter">
			<option value="">-- Status --</option>
			<option value="Canceled">Canceled</option>
			<option value="Confirmed">Confirmed</option>
			<option value="Done">Done</option>
			<option value="Pending">Pending</option>
			<option value="-1">All</option>
		</select>
	</div>
	<div class="col-sm-3">
		<select class="form-control" ng-model="workOrderVisitsMainCtrl.finished_filter">
			<option value="">-- Finished --</option>
			<option value="Yes">Yes</option>
			<option value="No">No</option>
			<option value="-1">All</option>
		</select>
	</div>
	<div class="col-sm-3">
		<select class="form-control" ng-model="workOrderVisitsMainCtrl.payment_filter">
			<option value="">-- Payment --</option>
			<option value="Canceled">Canceled</option>
			<option value="Billed">Billed</option>
			<option value="Not Billed">Not Billed</option>
			<option value="Paid">Paid</option>
			<option value="-1">All</option>
		</select>
	</div>
</div>
<div class="row">
	<div class="col-sm-8">
		<input type="text" class="form-control" style="width: 100%;" ng-model="searchInput" placeholder="Search here...">
	</div>
	<div class="col-sm-4">
		<div class="input-group">
			<span class="input-group-addon">
				<i class="ti ti-calendar"></i>
			</span>
			<input type="text" ng-focus="workOrderVisitsMainCtrl._openCalendar($event, 'date_from')" class="form-control datepicker" is-open="workOrderVisitsMainCtrl.calendar_opened['date_from']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_from" id="date_from" ng-model="workOrderVisitsMainCtrl.date_from" placeholder="From">
			<span class="input-group-addon">
				<i class="ti ti-calendar"></i>
			</span>
			<input type="text" ng-focus="workOrderVisitsMainCtrl._openCalendar($event, 'date_to')" class="form-control datepicker" is-open="workOrderVisitsMainCtrl.calendar_opened['date_to']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_to" id="date_to" ng-model="workOrderVisitsMainCtrl.date_to" placeholder="To">
			<span class="input-group-btn">
				<a ng-disabled="!workOrderVisitsMainCtrl.date_from && !workOrderVisitsMainCtrl.date_to" ng-click="workOrderVisitsMainCtrl._filterByDate()" class="btn btn-primary">Search</a>
			</span>
		</div>
	</div>
</div>
<table class="table table-striped" style="margin-top: 15px;">
	<thead>
		<tr>
			<th>ID</th>
			<th class="hidden-xs">Work Order</th>
			<th class="hidden-xs">Type</th>
			<th class="hidden-xs">Customer</th>
			<th class="hidden-xs">Property</th>
			<th class="hidden-xs">Service(s)</th>
			<th class="hidden-xs">Assigned To</th>
			<th>When</th>
			<th>Status</th>
			<th class="hidden-xs">Finished</th>
			<th class="hidden-xs">Payment</th>
			<th width="15%">Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr dir-paginate="work_order_visit in workOrderVisitsMainCtrl._filteredWorkOrderVisits = 
							(workOrderVisitsMainCtrl._work_order_visits | 
							filter: searchInput | 
							filter: workOrderVisitsMainCtrl._filterByHasNotes | 
							filter: workOrderVisitsMainCtrl._filterByStatus | 
							filter: workOrderVisitsMainCtrl._filterByFinished | 
							filter: workOrderVisitsMainCtrl._filterByPayment) | 
							itemsPerPage: 10">
			<td>
				<a href="#/work-order-visits/{{work_order_visit.id}}">
					{{work_order_visit.number}}
					<span ng-if="work_order_visit.notes.length" class="badge badge-warning" style="margin-left: 5px;" data-toggle="popover" popover data-placement="right" data-notes="{{work_order_visit.notes}}">NOTES</span>
				</a>
			</td>
			<td class="hidden-xs">
				<a href="#/work-orders/{{work_order_visit.work_order_id}}" data-toggle="popover" popover-about data-placement="right" data-about="{{work_order_visit.work_order.about}}">
					{{work_order_visit.work_order.number}}
				</a>
			</td>
			<td class="hidden-xs">{{work_order_visit.work_order.type}}</td>
			<td class="hidden-xs">
				<a href="#/customers/{{work_order_visit.work_order.customer.id}}">
					{{work_order_visit.work_order.customer.name}}
				</a>
			</td>
			<td class="hidden-xs">
				<a href="#/properties/{{work_order_visit.work_order.customer.id}}/detail/{{work_order_visit.work_order.property.id}}">
					{{work_order_visit.work_order.property.location.address}}
				</a>
			</td>
			<td class="hidden-xs">
				<div ng-repeat="service in work_order_visit.services">
					<a href="#/services/{{service.id}}">
						{{service.name}}
					</a>
				</div>
			</td>
			<td class="hidden-xs">
				<div ng-repeat="employee in work_order_visit.employees">
					<a href="#/employees/{{employee.pivot.employee_id}}">{{employee.name}}</a>
				</div>
			</td>
			<td>{{work_order_visit.date_formatted}} {{work_order_visit.start_time_formatted}} - {{work_order_visit.end_time_formatted}}</td>
			<td>
				<span class="badge" ng-class="{'badge-warning': work_order_visit.status_formatted == 'Pending', 'badge-danger': work_order_visit.status_formatted == 'Canceled', 'badge-info': work_order_visit.status_formatted == 'Confirmed', 'badge-success': work_order_visit.status_formatted == 'Done'}">{{work_order_visit.status_formatted}}</span>
			</td>
			<td class="hidden-xs">{{work_order_visit.finished_formatted}}</td>
			<td class="hidden-xs">
				<span class="badge badge-warning" ng-if="!work_order_visit.invoice">Not Billed</span>
				<span class="badge badge-danger" ng-if="work_order_visit.invoice.status_formatted == 'Billed'">Billed</span>
				<span class="badge badge-info" ng-if="work_order_visit.invoice.status_formatted == 'Canceled'">Canceled</span>
				<span class="badge badge-success" ng-if="work_order_visit.invoice.status_formatted == 'Paid'">Paid</span>
			</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-order-visits/{{work_order_visit.id}}/edit">Edit</a></li>
						<li ng-if="work_order_visit.status_formatted != 'Done'" class="divider"></li>
						<li ng-if="work_order_visit.status_formatted == 'Pending'"><a ng-click="workOrderVisitsMainCtrl._cancel(work_order_visit.id)">Cancel</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Pending'"><a ng-click="workOrderVisitsMainCtrl._confirm(work_order_visit.id)">Confirm</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Confirmed'"><a ng-click="workOrderVisitsMainCtrl._done(work_order_visit.id)">Done</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Canceled'"><a ng-click="workOrderVisitsMainCtrl._pending(work_order_visit.id)">Pending</a></li>
						<li class="divider" ng-if="work_order_visit.status_formatted == 'Done'"></li>
						<li ng-if="work_order_visit.status_formatted == 'Done'"><a ng-click="workOrderVisitsMainCtrl._resendSummary(work_order_visit.id)">ReSend Summary</a></li>
						<li class="divider" ng-if="work_order_visit.status_formatted == 'Done'"></li>
						<li ng-if="work_order_visit.status_formatted == 'Done'">
							<a ng-click="workOrderVisitsMainCtrl._finished(work_order_visit.id)">
								<span ng-if="!work_order_visit.finished">Finished</span>
								<span ng-if="work_order_visit.finished">Unfinished</span>
							</a>
						</li>
						<li class="divider" ng-if="work_order_visit.status_formatted == 'Done' && work_order_visit.work_order.recurring == 0"></li>
						<li ng-if="work_order_visit.status_formatted == 'Done' && work_order_visit.work_order.recurring == 0 && !work_order_visit.invoice"><a href="#/invoices/new/{{work_order_visit.id}}">Create Invoice</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Done' && work_order_visit.work_order.recurring == 0 && work_order_visit.invoice && work_order_visit.invoice.status_formatted == 'Canceled'"><a ng-click="workOrderVisitsMainCtrl._destroyInvoice(work_order_visit.invoice.id)">Delete Invoice</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Done' && work_order_visit.work_order.recurring == 0 && work_order_visit.invoice && work_order_visit.invoice.status_formatted == 'Billed'"><a ng-click="workOrderVisitsMainCtrl._cancelInvoice(work_order_visit.invoice.id)">Cancel Invoice</a></li>
						<li ng-if="work_order_visit.status_formatted == 'Done' && work_order_visit.work_order.recurring == 0 && work_order_visit.invoice && work_order_visit.invoice.status_formatted == 'Billed'"><a ng-click="workOrderVisitsMainCtrl._confirmPayment(work_order_visit.invoice.id)">Confirm Payment</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</tbody>
</table>
<p class="text-center" ng-show="workOrderVisitsMainCtrl._work_order_visits.length == 0">No records found</p>
<div class="row">
	<div class="col-sm-12 text-center">
		<dir-pagination-controls></dir-pagination-controls>
	</div>
</div>