<script type="text/ng-template" id="showWorkOrderVisitModal.html">
	<div ng-controller="WorkOrderVisitsMainController as wv" ng-init="wv._mode = 'modal'">
		<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 Visit {{_work_order_visit.number}} 
				<span>({{_work_order_visit.status_formatted}})</span>
			</h4>
		</div>
		<div class="modal-body">
			<table class="table">
				<tbody>
					<tr>
						<th width="25%">Work Order:</th>
						<td>
							<a ng-click="wv._seeWorkOrder(_work_order_visit.work_order_id)">
								{{_work_order_visit.work_order.number}}
							</a>
						</td>
					</tr>
					<tr>
						<th>When:</th>
						<td>{{_work_order_visit.date_formatted}} {{_work_order_visit.start_time_formatted}} - {{_work_order_visit.end_time_formatted}}</td>
					</tr>
					<tr>
						<th>Type:</th>
						<td>{{_work_order_visit.work_order.type}}</td>
					</tr>
					<tr ng-if="_work_order_visit.work_order.about">
						<th>About (Work Order):</th>
						<td>{{_work_order_visit.work_order.about}}</td>
					</tr>
					<tr>
						<th>Customer:</th>
						<td><a ng-click="wv._seeCustomer(_work_order_visit.work_order.customer.id)">{{_work_order_visit.work_order.customer.name}}</a></td>
					</tr>
					<tr ng-if="_work_order_visit.work_order.customer.about">
						<th>About (Customer):</th>
						<td>{{_work_order_visit.work_order.customer.about}}</td>
					</tr>
					<tr>
						<th>Contact(s):</th>
						<td>
							<span>{{_work_order_visit.work_order.customer.contacts.phone_primary}}</span>
							<span ng-if="_work_order_visit.work_order.customer.contacts.phone_secondary"> / {{_work_order_visit.work_order.customer.contacts.phone_secondary}}</span>
						</td>
					</tr>
					<tr>
						<th>Property:</th>
						<td>
							<a ng-click="wv._seeProperty(_work_order_visit.work_order.customer.id, _work_order_visit.work_order.property.id)">{{_work_order_visit.work_order.property.location.address}}</a>
							<a href="https://www.google.com/maps/dir/Current+Location/{{_work_order_visit.work_order.property.location.lat}},{{_work_order_visit.work_order.property.location.lng}}" target="_blank" style="margin-left: 5px;">
								<i class="ti ti-location-pin" title="Get Directions"></i>
							</a>
							&nbsp;({{_work_order_visit.work_order.property.address_type_formatted}})
						</td>
					</tr>
					<tr>
						<th>Last Time Filter Was Cleaned:</th>
						<td>{{_work_order_visit.work_order.property.last_time_filter_cleaned}}</td>
					</tr>
					<tr>
						<th>Dogs?</th>
						<td>{{_work_order_visit.work_order.property.has_dog_formatted}}</td>
					</tr>
					<tr ng-if="_work_order_visit.work_order.property.general_informations.gate_code">
						<th>Gate Code:</th>
						<td>{{_work_order_visit.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_visit.work_order.property.bodies_of_water">
								{{$index+1}} - {{body_of_water}}
							</div>
						</td>
					</tr>
					<tr ng-if="_work_order_visit.work_order.property.about">
						<th>About (Property):</th>
						<td>{{_work_order_visit.work_order.property.about}}</td>
					</tr>
					<tr>
						<th>Assigned To:</th>
						<td>
							<span ng-repeat="employee in _work_order_visit.employees" style="margin-right: 5px;">
								<a ng-click="wv._seeEmployee(employee.pivot.employee_id)">{{employee.name}}</a>
							</span>
						</td>
					</tr>
					<tr ng-if="_work_order_visit.services.length">
						<th>Service(s):</th>
						<td>
							<div ng-repeat="service in _work_order_visit.services">
								<a ng-click="wv._seeService(service.id)">{{service.name}}</a>&nbsp;({{service.pivot.qty}})
							</div>
						</td>
					</tr>
					<tr ng-if="_work_order_visit.work_order.products.length">
						<th>Product(s):</th>
						<td>
							<div ng-repeat="product in _work_order_visit.work_order.products">
								<a ng-click="wv._seeProduct(product.id)">{{product.name}}</a>&nbsp;({{product.pivot.qty}})
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button ng-if="_work_order_visit.status_formatted == 'Pending'" class="btn btn-danger" ng-click="wv._cancel(_work_order_visit.id)">
				<i class="ti ti-close" style="margin-right: 5px;"></i>
				Cancel
			</button>
			<button ng-if="_work_order_visit.status_formatted == 'Pending'" class="btn btn-success" ng-click="wv._confirm(_work_order_visit.id)">
				<i class="ti ti-hand-open" style="margin-right: 5px;"></i>
				Confirm
			</button>
			<button ng-if="_work_order_visit.status_formatted == 'Confirmed'" class="btn btn-success" ng-click="wv._done(_work_order_visit.id)">
				<i class="ti ti-check" style="margin-right: 5px;"></i>
				Done
			</button>
			<button ng-if="_work_order_visit.status_formatted == 'Canceled'" class="btn btn-success" ng-click="wv._pending(_work_order_visit.id)">
				<i class="ti ti-check" style="margin-right: 5px;"></i>
				Pending
			</button>
			<a ng-click="wv._detailWorkOrderVisit(_work_order_visit.id)" class="btn btn-default">
				<i class="ti ti-search" style="margin-right: 5px;"></i>
				Details
			</a>
			<a ng-click="wv._editWorkOrderVisit(_work_order_visit.id)" class="btn btn-warning">
				<i class="ti ti-pencil" style="margin-right: 5px;"></i>
				Edit
			</a>
		</div>
	</div>
</script>