<ng-include src="'views/modals/showWorkOrderVisitModal.html'"></ng-include>
<ng-include src="'views/modals/newWorkOrderModal.html'"></ng-include>

<div class="container-fluid" style="background-color: #FFFFFF;">
	<div class="row" ng-if="vm._show_map == true">
		<div class="col-md-12" style="margin-top: 25px;">
			<!--<leaflet id="map-calendars" layers="vm._layers" lf-center="vm._centerMap" width="100%" height="450px"></leaflet>-->
			<div id="map-route-quest" map-quest-calendar centerlocation="{{vm._centerMap}}" data="{{vm._filteredWorkOrderVisits}}"></div>
			<!--<div id="map-route" google-maps-routely-directive centerlocation="{{vm._centerMap}}" data="{{vm._filteredWorkOrderVisits}}" style="height: 450px; width: 100%;"></div>-->
		</div>
	</div>
	<div class="row" style="margin-top: 25px;">
		<div class="col-xs-12 col-md-7">
			<ui-select multiple ng-model="vm._selectedEmployees" ng-disabled="disabled" style="width: 100%">
				<ui-select-match placeholder="Select an employee...">
					<span style="display: inline-block; height: 10px; width: 10px; background-color: {{$item.preferences['color']}};"></span>
					{{$item.name}}
				</ui-select-match>
				<ui-select-choices repeat="employee.id as employee in vm._employees | filter: $select.search">
					<span style="display: inline-block; height: 10px; width: 10px; background-color: {{employee.preferences['color']}}; margin-right: 5px;"></span>
					<span ng-bind-html="employee.name | highlight: $select.search"></span>
				</ui-select-choices>
			</ui-select>
		</div>
		<div class="col-xs-12 col-md-2">
			<select ng-model="vm.work_order_visits_status" class="form-control">
				<option value="">-- Status --</option>
				<option value="Canceled">Canceled</option>
				<option value="Confirmed">Confirmed</option>
				<option value="Done">Done</option>
				<option value="Pending">Pending</option>
				<option value="-1">All</option>
			</select>
		</div>
		<div class="col-xs-12 col-md-3">
			<select ng-model="vm.work_orders_type" class="form-control">
				<option value="">-- Work Orders --</option>
				<option value="0">One-off Jobs</option>
				<option value="1">Recurring</option>
				<option value="-1">All</option>
			</select>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12" style="overflow-x: auto;">
			<div dhx-scheduler-visits id="calendar_visits" data="vm._filteredWorkOrderVisits = (vm._work_order_visits | filter: vm._filterByEmployees | filter: vm._filterByWorkOrderVisitStatus | filter: vm._filterByWorkOrderType)" units="{{vm._units}}" style="min-height: 900px; height: 150vh; min-width: 950px; width: 100%;">
				<div class="dhx_cal_prev_button">&nbsp;</div>
				<div class="dhx_cal_next_button">&nbsp;</div>
				<div class="dhx_cal_today_button"></div>
				<div class="dhx_cal_date"></div>
				<div class="dhx_cal_tab" name="day_tab" style="left: 50px;"></div>
				<div class="dhx_cal_tab" name="week_tab" style="left: 110px;"></div>
				<div class="dhx_cal_tab dhx_cal_tab_last" name="unit_tab" style="min-width: 93px; left: 170px;"></div>
				<div class="dhx_minical_icon" id="dhx_minical_icon" style="left: 0px;">&nbsp;</div>
				<div style="right: 220px;">
					<a class="dhx_total_custom_button" ng-click="vm._showHideMap()">
						<span ng-if="vm._show_map == false || !vm._show_map">Show Map</span>
						<span ng-if="vm._show_map == true">Hide Map</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>