<main class="main-container animated fadeIn">
  <app-btn-navigate [navigate]="'/sam/ANFA/CLSI'" [widthPosition]="'5%'" [nameButton]="'Lista de Síntomas'" />

  <mat-card class="override-card override-elevation-z8" style="width: 90%;" [style.display]=" !isLoading ? 'block' : 'none' ">
    <section class="override-section" style="overflow: auto; height: calc(100% - 69px) !important;">
      @if (isLoadingForm) {
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      }
      <nav class="override-nav">
        <mat-card-title class="mat-card-title align-center"> {{ titleDialog }}  </mat-card-title>
      </nav>
      <form class="override_content_flex mt-10" style="padding: 10px 15px 0 15px; width: calc(100% - 30px);" [formGroup]="formGroup">
        <div class="col-flex-4">
          <mat-form-field appearance="outline">
            <mat-label>Nombre del síntoma</mat-label>
            <input matInput formControlName="NOMBRE_SINTOMA" placeholder="Ingrese el Nombre del síntoma">
            <mat-icon matSuffix>device_thermostat</mat-icon>
            @if (formGroup.controls['NOMBRE_SINTOMA'].hasError('required')) {
              <mat-error
                title="El campo Nombre del Síntoma es obligatorio.">
                El campo <b>Nombre del Síntoma</b> es obligatorio.
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-4">
          <mat-form-field appearance="outline">
            <mat-label>Clasificación</mat-label>
            <mat-select formControlName="CLASIFICACION">
              <mat-option value="Bajo"> Bajo </mat-option>
              <mat-option value="Intermedio"> Intermedio </mat-option>
              <mat-option value="Alto"> Alto </mat-option>
              <mat-option value="Crítico"> Crítico </mat-option>
            </mat-select>
            <mat-icon matSuffix>traffic</mat-icon>
            @if (formGroup.controls['CLASIFICACION'].hasError('required')) {
              <mat-error
                title="El campo Clasificación es requerido">
                El campo <b>Clasificación</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-4">
          <mat-form-field appearance="outline">
            <mat-label>Causa del síntoma</mat-label>
            <input matInput type="text" formControlName="CAUSA" placeholder="Ingrese la Causa del síntoma" maxlength="50">
            <mat-icon matSuffix>bug_report</mat-icon>
            @if (formGroup.controls['CAUSA'].hasError('required')) {
              <mat-error
                title="El campo Causa del síntoma es requerido">
                El campo <b>Causa del síntoma</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-6">
          <mat-form-field appearance="outline">
            <mat-label>Límite de valor teórico</mat-label>
            <input matInput type="text" formControlName="LIMITE_VALOR" placeholder="Ingrese el Límite de valor teórico" maxlength="50">
            <mat-icon matSuffix>query_stats</mat-icon>
            @if (formGroup.controls['LIMITE_VALOR'].hasError('required')) {
              <mat-error
                title="El campo Límite de valor teórico es requerido">
                El campo <b>Límite de valor teórico</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-6">
          <mat-form-field appearance="outline">
            <mat-label>Tipo de medida</mat-label>
            <input matInput type="text" placeholder="Ingrese el tipo de medida" formControlName="ID_MEDIDA" [matAutocomplete]="auto">
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
              @for (option of filteredOptionsMeasures | async; track option) {
                <mat-option [value]="option"> {{ option }} </mat-option>
              }
            </mat-autocomplete>
            <mat-icon matSuffix>straighten</mat-icon>
            @if (formGroup.controls['ID_MEDIDA'].hasError('required')) {
              <mat-error
                title="El campo Tipo de Medida es requerido">
                El campo <b>Tipo de Medida</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-6">
          <mat-form-field appearance="outline">
            <mat-label>Descripción del síntoma</mat-label>
            <textarea matInput type="text" formControlName="DESCRIPCION" placeholder="Ingrese la Descripción del síntoma" maxlength="65535"></textarea>
            <mat-icon matSuffix>subject</mat-icon>
            @if (formGroup.controls['DESCRIPCION'].hasError('required')) {
              <mat-error
                title="El campo Descripción del síntoma es requerido">
                El campo <b>Descripción del síntoma</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
        <div class="col-flex-6">
          <mat-form-field appearance="outline">
            <mat-label>Solución del síntoma</mat-label>
            <textarea matInput type="text" formControlName="SOLUCION" placeholder="Ingrese la Solución del síntoma" maxlength="65535"></textarea>
            <mat-icon matSuffix>checklist_rtl</mat-icon>
            @if (formGroup.controls['SOLUCION'].hasError('required')) {
              <mat-error
                title="El campo Solución del síntoma es requerido">
                El campo <b>Solución del síntoma</b> es requerido
              </mat-error>
            }
          </mat-form-field>
        </div>
      </form>
      <mat-divider></mat-divider>
      <div class="override_content_flex">
        <div class="col-flex-6"> 
          <div class="mt-22" style="display:flex; justify-content: space-between; align-items: center;">
            <div class="mb-22 pl-16">
              <span class="black_font"> Seleccione equipamientos relacionados al síntoma: </span> <br>
              <span class="black_font">Archivos seleccionados: {{ selectionEquipment.selected.length }}</span>
            </div>
            <app-search-card
              [dataSource]="dataSourceEquipment"
              [disabled]="isLoading"
              (dataValue)="dataSourceEquipment = $event"
            />
          </div>

          <table mat-table [dataSource]="dataSourceEquipment" matSort #tableEquipment>
            <ng-container matColumnDef="SELECT">
              <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? toggleAllRowsEquipment() : null"
                              [checked]="selectionEquipment.hasValue() && isAllSelectedEquipment()"
                              [indeterminate]="selectionEquipment.hasValue() && !isAllSelectedEquipment()"
                              [aria-label]="checkboxLabelEquipment()">
                </mat-checkbox>
              </th>
              <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()"
                              (change)="$event ? selectionEquipment.toggle(row) : null"
                              [checked]="selectionEquipment.isSelected(row)"
                              [aria-label]="checkboxLabelEquipment(row)">
                </mat-checkbox>
              </td>
            </ng-container>
            
            <ng-container matColumnDef="CODIGO">
              <th mat-header-cell *matHeaderCellDef> Código del Equipamiento </th>
              <td mat-cell *matCellDef="let element" style="text-wrap: wrap; word-break: break-all;"> {{element.CODIGO}} </td>
            </ng-container>
          
            <ng-container matColumnDef="TIPO">
              <th mat-header-cell *matHeaderCellDef> Tipo de Equipamiento </th>
              <td mat-cell *matCellDef="let element"> {{element.TIPO}} </td>
            </ng-container>
            
            <ng-container matColumnDef="MODELO">
              <th mat-header-cell *matHeaderCellDef> Modelo del Equipamiento </th>
              <td mat-cell *matCellDef="let element"> {{element.MODELO}} </td>
            </ng-container>
          
            <tr mat-header-row *matHeaderRowDef="displayedColumnsEquipment"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumnsEquipment;"
                class="example-element-row"
                (click)="selectionEquipment.toggle(row)">
            </tr>
          </table>
          <mat-paginator #paginatorEquipment showFirstLastButtons [pageSize]="10"></mat-paginator>
        </div>

        <div class="col-flex-6"> 
          <div class="mt-22" style=" display:flex; justify-content: space-between; align-items: center;">
            <div class="mb-22 pl-16">
              <span class="black_font"> Seleccione las fallas relacionadas al síntoma: </span> <br>
              <span class="black_font">Archivos seleccionados: {{ selectionFailure.selected.length }}</span>
            </div>
            <app-search-card
              [dataSource]="dataSourceFailure"
              [disabled]="isLoading"
              (dataValue)="dataSourceFailure = $event"
            />
          </div>

          <table mat-table [dataSource]="dataSourceFailure" matSort #tableFailure>
            <ng-container matColumnDef="SELECT">
              <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? toggleAllRowsFailure() : null"
                              [checked]="selectionFailure.hasValue() && isAllSelectedFailure()"
                              [indeterminate]="selectionFailure.hasValue() && !isAllSelectedFailure()"
                              [aria-label]="checkboxLabelFailure()">
                </mat-checkbox>
              </th>
              <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()"
                              (change)="$event ? selectionFailure.toggle(row) : null"
                              [checked]="selectionFailure.isSelected(row)"
                              [aria-label]="checkboxLabelFailure(row)">
                </mat-checkbox>
              </td>
            </ng-container>
            
            <ng-container matColumnDef="ID_FALLA">
              <th mat-header-cell *matHeaderCellDef> ID </th>
              <td mat-cell *matCellDef="let element"> #{{element.ID_FALLA}} </td>
            </ng-container>
          
            <ng-container matColumnDef="NOMBRE_FALLA">
              <th mat-header-cell *matHeaderCellDef> Nombre de Falla </th>
              <td mat-cell *matCellDef="let element" style="text-wrap: wrap; word-break: break-all;"> {{element.NOMBRE_FALLA}} </td>
            </ng-container>
            
            <ng-container matColumnDef="NIVEL_CRITICIDAD">
              <th mat-header-cell *matHeaderCellDef> Críticidad </th>
              <td mat-cell *matCellDef="let element"> 
                <button mat-flat-button class="white_font" [class]="resourcesService.setChipList(element.NIVEL_CRITICIDAD)">
                  {{ element.NIVEL_CRITICIDAD }}
                </button>
              </td>
            </ng-container>
            
            <ng-container matColumnDef="CAUSA_FALLA">
              <th mat-header-cell *matHeaderCellDef> Causa </th>
              <td mat-cell *matCellDef="let element"> {{element.CAUSA_FALLA}} </td>
            </ng-container>
          
            <tr mat-header-row *matHeaderRowDef="displayedColumnsFailure"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumnsFailure;"
                class="example-element-row"
                (click)="selectionFailure.toggle(row)">
            </tr>
          </table>
          <mat-paginator #paginatorFailure showFirstLastButtons [pageSize]="10"></mat-paginator>
        </div>
      </div>
    </section>
    <mat-divider></mat-divider>
    <div class="footer-actions">
      <app-btn-resize 
        class="ml-8" 
        [disabled]="isLoading || isLoadingForm || formGroup.invalid"
        [backgroundColor]="'primary'" 
        [textColor]="'white_font'" 
        [nameButton]="'Guardar'" 
        [icon]="'save'"
        (click)="saveForm()"
      />
    </div>
  </mat-card>

  <mat-card class="override-card override-elevation-z8" style="width: 90%;" [style.display]=" isLoading ? 'block' : 'none' ">
    <app-loading-card
      [isLoading]="isLoading"
      [txtLoading]="'Cargando la información del formulario'"
    />
  </mat-card>

</main>
