<div class="d-flex">
  <span mat-dialog-title class="dialog-title">
    {{ "ADD_REMINDER" | translate }} :: {{data?.name}}
    <app-page-help-text [code]="'ADD_REMINDER'"></app-page-help-text>
  </span>
  <button mat-icon-button class="close-button ms-auto" (click)="closeDialog()">
    <mat-icon class="close-icon" color="warn">close</mat-icon>
  </button>
</div>
<form [formGroup]="reminderForm">
  <div mat-dialog-content>
    <div class="row">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-12">
            <label class="form-label" for="subject"> {{'SUBJECT' | translate}}</label>
            <input formControlName="subject" type="text" class="form-control" id="subject">
            <div class="text-danger"
              *ngIf="reminderForm.get('subject').touched && reminderForm.get('subject')?.hasError('required')">
              {{'SUBJECT_IS_REQUIRED' | translate}}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <label class="form-label" for="message"> {{'MESSAGE' | translate}}</label>
            <textarea class="form-control" formControlName="message" id="message" cols="30"></textarea>
            <div class="text-danger"
              *ngIf="reminderForm.get('message').touched && reminderForm.get('message').hasError('required')">
              {{'MESSAGE_IS_REQUIRED' | translate}}
            </div>
          </div>
        </div>
        <div class="row m-t-10">
          <div class="col-md-4">
            <mat-checkbox color="primary" (change)="checkData($event)" formControlName="isRepeated">
              {{'REPEATE_REMINDER' | translate}}
            </mat-checkbox>
          </div>
          <div class="col-md-2">
            <mat-checkbox color="primary" formControlName="isEmailNotification">{{'SEND_EMAIL' | translate}}
            </mat-checkbox>
          </div>
          <div class="col-md-4">
            <ng-select placeholder="{{'SELECT_USERS' | translate}}" [multiple]="true" formControlName="selectedUsers">
              <ng-option *ngFor="let user of users" [value]="user">
                {{user.firstName}} {{user.lastName}}
              </ng-option>
            </ng-select>
          </div>
        </div>
        <div class="row" *ngIf="reminderForm.get('isRepeated').value">
          <div class="col-md-6">
            <label class="form-label" for="frequency"> {{'FREQUENCY' | translate}}</label>
            <select class="form-select" (change)="onFrequencyChange()" formControlName="frequency" id="frequency">
              <option value="">{{'NONE' | translate}}</option>
              <option [value]="frequencyItem?.id" *ngFor="let frequencyItem of reminderFrequencies">
                {{frequencyItem?.name.toUpperCase() | translate}}
              </option>
            </select>
            <div class="text-danger" *ngIf="reminderForm.get('frequency').hasError('required')">
              {{'FREQUENCY_IS_REQUIRED' | translate}}
            </div>
          </div>
        </div>
        <div class="row" *ngIf="reminderForm.get('isRepeated').value">
          <div class="col-md-12 m-t-10">
            <div *ngIf="reminderForm.get('frequency').value === '0'">
              <label class="form-label" for="weekDays">{{'WEEK_DAYS' | translate}}</label>
              <div id="weekDays" class="row">
                <div class="col-sm-auto mr-1" formArrayName="dailyReminders"
                  *ngFor="let dailyReminder of dailyRemindersArray.controls; let i=index">
                  <ng-container [formGroupName]="i">
                    <mat-checkbox color="primary" class="mr-1" formControlName="isActive">
                      {{dailyReminder.get('name').value.toUpperCase() | translate}}
                    </mat-checkbox>
                  </ng-container>
                </div>
              </div>
            </div>
            <div *ngIf="reminderForm.get('frequency').value === '1'">
              <label class="form-label" for="weekDay">{{'WEEK_DAYS' | translate}}</label>
              <div id="weekDay">
                <mat-radio-group formControlName="dayOfWeek">
                  <mat-radio-button class="mr-2" color="primary" [value]="day.id"
                    *ngFor="let day of dayOfWeek; let i=index"> {{day.name | translate}}</mat-radio-button>
                </mat-radio-group>
              </div>
            </div>
            <div *ngIf="reminderForm.get('frequency').value === '3'">
              <label class="form-label" for="Quarterly">{{'SELECT_QUARTER_DATE' | translate}}</label>
              <div id="Quarterly" class="row">
                <table class="table">
                  <thead>
                    <tr>
                      <th></th>
                      <th>{{'SELECT_REMINDER_MONTH' | translate}}</th>
                      <th>{{'SELECT_REMINDER_DAY' | translate}}</th>
                    </tr>
                  </thead>
                  <tbody formArrayName="quarterlyReminders">
                    <tr *ngFor="let quarterlyReminder of quarterlyRemindersArray.controls; let i=index">
                      <ng-container [formGroupName]="i">
                        <td>{{quarterlyReminder.get('name').value | translate}}</td>
                        <td>
                          <select (change)="onDateChange(quarterlyReminder)" class="form-select"
                            formControlName="month">
                            <option [value]="mon.id" *ngFor="let mon of quarterlyReminder.get('monthValues').value">
                              {{mon.name | translate}}
                            </option>
                          </select>
                        </td>
                        <td>
                          <select (change)="onDateChange(quarterlyReminder)" class="form-select" formControlName="day">
                            <option [value]="day" *ngFor="let day of days">
                              {{day}}
                            </option>
                          </select>
                          <div
                            *ngIf="quarterlyReminder.get('day').touched && quarterlyReminder.hasError('invalidDate')">
                            <div class="text-danger">
                              {{'PLEASE_SELECT_VALID_DAY' | translate}}
                            </div>
                          </div>
                        </td>
                      </ng-container>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div *ngIf="reminderForm.get('frequency').value === '4'">
              <label for="HalfYearly">{{'SELECT_DATE' | translate}}</label>
              <div id="HalfYearly" class="row">
                <table class="table">
                  <thead>
                    <tr>
                      <th></th>
                      <th>{{'SELECT_REMINDER_MONTH' | translate}}</th>
                      <th>{{'SELECT_REMINDER_DAY' | translate}}</th>
                    </tr>
                  </thead>
                  <tbody formArrayName="halfYearlyReminders">
                    <tr *ngFor="let halfYearlyReminder of halfYearlyRemindersArray.controls; let i=index">
                      <ng-container [formGroupName]="i">
                        <td>{{halfYearlyReminder.get('name').value | translate}}</td>
                        <td>
                          <select (change)="onDateChange(halfYearlyReminder)" class="form-select"
                            formControlName="month">
                            <option [value]="mon.id" *ngFor="let mon of halfYearlyReminder.get('monthValues').value">
                              {{mon.name | translate}}
                            </option>
                          </select>
                        </td>
                        <td>
                          <select (change)="onDateChange(halfYearlyReminder)" class="form-select" formControlName="day">
                            <option [value]="day" *ngFor="let day of days">
                              {{day}}
                            </option>
                          </select>
                          <div
                            *ngIf="halfYearlyReminder.get('day').touched && halfYearlyReminder.hasError('invalidDate')">
                            <div class="text-danger">
                              {{'PLEASE_SELECT_VALID_DAY' | translate}}
                            </div>
                          </div>
                        </td>
                      </ng-container>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col-md-4" *ngIf="!reminderForm.get('isRepeated').value">
            <label class="form-label" for="frequency"> {{'REMINDER_DATE' | translate}}</label>
            <input class="form-control" [owlDateTimeTrigger]="dt2" [min]="minDate" formControlName="startDate"
              [owlDateTime]="dt2" placeholder="{{'DATE' | translate}}">
            <div class="text-danger"
              *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').errors?.['required']">
              {{'DATE_IS_REQUIRED' | translate}}
            </div>
            <div class="text-danger"
              *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').hasError('owlDateTimeMin')">
              {{'START_DATE_SHOULD_BE_GREATER_THEN_CURRENT_DATE_TIME' | translate}}
            </div>
            <owl-date-time #dt2></owl-date-time>
          </div>
          <div class="col-md-6" *ngIf="reminderForm.get('isRepeated').value">
            <label class="form-label" for="frequency"> {{'REMINDER_START_DATE' | translate}}</label>
            <input class="form-control" [owlDateTimeTrigger]="dt3" [min]="minDate" formControlName="startDate"
              [owlDateTime]="dt3" placeholder="{{'START_DATE' | translate}}">
            <div class="text-danger"
              *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').hasError('required')">
              {{'START_DATE_IS_REQUIRED' | translate}}
            </div>
            <div class="text-danger"
              *ngIf="reminderForm.get('startDate').touched  && reminderForm.get('startDate').hasError('owlDateTimeMin')">
              {{'START_DATE_SHOULD_BE_GREATER_THEN_CURRENT_DATE_TIME' | translate}}
            </div>
            <owl-date-time #dt3></owl-date-time>
          </div>
          <div class="col-md-6" *ngIf="reminderForm.get('isRepeated').value">
            <label class="form-label" for="frequency">{{'REMINDER_END_DATE' | translate}}</label>
            <input class="form-control" [owlDateTimeTrigger]="dt4" formControlName="endDate" [owlDateTime]="dt4"
              placeholder="{{'END_DATE' | translate}}">
            <owl-date-time #dt4></owl-date-time>
          </div>
        </div>
      </div>
    </div>
    <div class="m-t-10">
      <button (click)="createReminder()" type="submit" class="btn btn-success btn-sm m-r-10">
        <i-feather name="save" class="small-icon"></i-feather>
        {{'SAVE' | translate}}
      </button>
      <button type="button" class="btn btn-danger btn-sm m-r-10" (click)="onCancel()">
        <i-feather name="x-circle" class="small-icon"></i-feather>
        {{'CANCEL' | translate}}
      </button>
    </div>
  </div>
</form>