import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { Observable, startWith, map } from 'rxjs';
import Swal from 'sweetalert2';
import { AsyncPipe, CommonModule } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon, MatIconRegistry } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { DomSanitizer } from '@angular/platform-browser';
import { MatSnackBar } from '@angular/material/snack-bar';
import { animate, state, style, transition, trigger } from '@angular/animations';
import * as XLSX from 'xlsx';
import { EnviarInfoService } from '../../../services/enviar-info.service';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import {domToPng} from 'modern-screenshot';
import { PersonalizarService } from '../../../services/personalizar.service';
import { RelacionService } from '../../../services/relacion.service';
import { GruposService } from '../../../services/grupos.service';

@Component({
  selector: 'app-alumnos-padres',
  templateUrl: './alumnos-padres.component.html',
  styleUrl: './alumnos-padres.component.css',
  animations: [
    trigger('detailExpand', [
      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class AlumnosPadresComponent implements AfterViewInit, OnInit {
  displayedColumns = ['select', 'id', 'nombre', 'grado', 'padre', 'grupo', 'acciones'];
  expandedElement!: any | null;
  dataSource = new MatTableDataSource<any>([]);
  registros: any;
  arrchecked: any[] = [];
  completed: boolean = false;
  allCompleted: boolean = false;
  optionFile: string = '';
  color: string = '';
  textColor: string = '';
  evento: number = 1;
  durationInSeconds = 5;
  grupos: any;
  padres: any;
  isLoading: boolean = true;
  AuxEliminar:any [] = [];
  AuxEliminarPadre:any [] = [];
  grupoAlmacenado: any[] = [];
 
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  constructor(public dialog: MatDialog, private _MatIconRegister: MatIconRegistry, private _DomSanitizer: DomSanitizer, private _snackBar: MatSnackBar, 
    private paginator1: MatPaginatorIntl, private _enviarInfo: EnviarInfoService, private _relacionService:RelacionService) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));
    this._MatIconRegister.addSvgIcon('Padres', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/Padres.svg'));
    this._MatIconRegister.addSvgIcon('Grupo', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/Grupo.svg'));
    
    const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) {
        return `0 de ${length}`;
      }
      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
      return `${startIndex + 1} - ${endIndex} de ${length}`;
    };

    this.paginator1.nextPageLabel = "Siguiente";
    this.paginator1.previousPageLabel = "Anterior";
    this.paginator1.firstPageLabel = "Ir a la primer página";
    this.paginator1.lastPageLabel = "Ir a la última página";
    this.paginator1.itemsPerPageLabel = "Registros por página";
    this.paginator1.getRangeLabel = spanishRangeLabel;    
  }

  getAlumnos(){
    this._relacionService.getAlumnos().subscribe((data: any) =>{ 
      this.isLoading = false; 
      this.registros = data.alumnos;      
      this.dataSource = new MatTableDataSource(this.registros);      
      this.dataSource.paginator = this.paginator;
      this.todos(this.optionFile);
    });
  }

  exportAsExcel() {
    const indiceInicial = this.paginator.pageIndex * this.paginator.pageSize;
    const indiceFinal = indiceInicial + this.paginator.pageSize;
    const data = this.dataSource.data.slice(indiceInicial, indiceFinal).map(item => ({
      ...item,
      nombreGrupos: item.nombreGrupos.map((grupo: any) => grupo.nombreGrupo).join(', '),
      nombrePadres: item.nombrePadres.map((padre: any) => padre.nombrePadre).join(', ')
    }));
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
     // Ajustar el ancho de las columnas
     const maxWidth = 25; 
     ws['!cols'] = Object.keys(data[0]).map(_ => ({ wch: maxWidth }));  
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaTipos');
    XLSX.writeFile(wb, 'RelacionAlumno.xlsx');
  }

  exportAll() {
    const dataSource = this.dataSource.data;
    const data = dataSource.map(item => ({
      ...item,
      nombreGrupos: item.nombreGrupos.map((grupo: any) => grupo.nombreGrupo).join(', '),
      nombrePadres: item.nombrePadres.map((padre: any) => padre.nombrePadre).join(', ')
    }));
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
     // Ajustar el ancho de las columnas
     const maxWidth = 25; 
     ws['!cols'] = Object.keys(data[0]).map(_ => ({ wch: maxWidth }));
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaTipos');
    XLSX.writeFile(wb, 'RelacionAlumno.xlsx');
  }

  openPDF(){
    const PDF = this.dialog.open(PdfAlumno, {
      data: this.dataSource.data
    });
  }

  
  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;  
    });
    this.getAlumnos();
    this._relacionService.dataUpdated$.subscribe(() => {
      this.getAlumnos();
    });
  }
  
  seleccion(dato: any) {    
    if (dato === this.arrchecked.find((element: any) => element === dato)) {
      this.arrchecked.splice(this.arrchecked.indexOf(dato), 1);
    } else {
      this.arrchecked.push(dato);      
    }         
  }

  setAll(completed: boolean) {
    this.allCompleted = completed;
    if (this.dataSource.data == null) {
      return;
    }
    this.dataSource.data.forEach(t => {
      t.completado = completed
      if (completed && !this.arrchecked.find((element: any) => element === t.idUsuario)) {
        this.arrchecked.push(t.idUsuario);
      } else if (!completed) {
        this.arrchecked.splice(this.arrchecked.indexOf(t.idUsuario), 1)
      }
    });
  }
  
  someComplete() {
    return this.dataSource.data != null && this.dataSource.data.some(t => t.completado) && !this.dataSource.data.every(t => t.completado);
  }

  updateAllComplete() {
    this.allCompleted = this.dataSource != null && this.dataSource.data != null && this.dataSource.data.every(t => t.completado);
  }

  openGrupo(id: any) {  
    const AgregarGrupo = this.dialog.open(Grupo, {
      data:{id: id}
    });
    const selectedGrupos = this.registros.filter((registro: any) => this.arrchecked.includes(registro.idUsuario)).map((registro: any) => registro.nombreGrupos); 
    for(let i = 0; i < selectedGrupos[0].length; i++){
      this.grupoAlmacenado.push(selectedGrupos[0][i].idGrupo);
    }
    AgregarGrupo.afterClosed().subscribe(result => {      
      if(result){
        for(let i = 0; i < this.grupoAlmacenado.length; i++){
          if(result.idGrupo == this.grupoAlmacenado[i]){
            Swal.fire('Error!','El grupo ya ha sido asignado','error');
            this.grupoAlmacenado = [];
            return;
          } 
        }
        for(let i = 0; i < result.id.length; i++){
          if (result.idGrupo != '') {    
            let auxres:any []=[];
            auxres.push({
              id: result.id[i],
              idGrupo: result.idGrupo,
            });              
         this._relacionService.RelacionarGrupo(auxres[0]).subscribe((data: any) => {
           this.arrchecked = [];
         });
        }
      }
      Swal.fire('Exito!','Grupo asignado correctamente','success');
      this.isLoading = true;
     }
     this.grupoAlmacenado = [];
    });
  }

  eliminarGrupo(id: any){ 
    const selectedGrupos = this.registros.filter((registro: any) => this.arrchecked.includes(registro.idUsuario)).map((registro: any) => registro.nombreGrupos); 
    const GrupoComun = selectedGrupos.reduce((prev: any[], curr: any[]) => {
      return prev.filter((prevGroup: any) => 
        curr.some((currGroup: any) => currGroup.idGrupo === prevGroup.idGrupo)
      );
    });    
    if (GrupoComun.length === 0) {
      Swal.fire({
      icon: 'error',
      title: 'Error',
      text: 'Para eliminar un grupo, los registros seleccionados deben tener un grupo en común',
      });
      return;
    }
    const eliminarGrupo= this.dialog.open(EliminarGrupo, {
      data: { id: id, grupo: GrupoComun}
    });    
    eliminarGrupo.afterClosed().subscribe(result =>{
      if(result){
        for(let i = 0; i < result.id.length; i++){
          let auxResult: any[]=[];
          auxResult.push({
            id:result.id[i],
            idGrupo: result.idGrupo
          })
          if(result.idGrupo != ''){
           this._relacionService.EliminarGrupo(auxResult[0]).subscribe((data: any)=>{
            this.arrchecked= [];     
           });
          }
        }
        Swal.fire('Exito!','Grupo eliminado correctamente','success');
        this.isLoading = true;
      }
    });
  }

  openRelacion(registro: any) {
    const Relacion = this.dialog.open(AlumnoPadre, {
      data: {id:registro.idUsuario ,nombre: registro.nombreAlumno , grado: registro.grado, grupo: registro.nombreGrupos, 
        padre: registro.nombrePadres}
    });
    Relacion.afterClosed().subscribe(result => { 
      if (result) {
        for(let i = 0; i < result.length; i++){
          if(result[i].idPadre == ''){
            this._relacionService.RelacionarGrupo(result[i]).subscribe((data: any) => {
            });
          } else{
            this._relacionService.RelacionarPadre(result[i]).subscribe((data: any) => {
            });
          }
        }      
        this.isLoading = true;
      } 
    });
  }

  filterEmptyAndUnique(array: any[]): any[] {
    const filteredArray = array.filter(item => item !== '' && item !== undefined && item !== null);
    return [...new Set(filteredArray)];
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  message() {
    if (this.evento == 1 && this.arrchecked.length > 0) {
      this._snackBar.open('Se seleccionaron todos los registros ', 'Cerrar', {
        duration: this.durationInSeconds * 1000,
      });
    } else if (this.evento == 2 && this.arrchecked.length > 0) {
      this._snackBar.open('Se seleccionaron todos los registros relacionados', 'Cerrar', {
        duration: this.durationInSeconds * 1000,
      });
    } else if (this.evento == 3 && this.arrchecked.length > 0) {
      this._snackBar.open('Se seleccionaron todos los registros no relacionados', 'Cerrar', {
        duration: this.durationInSeconds * 1000,
      });
    }
  }
  todos(event: any) {
    this.evento = event;
    this.arrchecked = [];
    this.setAll(false);
    if (event == 1) {
      this.dataSource = new MatTableDataSource(this.registros);
      this.dataSource.paginator = this.paginator;
    } else if (event == 2) {
      this.dataSource = new MatTableDataSource(this.registros.filter((registros: any) => registros.nombreGrupos.length > 0 || registros.nombrePadres.length > 0));
      this.dataSource.paginator = this.paginator;
    } else if (event == 3) {  
      this.dataSource = new MatTableDataSource(this.registros.filter((registros: any) => registros.nombreGrupos.length == 0 && registros.nombrePadres.length == 0));
      this.dataSource.paginator = this.paginator;
    }
    this.optionFile = event;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.dataSource.filter = filterValue;
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  delete(data: any) {
      data.nombreGrupos.forEach((grupo: any) => {
        this.AuxEliminar.push({
          id: data.idUsuario,
          idGrupo: grupo.idGrupo,
        });
      });
      data.nombrePadres.forEach((padre: any) => {
        this.AuxEliminarPadre.push({
          id: data.idUsuario,
          idPadre: padre.idPadre,
        });
      });  
    
    Swal.fire({
      title: '¿Estas seguro de eliminar todas las relaciones de este registro?',
      text: "No podras revertir esta acción!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, eliminar!',
      cancelButtonText: 'Cancelar',
    }).then((result) => {
      if (result.isConfirmed) {
        for(let i = 0; i < this.AuxEliminar.length; i++){
          this._relacionService.EliminarGrupo(this.AuxEliminar[i]).subscribe((data: any) => {
          });
        }
        for(let i=0; i< this.AuxEliminarPadre.length; i++){
          this._relacionService.EliminarPadre(this.AuxEliminarPadre[i]).subscribe((data: any) => {
          });
        }
        Swal.fire('Eliminado!','las relaciones han sido eliminadas','success');
        this.isLoading = true;
        this.AuxEliminar = [];
        this.AuxEliminarPadre = [];
      }
    });
  }
}

//Dialogo para relacionar alumnos con grupos 
@Component({
  selector: 'app-grupo',
  templateUrl: './grupo.html',
  styleUrl: './alumnos-padres.component.css',
  standalone: true,
  imports: [MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatFormFieldModule, MatIcon,
     MatSelectModule, ReactiveFormsModule, CommonModule
  ],
})
export class Grupo {
  public grupos: any;
  constructor(private fb: FormBuilder, public dialog: MatDialogRef<Grupo>, @Inject(MAT_DIALOG_DATA) public data: any, 
  private gruposService: GruposService) {     
    this.getGrupos();    
  }
  public form: FormGroup = this.fb.group({
    grupo: ['', [Validators.required]],
  });

  getGrupos(){
    this.gruposService.getHabilitados().subscribe((data: any)=>{
      this.grupos = data;
    })
  }

  isValidField(field: string) {
    return this.form.controls[field].errors && this.form.controls[field].touched;
  }

  saveGrupo() {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    let grupo = {
      id: this.data.id,
      idGrupo: this.form.value.grupo,
    }    
    this.dialog.close(grupo);    
  }

  limpiar() {
    this.form.reset();
  }
}

// Dialogo para relacionar alumnos con padres
@Component({
  selector: 'app-alum-padre',
  templateUrl: './Relacion.html',
  styleUrl: './alumnos-padres.component.css',
  standalone: true,
  imports: [MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatFormFieldModule, MatInputModule, MatIcon,
    MatSelectModule, ReactiveFormsModule, MatAutocompleteModule, AsyncPipe, MatTableModule, CommonModule
  ],
})

export class AlumnoPadre implements OnInit {
  displayedColumns: string[] = ['Padre', 'Grupo', 'Acciones'];
  relacionar: any[] = [];
  dataSource: MatTableDataSource<any>;
  myControl = new FormControl<string | any>('');
  options: any[] = [];
  grupos: any[] = [];
  filteredPadres!: Observable<any[]>;
  form!: FormGroup;
  strTitulo: string = 'Agregar Relación';
  AuxEliminar:any [] = [];

  constructor(private fb: FormBuilder, public dialog: MatDialogRef<AlumnoPadre>, @Inject(MAT_DIALOG_DATA) public data: any,
   private _relacionService: RelacionService, private gruposService: GruposService) {
    this.dataSource = new MatTableDataSource(this.relacionar);
    this.datos();
    this.getGrupos();    
  }
  
  datos() {
    this.form = this.fb.group({
      grupo: [{name:''}],
      padre: [{name: ''}],
    });
  }

  getGrupos(){
    this.gruposService.getHabilitados().subscribe((data: any)=>{      
      this.grupos = data.map((grupo:any) =>{
        return {name: grupo.nombreGrupo, id: grupo.idGrupo};
      })
    });
  }
  
  private _filter(name: string): any[] {
    const filterValue = name.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }

  displayFn(padre: any): string {
    return padre && padre.name ? padre.name : '';
  }

  ngOnInit(): void {
    this._relacionService.getPadres().subscribe((data: any) => {      
      this.options = data.map((padre: any) => {
        return { name: padre.nombrePadre, id: padre.idUsuario };
      });
      this.filteredPadres = this.myControl.valueChanges.pipe( startWith(''), map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filter(name as string) : this.options.slice();
      }),
    );
    });

    if (this.data.padre.length > 0 || this.data.grupo.length > 0) {
      this.strTitulo = 'Actualizar / Agregar';
      if (this.data.padre) {
        this.data.padre.forEach((padre: any) => {
          this.relacionar.push({
            id: this.data.id,
            grupo: '',
            idGrupo: '',  
            padre: padre.nombrePadre,
            idPadre: padre.idPadre,
          });
        });
      }
      
      if (this.data.grupo) {
        this.data.grupo.forEach((grupo:any) => {
        this.relacionar.push({
          id: this.data.id,
          grupo: grupo.nombreGrupo,
          idGrupo: grupo.idGrupo,
          padre: '',
          idPadre: '',
        });
      });
      }
    }
    console.log(this.relacionar); 
  }

  setPadre(padre: any): void {
    this.form.get('padre')?.setValue(padre);
  }

  setGrupo(grupo: any): void {
    grupo = this.form.get('grupo')?.value;
    this.form.get('grupo')?.setValue(grupo);
  }

  Agregar() {
    if (this.form.value.padre.name === '' && this.form.value.grupo.name === '') {
      return;
    } else {
      const auxBuscar = this.relacionar.find((item: any) => 
        item.idPadre === (this.form.value.padre.id || '') &&
        item.idGrupo === (this.form.value.grupo.id || '')
      );
      if (auxBuscar === undefined) {
        this.relacionar.push({
          id: this.data.id,
          grupo: this.form.value.grupo?.name || '',
          idGrupo: this.form.value.grupo?.id || '',
          padre: this.form.value.padre?.name || '',
          idPadre: this.form.value.padre?.id || '',
        });
      } else {
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'El registro ya existe',
        });
      }
      this.dataSource.data = this.relacionar;
      this.myControl.setValue({ name: '', id: '' });
      this.form.get('padre')?.reset();
      this.form.get('grupo')?.reset();
      this.form.get('grupo')?.setValue({ name: '', id:'' });
      this.form.get('padre')?.setValue({ name: '', id:'' });
    }
  }
  

  eliminarRelacion(registro: any) { 
    Swal.fire({
      title: '¿Estas seguro de eliminar este registro?',
      text: "No podras revertir esta acción!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, eliminar!',
      cancelButtonText: 'Cancelar',
    }).then((result) => {
      if (result.isConfirmed) {
        if(registro.idGrupo){
          let index =this.dataSource.data.findIndex((data:any)=> data == registro);
          this.AuxEliminar.push(this.dataSource.data[index]);
          this.relacionar.splice(index, 1);
          this.dataSource.data = [...this.relacionar];    
        }  else if(registro.idPadre){
          let index =this.dataSource.data.findIndex((data:any)=> data == registro);
          this.AuxEliminar.push(this.dataSource.data[index]);
          this.relacionar.splice(index, 1);
          this.dataSource.data = [...this.relacionar];    
        }           
      }            
    });
  }

  onSave() {
    if(this.AuxEliminar.length > 0){
      for(let i = 0; i < this.AuxEliminar.length; i++){
        if(this.AuxEliminar[i].idGrupo){
          this._relacionService.EliminarGrupo(this.AuxEliminar[i]).subscribe((data: any)=>{            
          });
        } else if(this.AuxEliminar[i].idPadre){
          this._relacionService.EliminarPadre(this.AuxEliminar[i]).subscribe((data: any)=>{            
          });
        }
      Swal.fire('Actualizado!','El registro ha sido actualizado ','success');
     }
    }

    if(this.data.padre.length == 0 || this.data.grupo.length == 0) {
        if(this.relacionar.length > 0) {
          Swal.fire(
            'Usuario Relacionado',
            'El Usuario ha sido relacionado correctamente',
            'success'
          );
          this.dialog.close(this.dataSource.data);
        }
  } else {
      this.dialog.close(this.dataSource.data);
      Swal.fire(
        'Usuario Actualizado',
        'El Usuario ha sido actualizado correctamente',
        'success'
      );
    }
  }

  limpiar() {
    this.myControl.setValue({ name: ''});
    this.form.get('padre')?.reset();
    this.form.get('grupo')?.reset();
    this.form.get('grupo')?.setValue({ name: '' });
    this.form.get('padre')?.setValue({ name: '' });    
  }
}

@Component({
  selector: 'app-EliminarGrupo',
  templateUrl: './EliminarGrupo.html',
  styleUrl: './alumnos-padres.component.css',
  standalone: true,
  imports: [ MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatFormFieldModule, MatIcon
    , MatSelectModule, ReactiveFormsModule, CommonModule
  ],
})
export class EliminarGrupo{
  form!: FormGroup;
  grupos: any [] = []; 
  constructor(public dialog: MatDialogRef<EliminarGrupo>, @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
    this.grupos = data.grupo;
    this.cargarGrupo();
  }
  cargarGrupo(){
    this.form = this.fb.group({
      grupo:['', [Validators.required]], 
    });
  }
  
  setGrupo(grupo: any): void {
    grupo= this.form.get('grupo')?.value;
    this.form.get('grupo')?.setValue(grupo);
  }
  
  isValidField(field: string) {
    return this.form.controls[field].errors && this.form.controls[field].touched;
  }
  saveGrupo(){
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    const grupo = {
      id: this.data.id,
      idGrupo: this.form.value.grupo.idGrupo
    }
    this.dialog.close(grupo);        
  }
  limpiar(){
    this.form.reset();
  }
}

@Component({
  selector: 'App-PDF-Alumno',
  templateUrl: './PDFAlumno.html',
  styleUrls: ['./PDFAlumnos.css'],
  standalone: true,
  imports:[ MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatIcon,AsyncPipe, CommonModule, MatTableModule, MatPaginator]
})
export class PdfAlumno {
  dataSource!: MatTableDataSource<any>;
  displayedColumns: string[]=['id', 'nombre', 'padre', 'grupo'];
  registros: any;
  logo: string = '';

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor( public dialogRef: MatDialogRef<PdfAlumno>,@Inject(MAT_DIALOG_DATA) public data: any, private _infoPersonalizar: PersonalizarService){     
    this.registros = data;           
    this.dataSource = new MatTableDataSource(this.registros); 
  }

  ngOnInit(): void {
    this.getLogo();
  }
  
   ngAfterViewInit(): void {
     this.dataSource.paginator= this.paginator;
   }

  getLogo(){
    this._infoPersonalizar.getOptions().subscribe((data: any) =>{
      this.logo = data.personalizacion.PERLOGO;
    });
  }

  downloadPDF(){
    const DATA = document.getElementById('Impresion') as HTMLElement;
    const doc = new jsPDF('p', 'pt', 'a4');
    const options = {
    background: 'white',
    scale: 2,
    useCORS: true,
    };
    const spinner = document.getElementById('spinner') as HTMLElement;
    spinner.style.display = 'block';
    html2canvas(DATA, options).then((canvas) => {
    const img = canvas.toDataURL('image/jpeg', 0.8); 
    const bufferX = 0;
    const bufferY = 0;
    const imgProps = (doc as any).getImageProperties(img);
    const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'NONE');
    doc.save(`${new Date().toISOString()}.Profesor.pdf`);
    
    spinner.style.display = 'none';
  });
 }
}
