<div class="fl-content">
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" [formGroup]="serviceForm">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="serviceForm"></app-form-errors>
    <div layoutDirection="column">
      <p class="fl-detail fl-margin-bottom fl-no-margin-top" *ngIf="object && object.client" i18n>
        Client:
        <a class="active-link"
           routerLink="{{config.getPanelUrl('clients-users/clients/' + object.client.id)}}">
          {{object.client.display || object.client.name}}
        </a>
      </p>

      <mat-form-field>
        <mat-label i18n>Display name</mat-label>
        <input matInput placeholder="Display name" i18n-placeholder type="text" formControlName="display_name" required>
        <mat-error>{{fieldErrors['display_name']}}</mat-error>
      </mat-form-field>

      <app-autocomplete [control]="serviceForm.controls.product"
                        [placeholderSelected]="productSelectedPlaceholder"
                        [placeholderUnselected]="productUnselectedPlaceholder"
                        [displayFn]="productDisplay"
                        [optionsService]="productsApiService"></app-autocomplete>

      <mat-form-field class="fl-margin-top-small">
        <mat-label i18n>Cycle</mat-label>
        <mat-select formControlName="cycle" placeholder="Cycle" i18n-placeholder>
          <mat-option *ngFor="let cycle of product.value.cycles" [value]="cycle.id">
            {{cycle.display_name}} ({{cycle.currency}})
          </mat-option>
        </mat-select>
        <mat-hint *ngIf="object && object.billing_type === 'postpaid' && selectedCycle &&
                         object.currency.code !== selectedCycle.currency" i18n>
          Changing service currency also overrides "in progress" service cycle currency.
        </mat-hint>
        <mat-error>{{backendErrors['cycle'] | fieldRequired}}</mat-error>
      </mat-form-field>

      <mat-form-field [class.hide]="product.value?.price_model === 'free'">
        <mat-label i18n>Price override</mat-label>
        <mat-select formControlName="price_override_model" placeholder="Price override" i18n-placeholder>
          <mat-option [value]="PriceOverrideModel.Default" i18n>
            Standard product pricing
          </mat-option>
          <mat-option [value]="PriceOverrideModel.DiscountValue" i18n>
            Discount value
          </mat-option>
          <mat-option [value]="PriceOverrideModel.OverrideValue" i18n>
            Override value
          </mat-option>
          <mat-option [value]="PriceOverrideModel.DiscountPercentage" i18n>
            Discount percentage
          </mat-option>
          <mat-option [value]="PriceOverrideModel.FreeService" i18n>
            Free service
          </mat-option>
        </mat-select>
      </mat-form-field>
      <ng-container *ngIf="price_override.value">
        <div class="fl-margin-top">
          <mat-form-field appFlex="100">
            <mat-label i18n>Override until</mat-label>
            <input matInput [matDatepicker]="overrideUntilDatePicker" formControlName="override_until"
                   placeholder="Override until" i18n-placeholder>
            <mat-datepicker-toggle matSuffix [for]="overrideUntilDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #overrideUntilDatePicker></mat-datepicker>
            <mat-error>{{serviceForm.controls.override_until.errors | errorFormatter}}</mat-error>
          </mat-form-field>
          <app-icon class="fl-margin-top fl-margin-left-small" [icon]="overrideUntilIcon"></app-icon>
        </div>

        <ng-container *ngIf="price_override_model.value !== PriceOverrideModel.FreeService">

          <mat-radio-group aria-labelledby="rate_type" formControlName="price_override_type">
            <mat-radio-button [color]="'primary'" [value]="'flat'" i18n>
              Flat
            </mat-radio-button>
            <mat-radio-button [color]="'primary'" [value]="'tiered'" i18n>
              Tiered
            </mat-radio-button>
          </mat-radio-group>

          <p i18n>
            Flat discount applies regardless of the billing cycle base value, tiered discount applies on levels of
            billing cycle values. If a negative cycle value results after applying the discount, the final value after
            discount is set to zero.
          </p>

          <ng-container *ngIf="price_override_type.value === 'flat' else tieredPrices">
            <div *ngIf="price_override_model.value === PriceOverrideModel.DiscountValue"
                 class="fl-margin-top">
              <mat-form-field appFlex="47">
                <mat-label i18n>Discount price</mat-label>
                <input matInput placeholder="Discount value" i18n-placeholder type="number"
                       formControlName="discount_value">
                <mat-error>{{fieldErrors['discount_value']}}</mat-error>
              </mat-form-field>
              <app-icon class="fl-margin-top fl-margin-left-small" [icon]="discountPriceInfoIcon"></app-icon>
            </div>

            <div *ngIf="price_override_model.value === PriceOverrideModel.OverrideValue"
                 class="fl-margin-top">
              <mat-form-field appFlex="47">
                <mat-label i18n>Override value</mat-label>
                <input matInput placeholder="Override value" i18n-placeholder type="number"
                       formControlName="override_value">
                <mat-error>{{fieldErrors['override_value']}}</mat-error>
              </mat-form-field>
              <app-icon class="fl-margin-top fl-margin-left-small" [icon]="overridePriceInfoIcon"></app-icon>
            </div>

            <div *ngIf="price_override_model.value === PriceOverrideModel.DiscountPercentage"
                 class="fl-margin-top">
              <mat-form-field appFlex="47">
                <mat-label i18n>Discount percent</mat-label>
                <input matInput placeholder="Discount percent" i18n-placeholder type="number"
                       formControlName="discount_percent">
                <mat-error>{{fieldErrors['discount_percent']}}</mat-error>
              </mat-form-field>
              <app-icon class="fl-margin-top fl-margin-left-small" [icon]="discountPercentInfoIcon"></app-icon>
            </div>
          </ng-container>
          <ng-template #tieredPrices>
            <div formArrayName="price_override_tiers" layoutDirection="row"
                 *ngFor="let item of price_override_tiers['controls']; let i = index;">
              <div [formGroupName]="i" appFlex="100">
                <mat-form-field appFlex="97">
                  <mat-label>From</mat-label>
                  <input (change)="reCalculateTiers()" matInput formControlName="from"
                         placeholder="From" i18n-placeholder type="number" required>
                  <mat-error>{{'This field is required!'}}</mat-error>
                </mat-form-field>
                <mat-form-field appFlex="97" class="offset-3">
                  <mat-label i18n>To</mat-label>
                  <input matInput formControlName="to" placeholder="To" i18n-placeholder type="text">
                </mat-form-field>
                <mat-form-field appFlex="100" class="offset-3">
                  <mat-label *ngIf="price_override_model.value === PriceOverrideModel.DiscountValue"
                             i18n>Discount value ({{object.currency.code}})
                  </mat-label>
                  <mat-label *ngIf="price_override_model.value === PriceOverrideModel.DiscountPercentage"
                             i18n>Discount percent (%)
                  </mat-label>
                  <mat-label *ngIf="price_override_model.value === PriceOverrideModel.OverrideValue"
                             i18n>Override value ({{object.currency.code}})
                  </mat-label>
                  <input matInput formControlName="price" type="number">
                  <mat-error>{{item.controls.price.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <button (click)="removeTier(i)" class="fl-margin-top-small"
                        [attr.fl-tooltip]="removeTierTooltip" mat-icon-button>
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
            </div>

            <button mat-mini-fab class="add-item-button" [attr.fl-tooltip]="addTierTooltip"
                    fl-tooltip-direction="right" (click)="addTier($event)">
              <mat-icon>add</mat-icon>
            </button>
          </ng-template>
        </ng-container>
      </ng-container>

      <mat-checkbox formControlName="renew_enabled" [color]="'primary'"
                    class="fl-margin-bottom-small" i18n>
        Renew enabled (renew external resources on payment)
      </mat-checkbox>

      <mat-form-field *ngIf="product.value.requires_domain">
        <mat-label i18n>Domain name</mat-label>
        <input matInput type="text"
               placeholder="Domain name" i18n-placeholder formControlName="domain_name">
        <mat-error>{{fieldErrors['domain_name']}}</mat-error>
      </mat-form-field>

      <mat-form-field class="fl-margin-top">
        <mat-label i18n>Notes</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  matInput rows="3" maxlength="255" placeholder="Notes" i18n-placeholder formControlName="notes">
        </textarea>
        <mat-error>{{fieldErrors['notes']}}</mat-error>
      </mat-form-field>

      <div layoutDirection="row" appLayoutGap="5px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Do not suspend until</mat-label>
          <input matInput [matDatepicker]="overrideSuspendPicker" placeholder="Do not suspend until" i18n-placeholder
                 formControlName="override_suspend_until">
          <mat-datepicker-toggle matSuffix [for]="overrideSuspendPicker"></mat-datepicker-toggle>
          <mat-datepicker #overrideSuspendPicker></mat-datepicker>
          <mat-error>{{ fieldErrors['override_suspend_until']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Time ({{timeHelper.timeFormat}})</mat-label>
          <input matInput placeholder="{{timeHelper.timeFormat}}"
                 formControlName="override_suspend_until_time">
          <button [attr.fl-tooltip]="timeHelper.localTimeTooltip" mat-icon-button matSuffix
                  (click)="$event.preventDefault();">
            <mat-icon>info</mat-icon>
          </button>
          <mat-error>{{ serviceForm.controls.override_suspend_until_time.errors | errorFormatter }}</mat-error>
          <mat-hint i18n>E.g. {{timeHelper.timeExample}}, {{timeHelper.timezoneDisplay}} time</mat-hint>
        </mat-form-field>
        <a mat-icon-button [attr.fl-tooltip]="clearDoNotSuspendUntilTooltip"
           class="fl-margin-top-small"
           (click)="serviceForm.controls.override_suspend_until.setValue(null)">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
      <div layoutDirection="row" appFlex="100">
        <mat-form-field appFlex="47">
          <mat-label i18n>Current cycle end</mat-label>
          <input matInput [matDatepicker]="nextDueDatePicker"
                 formControlName="current_service_cycle_end" placeholder="Current cycle end" i18n-placeholder>
          <mat-datepicker-toggle matSuffix [for]="nextDueDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #nextDueDatePicker></mat-datepicker>
          <mat-error>{{ fieldErrors['current_service_cycle_end']}}</mat-error>
        </mat-form-field>
        <a mat-icon-button [attr.fl-tooltip]="clearCurrentCycleEndTooltip"
           class="fl-margin-top-small"
           (click)="serviceForm.controls.current_service_cycle_end.setValue(null)">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
    </div>

    <h3 class="fl-detail fl-margin-top-medium" i18n>Configurable options</h3>
    <div *ngIf="object.configurable_options && object.configurable_options.length; else noOpts"
         layoutDirection="column">
      <table class="full-width" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="option">
          <th mat-header-cell *matHeaderCellDef i18n>Option</th>
          <td mat-cell *matCellDef="let configurableOption">
            {{configurableOption.display || configurableOption.option}}
          </td>
        </ng-container>
        <ng-container matColumnDef="option_value">
          <th mat-header-cell *matHeaderCellDef i18n>Option value</th>
          <td mat-cell *matCellDef="let configurableOption">
            {{configurableOption.option_value | nullValue}}
          </td>
        </ng-container>
        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef i18n>Price</th>
          <td mat-cell *matCellDef="let configurableOption">
            {{configurableOption.price | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
          </td>
        </ng-container>
        <ng-container matColumnDef="(actions)">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let configurableOption">
            <app-object-actions [objectActions]="optionsActions[configurableOption.option]" [maxVisibleActions]="3">
            </app-object-actions>
          </td>
        </ng-container>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      </table>
    </div>
    <ng-template #noOpts>
      <div class="fl-detail no-opts-message" i18n>No configurable options</div>
    </ng-template>
  </form>
  <div *ngIf="servicePriceDetails && servicePriceDetails.price !== null" class="fl-margin-top right-align">
    <span class="fl-detail" *ngIf="!servicePriceDetails.free_of_charge; else freeService" i18n>
      Service price after saving (without taxes): {{servicePriceDetails.price | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
    </span>
    <ng-template #freeService>
      <span class="fl-detail" i18n>
        Service price after saving (without taxes):
        <span class="fl-struck">
          {{servicePriceDetails.price | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
        </span>
        {{0 | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
      </span>
    </ng-template>
  </div>
</div>
