<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers">Customers</a></li>
	<li class="active">Import From Quickbooks</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Import From Quickbooks</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._reload()" title="Reload"><i class="ti ti-reload"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-sm-8">
							<input type="text" class="form-control" ng-model="searchInput" placeholder="Search here...">
						</div>
						<div class="col-sm-4">
							<select class="form-control" name="_statusFilter" id="_statusFilter" ng-model="vm._statusFilter">
								<option value="">-- Select --</option>
								<option value="Not Imported">Not Imported</option>
								<option value="Imported">Imported</option>
							</select>
						</div>
					</div>
					<div style="max-height: 500px; overflow-y: auto;">
						<table class="table table-striped">
							<thead>
								<tr>
									<th width="5%"><input type="checkbox" ng-model="_selectedAll" ng-click="vm._selectAll(_selectedAll)" /></th>
									<th width="5%">ID</th>
									<th>Name</th>
									<th class="hidden-xs">Address</th>
									<th>Coordinates</th>
									<th class="hidden-xs">Phone(s)</th>
									<th class="hidden-xs">Email(s)</th>
									<th>Balance</th>
									<th>Status</th>
									<th>Actions</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="customer in vm.filteredCustomers = (vm.customers | filter: searchInput | filter: vm._filterByStatus)">
									<td><input type="checkbox" ng-disabled="customer.status == 'Imported'" checklist-model="vm._selectedCustomers" checklist-value="customer.id" /></td>
									<td>{{customer.id}}</td>
									<td>{{customer.name}}</td>
									<td class="hidden-xs"><a href="https://www.google.com/maps?q={{customer.location.address}}" target="_blank">{{customer.location.address}}</a></td>
									<td>{{customer.location.lat}}, {{customer.location.lng}}</td>
									<td class="hidden-xs">
										{{customer.contacts.phone_primary}}<br />
										{{customer.contacts.phone_secondary}}<br />
										{{customer.contacts.fax}}
									</td>
									<td class="hidden-xs">
										{{customer.contacts.email}}<br />
										{{customer.contacts.email_secondary}}
									</td>
									<td>{{customer.balance | currency: "$"}}</td>
									<td><span class="label" ng-class="{'label-success': customer.status == 'Imported', 'label-danger': customer.status == 'Not Imported'}">{{customer.status}}</span></td>
									<td><a ng-disabled="customer.status == 'Imported'" ng-click="vm._getCoordinates(customer)" class="btn btn-sm btn-info">Get Coordinates</a></td>
								</tr>
							</tbody>
						</table>
					</div>
					<p class="text-center" ng-show="vm.customers.length == 0">No records found</p>
				</div>
				<div class="panel-footer" ng-show="vm.customers.length > 0">
					<div class="row">
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._noMoreCustomersToLoad" ng-click="vm._loadMore()" class="btn-warning btn">Load More {{vm._total}} Customer(s)</a>
						</div>
						<div class="col-xs-12 col-sm-4 text-center">{{vm.filteredCustomers.length}} Record(s) Found</div>
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._selectedCustomers.length == 0 || !vm._importButton" ng-click="vm._importCustomers()" class="btn-info btn">Import {{vm._selectedCustomers.length}} Customer(s)</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
