<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/customers">Customers</a></li>
	<li><a href="#/customers/{{vm.customer.id}}">{{vm.customer.name}}</a></li>
	<li><a href="#/properties/{{vm.customer.id}}">Properties</a></li>
	<li class="active">{{vm.action}} Property</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.property)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.property.id">
				<input type="hidden" class="form-control" name="city" id="city" ng-model="vm.property.location.city">
				<input type="hidden" class="form-control" name="state" id="state" ng-model="vm.property.location.state">
				<input type="hidden" class="form-control" name="zip_code" id="zip_code" ng-model="vm.property.location.zip_code">
				<input type="hidden" class="form-control" name="lat" id="lat" ng-model="vm.property.location.lat">
				<input type="hidden" class="form-control" name="lng" id="lng" ng-model="vm.property.location.lng">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Property</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="address_type" class="col-sm-2 control-label">Address Type <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="address_type" id="address_type" value="0" ng-model="vm.property.address_type" ng-required="true"> Residential
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="address_type" id="address_type" value="1" ng-model="vm.property.address_type" ng-required="true"> Commercial
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="address" class="col-sm-2 control-label">Address <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-6">
								<input type="text" g-places-autocomplete force-selection="true" options="{componentRestrictions: {country: 'us'}}" class="form-control" name="address" id="address" ng-model="vm.property.location.address" ng-change="vm._parseAddress(vm.property.location.address)" ng-required="true" autocomplete="off">
								<p class="help-block" ng-show="form.address.$touched && form.address.$error.required">Value is required.</p>
								<p style="margin-top: 5px;" ng-if="vm.zillow_estimate">Zillow Estimate: {{vm.zillow_estimate}}</p>
							</div>
							<div class="col-sm-2">
								<a class="btn btn-info" ng-click="vm._getZillowEstimate()">Get Zillow Estimate</a>
							</div>
						</div>
						<div class="form-group">
							<label for="gate_code" class="col-sm-2 control-label">Gate Code</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="gate_code" id="gate_code" ng-model="vm.property.general_informations.gate_code">
							</div>
						</div>
						<div class="form-group">
							<label for="has_dog" class="col-sm-2 control-label">Dogs? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="has_dog" id="has_dog" value="1" ng-model="vm.property.general_informations.has_dog" ng-required="true"> Yes
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="has_dog" id="has_dog" value="0" ng-model="vm.property.general_informations.has_dog" ng-required="true"> No
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="bodies_of_water" class="col-sm-2 control-label">Bodies of Water <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">
									<input type="text" class="form-control" ng-model="body_of_water">
									<div class="input-group-btn">
										<a class="btn btn-success" ng-click="vm._addBodyOfWater(body_of_water); body_of_water = '';">
											<i class="ti ti-plus"></i>
										</a>
									</div>
								</div>
								<a ng-click="vm._removeBodyOfWater(body_of_water)" class="btn btn-default" ng-repeat="body_of_water in vm.bodies_of_water" style="margin: 10px 5px 0px 0px">
									<i class="ti ti-close"></i>&nbsp;
									{{body_of_water}}
								</a>
							</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.property.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.property.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.property.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.bodies_of_water.length" class="btn-primary btn">Save</button>
								<a href="#/properties/{{vm.customer.id}}" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
