<div class=”row-fluid”>
<div class=”span6″>
<style type=”text/css”>
.custom-checkbox-class .check-box
{
height:17px;
width:17px;
}

.custom-checkbox-class .control-label
{
display: inline;
padding: 16px 10px;
line-height: 20px;
}
.custom-button-class {
text-align: center;
padding-top: 10px;
}

.register-settings {
margin-top: 20px;
margin-bottom: 10px;
background-color: #e9eae0;
padding: 15px 15px 15px 15px;
}

.register-settings label {
}

.register-settings .custom-checkbox-class {
padding: 5px;
}
.register-settings .custom-checkbox-class label {
font-family: “Carre Noir W01”, Georgia, serif;
}

.register-settings .read-more {
display: block;
padding-top: 15px;
font-size: 16px;
float: right;
}

</style>

<section class=”section__box section__form-box” role=”main”>
<div ng-controller=”RegisterCustomerController” class=”ng-scope”>
<div class=”form__progression”>
<p class=”ng-binding”>
<span class=”ng-binding”>1</span> av 2
</p>
</div>
<div ng-show=”step == 1″>
<form name=”step1″ ng-submit=”nextStep()” novalidate=”” class=”ng-pristine ng-invalid ng-invalid-required ng-valid-email ng-valid-minlength ng-valid-maxlength”>
<div class=”row-fluid”>
<div class=”span6″>
<label class=”” for=”firstname”>Fornavn</label>
<label class=”form__error-message ng-hide” for=”firstname” ng-show=”step1.submitted &amp;&amp; step1.firstname.$invalid”>* Fornavn må fylles ut</label>
<input type=”text” autofocus=”” class=”form__textinput ng-pristine ng-invalid ng-invalid-required ng-touched” name=”firstname” id=”firstname” ng-model=”customer.firstName” required=””>
</div>
<div class=”span6″>
<label class=”” for=”lastname”>Etternavn</label>
<label class=”form__error-message ng-hide” for=”lastname” ng-show=”step1.submitted &amp;&amp; step1.lastname.$invalid”>* Etternavn må fylles ut</label>
<input type=”text” class=”form__textinput ng-pristine ng-untouched ng-invalid ng-invalid-required” placeholder=”” name=”lastname” id=”lastname” ng-model=”customer.lastName” required=””>
</div>
</div>
<label class=”” for=”email”>E-post</label>
<label class=”form__error-message ng-hide” for=”email” ng-show=”step1.submitted &amp;&amp; step1.email.$invalid”>* E-post må fylles ut</label>
<input type=”email” class=”form__textinput ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required” placeholder=”” name=”email” id=”email” ng-model=”customer.email” required=””>
<p>Vi sender kvittering på e-post</p>

<label class=”” for=”mobile”>Mobiltelefon</label>
<label class=”form__error-message ng-hide” for=”mobile” ng-show=”step1.submitted &amp;&amp; step1.mobile.$invalid”>* Mobiltelefon må fylles ut</label>
<label class=”form__error-message ng-hide” for=”mobile” ng-show=”mobileIsUsed”>* Mobilnummeret er allerede registrert</label>
<label class=”form__error-message ng-hide” for=”mobile” ng-show=”mobileInvalid”>* Mobilnummeret må ha 8 tegn og kan kun inneholde tall</label>

<input type=”tel” class=”form__textinput form__field–short ng-pristine ng-untouched ng-invalid ng-invalid-required” placeholder=”” ng-change=”validateMobile()” name=”mobile” id=”mobile” ng-model=”customer.mobile” required=””>
<p>Du kan senere logge inn med mobilnummer og se dine bestillinger</p>

<label class=”” for=”address”>Adresse</label>
<label class=”form__error-message ng-hide” for=”address” ng-show=”step1.submitted &amp;&amp; step1.address.$invalid”>* Adresse må fylles ut</label>
<input type=”text” class=”form__textinput ng-pristine ng-untouched ng-invalid ng-invalid-required” placeholder=”” name=”address” id=”address” ng-model=”customer.postalAddress” required=””>

<div class=”row-fluid”>
<div class=”span6″>
<label class=”” for=”postalcode”>Postnummer</label>
<label class=”form__error-message ng-hide” for=”postalcode” ng-show=”step1.submitted &amp;&amp; step1.postalcode.$invalid”>* Postnummer må fylles ut</label>
<input type=”text” class=”form__textinput ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength” placeholder=”” name=”postalcode” id=”postalcode” ng-model=”customer.postalCode” ng-change=”checkZip()” required=”” maxlength=”4″ minlength=”4″>
</div>
<div class=”span6″>
<label class=”” for=”postalarea”>Poststed</label>
<label class=”form__error-message ng-hide” for=”postalarea” ng-show=”step1.submitted &amp;&amp; step1.postalarea.$invalid”>* Poststed må fylles u</label>
<input type=”text” class=”form__textinput ng-pristine ng-untouched ng-invalid ng-invalid-required” placeholder=”” name=”postalarea” id=”postalarea” ng-model=”customer.postalAreaStored” disabled=”” required=””>
</div>
</div>
<!– NEW –>
<div class=”row-fluid ng-hide” ng-show=”!step1.email.$invalid &amp;&amp; !step1.mobile.$invalid”>
<div class=”span12 register-settings”>
<label class=””>INNSTILLINGER</label>
<div class=”form-group custom-checkbox-class”>
<input type=”checkbox” id=”test1″ ng-model=”customer.sendLenseReminder” class=”form-control check-box ng-pristine ng-untouched ng-valid”>
<label for=”test1″ class=”control-label”>

Send meg melding før jeg går tom for linser
</label>
</div>
<div class=”form-group custom-checkbox-class”>
<input type=”checkbox” id=”test2″ ng-model=”customer.sendInformation” class=”form-control check-box ng-pristine ng-untouched ng-valid”>
<label for=”test2″ class=”control-label”>

Jeg vil ha tilbud og informasjon fra nettbutikken
</label>
</div>
<label class=”form__error-message ng-hide” for=”checkbox-agreement” ng-show=”step1.submitted &amp;&amp; checkboxStatusInvalid”>* Samtykke må godkjennes</label>
<div class=”form-group custom-checkbox-class”>
<input type=”checkbox” id=”checkbox-agreement” class=”form-control check-box ng-pristine ng-untouched ng-valid” ng-model=”agreementCheckbox” ng-change=”validateAgreement()”>
<label for=”checkbox-agreement” class=”control-label”>Jeg godkjenner at mine opplysninger brukes for å gjennomføre bestilling og levering av kontaktlinser</label>

</div>
<span class=”read-more”>Les vår <a href=”Personvern.html”>personvernerklæring</a></span>
</div>

</div>
<!—->
<p class=”form__footer”>
<label class=”form__error-message ng-hide” ng-show=”step1.submitted &amp;&amp; step1.$invalid &amp;&amp; mobileIsUsed “>* Manglende eller ugyldige verdier!</label>
<button type=”submit” class=”button button–big”>Neste</button>
<a class=”button__sidekick button__sidekick–big” href=”#”>Hjelp</a>
</p>
</form>
</div>
<div ng-show=”step == 2″ class=”ng-hide”>
<h2 class=”section__box-title”>Velg din nærmeste optiker</h2>
<p>For å kunne gi deg bedre service kan vi knytte din konto til en optiker. Vi har søkt opp de optikerne som er nærmest ditt postnummer.</p>
<label>Velg din nærmeste optiker</label>
<ul class=”article-list”>
<!– ngRepeat: shop in shopsByLocationPostalCode –>
</ul>
<p>
<a data-target=”section-search” class=”toggle js-toggle-attr” ng-hide=”hidelinks” href=”#”>Søk etter andre optikere</a>
</p>
<section class=”js-toggle-section” id=”section-search” style=”display: none;”>
<section class=”box-search box-search–light l-section “>
<label class=”box-search__label” for=”shop_search_textfield”>Finn butikker</label>
<div class=”form__field-wrapper”>
<input type=”search” data-target=”section-shop-search-results” class=”box-search__textfield js-toggle-search-results ng-pristine ng-untouched ng-valid” placeholder=”Postnr, sted, butikk” value=”” role=”search” id=”shop_search_textfield” ng-model=”searchPhrase” ng-change=”onSearchPhraseChange()”>
<input type=”submit” value=”Søk” class=”form__inline-button form__inline-button–search” ng-click=”searchForShops()”>
<ul class=”search-results js-toggle-section” id=”section-shop-search-results” style=”display: none;”>
<!– ngRepeat: shop in shopsSearchItems –>
</ul>
</div>
</section>
<ul class=”article-list”>
<!– ngRepeat: shop in shopsSearchResult –>
</ul>
</section>
<hr>
<p>
<input type=”submit” value=”Jeg har ingen lokal optiker” ng-hide=”hidelinks” class=”button button–secondary” ng-click=”nextStep()”>
</p>
</div>
<div ng-show=”step == 3″ class=”ng-hide”>
<form name=”step3″ ng-submit=”completeRegistration(‘/registrer-bruker/Welcome’)” novalidate=”” class=”ng-pristine ng-invalid ng-invalid-required”>
<h2 class=”section__box-title”>Forrige linsekontroll</h2>
<p>
Du får <strong>5% rabatt</strong> på alle kjøp i nettbutikken hvis det er under 12 måneder siden siste linsekontroll.
</p>
<label class=”form__label form__label–inline” for=”checkbox1″>
<input type=”checkbox” id=”checkbox1″ ng-model=”customer.lenseCheckup” class=”ng-pristine ng-untouched ng-valid”>
Det er under 12 måneder siden forrige linsekontroll
</label>
<fieldset ng-show=”customer.lenseCheckup” class=”ng-hide”>
<legend>Din siste linsekontroll (valgfritt)</legend>
<div class=”row-fluid”>
<div class=”span6″>
<input type=”text” autofocus=”” class=”form__textinput date_field ng-pristine ng-untouched ng-invalid ng-invalid-required hasDatepicker” name=”lenseCheckupDate” id=”lenseCheckupDate” ng-model=”customer.lastLenseCheckupValue” required=””>
</div>
</div>
</fieldset>
<p class=”form__footer”>
<label class=”form__error-message ng-binding ng-hide” ng-show=”errors.length > 0″></label>
<button type=”submit” class=”button button–big”>Fullfør registrering</button>
</p>
</form>
</div>
</div>
</section>
<script>
var shopId = “{4051BB29-EB1C-413A-A72C-AD4AB9B373BB}”;
</script>
<script type=”text/javascript”>
$(window).ready(function () {
var d = new Date();
d.setMonth(d.getMonth() – 12);

$(“.date_field”).datepicker({
minDate: new Date(d),
maxDate: new Date(),
changeMonth: true,
changeYear: true
});
$(“#lenseCheckupDate”).val(‘Klikk for å velge dato’);

$(“#lenseCheckupDate”).click(function () {
$(“#lenseCheckupDate”).val(”);
});

});

</script>

</div>
<div class=”span6″>
<aside class=”section__box section__form-box section__form-box–no-background section__related”>
<h2 class=”section__box-title”>Dine fordeler</h2>
<ul>
<li>Ingen forpliktelser</li>
<li>Fri frakt over kr 500,- ellers kr 50,-</li>
<li>Sikker lagring av dine korreksjoner</li>
</ul>
</aside>
</div>
</div>