<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>{{"OrderUpdate" | 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-layer"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'Details' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                        </div>
                                                    </div>
                                                </div>
                                            </a> -->
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="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="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" (ngSubmit)="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">{{"EnterOrderDetail" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">

                                                    <div class="form-group">
                                                        <label for="Location">{{"Location" | localize}} *</label>
                                                        <select class="form-control kt-select2" style="width:100%" id="location" [(ngModel)]="locationFilter.id" name="location"  #location="ngModel" >
                                                            <option *ngFor="let location of filteredLocation" [selected]="location.id === locationFilter.id" [(value)]="location.id" >
                                                                {{location.name}}
                                                            </option>
                                                        </select>
                                                        <validation-messages [formCtrl]="location"></validation-messages>
                                                    </div>

                                        
                                                    <div class="form-group">
                                                        <label for="TagType">{{"TagType" | localize}} *</label>
                                                        <select class="form-control kt-select2" style="width:100%" id="TagType" [(ngModel)]="tagTypeFilter.id" name="tagtype"  #tagtype="ngModel" >
                                                            <option *ngFor="let tagtype of filteredTagType"  [(value)]="tagtype.id"  [selected]="tagtype.id === tagTypeFilter.id">
                                                                {{tagtype.name}}
                                                            </option>
                                                        </select>
                                                        <validation-messages [formCtrl]="tagtype"></validation-messages>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="Tag">{{"Tag" | localize}} *</label>
                                                        <input id="Tag" #tagInput="ngModel" type="text" name="Tag" class="form-control" [(ngModel)]="tag.name" required/>
                                                        <validation-messages [formCtrl]="tagInput"></validation-messages>
                                                    </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" 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}} *</label>
                                                                    <input id="pickupFirstNameInput" #pickupFirstNameInput="ngModel" type="text" name="pickupFirstNameInput" class="form-control"  
                                                                    [(ngModel)]="pickupContactInput.firstName" required>
                                                                    <validation-messages [formCtrl]="pickupFirstNameInput"></validation-messages>
                                                                </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupLastNameInput">{{"LastName" | localize}} *</label>
                                                                    <input id="pickupLastNameInput" #pickupLastNameInput="ngModel" type="text" name="pickupLastNameInput" class="form-control"  
                                                                    [(ngModel)]="pickupContactInput.lastName" required>
                                                                    <validation-messages [formCtrl]="pickupLastNameInput"></validation-messages>
                                                                </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupEmailInput">{{"Email" | localize}} *</label>
                                                                    <input id="pickupEmailInput" #pickupEmailInput="ngModel" type="email" name="pickupEmailInput" class="form-control"  
                                                                    [(ngModel)]="pickupEmail" email required>
                                                                    <validation-messages [formCtrl]="pickupEmailInput"></validation-messages>
                                                                </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupPhoneInput">{{"Phone" | localize}} *</label>
                                                                    <input id="pickupPhoneInput" #pickupPhoneInput="ngModel" type="text" name="pickupPhoneInput" class="form-control"  
                                                                    [(ngModel)]="pickupPhone" required>
                                                                    <validation-messages [formCtrl]="pickupPhoneInput"></validation-messages>
                                                                </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <!-- <div class="input-group pull-right" id="kt_daterangepicker_5">
                                                                                    <input type="text" class="form-control" readonly="" placeholder="Select date range">
                                                                                    <div class="input-group-append">
                                                                                        <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
                                                                                    </div>
                                                            </div> -->
                                                            <div class="form-group">
                                                                        <label for="PickupEta">{{"PickupEta" | localize}} *</label>
                                                                        <input name="PickupEta"
                                                                        type="text"
                                                                        class="form-control"
                                                                        id="PickupEta"
                                                                        bsDatepicker
                                                                        [(ngModel)]="pickupEta"
                                                                        readonly="readonly"
                                                                        #PickupEta="ngModel"
                                                                        required/>
                                                                        <validation-messages [formCtrl]="PickupEta"></validation-messages>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="PickUpFrom">{{"PickUp From" | localize}} *</label>
                                                                <kendo-timepicker name="pickUpFrom" [(ngModel)]="pickUpFrom" #pickUpFromCtrl="ngModel" class="form-control pickUpFrom" #pickUpFromCtrl="ngModel" placeholder="Enter Pickup From Time"> </kendo-timepicker>
                                                                <!-- <div class="input-group timepicker">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text">
                                                                            <i class="la la-clock-o"></i>
                                                                        </span>
                                                                    </div>
                                                                    <input name="pickUpFrom" [(ngModel)]="pickUpFrom" #pickUpFromCtrl="ngModel" class="form-control pickUpFrom"  id="kt_timepicker_3" readonly="readonly" placeholder="Select time" type="text">
                                                                </div> -->
                                                                
                                                                        <!-- <div class="col-lg-10 col-md-9 col-sm-8">
                                                                            <timepicker 
                                                                            name="pickUpFrom"
                                                                            [(ngModel)]="pickUpFrom" 
                                                                            [showSpinners]="true" 
                                                                            #pickUpFromCtrl="ngModel"></timepicker>
                                                                        </div> -->
                                                                <validation-messages [formCtrl]="pickUpFromCtrl"></validation-messages>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6"></div>
                                                        <div class="col-xl-6">
                                                            <label for="PickUpTo">{{"PickUp To" | localize}} *</label>
                                                            <kendo-timepicker [(ngModel)]="pickUpTo" name="pickUpTo" #pickUpToCtrl="ngModel" class="form-control pickUpTo" #pickUpToCtrl="ngModel" placeholder="Enter Pickup To Time" required> </kendo-timepicker>
                                                            <!-- <div class="input-group timepicker">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text">
                                                                        <i class="la la-clock-o"></i>
                                                                    </span>
                                                                </div>
                                                                <input class="form-control pickUpTo" id="kt_timepicker_3" [(ngModel)]="pickUpTo" name="pickUpTo" #pickUpToCtrl="ngModel" readonly="" placeholder="Select time" type="text">
                                                            </div> -->
                                                           
                                                                <!-- <div class="col-lg-10 col-md-9 col-sm-8">
                                                                    <timepicker 
                                                                    [(ngModel)]="pickUpTo"
                                                                    name="pickUpTo"
                                                                    [showSpinners]="true" 
                                                                    #pickUpToCtrl="ngModel"></timepicker>
                                                                </div> -->
                                                            <validation-messages [formCtrl]="pickUpToCtrl"></validation-messages> 
                                                        </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}} *</label>
                                                                    <input id="pickupAddress1Input" #pickupAddress1Input="ngModel" type="text" name="pickupAddress1Input" class="form-control"  
                                                                    [(ngModel)]="pickupContactAddress.addressLine1" required>
                                                                    <validation-messages [formCtrl]="pickupAddress1Input"></validation-messages>
                                                                </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)]="pickupContactAddress.addressLine2" >
                                                                    <validation-messages [formCtrl]="pickupAddress2Input"></validation-messages>
                                                                </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="pickupCountryInput">{{"Country" | localize}} *</label>
                                                                <!-- <select  class="form-control kt-select2" style="width:100%" [(ngModel)]="pickupcountryId.id" name="pickupCountryInput" id="pickupCountryInput" #pickupCountryInput="ngModel" >
                                                                    <option *ngFor="let country of filteredCountries" [selected]="country.id === pickupcountryId.id" [(value)]="country.id">
                                                                        {{country.name}}
                                                                    </option>
                                                                </select>
                                                                <validation-messages [formCtrl]="pickupCountryInput"></validation-messages> -->
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupPostalInput">{{"PostalCode" | localize}} *</label>
                                                                    <!-- <select class="form-control kt-select2" style="width:100%" [(ngModel)]="pickuppostalId.id" name="pickupPostalInput"  #pickupPostalInput="ngModel" id="pickupPostalInput" >
                                                                        <option *ngFor="let postal of filteredPostal" [selected]="postal.id === pickuppostalId.id"   [(value)]="postal.id">
                                                                            {{postal.name}}
                                                                        </option>
                                                                    </select>
                                                                    <validation-messages [formCtrl]="pickupPostalInput"></validation-messages> -->
                                                                </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupStateInput">{{"State" | localize}} *</label>
                                                                    <!-- <select class="form-control kt-select2" style="width:100%" [(ngModel)]="pickupstateId.id" name="pickupStateInput" id="pickupStateInput"  #pickupStateInput="ngModel" >
                                                                        <option *ngFor="let state of filteredStates" [selected]="state.id === pickupstateId.id" [(value)]="state.id">
                                                                            {{state.name}}
                                                                        </option>
                                                                    </select>
                                                                    <validation-messages [formCtrl]="pickupStateInput"></validation-messages> -->
                                                                </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                                <div class="form-group">
                                                                    <label for="pickupCityInput">{{"City" | localize}} *</label>
                                                                    <!-- <select class="form-control kt-select2" style="width:100%" [(ngModel)]="pickupcityId.id" name="pickupCityInput" id="pickupCityInput"  #pickupCityInput="ngModel" >
                                                                        <option *ngFor="let city of filteredCities" [selected]="city.id === pickupcityId.id" [(value)]="city.id">
                                                                            {{city.name}}
                                                                        </option>
                                                                    </select>
                                                                    <validation-messages [formCtrl]="pickupCityInput"></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">
                                            <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}} *</label>
                                                                        <input id="destinationFirstNameInput" #destinationFirstNameInput="ngModel" type="text" name="destinationFirstNameInput" class="form-control"  
                                                                        [(ngModel)]="destinationContactInput.firstName" required>
                                                                        <validation-messages [formCtrl]="destinationFirstNameInput"></validation-messages>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6">
                                                                        <div class="form-group">
                                                                            <label for="destinationLastNameInput">{{"LastName" | localize}} *</label>
                                                                            <input id="destinationLastNameInput" #destinationLastNameInput="ngModel" type="text" name="destinationLastNameInput" class="form-control"  
                                                                            [(ngModel)]="destinationContactInput.lastName" 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}} *</label>
                                                                            <input id="destinationEmailInput" #destinationEmailInput="ngModel" type="email" name="destinationEmailInput" class="form-control"  
                                                                            [(ngModel)]="deliveryEmail" email 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="text" name="destinationPhoneInput" class="form-control"  
                                                                            [(ngModel)]="deliveryPhone">
                                                                            <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}} *</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}} *</label>
                                                                                <kendo-timepicker [(ngModel)]="deliveryFrom" name="deliveryFrom" #deliveryFromCtrl="ngModel" class="form-control deliveryFrom" placeholder="Enter Delivery From Time"> </kendo-timepicker>
                                                                                <!-- <div class="input-group timepicker">
                                                                                    <div class="input-group-prepend">
                                                                                        <span class="input-group-text">
                                                                                            <i class="la la-clock-o"></i>
                                                                                        </span>
                                                                                    </div>
                                                                                    <input [(ngModel)]="deliveryFrom" name="deliveryFrom" #deliveryFromCtrl="ngModel" class="form-control deliveryFrom"  id="kt_timepicker_3" readonly="" placeholder="Select time" type="text">
                                                                                </div>
                                                                                <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">
                                                                        <label for="DeliveryTo">{{"Delivery To" | localize}} *</label>
                                                                        <kendo-timepicker [(ngModel)]="deliveryTo" name="deliveryTo" #deliveryToCtrl="ngModel" class="form-control deliveryTo" placeholder="Enter Delivery To Time"> </kendo-timepicker>
                                                                        <!-- <div class="input-group timepicker">
                                                                            <div class="input-group-prepend">
                                                                                <span class="input-group-text">
                                                                                    <i class="la la-clock-o"></i>
                                                                                </span>
                                                                            </div>
                                                                            <input [(ngModel)]="deliveryTo" name="deliveryTo" #deliveryToCtrl="ngModel" class="form-control deliveryTo"  id="kt_timepicker_3" readonly="" placeholder="Select time" type="text">
                                                                        </div> -->
                                                                       
                                                                        <!-- <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>
                                        <!--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}} *</label>
                                                                        <input id="destinationAddress1Input" #destinationAddress1Input="ngModel" type="text" name="destinationAddress1Input" class="form-control"  
                                                                        [(ngModel)]="destinationContactAddress.addressLine1" 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)]="destinationContactAddress.addressLine2" >
                                                                        <validation-messages [formCtrl]="destinationAddress2Input"></validation-messages>
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="destinationCountryInput">{{"Country" | localize}} *</label>
                                                                        <!-- <select class="form-control kt-select2" style="width:100%" id="destinationCountryInput" [(ngModel)]="destinationcountryId.id" name="destinationCountryInput"  #destinationCountryInput="ngModel" >
                                                                            <option *ngFor="let country of filteredCountries"  [(value)]="country.id" [selected]="country.id === destinationcountryId.id">
                                                                                {{country.name}}
                                                                            </option>
                                                                        </select>
                                                                        <validation-messages [formCtrl]="destinationCountryInput"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="destinationPostalInput">{{"Postal Code" | localize}} *</label>
                                                                        <!-- <select class="form-control kt-select2" style="width:100%"  id="destinationPostalInput" [(ngModel)]="destinationpostalId.id" name="destinationPostalInput"  #destinationPostalInput="ngModel" >
                                                                            <option *ngFor="let postal of filteredPostal"  [(value)]="postal.id" [selected]="postal.id === destinationpostalId.id">
                                                                                {{postal.name}}
                                                                            </option>
                                                                        </select>
                                                                        <validation-messages [formCtrl]="destinationPostalInput"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="destinationStateInput">{{"State" | localize}} *</label>
                                                                        <!-- <select class="form-control kt-select2" style="width:100%"  id="destinationStateInput"  [(ngModel)]="destinationstateId.id" name="destinationStateInput"  #destinationStateInput="ngModel" >
                                                                            <option *ngFor="let state of filteredStates"  [(value)]="state.id" [selected]="state.id === destinationstateId.id">
                                                                                {{state.name}}
                                                                            </option>
                                                                        </select>
                                                                        <validation-messages [formCtrl]="destinationStateInput"></validation-messages> -->
                                                                    </div>
                                                            </div>
                                                            <div class="col-xl-6">
                                                                    <div class="form-group">
                                                                        <label for="destinationCityInput">{{"City" | localize}} *</label>
                                                                        <!-- <select class="form-control kt-select2" style="width:100%" id="destinationCityInput" [(ngModel)]="destinationcityId.id" name="destinationCityInput"  #destinationCityInput="ngModel" >
                                                                            <option *ngFor="let city of filteredCities"  [(value)]="city.id" [selected]="city.id === destinationcityId.id">
                                                                                {{city.name}}
                                                                            </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" id="addedPackages">
                                                        <thead>
                                                            <tr>
                                                                <th style="width:10%"></th>
                                                                <th style="width:45%">{{"Package" | localize}}</th>
                                                                <th style="width:45%">{{"Quantity" | localize}}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr *ngFor="let orderPackage of orderPackages">
                                                                <td>
                                                                    <button class="btn btn-secondary btn-sm  btn-elevate btn-pill" (click)="removePackage(orderPackage)">
                                                                        <i class="fa fa-times"></i>
                                                                    </button>
                                                                </td>
                                                                <td>{{orderPackage.package.name}}</td>
                                                                <td>{{orderPackage.quantity}}</td>
                                                            </tr>
                                                            <tr >
                                                                <td>
                                                                    <button type="button" class="btn btn-brand btn-sm  btn-elevate btn-pill" (click)="addPackages()">
                                                                        {{"Add" | localize}}
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <select class="form-control kt-select2" style="width:100%" id="packages" [(ngModel)]="packages" name="addPackage"  #packageCtrl="ngModel" >
                                                                        <option *ngFor="let package of filteredPackage"  [(value)]="package.id">
                                                                            {{package.name}}
                                                                        </option>
                                                                    </select>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="packageQuantity" class="form-control" [(ngModel)]="packageQuantity"/>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 6-->

                                        <!--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.content" 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">
                                                            Details
                                                        </div>
                                                        <div class="kt-wizard-v2__review-content">
                                                            {{"Location" | localize}}: <span id="selectedLocation">{{ selectedLocation }}</span><br>
                                                            {{"TagType" | localize}}: <span id="selectedTagType">{{ selectedTagType }}</span><br>
                                                            {{"Tag" | localize}}: {{ tag.name }}
                                                        </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}}: {{ pickupContactInput.firstName }} {{ pickupContactInput.lastName }}<br>
                                                            {{"EmailAddress" | localize}}: {{ pickupEmail.value }}<br>
                                                            <span *ngIf="pickupPhone.value">{{"PhoneNumber" | localize}}: {{ pickupPhone.value }}<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}}: {{ pickupContactAddress.addressLine1 }}<br>
                                                            <span *ngIf="pickupContactAddress.addressLine2">{{"AddressLine2" | localize}}: {{ pickupContactAddress.addressLine2 }}<br></span>
                                                            {{"Country" | localize}}: <span id="selectedPickupCountry">{{ selectedPickupCountry }}</span>
                                                            {{"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}}: {{ destinationContactInput.firstName }} {{ destinationContactInput.lastName }}<br>
                                                        {{"EmailAddress" | localize}}: {{ deliveryEmail.value }}<br>
                                                        <span *ngIf="deliveryPhone.value">{{"PhoneNumber" | localize}}: {{ deliveryPhone.value }}<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}}: {{ destinationContactAddress.addressLine1 }}<br>
                                                            <span *ngIf="destinationContactAddress.addressLine2">{{"AddressLine2" | localize}}: {{ destinationContactAddress.addressLine2 }}<br></span>
                                                             <span id="selectedDestinationCountry">{{ selectedDestinationCountry }}</span>
                                                             <span id="selectedDestinationPostalCode">{{ selectedDestinationPostalCode }}</span>
                                                            <span id="selectedDestinationState">{{ selectedDestinationState }}</span>
                                                             <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">
                                                            
                                                            <span *ngFor="let orderPackage of orderPackages">
                                                                    {{orderPackage.package.name}} {{orderPackage.quantity}}<br>
                                                            </span>
                                                            
                                                        </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.content }}
                                                        </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" [disabled]="!userForm.form.valid" [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">
                                                {{'NextStep' | localize}}
                                            </button>
                                        </div>
                                        <!--end: Form Actions -->
                                    </form>
                                    <!--end: Form Wizard Form-->
                                </div>
                            </div>
                </div>
            </div>
        </div>
    </div>
</div>
