import { Component, ViewChild, OnInit, ElementRef, EventEmitter, Output, Inject } from '@angular/core';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { NivelEducativoService } from '../../services/nivel-educativo.service';

import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import * as XLSX from 'xlsx';
import { EnviarInfoService } from '../../services/enviar-info.service';

import Swal from 'sweetalert2';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { NivelEducativo } from '../../interfaces/NivelEducativo.interface';
import { CircularService } from '../../services/circular.service';
import moment from 'moment';
import { Editor, Toolbar } from 'ngx-editor';
import { provideNativeDateAdapter } from '@angular/material/core';
import { GradosEducativosService } from '../../services/grados-educativos.service';
import { MateriaService } from '../../services/materia.service';
import { GruposService } from '../../services/grupos.service';
import { concat, forkJoin, map, Observable, tap } from 'rxjs';
import { v4 as uuidv4 } from 'uuid';





@Component({
  selector: 'app-niveles-educativos',
  templateUrl: './circulares.component.html',
  styleUrls: ['./circulares.component.css']
})
export class CircularesComponent implements OnInit {
  public checked = false;
  public isLoading: boolean = true;
  public searchInput = new FormControl('');
  public color: string = '';
  public textColor: string = '';
  public columnas: string[] = ['titulo', 'estado', 'receptoresAudiencia', 'importancia', 'fechaPub', 'fechaCad', 'adjuntos', 'acciones'];
  public dataSource = new MatTableDataSource<NivelEducativo>();

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild('TABLE') table!: ElementRef;

  constructor(
    private circularService: CircularService,
    private _MatIconRegister: MatIconRegistry,
    private _DomSanitizer: DomSanitizer,
    private paginatorIntl: MatPaginatorIntl,
    private _enviarInfo: EnviarInfoService,
    public dialog: MatDialog
  ) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));
    //paginador de tabla a español
    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.paginatorIntl.nextPageLabel = "Siguiente";
    this.paginatorIntl.previousPageLabel = "Anterior";
    this.paginatorIntl.firstPageLabel = "Ir a la primer página";
    this.paginatorIntl.lastPageLabel = "Ir a la última página";
    this.paginatorIntl.itemsPerPageLabel = "Registros por página";
    this.paginatorIntl.getRangeLabel = spanishRangeLabel;
  }

  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });

    //suscribirse al subject que manda al servicio
    this._enviarInfo.tabla$.subscribe(() => {
      this.getCirculares();
    });

    this.getCirculares()

  }

  public allInfo: any;
  public files: any;
  //Traer la información y mostrarla en la tabla
  getCirculares() {
    this.circularService.getAllCirculares().subscribe((response: any) => {
      this.isLoading = false;

      this.allInfo = response.map((circular: any) => {

        if (circular.jsonAdjuntos) {
          circular.jsonAdjuntos = JSON.parse(circular.jsonAdjuntos);

        } else {
          circular.jsonAdjuntos = [];
        }
        return circular;
      });

      this.dataSource = new MatTableDataSource<any>(this.allInfo.filter((filtro: any) => filtro.estado === 'Activo'));
      this.dataSource.paginator = this.paginator;
    });
  }

  buscarArchivo(ruta: string) {
    window.open(ruta, '_blank');
  }



  deleteCircular(id: string) {

    Swal.fire({
      icon: 'question',
      title: '¿Desea cambiar el estado de la circular?',
      showCancelButton: true,
      allowOutsideClick: false,
      allowEscapeKey: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Eliminar",
    }).then((result: any) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        this.circularService.eliminarCircular(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: `${response.mensaje}`,
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {

            if (result.isConfirmed) {
              this._enviarInfo.notifyCambioTabla();
              Swal.close();
            }
          })
        }, (err) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al eliminar',
            text: `${err.error.mensaje}`,
          })
          this._enviarInfo.notifyCambioTabla();
        }
        )
      } else if (result.dismiss == 'cancel') {
        this._enviarInfo.notifyCambioTabla();
      }
    });

  }

  enableCircular(id: string) {
    Swal.fire({
      icon: 'question',
      title: '¿Desea habilitar la circular?',
      showCancelButton: true,
      allowOutsideClick: false,
      allowEscapeKey: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Habilitar",
    }).then((result: any) => {

      if (result.value) {
        this.circularService.habilitarCircular(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: `${response.mensaje}`,
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {
            if (result.isConfirmed) {
              Swal.close();
              this._enviarInfo.notifyCambioTabla();
            }
          })
        }, (err) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al habilitar',
            text: `${err.error.message}`,
          })
        }
        )
      } else if (result.dismiss == 'cancel') {
        this._enviarInfo.notifyCambioTabla();
      }
    });
  }

  option(event: string) {
    this.isLoading = true;
    let filteredData: any;

    if (event === 'Activos') {
      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Activo');
    } else if (event === 'Eliminados') {
      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Eliminado');
    }

    this.dataSource = new MatTableDataSource<any>(filteredData);
    this.dataSource.paginator = this.paginator;
    this.isLoading = false;
  }


  //filtro de búsqueda
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }




  //exportar búsqueda a excel
  exportAsExcel() {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaCirculares');
    XLSX.writeFile(wb, 'Circulares.xlsx');

  }
  //exportar toda la data a excel
  exportAll() {
    const dataSource = this.dataSource.data;
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(dataSource);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaCirculares');
    XLSX.writeFile(wb, 'Circulares.xlsx');
  }


  // openDialog(id: string) {
  //   const dialogRef = this.dialog.open(ModalCircularesEdit, {
  //     autoFocus: false
  //   });

  //   //esto es para actualizar la tabla una vez actualizada la info
  //   dialogRef.componentInstance.circularActualizada.subscribe(() => {
  //     this.getCirculares();
  //   });

  // }

  openDialog1(id: string) {
    const dialogRef = this.dialog.open(ModalCircular, {
      autoFocus: false
    });


    dialogRef.componentInstance.setData(id);
  }

  openDialog2(id: string) {
    const dialogRef = this.dialog.open(ModalExtraInfo, {
      autoFocus: false
    });


    dialogRef.componentInstance.setData1(id);
  }

  openDialogEdit(circular: any) {
    console.log("🚀 ~ CircularesComponent ~ openDialogEdit ~ circular:", circular)
    const dialogRef = this.dialog.open(ModalCircularesEdit, {
      autoFocus: false,
      data: circular
    });

    dialogRef.componentInstance.circularActualizada.subscribe(() => {
      this.getCirculares();
    });


  }

  openDialogStats(id: string) {
    const dialogRef = this.dialog.open(ModalStats, {
      autoFocus: false
    });

    dialogRef.componentInstance.setData3(id);
  }

}


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'editar.component.html',
  styleUrl: './circulares.component.css',
  providers: [provideNativeDateAdapter()],

})

export class ModalCircularesEdit {

  public grados: any;
  public grupos: any;
  public materias: any;
  public opciones: any;
  public urls: any = []
  constructor(public dialog: MatDialog,
    private circularService: CircularService,
    private gradoService: GradosEducativosService,
    private grupoService: GruposService,
    private materiaService: MateriaService,
    private nivelService: NivelEducativoService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {

    this.editor = new Editor();
    this.setData2();

  }

  public todayDate: Date = new Date();

  public info: any;
  private userData = JSON.parse(localStorage.getItem('userData') || '');
  @Output() circularActualizada = new EventEmitter<void>();
  editor!: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  colorPresets = [
    "#000000", // Negro
    "#FF0000", // Rojo
    "#00FF00", // Verde
    "#0000FF", // Azul
    "#FFFF00", // Amarillo
    "#FF00FF", // Magenta
    "#00FFFF", // Cian
    "#808080", // Gris
    "#FFFFFF", // Blanco
    "#800000", // Marrón
    "#008000", // Verde oscuro
    "#000080", // Azul oscuro
    "#808000", // Oliva
    "#800080", // Púrpura
    "#008080", // Verde azulado
    "#C0C0C0"  // Plata

  ];



  ngOnDestroy(): void {
    this.editor.destroy();
  }


  audiencia = [
    { value: 'AL', audiencia: 'Alumnos' },
    { value: 'PF', audiencia: 'Padre de Familia' },
    { value: 'AD', audiencia: 'Administradores' },
    { value: 'PR', audiencia: 'Profesores' },
  ]

  importancia = [
    { value: 'Normal', importancia: 'Normal' },
    { value: 'Media', importancia: 'Media' },
    { value: 'Alta', importancia: 'Alta' },
  ]


  public form = new FormGroup({
    titulo: new FormControl<string>('', Validators.required),
    audiencia: new FormControl<string>({ value: '', disabled: true }, Validators.required),
    destinos: new FormControl<string>({ value: '', disabled: true }, Validators.required),
    // audiencia: new FormControl<string>('', Validators.required),
    // destinos: new FormControl<string>('', Validators.required),
    contenido: new FormControl<string>('', Validators.required),
    importancia: new FormControl<string>('', Validators.required),

    fechaInicio: new FormControl<any>(null, Validators.required),
    horaInicio: new FormControl<any>(null, Validators.required),
    fechaCaducidad: new FormControl<any>(null, Validators.required),
    horaCaducidad: new FormControl<any>(null, Validators.required),
    link: new FormControl<string>('')
  })

  public adjuntos: any;


  onAudienciaChange(value: any) {
    let extra = {};
    console.log(value);

    switch (value) {
      case 'AL':
        extra = {
          name: 'Alumnos',
          grupo: [
            { value: 'AL', Destino: 'todos', viewValue: 'Todos los Alumnos' }
          ]
        };
        this.data.idReceptores === 'AL' ? this.opciones = [extra] : this.getOpciones();
        break;
      case 'PF':
        extra = {
          name: 'Padres de Familia',
          grupo: [
            { value: 'PF', Destino: 'todos', viewValue: 'Todos los Padres de Familia' }
          ]
        };
        this.data.idReceptores === 'PF' ? this.opciones = [extra] : this.getOpciones();
        break;
      case 'AD':
        extra = {
          name: 'Administradores',
          grupo: [
            { value: 'AD', Destino: 'todos', viewValue: 'Todos los Administradores' }
          ]
        };
        this.data.idReceptores === 'AD' ? this.opciones = [extra] : this.getOpciones();
        break;
      case 'PR':
        extra = {
          name: 'Profesores',
          grupo: [
            { value: 'PR', Destino: 'todos', viewValue: 'Todos los Profesores' }
          ]
        };
        this.data.idReceptores === 'PR' ? this.opciones = [extra] : this.getOpciones();
        break;
      default:
        console.warn('Opción no reconocida:', value);
        return;
    }
  }

  getOpciones() {
    this.lista().subscribe((opciones: any) => {
      this.opciones = opciones;
    });
  }

  lista(): Observable<any[]> {
    const niveles = this.nivelService.getHabilitados();
    const grados = this.gradoService.getHabilitados();
    const grupos = this.grupoService.getHabilitados();
    const materias = this.materiaService.getHabilitados();

    return forkJoin({
      niveles,
      grados,
      grupos,
      materias,
    }).pipe(
      map(({ niveles, grados, grupos, materias }: any) => [
        {
          name: 'Nivel Educativo',
          grupo: niveles.map((nivel: any) => ({
            value: nivel.idNivel,
            Destino: 'NivelEducativo',
            viewValue: nivel.nombreNivel,
          })),
        },
        {
          name: 'Grados',
          grupo: grados.map((grado: any) => ({
            value: grado.nombreGrado,
            Destino: 'Grado',
            viewValue: grado.nombreGrado,
          })),
        },
        {
          name: 'Grupos',
          grupo: grupos.map((grupo: any) => ({
            value: grupo.idGrupo,
            Destino: 'Grupo',
            viewValue: grupo.nombreGrupo,
          })),
        },
        {
          name: 'Materia',
          grupo: materias.map((materia: any) => ({
            value: materia.idMateria,
            Destino: 'Materias',
            viewValue: materia.nombreMateria,
          })),
        },
      ])
    );
  }


  convertToDatetime() {
    // Obtener valores del formulario
    const fechaInicio: any = this.form.get('fechaInicio')?.value;
    const horaInicio: any = this.form.get('horaInicio')?.value;
    const fechaCaducidad: any = this.form.get('fechaCaducidad')?.value;
    const horaCaducidad: any = this.form.get('horaCaducidad')?.value;

    let fechaHoraInicio: string | undefined;
    let fechaHoraCaducidad: string | undefined;

    if (fechaInicio && horaInicio) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaInicio).format("YYYY-MM-DD");
      fechaHoraInicio = `${formattedDate} ${horaInicio}`;

    } else {
      console.error('Fecha de inicio o hora de inicio no válidas.');
    }

    if (fechaCaducidad && horaCaducidad) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaCaducidad).format("YYYY-MM-DD");
      fechaHoraCaducidad = `${formattedDate} ${horaCaducidad}`;

    } else {
      console.error('Fecha de caducidad o hora de caducidad no válidas.');
    }

    this.info = {
      titulo: this.form.get('titulo')?.value,
      audiencia: this.data.audiencia,
      idReceptores: this.data.idReceptores,
      contenido: this.form.get('contenido')?.value,
      importancia: this.form.get('importancia')?.value,
      jsonAdjuntos: this.adjuntos,
      bases64: this.bases64,
      fechaCreacion: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      fechaPublicacion: fechaHoraInicio,
      fechaCaducidad: fechaHoraCaducidad,
      urls: this.urls.join("||"),
      idUsuario: this.userData[0]
    };


  }



  setData2() {
    console.log(this.data);
    this.urls = this.data.urls ? this.data.urls.split("||") : [];
    const archivos = this.data.jsonAdjuntos;
    this.adjuntos = archivos.map((adjunto: any) => {
      return {
        id: adjunto.id,
        nombre: adjunto.nombre,
        ruta: adjunto.ruta,
        tamanio: adjunto.tamanio,
      }
    })

    // console.log('adjuntos', this.adjuntos);

    let fechaPublicacion = new Date(this.data.fechaPublicacion);
    fechaPublicacion.setDate(fechaPublicacion.getDate());
    let fechaCaducidad = new Date(this.data.fechaCaducidad);
    fechaCaducidad.setDate(fechaCaducidad.getDate());
    this.onAudienciaChange(this.data.audiencia);
    this.form.controls['titulo'].setValue(this.data.titulo);;

    this.form.controls['audiencia'].setValue(this.data.audiencia);
    this.form.controls['destinos'].setValue(this.data.idReceptores);
    this.form.controls['importancia'].setValue(this.data.importancia);
    this.form.controls['fechaInicio'].setValue(fechaPublicacion);
    this.form.controls['horaInicio'].setValue(this.data.fechaPublicacion.split(' ')[1]);
    this.form.controls['fechaCaducidad'].setValue(fechaCaducidad);
    this.form.controls['horaCaducidad'].setValue(this.data.fechaCaducidad.split(' ')[1]);
    this.form.controls['contenido'].setValue(this.data.contenido);

  }

  isValidField(field: string, errorType: string) {
    const control = this.form.get(field);
    return control?.hasError(errorType) && control?.touched;
  }


  editCircular() {
    this.convertToDatetime()


    this.info = {
      idCircular: this.data.idCircular,
      ...this.info
    }

    Swal.fire({
      title: 'Editando circular...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });


    this.circularService.actualizarCircular(this.info).subscribe((response: any) => {
      Swal.close();
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`,

      })
      this.dialog.closeAll();
      this.circularActualizada.emit();
    }, (err) => {
      Swal.close();
      Swal.fire({
        icon: 'error',
        title: `${err.error.mensaje}`,

      })
    })
  }

  bases64: Array<{ id: string, nombre: string, base64: string }> = [];
  nombreInvalido(nombre: string): boolean {
    const caracteresInvalidos = /[<>:"/\\|?*]/;
    const nombresReservados = /^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])(\..+)?$/i;
    return (
      caracteresInvalidos.test(nombre) ||
      nombre.length > 255 ||
      nombre.endsWith('.') ||
      nombre.endsWith(' ') ||
      nombresReservados.test(nombre)
    );
  };

  extensionesPermitidas = ['.xlsx', '.docx', '.pdf', '.pptx', '.txt', '.jpg', '.jpeg', '.png'];


  extensionInvalida(nombre: string): boolean {
    const extension = nombre.substring(nombre.lastIndexOf('.')).toLowerCase();
    return !this.extensionesPermitidas.includes(extension);
  };

  onFilesSelected(event: any) {
    const files = event.target.files;


    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      if (this.nombreInvalido(file.name)) {
        Swal.fire({
          icon: 'error',
          title: 'Nombre de archivo inválido',
          text: `El archivo "${file.name}" contiene caracteres no permitidos o es demasiado largo.`
        });
        continue;
      }

      if (this.extensionInvalida(file.name)) {
        Swal.fire({
          icon: 'error',
          title: 'Extensión no permitida',
          text: `El archivo "${file.name}" no tiene una extensión válida. Solo se permiten: ${this.extensionesPermitidas.join(', ')}.`
        });
        continue;
      }

      const reader = new FileReader();

      // Generar un ID único para cada archivo
      const uniqueId = uuidv4();

      reader.onload = (e: any) => {
        const base64String = e.target.result;
        this.adjuntos.push({
          id: uniqueId,
          nombre: file.name,
          tamanio: Math.round((file.size / 1000 * 10)) / 10,
        });
        console.log(this.adjuntos);
        this.bases64.push({
          id: uniqueId,
          nombre: file.name,
          base64: base64String
        });

      };

      reader.readAsDataURL(file);
    }
  }



  deleteIndex(i: number, archivo: any) {
    Swal.fire({
      title: '¿Está seguro que desea eliminar el archivo?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        if (!archivo.ruta) {
          this.adjuntos.splice(i, 1);
        } else {
          this.adjuntos.splice(i, 1);
          const archivoEliminar = { idArchivo: archivo.id, url: archivo.ruta, idCircular: this.data.idCircular };

          Swal.fire({
            title: 'Eliminando archivo...',
            allowOutsideClick: false,
            didOpen: () => {
              Swal.showLoading();
            }
          });

          this.circularService.eliminarArchivo(archivoEliminar).subscribe((response: any) => {
            Swal.close();
            Swal.fire({
              icon: 'success',
              title: `${response.mensaje}`,
            });
          }, (err) => {
            Swal.close();
            console.error('Error al eliminar el archivo:', err);
            Swal.fire({
              icon: 'error',
              title: `${err.error.mensaje}`,
            });
          });
        }
      }
    });
  }



  addUrl() {
    const link = this.form.get('link')?.value;
    this.urls.push(link);
    this.form.get('link')?.setValue('');
    console.log(this.urls);
  }


  deleteUrl(i: number) {
    if (i !== -1) {
      this.urls.splice(i, 1);
    }
  }



  public horasDelDia: any = this.generarHorasDelDia();
  generarHorasDelDia(): { hora24: string, hora12: string }[] {
    const horas: { hora24: string, hora12: string }[] = [];
    let hora: number = 0;
    let minutos: number = 0;

    for (let i = 0; i < 48; i++) {
      let ampm = 'am';
      let hora12: number = hora;

      if (hora === 0) {
        hora12 = 12;
      } else if (hora === 12) {
        ampm = 'pm';
      } else if (hora > 12) {
        hora12 = hora - 12;
        ampm = 'pm';
      }

      const horaFormateada24 = `${hora.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:00`;
      const horaFormateada12 = `${hora12.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')} ${ampm}`;

      horas.push({ hora24: horaFormateada24, hora12: horaFormateada12 });

      minutos += 30;
      if (minutos === 60) {
        minutos = 0;
        hora++;
      }
    }

    return horas;
  }

  campoNoValido(campo: string): boolean {
    if (this.form.get(campo)?.invalid && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  campoVacio(campo: string): boolean {
    if ((this.form.get(campo)?.value === '') && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  close() {
    this.dialog.closeAll()
  }

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


}


// -----------------------------------------------------------------------------------------


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'circular.component.html',
  styleUrl: './circulares.component.css'

})

export class ModalCircular {
  public isLoading: boolean = true;
  public data: any;
  public title: string = '';

  constructor(
    public dialog: MatDialog,
    private sanitizer: DomSanitizer,
    private circularService: CircularService
  ) { }

  public circular: any;

  setData(id: any) {
    this.circularService.getOne(id).subscribe((response: any) => {
      this.isLoading = false;
      this.title = response.titulo
      this.data = this.sanitizer.bypassSecurityTrustHtml(response.contenido);
    });
  }

}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'extraInfo.component.html',
  styleUrl: './circulares.component.css'

})

export class ModalExtraInfo {
  public isLoading: boolean = true;
  public data: any;
  public title: string = '';
  constructor(
    public dialog: MatDialog,
    private circularService: CircularService
  ) { }

  public circular: any;

  setData1(id: any) {
    this.circularService.extraInfo(id).subscribe((response: any) => {
      this.isLoading = false;
      this.data = response
    });
  }


}


@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'estadisticas.component.html',
  styleUrl: './circulares.component.css'

})

export class ModalStats {
  public isLoading: boolean = true;
  public data: any;
  public title: string = '';
  constructor(
    public dialog: MatDialog,
    private circularService: CircularService
  ) { }

  public circular: any;
  public allInfo: any;
  public dataSource = new MatTableDataSource<any>();
  public columnas: string[] = ['nombre', 'lectura'];

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;

  setData3(id: any) {
    this.circularService.estadisticas(id).subscribe((response: any) => {
      this.isLoading = false;
      this.data = response
      this.isLoading = false;

      this.allInfo = response.data

      this.dataSource = new MatTableDataSource<any>(this.allInfo);
      this.dataSource.paginator = this.paginator;
      return this.allInfo;
    });

  }

}