No plan available for this selection. Please try a different combination.

`; return; } planOutput.innerHTML = ``; const container = document.getElementById('pdf-content-area'); plan.forEach(dayPlan => { const exercisesHtml = dayPlan.plan.map(p => { let badgeColor = 'bg-gray-200 text-gray-800'; if (p.type === 'Skill') badgeColor = 'bg-blue-100 text-blue-800'; if (p.type === 'Strength') badgeColor = 'bg-red-100 text-red-800'; if (p.type === 'Cardio') badgeColor = 'bg-green-100 text-green-800'; if (p.type === 'Recovery') badgeColor = 'bg-yellow-100 text-yellow-800'; return `

${p.type}${p.exercise}${p.detail}

`; }).join(''); const dayCard = ` `; container.innerHTML += dayCard; }); }; const populateLibrary = () => { const allExercises = {}; Object.values(trainingData).forEach(sport => { Object.values(sport).forEach(level => { Object.values(level).forEach(plan => { plan.forEach(day => { day.plan.forEach(ex => { if (!allExercises[ex.exercise]) { allExercises[ex.exercise] = { type: ex.type, description: `A key ${ex.type.toLowerCase()} component for improving performance.` // Placeholder description }; } }); }); }); }); }); let libraryHtml = ''; for (const [name, data] of Object.entries(allExercises)) { libraryHtml += ` `; } libraryOutput.innerHTML = libraryHtml; }; const downloadPDF = () => { if (!currentPlan) { alert("Please generate a plan first before downloading."); return; } const pdfContainer = document.createElement('div'); pdfContainer.style.position = 'absolute'; pdfContainer.style.left = '-9999px'; pdfContainer.style.width = '800px'; pdfContainer.style.backgroundColor = '#ffffff'; pdfContainer.style.fontFamily = "'Inter', sans-serif"; const sport = sportSelect.value; const level = levelSelect.value; const days = daysSelect.value; const generationDate = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); const planHtml = document.getElementById('pdf-content-area')?.innerHTML || ''; let pdfContent = ` `; pdfContainer.innerHTML = pdfContent; // We need to apply styles directly as classes won't be available pdfContainer.querySelectorAll('.day-card').forEach(el => { el.style.border = '1px solid #e5e7eb'; el.style.borderRadius = '0.75rem'; el.style.padding = '1.5rem'; el.style.backgroundColor = '#f9fafb'; }); pdfContainer.querySelectorAll('h3').forEach(el => { el.style.fontSize = '1.25rem'; el.style.fontWeight = '700'; el.style.color = '#1f2937';}); pdfContainer.querySelectorAll('p').forEach(el => { if(el.className.includes('text-blue-600')) {el.style.color = '#2563eb'; el.style.fontWeight='600'; el.style.marginBottom='1rem';}}); pdfContainer.querySelectorAll('ul').forEach(el => { el.style.listStyle = 'none'; el.style.padding = '0';}); pdfContainer.querySelectorAll('li').forEach(el => { el.style.display = 'flex'; el.style.alignItems = 'center'; el.style.justifyContent = 'space-between'; el.style.padding = '0.5rem 0'; el.style.borderTop = '1px solid #e5e7eb';}); pdfContainer.querySelectorAll('.exercise-type-badge').forEach(el => { el.style.display = 'inline-block'; el.style.padding = '0.25rem 0.75rem'; el.style.borderRadius = '9999px'; el.style.fontSize = '0.75rem'; el.style.fontWeight = '500'; el.style.marginRight = '0.5rem'; // This is a simplification; for real colors, we'd need a map if(el.textContent === 'Skill') { el.style.backgroundColor = '#dbeafe'; el.style.color = '#1e40af'; } else if(el.textContent === 'Strength') { el.style.backgroundColor = '#fee2e2'; el.style.color = '#991b1b'; } else if(el.textContent === 'Cardio') { el.style.backgroundColor = '#dcfce7'; el.style.color = '#166534'; } else { el.style.backgroundColor = '#f3f4f6'; el.style.color = '#374151'; } }); document.body.appendChild(pdfContainer); window.html2canvas(pdfContainer, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = pdfWidth; const imgHeight = canvas.height * imgWidth / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); pdf.save(`${sport}-Training-Plan.pdf`); document.body.removeChild(pdfContainer); }).catch(err => { console.error("Error generating PDF:", err); if(document.body.contains(pdfContainer)) document.body.removeChild(pdfContainer); }); }; // --- Event Listeners --- generatePlanBtn.addEventListener('click', generatePlan); downloadPdfBtn.addEventListener('click', downloadPDF); // --- Initialization --- generatePlan(); // Generate a default plan on load populateLibrary(); switchTab('generator'); // Set initial tab state }); // --- Global Tab Switching Logic --- const switchTab = (tabId) => { const generatorTab = document.getElementById('generator-tab'); const libraryTab = document.getElementById('library-tab'); const generatorBtn = document.getElementById('tab-generator-btn'); const libraryBtn = document.getElementById('tab-library-btn'); const nextBtn = document.getElementById('next-btn'); const prevBtn = document.getElementById('prev-btn'); if (tabId === 'generator') { generatorTab.style.display = 'block'; libraryTab.style.display = 'none'; generatorBtn.classList.add('active'); libraryBtn.classList.remove('active'); prevBtn.disabled = true; nextBtn.disabled = false; } else { // 'library' generatorTab.style.display = 'none'; libraryTab.style.display = 'block'; generatorBtn.classList.remove('active'); libraryBtn.classList.add('active'); prevBtn.disabled = false; nextBtn.disabled = true; } }; const navigateTabs = (direction) => { const isGeneratorActive = document.getElementById('tab-generator-btn').classList.contains('active'); if (direction === 'next' && isGeneratorActive) { switchTab('library'); } else if (direction === 'prev' && !isGeneratorActive) { switchTab('generator'); } };