<div class="summary-wrapper">
  <div class="flex flex-col bg-white rounded pt-10 mb-24">
    <div
      class="rounded-[50%] bg-[#26830C] w-8 h-8 flex items-center justify-center self-center"
    >
      <shared-icon class="text-white" icon="done" [size]="24"></shared-icon>
    </div>

    <h1 class="text-center text-h2 my-1 font-bold">Bestellbestätigung</h1>
    <p class="text-center text-p1 mb-10">
      Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung.
    </p>

    @for (
      displayOrder of displayOrders$ | async;
      track displayOrder;
      let i = $index;
      let orderLast = $last
    ) {
      @if (i === 0) {
        <div
          class="flex flex-row items-center bg-white shadow-card min-h-[3.3125rem]"
        >
          <div class="text-h3 font-bold px-5 py-[0.875rem]">
            {{ displayOrder?.buyer | buyerName }}
          </div>
        </div>
        <hr />
      }
      <div class="flex flex-row items-center bg-[#F5F7FA] min-h-[3.3125rem]">
        <div
          class="flex flex-row items-center justify-center px-5 py-[0.875rem]"
        >
          @if ((displayOrder?.items)[0]?.features?.orderType !== 'Dummy') {
            <shared-icon
              class="mr-2"
              [size]="
                (displayOrder?.items)[0]?.features?.orderType === 'B2B-Versand'
                  ? 36
                  : 24
              "
              [icon]="(displayOrder?.items)[0]?.features?.orderType"
            ></shared-icon>
          }
          <p class="text-p1 font-bold mr-3">
            {{ (displayOrder?.items)[0]?.features?.orderType }}
          </p>
          @if (
            (displayOrder?.items)[0]?.features?.orderType === 'Abholung' ||
            (displayOrder?.items)[0]?.features?.orderType === 'Rücklage'
          ) {
            <div>
              {{ displayOrder.targetBranch?.name }},
              {{ displayOrder.targetBranch | branchAddress }}
            </div>
          } @else {
            {{ displayOrder.shippingAddress | branchAddress }}
          }
          @if ((displayOrder?.items)[0]?.features?.orderType === 'Download') {
            <div>| {{ displayOrder.buyer?.communicationDetails?.email }}</div>
          }
        </div>
      </div>
      <hr />
      <div class="flex flex-row justify-between items-center">
        <div
          class="flex flex-col px-5 py-4 bg-white"
          [attr.data-order-type]="(displayOrder?.items)[0]?.features?.orderType"
        >
          <div class="flex flex-row justify-between items-center mb-[0.375rem]">
            <div class="flex flex-row">
              <span class="w-32">Vorgangs-ID</span>
              @if (customer$ | async; as customer) {
                @if (customer$ | async; as customer) {
                  <a
                    data-which="Vorgangs-ID"
                    data-what="link"
                    class="font-bold text-[#0556B4] no-underline"
                    [routerLink]="[
                      '/kunde',
                      processId,
                      'customer',
                      'search',
                      customer?.id,
                      'orders',
                      displayOrder.id,
                    ]"
                    [queryParams]="{
                      main_qs: customer?.customerNumber,
                      filter_customertype: '',
                    }"
                  >
                    {{ displayOrder.orderNumber }}
                  </a>
                }
              }
              <ui-spinner
                class="text-[#0556B4] h-4 w-4"
                [show]="!(customer$ | async)"
              ></ui-spinner>
            </div>
          </div>
          <div class="flex flex-row justify-between items-center">
            <div class="flex flex-row">
              <span class="w-32">Bestelldatum</span>
              <strong>{{ displayOrder.orderDate | date }}</strong>
            </div>
          </div>
        </div>
        <div class="mr-4">
          <button
            (click)="expanded[i] = !expanded[i]"
            type="button"
            class="text-[#0556B4] font-bold flex flex-row items-center justify-center"
            [class.flex-row-reverse]="!expanded[i]"
          >
            <shared-icon
              class="mr-1"
              icon="arrow-back"
              [size]="20"
              [class.ml-1]="!expanded[i]"
              [class.rotate-180]="!expanded[i]"
            ></shared-icon>
            {{ expanded[i] ? 'Weniger' : 'Mehr' }}
          </button>
        </div>
      </div>
      @for (order of displayOrder.items; track order; let last = $last) {
        @if (expanded[i]) {
          <div
            class="page-checkout-summary__items-tablet px-5 pb-[1.875rem] bg-white"
            [class.page-checkout-summary__items]="isDesktop$ | async"
            [class.last]="last"
          >
            <div class="page-checkout-summary__items-thumbnail flex flex-row">
              <a
                [routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
                [queryParams]="getProductSearchDetailsQueryParams(order)"
              >
                <img
                  class="w-[3.125rem] max-h-20 mr-2"
                  [src]="order.product?.ean | productImage: 195 : 315 : true"
                />
              </a>
            </div>
            <div
              class="page-checkout-summary__items-title whitespace-nowrap overflow-ellipsis overflow-hidden"
            >
              <a
                class="font-bold no-underline text-[#0556B4]"
                [routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
                [queryParams]="getProductSearchDetailsQueryParams(order)"
              >
                {{ order?.product?.name }}
              </a>
            </div>
            @if ((order?.subsetItems)[0]; as subsetItem) {
              <div class="page-checkout-summary__items-ssc">
                <span class="mr-2">{{ subsetItem.supplierName }}</span>
                @if (subsetItem?.ssc && subsetItem?.sscText) {
                  <span class="font-bold border-l border-black pl-2">
                    {{ subsetItem.ssc }} - {{ subsetItem.sscText }}
                  </span>
                }
              </div>
            }
            <div
              class="page-checkout-summary__items-quantity font-bold justify-self-end"
            >
              <span>{{ order.quantity }}x</span>
            </div>
            <div
              class="page-checkout-summary__items-price font-bold justify-self-end"
            >
              <span
                >{{ order.price?.value?.value | currency: ' ' }}
                {{ order.price?.value?.currency }}</span
              >
            </div>
            <div class="page-checkout-summary__items-delivery product-details">
              <div class="delivery-row">
                @switch (order?.features?.orderType) {
                  @case ('Abholung') {
                    <span class="order-type">
                      Abholung ab
                      {{
                        (order?.subsetItems)[0]?.estimatedShippingDate | date
                      }}
                      <ng-container
                        [ngTemplateOutlet]="abholfrist"
                        [ngTemplateOutletContext]="{ order: order }"
                      ></ng-container>
                    </span>
                  }
                  @case ('Rücklage') {
                    <span class="order-type">
                      {{ order?.features?.orderType }}
                      <ng-container
                        [ngTemplateOutlet]="abholfrist"
                        [ngTemplateOutletContext]="{ order: order }"
                      ></ng-container>
                    </span>
                  }
                  @case (
                    ['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(
                      order?.features?.orderType
                    ) > -1
                  ) {
                    @if ((order?.subsetItems)[0]?.estimatedDelivery) {
                      <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>
                    } @else {
                      <span class="order-type"
                        >Versanddatum
                        {{
                          (order?.subsetItems)[0]?.estimatedShippingDate | date
                        }}</span
                      >
                    }
                  }
                  @default {
                    <span class="order-type">{{
                      order?.features?.orderType
                    }}</span>
                  }
                }
              </div>
            </div>
          </div>
        }
        @if (last) {
          <hr />
        }
      }
      @if (orderLast) {
        <div
          class="flex flex-row justify-between items-center min-h-[3.3125rem] bg-white px-5 py-4 rounded-b"
        >
          @if (totalReadingPoints$ | async; as totalReadingPoints) {
            <span class="text-p2 font-bold">
              {{ totalItemCount$ | async }} Artikel |
              {{ totalReadingPoints }} Lesepunkte
            </span>
          }
          <div class="flex flex-row items-center justify-center">
            <div class="text-p1 font-bold flex flex-row items-center">
              <div class="mr-1">
                Gesamtsumme {{ totalPrice$ | async | currency: ' ' }}
                {{ totalPriceCurrency$ | async }}
              </div>
            </div>
            @if (
              (takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)
            ) {
              <div
                class="bg-brand text-white font-bold text-p1 outline-none border-none rounded-full px-6 py-3 ml-2"
              >
                <button class="cta-goods-out" (click)="navigateToShelfOut()">
                  Zur Warenausgabe
                </button>
              </div>
            }
          </div>
        </div>
      }
    }
  </div>
</div>

<ng-template #abholfrist let-order="order">
  @if (!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]) {
    <div class="inline-flex">
      <button
        [uiOverlayTrigger]="deadlineDatepicker"
        #deadlineDatepickerTrigger="uiOverlayTrigger"
        class="flex flex-row items-center"
      >
        <span class="mx-[0.625rem] font-normal">bis</span>
        <strong class="border-r border-[#AEB7C1] pr-4">
          {{
            ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') ||
              'TT.MM.JJJJ'
          }}
        </strong>
        <shared-icon
          class="text-[#596470] ml-4"
          [size]="24"
          icon="isa-calendar"
        ></shared-icon>
      </button>
      <ui-datepicker
        #deadlineDatepicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [(selected)]="selectedDate"
      >
        <div #content class="grid grid-flow-row gap-2">
          <button
            class="rounded-full font-bold text-white bg-brand py-px-15 px-px-25"
            (click)="
              updatePreferredPickUpDate(undefined, selectedDate);
              deadlineDatepickerTrigger.close()
            "
          >
            Für den Warenkorb festlegen
          </button>
        </div>
      </ui-datepicker>
    </div>
  }
  @if (!!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]) {
    <div class="fetching"></div>
  }
</ng-template>

<div class="relative">
  <div
    class="absolute left-1/2 bottom-10 flex flex-wrap w-full gap-4 justify-center transform -translate-x-1/2"
  >
    <button
      *ifRole="'Store'"
      [disabled]="isPrinting$ | async"
      type="button"
      class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14 flex flex-row items-center justify-center print-button"
      (click)="printOrderConfirmation()"
    >
      <ui-spinner class="min-h-4 min-w-4" [show]="isPrinting$ | async"
        >Bestellbestätigung drucken</ui-spinner
      >
    </button>

    @if (hasAbholung$ | async) {
      <button
        type="button"
        class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
        (click)="sendOrderConfirmation()"
      >
        Bestellbestätigung senden
      </button>
    }
    @if (displayRewardNavigation()) {
      <button
        type="button"
        class="px-6 py-2 rounded-full border-2 border-solid border-brand text-white bg-brand font-bold text-lg whitespace-nowrap h-14"
        (click)="navigateToReward()"
      >
        Zur Prämienausgabe
      </button>
    }
  </div>
</div>
