<div class="centrar fadeIn">
    <div class="fondo" [style.background-color]="color">
        <p class="content" [style.color]="textColor">Materias</p>
    </div>
</div>


<div class="container-col fadeIn">
    <div class="flex-row container-search">
        <div class="">
            <mat-form-field class="input">
                <input class="input" matInput placeholder="Buscar" (keyup)="applyFilter($event)" #input>
                <mat-icon matSuffix>search</mat-icon>
                <!-- <mat-hint>Hint</mat-hint> -->
            </mat-form-field>
        </div>

        <div class="buttons">
            <div class="flex-row items-center">
                <mat-form-field style="width: 75%; margin-left: 20px; margin-right: 20px; margin-top: 5px;">
                    <mat-label>Mostrar:</mat-label>
                    <mat-select value="Activos" (selectionChange)="option($event.value)">
                        <mat-option value="Activos">Activos</mat-option>
                        <mat-option value="Todo">Todos los registros</mat-option>
                    </mat-select>
                </mat-form-field>
                <app-button-dialog [vista]="'materias'"></app-button-dialog>
            </div>
            <button mat-button type="button" class="green" [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-container mat-elevation-z8">
        <div class="table-responsive " #TABLE>
            <table mat-table [dataSource]="dataSource" #tabla1 class="mat-elevation-z8">
                <ng-container matColumnDef="claveMateria">
                    <th mat-header-cell *matHeaderCellDef> Clave de la Materia </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.idMateria}} </td>
                </ng-container>

                <ng-container matColumnDef="categoria">
                    <th mat-header-cell *matHeaderCellDef> Categoría </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.categoria}} </td>
                </ng-container>

                <ng-container matColumnDef="nombreMateria">
                    <th mat-header-cell *matHeaderCellDef> Nombre de la Materia </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.nombreMateria}} </td>
                </ng-container>

                <ng-container matColumnDef="colorMateria">
                    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Color de la Materia </th>
                    <td mat-cell *matCellDef="let materia">
                        <div class="materia-circle"
                            [style.background-color]="materia.colorCurso ? materia.colorCurso : ''"></div>
                    </td>
                </ng-container>

                <ng-container matColumnDef="gradoGrupo">
                    <th mat-header-cell *matHeaderCellDef> Grado o Grupo en el que se Imparte </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.nombreGrado ? materia.nombreGrado : materia.nombreGrupo}} </td>
                </ng-container>

                <ng-container matColumnDef="boleta">
                    <th mat-header-cell *matHeaderCellDef> Afecta la Boleta </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.afectaBoleta}} </td>
                </ng-container>

                <ng-container matColumnDef="materia">
                    <th mat-header-cell *matHeaderCellDef> Materia Académica </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.materiaAcademica}} </td>
                </ng-container>

                <ng-container matColumnDef="mostrar">
                    <th mat-header-cell *matHeaderCellDef> Mostrar Materia </th>
                    <td mat-cell *matCellDef="let materia"> {{materia.mostrarMateria}} </td>
                </ng-container>

                <ng-container matColumnDef="estado">
                    <th mat-header-cell *matHeaderCellDef> Estado</th>
                    <td mat-cell *matCellDef="let materia">
                        <span
                            [ngClass]="{'badge-active': materia.estado == 'Activo' , 'badge-inactive' : materia.estado == 'Eliminado'}">
                            {{materia.estado === 'Eliminado' ? 'Deshabilitado' : 'Activo'}}
                        </span>
                    </td>

                </ng-container>


                <!-- <ng-container matColumnDef="accesos">
                    <th mat-header-cell *matHeaderCellDef> Gestión de Accesos</th>
                    <td mat-cell *matCellDef="let materia">
                        <p class="inline">
                            <mat-icon class="icon" fontIcon="lock"></mat-icon>
                            {{materia.accesos}}
                        </p>
                    </td>
                </ng-container> -->

                <ng-container matColumnDef="acciones">
                    <th mat-header-cell *matHeaderCellDef> Acciones</th>
                    <td mat-cell *matCellDef="let materia">
                        <div class="flex-row items-center">
                            <button class="action-edit" mat-fab color="Primary"
                                (click)="openDialog(materia.idMateria)"><mat-icon class="icon">edit</mat-icon></button>
                            <p class="ml-10" #tooltip="matTooltip"
                                [matTooltip]="materia.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
                                matTooltipPosition="right" style="transform: scale(1.2);">
                                <mat-slide-toggle [checked]="materia.estado === 'Activo'" (click)="materia.estado === 'Activo' ? 
                                            deleteGrupo(materia.idMateria): enableGrupo(materia.idMateria)"></mat-slide-toggle>
                            </p>
                        </div>
                    </td>
                </ng-container>



                <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
                <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="4">No hay resultados para "{{input.value}}"</td>
                </tr>
            </table>
            <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

        </div>
        <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
    </div>
</div>