<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>{{"VendorManagement" | localize}}</span>
                            
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                            {{"EditVendor" | 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="kt-content">
            <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-layer"></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-confetti"></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 #vendorCreateForm="ngForm" class="kt-form" id="kt_form" (submit)="save()">
                                        <!--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">{{"AccountDetails" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="form-group">
                                                        <label for="Name">{{"FirstName" | localize}} *</label>
                                                        <input id="Name" #nameInput="ngModel" class="form-control" type="text" name="Name" [(ngModel)]="vendor.name" required maxlength="32">
                                                        <validation-messages [formCtrl]="nameInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="Surname">{{"LastName" | localize}} *</label>
                                                        <input id="Surname" #surnameInput="ngModel" type="text" name="Surname" class="form-control" [(ngModel)]="vendor.surname" required maxlength="32">
                                                        <validation-messages [formCtrl]="surnameInput"></validation-messages>
                                                    </div>        
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="PhoneNumber">{{"PhoneNumber" | localize}}</label>
                                                                <input id="PhoneNumber"  #phoneInput="ngModel" type="text" name="PhoneNumber" class="form-control" pattern="^[0][1-9]\d{9}$|^[1-9]\d{10}$" [(ngModel)]="vendor.phoneNumber" maxlength="24">
                                                                <validation-messages [formCtrl]="phoneInput"></validation-messages>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="EmailAddress">{{"EmailAddress" | localize}} *</label>
                                                                <input id="EmailAddress" #emailAddressInput="ngModel" type="email" name="EmailAddress" class="form-control" [(ngModel)]="vendor.emailAddress" required maxlength="256" email />
                                                                <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <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)]="vendor.userName" required 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)]="vendor.password" [required]="!vendor.id && !setRandomPassword" 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 || vendorCreateForm.form.valid || vendorCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="vendorCreateForm.controls['Password'] && vendorCreateForm.controls['Password'].errors">
                                                                    <li [hidden]="!vendorCreateForm.controls['Password'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['Password'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['Password'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['Password'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.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)]="vendor.passwordRepeat" [required]="!vendor.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 || vendorCreateForm.form.valid || vendorCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="vendorCreateForm.controls['PasswordRepeat'] && vendorCreateForm.controls['PasswordRepeat'].errors">
                                                                    <li [hidden]="!vendorCreateForm.controls['PasswordRepeat'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['PasswordRepeat'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['PasswordRepeat'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!vendorCreateForm.controls['PasswordRepeat'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                    <li [hidden]="vendorCreateForm.controls['PasswordRepeat'].valid">{{"PasswordsDontMatch" | localize}}</li>
                                                                </ul>
                                                            </div>  
                                                        </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">{{"AddressInformation" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <addressForm #addressForm [address]="address" [selectedCountry]="selectedCountry" [selectedCity]="selectedCity" [selectedState]="selectedState"></addressForm>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 2-->
                                        <!-- begin: Form Wizard Step 3-->
                                        <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">
                                                                    {{"Name" | localize}}:{{ vendor.name +" "+vendor.surname}}<br>
                                                                    <span *ngIf="vendor.phoneNumber">{{"PhoneNumber" | localize}}: {{vendor.phoneNumber}}<br></span>
                                                                    {{"EmailAddress" | localize}} : {{ vendor.emailAddress }}                                                                                                                                                       
                                                                </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 *ngIf="selectedAddressType!=null" id="selectedAddressType">{{"AddressType" | localize}}: {{ selectedAddressType}}</span>
                                                                    </div>
                                                            </div>
                                                            
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 3-->
                                        <!--begin: Form Actions -->
                                        <div class="kt-form__actions">
                                            <button class="btn btn-secondary btn-md btn-pill" data-ktwizard-type="action-prev">
                                                {{'Previous' | localize}}
                                            </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">
                                                {{'NextStep' | localize}}
                                            </button>
                                        </div>
                                        <!--end: Form Actions -->
                                    </form>
                                    <!--end: Form Wizard Form-->
                                </div>
                            </div>
                </div>
            </div>
        </div>
    </div>
</div>
