@if (isLoadingForm) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title>Registrar Orden de Compra</h2>
<mat-dialog-content>

  @if (!isLoading) {
    <form [formGroup]="formGroup" class="override_content_flex mt-10">
      <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>
          @if (formGroup.controls['PROPOSITO'].hasError('required')) {
            <mat-error 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">
            @for (preventivo of filteredPreventiveMaintenance | async; track preventivo) {
              <mat-option [value]="preventivo">{{ preventivo }}</mat-option>
            }
          </mat-select>
          @if (formGroup.controls['ID_MANT_PREV'].hasError('required')) {
            <mat-error 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">
            @for (correctivo of filteredCorrectiveMaintenance | async; track correctivo) {
              <mat-option [value]="correctivo">{{ correctivo }}</mat-option>
            }
          </mat-select>
          @if (formGroup.controls['ID_MANT_CORR'].hasError('required')) {
            <mat-error 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">
            @for (dispatch of arrDispatch; track dispatch) {
              <mat-option [value]="dispatch.ID_DESPACHO">{{dispatch.NOMBRE}} ({{dispatch.ID_DESPACHO}})</mat-option>
            }
          </mat-select>
          @if (formGroup.controls['DESPACHO'].hasError('required')) {
            <mat-error title="El campo Despacho es requerido">El campo <b>Despacho</b> es requerido</mat-error>
          }
        </mat-form-field>
      </div>
    </form>
  } @else {
    <app-loading-card [isLoading]="isLoading" txtLoading="Cargando la información del formulario" />
  }

</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>
