<div class="checkout">
  <div>
    <h2>{{ 'billing.payment_details' | translate }}</h2>
  </div>

  @if (subscribeMode | async) {
    <div>
      <div class="section-header">
        <div class="section-title">
          <pa-icon name="circle-check"></pa-icon>
          {{ 'billing.subscription_tier' | translate }}
        </div>
        <pa-button
          routerLink="../subscriptions"
          icon="edit"
          aspect="basic"></pa-button>
      </div>
      <div class="section-body">
        @if (accountType | async; as account) {
          <div class="body-m">
            {{ 'account.type.' + account | translate }}
            @if (currency$ | async; as currency) {
              @if ((prices$ | async)?.[account]?.recurring; as prices) {
                @if (monthly | async) {
                  {{ prices.month?.price | currency: currency }}/{{ 'billing.month' | translate }}
                } @else {
                  {{ prices.year?.price | currency: currency }}/{{ 'billing.year' | translate }}
                }
              }
            }
          </div>
        }
      </div>
    </div>
  }

  @if (billingDetailsEnabled) {
    <div>
      <div class="section-header">
        <div class="section-title">
          <pa-icon [name]="customer && !editCustomer ? 'circle-check' : 'circle-dash'"></pa-icon>
          {{ 'billing.billing_details' | translate }}
        </div>
        @if (!editCustomer) {
          <pa-button
            (click)="showCustomerForm()"
            icon="edit"
            aspect="basic"></pa-button>
        }
      </div>
      <div class="section-body">
        @if (editCustomer) {
          <form
            [formGroup]="customerForm"
            class="customer-form">
            <div class="not-company">
              <pa-checkbox formControlName="not_company">{{ 'billing.not_company' | translate }}</pa-checkbox>
            </div>
            @if (isCompany) {
              <div class="field-line">
                <div class="field-block long">
                  <label
                    class="title-s"
                    for="company">
                    {{ 'billing.company' | translate }} *
                  </label>
                  <pa-input
                    id="company"
                    formControlName="company"
                    [errorMessages]="errors"
                    externalLabel></pa-input>
                </div>
                <div class="field-block">
                  <label
                    class="title-s"
                    for="vat">
                    {{ 'billing.vat_id' | translate }}
                    <span>*</span>
                  </label>
                  <pa-input
                    id="vat"
                    formControlName="vat"
                    [errorMessages]="errors"
                    externalLabel></pa-input>
                </div>
              </div>
            }
            <div class="field-line">
              <div class="field-block">
                <label
                  class="title-s"
                  for="name">
                  {{ (isCompany ? 'billing.contact_name' : 'generic.name') | translate }} *
                </label>
                <pa-input
                  id="name"
                  formControlName="name"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
              <div class="field-block">
                <label
                  class="title-s"
                  for="email">
                  {{ 'billing.email' | translate }} *
                </label>
                <pa-input
                  id="email"
                  formControlName="email"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
              <div class="field-block">
                <label
                  class="title-s"
                  for="phone">
                  {{ 'billing.phone' | translate }} *
                </label>
                <pa-input
                  id="phone"
                  formControlName="phone"
                  [placeholder]="'billing.phone_placeholder' | translate"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
            </div>
            <div class="field-line">
              <div class="field-block long">
                <label
                  class="title-s"
                  for="address">
                  {{ (isCompany ? 'billing.company_address' : 'billing.address') | translate }} *
                </label>
                <pa-input
                  id="address"
                  formControlName="address"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
              <div class="field-block">
                <label
                  class="title-s"
                  for="country">
                  {{ 'billing.country' | translate }} *
                </label>
                <nsi-country-select
                  [id]="'country'"
                  formControlName="country"
                  [readonly]="!!customer"
                  [errorMessages]="errors"
                  [externalLabel]="true"></nsi-country-select>
              </div>
            </div>
            <div class="field-line">
              <div class="field-block">
                <label
                  class="title-s"
                  for="city">
                  {{ 'billing.city' | translate }} *
                </label>
                <pa-input
                  id="city"
                  formControlName="city"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
              <div class="field-block">
                <label
                  class="title-s"
                  for="state">
                  {{ 'billing.state' | translate }}
                </label>
                <pa-input
                  id="state"
                  formControlName="state"
                  externalLabel></pa-input>
              </div>
              <div class="field-block">
                <label
                  class="title-s"
                  for="postal_code">
                  {{ 'billing.postal_code' | translate }} *
                </label>
                <pa-input
                  id="postal_code"
                  formControlName="postal_code"
                  [errorMessages]="errors"
                  externalLabel></pa-input>
              </div>
            </div>
            <pa-button
              (click)="saveCustomer()"
              [disabled]="!customerForm.valid"
              kind="primary">
              {{ ((subscribeMode | async) ? 'billing.save_continue' : 'generic.save') | translate }}
            </pa-button>
          </form>
        } @else if (!editCustomer && customer) {
          <div class="body-m">
            @if (customer.billing_details.is_company && customer.billing_details.company) {
              <div>{{ customer.billing_details.company }}</div>
            }
            @if (customer.billing_details.is_company && customer.billing_details.vat) {
              <div>{{ customer.billing_details.vat }}</div>
            }
            <div>{{ customer.billing_details.name }}</div>
            <div>{{ customer.billing_details.email }}</div>
            <div>{{ customer.billing_details.phone }}</div>
            <div>{{ customer.billing_details.address }}</div>
            <div>{{ customer.billing_details.city }} {{ customer.billing_details.postal_code }}</div>
            <div>{{ customer.billing_details.state || '' }} {{ countries[customer.billing_details.country] }}</div>
          </div>
        }
      </div>
    </div>
  }

  <div>
    <div class="section-header">
      <div class="section-title">
        <pa-icon
          [name]="(subscribeMode | async) === false || (token && !editCard) ? 'circle-check' : 'circle-dash'"
          [class.disabled]="!customer"></pa-icon>
        {{ 'billing.payment_method' | translate }}
        <div class="powered-by">
          <span class="body-xs">Powered by</span>
          <pa-icon
            path="assets/images/stripe-logo.svg"
            size="large"></pa-icon>
        </div>
      </div>
      @if (!editCard && token) {
        <pa-button
          (click)="showCardForm()"
          icon="edit"
          aspect="basic"></pa-button>
      }
    </div>
    <div class="section-body">
      @if (subscribeMode | async) {
        <div
          class="payment-method-form"
          [class.hidden]="!editCard">
          <div class="field-block">
            <label
              class="title-s"
              for="card-name">
              {{ 'billing.card_name' | translate }}
            </label>
            <pa-input
              id="card-name"
              [formControl]="cardName"
              [errorMessages]="errors"
              externalLabel></pa-input>
          </div>
          <div>
            <label class="title-s">
              {{ 'billing.card_details' | translate }}
            </label>
            <div class="card-element">
              <div #card></div>
            </div>
            <div class="card-error">{{ cardError }}</div>
          </div>
          <pa-button
            (click)="createPaymentMethod()"
            [disabled]="cardName.invalid || !validCard || loading"
            kind="primary">
            {{ 'billing.save_continue' | translate }}
          </pa-button>
        </div>
        @if (!editCard && token) {
          <div class="body-m">
            <div>{{ cardName.value }}</div>
            <div>{{ token.card.brand }}</div>
            <div>**** **** **** {{ token.card.last4 }}</div>
          </div>
        }
      } @else {
        <pa-button (click)="updatePaymentMethod()">{{ 'billing.update_payment_method' | translate }}</pa-button>
      }
    </div>
  </div>

  @if (!(isCowork | async)) {
    <div>
      <div class="section-header">
        <div class="section-title">
          <pa-icon
            name="circle-dash"
            [class.disabled]="!token"></pa-icon>
          {{ 'billing.budget' | translate }}
        </div>
      </div>
      <div class="section-body">
        <div class="budget-form">
          <div [innerHTML]="'billing.budget_description' | translate"></div>
          @if (subscribeMode | async) {
            @if (currency$ | async; as currency) {
              <app-budget
                [currency]="currency"
                [showActions]="false"
                [defaultBudget]="true"
                (budgetChange)="budget = $event"></app-budget>
            }
          } @else {
            <app-budget
              [currency]="(usage | async)?.currency"
              (budgetChange)="budget = $event"></app-budget>
            <div class="submit">
              <pa-button
                kind="primary"
                [disabled]="!budget"
                (click)="modifyBudget()">
                {{ 'generic.save' | translate }}
              </pa-button>
            </div>
          }
        </div>
      </div>
    </div>
  }

  @if (subscribeMode | async) {
    @if (currency$ | async) {
      <div class="submit">
        <pa-button
          (click)="doSubscribe()"
          [disabled]="editCustomer || editCard || loading"
          kind="primary">
          {{ 'billing.review_confirm' | translate }}
        </pa-button>
        @if (loading) {
          <nsi-spinner></nsi-spinner>
        }
      </div>
    }
  }
</div>
