<div class="containerPagina">
    <div class="centrar1">
      <div class="fondo" [style.background-color]="color">
        <p class="content" [style.color]="textColor">Registro de Calificaciones </p>
      </div>
    </div>
    <div class="buscador">
      <div class="contenedorInputs" style="display: flex; align-items: center;">
        <mat-form-field class="input" style="width: 45%;">
          <mat-label>Buscar</mat-label>
          <input type="text" matInput (keyup)="applyFilter($event)" #input>
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>

        <div class="filtroo">
          <mat-form-field class="filtro" style="width: 100%; margin-left: 5%;">
            <mat-label>Estado:</mat-label>
            <mat-select value="Activo" (selectionChange)="Filtro($event.value)" #filtroo>
              <mat-option value="Activo">Activos</mat-option>
              <mat-option value="Eliminado">Eliminados</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <button mat-button (click)="openDialog()" class="OpenButton borderNone" [style.background-color]="color"><mat-icon
            class="icon-boton" style="padding-left: 3px;">add</mat-icon></button>
      </div>
      <div class="exportar">
        <button mat-button type="button" class="boton-export" [matMenuTriggerFor]="menu">Exportar a Excel<mat-icon
            svgIcon="excel" class="icono-blanco"></mat-icon></button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="exportAsExcel()">Exportar esta Página</button>
          <button mat-menu-item (click)="exportAll()">Exportar Todo</button>
        </mat-menu>
      </div>
    </div>

    <div class="table mat-elevation-z8">
      <div class="tabla1" #TABLE>
        <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
          <ng-container matColumnDef="Periodo">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Periodo</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.nombrePeriodo}}  </td>
          </ng-container>

          <ng-container matColumnDef="MGG">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Materia - Grado / Grupo
            </th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.materiaGradoGrupo}} </td>
          </ng-container>

          <ng-container matColumnDef="Alumno">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Alumno</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.nombreAlumno}} </td>
          </ng-container>

          <ng-container matColumnDef="Calificacion">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;"> Calificación</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.calificacion}}</td>
          </ng-container>

          <ng-container matColumnDef="UsuarioRegistro">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Usuario que Registró</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.usuarioRegistro}}</td>
          </ng-container>

          <ng-container matColumnDef="UltActualizacion">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Usuario que Registró</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.lastUpdate}}</td>
          </ng-container>

          <ng-container matColumnDef="estado">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Estado</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">
              <span
                [ngClass]="{'badge-active': registro.estado == 'Activo' , 'badge-inactive' : registro.estado == 'Eliminado'}">
                {{registro.estado}}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="Acciones">
            <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Acciones</th>
            <td mat-cell *matCellDef="let registro" style="text-align:center;">
              <div style="display: flex; width: 100%; justify-content: center;">
                <button (click)="openEditar(registro)" class="btnIcon borderNone"
                  [disabled]="registro.estado === 'Eliminado' " [ngClass]="{desactivar: registro.estado === 'Eliminado'}">
                  <mat-icon class="acciones">edit</mat-icon>
                </button>

                <p class="ml-10" #tooltip="matTooltip"
                  [matTooltip]="registro.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
                  matTooltipPosition="right" style="transform: scale(1.2);">
                  <mat-slide-toggle style="display: flex;" [checked]="registro.estado === 'Activo'"
                    (change)="onToggleChange($event, registro)">
                  </mat-slide-toggle>
              </div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">
              <span style="display: flex; justify-content: center; width: 190%;">
                No se encontraron resultados
              </span>
            </td>
          </tr>
        </table>
        <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
      </div>
      <mat-paginator [pageSizeOptions]="[5, 10, 15]"></mat-paginator>
    </div>
  </div>
