<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>{{'EditLocation' | localize}}</span>
                            
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                            {{"LocationManagement" | 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-layer"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'Location' | 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-user"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'ContactDetails' | 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-map-location"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'AddressDetails' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            <!-- Add Your Support Agents -->
                                                        </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' | 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">
                                    <!-- <button type="button" class="close" style="padding: 15px;" (click)="navigate('/app/sprintship/locations')" [attr.aria-label]="l('Close')" [disabled]="saving">
                                        <span aria-hidden="true">&times;</span>
                                    </button> -->
                                    <!--begin: Form Wizard Form-->
                                    <form 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">{{"Location Details" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">

                                                    <div class="form-group">
                                                        <label for="Name">{{"Name" | localize}} *</label>
                                                        <input id="nameInput" type="text" #nameInput="ngModel" [(ngModel)]="location.name" name="name" class="form-control" required>
                                                        <validation-messages [formCtrl]="nameInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="minutesPerMileInput">{{"MinutesPerMile" | localize}} *</label>
                                                        <input id="minutesPerMileInput" type="number" #minutesPerMileInput="ngModel" [(ngModel)]="location.minutesPerMile" name="minutesPerMileInput" class="form-control" required>
                                                        <validation-messages [formCtrl]="minutesPerMileInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="minutesPerStopInput">{{"MinutesPerStop" | localize}} *</label>
                                                        <input id="minutesPerStopInput" type="number" #minutesPerStopInput="ngModel" [(ngModel)]="location.minutesPerStop" name="minutesPerStopInput" class="form-control" required>
                                                        <validation-messages [formCtrl]="minutesPerStopInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                    <label for="timeZoneSelectInput">{{"Timezone" | localize}} *</label>
                                                        
                                                        <select class="form-control kt-select2"  style="width: 100%;" id="timeZoneSelectInput" data-placeholder="Select Timezone" name="timeZoneSelectInput" tabindex="-1" aria-hidden="true">
                                                            <option>{{ defaultTimezone }}</option>
                                                            <option  *ngFor="let timeZone of filteredTimeZones" value="{{timeZone.id}}" [selected]="timeZone.id ===  defaultTimezone">{{timeZone.value}}</option>
                                                        </select>
                                                    </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">{{"ContactDetails" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    
                                                    <div class="form-group">
                                                        <label for="firstNameInput">{{"FirstName" | localize}} *</label>
                                                        <input id="firstNameInput" type="text"  #firstNameInput="ngModel" [(ngModel)]="contact.firstName" name="firstNameInput" class="form-control" required>
                                                        <validation-messages [formCtrl]="firstNameInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="lastNameInput">{{"LastName" | localize}} *</label>
                                                        <input id="lastNameInput" type="text"  #lastNameInput="ngModel" [(ngModel)]="contact.lastName" name="lastNameInput" class="form-control" required>
                                                        <validation-messages [formCtrl]="lastNameInput"></validation-messages>
                                                    </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">{{"AddressDetails" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="row">
                                                        <div class="col-xl-12">
                                                            <div class="form-group">
                                                                <label for="address1Input">{{"Address1" | localize}} *</label>
                                                                <input id="address1Input" type="text" #address1Input="ngModel" name="Address1" [(ngModel)]="address.addressLine1" class="form-control" required>
                                                                <validation-messages [formCtrl]="address1Input"></validation-messages>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-12">
                                                            <div class="form-group">
                                                                <label for="address2Input">{{"Address2" | localize}} </label>
                                                                <input id="address2Input" type="text" #address2Input="ngModel" name="Address2" [(ngModel)]="address.addressLine2" class="form-control"  >
                                                                <validation-messages [formCtrl]="address2Input"></validation-messages>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="countrySelectInput">{{"Country" | localize}} *</label>
                                                                <select class="form-control kt-select2" style="width: 100%;" id="countrySelectInput" name="countrySelectInput" tabindex="-1" aria-hidden="true" >
                                                                    <option disabled value="">{{"SelectCountry" | localize}}</option>
                                                                    <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="postalSelectInput">{{"PostalCode" | localize}} *</label>
                                                                    <!-- <validation-messages [formCtrl]="PostalselectInput"></validation-messages> -->
                                                                    <select class="form-control kt-select2" style="width: 100%;" id="postalSelectInput" name="postalSelectInput" tabindex="-1" aria-hidden="true">
                                                                        <option disabled value="">{{"SelectPostalCode" | localize}}</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="stateSelectInput">{{"State" | localize}} *</label>
                                                                <!-- <validation-messages [formCtrl]="StateSelectInput"></validation-messages> -->
                                                                <select class="form-control kt-select2" style="width: 100%;" id="stateSelectInput" name="stateSelectInput" tabindex="-1" aria-hidden="true">
                                                                    <option disabled value="">{{"SelectState" | localize}}</option>
                                                                    <option  *ngFor="let state of filteredStates" value="{{state.id}}" [selected]="state.id ===  defaultState">{{state.name}}</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="citySelectInput">{{"City" | localize}} *</label>
                                                                <select class="form-control kt-select2" style="width: 100%;" id="citySelectInput" name="citySelectInput" tabindex="-1" aria-hidden="true">
                                                                    <option disabled value="">{{"SelectCity" | localize}}</option>>
                                                                    <option  *ngFor="let city of filteredCities" value="{{city.id}}" [selected]="city.id ===  defaultCity">{{city.name}}</option>
                                                                </select>
                                                                <!-- <validation-messages [formCtrl]="CitySelectInput"></validation-messages> -->
                                                            </div>
                                                        </div>
                                                    </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">{{'ReviewYourDetailsAndSubmit' | 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">
                                                            {{'LocationDetails' | localize}}
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                            {{"Name" | localize}}: {{ location.name }}<br>
                                                            {{"MinutesPerMile" | localize}}: {{ location.minutesPerMile }}<br>
                                                            {{"MinutesPerStop" | localize}}: {{ location.minutesPerStop }}<br>
                                                            {{"Timezone" | localize}}: <span id="selectedTimezone">{{ selectedTimezone }}</span>                                                                                                                                                         
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                            {{'ContactDetails' | localize}}
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                            {{"FirstName" | localize}}: <span>{{ contact.firstName }}</span><br>
                                                            {{"LastName" | localize}}: <span>{{ contact.lastName }}</span><br>
                                                                
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                                {{'AddressDetails' | localize}}
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                {{ address.addressLine1 }}<br>
                                                                <span *ngIf="address.addressLine2">{{ 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 />
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 4-->
                                        
                                        <!--begin: Form Actions -->
                                        <div class="kt-form__actions">
                                            <button class="btn btn-dark btn-md  btn-elevate 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-elevate 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>
