<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/estimates">Estimates</a></li>
	<li class="active">{{vm.action}} Estimate</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.estimate)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.estimate.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Estimate</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<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); vm._setEmail($item)" required ng-model="vm.estimate.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.estimate.customer_id && vm.action == 'New'">
							<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.estimate.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 == '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.estimate.customer.id}}">
									{{vm.estimate.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.estimate.customer.id}}/detail/{{vm.estimate.property.id}}">
									{{vm.estimate.property.location.address}}
								</a>
							</div>
						</div>
						<div class="form-group">
							<label for="send_to" class="col-sm-2 control-label">Send To <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-email"></i>
									</span>
									<input type="email" class="form-control" name="send_to" id="send_to" ng-model="vm.estimate.send_to" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.send_to.$touched && form.send_to.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.send_to.$touched && form.send_to.$error.email">Invalid email.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="dates" class="col-sm-2 control-label">Dates <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">
									<span class="input-group-addon">Estimate Date <span style="color: #cc0000;">*</span></span>
									<input type="text" ng-focus="vm._openCalendar($event, 'date')" class="form-control datepicker" is-open="vm.calendar_opened['date']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date" id="date" ng-model="vm.estimate.date" ng-required="true">
									<span class="input-group-addon">Expiration Date <span style="color: #cc0000;">*</span></span>
									<input type="text" ng-focus="vm._openCalendar($event, 'expiration_date')" class="form-control datepicker" is-open="vm.calendar_opened['expiration_date']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="expiration_date" id="expiration_date" ng-model="vm.estimate.expiration_date" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.date.$touched && form.date.$error.required">Estimate Date is required.</p>
								<p class="help-block" ng-show="form.expiration_date.$touched && form.expiration_date.$error.required">Due Date is required.</p>
							</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 + ' ($' + service.price + ')' | 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" ng-min="1">
							</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">
								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>Service</th>
												<th width="15%">Cost Price</th>
												<th width="15%">Unit Price</th>
												<th width="10%">Qty</th>
												<th width="15%">Subtotal</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.service.cost | currency: "$"}}</td>
												<td><input type="text" style="min-width: 50px;" class="form-control" ng-model="service['price']" ng-blur="vm._changeServiceUnitPrice($index, service['price'])" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-required="true" /></td>
												<td><input type="number" style="min-width: 50px;" class="form-control" ng-model="service['qty']" ng-blur="vm._changeServiceQty($index, service['qty'])" ng-min="1" ng-required="true" /></td>
												<td>{{service.price * service.qty | currency: "$"}}</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>
						</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 + ' ($' + product.price + ')' | 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" ng-min="1">
							</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">
								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>Product</th>
												<th width="15%">Cost Price</th>
												<th width="15%">Unit Price</th>
												<th width="10%">Qty</th>
												<th width="15%">Subtotal</th>
												<th width="10%">Actions</th>
											</tr>
										</thead>
										<tbody>
											<tr ng-repeat="product in vm._productsList">
												<td>{{product.product.name}}</td>
												<td>{{product.product.cost | currency: "$"}}</td>
												<td><input type="text" style="min-width: 50px;" class="form-control" ng-model="product['price']" ng-blur="vm._changeProductUnitPrice($index, product['price'])" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-required="true" /></td>
												<td><input type="number" style="min-width: 50px;" class="form-control" ng-model="product['qty']" ng-blur="vm._changeProductQty($index, product['qty'])" ng-min="1" ng-required="true" /></td>
												<td>{{product.price * product.qty | currency: "$"}}</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>
						<h4 class="page-header"></h4>
						<div class="form-group">
							<label for="subtotal" class="col-sm-2 control-label">Subtotal <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								{{vm._subtotal | currency: "$"}}
							</div>
						</div>
						<div class="form-group">
							<label for="discount" class="col-sm-2 control-label">Discount <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-money"></i>
									</span>
									<input type="text" class="form-control" name="discount" id="discount" ng-blur="vm._updateTotal();vm._updateGrossProfit();" ng-model="vm.estimate.discount" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.discount.$touched && form.discount.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.discount.$touched && form.discount.$error.pattern">Decimal is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="amount" class="col-sm-2 control-label">Total (Subtotal - Discount) <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								{{vm.estimate.amount | currency: "$"}}
							</div>
						</div>
						<div class="form-group">
							<label for="amount" class="col-sm-2 control-label">Job Cost <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								{{vm._totalCost | currency: "$"}}
							</div>
						</div>
						<div class="form-group">
							<label for="amount" class="col-sm-2 control-label">Gross Profit <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8" style="padding-top: 6px;">
								{{vm._totalGrossProfit | currency: "$"}} ({{(vm._totalGrossProfit/vm.estimate.amount)*100 | number: 2}}%)
							</div>
						</div>
						<h4 class="page-header"></h4>
						<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.estimate.about" rows="5"></textarea>
							</div>
						</div>
						<h4 class="page-header"></h4>
						<div class="form-group">
							<label for="attachments" class="col-sm-2 control-label"></label>
							<div class="col-sm-8">
								<a class="btn btn-sm btn-info" title="New Attachment" ngf-multiple="false" ngf-select="vm._uploadFile($file)" ngf-max-size="10MB" ngf-pattern="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-accept="'image/*,.pdf,.doc,.docx,.xls,.xlsx'" ngf-model-invalid="invalidFiles">+ New Attachment</a>
								<p ng-if="invalidFiles" style="color: #cc0000">Invalid File. Only Files (Images, .PDF, .DOC, .DOCX, .XLS, .XLSX) up to 10MB.</p>
							</div>
						</div>
						<div class="form-group" ng-if="vm._attachments.length">
							<label for="attachments" class="col-sm-2 control-label">Attachments</label>
							<div class="col-sm-8">
								<table class="table table-bordered">
									<tbody>
										<tr ng-repeat="attachment in vm._attachments">
											<td><a href="{{attachment.url}}" target="_blank">{{attachment.name}}</a></td>
											<td class="text-center"><a class="btn btn-sm btn-danger" ng-click="vm._removeFile(attachment.name)" title="Remove">Remove</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="form-group">
							<label for="send_to_quickbooks" class="col-sm-2 control-label">Send To Quickbooks? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_to_quickbooks" id="send_to_quickbooks" value="0" ng-model="vm.estimate.send_to_quickbooks" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_to_quickbooks" id="send_to_quickbooks" value="1" ng-model="vm.estimate.send_to_quickbooks" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.send_to_quickbooks.$touched && form.send_to_quickbooks.$error.required">Value is required.</p>
							</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="#/estimates" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
