<main class="main-container animated fadeIn" style="width: 65%;">

  <app-btn-navigate navigate="/sam/ANFA"  nameButton="Menú de análisis de fallas" />

  <mat-card class="override-card-form override-elevation-z8">
      @if (isLoadingFilter || isLoadingForm) {
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      }

      <section>
          <nav class="override-nav">
              <mat-card-title class="mat-card-title centre">Análisis con filtro y ecuación de fallas</mat-card-title>
          </nav>

          <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información" />

          <div class="all-container">
              <div class="filter_content">
                  <span class="override-main-subtitle">Filtros</span>
                  <form [formGroup]="formGroup" class="override_content_flex">

                      <div class="col-flex-12">
                          <mat-form-field appearance="outline" class="mt-16">
                              <mat-label>Rango de fechas</mat-label>
                              <mat-date-range-input [rangePicker]="picker">
                                  <input matStartDate formControlName="FECHA_INICIO" placeholder="Fecha Inicio">
                                  <input matEndDate formControlName="FECHA_FIN" placeholder="Fecha Final">
                              </mat-date-range-input>
                              <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                              <mat-date-range-picker #picker></mat-date-range-picker>                      
                              @if (formGroup.controls['FECHA_INICIO'].hasError('matStartDateInvalid')) {
                                  <mat-error 
                                      title="La fecha de inicio no es válida">
                                      La <b>fecha de inicio</b> no es válida
                                  </mat-error>
                              }
                              @if (formGroup.controls['FECHA_FIN'].hasError('matEndDateInvalid')) {
                                  <mat-error 
                                      title="La fecha final no es válida">
                                      La <b>fecha final</b> no es válida
                                  </mat-error>
                              }
                          </mat-form-field>
                      </div>
                      <div class="col-flex-12">
                          <mat-form-field appearance="outline">
                              <mat-label>Clasificación de la falla</mat-label>
                              <mat-select formControlName="CLASIFICACION">
                                  @for (option of clasificateStr; track option) {
                                      <mat-option [value]="option"> {{ option }} </mat-option>
                                  }
                              </mat-select>
                              <mat-icon matSuffix>traffic</mat-icon>
                              @if (formGroup.controls['CLASIFICACION'].hasError('required')) {
                                  <mat-error 
                                      title="El campo Clasificación de la Falla es requerido">
                                      El campo <b>Clasificación de la Falla</b> es requerido
                                  </mat-error>
                              }
                          </mat-form-field>
                      </div>
                      <div class="col-flex-12">
                          @if (!isLoadingFailures) {
                              <mat-form-field appearance="outline">
                                  <mat-label>Nombre de la falla</mat-label>
                                  <input matInput type="text" placeholder="Seleccione la falla..." formControlName="NOMBRE_FALLA" [matAutocomplete]="auto">
                                  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                      @for (option of filteredOptionsFailure | async; track option) {
                                          <mat-option [value]="option"> {{ option }} </mat-option>
                                      }
                                  </mat-autocomplete>
                                  <mat-icon matSuffix>feedback</mat-icon>
                                  @if (formGroup.controls['NOMBRE_FALLA'].hasError('required')) {
                                      <mat-error 
                                          title="El campo Nombre de la Falla es requerido">
                                          El campo <b>Nombre de la Falla</b> es requerido
                                      </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-12">
                          @if (!isLoadingEquipment) {
                              <mat-form-field appearance="outline">
                                  <mat-label>Equipamientos</mat-label>
                                  <input matInput type="text" placeholder="Seleccione un equipamiento..." formControlName="EQUIPAMIENTO" [matAutocomplete]="auto">
                                  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                      @for (option of filteredOptionsEquipment | async; track option) {
                                          <mat-option [value]="option"> {{ option }} </mat-option>
                                      }
                                  </mat-autocomplete>
                                  <mat-icon matSuffix>precision_manufacturing</mat-icon>
                                  @if (formGroup.controls['EQUIPAMIENTO'].hasError('required')) {
                                      <mat-error 
                                          title="El campo Equipamientos es requerido">
                                          El campo <b>Equipamientos</b> es requerido
                                      </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-12 align-center">
                          <button 
                              mat-flat-button 
                              [color]="isFilter ? 'warn' : 'primary'" 
                              (click)="validateValues()">
                              <mat-icon matSuffix>{{ isFilter ? 'filter_list_off' : 'filter_list' }}</mat-icon>
                              {{ isFilter ? 'Borrar Filtro' : 'Filtrar' }}
                          </button>
                      </div>
                  </form>
              </div>
              <div class="result_content">
                  <span class="override-main-subtitle">Resultado MTBF:</span>

                  @if (isFilter && !isLoadingFilter) {
                      <div class="override_content_flex">
                          <div class="col-flex-12 item_filter">
                              <div class="icon-filter">
                                  <mat-icon>precision_manufacturing</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Código del equipamiento: </b>
                                  <span> {{ analisysInformation.equipment }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter">
                                  <mat-icon>traffic</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Clasificación de la falla: </b>
                                  <span> {{ analisysInformation.classification }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>feedback</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Nombre de la falla: </b>
                                  <span> {{ analisysInformation.failure }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>event</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Fecha inicial: </b>
                                  <span> {{ analisysInformation.dateFirst }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>event</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Fecha final: </b>
                                  <span> {{ analisysInformation.dateEnd }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>hourglass_top</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Número de horas en funcionamiento: </b>
                                  <span> {{ analisysInformation.hoursOperation }} </span>
                              </div>
                          </div>
  
                          
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>hourglass_bottom</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Números de mantenimiento preventivo: </b>
                                  <span> {{ analisysInformation.preventiveMaintenance }} </span>
                              </div>
                          </div>
  
  
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>tag</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Número de fallas totales: </b>
                                  <span> {{ analisysInformation.numberFailure }} </span>
                              </div>
                          </div>
                         
                         
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>hourglass_disabled</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Número de horas de inactividad: </b>
                                  <span> {{ analisysInformation.inactivityTime }} </span>
                              </div>
                          </div>
                          
                          
                          <div class="col-flex-6 item_filter">
                              <div class="icon-filter"> 
                                  <mat-icon>hourglass_full</mat-icon>
                              </div>
                              <div class="info-filter">
                                  <b>Total de horas por falla: </b>
                                  <span> {{ analisysInformation.hoursByFailure }} </span>
                              </div>
                          </div>
                      </div>
                  }

                  <app-loading-card [isLoading]="isLoadingFilter" txtLoading="Generando respuesta" />

                  @if (!isFilter && !isLoadingFilter) {
                      <div class="empty-filter">
                          <object data="assets/img/filter_analisys.svg" width="150"></object>
                          <h2>Seleccione los datos del filtro para ver resultados</h2>
                      </div>
                  }
              </div>
          </div>

      </section>
  </mat-card>
</main>