<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/work-orders">Work Orders</a></li>
	<li class="active">Work Order 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">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">ID:</th>
								<td>{{vm.work_order.number}}</td>
							</tr>
							<tr ng-if="vm.work_order.created_by">
								<th>Created By:</th>
								<td><a href="#/employees/{{vm.work_order.created_by.id}}">{{vm.work_order.created_by.name}}</a></td>
							</tr>
							<tr ng-if="vm.work_order.updated_by">
								<th>Updated By:</th>
								<td><a href="#/employees/{{vm.work_order.updated_by.id}}">{{vm.work_order.updated_by.name}}</a></td>
							</tr>
							<tr>
								<th>Type:</th>
								<td>{{vm.work_order.type}}</td>
							</tr>
							<tr>
								<th>Customer:</th>
								<td><a href="#/customers/{{vm.work_order.customer.id}}">{{vm.work_order.customer.name}}</a></td>
							</tr>
							<tr>
								<th>Property:</th>
								<td><a href="https://www.google.com/maps/dir/Current+Location/{{vm.work_order.property.location.lat}},{{vm.work_order.property.location.lng}}" target="_blank">{{vm.work_order.property.location.address}}</a></td>
							</tr>
							<tr>
								<th>Start:</th>
								<td>{{vm.work_order.work_order_schedule.start_date_formatted}}</td>
							</tr>
							<tr>
								<th>End:</th>
								<td>{{vm.work_order.work_order_schedule.end_date_formatted}}</td>
							</tr>
							<tr>
								<th>Schedule:</th>
								<td>{{vm.work_order.work_order_schedule.schedule_formatted}}</td>
							</tr>
							<tr>
								<th>Recurring:</th>
								<td>{{vm.work_order.recurring_formatted}}</td>
							</tr>
							<!--<tr ng-if="vm.work_order.recurring && !vm.work_order.work_order_schedule.count">
								<th>Last Created Visit:</th>
								<td>{{vm.work_order.last_created_visit_formatted}}</td>
							</tr>-->
							<tr>
								<th>Assigned To:</th>
								<td>
									<span ng-repeat="employee in vm.work_order.employees" style="margin-right: 5px;">
										<a href="#/employees/{{employee.pivot.employee_id}}">{{employee.name}}</a>
									</span>
								</td>
							</tr>
							<tr ng-if="vm.work_order.services.length">
								<th>Service(s):</th>
								<td>
									<div ng-repeat="service in vm.work_order.services">
										<a href="#/services/{{service.id}}">{{service.name}}</a>&nbsp;({{service.pivot.qty}})
									</div>
								</td>
							</tr>
							<tr ng-if="vm.work_order.products.length">
								<th>Product(s):</th>
								<td>
									<div ng-repeat="product in vm.work_order.products">
										<a href="#/products/{{product.id}}">{{product.name}}</a>&nbsp;({{product.pivot.qty}})
									</div>
								</td>
							</tr>
							<tr ng-if="vm.work_order.about">
								<th>About:</th>
								<td>{{vm.work_order.about}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Contacts">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Phone:</th>
								<td>{{vm.work_order.customer.contacts.phone_primary}}</td>
							</tr>
							<tr ng-if="vm.work_order.customer.contacts.phone_secondary">
								<th>Secondary Phone:</th>
								<td>{{vm.work_order.customer.contacts.phone_secondary}}</td>
							</tr>
							<tr ng-if="vm.work_order.customer.contacts.fax">
								<th>Fax:</th>
								<td>{{vm.work_order.customer.contacts.fax}}</td>
							</tr>
							<tr>
								<th>Email:</th>
								<td>{{vm.work_order.customer.contacts.email}}</td>
							</tr>
							<tr ng-if="vm.work_order.customer.contacts.email_secondary">
								<th>Secondary Email:</th>
								<td>{{vm.work_order.customer.contacts.email_secondary}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Details">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Address Type:</th>
								<td>{{vm.work_order.property.address_type_formatted}}</td>
							</tr>
							<tr>
								<th>Dogs?</th>
								<td>{{vm.work_order.property.has_dog_formatted}}</td>
							</tr>
							<tr ng-if="vm.work_order.property.general_informations.gate_code">
								<th>Gate Code:</th>
								<td>{{vm.work_order.property.general_informations.gate_code}}</td>
							</tr>
							<tr>
								<th>Bodies of Water:</th>
								<td>
									<div ng-repeat="body_of_water in vm.work_order.property.bodies_of_water">
										{{$index+1}} - {{body_of_water}}
									</div>
								</td>
							</tr>
							<tr ng-if="vm.work_order.property.about">
								<th>About:</th>
								<td>{{vm.work_order.property.about}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Notes" ng-controller="NotesMainController as notesMainCtrl" ng-click="notesMainCtrl._getNotes('App\\WorkOrder', vm.work_order.id)" ng-init="notesMainCtrl.notable = 'App\\WorkOrder'; notesMainCtrl.notable_id = vm.work_order.id">
					<ng-include src="'views/includes/notes-list.html'"></ng-include>
				</tab>
				<tab heading="Work Order Visits" ng-controller="WorkOrderVisitsMainController as workOrderVisitsMainCtrl" ng-click="workOrderVisitsMainCtrl._getWorkOrderVisits({work_order_id: vm.work_order.id, date_from: WOV_DATE_FROM, date_to: WOV_DATE_TO})" ng-init="workOrderVisitsMainCtrl._mode = 'list'">
					<ng-include src="'views/includes/work-order-visits-list.html'"></ng-include>
				</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 ng-if="vm.work_order.recurring"><a href="#/work-orders/{{vm.work_order.id}}/edit">Edit</a></li>
						<li><a ng-click="vm._destroy(vm.work_order.id)">Delete</a></li>
						<li class="divider" ng-if="vm.work_order.recurring && !vm.work_order.work_order_schedule.count"></li>
						<li ng-if="vm.work_order.recurring && !vm.work_order.work_order_schedule.count"><a ng-click="vm._createNextVisits(vm.work_order.id)">Create Next Work Order Visits</a></li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
