<mat-dialog-content class="dialog">
  <div class="cerrar">
    <button mat-dialog-close class="borderNone"
      style="background-color: white; cursor: pointer;"><mat-icon>close</mat-icon></button>
  </div>
  <mat-spinner *ngIf="isLoading" class="mx-auto" [diameter]="60"></mat-spinner>
  <div class="card" *ngIf="!isLoading">
    <div class="button" style="margin-top: -2%;">
      <div class="titulos">
        <p style="color: black; text-align: center;" *ngIf="!this.data">Agregar Registro en Bitácora</p>
        <p style="color: black; text-align: center;" *ngIf="this.data">Actualizar Registro en Bitácora</p>
      </div>
    </div>
    <div style="display: flex; width: 100%; margin-top: -15px;" class="info-res">
      <p> <mat-icon style="color: #f19696;">info</mat-icon>El grado o grupo se muestra dependiendo de la materia
        seleccionada, y los alumnos dependen del grado o grupo seleccionado.</p>
    </div>
    <form class="form" [formGroup]="form" (ngSubmit)="onSave()">
      <div class="input-label">
        <mat-form-field class="input-CrearBitacora">
          <mat-label class="label">Materia</mat-label>
          <mat-select formControlName="materia">
            <mat-option [value]="materia.id" *ngFor="let materia of materias" (onSelectionChange)="Materia(materia)">
              {{ materia.nombre}}
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('materia', 'required')" style="color: red;">El campo es obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input-CrearBitacora">
          <mat-label class="label">Grado o Grupo:</mat-label>
          <mat-select formControlName="gradoGrupo">
            <mat-option [value]="grupo.idGradoGrupoRelacionado" *ngFor="let grupo of grupos"
              (onSelectionChange)="GradoGrupo(grupo)">{{grupo.nombreGrupo}}</mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('gradoGrupo', 'required')" style="color: red;">El campo es
            obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input-CrearBitacora">
          <mat-label class="label">Nombre de Usuario</mat-label>
          <input matInput type="text" [matAutocomplete]="auto" [formControl]="myControl" />
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="nombreAlum($event.option.value)">
            <mat-option *ngFor="let alum of filteredOptions | async" [value]="alum">
              {{ alum }}
            </mat-option>
          </mat-autocomplete>
          <mat-hint *ngIf="isValidField1('required')" style="color: red;">El campo es obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input-CrearBitacora" style="height: 80px;">
          <mat-label class="label">Tipo de Registro</mat-label>
          <mat-select formControlName="tipo">
            <mat-option [value]="tipos.idBitacorasTipos" *ngFor="let tipos of tipo">
              {{ tipos.nombreBitacorasTipos}}
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('tipo', 'required')" style="color: red;">El campo es obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input-CrearBitacora" style="height: 80px;">
          <mat-label class="label">Fecha Asignacion</mat-label>
          <input matInput [matDatepicker]="pickerStart" [min]="todayDate" formControlName="fechaInicio" readonly>
          <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
          <mat-datepicker #pickerStart></mat-datepicker>
          <mat-hint *ngIf="isValidField('fechaInicio', 'required')" style="color: red;">El campo es
            obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input-CrearBitacora" style="height: 80px;">
          <mat-label class="label">Hora</mat-label>
          <mat-select matNativeControl formControlName="fechaHora">
            <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('fechaHora', 'required')" style="color: red;">El campo es obligatorio</mat-hint>
        </mat-form-field>
      </div>
      <mat-form-field class="input-CrearBitacoraDes">
        <mat-label class="label">Descripción:</mat-label>
        <textarea maxlength="150" matInput class="input-Form" formControlName="descripcion" (keyup)="max()"
          style="resize: none;"></textarea>
        <mat-hint *ngIf="!isValidField('descripcion', 'pattern')" style="color: blue; cursor: pointer;">Máximo de
          caracteres {{maxCaracteres}}/150</mat-hint>
        <mat-hint *ngIf="isValidField('descripcion', 'pattern')" style="color: red;">No se permiten espacios al inicio
          del texto</mat-hint>
      </mat-form-field>

      <div class="botones">
        <button class="btn1 borderNone" type="submit" style="margin-right: 2%;"
          *ngIf="!this.data">Guardar<mat-icon>description</mat-icon></button>
        <button class="btn1 borderNone" type="submit" style="margin-right: 2%; width: 92px;"
          *ngIf="this.data">Actualizar<mat-icon>description</mat-icon></button>
        <button class="btn1 borderNone" type="button" style="background-color: #db6228;"
          (click)="limpiar()">Limpiar<mat-icon>delete_forever</mat-icon></button>
        <button class="btn1 borderNone" type="button" style="background-color: rgb(177, 22, 22); margin-left: 2%;"
          mat-dialog-close>Cerrar<mat-icon>cancel</mat-icon></button>
      </div>
    </form>
  </div>
</mat-dialog-content>