<!--
/********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
-->
<!-- StandbyDuration Modal -->
<ng-template #standbyDurationsModal let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Bereitschaftsdauer hinzufügen</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')" id="modalClose">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form class="mt-3" [formGroup]="standbyDurationsForm" novalidate>
      <div class="row">
        <div class="col">
          <div class="form-group row d-flex align-items-center h-100">
            <label for="user-role" class="col-sm-3 col-form-label">Von</label>
            <div class="col-sm-9">
              <select class="form-control" placeHolder="test" id="user-role" formControlName="validDayFrom" required>
                <option></option>
                <option value="1">Montag</option>
                <option value="2">Dienstag</option>
                <option value="3">Mittwoch</option>
                <option value="4">Donnerstag</option>
                <option value="5">Freitag</option>
                <option value="6">Samstag</option>
                <option value="7">Sonntag</option>
              </select>
              <ok-error [control]="standbyDurationsForm.controls['validDayFrom']"></ok-error>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <ngb-timepicker formControlName="validFrom" id="durationPickerFrom"></ngb-timepicker>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="form-group row d-flex align-items-center h-100">
            <label for="user-role" class="col-sm-3 col-form-label">Bis</label>
            <div class="col-sm-9">
              <select class="form-control" placeHolder="test" id="user-role" formControlName="validDayTo" required>
                <option></option>
                <option value="1">Montag</option>
                <option value="2">Dienstag</option>
                <option value="3">Mittwoch</option>
                <option value="4">Donnerstag</option>
                <option value="5">Freitag</option>
                <option value="6">Samstag</option>
                <option value="7">Sonntag</option>
              </select>
              <ok-error [control]="standbyDurationsForm.controls['validDayTo']"></ok-error>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <ngb-timepicker formControlName="validTo" id="durationPickerTo"></ngb-timepicker>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="nextUserInNextDuration" formControlName="nextUserInNextDuration">
            <label class="form-check-label" for="nextUserInNextDuration">
              bei der nächsten Bereitschaftdauer wird der nächste Mitarbeiter verwendet
            </label>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-success" (click)="saveStandbyDuration()" id="StandbyDurationSave">Speichern</button>
    <button type="button" class="btn btn-danger" (click)="c()" id="StandbyDurationCancel">Abbrechen</button>
  </div>
</ng-template>
<!-- Standbygroup form -->
<div class="container-fluid">
  <form class="mt-3" [formGroup]="form" novalidate>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom stick-headlines"
      *ngIf="!isModal">
      <h1 class="h2">Bereitschaftsgruppe</h1>
      <div class="btn-toolbar mb-2 mb-md-0">
          <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success mr-1" (click)="saveStandbygroup()"
          id="StandbyGroupSave">Speichern</button>
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success mr-1" (click)="openCopyDialog()"
          id="StandbyGroupCopy">Kopieren</button>
        <button class="btn btn-danger float-right" (click)="close()" id="StandbyGroupCancel">Abbrechen</button>
      </div>
    </div>
    <ngb-accordion #acc="ngbAccordion" activeIds="standbygroupData,regionData,userData,standbyDurationData,branchData,functionData,calendarData">
      <!-- DATEN -->
      <ngb-panel title="Bereitschaftsgruppe" id="standbygroupData">
        <ng-template ngbPanelContent>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="title" class="col-sm-3 col-form-label">Titel</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="title" placeholder="Titel" formControlName="title"
                    required>
                  <ok-error [control]="form.controls['title']"></ok-error>
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="nextUserInNextCycle" formControlName="nextUserInNextCycle">
                <label class="form-check-label" for="nextUserInNextCycle">
                  beim nächsten Zyklusbeginn wird in der Mitarbeiterliste mit dem nächsten Mitarbeiter gestartet
                </label>
              </div>
            </div>
          </div>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="note" class="col-sm-3 col-form-label">Notizen (Hinweise, Informationen)</label>
                <div class="col-sm-9">
                  <textarea rows="4" class="form-control textarea" id="note" placeholder="Notizen" cols="50"
                    formControlName="note"></textarea>
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="extendStandbyTime" formControlName="extendStandbyTime">
                <label class="form-check-label" for="extendStandbyTime">
                  An dienstfreien Tagen wird das Ende eines Bereitschaftsdienstes verlängert
                </label>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Regionen" id="regionData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceRegion" [targetList]="targetRegion" headlineSource="Regionen"
                headlineTarget="ausgewählte Regionen" [sourceListColumnDefs]="sourceColumnDefsRegion"
                [targetListColumnDefs]="targetColumnDefsRegion" (moveToTargetClicked)="moveToTargetRegion($event)"
                (moveToSourceClicked)="moveToSourceRegion($event)" id="standbygroupPicklistRegion" embedLocation="standbygroup">
              </ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Funktionen" id="functionData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceFunction" [targetList]="targetFunction" headlineSource="Funktionen"
                headlineTarget="ausgewählte Funktionen" [sourceListColumnDefs]="sourceColumnDefsFunction"
                [targetListColumnDefs]="targetColumnDefsFunction" (moveToTargetClicked)="moveToTargetFunction($event)"
                (moveToSourceClicked)="moveToSourceFunction($event)" id="userPicklistFunction" rowSelection="single"
                [showMultiMoveButtons]="false" embedLocation="standbygroup">
              </ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Mitarbeiter" id="userData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceUser" [targetList]="targetUser" headlineSource="Mitarbeiter"
                headlineTarget="ausgewählte Mitarbeiter" [sourceListColumnDefs]="sourceColumnDefsUser"
                [targetListColumnDefs]="targetColumnDefsUser" (moveToTargetClicked)="moveToTargetUser($event, 'Verschieben')"
                (moveToSourceClicked)="moveToSourceUser($event)" (headerActionTargetClickedRight)="moveToTargetUser($event, 'Daten ändern')"
                headerActionTargetLableRight="Daten ändern" (headerActionTargetClickedLeft)="copyUserToTarget($event)"
                headerActionTargetLableLeft="Kopieren +1 Jahr" id="standbygroupPicklistUser" embedLocation="standbygroup">
              </ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Sparten" id="branchData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceBranch" [targetList]="targetBranch" headlineSource="Sparten"
                headlineTarget="ausgewählte Sparten" [sourceListColumnDefs]="sourceColumnDefsBranch"
                [targetListColumnDefs]="targetColumnDefsBranch" (moveToTargetClicked)="moveToTargetBranch($event)"
                (moveToSourceClicked)="moveToSourceBranch($event)" id="standbygroupPicklistBranch" embedLocation="standbygroup">
              </ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Kalender" id="calendarData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceCalendar" [targetList]="targetCalendar" headlineSource="dienstfreie Tage"
                headlineTarget="abgewählte dienstfreie Tage (Arbeitstage)" [sourceListColumnDefs]="sourceColumnDefsCalendar"
                [targetListColumnDefs]="targetColumnDefsCalendar" (moveToTargetClicked)="moveToTargetCalendar($event)"
                (moveToSourceClicked)="moveToSourceCalendar($event)" id="standbygroupPicklistCalendar" embedLocation="standbygroup">
              </ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Bereitschaftsdauer" id="standbyDurationData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <div class="card" *ngFor="let standbyDuration of standbyDurations;let i=index;">
                <div class="card-body">
                  <div class="row">
                    <div class="col d-flex align-items-center">
                      <span *ngIf="standbyDuration.nextUserInNextDuration">{{'bei der nächsten Bereitschaftdauer wird
                        der
                        nächste Mitarbeiter verwendet'}}
                      </span>
                    </div>
                    <div class="col d-flex align-items-center">
                      <span>{{'Von '+getWeekDay(standbyDuration.validDayFrom)+'
                        '+addZero(standbyDuration.validFrom.hour)+':'+addZero(standbyDuration.validFrom.minute)+'
                        Uhr'}}
                      </span>
                    </div>
                    <div class="col d-flex align-items-center">
                      <span>{{'Bis '+getWeekDay(standbyDuration.validDayTo)+'
                        '+addZero(standbyDuration.validTo.hour)+':'+addZero(standbyDuration.validTo.minute)+'
                        Uhr'}}
                      </span>
                    </div>
                    <div class="col-md-1 d-flex align-items-center">
                      <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-danger btn-circle btn-lg"
                        (click)="removeDuration(i)" id="removeDuration">-</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-center">
                <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-primary btn-circle btn-lg overlap-top"
                  (click)="addDuration()" id="addDuration">+</button>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
    </ngb-accordion>
    <div class="row mt-3 mb-3" *ngIf="isModal">
      <div class="col-md-12">
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success" (click)="saveStandbygroup()"
          id="StandbyGroupSave">Speichern</button>
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="btn btn-success ml-3" (click)="openCopyDialog()"
          id="StandbyGroupCopy">Kopieren</button>
        <button class="btn btn-danger float-right" (click)="close()" id="StandbyGroupCancel">Abbrechen</button>
      </div>
    </div>
  </form>
</div>