<script type="text/ng-template" id="showWorkOrderModal.html">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="ok()">
			<i class="ti ti-close"></i>
		</button>
		<h4 class="modal-title">
			Work Order {{_work_order.number}} 
			<span ng-if="_work_order.status">({{_work_order.status}})</span>
		</h4>
	</div>
	<div class="modal-body">
		<table class="table">
			<tbody>
				<tr>
					<th width="20%">When:</th>
					<td>{{start_at}}</td>
				</tr>
				<tr>
					<th>Customer:</th>
					<td><a href="#/customers/{{_work_order.customer.id}}">{{_work_order.customer.name}}</a></td>
				</tr>
				<tr>
					<th>Contact(s):</th>
					<td>
						<span>{{_work_order.customer.contacts.phone_primary}}</span>
						<span ng-if="_work_order.customer.contacts.phone_secondary"> / {{_work_order.customer.contacts.phone_secondary}}</span>
					</td>
				</tr>
				<tr>
					<th>Property:</th>
					<td>
						<a href="https://www.google.com/maps/dir/Current+Location/{{_work_order.property.location.lat}},{{_work_order.property.location.lng}}" target="_blank">
							{{_work_order.property.location.address}}
						</a>
						&nbsp;({{_work_order.property.address_type_formatted}})
					</td>
				</tr>
				<tr>
					<th>Dogs?</th>
					<td>{{_work_order.property.has_dog_formatted}}</td>
				</tr>
				<tr ng-if="_work_order.property.general_informations.gate_code">
					<th>Gate Code:</th>
					<td>{{_work_order.property.general_informations.gate_code}}</td>
				</tr>
				<tr>
					<th>Bodies of Water:</th>
					<td>
						<div ng-repeat="body_of_water in _work_order.property.bodies_of_water">
							{{$index+1}} - {{body_of_water}}
						</div>
					</td>
				</tr>
				<tr>
					<th>Assigned To:</th>
					<td>
						<span ng-repeat="employee in _work_order.employees" style="margin-right: 5px;">
							<a href="#/employees/{{employee.pivot.employee_id}}">{{employee.name}}</a>
						</span>
					</td>
				</tr>
				<tr ng-if="_work_order.property.about">
					<th>About:</th>
					<td>{{_work_order.property.about}}</td>
				</tr>
				<tr ng-if="_work_order.services.length">
					<th>Service(s):</th>
					<td>
						<div ng-repeat="service in _work_order.services">
							<a href="#/services/{{service.id}}">{{service.name}}</a>&nbsp;({{service.pivot.qty}})
						</div>
					</td>
				</tr>
				<tr ng-if="_work_order.products.length">
					<th>Product(s):</th>
					<td>
						<div ng-repeat="product in _work_order.products">
							<a href="#/products/{{product.id}}">{{product.name}}</a>&nbsp;({{product.pivot.qty}})
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button ng-if="!_work_order.status" ng-controller="WorkOrderVisitsMainController as wv" class="btn btn-danger" ng-click="wv._cancel(_work_order.id, start_date)">
			<i class="ti ti-close" style="margin-right: 5px;"></i>
			Cancel Visit
		</button>
		<button ng-if="!_work_order.status" ng-controller="WorkOrderVisitsMainController as wv" class="btn btn-success" ng-click="wv._confirm(_work_order.id, start_date)">
			<i class="ti ti-hand-open" style="margin-right: 5px;"></i>
			Confirm Visit
		</button>
		<button ng-if="_work_order.status == 'Confirmed'" ng-controller="WorkOrderVisitsMainController as wv" class="btn btn-success" ng-click="wv._done(_work_order.id, start_date)">
			<i class="ti ti-check" style="margin-right: 5px;"></i>
			Done
		</button>
		<a ng-click="detailsWorkOrder(_work_order.id)" class="btn btn-default">
			<i class="ti ti-search" style="margin-right: 5px;"></i>
			Details
		</a>
		<a ng-click="editWorkOrder(_work_order.id)" class="btn btn-warning">
			<i class="ti ti-pencil" style="margin-right: 5px;"></i>
			Edit
		</a>
	</div>
</script>