<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>Customers</li>
	<li class="active">
		<span ng-if="vm.status == 'active'">Active</span>
		<span ng-if="vm.status == 'lead'">Lead</span>
		<span ng-if="vm.status == 'archive'">Archive</span>
		<span ng-if="vm.status == 'all'">All</span>
	</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Customers</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._downloadCSV()" title="Download CSV"><i class="ti ti-save"></i></a>
						<a href="#/customers-import" class="button-icon" title="Import From Quickbooks"><i class="ti ti-import"></i></a>
						<a class="button-icon" ng-click="vm._reload()" title="Reload"><i class="ti ti-reload"></i></a>
						<a href="#/customers-reports" class="button-icon" title="View Reports"><i class="ti ti-bar-chart"></i></a>
						<a href="#/customers/new" class="button-icon" title="New Customer"><i class="ti ti-plus"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div style="margin-bottom: 25px;">
						<leaflet id="map-customers" layers="vm._layers" markers="vm._markers" lf-center="vm._centerMap" width="100%" height="300px"></leaflet>
					</div>
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-md-3">
							<input type="text" class="form-control" ng-model="searchInput" placeholder="Search here...">
						</div>
						<div class="col-md-3">
							<ui-select multiple ng-model="vm._selectedTags" ng-disabled="disabled" style="width: 100%">
								<ui-select-match placeholder="Select a tag...">{{$item.name}}</ui-select-match>
								<ui-select-choices repeat="tag.name as tag in vm.tags | filter: $select.search">
									<span ng-bind-html="tag.name | highlight: $select.search"></span>
								</ui-select-choices>
							</ui-select>
						</div>
						<div class="col-md-3">
							<select class="form-control" ng-model="vm.recurring_filter">
								<option value="">-- Recurring --</option>
								<option value="Yes">Yes</option>
								<option value="No">No</option>
								<option value="-1">All</option>
							</select>
						</div>
						<div class="col-md-3">
							<select class="form-control" ng-model="vm.quickbooks_filter">
								<option value="">-- Quickbooks --</option>
								<option value="Yes">Yes</option>
								<option value="No">No</option>
								<option value="-1">All</option>
							</select>
						</div>
					</div>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>Name</th>
								<th class="hidden-xs">Email</th>
								<th class="hidden-xs">Properties</th>
								<th class="hidden-xs">Tags</th>
								<th class="hidden-xs">Balance</th>
								<th class="hidden-xs">Quickbooks Balance</th>
								<th class="hidden-xs">Since</th>
								<th class="hidden-xs">Recurring</th>
								<th class="hidden-xs">Quickbooks</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="customer in vm._filteredCustomers = (vm.customers | filter: searchInput | filter: vm._filterByTags | filter: vm._filterByQuickbooks | filter: vm._filterByRecurring) | itemsPerPage: 10 track by $index">
								<td>
									<a href="#/customers/{{customer.id}}">{{customer.name}}</a>
									<span ng-if="customer.status == 0" class="badge badge-danger pull-right">Archive</span>
									<span ng-if="customer.status == 1" class="badge badge-success pull-right">Active</span>
									<span ng-if="customer.status == 2" class="badge badge-warning pull-right">Lead</span>
								</td>
								<td class="hidden-xs">{{customer.contacts.email}}</td>
								<td class="hidden-xs">
									<div ng-repeat="property in customer.properties">
										<a href="#/properties/{{customer.id}}/detail/{{property.id}}">{{property.location.address}}</a>
										<span ng-if="property.is_valid_lat_lng" class="label label-danger">{{property.is_valid_lat_lng}}</span>
									</div>
								</td>
								<td class="hidden-xs">
									<a title="Remove Tag" ng-click="vm._addRemoveTag(customer.id, tag)" ng-if="vm._getTagColor(tag)" ng-repeat="tag in customer.tags" class="label" style="margin-right: 5px; background-color: {{vm._getTagColor(tag)}}">{{tag}}</a>
								</td>
								<td class="hidden-xs">
									<span>{{customer.paid | currency: "$"}}</span>
									<span style="color: #ff0000;">{{customer.billed | currency: "$"}}</span>
								</td>
								<td class="hidden-xs">{{customer.balance | currency: "$"}}</td>
								<td class="hidden-xs">{{customer.customer_since}}</td>
								<td class="hidden-xs">{{customer.recurring_formatted}}</td>
								<td class="hidden-xs">
									<span ng-if="customer.quickbooks_id">Yes</span>
									<span ng-if="!customer.quickbooks_id">No</span>
								</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><a href="#/customers/{{customer.id}}/edit">Edit</a></li>
											<li class="divider"></li>
											<li><a href="#/properties/{{customer.id}}">Properties</a></li>
											<li class="divider"></li>
											<li ng-if="customer.status != 1"><a ng-click="vm._setStatus(customer.id, 1)">Active</a></li>
											<li ng-if="customer.status != 2"><a ng-click="vm._setStatus(customer.id, 2)">Lead</a></li>
											<li ng-if="customer.status != 0"><a ng-click="vm._setStatus(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(customer.id, tag.name)">
													<i class="ti ti-check" ng-if="vm._hasTag(customer.tags, tag.name)" style="margin-right: 5px;"></i>
													{{tag.name}}
												</a>
											</li>
											<li class="divider"></li>
											<li>
												<a ng-click="vm._sendToQuickbooks(customer.id)">
													<span ng-if="customer.quickbooks_id">Update To Quickbooks</span>
													<span ng-if="!customer.quickbooks_id">Add To Quickbooks</span>
												</a>
												<a ng-if="customer.quickbooks_id" ng-click="vm._updateBalanceFromQuickbooks(customer.id)">Update Balance From Quickbooks</a>
											</li>
										</ul>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm.customers.length == 0">No records found</p>
					<div class="row">
						<div class="col-sm-12 text-center">
							<dir-pagination-controls></dir-pagination-controls>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
