<mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
<h2 mat-dialog-title>Modificación del Estado de la Orden</h2>
<mat-dialog-content class="remove-button-padding-dialog-content">
  <div *ngIf="!isLoading">
    <form [formGroup]="formGroup" class="override_content_flex">
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label> Número de Orden </mat-label>
          <input matInput formControlName="NUMERO_ORDEN" readonly />
        </mat-form-field>
      </div>
  
      <div class="col-flex-12 align-center">
        <label class="black_font"> Ajuste el Nivel del Nuevo Porcentaje</label>
        <div style="display: flex; justify-content: space-between; align-items: center; color: black;">
          <span>0%</span>
          <mat-slider min="0" max="100" step="1" showTickMarks discrete [displayWith]="formatLabel">
            <input matSliderThumb formControlName="PORCENTAJE">
          </mat-slider>
          <span>100%</span>
        </div>
      </div>
  
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label> Estado </mat-label>
          <mat-select formControlName="ESTADO">
            <mat-option *ngFor="let state of arrStatesOrders" [value]="state">{{ state }}</mat-option>
          </mat-select>
          <mat-error *ngIf="formGroup.controls['ESTADO'].hasError('required')" title="El campo Estado es requerido.">El campo <b>Estado</b> es requerido.</mat-error>
        </mat-form-field>
      </div>
  
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label> Descripción </mat-label>
          <textarea matInput formControlName="DESCRIPCION"></textarea>
          <mat-error *ngIf="formGroup.controls['DESCRIPCION'].hasError('required')" title="El campo Descripción es requerido.">El campo <b>Descripción</b> es requerido.</mat-error>
        </mat-form-field>
      </div>
    </form>
    <div>
      <div class="input-file" onclick="getElementById('upfile').click();">
        <mat-icon matSuffix class="mr-5" style="margin-right: 5px;">file_upload</mat-icon>
        <span> Clic para subir evidencia </span>
        <input id="upfile" type="file" (change)="loadImg($event)" accept=".png,.jpg" multiple />
      </div>
    </div>
    <mat-list role="list">
      <mat-list-item *ngFor="let filesSelected of arrFileSelected; let i = index" role="listitem"
          [style.border-bottom]=" (i < arrFileSelected.length - 1) ? '1px #0000001f solid' : 'none'">
          <div style="display: flex; justify-content: space-between; align-items: center;">
              <div style="display: flex; align-items: center;">
                  <mat-icon matSuffix>navigate_next</mat-icon>
                  <img [src]="filesSelected.view" [alt]="filesSelected.file.name" style="height: 50px; margin-right: 20px;">
                  <span>{{ resourcesService.resizeText( filesSelected.file.name, 27 ) }}</span>
              </div>
              <button mat-icon-button color="warn" matTooltip="Eliminar Imagen" (click)="alert('DELETE_TEMP',filesSelected.id)">
                  <mat-icon>delete</mat-icon>
              </button>
          </div>
          <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>
  </div>
  <app-loading-card
    [isLoading]="isLoading"
    [txtLoading]="'Cargando la información'"
  />
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="close()" cdkFocusInitial>Cerrar</button>
  <button mat-button (click)="alert('UPDATE')" [disabled]="formGroup.invalid">Guardar</button>
</mat-dialog-actions>
