<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
    <mat-card-title class="mat-card-title centre">Gestión de reportes</mat-card-title>
    <div *ngIf="isLoading">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
    <ng-template [ngIf]="!isLoading"> 
      <mat-grid-list cols="12" rowHeight="60px" class="card-title">
        <mat-grid-tile colspan="3" class="card-title filter mt-5 ml-10">
          <mat-form-field appearance="legacy" class="select-width">
            <mat-label>Tipo de solicitudes</mat-label>
            <mat-select [(value)]="opcionSolicitud">
              <mat-option
                [value]="opcion.valor"
                *ngFor="let opcion of opcionesSolicitudes"
                (click)="filtroSolicitudes(opcion.tipo)"
              >
                {{ opcion.valor == 0 ? opcion.tipo + ': [' +nombre_usuario+ ']' : opcion.tipo }}
              </mat-option>
              <ng-template [ngIf]="!isUser">
                <mat-divider></mat-divider>
                <mat-option class="secondary">{{
                    role == "Administrador"
                    ? "Usuarios"
                    : role == "Jefe Directo"
                    ? "Empleados"
                    : ""
                }}</mat-option>
                <mat-divider></mat-divider>
                <mat-option
                    [value]="2"
                    *ngFor="let empleado of empleados"
                    (click)="filtroEmpleados(empleado)"
                >
                    {{ empleado.NOMBREEMPLEADO }}
                </mat-option>
              </ng-template>
            </mat-select>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="9" class="card-title mt-5">
          <mat-form-field appearance="legacy" class="searcher">
            <mat-label>Buscador</mat-label>
            <input
              matInput
              placeholder="Ingrese palabras claves"
              (keyup)="applyFilter($event)"
            />
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
      <p class="centre display-text text-secondary">Filtros de búsqueda</p>
      <div class="filters mb-5">
        <div class="flex-item">
          <mat-form-field appearance="legacy">
            <mat-label>Seleccionar estatus</mat-label>
            <mat-select [(value)]="opcionEstatus">
              <mat-option 
              [value]="estatus.estatus" 
              *ngFor="let estatus of opcionesEstatus" 
              (click)="validarOpcionesFiltro()">{{ estatus.estatus }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="flex-item">
          <mat-form-field appearance="legacy">
            <mat-label>Seleccionar periodos</mat-label>
            <mat-select [(value)]="opcionPeriodo" [disabled]="opcionSolicitud == 1">
              <mat-option 
                [value]="periodo.PERIODO" 
                *ngFor="let periodo of periodos"
                (click)="validarOpcionesFiltro()">
                {{formatDate(periodo.PERIODO.split('|')[0])  + ' / ' + formatDate(periodo.PERIODO.split('|')[1])  }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="flex-item">
          <mat-form-field appearance="legacy">
            <mat-label>Ingresar rango de fechas</mat-label>
            <mat-date-range-input [formGroup]="rango" [rangePicker]="picker">
              <input
                (dateChange)="validarOpcionesFiltro()"
                matStartDate
                formControlName="fecha_inicio"
                placeholder="Fecha inicio"
              />
              <input
                (dateChange)="validarOpcionesFiltro()"
                matEndDate
                formControlName="fecha_fin"
                placeholder="Fecha fin"
              />
            </mat-date-range-input>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-date-range-picker #picker></mat-date-range-picker>
          </mat-form-field>
        </div>
        <div class="flex-item mt-3">
          <button
            mat-mini-fab
            color="warn"
            class="mr-3"
            [disabled]="!isFilter"
            (click)="eliminarFiltros()"
            aria-label="Remover filtros"
            matTooltip="Remover filtros"
          >
            <mat-icon>delete</mat-icon>
          </button>
          <button
            mat-mini-fab
            class="secondary mr-3"
            [disabled]="this.solicitudes.length == 0 || isFilterNull"
            (click)="filtrosBusqueda()"
            aria-label="Aplicar filtros"
            matTooltip="Aplicar filtros"
          >
            <mat-icon>filter_list</mat-icon>
          </button>
          <button
            mat-mini-fab
            class="success mr-3"
            (click)="generarExcel()"
            [disabled]="this.solicitudes.length == 0 "
            aria-label="Generar EXCEL"
            matTooltip="Generar excel"
          >
            <mat-icon>cloud_download</mat-icon>
          </button>
        </div>
      </div>
      <br />
    </ng-template>
  
    <div *ngIf="!isLoading && dataSource.data.length == 0" class="data-empty">
      No hay datos registrados
    </div>
  
    <table
      mat-table
      [dataSource]="dataSource"
      class="animated fadeIn"
      *ngIf="dataSource.data.length != 0"
    >
      <!-- Checkbox Column -->
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef class="centre">
          <mat-checkbox
            color="primary"
            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
            [aria-label]="checkboxLabel()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox
            color="primary"
            (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)"
            [aria-label]="checkboxLabel(row)"
          >
          </mat-checkbox>
        </td>
      </ng-container>
  
      <ng-container matColumnDef="no">
        <th mat-header-cell *matHeaderCellDef>#</th>
        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
      </ng-container>
  
      <ng-container matColumnDef="numero_solicitud">
        <th mat-header-cell *matHeaderCellDef>
          Solicitud
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.IDSOLICITUD }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="nombre_empleado">
        <th mat-header-cell *matHeaderCellDef>
          Nombre del empleado
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.NOMBREEMPLEADO }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="fecha_inicio">
        <th mat-header-cell *matHeaderCellDef>
          Fecha inicio
        </th>
        <td mat-cell *matCellDef="let element">
          {{ formatoFecha(element.FECHAINICIO) }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="fecha_fin">
        <th mat-header-cell *matHeaderCellDef>
          Fecha fin
        </th>
        <td mat-cell *matCellDef="let element">
          {{ formatoFecha(element.FECHAFIN) }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="numero_dias">
        <th mat-header-cell *matHeaderCellDef>
          Número días
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.VACACIONESANTES - element.VACACIONESDESPUES }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="estatus">
        <th mat-header-cell *matHeaderCellDef>
          Estatus
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.ESTATUS }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="periodo_vacacional">
        <th mat-header-cell *matHeaderCellDef>
          Periodo vacacional
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.PERIODOVACACIONAL != 'N/A' ?  'De '+ formatDate(element.PERIODOVACACIONAL.split('|')[0])  + ' a ' + formatDate(element.PERIODOVACACIONAL.split('|')[1]) : 'N/A' }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="vacaciones_antes">
        <th mat-header-cell *matHeaderCellDef>
          Vacaciones antes
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.VACACIONESANTES !== null ? element.VACACIONESANTES : 'N/A' }}
        </td>
      </ng-container>
  
      <ng-container matColumnDef="vacaciones_despues">
        <th mat-header-cell *matHeaderCellDef>
          Vacaciones después
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.VACACIONESDESPUES !== null ? element.VACACIONESDESPUES : 'N/A' }}
        </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <mat-paginator
      [pageSizeOptions]="[10, 20, 50]"
      showFirstLastButtons
      aria-label="Seleccione"
    >
    </mat-paginator>
  </mat-card>
  