<div class="containerPagina">
  <div class="centrar1">
    <div class="fondo" [style.background-color]="color">
      <p class="content" [style.color]="textColor">Tipos de Tareas</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 style="margin-top: 10px;">
        <mat-form-field class="filtro" style="width: 50%; margin-left: 5%;">
          <mat-label>Tipos:</mat-label>
          <mat-select value="Tareas" (selectionChange)="option($event.value)">
            <mat-option value="Tareas">Tipos de Tareas</mat-option>
            <mat-option value="Bitacora">Tipos de Registro en Bitacora</mat-option>
            <mat-option value="Informacion">Tipos de Inf.General</mat-option>
            <mat-option value="Boleta">Periodos en Boleta de Califi.</mat-option>
          </mat-select>
        </mat-form-field>
        
        <mat-form-field class="filtro" style="width: 40%; 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" *ngIf="colum == 'Tareas'">
    <div class="tabla1" #TABLE>
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="clave">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Clave</th>
          <td mat-cell *matCellDef="let registro"> {{registro.idTareasTipos}} </td>
        </ng-container>

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

        <ng-container matColumnDef="envio">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Envío por Plataforma </th>
          <td mat-cell *matCellDef="let registro">
            {{registro.envioPlatTareasTipos}}
          </td>
        </ng-container>
        <ng-container matColumnDef="estado">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Estado</th>
          <td mat-cell *matCellDef="let registro">
            <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="width: 300px;"> Acciones </th>
          <td mat-cell *matCellDef="let row">
            <div style="display: flex; width: 100%; justify-content: center;">
              <button class="btnIcon borderNone"  [ngClass]="{desactivar: row.estado === 'Eliminado'}" [disabled]="row.estado === 'Eliminado'" (click)="openEditar(row)">
                <mat-icon class="acciones">edit</mat-icon>
              </button>
              <p class="ml-10" #tooltip="matTooltip" [matTooltip]="row.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
               matTooltipPosition="right" style="transform: scale(1.2);">
              <mat-slide-toggle style="display: flex;" [checked]="row.estado === 'Activo'" 
              (change)="onToggleChange($event, row)">
              </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: 125%;">
              No se encontraron resultados
            </span></td>
        </tr>
      </table>
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>
    <mat-paginator #paginador1 [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
  </div>

  <div class="table mat-elevation-z8" *ngIf="colum == 'Bitacora'">
    <div class="tabla1" #TABLE>
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="clave">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Clave</th>
          <td mat-cell *matCellDef="let registro"> {{registro.idBitacorasTipos}} </td>
        </ng-container>

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

        <ng-container matColumnDef="clasificar">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Clasificar como reporte </th>
          <td mat-cell *matCellDef="let registro">
            {{registro.esReporteBitacorasTipos}}
          </td>
        </ng-container>

        <ng-container matColumnDef="estado">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Estado</th>
          <td mat-cell *matCellDef="let registro">
            <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="width: 300px;"> Acciones </th>
          <td mat-cell *matCellDef="let row">
            <div style="display: flex; width: 100%; justify-content: center;">
              <button class="btnIcon borderNone" [ngClass]="{desactivar: row.estado === 'Eliminado'}" [disabled]="row.estado === 'Eliminado'" (click)="openEditar(row)">
                <mat-icon class="acciones">edit</mat-icon>
              </button>
              <p class="ml-10" #tooltip="matTooltip" [matTooltip]="row.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
               matTooltipPosition="right" style="transform: scale(1.2);">
              <mat-slide-toggle style="display: flex;" [checked]="row.estado === 'Activo'" 
              (change)="onToggleChange($event, row)">
              </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: 125%;">
              No se encontraron resultados
            </span></td>
        </tr>
      </table>
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>
    <mat-paginator #paginador2 [pageSizeOptions]="[5, 10, 25]"> </mat-paginator>
  </div>

  <div class="table mat-elevation-z8" *ngIf="colum == 'Informacion'">
    <div class="tabla1" #TABLE>
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="clave">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" > Clave</th>
          <td mat-cell *matCellDef="let registro"> {{registro.idInformacionGeneralTipos}} </td>
        </ng-container>

        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 510px;"> Nombre </th>
          <td mat-cell *matCellDef="let registro"> {{registro.nombreInformacionGeneralTipos}} </td>
        </ng-container>

        <ng-container matColumnDef="estado">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" > Estado </th>
          <td mat-cell *matCellDef="let registro">
            <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="width: 380px;"> Acciones </th>
          <td mat-cell *matCellDef="let row">
            <div style="display: flex; width: 100%; justify-content: center;">
              <button class="btnIcon borderNone"  [ngClass]="{desactivar: row.estado === 'Eliminado'}" [disabled]="row.estado === 'Eliminado'" (click)="openEditar(row)">
                <mat-icon class="acciones" >edit</mat-icon>
              </button>
              <p class="ml-10" #tooltip="matTooltip"
              [matTooltip]="row.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
              matTooltipPosition="right" style="transform: scale(1.2);">
              <mat-slide-toggle style="display: flex;" [checked]="row.estado === 'Activo'" 
              (change)="onToggleChange($event, row)">
            </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: 100%;">
              No se encontraron resultados
            </span></td>
        </tr>
      </table>
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>
    <mat-paginator #paginador3 [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
  </div>

  <div class="table mat-elevation-z8" *ngIf="colum == 'Boleta'">
    <div class="tabla1" #TABLE>
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="clave1">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Clave del Periodo</th>
          <td mat-cell *matCellDef="let registro"> {{registro.idPeriodo}} </td>
        </ng-container>

        <ng-container matColumnDef="nombre1">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla"> Nombre del Periodo</th>
          <td mat-cell *matCellDef="let registro"> {{registro.nombrePeriodo}} </td>
        </ng-container>
        <ng-container matColumnDef="nivel">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 200px;"> Nivel Relacionado </th>
          <td mat-cell *matCellDef="let registro"> {{registro.nombreNivel}} </td>
        </ng-container>

        <ng-container matColumnDef="Orden">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 200px;"> Orden</th>
          <td mat-cell *matCellDef="let registro"> {{registro.ordenBoleta}} </td>
        </ng-container>

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

        <ng-container matColumnDef="Predeterminado">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 200px;"> Predeterminado</th>
          <td mat-cell *matCellDef="let registro">{{registro.predeterminado}}</td>
        </ng-container>

        <ng-container matColumnDef="acciones">
          <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="width: 250px;"> Acciones </th>
          <td mat-cell *matCellDef="let row">
            <div style="display: flex; width: 100%; justify-content: center;">
              <button class="btnIcon borderNone" [ngClass]="{desactivar: row.estado === 'Eliminado'}" [disabled]="row.estado === 'Eliminado'" (click)="openEditar(row)">
                <mat-icon class="acciones">edit</mat-icon>
              </button>
              <p class="ml-10" #tooltip="matTooltip"
            [matTooltip]="row.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
            matTooltipPosition="right" style="transform: scale(1.2);">
              <mat-slide-toggle style="display: flex;" [checked]="row.estado === 'Activo'" 
              (change)="onToggleChange($event, row)">
            </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: 150%;">
              No se encontraron resultados
            </span>
          </td>
        </tr>
      </table>
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>
    <mat-paginator #paginador4 [pageSizeOptions]="[5, 10, 25]"> </mat-paginator>
  </div>
</div>