<?php 
// archivo: analisis_estadistico_desglosado_escritura.php
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modalidades de Actividad Física</title>
  <link rel="stylesheet" href="stylesestsdistic.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="mobileAppAnaEstEsc.js"></script>
  <style>
    .chart-container { width: 800px; margin: 20px auto; }
    .btn-container { text-align: center; margin-top: 20px; }
    .btn { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 5px; }
    .btn-print { background-color: #007bff; color: white; border: none; }
    .btn-pdf { background-color: #28a745; color: white; border: none; }
  </style>
</head>
<body>
  <h1>Gráficas de Escritura, Desglosadas por Modalidad de Actividad Física</h1>
  
  <div class="btn-container">
    <button class="btn btn-print" onclick="window.print()">Imprimir</button>
    <button class="btn btn-pdf" onclick="generatePDF()">Descargar PDF</button>
  </div>
  
 <div id="chartsContainer">
    <div class="chart-container">
      <canvas id="evolutionChart"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="pieChart"></canvas>
    </div>
  </div>
  
  <script>
    function generatePDF() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF({ orientation: "scape", unit: "mm", format: "a4" });      
      doc.setFontSize(12);
      doc.text("Gráficas de Escritura, Desglosadas por Modalidad de Actividad Física", 20, 20);
      
      const charts = document.querySelectorAll(".chart-container canvas");
      let yOffset = 30;
      let pageHeight = doc.internal.pageSize.height;

      function addChartToPDF(chart, callback) {
        html2canvas(chart, { scale: 2 }).then(canvas => {
          const imgData = canvas.toDataURL("image/png");
          const imgWidth = 180;
          const imgHeight = (canvas.height * imgWidth) / canvas.width;
          
          if (yOffset + imgHeight > pageHeight - 10) {
            doc.addPage();
            yOffset = 30;
          }
          
          doc.addImage(imgData, "PNG", 10, yOffset, imgWidth, imgHeight);
          yOffset += imgHeight + 10;
          
          callback();
        });
      }
      
      let chartIndex = 0;
      function processNextChart() {
        if (chartIndex < charts.length) {
          addChartToPDF(charts[chartIndex], () => {
            chartIndex++;
            processNextChart();
          });
        } else {
          doc.save("escritura.pdf");
      }
      }
      
      processNextChart();
    }
  </script>
</body>
</html>
<?php
include "footer.php";
include "estilos.php";
?>