@if (isLoadingForm) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title>{{ titleForm }}</h2>
<mat-dialog-content [formGroup]="formGroup">
  @if (!isLoading) {
    <form [formGroup]="formGroup" class="override_content_flex">
      <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>
          @if (formGroup.controls['TIPO_DOCUMENTO'].hasError('required')) {
            <mat-error title="El campo Tipo de Documento es Obligatorio"> El campo <b>Tipo de Documento</b> 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">
            @for (typeFile of arrTypeFile; track typeFile) {
              <mat-option [value]="typeFile.code"> ({{ typeFile.code }}) {{ typeFile.category }}</mat-option>
            }
          </mat-select>
          @if (formGroup.controls['TIPO_ARCHIVO'].hasError('required')) {
            <mat-error title="El campo Tipo Archivo es Obligatorio"> El campo <b>Tipo Archivo</b> 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>
          @if (formGroup.controls['DESCRIPCION'].hasError('required')) {
            <mat-error title="El campo Descripción es obligatorio"> El campo <b>Descripción</b> es obligatorio </mat-error>
          }
        </mat-form-field>
      </div>

      @if (formGroup.controls['TIPO_ARCHIVO'].value !== 'FA') {
        <div class="input-file" onclick="getElementById('upfile').click()">
          <mat-icon matSuffix class="mr-5">file_upload </mat-icon>
          <span> {{ nameButtonOtro }} </span>
          <input id="upfile" type="file" (change)="loadDocument($event, 'OTRO')" [accept]="documentExtension" />
        </div>
      }
  
      @if (formGroup.controls['TIPO_ARCHIVO'].value === 'FA') {
        <div class="input-file" onclick="getElementById('upfilePdf').click()">
          <mat-icon matSuffix class="mr-5">file_upload </mat-icon>
          <span> {{ nameButtonPdf }} </span>
          <input id="upfilePdf" type="file" (change)="loadDocument($event, 'PDF')" [accept]="'.pdf'" />
        </div>
      }

      @if (formGroup.controls['TIPO_ARCHIVO'].value === 'FA') {
        <div class="input-file" onclick="getElementById('upfileXml').click()">
          <mat-icon matSuffix class="mr-5">file_upload </mat-icon>
          <span> {{ nameButtonXml }} </span>
          <input id="upfileXml" type="file" (change)="loadDocument($event, 'XML')" [accept]="'.xml'" />
        </div>
      }
      
    </form>
  } @else {
    <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>
