<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>{{"ClinicManagement" | localize}}</span>
                            
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <!-- <span class="kt-subheader__desc">
                            {{"CreateNewClinic" | 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 kt-wizard-v2__nav-items--clickable">
                                                        <!--doc: Replace A tag with SPAN tag to disable the step link click -->
                                                        <div 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-globe"></i>
                                                                </div>
                                                                <div class="kt-wizard-v2__nav-label">
                                                                    <div class="kt-wizard-v2__nav-label-title">
                                                                        {{"ClinicDetails" | localize}}
                                                                    </div>
                                                                    <div class="kt-wizard-v2__nav-label-desc">
                                                                        {{"SetupClinicDetails" | localize}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div 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-bus-stop"></i>
                                                                </div>
                                                                <div class="kt-wizard-v2__nav-label">
                                                                    <div class="kt-wizard-v2__nav-label-title">
                                                                        {{"SetupLocation" | localize}}
                                                                    </div>
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                            <div class="kt-wizard-v2__nav-body">
                                                                <div class="kt-wizard-v2__nav-icon">
                                                                    <i class="flaticon-clipboard"></i>
                                                                </div>
                                                                <div class="kt-wizard-v2__nav-label">
                                                                    <div class="kt-wizard-v2__nav-label-title">
                                                                        {{"Summary" | localize}}
                                                                    </div>
                                                                    <div class="kt-wizard-v2__nav-label-desc">
                                                                        {{"ReviewAndSubmit" | localize}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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" #clinicForm="ngForm" (ngSubmit)="save()" novalidate="novalidate">
                                                    <!--begin: Form Wizard Step 1-->
                                                    <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
                                                        <div class="kt-heading kt-heading--md">Enter Clinic Details</div>
                                                        <div class="kt-form__section kt-form__section--first">
                                                            <div class="kt-wizard-v2__form">
                                                                                                <div class="form-group">
                                                                                                    <label for="accountNumber">{{l("AccountNo")}}. <span class="text-danger">*</span></label>
                                                                                                    <input type="text" id="accountNumber" class="form-control" [(ngModel)]="clinic.accountNumber" name="accountNumber"    required/>
                                                                                                </div>

                                                                                                <div class="form-group">
                                                                                                    <label for="companyName">{{l("ClinicName")}} <span class="text-danger">*</span></label>
                                                                                                    <input type="text" id="companyName" class="form-control" [(ngModel)]="clinic.companyName" name="companyName"    required/>
                                                                                                </div>
                                                                                                <div class="form-group">
                                                                                                    <label for="email">{{l("Email")}}</label>
                                                                                                    <input type="email" id="email" class="form-control" [(ngModel)]="clinic.email" name="email"/>
                                                                                                </div>

                                                                                                <div class="form-group">
                                                                                                    <label for="Clinic_ClinicNotes">{{l("ClinicNotes")}}</label>
                                                                                                    <input type="text" id="Clinic_ClinicNotes" class="form-control" [(ngModel)]="clinic.clinicNotes" name="ClinicNotes"    />
                                                                                                </div>
                                                                                    
                                                                                                <br/><div class="m-checkbox-list">
                                                                                                    <label for="Clinic_ClinicNotesVisibleToDriver" class="kt-checkbox">
                                                                                                        <input id="Clinic_ClinicNotesVisibleToDriver" type="checkbox" name="ClinicNotesVisibleToDriver" [(ngModel)]="clinic.clinicNotesVisibleToDriver"> 
                                                                                                        {{l("ClinicNotesVisibleToDriver")}}
                                                                                                        <span></span>
                                                                                                    </label>
                                                                                                </div>
                                                                                    
                                                                                                <div class="form-group">
                                                                                                    <label for="Clinic_BillingNotes">{{l("BillingNotes")}}</label>
                                                                                                    <input type="text" id="Clinic_BillingNotes" class="form-control" [(ngModel)]="clinic.billingNotes" name="BillingNotes"    />
                                                                                                </div>



                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end: Form Wizard Step 1-->

                                                    <!--begin: Form Wizard Step 2-->
                                                    <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                        <div class="kt-heading kt-heading--md">{{l("SetUpCurrentLocation")}}</div>
                                                        <div class="kt-form__section kt-form__section--first">
                                                            <div class="kt-wizard-v2__form">
                                                                <div class="form-group">
                                                                    <label for="address1Input">{{"AddressLine1" | localize}}  <span class="text-danger">*</span></label>
                                                                    <input id="address1Input" style="border: 1px solid #a6a6a6;" #address1Input="ngModel" type="text" name="Address1" class="form-control"  [(ngModel)]="address.addressLine1" required>
                                                                    <!-- <validation-messages [formCtrl]="address1Input"></validation-messages> -->
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="address2Input">{{"AddressLine2" | localize}} </label>
                                                                    <input id="address2Input" style="border: 1px solid #a6a6a6;" type="text" name="Address2" class="form-control"  [(ngModel)]="address.addressLine2" >
                                                                </div>
                                                                <div class="row">
                                                                        <div class="col-xl-6">
                                                                                <div class="form-group">
                                                                                    <label for="PostalCode">{{"PostalCode" | localize}} <span class="text-danger">*</span></label>
                                                                                    <br>
                                                                                    <select id = "postalSelectInput" data-placeholder="Select Postal Code" style="width:100%;" class="form-control kt-select2" name="postalSelectInput">
                                                                                        <option value="" disabled selected>Select Postal Code</option>
                                                                                        <option *ngFor="let postal of filteredPostal" value= "{{postal.id}}"  [selected]="postal.id == selectedPostalCodeId">
                                                                                            {{postal.value}}
                                                                                        </option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                    <div class="col-xl-6" >
                                                                        
                                                                        <div class="form-group" [ngClass]="(filterChange || selectedPostalCodeId!=null) ? 'active' : 'inactive'">
                                                                            <label for="Country">{{"Country" | localize}} <span class="text-danger">*</span></label>
                                                                            <br>
                                                                            <select id = "countrySelectInput" data-placeholder="Select Country" style="width:100%;" class="form-control kt-select2" name="countrySelectInput">
                                                                                    <option *ngFor="let country of filteredCountries" value= "{{country.country}}" [selected]="country.country == selectedCountry">
                                                                                    {{country.country}}
                                                                                    </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(filterChange || selectedPostalCodeId!=null) ? 'active' : 'inactive'">
                                                                            <label for="States">{{"State" | localize}} <span class="text-danger">*</span></label>
                                                                            <br>
                                                                            <select id = "stateSelectInput" data-placeholder="Select State" style="width:100%;" class="form-control kt-select2" name="stateSelectInput">
                                                                                <option *ngFor="let state of filteredStates" value="{{state.state}}" [selected]="state.state == selectedState">
                                                                                    {{state.state}}
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(filterChange || selectedPostalCodeId!=null) ? 'active' : 'inactive'">
                                                                            <label for="Cities">{{"City" | localize}} <span class="text-danger">*</span></label>
                                                                            <br>
                                                                            <select id = "citySelectInput" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput">
                                                                                <option *ngFor="let city of filteredCities" value= "{{city.city}}" [selected]="city.city == selectedCity">
                                                                                    {{city.city}}
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="AddressType">{{"AddressType" | localize}} </label>
                                                                    <br>
                                                                    <select id = "addressTypeSelectInput" data-placeholder="Select Address Type" style="width:100%;" class="form-control kt-select2" name="addressTypeSelectInput">
                                                                        <option value="null">NONE</option>
                                                                        <option *ngFor="let addressType of filteredAddressType" value= "{{addressType.id}}"  [selected]="addressType.id ==  address.addressTypeId">
                                                                            {{addressType.name}}
                                                                        </option>
                                                                    </select>
                                                                </div>      

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end: Form Wizard Step 2-->

                                                    

                                                    

                                                    

                                                    <!--begin: Form Wizard Step 6-->
                                                    <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                        <div class="kt-heading kt-heading--md">{{ "ReviewAndSubmit" | localize}}</div>
                                                        <div class="kt-form__section kt-form__section--first">
                                                            <div class="kt-wizard-v2__review">
                                                                <div class="kt-wizard-v2__review-item">
                                                                    <div class="kt-wizard-v2__review-title">
                                                                        {{ "AccountDetails" | localize}}
                                                                    </div>
                                                                    <div class="kt-wizard-v2__review-content">
                                                                        {{ clinic.companyName }}<br>
                                                                        {{ clinic.accountNumber }}<br>
                                                                        {{l("Email")}}: {{ clinic.email }}<br>
                                                                        {{l("ClinicNotes")}}: {{ clinic.clinicNotes }}<br>
                                                                        {{l("ClinicNotesVisibleToDriver")}}: <span id="visibleToDriver"></span><br> 
                                                                        {{l("BillingNotes")}}: {{ clinic.billingNotes }}
                                                                    </div>
                                                                </div>
                                                                <div class="kt-wizard-v2__review-item">
                                                                    <div class="kt-wizard-v2__review-title">
                                                                        {{"AddressInformation" | localize}}
                                                                    </div>
                                                                    <div class="kt-wizard-v2__review-content">
                                                                    {{ address.addressLine1 }}<br>
                                                                    {{ address.addressLine2 }}<br>
                                                                    <span id="selectedCity">{{ selectedCity }}</span><span> , </span>
                                                                    <span id="selectedPostalCode">{{ selectedPostalCode }}</span><span> , </span>
                                                                    <span id="selectedState">{{ selectedState }}</span><span> , </span>
                                                                    <span id="selectedCountry">{{ selectedCountry }}</span><br />
                                                                    <span id="selectedAddressType">{{ selectedAddressType }}</span>
                                                                    </div>
                                                                </div>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end: Form Wizard Step 6-->

                                                    <!--begin: Form Actions -->
                                                    <div class="kt-form__actions">
                                                        <button class="btn btn-secondary btn-md btn-pill" data-ktwizard-type="action-prev">
                                                            {{l("Previous")}}
                                                        </button>
                                                        <button class="btn btn-brand btn-md  btn-elevate btn-pill" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" id='submit' data-ktwizard-type="action-submit">
                                                            <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
                                                        </button>
                                                        <button class="btn btn-brand btn-md btn-pill" data-ktwizard-type="action-next">
                                                            {{l("NextStep")}}
                                                        </button>
                                                    </div>
                                                    <!--end: Form Actions -->
                                                </form>
                                                <!--end: Form Wizard Form-->
                                            </div>
                                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
