<div *ngIf="object" class="fl-content fl-content-min-height">
  <div *ngIf="upgradeOptions.has_service_cycles_paid_in_advance && !agreedToRefundAdvancePayments">
    <p i18n>Amounts from service cycles paid in advance will be refunded to client credit if you upgrade.</p>
    <button [routerLink]="config.getPanelUrl('billing/services/', object.id)" mat-button i18n>Cancel</button>
    <button (click)="agreedToRefundAdvancePayments = !agreedToRefundAdvancePayments" color="primary"
            class="fl-margin-left-medium"
            mat-button i18n>Continue</button>
  </div>
  <div *ngIf="!upgradeOptions.has_service_cycles_paid_in_advance || agreedToRefundAdvancePayments">
    <div *ngIf="upgradeOptions.cycle_upgrades.length === 0 && upgradeOptions.upgrades.length === 0 &&
  upgradeOptions.configurable_options_upgrades.length === 0; else canBeModified" i18n>
      This service cannot be modified because it has no available upgrades.
    </div>
    <ng-template #canBeModified>
      <ng-container *ngIf="!confirmChanges; else confirmChangesContent">
        <form *ngIf="!upgradeInProgress"
              [formGroup]="changeOptionsForm" layoutDirection="column">
          <!--suppress JSUnusedGlobalSymbols -->
          <app-form-errors #formErrors [formGroup]="changeOptionsForm"></app-form-errors>
          <p class="fl-bold" i18n>Upgrade/downgrade product and change billing cycle</p>
          <p class="fl-important-text" *ngIf="upgradeOptions.has_not_reached_service_cycles">
            <span i18n>Invoiced periods from future billing cycles will be canceled.</span>
          </p>
          <mat-form-field>
            <mat-label i18n>Select new product</mat-label>
            <mat-select formControlName="newServiceProduct" placeholder="Select new product" i18n-placeholder>
              <mat-option [value]="upgradeOptions.product.id"><span i18n>Current product</span>:
                {{ upgradeOptions.product.name }}
              </mat-option>
              <mat-optgroup *ngIf="!!upgradeOptions.upgrades && !!upgradeOptions.upgrades.length"
                            label="New product" i18n-label>
                <mat-option *ngFor="let product of upgradeOptions.upgrades" [value]="product.id">
                  {{ product.name }}
                </mat-option>
              </mat-optgroup>
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Select new cycle</mat-label>
            <mat-select formControlName="newServiceCycle" placeholder="Select new cycle" i18n-placeholder>
              <ng-container *ngIf="!selectedProduct; else alsoChangeProduct">
                <mat-option [value]="upgradeOptions.cycle.id"><span i18n>Current cycle</span>:
                  {{ upgradeOptions.cycle.display_name }} {{ upgradeOptions.cycle.fixed_price | currencyFormatter: upgradeOptions.cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                </mat-option>
                <mat-optgroup *ngIf="!!upgradeOptions.cycle_upgrades && !!upgradeOptions.cycle_upgrades.length"
                              label="New cycle" i18n-label>
                  <ng-container *ngFor="let cycle of upgradeOptions.cycle_upgrades">
                    <mat-option *ngIf="displayCycle(cycle, false)" [value]="cycle.id">
                      {{ cycle.display_name }} {{ cycle.fixed_price | currencyFormatter: cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                    </mat-option>
                  </ng-container>
                </mat-optgroup>
              </ng-container>
              <ng-template #alsoChangeProduct>
                <ng-container *ngFor="let cycle of selectedProduct.cycles">
                  <mat-option *ngIf="displayCycle(cycle, true)" [value]="cycle.id">
                    {{ cycle.display_name }} {{ cycle.fixed_price | currencyFormatter: cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                  </mat-option>
                </ng-container>
              </ng-template>
            </mat-select>
          </mat-form-field>
          <div *ngFor="let option of upgradeOptions.configurable_options_upgrades" layoutDirection="column"
               appLayoutGap="10px">
            <app-configurable-option-input [option]="option" [(value)]="configOptionValues[option.id]"
                                           (valueChange)="checkIfOptionsChanged()"
                                           [error]="backendErrors[option.id]">
            </app-configurable-option-input>
          </div>
          <div layoutDirection="row" class="fl-margin-top" appLayoutGap="10px">
            <button [routerLink]="config.getPanelUrl('billing/services/', object.id)" mat-button i18n>Cancel</button>
            <button [disabled]="!optionsChanged" (click)="checkUpgrade()" mat-button mat-raised-button color="primary"
                    i18n>Next
            </button>
          </div>
        </form>
        <ng-container *ngIf="upgradeInProgress">
          <div>
            <span class="fl-important-text" i18n>This service cannot be modified since it already has an unpaid upgrade/downgrade invoice:</span>
            <a class="active-link"
               [routerLink]="config.getPanelUrl('billing/invoices/' + upgradeOptions.existing_upgrade_invoice)">
              {{ upgradeOptions.existing_upgrade_invoice }}
            </a>
          </div>
          <div layoutDirection="row" class="fl-margin-top">
            <button [routerLink]="config.getPanelUrl('billing/services/', object.id)" mat-button i18n>Back</button>
          </div>
        </ng-container>
      </ng-container>
      <ng-template #confirmChangesContent>
        <form [formGroup]="changeOptionsForm" layoutDirection="column">
          <!-- just for error display purposes -->
          <!--suppress JSUnusedGlobalSymbols -->
          <app-form-errors #formErrors [formGroup]="changeOptionsForm"></app-form-errors>
        </form>
        <div layoutDirection="column">
          <h3 i18n>Upgrade summary</h3>
          <p *ngIf="upgrade.new_product_display">{{ upgrade.new_product_display }}</p>
          <div layoutDirection="column">
            <div layoutDirection="row" class="fl-margin-bottom">
              <div appFlex="80">
                <span class="wrap-text-content">{{ upgrade.display_name }}</span>
                <p *ngIf="upgrade.setup_fees_upgrade==='cycle-upgrade'" class="fl-indent fl-detail" i18n>Setup fees:
                  {{ upgrade.setup_fees_summary.current_setup_fee | currency: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                  =>
                  {{ upgrade.setup_fees_summary.new_setup_fee | currency: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                </p>
                <p *ngIf="upgrade.setup_fees_upgrade==='product-upgrade'" class="fl-indent fl-detail" i18n>Setup fees:
                  {{ upgrade.setup_fees_summary.new_setup_fee | currency: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                </p>

                <div>
                  <ng-container *ngFor="let configOpt of upgradeOptions.configurable_options">
                    <ng-container *ngFor="let newConfigOpt of upgrade.configurable_options">
                    <span *ngIf="newConfigOpt.option === configOpt.option">
                      <ng-container
                        *ngIf="configOpt.price !== newConfigOpt.full_price_without_setup_fees; else samePrice">
                        <p class="fl-detail">
                          {{ configOpt.display }}
                          ({{ configOpt.price | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                          )
                          =>
                          {{ newConfigOpt.display }}
                          ({{ newConfigOpt.full_price_without_setup_fees | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                          )
                        </p>
                      </ng-container>
                      <ng-template #samePrice>
                        <p class="fl-detail">
                          {{ configOpt.display }}
                          ({{ newConfigOpt.full_price_without_setup_fees | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                          )
                        </p>
                      </ng-template>
                    </span>
                    </ng-container>
                  </ng-container>
                  <ng-container *ngFor="let newConfigOpt of upgrade.configurable_options">
                    <p class="fl-detail" *ngIf="newlyAddedOption(newConfigOpt)">
                      {{ newConfigOpt.full_display }}
                      ({{ newConfigOpt.full_price_without_setup_fees | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                      )
                    </p>
                  </ng-container>
                </div>

              </div>
              <div appFlex="20" class="right-align">
              <span class="fl-bold">
                {{ upgrade.product_upgrade_price | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
              </span>
              </div>
            </div>
            <div *ngFor="let tax of upgrade.taxes_applied | keyvalue" layoutDirection="row" class="fl-margin-bottom">
              <div appFlex="50" xsFlex="20"></div>
              <div class="fl-bold right-align" appFlex="20" xsFlex="30">{{ tax.key }}</div>
              <div class="fl-bold right-align"
                   appFlex="auto">{{ tax.value['amount'] | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
              </div>
            </div>
            <div layoutDirection="row" class="fl-margin-bottom">
              <div appFlex="50" xsFlex="20"></div>
              <div class="fl-bold right-align" appFlex="20" xsFlex="30" i18n>Total due now</div>
              <div class="fl-bold right-align" appFlex="auto">
                {{ upgrade.total_due | currencyFormatter: upgrade.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
              </div>
            </div>
          </div>
          <p [class.fl-no-margin-bottom]="upgradeOptions.has_not_reached_service_cycles"
             i18n>Price is calculated by taking into account the unused but paid period</p>
          <p class="fl-important-text" *ngIf="upgradeOptions.has_not_reached_service_cycles"
             i18n>Invoiced periods from future billing cycles will be canceled.</p>
        </div>
        <mat-card-actions layoutAlign="end">
          <button [routerLink]="config.getPanelUrl('billing/services/', object.id)" mat-button i18n>Cancel</button>
          <button mat-button color="primary" (click)="placeOrder()" i18n>Place order</button>
        </mat-card-actions>
      </ng-template>
    </ng-template>
  </div>
</div>
