@if (isLoadingForm) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title>{{ titleForm }}</h2>
<mat-dialog-content>

  @if (!isLoading) {
      <form class="override_content_flex" [formGroup]="formGroup">
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Nombre de la Actividad</mat-label>
                  <input matInput formControlName="ACTIVIDAD" placeholder="Ingrese el nombre de la actividad" maxlength="50">
                  <mat-icon matSuffix>rowing</mat-icon>
                  @if (formGroup.controls['ACTIVIDAD'].hasError('required')) {
                      <mat-error  
                          title="El campo Nombre de la Actividad es obligatorio.">
                          El campo <b>Nombre de la Actividad</b> es obligatorio.
                      </mat-error>
                  }
              </mat-form-field>
          </div>
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Clasificación</mat-label>
                  <mat-select formControlName="CLASIFICACION">
                      <mat-option value="Crítica">Crítica</mat-option>
                      <mat-option value="Alta">Alta</mat-option>
                      <mat-option value="Media">Media</mat-option>
                      <mat-option value="Baja">Baja</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>traffic</mat-icon>
                  @if (formGroup.controls['ACTIVIDAD'].hasError('required')) {
                      <mat-error  
                          title="El campo Clasificación es obligatorio.">
                          El campo <b>Clasificación</b> es obligatorio.
                      </mat-error>
                  }
              </mat-form-field>
          </div>
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Fecha de Inicio</mat-label>
                  <input matInput [matDatepicker]="picker" formControlName="FECHA_INICIO" readonly>
                  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
          </div>
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Hora de Inicio</mat-label>
                  <input matInput formControlName="HORA_INICIO" readonly>
                  <button mat-icon-button matSuffix (click)="openClock('HORA_INICIO')">
                      <mat-icon>schedule</mat-icon>
                  </button>
              </mat-form-field>
          </div>
  
          @if (formGroup.controls['PERIODICIDAD'].value === 'NR') {
              <div class="col-flex-6">
                  <mat-form-field appearance="outline">
                      <mat-label>Fecha de Final Esperada</mat-label>
                      <input matInput [matDatepicker]="picker" formControlName="FECHA_FINAL" readonly>
                      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                      <mat-datepicker #picker></mat-datepicker>
                  </mat-form-field>
              </div>
              <div class="col-flex-6">
                  <mat-form-field appearance="outline">
                      <mat-label>Hora de Final Esperada</mat-label>
                      <input matInput formControlName="HORA_FINAL" readonly>
                      <button mat-icon-button matSuffix (click)="openClock('HORA_FINAL')">
                          <mat-icon>schedule</mat-icon>
                      </button>
                  </mat-form-field>
              </div>
          }
          
  
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Tipo de Actividad</mat-label>
                  <mat-select formControlName="TIPO_ACTIVIDAD">
                      @for (typeActivity of arrTypeActivity; track typeActivity) {
                          <mat-option [value]="typeActivity.type">{{ typeActivity.activity }}</mat-option>
                      }
                  </mat-select>
                  <mat-icon matSuffix>tour</mat-icon>
              </mat-form-field>  
          </div>
          <div class="col-flex-6">
              @if (!isLoadingMaintenance) {
                  <mat-form-field appearance="outline">
                      <mat-label>Número de Orden</mat-label>
                      <input matInput formControlName="ID_ORDEN" [matAutocomplete]="autocompleteOrder">
                      <mat-autocomplete autoActiveFirstOption #autocompleteOrder>
                          @for (maintenance of filteredMaintenance | async; track maintenance) {
                              <mat-option [value]="maintenance"> {{ maintenance }} </mat-option>
                          }
                      </mat-autocomplete>
                      <mat-icon matSuffix>construction</mat-icon>
                      @if (formGroup.controls['ID_ORDEN'].hasError('required')) {
                          <mat-error  
                              title="El campo Número de Orden es obligatorio.">
                              El campo <b>Número de Orden</b> es obligatorio.
                          </mat-error>
                      }
                  </mat-form-field>
              } @else {
                  <div class="container-load-form">
                      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                  </div>
              }
          </div>
          
  
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Periodicidad</mat-label>
                  <mat-select formControlName="PERIODICIDAD">
                      <mat-option value="NR">No se repite</mat-option>
                      <mat-option value="SE">Semanalmente los {{ showPeriodicity('SE') }}</mat-option>
                      <mat-option value="ME">Mensualmente los días {{ showPeriodicity('ME') }}</mat-option>
                      <mat-option value="AN">Anualmente el {{ showPeriodicity('AN') }}</mat-option>
                      <mat-option value="TD">Todos los días a partir del {{ showPeriodicity('TD') }}</mat-option>
                      <mat-option value="PE">Personalizado</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>edit_calendar</mat-icon>
                  @if (hintPernsonality !== '') {
                      <mat-hint>{{ hintPernsonality }}</mat-hint>
                  }
              </mat-form-field>  
          </div>
  
          <div class="col-flex-6">
              <mat-form-field appearance="outline">
                  <mat-label>Color para la Actividad</mat-label>
                  <input matInput formControlName="COLOR">
                  <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger formControlName="COLOR"></ngx-colors>
              </mat-form-field>
          </div>
  
          <div class="col-flex-12">
              <mat-form-field appearance="outline">
                  <mat-label>Descripción de Actividad</mat-label>
                  <textarea matInput formControlName="DESCRIPCION" placeholder="Ingrese la descripción de las actividades a realizar."></textarea>
                  <mat-icon matSuffix>subject</mat-icon>
              </mat-form-field>
          </div>
      </form>
  } @else {
      <app-loading-card [isLoading]="isLoading" [txtLoading]="'Cargando la información del formulario'" />
  }


</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false" [disabled]="isLoading || isLoadingForm || isLoadingMaintenance">Cancelar</button>
  <button mat-button (click)="save()" [disabled]="formGroup.invalid || isLoading || isLoadingForm || isLoadingMaintenance">Guardar</button>
</mat-dialog-actions>
