<div class="containerPagina">
  <div class="centrar1">
    <div class="fondo" [style.background-color]="color">
      <p class="content" [style.color]="textColor">Relación de Profesores</p>
    </div>
  </div>
  <div class="buscador">
    <div class="contenedorInputs">
      <mat-form-field class="buscador-input">
        <mat-label>Buscar</mat-label>
        <input type="text" matInput (keyup)="applyFilter($event)" #input>
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
      <mat-form-field class="filtro">
        <mat-label>Filtrar</mat-label>
        <mat-select value="1" (selectionChange)="todos($event.value)">
          <mat-option value="1">Todos</mat-option>
          <mat-option value="2">Relacionados</mat-option>
          <mat-option value="3">No Relacionados</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="exportar">
      <button mat-button class="boton-export" style="background-color: red !important;" (click)="openPDF()">Generar PDF <mat-icon>picture_as_pdf</mat-icon></button>
      <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 mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 18%;">ID Profesor</th>
          <td mat-cell *matCellDef="let registro"> {{registro.idUsuario}} </td>
        </ng-container>

        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Nombre Completo</th>
          <td mat-cell *matCellDef="let registro"> {{registro.nombreProfesor}} </td>
        </ng-container>

        <ng-container matColumnDef="grupo">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla">Grado o grupo</th>
          <td mat-cell *matCellDef="let registro">
            <ng-container *ngIf="registro.nombreGrupos.length > 0 ">
              <mat-icon style="transform: scale(1.2); color:#918b8b;" svgIcon="Grupo"></mat-icon>
              <button type="button" class="btnIconPadre"> {{registro.nombreGrupos.length}}</button>
            </ng-container>
          </td>
        </ng-container>
        <ng-container matColumnDef="materia">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla">Materia</th>
          <td mat-cell *matCellDef="let registro">
            <ng-container *ngIf="registro.nombreMaterias.length > 0">
              <mat-icon svgIcon="libros" style="transform: scale(1.5); color:#918b8b;"></mat-icon>
              <button type="button" class="btnIconPadre" style="margin-left: 1px;">{{registro.nombreMaterias.length}}</button>
            </ng-container>
          </td>
        </ng-container>

        <ng-container matColumnDef="acciones">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Acciones </th>
          <td mat-cell *matCellDef="let row">
            <div style="display: flex; justify-content: center; width: 100%;">
              <button class="btnIcon borderNone" [style.background-color]="color"
              *ngIf="row.nombreMaterias.length + row.nombreGrupos.length > 0"
                (click)="(expandedElement = expandedElement === row ? null : row); $event.stopPropagation(); OpenDatos(row)">
                <mat-icon class="acciones">{{ expandedElement === row ? 'visibility_off' : 'visibility' }}</mat-icon>
              </button>

              <button class="btnIcon borderNone" [style.background-color]="color" (click)="OpenVisualizar(row)"
                *ngIf="row.nombreMaterias.length + row.nombreGrupos.length > 0 "  [ngClass]="{Visualizar: expandedElement == row}">
                <mat-icon class="acciones" matTooltip="Visualizar Relaciones"> visibility </mat-icon>
              </button>

              <button class="btnIcon borderNone" [ngClass]="{desactivar: arrchecked > []}" [disabled]="arrchecked >[]">
                <mat-icon class="acciones" (click)="openEditarProfesor(row)">edit</mat-icon>
              </button>
              <button class="btnIcon borderNone" style="background-color: red;" matTooltip="Eliminar todas las relaciones" *ngIf="row.nombreMaterias.length + row.nombreGrupos.length > 0 "
                [ngClass]="{desactivar: arrchecked > []}" [disabled]="arrchecked >[]">
                <mat-icon class="acciones" (click)="eliminarRegistro(row)">close</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="expandedDetail">
          <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"
            *ngIf="element.nombreGrupos.length > 0 && element.nombreMaterias.length > 0" >
              <div class="example-element-description">
                <div class="divContainerMateria" style="margin-top: 0px;">

                  <div class="containerMaterias"  *ngFor="let materias of auxMateria">
                    <div class="barraColorMateria" [style.background-color]="materias.color"></div> 
                    <div class="divMateria">
                      <div class="divMateriaTitulo">{{materias.materia}}</div>
                      <div class="divGrupos">{{materias.grupos.join(' , ')}}</div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">
            <span style="display: flex; justify-content: center; width: 133%;">
              No se encontraron resultados
            </span>
          </td>
        </tr>

        <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
          [class.example-expanded-row]="expandedElement === element">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
      </table>
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>
    <mat-paginator [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
  </div>
</div>