<div class="card">
  <div class="check-icon-wrapper">
    <span class="icon-circle">
      <ui-icon class="check-icon" icon="check" size="36px"></ui-icon>
    </span>
  </div>

  <h1 class="order-header">Bestellbestätigung</h1>
  <p class="order-info">
    Nachfolgend erhalten Sie <br />
    die Übersicht Ihrer Bestellung.
  </p>

  <ng-container *ngFor="let displayOrder of displayOrders$ | async; let i = index">
    <div class="row">
      <div class="order-customer" *ngIf="i === 0">
        {{ displayOrder?.buyer | buyerName }}
      </div>
      <div class="grow"></div>
      <button class="cta-print" (click)="openPrintModal(displayOrder.id)">
        Drucken
      </button>
    </div>

    <div class="row">
      <div class="sub-row small">
        <span class="label">Belegnummer</span>
        <a class="order-number" [routerLink]="['/kunde', processId, 'customer', displayOrder.buyerNumber, 'order', displayOrder.id]">{{
          displayOrder.orderNumber
        }}</a>
      </div>
      <div
        class="sub-row between"
        *ngIf="displayOrder?.features?.orderType === 'Abholung' || displayOrder?.features?.orderType === 'Rücklage'"
      >
        <span>Zielfiliale</span>
        <strong class="value">{{ displayOrder.targetBranch?.name }}</strong>
      </div>
      <div class="sub-row between" *ngIf="displayOrder?.features?.orderType === 'Download'">
        <span>E-Mail</span>
        <strong class="value">{{ displayOrder.buyer?.communicationDetails?.email }}</strong>
      </div>
    </div>
    <div class="row">
      <div class="sub-row small">
        <span class="label">Bestelldatum</span>
        <strong>{{ displayOrder.orderDate | date }}</strong>
      </div>
      <div class="sub-row between start">
        <ng-container *ngIf="displayOrder?.features?.orderType === 'Abholung' || displayOrder?.features?.orderType === 'Rücklage'">
          <span>Adresse</span>
          <strong class="value">{{ displayOrder.targetBranch | branchAddress }}</strong>
        </ng-container>
        <ng-container *ngIf="displayOrder?.features?.orderType !== 'Abholung' && displayOrder?.features?.orderType !== 'Rücklage'">
          <span>Lieferadresse</span>
          <strong class="value">{{ displayOrder.shippingAddress | shippingAddress }}</strong>
        </ng-container>
      </div>
    </div>

    <hr class="top-line" />
    <ng-container *ngFor="let order of displayOrder.items">
      <div class="row between">
        <div class="product-name">
          <img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
          <a class="name" [routerLink]="['/kunde', processId, 'product', 'details', 'ean', order?.product?.ean]">{{
            order?.product?.name
          }}</a>
        </div>

        <div class="product-details">
          <div class="info-row">
            <ng-container *ngIf="order?.product?.format && order?.product?.formatDetail">
              <img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
              <span class="format">{{ order.product?.format }}</span>
            </ng-container>
            <ng-container *ngIf="order?.product?.contributors">
              <span class="separator" *ngIf="order?.product?.format && order?.product?.formatDetail">|</span>
              <span class="contributors">{{ order?.product?.contributors }}</span>
            </ng-container>
          </div>
          <div class="delivery-row" [ngSwitch]="order?.features?.orderType">
            <ng-container *ngSwitchCase="'Abholung'">
              <span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
              <span class="separator">|</span>
              <span class="order-type">Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
            </ng-container>
            <ng-container *ngSwitchCase="['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1">
              <span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
              <span class="separator">|</span>
              <ng-container *ngIf="(order?.subsetItems)[0]?.estimatedDelivery; else estimatedShippingDate">
                <span class="order-type"
                  >Zustellung zwischen {{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
                  {{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}</span
                >
              </ng-container>
              <ng-template #estimatedShippingDate>
                <span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
              </ng-template>
            </ng-container>
            <ng-container *ngSwitchDefault>
              <ng-container *ngIf="(order?.subsetItems)[0].supplierLabel; let supplierLabel">
                <span class="supplier">{{ supplierLabel }}</span>
                <span class="separator">|</span>
              </ng-container>
              <span class="order-type">{{ order?.features?.orderType }}</span>
            </ng-container>
          </div>
        </div>

        <div class="product-price">
          <span class="quantity">{{ order.quantity }}x</span>
          <span class="price">{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
        </div>
      </div>

      <hr />
    </ng-container>
  </ng-container>
</div>

<div class="footer">
  <div class="overview">
    <span *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="promotion-points"
      >{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte</span
    >

    <div class="price-wrapper">
      <div class="total-price">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
      <div class="price-info" *ngIf="containsDeliveryOrder$ | async">ohne Versandkosten</div>
    </div>

    <div class="actions" *ngIf="(takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)">
      <button class="cta-goods-out" (click)="navigateToGoodsOut()">Zur Warenausgabe</button>
    </div>
  </div>
</div>
