<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers/{{vm.work_order_visit.work_order.customer.id}}">{{vm.work_order_visit.work_order.customer.name}}</a></li>
	<li class="active">Work Order Visit Details</li>
</ol>

<ng-include src="'views/modals/sendByEmailAttachmentsModal.html'"></ng-include>

<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_visit.number}}</td>
							</tr>
							<tr>
								<th>Work Order:</th>
								<td><a href="#/work-orders/{{vm.work_order_visit.work_order.id}}">{{vm.work_order_visit.work_order.number}}</a></td>
							</tr>
							<tr>
								<th>When:</th>
								<td>{{vm.work_order_visit.date_formatted}} {{vm.work_order_visit.start_time_formatted}} - {{vm.work_order_visit.end_time_formatted}}</td>
							</tr>
							<tr>
								<th>Type:</th>
								<td>{{vm.work_order_visit.work_order.type}}</td>
							</tr>
							<tr>
								<th>Status:</th>
								<td>
									<span class="badge" ng-class="{'badge-warning': vm.work_order_visit.status_formatted == 'Pending', 'badge-danger': vm.work_order_visit.status_formatted == 'Canceled', 'badge-info': vm.work_order_visit.status_formatted == 'Confirmed', 'badge-success': vm.work_order_visit.status_formatted == 'Done'}">{{vm.work_order_visit.status_formatted}}</span>
								</td>
							</tr>
							<tr>
								<th>Finished:</th>
								<td>{{vm.work_order_visit.finished_formatted}}</td>
							</tr>
							<tr>
								<th>Payment:</th>
								<td>
									<span class="badge badge-warning" ng-if="!vm.work_order_visit.invoice">Not Billed</span>
									<span class="badge badge-danger" ng-if="vm.work_order_visit.invoice.status_formatted == 'Billed'">Billed</span>
									<span class="badge badge-info" ng-if="vm.work_order_visit.invoice.status_formatted == 'Canceled'">Canceled</span>
									<span class="badge badge-success" ng-if="vm.work_order_visit.invoice.status_formatted == 'Paid'">Paid</span>
								</td>
							</tr>
							<tr>
								<th>Customer:</th>
								<td><a href="#/customers/{{vm.work_order_visit.work_order.customer.id}}">{{vm.work_order_visit.work_order.customer.name}}</a></td>
							</tr>
							<tr>
								<th>Property:</th>
								<td>
									<a href="#/properties/{{vm.work_order_visit.work_order.customer_id}}/detail/{{vm.work_order_visit.work_order.property.id}}">{{vm.work_order_visit.work_order.property.location.address}}</a>
									<a href="https://www.google.com/maps/dir/Current+Location/{{vm.work_order_visit.work_order.property.location.lat}},{{vm.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>
								</td>
							</tr>
							<tr>
								<th>Assigned To:</th>
								<td>
									<span ng-repeat="employee in vm.work_order_visit.employees" style="margin-right: 5px;">
										<a href="#/employees/{{employee.pivot.employee_id}}">{{employee.name}}</a>
									</span>
								</td>
							</tr>
							<tr ng-if="vm.work_order_visit.services.length">
								<th>Service(s):</th>
								<td>
									<div ng-repeat="service in vm.work_order_visit.services">
										<a href="#/services/{{service.id}}">{{service.name}}</a>&nbsp;({{service.pivot.qty}})
									</div>
								</td>
							</tr>
							<tr ng-if="vm.work_order_visit.products.length">
								<th>Product(s):</th>
								<td>
									<div ng-repeat="product in vm.work_order_visit.products">
										<a href="#/products/{{product.id}}">{{product.name}}</a>&nbsp;({{product.pivot.qty}})
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Technical Information">
					<table class="table">
						<tbody>
							<tr>
								<th width="20%">Was Filter Cleaned?</th>
								<td>{{vm.work_order_visit.was_filter_cleaned_formatted}}</td>
							</tr>
							<tr>
								<th>Skimmed Top of the Pool?</th>
								<td>{{vm.work_order_visit.skimmed_top_pool_formatted}}</td>
							</tr>
							<tr>
								<th>Emptied Skimmer Basked?</th>
								<td>{{vm.work_order_visit.emptied_skimmer_basked_formatted}}</td>
							</tr>
							<tr>
								<th>Vacuumed Bottom of the Pool?</th>
								<td>{{vm.work_order_visit.vacuumed_bottom_pool_formatted}}</td>
							</tr>
							<tr>
								<th>Brushed Pool Walls?</th>
								<td>{{vm.work_order_visit.brushed_pool_walls_formatted}}</td>
							</tr>
							<tr>
								<th>Adjusted Pool Chemistry?</th>
								<td>{{vm.work_order_visit.adjusted_pool_chemistry_formatted}}</td>
							</tr>
							<tr>
								<th>Phosphate Treatment?</th>
								<td>{{vm.work_order_visit.phosphate_treatment_formatted}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Chemicals">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">PH:</th>
								<td>{{vm.work_order_visit.chemicals.ph}}</td>
							</tr>
							<tr>
								<th>Chlorine:</th>
								<td>{{vm.work_order_visit.chemicals.chlorine}}</td>
							</tr>
							<tr>
								<th>Alkalinity:</th>
								<td>{{vm.work_order_visit.chemicals.alkalinity}}</td>
							</tr>
							<tr>
								<th>Hardness Level:</th>
								<td>{{vm.work_order_visit.chemicals.hardness_level}}</td>
							</tr>
							<tr>
								<th>Salt Level:</th>
								<td>{{vm.work_order_visit.chemicals.salt_level}}</td>
							</tr>
							<tr>
								<th>Conditioner:</th>
								<td>{{vm.work_order_visit.chemicals.conditioner}}</td>
							</tr>
							<tr>
								<th>Phosphate:</th>
								<td>{{vm.work_order_visit.chemicals.phosphate}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Notes To Customer">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Weather Condition:</th>
								<td>{{vm.work_order_visit.notes_to_customer.weather_condition}}</td>
							</tr>
							<tr>
								<th>Do not Swim for:</th>
								<td>{{vm.work_order_visit.notes_to_customer.not_swim_for}}</td>
							</tr>
							<tr>
								<th>Notes:</th>
								<td>
									<div ng-if="vm.work_order_visit.notes_to_customer.add_water">Pool water level is low. Please add water</div>
									<div ng-if="vm.work_order_visit.notes_to_customer.pool_door_inaccessible">Pool doors inaccessible or pet in vicinity</div>
									<div ng-if="vm.work_order_visit.notes_to_customer.no_power">No power to equipment. Please check breakers</div>
									<div ng-if="vm.work_order_visit.notes_to_customer.phosphate_treatment">Phosphate treatment. Pool will be cloudy for 24-48 hours</div>
									<div ng-if="vm.work_order_visit.notes_to_customer.call_office">Please call the office</div>
									<div ng-if="vm.work_order_visit.notes_to_customer.time_change_filter_cartridge">Time to change the filter cartridge</div>
								</td>
							</tr>
							<tr ng-if="vm.work_order_visit.other_notes">
								<th>Other Notes:</th>
								<td>{{vm.work_order_visit.other_notes}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Pictures" ng-controller="PicturesMainController as picturesMainCtrl" ng-click="picturesMainCtrl._getPictures()" ng-init="picturesMainCtrl._work_order_visit_id = vm.work_order_visit.id">
					<ng-include src="'views/includes/pictures-list.html'"></ng-include>
				</tab>
				<tab heading="Attachments" ng-controller="AttachmentsMainController as attachmentsMainCtrl" ng-click="attachmentsMainCtrl._getAttachments('App\\WorkOrderVisit', vm.work_order_visit.id)" ng-init="attachmentsMainCtrl.customer_estimate = vm.work_order_visit.work_order.customer_id; attachmentsMainCtrl.property_estimate = vm.work_order_visit.work_order.property_id">
					<p>
						<a class="btn btn-sm btn-info" title="New Attachment" ngf-multiple="false" ngf-select="attachmentsMainCtrl._addAttachment('App\\WorkOrderVisit', vm.work_order_visit.id, $file)" ngf-max-size="10MB" ngf-pattern="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-accept="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-model-invalid="invalidFiles" ngf-resize="{quality: 0.7}" style="margin: 0px 5px 5px 0px; float: left;">+ New Attachment</a>
						<div class="btn-group">
							<button type="button" class="btn btn-info btn-sm dropdown-toggle" ng-disabled="!attachmentsMainCtrl._selectedList.length" data-toggle="dropdown">
								Actions&nbsp;&nbsp;<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" role="menu">
								<li><a ng-click="attachmentsMainCtrl._createEstimate()">Create Estimate</a></li>
								<li><a ng-click="attachmentsMainCtrl._sendByEmail(vm.work_order_visit.work_order.customer.contacts['email'])">Send By Email</a></li>
							</ul>
						</div>
					</p>
					<p ng-if="invalidFiles" style="color: #cc0000">Invalid File. Only Files (Images, .PDF, .DOC, .DOCX, .XLS, .XLSX) up to 10MB.</p>
					<table class="table">
						<thead>
							<tr>
								<th width="5%"><input type="checkbox" ng-click="attachmentsMainCtrl._selectAllAttachments(checkall)" ng-model="checkall" value="1" /></th>
								<th>Name</th>
								<th class="hidden-xs">Date</th>
								<th class="hidden-xs" width="35%">Description</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="attachment in attachmentsMainCtrl._attachments">
								<td>
									<input type="checkbox" ng-click="attachmentsMainCtrl._selectAttachment(attachment)" ng-checked="attachmentsMainCtrl._isChecked(attachment.url_full)" />
								</td>
								<td>
									<a class="hidden-md hidden-lg" ng-click="attachmentsMainCtrl._downloadAttachment(attachment.url_full)" data-toggle="popover" popover-image data-placement="right" data-image="{{attachment.url_full}}">{{attachment.name | limitTo: 30}}...</a>
									<a class="hidden-sm hidden-xs" ng-click="attachmentsMainCtrl._downloadAttachment(attachment.url_full)" data-toggle="popover" popover-image data-placement="right" data-image="{{attachment.url_full}}">{{attachment.name}}</a>
								</td>
								<td class="hidden-xs">{{attachment.created_at_formatted}}</td>
								<td class="hidden-xs">
									<a href="#" editable-text="attachment.description" onaftersave="attachmentsMainCtrl._editDescription(attachment)">{{ attachment.description || "No description" }}</a>
								</td>
								<td>
									<a class="btn btn-sm btn-danger" ng-click="attachmentsMainCtrl._removeAttachment(attachment)" title="Delete">Delete</a>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="attachmentsMainCtrl._attachments.length == 0">No records found</p>
				</tab>
				<tab heading="Notes" ng-controller="NotesMainController as notesMainCtrl" ng-click="notesMainCtrl._getNotes('App\\WorkOrderVisit', vm.work_order_visit.id)" ng-init="notesMainCtrl.notable = 'App\\WorkOrderVisit'; notesMainCtrl.notable_id = vm.work_order_visit.id">
					<ng-include src="'views/includes/notes-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" ng-controller="WorkOrderVisitsMainController as workOrderVisitsMainCtrl" ng-init="workOrderVisitsMainCtrl._mode = 'detail'">
						<li><a href="#/work-order-visits/{{vm.work_order_visit.id}}/edit">Edit</a></li>
						<li ng-if="vm.work_order_visit.status_formatted != 'Done'" class="divider"></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Pending'"><a ng-click="workOrderVisitsMainCtrl._cancel(vm.work_order_visit.id)">Cancel</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Pending'"><a ng-click="workOrderVisitsMainCtrl._confirm(vm.work_order_visit.id)">Confirm</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Confirmed'"><a ng-click="workOrderVisitsMainCtrl._done(vm.work_order_visit.id)">Done</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Canceled'"><a ng-click="workOrderVisitsMainCtrl._pending(vm.work_order_visit.id)">Pending</a></li>
						<li class="divider" ng-if="vm.work_order_visit.status_formatted == 'Done'"></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done'"><a ng-click="workOrderVisitsMainCtrl._resendSummary(vm.work_order_visit.id)">ReSend Summary</a></li>
						<li class="divider" ng-if="vm.work_order_visit.status_formatted == 'Done' && vm.work_order_visit.work_order.recurring == 0"></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done' && vm.work_order_visit.work_order.recurring == 0 && !vm.work_order_visit.invoice"><a href="#/invoices/new/{{vm.work_order_visit.id}}">Create Invoice</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done' && vm.work_order_visit.work_order.recurring == 0 && vm.work_order_visit.invoice && vm.work_order_visit.invoice.status_formatted == 'Canceled'"><a ng-click="workOrderVisitsMainCtrl._destroyInvoice(vm.work_order_visit.invoice.id)">Delete Invoice</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done' && vm.work_order_visit.work_order.recurring == 0 && vm.work_order_visit.invoice && vm.work_order_visit.invoice.status_formatted == 'Billed'"><a ng-click="workOrderVisitsMainCtrl._cancelInvoice(vm.work_order_visit.invoice.id)">Cancel Invoice</a></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done' && vm.work_order_visit.work_order.recurring == 0 && vm.work_order_visit.invoice && vm.work_order_visit.invoice.status_formatted == 'Billed'"><a ng-click="workOrderVisitsMainCtrl._confirmPayment(vm.work_order_visit.invoice.id)">Confirm Payment</a></li>
						<li class="divider" ng-if="vm.work_order_visit.status_formatted == 'Done'"></li>
						<li ng-if="vm.work_order_visit.status_formatted == 'Done'">
							<a ng-click="workOrderVisitsMainCtrl._finished(vm.work_order_visit.id)">
								<span ng-if="!vm.work_order_visit.finished">Finished</span>
								<span ng-if="vm.work_order_visit.finished">Unfinished</span>
							</a>
						</li>
						<!--<li class="divider"></li>
						<li><a href="#/work-order-visits/{{vm.work_order_visit.work_order.id}}/new">New Work Order Visit</a></li>-->
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
