<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>{{"OrderCreate" | localize}}</span>
                        </h3>
                        <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                        <span class="kt-subheader__desc">
                                {{"OrderManagement" | 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">
                                                                {{'PickupContactDetail' | 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">
                                                                {{'PickupAddressDetail' | 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-user"></i>
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label">
                                                            <div class="kt-wizard-v2__nav-label-title">
                                                                {{'DestinationContactDetail' | 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">
                                                                {{'DestinationAddressDetail' | 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="flaticon2-delivery-package"></i>
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label">
                                                            <div class="kt-wizard-v2__nav-label-title">
                                                                {{'Packages' | localize}}
                                                            </div>
                                                            <div class="kt-wizard-v2__nav-label-desc">
                                                                <!-- Address, Street, City, State -->
                                                            </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">
                                                                    {{'Tags' | localize}}
                                                                </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-notepad"></i>
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label">
                                                            <div class="kt-wizard-v2__nav-label-title">
                                                                    {{'Note' | localize}}
                                                            </div>
                                                            <div class="kt-wizard-v2__nav-label-desc">
                                                                <!-- Use Credit or Debit Cards -->
                                                            </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 class="kt-form" id="kt_form" novalidate="novalidate" #userForm="ngForm" (submit)="save()" >
                                            <!-- begin: Form Wizard Step 1 -->
                                            
                                            <!-- end: Form Wizard Step 1 -->
                        
                                            <!--begin: Form Wizard Step 2-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
                                                <div class="kt-heading kt-heading--md">{{"PickupContactDetail" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                    <div class="kt-wizard-v2__form">
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupFirstNameInput">{{"FirstName" | localize}} <span class="text-danger">*</span></label>
                                                                    <input id="pickupFirstNameInput" #pickupFirstNameInput="ngModel" type="text" name="pickupFirstNameInput" class="form-control"  
                                                                        [(ngModel)]="createInput.pickUpFirstName" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="pickupLastNameInput">{{"LastName" | localize}} <span class="text-danger">*</span></label>
                                                                        <input id="pickupLastNameInput" #pickupLastNameInput="ngModel" type="text" name="pickupLastNameInput" class="form-control"  
                                                                        [(ngModel)]="createInput.pickUpLastName" required>
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="pickupEmailInput">{{"Email" | localize}} <span class="text-danger">*</span></label>
                                                                        <input id="pickupEmailInput" #pickupEmailInput="ngModel" type="email" name="pickupEmailInput" class="form-control"  
                                                                        [(ngModel)]="createInput.pickUpEmail" required>
                                                                    </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupPhoneInput">{{"Phone" | localize}}</label>
                                                                    <input id="pickupPhoneInput" #pickupPhoneInput="ngModel" type="number" name="pickupPhoneInput" class="form-control"  
                                                                    [(ngModel)]="createInput.pickUpPhone">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                            <label for="PickupEta">{{"PickupEta" | localize}} <span class="text-danger">*</span></label>
                                                                            <input name="PickupEta"
                                                                            type="text"
                                                                            class="form-control"
                                                                            id="PickupEta"
                                                                            bsDatepicker
                                                                            [(ngModel)]="pickupEta"
                                                                            readonly="readonly"
                                                                            #PickupEta="ngModel"
                                                                            required/>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="PickUpFrom">{{"PickUp From" | localize}} <span class="text-danger">*</span></label>
                                                                    <kendo-timepicker name="pickUpFrom" [(ngModel)]="pickUpFrom" #pickUpFromCtrl="ngModel" class="form-control pickUpFrom" #pickUpFromCtrl="ngModel" placeholder="Enter Pickup From Time" required> </kendo-timepicker>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6"></div>
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="PickUpTo">{{"PickUp To" | localize}} <span class="text-danger">*</span></label>
                                                                <kendo-timepicker [(ngModel)]="pickUpTo" name="pickUpTo" #pickUpToCtrl="ngModel" class="form-control pickUpTo" #pickUpToCtrl="ngModel" placeholder="Enter Pickup To Time" required> </kendo-timepicker>
                                                                </div>
                                                            </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">{{"PickupAddressDetail" | 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="pickupAddress1Input">{{"Address1" | localize}} <span class="text-danger">*</span></label>
                                                                        <input id="pickupAddress1Input" #pickupAddress1Input="ngModel" type="text" name="pickupAddress1Input" class="form-control"  
                                                                        [(ngModel)]="createInput.pickUpAddressLine1" required>
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                    <div class="form-group">
                                                                        <label for="pickupAddress2Input">{{"Address2" | localize}} </label>
                                                                        <input id="pickupAddress2Input" #pickupAddress2Input="ngModel" type="text" name="pickupAddress2Input" class="form-control"  
                                                                        [(ngModel)]="createInput.pickUpAddressLine2">
                                                                        <!-- <validation-messages [formCtrl]="pickupAddress2Input"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                <div class="form-group">
                                                                        <label for="pickupPostalInput">{{"PostalCode" | localize}}<span class="text-danger">*</span></label>
                                                                        <select class="form-control kt-select2" style="width:100%" required [(ngModel)]="pickuppostalId" name="pickupPostalInput"  #pickupPostalInput="ngModel" id="pickupPostalInput" >
                                                                            <option *ngFor="let postal of filteredPostal"  [(value)]="postal.id" >
                                                                                {{postal.value}}
                                                                            </option>
                                                                        </select>
                                                                        <!-- <validation-messages [formCtrl]="pickupPostalInput"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                    <div class="form-group" [ngClass]="(pickupFilterChange) ? 'active' : 'inactive' ">
                                                                            <label for="pickupCountryInput">{{"Country" | localize}} <span class="text-danger">*</span></label>
                                                                            <select  class="form-control kt-select2" style="width:100%"  name="pickupCountryInput" id="pickupCountryInput" >
                                                                                    <!-- [(ngModel)]="pickupcountryId"
                                                                                    #pickupCountryInput="ngModel" required -->
                                                                                <option *ngFor="let country of filteredCountries" [(value)]="country.country">
                                                                                    {{country.country}}
                                                                                    
                                                                                </option>
                                                                            </select>
                                                                            <!-- <validation-messages [formCtrl]="pickupCountryInput"></validation-messages> -->
                                                                        </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                    <div class="form-group" [ngClass]="(pickupFilterChange) ? 'active' : 'inactive' ">
                                                                        <label for="pickupStateInput">{{"State" | localize}}<span class="text-danger">*</span></label>
                                                                        <select class="form-control kt-select2" style="width:100%"  name="pickupStateInput" id="pickupStateInput"  >
                                                                                <!-- [(ngModel)]="pickupstateId"
                                                                                #pickupStateInput="ngModel" -->
                                                                            <option *ngFor="let state of filteredStates"  [(value)]="state.state">
                                                                                {{state.state}}
                                                                            </option>
                                                                        </select>
                                                                        <!-- <validation-messages [formCtrl]="pickupStateInput"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                    <div class="form-group" [ngClass]="(pickupFilterChange) ? 'active' : 'inactive' ">
                                                                        <label for="pickupCityInput">{{"City" | localize}} <span class="text-danger">*</span></label>
                                                                        <select class="form-control kt-select2" style="width:100%"  name="pickupStateInput" id="pickupCityInput" >
                                                                                <option *ngFor="let city of filteredCities"  [(value)]="city.city">
                                                                                    {{city.city}}
                                                                                </option>
                                                                            </select>
                                                                    </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">
                                                <div class="kt-heading kt-heading--md">{{"DestinationContactDetail" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                        <div class="kt-wizard-v2__form">
                                                                <div class="row">
                                                                    <div class="col-xl-6">
                                                                        <div class="form-group">
                                                                            <label for="destinationFirstNameInput">{{"FirstName" | localize}} <span class="text-danger">*</span></label>
                                                                            <input id="destinationFirstNameInput" #destinationFirstNameInput="ngModel" type="text" name="destinationFirstNameInput" class="form-control"  
                                                                            [(ngModel)]="createInput.destinationFirstName" required>
                                                                            <!-- <validation-messages [formCtrl]="destinationFirstNameInput"></validation-messages> -->
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-6">
                                                                            <div class="form-group">
                                                                                <label for="destinationLastNameInput">{{"LastName" | localize}} <span class="text-danger">*</span></label>
                                                                                <input id="destinationLastNameInput" #destinationLastNameInput="ngModel" type="text" name="destinationLastNameInput" class="form-control"  
                                                                                [(ngModel)]="createInput.destinationLastName" required>
                                                                                <!-- <validation-messages [formCtrl]="destinationLastNameInput"></validation-messages> -->
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-6">
                                                                        <div class="form-group">
                                                                            <label for="destinationEmailInput">{{"Email" | localize}} <span class="text-danger">*</span></label>
                                                                            <input id="destinationEmailInput" #destinationEmailInput="ngModel" email type="email" name="destinationEmailInput" class="form-control"  
                                                                            [(ngModel)]="createInput.destinationEmail" required>
                                                                            <!-- <validation-messages [formCtrl]="destinationEmailInput"></validation-messages> -->
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-6">
                                                                        <div class="form-group">
                                                                            <label for="destinationPhoneInput">{{"Phone" | localize}} </label>
                                                                            <input id="destinationPhoneInput" #destinationPhoneInput="ngModel" type="number" name="destinationPhoneInput" class="form-control"  
                                                                            [(ngModel)]="createInput.destinationPhone">
                                                                            <!-- <validation-messages [formCtrl]="destinationPhoneInput"></validation-messages> -->
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-6">
                                                                            <div class="form-group ">
                                                                                    <label for="DeliveryEta">{{"DeliveryEta" | localize}} <span class="text-danger">*</span></label>
                                                                                    <input name="DeliveryEta"
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="DeliveryEta"
                                                                                    bsDatepicker
                                                                                    readonly="readonly"
                                                                                    [(ngModel)]="deliveryEta"
                                                                                    #DeliveryEta="ngModel"
                                                                                    required/>
                                                                                    <!-- <validation-messages [formCtrl]="DeliveryEta"></validation-messages> -->
                                                                            </div>
                                                                    </div>
                                                                    <div class="col-xl-6">
                                                                            <div class="form-group ">
                                                                                    <label for="DeliveryFrom">{{"Delivery From" | localize}} <span class="text-danger">*</span></label>
                                                                                    <kendo-timepicker [(ngModel)]="deliveryFrom" name="deliveryFrom" #deliveryFromCtrl="ngModel" class="form-control deliveryFrom" placeholder="Enter Delivery From Time" required> </kendo-timepicker>
                                                                                    <!-- <div class="col-lg-10 col-md-9 col-sm-8"> -->
                                                                                        <!-- <timepicker [(ngModel)]="deliveryFrom" 
                                                                                        name="deliveryFrom"
                                                                                        [showSpinners]="true" 
                                                                                        #deliveryFromCtrl="ngModel"></timepicker> -->
                                                                                    <!-- </div> -->
                                                                                    <!-- <validation-messages [formCtrl]="deliveryFromCtrl"></validation-messages> -->
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-6">
                                                                    </div>
                                                                    <div class="col-xl-6">
                                                                            <div class="form-group ">
                                                                            <label for="DeliveryTo">{{"Delivery To" | localize}} <span class="text-danger">*</span></label>
                                                                            <kendo-timepicker [(ngModel)]="deliveryTo" name="deliveryTo" #deliveryToCtrl="ngModel" class="form-control deliveryTo" placeholder="Enter Delivery To Time" required> </kendo-timepicker>
                                                                            <!-- <div class="col-lg-10 col-md-9 col-sm-8"> -->
                                                                                <!-- <timepicker [(ngModel)]="deliveryTo"
                                                                                name="deliveryTo"
                                                                                [showSpinners]="true" 
                                                                                #deliveryToCtrl="ngModel"></timepicker> -->
                                                                            <!-- </div> -->
                                                                            <!-- <validation-messages [formCtrl]="deliveryToCtrl"></validation-messages> -->
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                        </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 4-->
                        
                                            <!--begin: Form Wizard Step 5-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                <div class="kt-heading kt-heading--md">{{"DestinationAddressDetail" | 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="destinationAddress1Input">{{"Address1" | localize}} <span class="text-danger">*</span></label>
                                                                            <input id="destinationAddress1Input" #destinationAddress1Input="ngModel" type="text" name="destinationAddress1Input" class="form-control"  
                                                                            [(ngModel)]="createInput.destinationAddressLine1" required>
                                                                            <!-- <validation-messages [formCtrl]="destinationAddress1Input"></validation-messages> -->
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-xl-12">
                                                                        <div class="form-group">
                                                                            <label for="destinationAddress2Input">{{"Address2" | localize}} </label>
                                                                            <input id="destinationAddress2Input" #destinationAddress2Input="ngModel" type="text" name="destinationAddress2Input" class="form-control"  
                                                                            [(ngModel)]="createInput.destinationAddressLine2" >
                                                                            <!-- <validation-messages [formCtrl]="destinationAddress2Input"></validation-messages> -->
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-xl-6">
                                                                        <div class="form-group">
                                                                                <label for="destinationPostalInput">{{"Postal Code" | localize}} <span class="text-danger">*</span></label>
                                                                                <select class="form-control kt-select2" style="width:100%" [(ngModel)]="destinationpostalId" name="destinationPostalInput" id="destinationPostalInput" #destinationPostalInput="ngModel" required>
                                                                                    <option *ngFor="let postal of filteredPostal"  [(value)]="postal.id" >
                                                                                        {{postal.value}}
                                                                                    </option>
                                                                                </select>
                                                                                <!-- <validation-messages [formCtrl]="destinationPostalInput"></validation-messages> -->
                                                                            </div>
                                                                        
                                                                </div>
                                                                <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(destinationFilterChange) ? 'active' : 'inactive' ">
                                                                                <label for="destinationCountryInput">{{"Country" | localize}} <span class="text-danger">*</span></label>
                                                                                <select class="form-control kt-select2" style="width:100%"  name="destinationCountryInput" id="destinationCountryInput"  >
                                                                                        <!-- [(ngModel)]="destinationcountryId"
                                                                                        #destinationCountryInput="ngModel" -->
                                                                                    <option *ngFor="let country of filteredDestinationCountries"  [(value)]="country.country">
                                                                                        {{country.country}}
                                                                                    </option>
                                                                                </select>
                                                                                <!-- <validation-messages [formCtrl]="destinationCountryInput"></validation-messages> -->
                                                                            </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(destinationFilterChange) ? 'active' : 'inactive' ">
                                                                            <label for="destinationStateInput">{{"State" | localize}} <span class="text-danger">*</span></label>
                                                                            <select class="form-control kt-select2" style="width:100%"  name="destinationStateInput" id="destinationStateInput"   >
                                                                                    <!-- [(ngModel)]="destinationstateId"
                                                                                    #destinationStateInput="ngModel" -->
                                                                                <option *ngFor="let state of filteredDestinationStates"  [(value)]="state.state">
                                                                                    {{state.state}}
                                                                                </option>
                                                                            </select>
                                                                            <!-- <validation-messages [formCtrl]="destinationStateInput"></validation-messages> -->
                                                                        </div>
                                                                </div>
                                                                <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(destinationFilterChange) ? 'active' : 'inactive' ">
                                                                            <label for="destinationCityInput">{{"City" | localize}} <span class="text-danger">*</span></label>
                                                                            <select class="form-control kt-select2" style="width:100%"  name="destinationCityInput" id="destinationCityInput"  >
                                                                                    <!-- [(ngModel)]="destinationcityId"
                                                                                    #destinationCityInput="ngModel" -->
                                                                                <option *ngFor="let city of filteredDestinationCities"  [(value)]="city.city">
                                                                                    {{city.city}}
                                                                                </option>
                                                                            </select>
                                                                        </div> 
                                                                </div>
                                                            </div>
                                                        </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 5-->
                        
                                            <!--begin: Form Wizard Step 6-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                <div class="kt-heading kt-heading--md">{{"Packages" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                    <div class="kt-wizard-v2__form">
                                                        <table  class="table table-bordered table-striped table-condensed flip-content" id="addedPackages">
                                                            <thead>
                                                                <tr>
                                                                    <th style="width:45%">{{"Package" | localize}}</th>
                                                                    <th style="width:45%">{{"Quantity" | localize}}</th>
                                                                    <th style="width:10%"></th>  
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr *ngFor="let package of packageList">
                                                                    <td>{{package.packageName +" ("}} {{package.price.toFixed(2) +") "}} </td>
                                                                    <td>{{package.quantity}}</td> 
                                                                    <td (click)="removePackageToList(package)" align="center">
                                                                        <span class="flaticon-delete" style="font-size: 24px; color:red;"></span>
                                                                     </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <select class="form-control kt-select2" style="width:100%" id="packagess" name="addPackage"  required >
                                                                            <option *ngFor="let package of filteredPackage"  [(value)]="package.package.id" >{{package.package.name}}</option>
                                                                        </select>
                                                                        <div *ngIf="packageNameMessageError"><span class="text-danger">Please select package name</span></div>     
                                                                    </td>
                                                                    <td>
                                                                        <input type="number" name="packageQuantity" class="form-control" [(ngModel)]="packageQuantity"/>
                                                                        <div *ngIf="packageQtyMessageError"><span class="text-danger">Please enter package quantity</span></div>
                                                                    </td> 
                                                                    <td (click)="addPackageToList()" align="center">
                                                                        <span class="flaticon-plus" style="font-size: 24px;"></span>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 6-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="pending">
                                                    <div class="kt-heading kt-heading--md">{{"Tags" | localize}}</div>
                                                    <div class="kt-form__section kt-form__section--first">
                                                        <div class="kt-wizard-v2__form"> 
                                                            <table  class="table table-bordered table-striped table-condensed flip-content" id="addedTag">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width:45%">{{"TagType" | localize}}</th>
                                                                        <th style="width:45%">{{"Value" | localize}}</th>
                                                                        <th style="width:10%"></th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr *ngFor="let tag of tagList">
                                                                        <td>{{tag.tagTypeName}}</td>
                                                                        <td>{{tag.value}} </td>
                                                                        <td (click)="removeTag(tag)" align="center">
                                                                            <span class="flaticon-delete" style="font-size: 24px; color:red;"></span>
                                                                        </td>
                                                                    </tr>
                                                                    <tr >
                                                                        <td>
                                                                            <select class="form-control kt-select2" style="width:100%" id="tagType"  name="tagType">
                                                                                <option *ngFor="let tagType of filteredTagType"  [(value)]="tagType.id" >
                                                                                    {{tagType.name}}
                                                                                </option>
                                                                            </select>
                                                                            <span class="text-danger" *ngIf="tagNameMessageError">Please select tag type</span>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" class="form-control" id="tagValue">
                                                                            <div *ngIf="tagValueMessageError"><span class="text-danger">Please enter tag value</span></div>
                                                                        </td>
                                                                        <td (click)="addTag()" align="center">
                                                                            <span class="flaticon-plus" style="font-size: 24px;"></span>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
    
                                            <!--begin: Form Wizard Step 7-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                <div class="kt-heading kt-heading--md">{{"Notes" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                    <div class="kt-wizard-v2__form">
                                                        <div class="form-group">
                                                            <label for="NoteInput">{{"Note" | localize}} *</label>
                                                            <textarea class="form-control" [(ngModel)]="noteInput" name="NoteInput" value="" id="noteInput"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 7-->
    
                                            <!--begin: Form Wizard Step 8-->
                                            <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                <div class="kt-heading kt-heading--md">Review your Details and Submit</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">
                                                                    Tag Detail
                                                                    </div>
                                                                    <div class="kt-wizard-v2__review-content">
                                                                        <table  class="table table-bordered table-striped table-condensed flip-content">
                                                                             <thead>
                                                                                <tr>
                                                                                    <th style="width:50%">{{"TagType" | localize}}</th>
                                                                                    <th style="width:50%">{{"Value" | localize}}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <tr *ngFor="let tag of tagList">
                                                                                    <td>{{tag.tagTypeName}}</td>
                                                                                    <td>{{tag.value}} </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                                Pickup Contact Detail
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                {{"Name" | localize}}: {{ createInput.pickUpFirstName }} {{ createInput.pickUpLastName }}<br>
                                                                {{"EmailAddress" | localize}}: {{ createInput.pickUpEmail }}<br>
                                                                <span *ngIf="createInput.pickUpPhone">{{"PhoneNumber" | localize}}: {{ createInput.pickUpPhone }}<br></span>
                                                                {{"PickupDate" | localize}}: {{ pickupEta | date }}<br>
                                                                {{"PickupTime" | localize}}: {{ pickUpFrom | date:'shortTime' }} - {{ pickUpTo | date:'shortTime' }}
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                                Pickup Address Detail
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                {{"AddressLine1" | localize}}: {{ createInput.pickUpAddressLine1}}<br>
                                                                <span *ngIf="createInput.pickUpAddressLine2">{{"AddressLine2" | localize}}: {{ createInput.pickUpAddressLine2 }}<br></span>
                                                                {{"Country" | localize}}: <span id="selectedPickupCountry">{{ selectedPickupCountry }}</span><br>
                                                                {{"PostalCode" | localize}}: <span id="selectedPickupPostalCode">{{ selectedPickupPostalCode }}</span>
                                                                {{"State" | localize}}: <span id="selectedPickupState">{{ selectedPickupState }}</span>
                                                                {{"City" | localize}}: <span id="selectedPickupCity">{{ selectedPickupCity }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                                Destination Contact Detail
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                            {{"Name" | localize}}: {{ createInput.destinationFirstName }} {{ createInput.destinationLastName }}<br>
                                                            {{"EmailAddress" | localize}}: {{ createInput.destinationEmail }}<br>
                                                            <span *ngIf="createInput.destinationPhone">{{"PhoneNumber" | localize}}: {{ createInput.destinationPhone }}<br></span>
                                                            {{"DeliveryDate" | localize}}: {{ deliveryEta | date }}<br>
                                                            {{"DeliveryTime" | localize}}: {{ deliveryFrom | date:'shortTime' }} - {{ deliveryTo | date:'shortTime' }}
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                            Destination Address Detail
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                {{"AddressLine1" | localize}}: {{ createInput.destinationAddressLine1 }}<br>
                                                                <span *ngIf="createInput.destinationAddressLine2">{{"AddressLine2" | localize}}: {{ createInput.destinationAddressLine2 }}<br></span>
                                                                {{"Country" | localize}}: <span id="selectedDestinationCountry">{{ selectedDestinationCountry }}</span><br>
                                                                {{"PostalCode" | localize}}: <span id="selectedDestinationPostalCode">{{ selectedDestinationPostalCode }}</span>
                                                                {{"State" | localize}}:<span id="selectedDestinationState">{{ selectedDestinationState }}</span>
                                                                {{"City" | localize}}: <span id="selectedDestinationCity">{{ selectedDestinationCity }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                            Packages
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                <table  class="table table-bordered table-striped table-condensed flip-content" id="addedPackages">
                                                                     <thead>
                                                                        <tr>
                                                                            <th style="width:50%">{{"Package" | localize}}</th>
                                                                            <th style="width:50%">{{"Quantity" | localize}}</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr *ngFor="let package of packageList">
                                                                            <td>{{package.packageName +" "}} {{package.price.toFixed(2)}}</td>
                                                                            <td>{{package.quantity}}</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="kt-wizard-v2__review-item">
                                                            <div class="kt-wizard-v2__review-title">
                                                            Note
                                                            </div>
                                                            <div class="kt-wizard-v2__review-content">
                                                                {{ noteInput }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 8-->
                        
                                            <!--begin: Form Actions -->
                                            <div class="kt-form__actions">
                                                <button class="btn btn-secondary btn-md  btn-elevate btn-pill" data-ktwizard-type="action-prev">
                                                    {{'Previous' | localize}}
                                                </button>
                                                <button type="submit" class="btn btn-brand btn-md  btn-elevate btn-pill" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"  data-ktwizard-type="action-submit">
                                                    <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
                                                </button>
        <!--                                    
                                                <button class="btn btn-success btn-md  btn-elevate btn-pill btn-elevate-air" data-ktwizard-type="action-submit">
                                                    Submit
                                                </button> -->
                                                <button class="btn btn-brand btn-md  btn-elevate btn-pill" data-ktwizard-type="action-next" id="nextStep">
                                                    {{'NextStep' | localize}}
                                                </button>
                                            </div>
                                            <!--end: Form Actions -->
                                        </form>
                                        <!--end: Form Wizard Form-->
                                    </div>
                                </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    