<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>Settings</li>
	<li class="active">Company</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.company)" novalidate>
				<input type="hidden" class="form-control" name="city" id="city" ng-model="vm.company.location.city">
				<input type="hidden" class="form-control" name="state" id="state" ng-model="vm.company.location.state">
				<input type="hidden" class="form-control" name="zip_code" id="zip_code" ng-model="vm.company.location.zip_code">
				<input type="hidden" class="form-control" name="lat" id="lat" ng-model="vm.company.location.lat">
				<input type="hidden" class="form-control" name="lng" id="lng" ng-model="vm.company.location.lng">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>Company</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.company.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" 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" id="phone" ui-mask="(999) 999-9999" ng-model="vm.company.contacts.phone" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.phone.$touched && form.phone.$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.company.contacts.phone_secondary">
								</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.company.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="address" class="col-sm-2 control-label">Address <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="text" g-places-autocomplete force-selection="true" options="{componentRestrictions: {country: 'us'}}" class="form-control" name="address" id="address" ng-model="vm.company.location.address" ng-change="vm._parseAddress(vm.company.location.address)" ng-required="true" autocomplete="off">
								<p class="help-block" ng-show="form.address.$touched && form.address.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="image" class="col-sm-2 control-label">Image</label>
							<div class="col-sm-8">
								<a class="btn btn-default" ngf-multiple="false" ngf-select="vm._uploadImage($file)" ngf-resize="{width: 450, height: 160, centerCrop: true, quality: 1.0}" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="1MB" ngf-model-invalid="invalidFiles">Select</a>
								<a ng-if="vm.company.preferences.image" class="btn btn-danger" ng-click="vm.company.preferences.image = ''">Remove</a>
								<a ng-if="vm.company.preferences.image && !vm._editing" class="btn btn-info" ng-click="vm._viewImage(vm.company.image_full)">View</a>
								<span ng-if="invalidFiles">Invalid File. Select Another One.</span>
								<p class="help-block">Only Images up to 1MB. Will be resized to 450 (Width) / 160px (Height).</p>
							</div>
						</div>
						<h4 class="page-header"></h4>
						<div class="form-group">
							<label for="website" class="col-sm-2 control-label">Website</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="website" id="website" ng-model="vm.company.social_media.website">
							</div>
						</div>
						<div class="form-group">
							<label for="facebook" class="col-sm-2 control-label">Facebook</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="facebook" id="facebook" ng-model="vm.company.social_media.facebook">
							</div>
						</div>
						<div class="form-group">
							<label for="instagram" class="col-sm-2 control-label">Instagram</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="instagram" id="instagram" ng-model="vm.company.social_media.instagram">
							</div>
						</div>
						<div class="form-group">
							<label for="youtube" class="col-sm-2 control-label">YouTube</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="youtube" id="youtube" ng-model="vm.company.social_media.youtube">
							</div>
						</div>
						<h4 class="page-header"></h4>
						<div class="form-group">
							<label for="send_visit_info_by_email" class="col-sm-2 control-label">Send Work Order Visit Details to Customer by Email? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_visit_info_by_email" id="send_visit_info_by_email" value="0" ng-model="vm.company.send_visit_info_by_email" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_visit_info_by_email" id="send_visit_info_by_email" value="1" ng-model="vm.company.send_visit_info_by_email" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.send_visit_info_by_email.$touched && form.send_visit_info_by_email.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="generate_invoices_automatically" class="col-sm-2 control-label">Generate Invoices Automatically? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="generate_invoices_automatically" id="generate_invoices_automatically" value="0" ng-model="vm.company.generate_invoices_automatically" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="generate_invoices_automatically" id="generate_invoices_automatically" value="1" ng-model="vm.company.generate_invoices_automatically" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.generate_invoices_automatically.$touched && form.generate_invoices_automatically.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="enable_automatic_payments" class="col-sm-2 control-label">Enable Automatic Payments? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="enable_automatic_payments" id="enable_automatic_payments" value="0" ng-model="vm.company.enable_automatic_payments" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="enable_automatic_payments" id="enable_automatic_payments" value="1" ng-model="vm.company.enable_automatic_payments" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.enable_automatic_payments.$touched && form.enable_automatic_payments.$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>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
