<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/employees">Employees</a></li>
	<li class="active">Map</li>
</ol>

<div class="container-fluid">
	<div class="panel panel-midnightblue">
		<div class="panel-heading">
			<h2>Employees Map</h2>
		</div>
		<div class="panel-body">
			<div class="row" style="margin-bottom: 15px;">
				<div class="col-md-3">
					<input type="text" ng-focus="vm._openCalendar($event, 'date')" class="form-control datepicker" max-date="vm.maxDate" is-open="vm.calendar_opened['date']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date" id="date" ng-model="vm.date" placeholder="Date" ng-required="true">
				</div>
				<div class="col-md-6">
					<select class="form-control" name="employee_id" id="employee_id"
						ng-model="vm.employee_id" ng-required="true"
							ng-options="item.id as item.name for item in vm._employees">
						<option value="">-- Employee --</option>
					</select>
				</div>
				<div class="col-md-3">
					<a class="btn btn-info" ng-disabled="!vm.date || !vm.employee_id" ng-click="vm._filter(vm.date, vm.employee_id)">Filter</a>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<leaflet id="map-employees-map" layers="vm._layers" width="100%" height="700px"></leaflet>
				</div>
			</div>
			<div class="row" style="margin-top: 25px;" ng-if="vm._points.length">
				<div class="col-md-12">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>#</th>
								<th>Customer</th>
								<th>Property</th>
								<th>Time</th>
								<th>Position</th>
								<th>Status</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="position in vm._points track by $index">
								<td>{{$index+1}}</td>
								<td>{{position.customer_name}}</td>
								<td>{{position.property_address}}</td>
								<td>{{position.time}}</td>
								<td>
									<a href="https://www.google.com/maps/?q={{position.lat}},{{position.lng}}" target="_blank">
										{{position.lat}}, {{position.lng}}
									</a>
								</td>
								<td>{{position.status}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
