<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/work-orders">Work Orders</a></li>
	<li class="active">{{vm.action}} Work Order</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.work_order)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.work_order.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Work Order</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="type" class="col-sm-2 control-label">Type <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">
									<select class="form-control" name="type" id="type" ng-model="vm.work_order.type" ng-required="true">
										<option value="">-- Select --</option>
										<option value="CLEANING">Cleaning</option>
										<option value="ESTIMATE">Estimate</option>
										<option value="REPAIR">Repair</option>
									</select>
								</div>
								<p class="help-block" ng-show="form.type.$touched && form.type.$error.required">Type is required.</p>
							</div>
						</div>
						<hr>
						<div class="form-group" ng-if="vm.action == 'New'">
							<label for="customer_id" class="col-sm-2 control-label">Customer <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<ui-select on-select="vm._getProperties($item)" required ng-model="vm.work_order.customer_id" ng-disabled="disabled" style="width: 100%" name="customer_id">
									<ui-select-match placeholder="Select a customer...">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="customer.id as customer in vm._customers | filter: $select.search | limitTo: 40">
										<span ng-bind-html="customer.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
								<p class="help-block" ng-show="form.customer_id.$touched && form.customer_id.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group" ng-if="vm.action == 'New' && vm.work_order.customer_id">
							<label for="property_id" class="col-sm-2 control-label">Property <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<ui-select required ng-model="vm.work_order.property_id" ng-disabled="disabled" style="width: 100%" name="property_id">
									<ui-select-match placeholder="Select a property...">{{$select.selected.location.address}}</ui-select-match>
									<ui-select-choices repeat="property.id as property in vm._properties | filter: $select.search | limitTo: 40">
										<span ng-bind-html="property.location.address | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
								<p class="help-block" ng-show="form.property_id.$touched && form.property_id.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group" ng-if="vm.action == 'New' && vm.work_order.customer_id && vm.work_order.property_id">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<a ng-click="vm._getNearBy()" class="btn btn-info">
									<i class="ti ti-reload" style="margin-right: 5px;"></i>
									Get Best Routes
								</a>
							</div>
						</div>
						<div class="form-group" ng-if="vm.action == 'New' && vm._nearbyList.length > 0">
							<div class="col-sm-2"></div>
							<div class="col-sm-8">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th class="hidden-xs">Customer</th>
											<th class="hidden-xs">Address</th>
											<th>Distance</th>
											<th>Schedule</th>
											<th>Employee(s)</th>
											<th>Actions</th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat="nearby in vm._nearbyList track by $index">
											<td class="hidden-xs">{{nearby.customer}}</td>
											<td class="hidden-xs">{{nearby.address}}</td>
											<td>{{nearby.distance}} miles</td>
											<td>{{nearby.schedule}}</td>
											<td>
												<div ng-repeat="employee in nearby.employees">
													<a href="#/employees/{{employee.id}}" title="{{employee.total}} Work Order(s)">
														{{employee.name}} [{{employee.total}}]
													</a>
												</div>
											</td>
											<td>
												<a ng-click="vm._selectNearBy(nearby)" class="btn btn-sm btn-default">
													Select
												</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="form-group" ng-if="vm.action == 'Edit'">
							<label for="customer_id" class="col-sm-2 control-label">Customer <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								<a href="#/customers/{{vm.work_order.customer.id}}">
									{{vm.work_order.customer.name}}
								</a>
							</div>
						</div>
						<div class="form-group" ng-if="vm.action == 'Edit'">
							<label for="property_id" class="col-sm-2 control-label">Property <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								<a href="#/properties/{{vm.work_order.customer.id}}/detail/{{vm.work_order.property.id}}">
									{{vm.work_order.property.location.address}}
								</a>
							</div>
						</div>
						<hr>
						<div class="form-group" ng-if="vm.action != 'Edit'">
							<label for="recurring" class="col-sm-2 control-label">Recurring? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="recurring" id="recurring" value="0" ng-change="vm._setRecurring(0)" ng-model="vm.work_order.recurring" ng-required="true" ng-disabled="vm.action == 'Edit'"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="recurring" id="recurring" value="1" ng-change="vm._setRecurring(1)" ng-model="vm.work_order.recurring" ng-required="true" ng-disabled="vm.action == 'Edit'"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.recurring.$touched && form.recurring.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="dates" class="col-sm-2 control-label">Dates</label>
							<div class="col-sm-8">
								<div class="input-group">
									<span class="input-group-addon" ng-if="vm.action != 'Edit'">Start <span style="color: #cc0000;">*</span></span>
									<input type="text" ng-focus="vm._openCalendar($event, 'start_date')" class="form-control datepicker" min-date="vm.todayDate" is-open="vm.calendar_opened['start_date']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="start_date" id="start_date" ng-model="vm.work_order.work_order_schedule.start_date" ng-required="true" ng-if="vm.action != 'Edit'">
									<span class="input-group-addon">End</span>
									<input type="text" ng-focus="vm._openCalendar($event, 'end_date')" class="form-control datepicker" min-date="vm.todayDate" is-open="vm.calendar_opened['end_date']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="end_date" id="end_date" ng-model="vm.work_order.work_order_schedule.end_date">
								</div>
								<p class="help-block" ng-show="form.start_date.$touched && form.start_date.$error.required">Start Date is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="times" class="col-sm-2 control-label">Times</label>
							<div class="col-sm-8">
								<div class="input-group">
									<span class="input-group-addon">From</span>
									<input type="text" class="form-control" name="start_time" id="start_time" time-picker ng-model="vm.work_order.work_order_schedule.start_time">
									<span class="input-group-addon">To</span>
									<input type="text" class="form-control" name="end_time" id="end_time" time-picker ng-model="vm.work_order.work_order_schedule.end_time">
								</div>
							</div>
						</div>
						<div class="form-group" ng-if="vm.work_order.recurring == 1">
							<label for="frequency" class="col-sm-2 control-label">Visits <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">
									<select class="form-control" name="frequency" id="frequency" ng-change="vm._setFrequency()" ng-model="vm.work_order.work_order_schedule.frequency" ng-required="true">
										<option value="">-- Frequency * --</option>
										<option value="daily">Daily</option>
										<option value="weekly">Weekly</option>
										<option value="monthly">Monthly</option>
									</select>
									<span class="input-group-addon">Interval <span style="color: #cc0000;">*</span></span>
									<input type="number" class="form-control" name="interval" id="interval" ng-model="vm.work_order.work_order_schedule.interval" ng-min="1" ng-max="30" ng-required="true">
									<span class="input-group-addon">Count</span>
									<input type="number" class="form-control" name="count" id="count" ng-model="vm.work_order.work_order_schedule.count" ng-min="1" ng-max="999">
								</div>
								<p class="help-block" ng-show="form.frequency.$touched && form.frequency.$error.required">Frequency is required.</p>
								<p class="help-block" ng-show="form.interval.$touched && form.interval.$error.required">Interval is required.</p>
							</div>
						</div>
						<div class="form-group" ng-if="vm.work_order.recurring == 1 && vm.work_order.work_order_schedule.frequency == 'weekly'">
							<label for="byday" class="col-sm-2 control-label">Day of Week <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<table>
									<tr>
										<td ng-repeat="day in vm._daysWeek" style="padding: 5px; border: solid 1px #efefef;">
											<input type="checkbox" checklist-model="vm.work_order.work_order_schedule.byday" checklist-value="day"> {{day}}
										</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="form-group" ng-if="vm.work_order.recurring == 1 && vm.work_order.work_order_schedule.frequency == 'monthly'">
							<label for="bymonthday" class="col-sm-2 control-label">Day of Month <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<table>
									<tr ng-repeat="lines in vm._daysMonth">
										<td ng-repeat="day in lines" style="padding: 5px; border: solid 1px #efefef;">
											<input type="checkbox" checklist-model="vm.work_order.work_order_schedule.bymonthday" checklist-value="day"> {{day}}
										</td>
									</tr>
								</table>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<label for="employees" class="col-sm-2 control-label">Assigned To <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<ui-select multiple required ng-model="vm.selected_employees" ng-disabled="disabled" style="width: 100%" name="employees">
									<ui-select-match placeholder="Select an employee...">{{$item.name}}</ui-select-match>
									<ui-select-choices repeat="employee.id as employee in vm._employees | filter:$select.search">
										<span ng-bind-html="employee.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
								<p class="help-block">You must select at least one employee</p>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<label for="about" class="col-sm-2 control-label">About</label>
							<div class="col-sm-8">
								<textarea class="form-control" name="about" id="about" ng-model="vm.work_order.about" rows="5"></textarea>
							</div>
						</div>
						<h4 class="page-header">List of Services <span style="color: #cc0000;">*</span></h4>
						<div class="form-group">
							<label for="services" class="col-sm-2 control-label"></label>
							<div class="col-sm-5">
								<ui-select ng-model="vm._service_item.service" ng-disabled="disabled" style="width: 100%">
									<ui-select-match placeholder="Select a service...">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="service in vm._services | filter: $select.search | limitTo: 40">
										<span ng-bind-html="service.service_category.name + ' / ' + service.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
							</div>
							<div class="col-sm-2">
								<input type="number" class="form-control" ng-model="vm._service_item.qty" value="1" placeholder="Qty">
							</div>
							<div class="col-sm-1">
								<a ng-click="vm._addServiceToList()" title="Add Service To List" class="btn btn-success"><i class="ti ti-plus"></i></a>
							</div>
						</div>
						<div class="form-group" ng-if="vm._servicesList.length">
							<div class="col-sm-2"></div>
							<div class="col-sm-8">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>Service</th>
											<th width="10%">Qty</th>
											<th width="10%">Actions</th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat="service in vm._servicesList track by $index">
											<td>{{service.service.name}}</td>
											<td>{{service.qty}}</td>
											<td>
												<a ng-click="vm._removeServiceFromList($index)" title="Remove Service From List" class="btn btn-xs btn-danger">
													<i class="ti ti-minus"></i>
												</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<h4 class="page-header">List of Products</h4>
						<div class="form-group">
							<label for="products" class="col-sm-2 control-label"></label>
							<div class="col-sm-5">
								<ui-select ng-model="vm._product_item.product" ng-disabled="disabled" style="width: 100%">
									<ui-select-match placeholder="Select a product...">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="product in vm._products | filter: $select.search | limitTo: 40">
										<span ng-bind-html="product.product_category.name + ' / ' + product.name | highlight: $select.search"></span>
									</ui-select-choices>
								</ui-select>
							</div>
							<div class="col-sm-2">
								<input type="number" class="form-control" ng-model="vm._product_item.qty" value="1" placeholder="Qty">
							</div>
							<div class="col-sm-1">
								<a ng-click="vm._addProductToList()" title="Add Product To List" class="btn btn-success"><i class="ti ti-plus"></i></a>
							</div>
						</div>
						<div class="form-group" ng-if="vm._productsList.length">
							<div class="col-sm-2"></div>
							<div class="col-sm-8">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>Product</th>
											<th width="10%">Qty</th>
											<th width="10%">Actions</th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat="product in vm._productsList">
											<td>{{product.product.name}}</td>
											<td>{{product.qty}}</td>
											<td>
												<a ng-click="vm._removeProductFromList($index)" title="Remove Product From List" class="btn btn-xs btn-danger">
													<i class="ti ti-minus"></i>
												</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<button type="submit" ng-disabled="!form.$valid || vm._servicesList.length == 0 || vm.selected_employees.length == 0" class="btn-primary btn">Save</button>
								<a href="#/work-orders" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
