<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>{{"DriverManagement" | localize}}</span>

                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{"EditDriver" | 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-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' | localize}}
                                                </div>
                                                <div class="kt-wizard-v2__nav-label-desc">
                                                    {{'ReviewAndSubmit' | localize}}
                                                </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 #driverCreateForm="ngForm" class="kt-form" id="kt_form" (submit)="save()" novalidate="novalidate">
                                <!--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">{{"Enter_Account_Details" | localize}}</div>
                                    <div class="kt-form__section kt-form__section--first">
                                        <div class="kt-wizard-v2__form">
                                            <contactForm #contactForm [fName]="fName" [sName]="sName"
                                                [pNumber]="pNumber" [emailAddress]="emailAddress"></contactForm>
                                            <!-- <div class="form-group">
                                                    <label for="Name">{{"FirstName" | localize}} *</label>
                                                    <input id="Name" #nameInput="ngModel" class="form-control" type="text" name="Name" [(ngModel)]="driver.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)]="driver.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" type="text" name="PhoneNumber" class="form-control" [(ngModel)]="driver.phoneNumber" maxlength="24">
                                                        </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)]="driver.emailAddress" required maxlength="256" email />
                                                            <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                                                        </div>
                                                    </div>
                                                </div> -->
                                            <div class="form-group">
                                                <label for="UserName">{{"UserName" | localize}} <span class="text-danger">*</span></label>
                                                <input id="UserName" #userNameInput="ngModel" type="text"
                                                    [disabled]="!canChangeUserName" name="UserName" class="form-control"
                                                    [(ngModel)]="driver.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}} <span class="text-danger">*</span></label>
                                                            <input id="Password" type="password" name="Password"
                                                                #Password="ngModel" id="Password" class="form-control"
                                                                [(ngModel)]="driver.password"
                                                                [required]="!driver.id && !setRandomPassword"
                                                                maxlength="32"
                                                                
                                                                [requireUppercase]="passwordComplexitySetting.requireUppercase"
                                                                [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                                                                [requiredLength]="passwordComplexitySetting.requiredLength"
                                                                validateEqual="PasswordRepeat" reverse="true">
                                                        </div>
                                                        <!-- [requireDigit]="passwordComplexitySetting.requireDigit" -->
                                                        <!-- [requireLowercase]="passwordComplexitySetting.requireLowercase" -->
                                                    </div>
                                                    <div>
                                                        <ul class="help-block text-danger">
                                                                <!-- *ngIf="vendorCreateForm.controls['PasswordRepeat'] && vendorCreateForm.controls['PasswordRepeat'].errors" -->
                                                            <!-- <li
                                                                [hidden]="!driverCreateForm.controls['Password'].errors.requireDigit">
                                                                {{"PasswordComplexity_RequireDigit_Hint" | localize}}
                                                            </li> -->
                                                            <!-- <li
                                                                [hidden]="!driverCreateForm.controls['Password'].errors.requireLowercase">
                                                                {{"PasswordComplexity_RequireLowercase_Hint" | localize}}
                                                            </li>
                                                            <li
                                                                [hidden]="!driverCreateForm.controls['Password'].errors.requireUppercase">
                                                                {{"PasswordComplexity_RequireUppercase_Hint" | localize}}
                                                            </li>
                                                            <li
                                                                [hidden]="!driverCreateForm.controls['Password'].errors.requireNonAlphanumeric">
                                                                {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}
                                                            </li> -->
                                                            <!-- <li
                                                                [hidden]="!driverCreateForm.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}}
                                                                    <span class="text-danger">*</span></label>
                                                            <input id="PasswordRepeat" type="password"
                                                                name="PasswordRepeat" #PasswordRepeat="ngModel"
                                                                class="form-control" [(ngModel)]="driver.passwordRepeat"
                                                                [required]="!driver.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>
                                                        <ul class="help-block text-danger">
                                                                <!-- *ngIf="vendorCreateForm.controls['PasswordRepeat'] && vendorCreateForm.controls['PasswordRepeat'].errors" -->
                                                            <!-- <li
                                                                [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireDigit">
                                                                {{"PasswordComplexity_RequireDigit_Hint" | localize}}
                                                            </li>
                                                            <li
                                                                [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireLowercase">
                                                                {{"PasswordComplexity_RequireLowercase_Hint" | localize}}
                                                            </li>
                                                            <li
                                                                [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireUppercase">
                                                                {{"PasswordComplexity_RequireUppercase_Hint" | localize}}
                                                            </li>
                                                            <li
                                                                [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">
                                                                {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}
                                                            </li> -->
                                                            <!-- <li
                                                                [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requiredLength">
                                                                {{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}
                                                            </li> -->
                                                            <!-- <li
                                                                [hidden]="driverCreateForm.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">
                                            <div class="form-group">
                                                <label for="Country">{{"Location" | localize}} <span class="text-danger">*</span></label>
                                                <br>
                                                <select id="locationSelectInput" multiple="multiple"
                                                
                                                    data-placeholder="Select Location" style="width:100%;"
                                                    class="form-control kt-select2" name="locationSelectInput">
                                                    <ng-container *ngFor="let location of filteredLocations">
                                                        
                                                        <option value={{location.id}} [selected]="location.selected">{{location.name}} </option>
                                                    </ng-container>
                                                </select>
                                            </div>

                                            <br>
                                            <div id="contact">
                                                <!-- <div class="form-group">
                                                                    <label for="address1Input">{{"AddressLine1" | localize}} *</label>
                                                                    <input id="address1Input" 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> -->
                                                                <addressForm #addressForm [address]="address" [postalCodeId]="this.address.postalCodeId" 
                                                                [postalCodeValue]="this.selectedPostalCode" [selectedCountry]="this.selectedCountry"
                                                                [selectedState]="this.selectedState" [selectedCity]="this.selectedCity"></addressForm>
                                                <!-- <div class="form-group">
                                                                    <label for="address2Input">{{"AddressLine2" | localize}} </label>
                                                                    <input id="address2Input" 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="Cities">{{"City" | localize}} *</label>
                                                                            <br>
                                                                            <select id = "citySelectInput" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput">
                                                                                <option *ngFor="let city of filteredCities" value= "{{city.id}}" [selected]="city.id ===  defaultCity">
                                                                                    {{city.name}}
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <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 *ngFor="let state of filteredStates" value=" {{state.id}}" [selected]="state.id ===  defaultState">
                                                                                    {{state.name}}
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </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 *ngFor="let country of filteredCountries" value= "{{country.id}}" [selected]="country.id ===  defaultCountry">
                                                                                    {{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" >
                                                                                <option *ngFor="let postal of filteredPostal" value= "{{postal.id}}"  [selected]="postal.id ===  defaultPostal">
                                                                                    {{postal.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}}"  [selected]="addressType.id ==  defaultAddressType">
                                                                            {{addressType.name}}
                                                                        </option>
                                                                    </select>
                                                                </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"
                                    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}} :
                                                    {{ contactForm.fName +" "+contactForm.sName}}<br>
                                                    <span *ngIf="contactForm.pNumber">{{"PhoneNumber"  | localize}} :
                                                        {{ contactForm.pNumber }}<br></span>
                                                    {{"EmailAddress" | localize}} : {{ contactForm.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">
                                                    {{"Locations" | localize}} : <span
                                                        id="locationSelected">{{ selectedLocation }}</span><br>
                                                    <span
                                                        *ngIf="addressForm.address.addressLine1 ">{{"AddressLine1" | localize}}
                                                        :
                                                        {{ addressForm.address.addressLine1 }}<br></span>
                                                    <span
                                                        *ngIf="addressForm.address.addressLine2 ">{{"AddressLine2" | localize}}
                                                        : {{ addressForm.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 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>