script.js

const dias = ["martes", "viernes", "sabado", "domingo"];
const actividades = {
  martes: [
{ nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
  ],
  viernes: [
{ nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
  ],
  sabado: [
{ nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
  ],
  domingo: [
{ nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
    { nombre: "", tiempo: "", responsable: "", completada: false },
  ],
};

const diaSeleccionado = document.getElementById("dia");
const tbody = document.getElementById("planificacion").getElementsByTagName("tbody")[0];
const totalTiempo = document.getElementById("total-tiempo");

// Función para generar la planificación
function generarPlanificacion() {
  const dia = diaSeleccionado.value;
  if (!dia) return;

  // Limpiar la tabla
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }


  // Obtener las actividades del día seleccionado
// Obtener las actividades del día seleccionado
const actividadesDia = actividades[dia];


  // Agregar las actividades a la tabla
 for (const actividad of actividadesDia) {
    const fila = document.createElement("tr");
    const nombreInput = document.createElement("input");
    nombreInput.type = "text";
    nombreInput.name = "actividad";
    nombreInput.value = actividad.nombre;
    
    const tiempoInput = document.createElement("input");
    tiempoInput.type = "number";
    tiempoInput.name = "tiempo";
    tiempoInput.value = actividad.tiempo;

    const responsableInput = document.createElement("input");
    responsableInput.type = "text";
    responsableInput.name = "responsable";
    responsableInput.value = actividad.responsable;

    fila.appendChild(nombreInput);
    fila.appendChild(tiempoInput);
    fila.appendChild(responsableInput);

    tbody.appendChild(fila);
  }

// Agregar eventos a los botones utilizando delegación
document.querySelector(".acciones").addEventListener("click", function(event) {
  const targetId = event.target.id;

  if (targetId === "generar") {
    generarPlanificacion();
  } else if (targetId === "exportar-pdf") {
    exportarPDF();
  } else if (targetId === "capturar-pantalla") {
    capturarPantalla();
  } else if (targetId === "descargar-imagen") {
    descargarImagen();
  }
});
// Ocultar botones durante la generación de planificación
  ocultarBotones();
}
function ocultarBotones() {
  const botones = document.querySelectorAll('.acciones button');
  botones.forEach(boton => boton.style.display = 'none');
}
// Función para exportar a PDF
function exportarPDF() {
  const contenido = document.getElementById("planificacion").innerHTML;
  const ventana = window.open('', '', 'width=800,height=600');
  ventana.document.write(`
    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Planificación de Culto - ${diaSeleccionado.value}</title>
    </head>
    <body>
      ${contenido}
    </body>
    </html>
  `);
  ventana.document.close();
  ventana.print();
}

// Función para capturar pantalla
function capturarPantalla() {
  html2canvas(document.getElementById("planificacion")).then(function(canvas) {
    const imagen = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = imagen;
    a.download = `planificacion-${diaSeleccionado.value}.png`;
    a.click();
  });
}
function mostrarBotones() {
  const botones = document.querySelectorAll('.acciones button');
  botones.forEach(boton => boton.style.display = 'inline-block');
}

// Función para descargar imagen
function descargarImagen() {
  html2canvas(document.getElementById("planificacion")).then(function(canvas) {
    const imagen = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = imagen;
    a.download = `planificacion-${diaSeleccionado.value}.png`;
    a.click();
  });
}

// Agregar eventos a los botones
document.getElementById("generar").addEventListener("click", generarPlanificacion);
document.getElementById("exportar-pdf").addEventListener("click", exportarPDF);
document.getElementById("capturar-pantalla").addEventListener("click", capturarPantalla);
document.getElementById("descargar-imagen").addEventListener("click", descargarImagen);
function obtenerFecha() {
  const fecha = document.getElementById("fecha").value;
  return fecha;
}

// Función para generar la planificación
function generarPlanificacion() {
  const fecha = obtenerFecha();
  if (!fecha) return;

  // ...
  // Resto del código de la función generarPlanificacion
  // ...
}

// Agregar evento al selector de fecha
document.getElementById("fecha").addEventListener("change", generarPlanificacion);