<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    [avrop]="avrop"
    description="Här rapporterar du deltagarens frånvaro i tjänsten."
    reportTitle="Avvikelserapport (frånvaro)"
  >
    <div class="franvaro-report-form" *ngIf="currentGenomforandeReferens$ | async as genomforandeReferens">
      <div class="franvaro-report-form__warning" *ngIf="!isAllowedToReport(avrop); else reportRef">
        <digi-notification-alert af-variation="warning" af-heading="Kan inte skapa Avvikelserapport (frånvaro)">
          <p>{{notAllowedToReportWarning(avrop)}}</p>
        </digi-notification-alert>

        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
      </div>

      <ng-template #reportRef>
        <div
          class="franvaro-report-form__confirmation"
          *ngIf="lastSubmittedFranvaroReport$ | async as lastSubmittedFranvaroReport; else formRef"
        >
          <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
            <p>Avvikelserapport (frånvaro) för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.</p>
            <dl>
              <dt>Datum</dt>
              <dd>
                {{lastSubmittedFranvaroReport | date:'longDate'}} kl {{lastSubmittedFranvaroReport | date:'shortTime'}}
              </dd>
            </dl>
          </digi-notification-alert>
          <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
        </div>
        <ng-template #formRef>
          <form
            class="franvaro-report-form__form"
            [formGroup]="franvaroFormGroup"
            (ngSubmit)="openConfirmDialog()"
            id="franvaro-report-form"
          >
            <div class="franvaro-report-form__form-item">
              <digi-ng-form-select
                *ngIf="allReasons$ | async as reasons; else loadingRef"
                [formControl]="reasonFormControl"
                afLabel="Orsak till frånvaro"
                afPlaceholder="Välj orsak till frånvaro"
                [afSelectItems]="reasons"
                [afAnnounceIfOptional]="true"
                [afRequired]="true"
                [afDisableValidStyle]="true"
                [afInvalid]="formControlIsInvalid(['reason'])"
              ></digi-ng-form-select>
              <div aria-atomic="true" role="alert">
                <digi-ng-form-validation-message
                  *ngIf="formControlIsInvalid(['reason'])"
                  class="franvaro-report-form__validation-message"
                  [afPositive]="false"
                  [afValidationText]="formErrors.reason"
                ></digi-ng-form-validation-message>
              </div>
            </div>
            <ng-container *ngIf="reasonFormControl.value">
              <div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea">
                <ui-textarea
                  [formControl]="knownReasonCommentFormControl"
                  uiLabel="Beskriv frånvaro"
                  [uiInvalid]="formControlIsInvalid(['knownReasonComment'])"
                  [uiValidationMessage]="formErrors?.knownReasonComment"
                  [uiMaxLength]="2000"
                  [uiRequired]="true"
                  [uiAnnounceIfOptional]="true"
                ></ui-textarea>
              </div>
              <div class="franvaro-report-form__form-item">
                <digi-ng-form-datepicker
                  [afDisableValidStyle]="true"
                  [afMinDate]="avrop.startDate"
                  [afMaxDate]="maxDate(avrop.endDate)"
                  [afInvalid]="formControlIsInvalid(['date'])"
                  [afAnnounceIfOptional]="true"
                  [afRequired]="true"
                  afLabel="Dag för frånvaro"
                  [formControl]="dateFormControl"
                ></digi-ng-form-datepicker>
                <div aria-atomic="true" role="alert">
                  <digi-ng-form-validation-message
                    *ngIf="formControlIsInvalid(['date'])"
                    class="franvaro-report-form__validation-message"
                    [afPositive]="false"
                    [afValidationText]="formErrors.date"
                  ></digi-ng-form-validation-message>
                </div>
              </div>

              <div class="franvaro-report-form__form-item">
                <h2>Tiden deltagaren var frånvarande</h2>
                <digi-form-fieldset
                  af-legend="Heldag eller del av dag"
                  af-name="wholeDay"
                  af-form="franvaro-report-form"
                >
                  <ui-radiobutton-group
                    formControlName="wholeDay"
                    [uiRadiobuttons]="wholeDayOrPartOfDayRadiobuttons"
                    [uiBooleanValues]="true"
                    [uiRequired]="true"
                    [uiAnnounceIfOptional]="true"
                  ></ui-radiobutton-group>
                </digi-form-fieldset>
              </div>

              <ng-container *ngIf="showTimePickers">
                <div class="franvaro-report-form__time-pickers">
                  <div class="franvaro-report-form__time-picker">
                    <digi-ng-form-input
                      afLabel="Starttid"
                      [formControl]="startTimeFormControl"
                      [afDisableValidStyle]="true"
                      [afAnnounceIfOptional]="true"
                      [afRequired]="true"
                      [afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
                      afType="time"
                    ></digi-ng-form-input>
                    <div aria-atomic="true" role="alert">
                      <digi-ng-form-validation-message
                        *ngIf="formControlIsInvalid(['startTime'])"
                        class="franvaro-report-form__validation-message"
                        [afPositive]="false"
                        [afValidationText]="formErrors.startTime"
                      ></digi-ng-form-validation-message>
                    </div>
                  </div>
                  <div class="franvaro-report-form__time-picker">
                    <digi-ng-form-input
                      afLabel="Sluttid"
                      [formControl]="endTimeFormControl"
                      [afDisableValidStyle]="true"
                      [afAnnounceIfOptional]="true"
                      [afRequired]="true"
                      [afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
                      afType="time"
                    ></digi-ng-form-input>
                    <div aria-atomic="true" role="alert">
                      <digi-ng-form-validation-message
                        *ngIf="formControlIsInvalid(['endTime'])"
                        class="franvaro-report-form__validation-message"
                        [afPositive]="false"
                        [afValidationText]="formErrors.endTime"
                      ></digi-ng-form-validation-message>
                    </div>
                  </div>
                </div>
                <div aria-atomic="true" role="alert">
                  <digi-ng-form-validation-message
                    *ngIf="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
                    class="franvaro-report-form__validation-message"
                    [afPositive]="false"
                    [afValidationText]="formErrors.expectedEndTimeIsBeforeStartTime"
                  ></digi-ng-form-validation-message>
                </div>
              </ng-container>

              <div>
                <h2>Tiden deltagaren skulle varit närvarande</h2>
                <div class="franvaro-report-form__time-pickers">
                  <div class="franvaro-report-form__time-picker">
                    <digi-ng-form-input
                      afLabel="Starttid"
                      [formControl]="expectedPresenceStartTimeFormControl"
                      [afDisableValidStyle]="true"
                      [afAnnounceIfOptional]="true"
                      [afRequired]="true"
                      [afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
                      afType="time"
                    ></digi-ng-form-input>
                    <div aria-atomic="true" role="alert">
                      <digi-ng-form-validation-message
                        *ngIf="formControlIsInvalid(['expectedPresenceStartTime'])"
                        class="franvaro-report-form__validation-message"
                        [afPositive]="false"
                        [afValidationText]="formErrors.expectedPresenceStartTime"
                      ></digi-ng-form-validation-message>
                    </div>
                  </div>
                  <div class="franvaro-report-form__time-picker">
                    <digi-ng-form-input
                      afLabel="Sluttid"
                      [formControl]="expectedPresenceEndTimeFormControl"
                      [afDisableValidStyle]="true"
                      [afAnnounceIfOptional]="true"
                      [afRequired]="true"
                      [afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
                      afType="time"
                    ></digi-ng-form-input>
                    <div aria-atomic="true" role="alert">
                      <digi-ng-form-validation-message
                        *ngIf="formControlIsInvalid(['expectedPresenceEndTime'])"
                        class="franvaro-report-form__validation-message"
                        [afPositive]="false"
                        [afValidationText]="formErrors.expectedPresenceEndTime"
                      ></digi-ng-form-validation-message>
                    </div>
                  </div>
                </div>
                <div aria-atomic="true" role="alert">
                  <digi-ng-form-validation-message
                    *ngIf="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
                    class="franvaro-report-form__validation-message"
                    [afPositive]="false"
                    [afValidationText]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
                  ></digi-ng-form-validation-message>
                </div>
              </div>
            </ng-container>

            <footer class="franvaro-report-form__footer">
              <div class="franvaro-report-form__cta-wrapper">
                <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
                <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
                  <span>Avbryt</span>
                  <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
                </msfa-back-link>
              </div>
            </footer>
          </form>
          <digi-ng-dialog
            [afActive]="confirmDialogOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Avvikelserapport (frånvaro)"
            afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (frånvaro)"
            id="confirm-franvaro-report"
          >
            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <ng-container *ngIf="allReasons$ | async as reasons">
                <dt>Orsak till frånvaro</dt>
                <dd>{{getReasonNameFromValue(reasons, reasonFormControl.value)}}</dd>
                <ng-container *ngIf="showKnownReasonTextArea">
                  <dt>Beskrivning för frånvaro</dt>
                  <dd>{{knownReasonCommentFormControl.value}}</dd>
                </ng-container>
                <dt>Dag för frånvaro</dt>
                <dd>
                  <digi-typography-time [afDateTime]="dateFormValueAsDate"></digi-typography-time>
                </dd>
                <dt>Heldag eller del av dag</dt>
                <dd>{{dayOrPartOfDayFromValue}}</dd>
                <ng-container *ngIf="showTimePickers">
                  <dt>Tid för frånvaro</dt>
                  <dd>{{startTimeFormControl.value}} - {{endTimeFormControl.value}}</dd>
                </ng-container>
                <dt>Tid för förväntad närvaro</dt>
                <dd>{{expectedPresenceStartTimeFormControl.value}} - {{expectedPresenceEndTimeFormControl.value}}</dd>
              </ng-container>
            </msfa-report-description-list>
            <digi-notification-alert
              *ngIf="submitError$ | async as error"
              class="franvaro-report-form__alert"
              af-variation="danger"
              af-heading="Någonting gick fel"
            >
              <p>Kunde inte spara Avvikelserapport (frånvaro). Ladda om sidan och försök igen.</p>
              <p class="msfa__small-text" *ngIf="error.message">{{error.message}}</p>
            </digi-notification-alert>
          </digi-ng-dialog>
        </ng-template>
      </ng-template>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Avvikelserapport (frånvaro)"></ui-skeleton>
</ng-template>

<ng-template #loadingRef>
  <ui-loader uiType="padded"></ui-loader>
</ng-template>
