<form *ngIf="control" [formGroup]="control" (submit)="submit()">
  <div class="header">
    {{ items[0]?.organisation }}
    <ng-container *ngIf="!!items[0]?.organisation && (!!items[0]?.firstName || !!items[0]?.lastName)"> - </ng-container>
    {{ items[0]?.lastName }}
    {{ items[0]?.firstName }}
  </div>

  <ui-form-control label="Vorgang-ID" variant="inline" statusLabel="Nicht Änderbar">
    <input uiInput formControlName="orderNumber" />
  </ui-form-control>

  <ui-form-control label="Bestelldatum" variant="inline" statusLabel="Nicht Änderbar">
    <input uiInput formControlName="orderDate" />
  </ui-form-control>

  <ui-form-control label="Bestellkanal" variant="inline" statusLabel="Nicht Änderbar">
    <input uiInput formControlName="clientChannel" />
  </ui-form-control>

  <shared-notification-channel-control
    (channelActionEvent)="generateNotification($event)"
    [channelActionName]="'Erneut senden'"
    [channelActionLoading]="notificationChannelLoading$ | async"
    formGroupName="notificationChannel"
  ></shared-notification-channel-control>

  <ui-form-control label="Kundennummer" variant="inline" statusLabel="Nicht Änderbar">
    <input uiInput formControlName="buyerNumber" />
  </ui-form-control>

  <div formArrayName="items">
    <div *ngFor="let item of itemsControl.controls; index as i" [formGroupName]="i">
      <div class="item-header-wrapper">
        <div class="item-header">
          <img class="cover" *ngIf="item.value?.ean | productImage; let productImage" [src]="productImage" [alt]="item.value?.name" />
          <span class="title">{{ item.value?.name }}</span>
        </div>

        <button class="cta-expand" type="button" (click)="expanded[i] = !expanded[i]">
          <ui-icon icon="arrow_head" size="16px" [rotate]="expanded[i] ? '90deg' : '270deg'"> </ui-icon>
        </button>
      </div>

      <ng-container *ngIf="expanded[i]">
        <ui-form-control label="Abholfachnummer" [clearable]="true" variant="inline">
          <input uiInput formControlName="compartmentCode" />
        </ui-form-control>

        <shared-goods-in-out-order-details-tags
          *ngIf="showTagsComponent[i]"
          formControlName="compartmentInfo"
        ></shared-goods-in-out-order-details-tags>

        <ui-form-control label="Status" variant="inline" statusLabel="Nicht Änderbar">
          <input uiInput formControlName="processingStatus" />
        </ui-form-control>

        <div [ngSwitch]="items[i].processingStatus">
          <ng-container *ngSwitchCase="16">
            <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
          </ng-container>
          <ng-container *ngSwitchCase="8192">
            <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
          </ng-container>
          <ng-container *ngSwitchCase="128">
            <ng-container *ngTemplateOutlet="abholfrist"></ng-container>
          </ng-container>
          <ng-container *ngSwitchCase="16777216"> </ng-container>
          <ng-container *ngSwitchDefault>
            <ui-form-control class="datepicker" label="Geändert" variant="inline">
              <input uiInput formControlName="processingStatusDate" />
            </ui-form-control>
          </ng-container>
        </div>

        <ng-template #vslLieferdatum>
          <ui-form-control class="datepicker" label="vsl. Lieferdatum" variant="inline">
            <button class="date-btn" type="button" [uiOverlayTrigger]="uiDatepicker" #datepicker="uiOverlayTrigger">
              <strong>
                {{ items[i]?.estimatedShippingDate | date: 'dd.MM.yy' }}
              </strong>
              <ui-icon icon="arrow_head" class="dp-button-icon" size="12px" [rotate]="datepicker.opened ? '270deg' : '90deg'"> </ui-icon>
            </button>
            <ui-datepicker
              formControlName="estimatedShippingDate"
              #uiDatepicker
              yPosition="below"
              xPosition="before"
              [min]="minDate"
              [disabledDaysOfWeek]="[0]"
              [selected]="items[i]?.estimatedShippingDate"
              (save)="changeEstimatedDeliveryDate($event, items[i]); uiDatepicker.close()"
            >
              <ng-container #content>Übernehmen</ng-container>
            </ui-datepicker>
          </ui-form-control>
        </ng-template>

        <ng-template #abholfrist>
          <ui-form-control class="datepicker" label="Abholfrist" variant="inline">
            <button
              [uiOverlayTrigger]="deadlineDatepicker"
              #deadlineDatepickerTrigger="uiOverlayTrigger"
              [disabled]="!!items[i]?.features?.paid"
              class="date-btn"
              type="button"
            >
              <strong>
                {{ items[i]?.pickUpDeadline | date: 'dd.MM.yy' }}
              </strong>
              <ui-icon [rotate]="deadlineDatepickerTrigger.opened ? '270deg' : '90deg'" class="dp-button-icon" icon="arrow_head"></ui-icon>
            </button>
            <ui-datepicker
              formControlName="pickUpDeadline"
              #deadlineDatepicker
              yPosition="below"
              xPosition="after"
              [min]="minDate"
              [disabledDaysOfWeek]="[0]"
              [selected]="items[i]?.pickUpDeadline"
              (save)="changePickupDeadline($event, items[i]); deadlineDatepicker.close()"
            >
              <ng-container #content>Übernehmen</ng-container>
            </ui-datepicker>
          </ui-form-control>
        </ng-template>

        <ui-form-control label="Menge" variant="inline" statusLabel="Nicht Änderbar">
          <input uiInput formControlName="quantity" />
        </ui-form-control>

        <ui-form-control class="price" label="Preis" [clearable]="true" [suffix]="item.value?.currency" variant="inline" requiredMark=" *">
          <input uiInput formControlName="price" />
        </ui-form-control>

        <ui-form-control label="IBAN/EAN" [clearable]="true" variant="inline" requiredMark=" *">
          <input uiInput formControlName="ean" />
        </ui-form-control>

        <ui-form-control label="Zielfiliale" variant="inline" statusLabel="Nicht Änderbar">
          <input uiInput formControlName="targetBranch" />
        </ui-form-control>

        <ui-form-control label="Lieferant" variant="inline" statusLabel="Nicht Änderbar">
          <input uiInput formControlName="supplier" />
        </ui-form-control>

        <div class="ssc-wrapper">
          <ui-form-control class="ssc" label="Meldenummer" [clearable]="true" variant="inline" requiredMark=" *">
            <input class="ssc-input" uiInput formControlName="ssc" />
          </ui-form-control>
          <input class="ssc-text" uiInput formControlName="sscText" />
        </div>

        <ui-form-control label="Vormerker" variant="inline">
          <ui-select formControlName="isPrebooked">
            <ui-select-option label="Ja" [value]="true"></ui-select-option>
            <ui-select-option label="Nein" [value]="false"></ui-select-option>
          </ui-select>
        </ui-form-control>

        <ui-form-control label="MwSt" variant="inline">
          <ui-select formControlName="vat">
            <ui-select-option *ngFor="let vat of vats$ | async" [label]="vat.name + '%'" [value]="vat.vatType"></ui-select-option>
          </ui-select>
        </ui-form-control>

        <ui-form-control class="special-comment" label="Anmerkung" [clearable]="true" (cleared)="clearSpecialComment(i)" variant="inline">
          <textarea
            matInput
            cdkTextareaAutosize
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"
            (keydown.delete)="triggerResize(i)"
            (keydown.backspace)="triggerResize(i)"
            type="text"
            formControlName="specialComment"
          ></textarea>
        </ui-form-control>
      </ng-container>
    </div>
  </div>
  <div class="actions">
    <button class="cta-close" (click)="navigateBack({})" type="button">Abbrechen</button>
    <button class="cta-save" [disabled]="control.invalid || control.disabled" type="submit">Speichern</button>
  </div>
</form>
