<div class="top-pad"></div>

<div class="content-padding drivers-apply" ng-show="step == 1">
	<div class="apply-item-title text-your-order">
		Become a Brand Representative
	</div>
	<p>
		<br>
		Get paid per new referral! Start marketing and earning cash today, by creating an account below.
		<br><br>
	</p>

	<form name="form" ng-class="{'form-submitted':submitted}" novalidate>

		<div class="form-group">
			<h4><span class="form-required">*</span> Full Name:</h4>
			<div class="textbox" ng-class="{'form-error':form.fullName.$invalid}">
				<div class="box-error">
					<small ng-show="form.fullName.$error.required">Required.</small>
					<small ng-show="form.fullName.$error.maxlength">Full Name cannot be longer than 40 characters.</small>
					<small ng-show="form.fullName.$error.minlength">Full Name is required to be at least 5 characters.</small>
				</div>
				<input type="text" ng-model="apply.fullName" ng-maxlength="40" ng-minlength="5" required  name="fullName" class="form-control form-control-large">
			</div>
		</div>

		<div class="form-group">
			<h4><span class="form-required">*</span> Phone Number:</h4>
			<div class="textbox" ng-class="{'form-error':form.phone.$invalid}">
				<div class="box-error">
					<small ng-show="form.phone.$error.required">Required.</small>
				</div>
				<input type="text" ng-model="apply.phone" required  name="phone" class="form-control form-control-large">
			</div>
		</div>

		<div class="form-group">
			<h4><span class="form-required">*</span> Create Your Own Crunchbutton Referral Code:</h4>
			<div class="textbox" ng-class="{'form-error':form.code.$invalid}">
				<div class="box-error">
					<small ng-show="form.code.$error.required">Required.</small>
					<small ng-show="form.code.$error.maxlength">Code cannot be longer than 40 characters.</small>
					<small ng-show="form.code.$error.minlength">Codes must be at least 5 characters.</small>
				</div>
				<input type="text" ng-model="apply.code" ng-maxlength="40" ng-maxlength="5" required  name="code" class="form-control form-control-large">
				<div class="note">You'll use this in marketing.</div>
			</div>
		</div>

		<div class="form-group">
			<h4><span class="form-required">*</span> School:</h4>
			<div class="textbox" ng-class="{'form-error':form.community.$invalid}">
				<div class="box-error">
					<small ng-show="form.community.$error.required">Required.</small>
				</div>
				<select name="community" class="form-control form-control-large form-control form-control-select" required ng-model="apply.community" ng-options="community.id as community.name for community in communities" ></select>
			</div>
		</div>

		<button class="button lightorange button-bottom" ng-show="!isSaving" ng-click="saveBasicInfo()">Next Page</button>
		<div ng-show="isSaving"><i class="fa fa-spinner fa-spin"></i> Saving</div>

	</form>

</div>

<div class="content-padding drivers-apply" ng-show="step == 2">
	<div class="apply-item-title text-your-order">
		Congratulations!
	</div>
	<p>
		<br>
		Congratulations, we’ve created your account! Your username is <strong>{{rep.username}}</strong>. We’ve texted you login instructions to log into your account so you can get paid.
		<br>
	</p>

	<p>
		<br>
		Want to request some marketing materials? Fill out the info below!
		<br>
	</p>

	<p>
		<br>
		Fill out your mailing address & email address below so we can send you marketing materials & marketing tips (optional, but strongly encouraged).
		<br><br>
	</p>

	<form name="formInfo" novalidate>

		<div class="form-group">
			<h4>Mailing Address:</h4>
			<div class="textbox">
				<textarea ng-model="rep.address" name="address" class="form-control form-control-large"></textarea>
			</div>
		</div>

		<div class="divider"></div>

		<div class="form-group">
			<h4>Email Address:</h4>
			<div class="textbox">
				<input type="text" ng-model="rep.email" name="email" class="form-control form-control-large">
			</div>
		</div>

		<button class="button lightorange button-bottom" ng-show="!isSaving" ng-click="saveAddress()">Next Page</button>
		<div ng-show="isSaving"><i class="fa fa-spinner fa-spin"></i> Saving</div>

	</form>

</div>
