<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers">Customers</a></li>
	<li><a href="#/customers/{{vm.property.customer.id}}">{{vm.property.customer.name}}</a></li>
	<li><a href="#/properties/{{vm.property.customer.id}}">Properties</a></li>
	<li class="active">Property Details</li>
</ol>

<ng-include src="'views/modals/newPropertyMaintenanceRecordModal.html'"></ng-include>
<ng-include src="'views/modals/sendByEmailAttachmentsModal.html'"></ng-include>
<ng-include src="'views/modals/newPropertyEquipmentModal.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">
					<leaflet id="map-property-details" layers="vm._layers" markers="vm._markers" lf-center="vm._center" width="100%" height="300px" style="margin-bottom: 25px;"></leaflet>
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Customer:</th>
								<td><a href="#/customers/{{vm.property.customer.id}}">{{vm.property.customer.name}}</a></td>
							</tr>
							<tr>
								<th>Address Type:</th>
								<td>{{vm.property.address_type_formatted}}</td>
							</tr>
							<tr>
								<th>Address:</th>
								<td><a href="https://www.google.com/maps/dir/Current+Location/{{vm.property.location.lat}},{{vm.property.location.lng}}" target="_blank">{{vm.property.location.address}}</a></td>
							</tr>
							<tr>
								<th>City:</th>
								<td>{{vm.property.location.city}}</td>
							</tr>
							<tr>
								<th>State:</th>
								<td>{{vm.property.location.state}}</td>
							</tr>
							<tr>
								<th>Zip Code:</th>
								<td>{{vm.property.location.zip_code}}</td>
							</tr>
							<tr>
								<th>Last Time Filter Was Cleaned:</th>
								<td>
									<span style="color: #FF0000" ng-if="vm._checkLastTimeFilterCleaned(vm.property.last_time_filter_cleaned)">{{vm.property.last_time_filter_cleaned}}</span>
									<span ng-if="!vm._checkLastTimeFilterCleaned(vm.property.last_time_filter_cleaned)">{{vm.property.last_time_filter_cleaned}}</span>
								</td>
							</tr>
							<tr ng-if="vm.property.general_informations.gate_code">
								<th>Gate Code:</th>
								<td>{{vm.property.general_informations.gate_code}}</td>
							</tr>
							<tr>
								<th>Dogs?</th>
								<td>{{vm.property.has_dog_formatted}}</td>
							</tr>
							<tr>
								<th>Bodies of Water:</th>
								<td>
									<div ng-repeat="body_of_water in vm.property.bodies_of_water">
										{{$index+1}} - {{body_of_water}}
									</div>
								</td>
							</tr>
							<tr ng-if="vm.property.about">
								<th>About:</th>
								<td>{{vm.property.about}}</td>
							</tr>
							<tr>
								<th>Zillow Estimate:</th>
								<td><span zillow-estimate property="{{vm.property.location}}"></span></td>
							</tr>
							<tr>
								<th>Quickbooks:</th>
								<td>{{vm.property.quickbooks_formatted}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Equipments" ng-controller="PropertyEquipmentsMainController as equipmentsMainCtrl" ng-click="equipmentsMainCtrl._getEquipments(vm.property.id)">
					<p>
						<a class="btn btn-sm btn-info" title="New Equipment" ng-click="equipmentsMainCtrl._newEquipment(vm.property.id)">+ New Equipment</a>
					</p>
					<table class="table">
						<thead>
							<tr>
								<th class="hidden-xs">Date</th>
								<th>Name</th>
								<th class="hidden-xs" width="35%">Description</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="equipment in equipmentsMainCtrl._equipments">
								<td class="hidden-xs">{{equipment.created_at_formatted}}</td>
								<td>
									<span ng-if="equipment.picture"><a ng-click="equipmentsMainCtrl._viewImage(equipment.picture_full)" data-toggle="popover" popover-image data-placement="right" data-image="{{equipment.picture_full}}">{{equipment.name}}</a></span>
									<span ng-if="!equipment.picture">{{equipment.name}}</span>
								</td>
								<td class="hidden-xs">
									<a href="#" editable-text="equipment.description" onaftersave="equipmentsMainCtrl._editDescription(equipment)">{{ equipment.description || "No description" }}</a>
								</td>
								<td>
									<a class="btn btn-sm btn-danger" ng-click="equipmentsMainCtrl._remove(equipment)" title="Delete">Delete</a>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="equipmentsMainCtrl._equipments.length == 0">No records found</p>
				</tab>
				<tab heading="Maintenance Records">
					<p><a class="btn btn-sm btn-info" title="New Maintenance Record" ng-click="vm._addNewMaintenanceRecord()">+ Maintenance Record</a></p>
					<table class="table">
						<thead>
							<tr>
								<th width="15%">Date</th>
								<th width="20%">Name</th>
								<th width="15%">Warranty (In Days)</th>
								<th width="35%" class="hidden-xs hidden-sm">Description</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="maintenance_record in vm.property.maintenance_records">
								<td>{{maintenance_record.date_formatted}}</td>
								<td>{{maintenance_record.product_name}}</td>
								<td>{{maintenance_record.warranty}}</td>
								<td class="hidden-xs hidden-sm">{{maintenance_record.description}}</td>
								<td>
									<a class="btn btn-sm btn-danger" ng-click="vm._removeMaintenanceRecord(maintenance_record.id)" title="Delete">Delete</a>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm.property.maintenance_records.length == 0">No records found</p>
				</tab>
				<tab heading="Attachments" ng-controller="AttachmentsMainController as attachmentsMainCtrl" ng-click="attachmentsMainCtrl._getAttachments('App\\Property', vm.property.id)" ng-init="attachmentsMainCtrl.customer_estimate = vm.property.customer_id; attachmentsMainCtrl.property_estimate = vm.property.id">
					<p>
						<a class="btn btn-sm btn-info" title="New Attachment" ngf-multiple="false" ngf-select="attachmentsMainCtrl._addAttachment('App\\Property', vm.property.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.property.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="Pictures" ng-controller="PicturesMainController as picturesMainCtrl" ng-click="picturesMainCtrl._getPictures()" ng-init="picturesMainCtrl._property_id = vm.property.id">
					<ng-include src="'views/includes/pictures-list.html'"></ng-include>
				</tab>
				<tab heading="Notes" ng-controller="NotesMainController as notesMainCtrl" ng-click="notesMainCtrl._getNotes('App\\Property', vm.property.id)" ng-init="notesMainCtrl.notable = 'App\\Property'; notesMainCtrl.notable_id = vm.property.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">
						<li><a href="#/properties/{{vm.property.customer.id}}/edit/{{vm.property.id}}">Edit</a></li>
						<li><a ng-click="vm._destroy(vm.property)">Delete</a></li>
						<li class="divider"></li>
						<li><a href="#/to-dos/new/{{vm.property.id}}">Add To Do</a></li>
						<li class="divider" ng-if="vm.property.customer.quickbooks_id"></li>
						<li ng-if="vm.property.customer.quickbooks_id">
							<a ng-click="vm._sendToQuickbooks(vm.property.id)">Update To Quickbooks</a>
						</li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
