<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/work-orders">Work Orders</a></li>
	<li class="active">Import Work Orders</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 Work Orders</h2>
				</div>
				<div class="panel-body">
					<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="url" class="col-sm-2 control-label">CSV File <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-8">
									<a class="btn btn-default" ngf-multiple="false" ngf-select="vm._uploadCSVFile($file)" ngf-pattern="'.csv'" ngf-accept="'.csv'" ngf-max-size="1MB" ngf-model-invalid="invalidFiles">Select</a>
									<a ng-if="vm._file" class="btn btn-info" ng-click="vm._viewFile(vm._file)">View</a>
									<span ng-if="invalidFiles">Invalid File. Select Another One.</span>
									<p class="help-block">Only CSV up to 1MB.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group" style="max-height: 500px; overflow-y: auto; margin-top: 25px;" ng-if="vm._file">
						<table class="table table-striped">
							<thead>
								<tr>
									<th width="5%"><input type="checkbox" ng-model="_selectedAll" ng-click="vm._selectAll(_selectedAll)" /></th>
									<th>Customer</th>
									<th>Property</th>
									<th class="hidden-xs">Type</th>
									<th class="hidden-xs">Billing</th>
									<th class="hidden-xs">Date (Start)</th>
									<th class="hidden-xs">Date (End)</th>
									<th class="hidden-xs">Time</th>
									<th class="hidden-xs">Frequency</th>
									<th class="hidden-xs">Day(s) of Week</th>
									<th class="hidden-xs">Interval</th>
									<th class="hidden-xs">Service</th>
									<th class="hidden-xs">Employee</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="work_order in vm._workOrders">
									<td><input type="checkbox" checklist-model="vm._selectedWorkOrders" checklist-value="work_order" /></td>
									<td>{{work_order.customer.name}}</td>
									<td>{{work_order.property.address}}</td>
									<td class="hidden-xs">{{work_order.type}}</td>
									<td class="hidden-xs">{{work_order.billing}}</td>
									<td class="hidden-xs">{{work_order.date_start | date}}</td>
									<td class="hidden-xs">{{work_order.date_end | date}}</td>
									<td class="hidden-xs">{{work_order.time_from}} - {{work_order.time_to}}</td>
									<td class="hidden-xs">{{work_order.frequency}}</td>
									<td class="hidden-xs">{{work_order.day_of_week}}</td>
									<td class="hidden-xs">{{work_order.interval}}</td>
									<td class="hidden-xs">{{work_order.service.name}}</td>
									<td class="hidden-xs">{{work_order.employee.name}}</td>
								</tr>
							</tbody>
						</table>
						<p class="text-center" ng-show="vm._workOrders.length == 0">No records found</p>
					</div>
				</div>
				<div class="panel-footer">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2">
							<a ng-disabled="vm._selectedWorkOrders.length == 0" class="btn-primary btn" ng-click="vm._importWorkOrders()">Import {{vm._selectedWorkOrders.length}} Work Order(s)</a>
							<a href="#/work-orders" class="btn-default btn">Cancel</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
