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


<div class="container-col fadeIn">

    <div class="flex-row container-search">
        <div class="">
            <mat-form-field class="input">
                <input class="input" (keyup)="applyFilter($event)" matInput placeholder="Buscar" #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="Todos" (selectionChange)="option($event.value)">
                        <mat-option value="Todos">Todos</mat-option>
                        <mat-option value="Eliminados">Eliminados</mat-option>
                    </mat-select>
                </mat-form-field>
                <app-button-dialog [vista]="'periodos'"></app-button-dialog>
            </div>
           <button mat-button type="button" class="green" (click)="exportarTodo()">Exportar a Excel<mat-icon
                    svgIcon="excel" class="icono-blanco"></mat-icon></button>
        </div>
    </div>
    <div class="table-container mat-elevation-z8">
        <div class="table-responsive " #TABLE>
            <table mat-table [dataSource]="dataSource" #table class="mat-elevation-z8">

                <!-- <ng-container matColumnDef="check">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox class="example-margin" [checked]="allComplete" [color]="task.color"
                            [indeterminate]="someComplete()" (change)="setAll($event.checked)">
                        </mat-checkbox>
                    </th>
                    @for (subtask of task.subtasks; track subtask) {
                    <td mat-cell *matCellDef="let periodo">
                        <mat-checkbox [(ngModel)]="periodo.completed" [color]="subtask.color"
                            (ngModelChange)="updateAllComplete()">
                        </mat-checkbox>
                    </td>
                    }
                </ng-container> -->



                <ng-container matColumnDef="claveNivel">
                    <th mat-header-cell *matHeaderCellDef> Clave del Periodo </th>
                    <td mat-cell *matCellDef="let periodo"> {{periodo.idPeriodo}} </td>
                </ng-container>

                <ng-container matColumnDef="nombreNivel">
                    <th mat-header-cell *matHeaderCellDef> Nombre del Periodo </th>
                    <td mat-cell *matCellDef="let periodo"> {{periodo.nombrePeriodo}} </td>
                </ng-container>

                <ng-container matColumnDef="fechaFinalizacion">
                    <th mat-header-cell *matHeaderCellDef> Fecha finalización </th>
                    <td mat-cell *matCellDef="let periodo"> {{periodo.fechaFinalizacion}} </td>
                </ng-container>

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

                </ng-container>

                <ng-container matColumnDef="acciones">
                    <th mat-header-cell *matHeaderCellDef> Acciones</th>
                    <td mat-cell *matCellDef="let periodo">
                        <div class="flex-row items-center">
                            <!-- <button class="action-edit" mat-fab color="Primary"
                                (click)="openDialog(periodo)"><mat-icon class="icon">edit</mat-icon></button> -->
                            <p class="ml-10" #tooltip="matTooltip"
                                [matTooltip]="periodo.estatus === 'Activo' ? '' : 'Cambiar estado a Activo'"

                                matTooltipPosition="right" style="transform: scale(1.2);">
                                <mat-slide-toggle

                                    [disabled]="periodo.estatus === 'Eliminado' || periodo.estatus === 'Activo'"
                                    [checked]="periodo.estatus === 'Activo'" (click)="periodo.estatus === 'Inactivo' ? activarPeriodo(periodo.idPeriodo) : ''"></mat-slide-toggle>
                            </p>


                            <!-- Quiero que tenga un estilo deshabilitado si el status sea eliminado o activo -->
                            <button class="action-edit" mat-fab color="Primary" #tooltip="matTooltip"
                                matTooltip="Editar información" matTooltipPosition="right">
                                <mat-icon class="icon">edit</mat-icon>
                            </button>
                            <!-- <button class="action-delete" mat-fab color="Primary" #tooltip="matTooltip"
                                matTooltip="Cambiar estado a 'Eliminado'" matTooltipPosition="right"
                                (click)="deleteLevel(periodo.idNivel)">
                                <mat-icon class="icon">delete</mat-icon>
                            </button> -->

                            <button
                                [ngClass]="{'action-delete': periodo.estatus === 'Inactivo' || periodo.estatus === 'Activo', 'action-publish': periodo.estatus === 'Eliminado' , 'disabled-button': periodo.estatus === 'Activo'}"
                                mat-fab color="Primary"
                                [disabled]="periodo.estatus === 'Activo'"
                                #tooltip="matTooltip"
                                [matTooltip]="periodo.estatus === 'Activo' ? 'No se puede eliminar un periodo activo' : periodo.estatus === 'Eliminado' ? 'Habilitar registro' : periodo.estatus === 'Inactivo' ? 'Cambiar estado a Eliminado' : ''"
                                matTooltipPosition="right" (click)="periodo.estatus === 'Inactivo' ? deletePeriodo(periodo.idPeriodo): enablePeriodo(periodo.idPeriodo)">
                                <mat-icon class="icon">
                                    {{periodo.estatus === 'Inactivo' || periodo.estatus === 'Activo' ? 'delete' : 'check'}}
                                </mat-icon>
                            </button>

                        </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-spinner></mat-spinner> -->

            <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
        </div>
        <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons class="mat-elevation-z8"></mat-paginator>
    </div>
</div>
