<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
  rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet" />

<div class="contenedor">
  <div class="sobremontado">
    <span class="icono-instituciones material-icons">new_label</span>
    Agregar Partida Presupuestaria
    <button class="volver" (click)="volver()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
  </div>

  <div class="contenedor-dos">
    <div class="centered-container">

    </div>
    <div class="form-container">
      <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formulario">

        <mat-form-field class="form-field">
          <mat-label>Tipo de Gasto</mat-label>
          <mat-select formControlName="tipo">
            <mat-option value="C">Gasto Permanente</mat-option>
            <mat-option value="I">Gasto No Permanente </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field class="form-field">
          <mat-label>Grupo</mat-label>
          <mat-select formControlName="grupo" required (selectionChange)="obtenerSubgrupos1($event.value)">
            <mat-option *ngFor="let item of nombresConPadres" [value]="item.id">
              {{ item.nombre }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field class="form-field">
          <mat-label>Subgrupo 1</mat-label>
          <mat-select formControlName="subgrupo1" required (selectionChange)="obtenerSubgrupos2($event.value)">
            <mat-option *ngFor="let item of subgrupos1" [value]="item.uzytclasificador_presup_id">
              {{ item.uzytclasificador_presup_nombre }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field class="form-field">
          <mat-label>Subgrupo 2</mat-label>
          <mat-select formControlName="subgrupo2" (selectionChange)="obtenerSubgrupos3($event.value)">
            <mat-option *ngFor="let item of subgrupos2" [value]="item.uzytclasificador_presup_id">
              {{ item.uzytclasificador_presup_nombre }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field class="form-field">
          <mat-label>Partida Presupuestaria</mat-label>
          <mat-select
            [(ngModel)]="opcionSeleccionada"
            formControlName="partida">
            <mat-option *ngFor="let item of subgrupos3" [value]="item.uzytclasificador_presup_id">
              {{ item.uzytclasificador_presup_nombre }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>

        <button mat-raised-button color="primary" [disabled]="myForm.invalid" >Enviar</button>

      </form>
    </div>
  </div>
</div>