<div [@routerTransition]>
 
    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
        <div class="kt-subheader kt-grid__item">
            <div [class]="containerClass">
                <div class="kt-subheader__main">
                    <h3 class="kt-subheader__title">
                            <span>{{"ContactsHeader" | localize}}</span>
                            
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                            {{"CreateNewContact" | localize}}
                    </span>
                </div>
                <div class="kt-subheader__toolbar">
                    <div class="kt-subheader__wrapper">
                        <!-- <button (click)="createOrder()" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"OrderCreate" | localize}}</button> -->
                        <!-- <button (click)="createOrUpdate('/app/sprintship/create-update-order/')" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"OrderCreate" | localize}}</button> -->
                                    
                        <!-- <button (click)="createTag()" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"TagCreate" | localize}}</button> -->
                    </div>
                </div>
            </div>
        </div>
        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet">
                <div class="kt-portlet__body kt-portlet__body--fit">
                        <div class="kt-grid  kt-wizard-v2 kt-wizard-v2--white" id="kt_wizard_v2" data-ktwizard-state="first">
                                <div class="kt-grid__item kt-wizard-v2__aside">
                                    <!--begin: Form Wizard Nav -->
                                    <div class="kt-wizard-v2__nav">
                                        <div class="kt-wizard-v2__nav-items">
                                            <!--doc: Replace A tag with SPAN tag to disable the step link click -->
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="current">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-user"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'AccountSettings' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            <!-- Setup Your Account Details -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <!-- <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-settings"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'Roles' | localize}}
                                                        </div> 
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </a> -->
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon2-map"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'SetupLocations' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            <!-- Choose Your Location Map -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-clipboard"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            Summary
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            Review and Submit
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end: Form Wizard Nav -->
                    
                                </div>
                                <div class="kt-grid__item kt-grid__item--fluid kt-wizard-v2__wrapper">
                                    <!--begin: Form Wizard Form-->
                                    <form #contactCreateForm="ngForm" class="kt-form" id="kt_form" (submit)="save()" autocomplete="false">
                                        <!--begin: Form Wizard Step 1-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
                                            <div class="kt-heading kt-heading--md">{{"Account  Details" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">

                                                    <contactForm #contactForm></contactForm>

                                                    <div class="form-group">
                                                        <label for="UserName">{{"UserName" | localize}} </label>
                                                        <!-- <input id="UserName" #userNameInput="ngModel" type="text" [disabled]="!canChangeUserName" name="UserName" class="form-control" [(ngModel)]="user.userName" required maxlength="32"> -->
                                                        <input id="UserName" #userNameInput="ngModel" type="text" [disabled]="!canChangeUserName" name="UserName" class="form-control" [(ngModel)]="user.userName" maxlength="32">
                                                        <span class="help-block" *ngIf="!canChangeUserName">{{"CanNotChangeAdminUserName" | localize}}</span>
                                                        <validation-messages [formCtrl]="userNameInput"></validation-messages>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group" *ngIf="!setRandomPassword">
                                                                <div class="right">
                                                                    <label for="Password">{{"Password" | localize}} </label>
                                                                    <input id="Password" type="password" name="Password" #Password="ngModel" id="Password" class="form-control" [(ngModel)]="user.password" [required]="!contact.id" maxlength="32"
                                                                            [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                                                                            [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                                                                            validateEqual="PasswordRepeat" reverse="true">
                                                                </div>
                                                            </div>
                                                            <div [hidden]="setRandomPassword || contactCreateForm.form.valid || contactCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="contactCreateForm.controls['Password'] && contactCreateForm.controls['Password'].errors">
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group" *ngIf="!setRandomPassword">
                                                                <div class="right">
                                                                    <label for="PasswordRepeat">{{"PasswordRepeat" | localize}} </label>
                                                                    <input id="PasswordRepeat" type="password" name="PasswordRepeat" #PasswordRepeat="ngModel" class="form-control" [(ngModel)]="user.passwordRepeat" [required]="!contact.id && !setRandomPassword" maxlength="32"
                                                                            [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                                                                            [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                                                                            validateEqual="Password" reverse="false">
                                                                </div>
                                                            </div>
                                                            <div [hidden]="setRandomPassword || contactCreateForm.form.valid || contactCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="contactCreateForm.controls['PasswordRepeat'] && contactCreateForm.controls['PasswordRepeat'].errors">
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                    <li [hidden]="contactCreateForm.controls['PasswordRepeat'].valid">{{"PasswordsDontMatch" | localize}}</li>
                                                                </ul>
                                                            </div>  
                                                        </div>

                                                    </div> 
                                                    <div class="form-group" id="dvRoles">
                                                        <label for="Roles">{{"Roles" | localize}} </label>
                                                        <div class="kt-checkbox-list">
                                                            <label class="kt-checkbox" attr.for="{{role.roleName}}" *ngFor="let role of roles">
                                                                <input id="{{role.roleName}}" type="checkbox" name="{{role.roleName}}" [(ngModel)]="role.isAssigned" class="clsRoles">
                                                                {{role.roleDisplayName}}
                                                                <span></span>
                                                            </label>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 1-->

                                        <!--begin: Form Wizard Step 2-->
                                    <!--  <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                            <div class="kt-heading kt-heading--md">{{"Roles" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="form-group">
                                                        
                                                        <div class="kt-checkbox-list">
                                                            <label class="kt-checkbox" attr.for="{{role.roleName}}" *ngFor="let role of roles">
                                                                <input id="{{role.roleName}}" type="checkbox" name="{{role.roleName}}" [(ngModel)]="role.isAssigned">
                                                                {{role.roleDisplayName}}
                                                                <span></span>
                                                            </label>
                                                        </div>




                                                    
                                                        
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                        <!--end: Form Wizard Step 2-->
                    
                                        <!--begin: Form Wizard Step 3-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                            <div class="kt-heading kt-heading--md">{{"AddressInformation" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    
                                                    <addressForm #addressForm></addressForm>
                                                    <!-- <div class="form-group">
                                                        <label for="address1Input">{{"AddressLine1" | localize}} *</label>
                                                        <input style="border: 1px solid #a6a6a6;" #address1Input="ngModel" type="text" name="Address1" class="form-control"  [(ngModel)]="address.addressLine1" required>
                                                        <validation-messages [formCtrl] = "address1Input"></validation-messages>
                                                    </div>   
                                                    <div class="form-group">
                                                        <label for="address2Input">{{"AddressLine2" | localize}} </label>
                                                        <input style="border: 1px solid #a6a6a6;" type="text" name="Address2" class="form-control"  [(ngModel)]="address.addressLine2" >  
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="Country">{{"Country" | localize}} *</label>
                                                                <br>
                                                                <select id = "countrySelectInput" data-placeholder="Select Country" style="width:100%;" class="form-control kt-select2" name="countrySelectInput">
                                                                    <option></option>
                                                                    <option *ngFor="let country of filteredCountries" value= {{country.id}}>
                                                                        {{country.name}}
                                                                        </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="PostalCode">{{"PostalCode" | localize}} *</label>
                                                                <br>
                                                                <select id = "postalSelectInput" data-placeholder="Select Postal Code" style="width:100%;" class="form-control kt-select2" name="postalSelectInput" tabindex="-1" aria-hidden="true">
                                                                    <option></option>
                                                                    <option *ngFor="let postal of filteredPostal" value= {{postal.id}} [selected]="postal.id ===  defaultPostal">
                                                                        {{postal.name}}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="States">{{"State" | localize}} *</label>
                                                                <br>
                                                                <select id = "stateSelectInput" data-placeholder="Select State" style="width:100%;" class="form-control kt-select2" name="stateSelectInput" >
                                                                    <option></option>
                                                                    <option *ngFor="let state of filteredStates" value= {{state.id}}>
                                                                        {{state.name}}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="Cities">{{"City" | localize}} *</label>
                                                                <br>
                                                                <select id = "citySelectInput" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput"  >
                                                                    <option></option>
                                                                    <option *ngFor="let city of filteredCities" value= {{city.id}}>
                                                                        {{city.name}}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="AddressType">{{"AddressType" | localize}}</label>
                                                        <br>
                                                        <select id = "addressTypeSelectInput" data-placeholder="Select Address Type" style="width:100%;" class="form-control kt-select2" name="addressTypeSelectInput">
                                                            <option value="null">None</option>
                                                            <option *ngFor="let addressType of filteredAddressType" value= {{addressType.id}}>
                                                                {{addressType.name}}
                                                            </option>
                                                        </select>
                                                    </div> -->
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 3-->
                                        <!-- begin: Form Wizard Step 4-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
                                                <div class="kt-heading kt-heading--md">{{"Review_Your_Details_Submit" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                        <div class="kt-wizard-v2__review">
                                                            <div class="kt-wizard-v2__review-item">
                                                                <div class="kt-wizard-v2__review-title">
                                                                    {{"AccountSettings" | localize}}
                                                                </div>
                                                                <div class="kt-wizard-v2__review-content">
                                                                {{"FullName"  | localize}} : {{ contactForm.fName +" "+contactForm.sName}}<br>
                                                                <span *ngIf="contactForm.pNumber"> {{"PhoneNumber"  | localize}} : {{ contactForm.pNumber }}<br></span>
                                                                {{"EmailAddress" | localize}} : {{ contactForm.emailAddress }}<br>
                                                                <span *ngFor="let role of roles">
                                                                    <span *ngIf="role.isAssigned == true">{{"Roles" | localize}} : {{role.roleDisplayName}}, </span>
                                                                </span>
                                                                </div>
                                                            </div>
                                                            <div class="kt-wizard-v2__review-item">
                                                                <div class="kt-wizard-v2__review-title">
                                                                    {{"AddressInformation" | localize}}
                                                                </div>
                                                                <div class="kt-wizard-v2__review-content">
                                                                {{"AddressLine1" | localize}} : {{ address.addressLine1 }}<br>
                                                                <span *ngIf="address.addressLine2"> {{"AddressLine2" | localize}} : {{address.addressLine2}}<br></span>
                                                                <span id="selectedCity">{{ selectedCity }}</span><span> , </span>
                                                                <span id="selectedPostalCode">{{ selectedPostalCode }}</span><span> , </span>
                                                                <span id="selectedState">{{ selectedState }}</span><span> , </span>
                                                                <span id="selectedCountry">{{ selectedCountry }}</span><br />
                                                                <span id="selectedAddressType">{{ selectedAddressType }}</span>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 4-->
                                        <!--begin: Form Actions -->
                                        <div class="kt-form__actions">
                                            <button class="btn btn-secondary btn-md btn-pill" data-ktwizard-type="action-prev">
                                                Previous
                                            </button>
                                            <button class="btn btn-brand btn-md  btn-elevate btn-pill" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" id='submit' data-ktwizard-type="action-submit">
                                                <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
                                            </button>
                                            <button class="btn btn-brand btn-md btn-pill" data-ktwizard-type="action-next" id="#next">
                                                Next Step
                                            </button>
                                        </div>
                                        <!--end: Form Actions -->
                                    </form>
                                    <!--end: Form Wizard Form-->
                                </div>
                            </div>
                </div>
            </div>
        </div>
    </div>
</div>
