<section class="content">
    <div class="container-fluid">
        <div class="row align-items-center">
            <!-- Left-hand side: Title -->
            <div class="col-md-6 mb-2">
                <span class="mb-0 page-title">{{'MANAGE_REMINDER' | translate}}</span>
                <app-page-help-text [code]="'ADD_REMINDER'"></app-page-help-text>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="body">
            <div class="row">
                <div class="col-sm-12">
                    <form [formGroup]="reminderForm">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="subject"> {{'SUBJECT' | translate}}</label>
                                <input formControlName="subject" type="text" class="form-control" id="subject">
                                <div *ngIf="reminderForm.get('subject').touched && reminderForm.get('subject').errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('subject').errors?.required">
                                        {{'SUBJECT_IS_REQUIRED' | translate}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="message"> {{'MESSAGE' | translate}}</label>
                                <textarea class="form-control" formControlName="message" id="message"
                                    cols="30"></textarea>
                                <div *ngIf="reminderForm.get('message').touched && reminderForm.get('message').errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('message').errors?.required">
                                        {{'MESSAGE_IS_REQUIRED' | translate}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <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">
                                <mat-select panelClass="mat-select-control" placeholder="{{'SELECT_USERS' | translate}}" class="form-control"
                                    [(value)]="selectedUsers" multiple>
                                    <mat-select-trigger>
                                        <span *ngIf="selectedUsers.length > 0">
                                            {{selectedUsers[0].firstName}} {{selectedUsers[0].lastName}}
                                        </span>
                                        <span *ngIf="selectedUsers.length > 1" class="example-additional-selection">
                                            (+{{selectedUsers.length - 1}} {{selectedUsers.length === 2 ? 'other' :
                                            'others'}})
                                        </span>
                                    </mat-select-trigger>
                                    <mat-option color="primary" *ngFor="let user of users"
                                        [value]="user">{{user.firstName}}
                                        {{user.lastName}}</mat-option>
                                </mat-select>
                            </div>
                        </div>
                        <div class="row" *ngIf="reminderForm.get('isRepeated').value">
                            <div class="form-group col-md-6">
                                <label for="frequency"> {{'FREQUENCY' | translate}}</label>
                                <select class="form-control" (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 *ngIf="reminderForm.get('frequency').errors?.required">
                                    <div class="text-danger">
                                        {{'FREQUENCY_IS_REQUIRED' | translate}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" *ngIf="reminderForm.get('isRepeated').value">
                            <div class="col-md-12">
                                <div class="form-group" *ngIf="reminderForm.get('frequency').value == '0'">
                                    <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.controls['name'].value.toUpperCase() |
                                                    translate}}
                                                </mat-checkbox>
                                            </ng-container>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group" *ngIf="reminderForm.get('frequency').value == '1'">
                                    <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 class="form-group" *ngIf="reminderForm.get('frequency').value == '3'">
                                    <label for="Quarterly">{{'SELECT_QUARTER_DATE' | translate}}</label>
                                    <div id="Quarterly" class="row">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>{{'MONTH' | translate}}</th>
                                                    <th>{{'DAY' | translate}}</th>
                                                </tr>
                                            </thead>
                                            <tbody formArrayName="quarterlyReminders">
                                                <tr
                                                    *ngFor="let quarterlyReminder of quarterlyRemindersArray.controls; let i=index">
                                                    <ng-container [formGroupName]="i">
                                                        <td>{{quarterlyReminder.controls['name'].value| translate}}
                                                        </td>
                                                        <td>
                                                            <select (change)="onDateChange(quarterlyReminder)"
                                                                class="form-control" formControlName="month">
                                                                <option [value]="mon.id"
                                                                    *ngFor="let mon of quarterlyReminder.controls['monthValues'].value">
                                                                    {{mon.name | translate}}
                                                                </option>
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <select (change)="onDateChange(quarterlyReminder)"
                                                                class="form-control" 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 class="form-group" *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>{{'MONTH' | translate}}</th>
                                                    <th>{{'DAY' | translate}}</th>
                                                </tr>
                                            </thead>
                                            <tbody formArrayName="halfYearlyReminders">
                                                <tr
                                                    *ngFor="let halfYearlyReminder of halfYearlyRemindersArray.controls; let i=index">
                                                    <ng-container [formGroupName]="i">
                                                        <td>{{halfYearlyReminder.controls['name'].value |
                                                            translate}}</td>
                                                        <td>
                                                            <select (change)="onDateChange(halfYearlyReminder)"
                                                                class="form-control" formControlName="month">
                                                                <option [value]="mon.id"
                                                                    *ngFor="let mon of halfYearlyReminder.controls['monthValues'].value">
                                                                    {{mon.name | translate}}
                                                                </option>
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <select (change)="onDateChange(halfYearlyReminder)"
                                                                class="form-control" 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" *ngIf="!reminderForm.get('isRepeated').value">
                            <div class="col-md-2">
                                <label for="frequency"> {{'REMINDER_DATE' | translate}}</label>
                                <div class="input-group">
                                    <input #ref class="form-control" formControlName="startDate"
                                        [matDatepicker]="startDatePicker" placeholder="{{'REMINDER_DATE' | translate}}">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary  calendar-button" type="button"
                                            (click)="startDatePicker.open()">
                                            <i-feather name="calendar" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                    <mat-datepicker #startDatePicker></mat-datepicker>
                                </div>
                                <div
                                    *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('startDate').errors?.required">
                                        {{'DATE_IS_REQUIRED' | translate}}
                                    </div>
                                </div>
                                <div
                                    *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').errors?.owlDateTimeMin">
                                    <div class="text-danger" *ngIf="reminderForm.get('startDate').errors">
                                        {{'START_DATE_SHOULD_BE_GREATER_THEN_CURRENT_DATE_TIME' | translate}}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="startTime">{{ 'REMINDER_TIME' | translate }}</label>
                                <div class="input-group">
                                    <input class="form-control  timepicker-input" formControlName="startTime"
                                        [format]="24" [ngxTimepicker]="toggleIcon" [disableClick]="true" readonly>
                                    <div class="input-group-append">
                                        <button [for]="toggleIcon" class="btn btn-primary calendar-button"
                                            ngxMaterialTimepickerToggleIcon type="button" (click)="toggleIcon.open()">
                                            <i-feather name="clock" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                    <ngx-material-timepicker #toggleIcon></ngx-material-timepicker>
                                </div>
                                <div
                                    *ngIf="reminderForm.get('startTime')?.touched && reminderForm.get('startTime')?.errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('startTime')?.errors?.required">
                                        {{ 'TIME_IS_REQUIRED' | translate }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" *ngIf="reminderForm.get('isRepeated').value">
                            <!-- Repeated Reminder Date Picker -->
                            <div class="form-group col-md-2">
                                <label for="startDate">{{ 'REMINDER_START_DATE' | translate }} </label>
                                <div class="input-group">
                                    <input #ref class="form-control" formControlName="startDate"
                                        [matDatepicker]="startDatePicker" placeholder="{{'REMINDER_DATE' | translate}}">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary  calendar-button" type="button"
                                            (click)="startDatePicker.open()">
                                            <i-feather name="calendar" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                    <mat-datepicker #startDatePicker></mat-datepicker>
                                </div>
                                <div
                                    *ngIf="reminderForm.get('startDate').touched && reminderForm.get('startDate').errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('startDate').errors?.required">
                                        {{ 'START_DATE_IS_REQUIRED' | translate }}
                                    </div>
                                    <div class="text-danger"
                                        *ngIf="reminderForm.get('startDate').errors?.owlDateTimeMin">
                                        {{ 'START_DATE_SHOULD_BE_GREATER_THEN_CURRENT_DATE_TIME' | translate }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-md-2">
                                <label for="startTime">{{ 'REMINDER_TIME' | translate }} </label>
                                <div class="input-group">
                                    <input class="form-control  timepicker-input" formControlName="startTime"
                                        [format]="24" [ngxTimepicker]="toggleIcon" [disableClick]="true" readonly>
                                    <div class="input-group-append">
                                        <button [for]="toggleIcon" class="btn btn-primary calendar-button"
                                            ngxMaterialTimepickerToggleIcon type="button" (click)="toggleIcon.open()">
                                            <i-feather name="clock" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                    <ngx-material-timepicker #toggleIcon></ngx-material-timepicker>
                                </div>
                                <div
                                    *ngIf="reminderForm.get('startTime')?.touched && reminderForm.get('startTime')?.errors">
                                    <div class="text-danger" *ngIf="reminderForm.get('startTime')?.errors?.required">
                                        {{ 'TIME_IS_REQUIRED' | translate }}
                                    </div>
                                </div>
                            </div>

                            <!-- End Date Picker -->
                            <div class="form-group col-md-2" *ngIf="reminderForm.get('isRepeated').value">
                                <label for="endDate">{{ 'REMINDER_END_DATE' | translate }}</label>
                                <div class="input-group">
                                    <input #ref class="form-control" formControlName="endDate"
                                        [matDatepicker]="endDatePicker" placeholder="{{'REMINDER_DATE' | translate}}">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary  calendar-button" type="button"
                                            (click)="endDatePicker.open()">
                                            <i-feather name="calendar" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                    <mat-datepicker #endDatePicker></mat-datepicker>
                                </div>
                            </div>
                            <div class="form-group col-md-2" *ngIf="reminderForm.get('isRepeated').value">
                                <label for="endTime">{{ 'REMINDER_END_TIME' | translate }}</label>
                                <div class="input-group">
                                    <input class="form-control  timepicker-input" formControlName="endTime"
                                        [format]="24" [ngxTimepicker]="endTimeToggleIcon" [disableClick]="true"
                                        readonly>
                                    <div class="input-group-append">
                                        <button [for]="endTimeToggleIcon" class="btn btn-primary calendar-button"
                                            ngxMaterialTimepickerToggleIcon type="button"
                                            (click)="endTimeToggleIcon.open()">
                                            <i-feather name="clock" class="small-icon"></i-feather>
                                        </button>
                                    </div>
                                </div>
                                <ngx-material-timepicker #endTimeToggleIcon></ngx-material-timepicker>
                                <div
                                    *ngIf="reminderForm.get('endTime')?.hasError('required') && reminderForm.get('endDate')?.touched">
                                    <div class="text-danger" *ngIf="reminderForm.get('endTime')?.errors?.required">
                                        {{ 'ENDTIME_IS_REQUIRED' | translate }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2 col-md-12">
                            <button (click)="createReminder()" type="submit" class="btn btn-success btn-sm me-2">
                                <i-feather name="save" class="small-icon"></i-feather>
                                {{'SAVE' | translate}}
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/reminders']">
                                <i-feather name="x-circle" class="small-icon"></i-feather>
                                {{'CANCEL' | translate}}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="spinner-container" *ngIf="isLoading">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>