<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers">Customers</a></li>
	<li class="active">Customer Details</li>
</ol>

<ng-include src="'views/modals/newMessageModal.html'"></ng-include>
<ng-include src="'views/modals/seeMessageModal.html'"></ng-include>
<ng-include src="'views/modals/uploadImageCKEditorModal.html'"></ng-include>
<ng-include src="'views/modals/changeCustomerPaymentMethodModal.html'"></ng-include>
<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">
					<div ng-if="vm.customer.properties.length">
						<leaflet id="map-customer-details" layers="vm._layers" markers="vm._markers" lf-center="vm._center" width="100%" height="300px"></leaflet>
					</div>
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Customer Since:</th>
								<td>{{vm.customer.customer_since}}</td>
							</tr>
							<tr>
								<th>Status:</th>
								<td>
									<span ng-if="vm.customer.status == 0" class="badge badge-danger">Archive</span>
									<span ng-if="vm.customer.status == 1" class="badge badge-success">Active</span>
									<span ng-if="vm.customer.status == 2" class="badge badge-warning">Lead</span>
								</td>
							</tr>
							<tr>
								<th>Recurring:</th>
								<td>{{vm.customer.recurring_formatted}}</td>
							</tr>
							<tr>
								<th>Name:</th>
								<td>{{vm.customer.name}}</td>
							</tr>
							<tr>
								<th>Phone:</th>
								<td>{{vm.customer.contacts.phone_primary}}</td>
							</tr>
							<tr ng-if="vm.customer.contacts.phone_secondary">
								<th>Secondary Phone:</th>
								<td>{{vm.customer.contacts.phone_secondary}}</td>
							</tr>
							<tr ng-if="vm.customer.contacts.fax">
								<th>Fax:</th>
								<td>{{vm.customer.contacts.fax}}</td>
							</tr>
							<tr>
								<th>Email:</th>
								<td>{{vm.customer.contacts.email}}</td>
							</tr>
							<tr ng-if="vm.customer.contacts.email_secondary">
								<th>Secondary Email:</th>
								<td>{{vm.customer.contacts.email_secondary}}</td>
							</tr>
							<tr>
								<th>Source:</th>
								<td>{{vm.customer.customer_source.name}}</td>
							</tr>
							<tr>
								<th>Terms:</th>
								<td>
									<span ng-if="vm.customer.preferences.terms == 0">Due on Receipt</span>
									<span ng-if="vm.customer.preferences.terms == 15">Net 15</span>
									<span ng-if="vm.customer.preferences.terms == 30">Net 30</span>
									<span ng-if="vm.customer.preferences.terms == 60">Net 60</span>
								</td>
							</tr>
							<tr>
								<th>Statement Day:</th>
								<td>{{vm.customer.preferences.statement_day}}</td>
							</tr>
							<tr>
								<th>Statement By:</th>
								<td>
									<span class="label label-info" ng-if="vm.customer.preferences.statement_by_print">PRINT</span>
									<span class="label label-info" ng-if="vm.customer.preferences.statement_by_email">EMAIL</span>
								</td>
							</tr>
							<tr>
								<th>Receive Updates By:</th>
								<td>
									<span class="label label-info" ng-if="vm.customer.preferences.work_order_updates_by_text">TEXT MESSAGE</span>
									<span class="label label-info" ng-if="vm.customer.preferences.work_order_updates_by_email">EMAIL</span>
								</td>
							</tr>
							<tr ng-if="vm.customer.about">
								<th>About:</th>
								<td>{{vm.customer.about}}</td>
							</tr>
							<tr ng-if="vm.customer.tags.length > 0">
								<th>Tags:</th>
								<td>
									<a title="Remove Tag" ng-click="vm._addRemoveTag(vm.customer.id, tag)" ng-if="vm._getTagColor(tag)" ng-repeat="tag in vm.customer.tags" class="label" style="margin-right: 5px; background-color: {{vm._getTagColor(tag)}}">{{tag}}</a>
								</td>
							</tr>
							<tr>
								<th>Balance:</th>
								<td>
									<span>{{vm.customer.paid | currency: "$"}}</span>
									<span style="color: #ff0000;">{{vm.customer.billed | currency: "$"}}</span>
								</td>
							</tr>
							<tr ng-if="vm.customer.quickbooks_id">
								<th>Quickbooks Balance:</th>
								<td>
									{{vm.customer.balance | currency: "$"}}
									<a class="btn btn-xs btn-warning" ng-click="vm._updateBalanceFromQuickbooks(vm.customer.id)" title="Update Balance From Quickbooks" style="margin-left: 5px;">
										Update
									</a>
								</td>
							</tr>
							<tr ng-if="vm.customer.quickbooks_id">
								<th>Quickbooks ID:</th>
								<td>{{vm.customer.quickbooks_id}}</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Properties">
					<p><a href="#/properties/{{vm.customer.id}}/new" class="btn btn-sm btn-info">+ New Property</a></p>
					<table class="table" ng-repeat="property in vm.customer.properties">
						<tbody>
							<tr>
								<td colspan="2" style="background-color: #f5f5f5;">
									Property #{{$index+1}}
									<span class="pull-right">
										<i class="ti ti-share" ng-click="vm._sendPropertyToQuickbooks(property.id)" title="Send To Quickbooks" style="cursor: pointer; margin-right: 10px;"></i>
										<i class="ti ti-pencil-alt" ng-click="vm._editProperty(property.id)" title="Edit" style="cursor: pointer; margin-right: 10px;"></i>
										<i class="ti ti-close" ng-click="vm._destroyProperty(property.id)" title="Delete" style="cursor: pointer;"></i>
									</span>
								</td>
							</tr>
							<tr>
								<th width="15%">Address Type:</th>
								<td>{{property.address_type_formatted}}</td>
							</tr>
							<tr>
								<th>Address:</th>
								<td>
									<a ng-click="vm._detailProperty(property.id)">{{property.location.address}}</a>
									<a href="https://www.google.com/maps/dir/Current+Location/{{property.location.lat}},{{property.location.lng}}" target="_blank" style="margin-left: 5px;">
										<i class="ti ti-location-pin" title="Get Directions"></i>
									</a>
								</td>
							</tr>
							<tr>
								<th>City:</th>
								<td>{{property.location.city}}</td>
							</tr>
							<tr>
								<th>State:</th>
								<td>{{property.location.state}}</td>
							</tr>
							<tr>
								<th>Zip Code:</th>
								<td>{{property.location.zip_code}}</td>
							</tr>
							<tr ng-if="property.general_informations.gate_code">
								<th>Gate Code:</th>
								<td>{{property.general_informations.gate_code}}</td>
							</tr>
							<tr>
								<th>Dogs?</th>
								<td>{{property.has_dog_formatted}}</td>
							</tr>
							<tr>
								<th>Bodies of Water:</th>
								<td>
									<div ng-repeat="body_of_water in property.bodies_of_water">
										{{$index+1}} - {{body_of_water}}
									</div>
								</td>
							</tr>
							<tr ng-if="property.about">
								<th>About:</th>
								<td>{{property.about}}</td>
							</tr>
							<tr>
								<th>Zillow Estimate</th>
								<td><span zillow-estimate property="{{property.location}}"></span></td>
							</tr>
							<tr>
								<th>Quickbooks</th>
								<td>{{property.quickbooks_formatted}}</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm.customer.properties.length == 0">No records found</p>
				</tab>
				<tab heading="Notes" ng-controller="NotesMainController as notesMainCtrl" ng-click="notesMainCtrl._getNotes('App\\Customer', vm.customer.id)" ng-init="notesMainCtrl.notable = 'App\\Customer'; notesMainCtrl.notable_id = vm.customer.id; notesMainCtrl.customer = vm.customer.id">
					<ng-include src="'views/includes/notes-list.html'"></ng-include>
				</tab>
				<tab heading="Attachments" ng-controller="AttachmentsMainController as attachmentsMainCtrl" ng-click="attachmentsMainCtrl._getAttachments('', '', vm.customer.id)" ng-init="attachmentsMainCtrl.customer = vm.customer.id; attachmentsMainCtrl.customer_estimate = vm.customer.id">
					<div class="btn-group" style="margin-bottom: 5px;">
						<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.customer.contacts['email'])">Send By Email</a></li>
						</ul>
					</div>			
					<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">From</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">
									<a ng-if="attachment.attachable_type_formatted == 'Property'" href="#/properties/{{attachment.customer_id}}/detail/{{attachment.attachable_id}}">{{attachment.attachable_type_formatted}}</a>
									<a ng-if="attachment.attachable_type_formatted == 'Work Order Visit'" href="#/work-order-visits/{{attachment.attachable_id}}">{{attachment.attachable_type_formatted}}</a>
									<a ng-if="attachment.attachable_type_formatted == 'Note' && attachment.attachable.notable_type_formatted == 'Property'" href="#/properties/{{attachment.customer_id}}/detail/{{attachment.attachable.notable_id}}">{{attachment.attachable_type_formatted}} ({{attachment.attachable.notable_type_formatted}})</a>
									<a ng-if="attachment.attachable_type_formatted == 'Note' && attachment.attachable.notable_type_formatted == 'Customer'" href="#/customers/{{attachment.attachable.notable_id}}">{{attachment.attachable_type_formatted}} ({{attachment.attachable.notable_type_formatted}})</a>
									<a ng-if="attachment.attachable_type_formatted == 'Note' && attachment.attachable.notable_type_formatted == 'Work Order'" href="#/work-orders/{{attachment.attachable.notable_id}}">{{attachment.attachable_type_formatted}} ({{attachment.attachable.notable_type_formatted}})</a>
									<a ng-if="attachment.attachable_type_formatted == 'Note' && attachment.attachable.notable_type_formatted == 'Work Order Visit'" href="#/work-order-visits/{{attachment.attachable.notable_id}}">{{attachment.attachable_type_formatted}} ({{attachment.attachable.notable_type_formatted}})</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="Messages" ng-controller="MessagesMainController as messagesMainCtrl" ng-click="messagesMainCtrl._getMessages(vm.customer.id)">
					<p><a ng-click="messagesMainCtrl._openModalNewMessage(vm.customer)" class="btn btn-sm btn-info">+ New Message</a></p>
					<p><input type="text" class="form-control" ng-model="searchInput" placeholder="Search here..."></p>
					<table class="table">
						<thead>
							<tr>
								<th class="hidden-xs" width="25%">From</th>
								<th>Subject</th>
								<th class="hidden-xs" width="10%">By</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="message in messagesMainCtrl._messages | filter: searchInput | itemsPerPage: 10">
								<td class="hidden-xs">
									<a href="#/employees/{{message.employee.id}}">
										{{message.employee.name}}
									</a>
								</td>
								<td>
									<a ng-click="messagesMainCtrl._openModalSeeMessage(message)">
										{{message.subject}}
									</a>
								</td>
								<td class="hidden-xs">{{message.send_by}}</td>
								<td>{{message.created_at_formatted}}</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="messagesMainCtrl._messages.length == 0">No records found</p>
					<div class="row">
						<div class="col-sm-12 text-center">
							<dir-pagination-controls></dir-pagination-controls>
						</div>
					</div>
				</tab>
				<tab heading="Work Orders" ng-click="vm._getWorkOrders(vm.customer.id)">
					<p><a href="#/work-orders/new/{{vm.customer.id}}" class="btn btn-sm btn-info">+ New Work Order</a></p>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>ID</th>
								<th class="hidden-xs">Type</th>
								<th class="hidden-xs">Property</th>
								<th class="hidden-xs">Start</th>
								<th class="hidden-xs">End</th>
								<th>Schedule</th>
								<th class="hidden-xs">Assigned To</th>
								<th class="hidden-xs">Service(s)</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="work_order in vm._work_orders | itemsPerPage: 10">
								<td>
									<a href="#/work-orders/{{work_order.id}}">
										{{work_order.number}}
									</a>
								</td>
								<td class="hidden-xs">{{work_order.type}}</td>
								<td class="hidden-xs">
									<a href="#/properties/{{work_order.customer_id}}/detail/{{work_order.property.id}}">
										{{work_order.property.location.address}}
									</a>
								</td>
								<td class="hidden-xs">{{work_order.work_order_schedule.start_date_formatted}}</td>
								<td class="hidden-xs">{{work_order.work_order_schedule.end_date_formatted}}</td>
								<td>{{work_order.work_order_schedule.schedule_formatted}}</td>
								<td class="hidden-xs">
									<div ng-repeat="employee in work_order.employees">
										<a href="#/employees/{{employee.pivot.employee_id}}">
											{{employee.name}}
										</a>
									</div>
								</td>
								<td class="hidden-xs">
									<div ng-repeat="service in work_order.services">
										<a href="#/services/{{service.id}}">
											{{service.name}}
										</a>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
											<i class="ti ti-settings"></i>&nbsp;&nbsp;<span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu">
											<li ng-if="work_order.recurring"><a href="#/work-orders/{{work_order.id}}/edit">Edit</a></li>
											<li><a ng-click="vm._destroyWorkOrder(work_order)">Delete</a></li>
										</ul>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm._work_orders.length == 0">No records found</p>
					<div class="row">
						<div class="col-sm-12 text-center">
							<dir-pagination-controls></dir-pagination-controls>
						</div>
					</div>
				</tab>
				<tab heading="Payment Method" ng-click="vm._getVault()">
					<alert type="danger" ng-if="vm.vault">
						<h4>Current Payment Method</h4>
						<p ng-if="vm.vault.type == 'CARD'"><b>{{vm.vault.accountType}}</b> ending in <b>{{vm.vault.lastFour}}</b> Expires on <b>{{vm.vault.cardExpMonth}}/{{vm.vault.cardExpYear}}</b></p>
						<p ng-if="vm.vault.type == 'ACH'"><b>{{vm.vault.accountType}}</b> ending in <b>{{vm.vault.lastFour}}</b></p>
						<p>Auto Payment: <b>{{vm.customer.auto_payment_formatted}}</b></p>
						<p><a class="btn btn-danger" ng-click="vm._changeAutoPayment(vm.customer.id)" style="margin-right: 5px;">Change Auto Payment</a><a class="btn btn-danger" ng-click="vm._modalPaymentMethod()">Change Payment Method</a></p>
					</alert>
					<p ng-if="!vm.vault"><a class="btn btn-info btn-sm" ng-click="vm._modalPaymentMethod()">+ Payment Method</a></p>
				</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="#/customers/{{vm.customer.id}}/edit">Edit</a></li>
						<li class="divider"></li>
						<li><a href="#/properties/{{vm.customer.id}}/new">New Property</a></li>
						<li><a href="#/work-orders/new/{{vm.customer.id}}">New Work Order</a></li>
						<li class="divider"></li>
						<li ng-if="vm.customer.status != 1"><a ng-click="vm._setStatus(vm.customer.id, 1)">Active</a></li>
						<li ng-if="vm.customer.status != 2"><a ng-click="vm._setStatus(vm.customer.id, 2)">Lead</a></li>
						<li ng-if="vm.customer.status != 0"><a ng-click="vm._setStatus(vm.customer.id, 0)">Archive</a></li>
						<li class="divider" ng-if="vm.tags.length"></li>
						<li ng-repeat="tag in vm.tags">
							<a ng-click="vm._addRemoveTag(vm.customer.id, tag.name)">
								<i class="ti ti-check" ng-if="vm._hasTag(vm.customer.tags, tag.name)" style="margin-right: 5px;"></i>
								{{tag.name}}
							</a>
						</li>
						<li class="divider"></li>
						<li>
							<a ng-click="vm._sendToQuickbooks(vm.customer.id)">
								<span ng-if="vm.customer.quickbooks_id">Update To Quickbooks</span>
								<span ng-if="!vm.customer.quickbooks_id">Add To Quickbooks</span>
							</a>
						</li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
