<mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
<h2 mat-dialog-title>{{ titleForm }}</h2>
<mat-dialog-content [formGroup]="formGroup">
  <form [formGroup]="formGroup" class="override_content_flex" *ngIf="!isLoading">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label> Tipo de Documento </mat-label>
        <mat-select formControlName="TIPO_DOCUMENTO">
          <mat-option value="Cotización">Factura de Cotización</mat-option>
          <mat-option value="Orden">Factura de Orden de Compra</mat-option>
          <mat-option value="Abono">Factura de Abono</mat-option>
          <mat-option value="Otro">Otro</mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.controls['TIPO_DOCUMENTO'].hasError('required')"> El campo Tipo de Documento es Obligatorio </mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label> Tipo Archivo </mat-label>
        <mat-select formControlName="TIPO_ARCHIVO">
          <mat-option *ngFor="let typeFile of arrTypeFile" [value]="typeFile.code"> ({{ typeFile.code }}) {{ typeFile.category }}</mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.controls['TIPO_ARCHIVO'].hasError('required')"> El campo Tipo Archivo es Obligatorio </mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label> Descripción del Documento </mat-label>
        <textarea matInput formControlName="DESCRIPCION"></textarea>
        <mat-error *ngIf="formGroup.controls['DESCRIPCION'].hasError('required')"> El campo Descripción es Obligatorio </mat-error>
      </mat-form-field>
    </div>
    <!-- [ngClass]=" !inputFileDisable ? 'input-file' : 'input-file-disable'" -->
    <div *ngIf="formGroup.controls['TIPO_ARCHIVO'].value !== 'FA'" class="input-file" onclick="getElementById('upfile').click()">
      <mat-icon matSuffix style="margin-right: 5px;">file_upload </mat-icon>
      <span> {{ nameButtonOtro }} </span>
      <input id="upfile" type="file" (change)="loadDocument($event, 'OTRO')" [accept]="documentExtension" />
    </div>

    <div *ngIf="formGroup.controls['TIPO_ARCHIVO'].value === 'FA'" class="input-file" onclick="getElementById('upfilePdf').click()">
      <mat-icon matSuffix style="margin-right: 5px;">file_upload </mat-icon>
      <span> {{ nameButtonPdf }} </span>
      <input id="upfilePdf" type="file" (change)="loadDocument($event, 'PDF')" [accept]="'.pdf'" />
    </div>
    <div *ngIf="formGroup.controls['TIPO_ARCHIVO'].value === 'FA'" class="input-file" onclick="getElementById('upfileXml').click()">
      <mat-icon matSuffix style="margin-right: 5px;">file_upload </mat-icon>
      <span> {{ nameButtonXml }} </span>
      <input id="upfileXml" type="file" (change)="loadDocument($event, 'XML')" [accept]="'.xml'" />
    </div>
    
  </form>

  <app-loading-card 
    [isLoading]="isLoading" 
    [txtLoading]="'Cargando formulario'"
  />
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="closeDialog()" cdkFocusInitial>Cancelar</button>
  <button mat-button [disabled]="formGroup.invalid" (click)="alert()">Guardar</button>
</mat-dialog-actions>
