<mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
<h2 mat-dialog-title>Registrar Orden de Compra</h2>
<mat-dialog-content>

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

  <form [formGroup]="formGroup" class="override_content_flex mt-10" *ngIf="!isLoading">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Propósito</mat-label>
        <mat-select formControlName="PROPOSITO">
          <mat-option value="" disabled style="display: none;"> <i>Seleccione una opción...</i> </mat-option>
          <mat-option value="NA">--- No Aplica ---</mat-option>
          <mat-option value="MANT-PREV">Mantenimiento Preventivo</mat-option>
          <mat-option value="MANT-CORR">Mantenimiento Correctivo</mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.controls['PROPOSITO'].hasError('required')" title="El campo Propósito es requerido">El campo <b>Propósito</b> es requerido</mat-error>
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Órdenes de Mantenimiento Preventivo</mat-label>
        <mat-select formControlName="ID_MANT_PREV">
          <mat-option *ngFor="let preventivo of filteredPreventiveMaintenance | async" [value]="preventivo">{{ preventivo }}</mat-option>
        </mat-select>
        <mat-error 
          *ngIf="formGroup.controls['ID_MANT_PREV'].hasError('required')" 
          title="El campo Órdenes de Mantenimiento Preventivo es requerido">
          El campo <b>Órdenes de Mantenimiento Preventivo</b> es requerido
        </mat-error>
      </mat-form-field>
    </div>
   
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Órdenes de Mantenimiento Correctivo</mat-label>
        <mat-select formControlName="ID_MANT_CORR">
          <mat-option *ngFor="let correctivo of filteredCorrectiveMaintenance | async" [value]="correctivo">{{ correctivo }}</mat-option>
        </mat-select>
        <mat-error 
          *ngIf="formGroup.controls['ID_MANT_CORR'].hasError('required')" 
          title="El campo Órdenes de Mantenimiento Correctivo es requerido">
          El campo <b>Órdenes de Mantenimiento Correctivo</b> es requerido
        </mat-error>
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Despacho</mat-label>
        <mat-select formControlName="DESPACHO">
          <mat-option *ngFor="let dispatch of arrDispatch" [value]="dispatch.DESP_IDDE">{{dispatch.DESP_NODE}} ({{dispatch.DESP_IDDE}})</mat-option>
        </mat-select>
        <mat-error 
          *ngIf="formGroup.controls['DESPACHO'].hasError('required')" 
          title="El campo Despacho es requerido">
          El campo <b>Despacho</b> es requerido
        </mat-error>
      </mat-form-field>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button cdkFocusInitial mat-dialog-close>Cancelar</button>
  <button mat-button (click)="alert()" [disabled]="formGroup.invalid">Registrar Orden</button>
</mat-dialog-actions>
