<div class="module-container prevent-select animated fadeIn">
  <div id="navigation" class="mb-8 animated fadeIn" style="float: left; margin: 20px;">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" matRipple (click)="goBack(1)">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </div>

  <div class="menu-title animated fadeIn">
    <span>Configuración de campos</span>
  </div>

  <div class="form-fields-config-container form_fields_config_container_row">
    <div class="form_fields_config_panel_container_when_row">
      <div class="form-row">
        <div class="form-cell C04 mt-4">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Tipo de registro</mat-label>
            <mat-select #tipoRegistro value="RCM" (valueChange)="formTypeChange(tipoRegistro.value)">
              <mat-option value="RCM">Registro con mediciones</mat-option>
              <mat-option value="RSM">Registro sin mediciones</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <h2>Vista previa del formulario actual</h2>
      @if (tipoRegistro.value == 'RCM') {
        <!-- ACTULIZAR -->
        <div class="form-row">
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Responsable de atender la solicitud</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Gerencia de seguridad</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C12">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Descripción de la intervención</mat-label>
              <textarea matInput rows="4" style="resize: none;"></textarea>
            </mat-form-field>
          </div>
          <div class="form-cell C12">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Equipamiento relacionado</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Fecha de inicio de la falla</mat-label>
              <input matInput>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Tiempo estimado de la solución</mat-label>
              <input matInput>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Prioridad</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Contador relacionado</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Clasificación</mat-label>
              <input matInput>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Personal involucrado</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Tipo de activación</mat-label>
              <input matInput>
            </mat-form-field>
          </div>
          <div class="form-cell C03">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Refacciones y herramientas necesarias</mat-label>
              <mat-select>
                <mat-option>PRUEBA</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
        <div class="section-divider">Campos personalizados</div>
        <div class="form-row" [formGroup]="customFieldsFormGroup">
          @for(field of customFields; track field) {
            <div class="form-cell C04">
              <mat-form-field appearance="outline" class="w-100" *ngIf="field.fieldType == 'TE-1'" >
                <mat-label>{{ field.label }}</mat-label>
                <input matInput [type]="field.validators.includes('CONT') && customFieldPassVisibility[field.fieldID] ? 'password' : 'text'" 
                [formControlName]="field.fieldID + 'Control'" (input)="validateValue(customControl.value)" #customControl>
                <button mat-icon-button matSuffix (click)="customFieldPassVisibility[field.fieldID] = !customFieldPassVisibility[field.fieldID]" 
                *ngIf="field.validators.includes('CONT')">
                  <mat-icon>{{ customFieldPassVisibility[field.fieldID] ? 'visibility' : 'visibility_off' }}</mat-icon>
                </button>
              </mat-form-field>
            </div>
          }
        </div>
      } @else {
        <div class="form-row animated fadeIn fast w-100 mb-32" [formGroup]="noMeasuresFormGroup">
          <mat-progress-bar mode="indeterminate" *ngIf="searchingNoMeasuresFormFields"></mat-progress-bar>

          <div class="has-error animated fadeIn fast" *ngIf="!searchingNoMeasuresFormFields && noMeasuresFormFieldsHasError">
            <mat-icon  class="red_primary_font">error</mat-icon>
            <h3>{{ noMeasuresFormFieldsErrorStr }}</h3>
          </div>
          
          @if (!searchingNoMeasuresFormFields && !noMeasuresFormFieldsHasError) {
            @if (noMeasuresFormFields.length == 0) {
              <p class="no-form-fields-added">El formulario no cuenta con campos agregados.</p>
            } @else {
              @for (field of noMeasuresFormFields; track field) {
                <div class="form-cell C04 animated fadeIn fast">
                  @if (field.fieldType == 'TE-1'){
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-label>{{ field.label }}</mat-label>
                      <input 
                        matInput 
                        #input
                        [formControlName]="field.fieldID + 'Control'" 
                        [readonly]="field.validators.includes('HORA')" 
                        [type]="field.validators.includes('CONT') && !noMeasuresFormVisibilities[field.fieldID] ? 'password' : 'text'"
                        (input)="validateInput(input.value, field.fieldID)"
                      >
                      <a mat-icon-button matSuffix *ngIf="field.validators.includes('CONT')" 
                      (click)="noMeasuresFormVisibilities[field.fieldID] = !noMeasuresFormVisibilities[field.fieldID]">
                        <mat-icon>{{ noMeasuresFormVisibilities[field.fieldID] ? 'visibility_off' : 'visibility' }}</mat-icon>
                      </a>
                      <button mat-icon-button matSuffix *ngIf="field.validators.includes('HORA')" (click)="openHourSelector(input.value, field.fieldID + 'Control')" 
                      [disabled]="!field.enabled">
                        <mat-icon>schedule</mat-icon>
                      </button>
                      <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                        Este campo es requerido.
                      </mat-error>
                      <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('minlength')">
                        Longitud mínima de {{ field.minLength }} caracteres.
                      </mat-error>
                      <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('maxlength')">
                        Longitud máxima de {{ field.maxLength }} caracteres.
                      </mat-error>
                      <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('email')">
                        Formato inválido.
                      </mat-error>
                    </mat-form-field>
                  } @else if (field.fieldType == 'FE-2') {
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-label>{{ field.label }}</mat-label>
                      <input
                        matInput
                        #inputDate
                        [matDatepicker]="picker"
                        [formControlName]="field.fieldID + 'Control'" 
                      >
                      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                      <mat-datepicker #picker></mat-datepicker>
                      <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                        Este campo es requerido.
                      </mat-error>
                    </mat-form-field>
                  } @else if (field.fieldType == 'CT-3') {
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-label>{{ field.label }}</mat-label>
                      <textarea 
                        matInput
                        #inputTextArea
                        [formControlName]="field.fieldID + 'Control'" 
                        [style.resize]="field.allowResize" 
                        [cols]="field.cols"
                        [rows]="field.rows"
                        (input)="validateInput(inputTextArea.value, field.fieldID)"
                      ></textarea>
                    </mat-form-field>
                  } @else if (field.fieldType == 'SE-4') {
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-label>{{ field.label }}</mat-label>
                      <mat-select [multiple]="field.isMultiple" [formControlName]="field.fieldID + 'Control'" #inputSelector 
                      (valueChange)="validateInput(inputSelector.value, field.fieldID)">
                        <mat-option *ngIf="field.includeEmptyOption" value="N">--Ninguno--</mat-option>
                        <mat-option *ngFor="let option of field.selectorOptions" [value]="option.value">
                          {{ option.label }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                  } @else if (field.fieldType == 'CL-5') {
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-label>{{ field.label }}</mat-label>
                      <input matInput type="text" [formControlName]="field.fieldID + 'Control'">
                      <ngx-colors 
                        style="margin-left: -16px;" 
                        matSuffix 
                        ngx-colors-trigger 
                        [formControlName]="field.fieldID + 'ColorControl'"
                      ></ngx-colors>
                    </mat-form-field>
                  }
                </div>
              }
            }
          }
        </div>
      }
      <div class="form-row">
        <div class="form-cell C12 mt-4 center_horizontal">
          <button mat-flat-button class="mb-20 mr-8" (click)="saveFormFields()" [disabled]="searchingNoMeasuresFormFields || savingForm">
            <span>{{ savingForm ? 'Guardando cambios...' : 'Guardar cambios' }}</span>
            <mat-icon>save</mat-icon>
          </button>
          <button mat-flat-button class="mb-20" color="warn" (click)="openDeleteSelector()" [disabled]="searchingNoMeasuresFormFields || savingForm">
            <span>Eliminar campo</span>
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </div>
    </div>
    <div class="form_fields_config_panel_container_when_row">
      <div class="section-divider">Vista previa de la configuración del campo</div>
      <div class="form-row">
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100" *ngIf="inputTypeSelector == 1" >
            <mat-label>{{ fieldLabel.value }}</mat-label>
            <input 
              matInput 
              [type]="validators.value.includes('CONT') && obscurePreviewFieldText ? 'password' : 'text'" 
              [formControl]="previewFieldControl" 
              (input)="validateValue(previewField.value)" 
              #previewField
              [readonly]="validators.value.includes('HORA')"
            >
            <button mat-icon-button matSuffix (click)="obscurePreviewFieldText = !obscurePreviewFieldText" *ngIf="validators.value.includes('CONT')">
              <mat-icon>{{ obscurePreviewFieldText ? 'visibility' : 'visibility_off' }}</mat-icon>
            </button>
            <button mat-icon-button matSuffix *ngIf="validators.value.includes('HORA')" (click)="openPreviewHourSelector(previewField.value)" 
            [disabled]="!this.fieldConfigFormGroup.controls['enabledControl'].value">
              <mat-icon>schedule</mat-icon>
            </button>
          </mat-form-field>
          <mat-form-field appearance="outline" class="w-100" *ngIf="inputTypeSelector == 2">
            <mat-label>{{ fieldLabel.value }}</mat-label>
            <input matInput type="text" [formControl]="previewFieldControl" [matDatepicker]="datePicker">
            <mat-datepicker-toggle matIconSuffix [for]="datePicker"></mat-datepicker-toggle>
            <mat-datepicker #datePicker></mat-datepicker>
          </mat-form-field>
          <mat-form-field appearance="outline" class="w-100" *ngIf="inputTypeSelector == 3">
            <mat-label>{{ fieldLabel.value }}</mat-label>
            <textarea 
              matInput 
              [formControl]="previewFieldControl" 
              (input)="validateValue(previewField.value)" 
              #previewField 
              [style.resize]="this.fieldConfigFormGroup.controls['allowResizeControl'].value ? 'both' : 'none'" 
              [cols]="cols.value" 
              [rows]="rows.value"
            ></textarea>
          </mat-form-field>
          <mat-form-field appearance="outline" class="w-100" *ngIf="inputTypeSelector == 4">
            <mat-label>{{ fieldLabel.value }}</mat-label>
            <mat-select [formControl]="previewFieldControl" *ngIf="!this.fieldConfigFormGroup.controls['isMultipleControl'].value">
              <mat-option *ngIf="this.fieldConfigFormGroup.controls['inlcudeEmptyOptionControl'].value">
                --Ninguno--
              </mat-option>
              <mat-option *ngFor="let option of selectorOptions" [value]="option.value">
                {{ option.label }}
              </mat-option>
            </mat-select>
            <mat-select [formControl]="previewFieldControl" *ngIf="this.fieldConfigFormGroup.controls['isMultipleControl'].value" multiple>
              <mat-option *ngIf="this.fieldConfigFormGroup.controls['inlcudeEmptyOptionControl'].value">
                --Ninguno--
              </mat-option>
              <mat-option *ngFor="let option of selectorOptions" [value]="option.value">
                {{ option.label }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" class="w-100" *ngIf="inputTypeSelector == 5">
            <mat-label>{{ fieldLabel.value }}</mat-label>
            <input matInput type="text" [formControl]="previewFieldControl">
            <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger [formControl]="previewColorFieldControl"></ngx-colors>
          </mat-form-field>
        </div>
      </div>
      <div class="section-divider">Configuración del campo</div>
      <div class="form-row" [formGroup]="fieldConfigFormGroup">
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Tipo de campo</mat-label>
            <mat-select #inputType (valueChange)="inputTypeChange(inputType.value)" formControlName="fieldTypeControl">
              <mat-option value="TE-1">Texto</mat-option>
              <mat-option value="FE-2">Fecha</mat-option>
              <mat-option value="CT-3">Caja de texto</mat-option>
              <mat-option value="SE-4">Selector</mat-option>
              <mat-option value="CL-5">Color</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Etiqueta</mat-label>
            <input matInput #fieldLabel formControlName="labelControl">
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Validadores</mat-label>
            <mat-select multiple #validators (valueChange)="validatorsChange(validators.value)" formControlName="validatorsControl">
              <mat-option value="CARE">Campo requerido</mat-option>
              <mat-option value="LOMI" [disabled]="inputTypeSelector >= 4 || inputTypeSelector == 2 || validators.value.includes('HORA')">
                Longitud mínima
              </mat-option>
              <mat-option value="LOMA" [disabled]="inputTypeSelector >= 4 || inputTypeSelector == 2 || validators.value.includes('HORA')">
                Longitud máxima
              </mat-option>
              <mat-option value="NUME" [disabled]="inputTypeSelector != 1 || validators.value.includes('COEL') || validators.value.includes('CONT') || 
              validators.value.includes('HORA')">
                Numérico
              </mat-option>
              <mat-option value="COEL" [disabled]="inputTypeSelector != 1 || validators.value.includes('NUME') || validators.value.includes('CONT') || 
              validators.value.includes('HORA')">
                Correo electrónico
              </mat-option>
              <mat-option value="CONT" [disabled]="inputTypeSelector != 1 || validators.value.includes('NUME') || validators.value.includes('COEL') || 
              validators.value.includes('HORA')">
                Contraseña
              </mat-option>
              <mat-option value="HORA" [disabled]="inputTypeSelector != 1 || validators.value.includes('LOMI') || validators.value.includes('LOMA') || 
              validators.value.includes('NUME') || validators.value.includes('COEL') || validators.value.includes('CONT')">
                Hora
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Longitud mínima</mat-label>
            <input matInput formControlName="minLengthControl" #minLength (input)="lengthChange('minLengthControl', minLength.value)">
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Longitud máxima</mat-label>
            <input matInput formControlName="maxLengthControl" #maxLength (input)="lengthChange('maxLengthControl', maxLength.value)">
          </mat-form-field>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="includeDecimalControl" class="mb-20">
            Incluir decimales
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Cantidad de filas</mat-label>
            <input matInput formControlName="rowsControl" #rows (input)="sizeChange('rowsControl', rows.value)">
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Cantidad de columnas</mat-label>
            <input matInput formControlName="colsControl" #cols (input)="sizeChange('colsControl', cols.value)">
          </mat-form-field>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="allowResizeControl" class="mb-20">
            Permitir resize
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="defaultDateControl" class="mb-20" (change)="defaultDateChange($event)">
            Fecha por defecto
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="enabledControl" class="mb-20" (change)="enabledChange($event)">
            Modificable
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="defaultHourControl" class="mb-20" (change)="defaultHourChange($event)">
            Hora por defecto
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Valor de la opción</mat-label>
            <input matInput formControlName="optionValueControl">
          </mat-form-field>
        </div>
        <div class="form-cell C04">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Etiqueta de la opción</mat-label>
            <input matInput formControlName="optionTagControl">
          </mat-form-field>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <button mat-flat-button color="primary" class="mb-20" [disabled]="inputType.value != 'SE-4'" 
          (click)="addSelectorOption()">
            <mat-icon>add</mat-icon> Añadir opción
          </button>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="inlcudeEmptyOptionControl" class="mb-20">
            Incluir opción vacía
          </mat-slide-toggle>
        </div>
        <div class="form-cell C04 center_horizontal center_vertical">
          <mat-slide-toggle formControlName="isMultipleControl" class="mb-20">
            Selector múltiple
          </mat-slide-toggle>
        </div>
      </div>
      <div class="section-divider animated fadeIn" *ngIf="inputType.value == 'SE-4'">Opciones del selector</div>
      <div class="selector-options-container animated fadeIn mb-20" *ngIf="inputType.value == 'SE-4' && !addingOption">
        <div class="selector-option animated fadeIn" *ngFor="let option of selectorOptions; let i = index"
        [ngClass]="{ selector_option_divider: i < selectorOptions.length - 1 }">
          <div class="option-info">
            <b>Valor: </b>{{ option.valueDec }}. <b>Etiqueta: </b>{{ option.label }} ({{ option.valueDec }})
          </div>
          <button mat-mini-fab color="primary" class="override_no_shadow mr-8" (click)="openSelectorOptionEditor(option.value)">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-mini-fab color="warn" class="override_no_shadow" (click)="openConfirmDelete(option.value)">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
        <div class="empty-selector-options animated fadeIn" *ngIf="selectorOptions.length == 0">
          Aún no se han agregado opciones.
        </div>
      </div>
      <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn" *ngIf="inputType.value == 'SE-4' && addingOption"></mat-progress-bar>
      <div class="form-row">
        <div class="form-cell C04 center_horizontal center_vertical">
          <button mat-flat-button color="primary" class="mb-20" [disabled]="fieldConfigFormGroup.invalid" 
          (click)="addFormField()">
            <mat-icon>save</mat-icon> Guardar campo
          </button>
        </div>
      </div>
    </div>
  </div>
</div>