<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" style="margin-top: 20px;">
		<div class="datepicker-col">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Select a Route</h2>
				</div>
				<div class="panel-body">
					<datepicker ng-model="vm._date" show-weeks="false" class="datepicker" style="margin: 0px auto;"></datepicker>
				</div>
			</div>
			<div class="list-group list-group-alternate">
				<a ng-click="vm._addRoute(employee.id)" title="Add Route" class="list-group-item" ng-repeat="employee in vm._employees">
					<span class="badge" total-work-order-visits employee="{{employee.id}}" date="{{vm._date | date: 'MM/dd/yyyy'}}"></span> <i class="ti ti-plus"></i> {{employee.name}} 
				</a>
			</div>
		</div>
		<div class="routes-col">
			<div style="min-height: 500px; height: 100vh; overflow-y: scroll; padding: 0px 15px 0px 5px; margin-bottom: 35px;">
				<p ng-if="vm._routes.length == 0" class="text-center">No routes selected</p>
				<div class="panel panel-default" ng-repeat="route in vm._routes" style="visibility: visible; border-top: solid 3px {{route.employee_color}};">
					<div class="panel-heading">
						<h2 title="{{route.employee_name}}">{{route.employee_name}}</h2>
						<div class="panel-ctrls">
							<a ng-click="vm._closeRoute($index)" title="Close Route" class="button-icon"><i class="ti ti-close"></i></a>
							<a ng-click="vm._addWorkOrder(route.date, route.employee_id)" title="Add Work Order" class="button-icon"><i class="ti ti-plus"></i></a>
							<a ng-click="vm._optimizeRoute($index)" ng-if="route.points.length > 2" title="Optimize Route" class="button-icon"><i class="ti ti-exchange-vertical"></i></a>
							<a ng-click="vm._refreshRoute($index)" title="Refresh Route" class="button-icon"><i class="ti ti-reload"></i></a>
						</div>
					</div>
					<div class="panel-body">
						<ul ui-sortable ui-sortable-stop="vm._updateOrders(route.points)" ng-model="route.points" style="list-style: none; padding: 0px; margin: 0px;">
							<li ng-repeat="point in route.points" style="border-bottom: solid 1px #EFEFEF; padding: 10px 15px 10px 0px;">
								<div>
									<span style="font-weight: bold; margin-right: 5px;"><a href="#/customers/{{point.customer_id}}">{{$index+1}} - {{point.customer | uppercase}}</a></span>
									<span class="badge badge-success" ng-if="point.status_formatted == 'Done'">{{point.status_formatted}}</span>
									<span class="badge badge-default" ng-if="point.status_formatted == 'Canceled'">{{point.status_formatted}}</span>
									<span class="badge badge-warning" ng-if="point.status_formatted == 'Pending'">{{point.status_formatted}}</span>
									<span class="badge badge-info" ng-if="point.status_formatted == 'Confirmed'">{{point.status_formatted}}</span>
								</div>
								<div style="margin-bottom: 7px;">
									<a ng-click="vm._showWorkOrderVisit(point.work_order_visit_id)" title="See Details">{{point.work_order_visit_number}}</a>
									<span ng-if="point.recurring == 'Yes'">| Recurring</span>
									<span ng-if="point.recurring == 'No'">| One-off Job</span>
								</div>
								<div>
									{{route.date_formatted}}, {{point.start_time_formatted}} - {{point.end_time_formatted}}<br />
									<i>{{point.property_address}}</i>
								</div>
							</li>
						</ul>
						<p ng-if="route.points.length == 0" class="text-center">No stops found</p>
					</div>
				</div>
			</div>
		</div>
		<div class="map-col">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Map</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._downloadCSV()" title="Download CSV"><i class="ti ti-save"></i></a>
						<a ng-click="vm._refreshMap()" title="Refresh Map" class="button-icon"><i class="ti ti-reload"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div id="map-quest-route" map-quest-routes centerlocation="{{vm._centerMap}}" data="{{vm._routes}}" optimize="{{vm._optimize}}" ng-if="vm._showMap"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
.datepicker-col {
	width: 100%;
	margin: 0px auto;
	padding: 0px 25px;
}

.routes-col {
	width: 100%;
	margin: 0px auto;
	padding: 0px 25px;
}

.map-col {
	width: 100%;
	margin: 0px auto;
	padding: 0px 25px;
}

@media(min-width: 800px) {

	.datepicker-col {
		width: 50%;
		float: left;
	}

	.routes-col {
		width: 50%;
		float: left;
		padding: 0px 25px 0px 0px;
	}

	.map-col {
		width: 100%;
		float: left;
	}

}

@media(min-width: 1024px) {

	.datepicker-col {
		width: 30%;
	}

	.routes-col {
		width: 30%;
	}

	.map-col {
		width: 40%;
		padding-left: 0px;
	}

}

@media(min-width: 1280px) {

	.datepicker-col {
		width: 25%;
	}

	.routes-col {
		width: 25%;
	}

	.map-col {
		width: 50%;
	}

}

@media(min-width: 1366px) {

	.datepicker-col {
		width: 22%;
	}

	.routes-col {
		width: 22%;
	}

	.map-col {
		width: 56%;
	}

}

@media(min-width: 1920px) {

	.datepicker-col {
		width: 15%;
	}

	.routes-col {
		width: 20%;
	}

	.map-col {
		width: 65%;
	}

}

@media(min-width: 2560px) {

	.datepicker-col {
		width: 12%;
	}

	.routes-col {
		width: 20%;
	}

	.map-col {
		width: 68%;
	}

}

@media(min-width: 2880px) {

	.datepicker-col {
		width: 10%;
	}

	.routes-col {
		width: 20%;
	}

	.map-col {
		width: 70%;
	}

}
</style>