<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers">Customers</a></li>
	<li class="active">{{vm.action}} Customer</li>
</ol>

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

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.customer)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.customer.id">
				<input type="hidden" name="status" id="status" ng-model="vm.customer.status">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Customer</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">Name <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="name" id="name" ng-model="vm.customer.name" ng-required="true" ng-minlength="3">
								<p class="help-block" ng-show="form.name.$touched && form.name.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.name.$touched && form.name.$error.minlength">Value is too short.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="phone_primary" class="col-sm-2 control-label">Phone <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-mobile"></i>
									</span>
									<input type="text" class="form-control" name="phone_primary" id="phone_primary" ui-mask="(999) 999-9999" ng-model="vm.customer.contacts.phone_primary" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.phone_primary.$touched && form.phone_primary.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="phone_secondary" class="col-sm-2 control-label">Secondary Phone</label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-mobile"></i>
									</span>
									<input type="text" class="form-control" name="phone_secondary" id="phone_secondary" ui-mask="(999) 999-9999" ng-model="vm.customer.contacts.phone_secondary">
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="fax" class="col-sm-2 control-label">Fax</label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-printer"></i>
									</span>
									<input type="text" class="form-control" name="fax" id="fax" ui-mask="(999) 999-9999" ng-model="vm.customer.contacts.fax">
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="email" class="col-sm-2 control-label">Email <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="email" id="email" ng-model="vm.customer.contacts.email" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.email.$touched && form.email.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.email.$touched && form.email.$error.email">Invalid email.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="email_secondary" class="col-sm-2 control-label">Secondary Email</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="email_secondary" id="email_secondary" ng-model="vm.customer.contacts.email_secondary">
								</div>
								<p class="help-block" ng-show="form.email_secondary.$touched && form.email_secondary.$error.email">Invalid email.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="customer_source_id" class="col-sm-2 control-label">Source <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-6">
								<select class="form-control" name="customer_source_id" id="customer_source_id"
									ng-model="vm.customer.customer_source_id" ng-required="true"
										ng-options="item.id as item.name for item in vm._customerSources">
									<option value="">-- Select --</option>
								</select>
								<p class="help-block" ng-show="form.customer_source_id.$touched && form.customer_source_id.$error.required">Value is required.</p>
							</div>
							<div class="col-sm-2">
								<a class="btn btn-default" ng-click="vm._addNewCustomerSource()">
									<i class="ti ti-plus"></i> Add
								</a>
							</div>
						</div>
						<div class="form-group">
							<label for="terms" class="col-sm-2 control-label">Terms <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<select class="form-control" name="terms" id="terms" ng-model="vm.customer.preferences.terms" ng-required="true">
									<option value="">-- Select --</option>
									<option value="0">Due on Receipt</option>
									<option value="15">Net 15</option>
									<option value="30">Net 30</option>
									<option value="60">Net 60</option>
								</select>
								<p class="help-block" ng-show="form.terms.$touched && form.terms.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="statement_day" class="col-sm-2 control-label">Statement Day <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="number" class="form-control" name="statement_day" id="statement_day" ng-model="vm.customer.preferences.statement_day" ng-min="1" ng-max="30" ng-required="true">
								<p class="help-block" ng-show="form.statement_day.$touched && form.statement_day.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.statement_day.$touched && form.statement_day.$error.min">Min Value 1.</p>
								<p class="help-block" ng-show="form.statement_day.$touched && form.statement_day.$error.max">Max Value 30.</p>
								<p class="help-block">Best Day to Receive Statements.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="statement_by" class="col-sm-2 control-label">Statement By</label>
							<div class="col-sm-8">
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="statement_by_print" id="statement_by_print" ng-model="vm.customer.preferences.statement_by_print"> Print
									</label>
								</div>
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="statement_by_email" id="statement_by_email" ng-model="vm.customer.preferences.statement_by_email"> Email
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="receive_work_order_updates" class="col-sm-2 control-label">Receive Updates By</label>
							<div class="col-sm-8">
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="work_order_updates_by_text" id="work_order_updates_by_text" ng-model="vm.customer.preferences.work_order_updates_by_text"> Text Message
									</label>
								</div>
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="work_order_updates_by_email" id="work_order_updates_by_email" ng-model="vm.customer.preferences.work_order_updates_by_email"> Email
									</label>
								</div>
							</div>
						</div>
						<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.customer.about" rows="5"></textarea>
							</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.customer.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.customer.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" class="btn-primary btn">Save</button>
								<a href="#/customers" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
