<main class="main-container animated fadeIn" >

    <app-btn-navigate navigate="/sam/ANFA"  nameButton="Menú de Análisis de Fallas" />
  
    <mat-card class="override-card-form override-elevation-z8" style="width: 75%;">
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingFilter || isLoadingForm"></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">
                    <form [formGroup]="formGroup">
                        <span class="override-main-subtitle">Filtros</span>

                        <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>                      
                            <mat-error *ngIf="formGroup.controls['FECHA_INICIO'].hasError('matStartDateInvalid')">La fecha de inicio no es válida</mat-error>
                            <mat-error *ngIf="formGroup.controls['FECHA_FIN'].hasError('matEndDateInvalid')">La fecha final no es válida</mat-error>
                        </mat-form-field>

                        <mat-form-field appearance="outline">
                            <mat-label>Clasificación de la Falla</mat-label>
                            <input matInput type="text" placeholder="Seleccione una clasificación..." formControlName="CLASIFICACION" [matAutocomplete]="auto">
                            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                <mat-option *ngFor="let option of filteredOptionsClasificate | async" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-autocomplete>
                            <mat-icon matSuffix>traffic</mat-icon>
                            <mat-error 
                                *ngIf="formGroup.controls['CLASIFICACION'].hasError('required')" 
                                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>
                        
                        <mat-form-field appearance="outline" *ngIf="!isLoadingFailures">
                            <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">
                                <mat-option *ngFor="let option of filteredOptionsFailure | async" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-autocomplete>
                            <mat-icon matSuffix>feedback</mat-icon>
                            <mat-error 
                                *ngIf="formGroup.controls['NOMBRE_FALLA'].hasError('required')" 
                                title="El campo Nombre de la Falla es requerido">
                                El campo <b>Nombre de la Falla</b> es requerido
                            </mat-error>
                        </mat-form-field>
                        <div class="container-load-form" *ngIf="isLoadingFailures">
                            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                        </div>

                        <mat-form-field appearance="outline" *ngIf="!isLoadingEquipment">
                            <mat-label>Equipamientos</mat-label>
                            <input matInput type="text" placeholder="Seleccione un equipamiento..." formControlName="EQUIPAMIENTO" [matAutocomplete]="auto">
                            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                <mat-option *ngFor="let option of filteredOptionsEquipment | async" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-autocomplete>
                            <mat-icon matSuffix>precision_manufacturing</mat-icon>
                            <mat-error 
                                *ngIf="formGroup.controls['EQUIPAMIENTO'].hasError('required')" 
                                title="El campo Equipamientos es requerido">
                                El campo <b>Equipamientos</b> es requerido
                            </mat-error>
                        </mat-form-field>
                        <div class="container-load-form" *ngIf="isLoadingEquipment">
                            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                        </div>

                        <div class="align-center">
                            <button mat-flat-button [color]="isFilter ? 'warn' : 'primary'" [disabled]=" (formGroup.invalid && !isFilter) || isLoadingFilter" 
                                (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>
                    <div class="override_content_flex" *ngIf="isFilter && !isLoadingFilter">
                        <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" />

                    <div class="empty-filter" *ngIf="!isFilter && !isLoadingFilter">
                        <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>