document.addEventListener('DOMContentLoaded', function () {
    // Chart for submissions per survey
    fetch('api.php?action=submissions_per_survey')
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById('submissions-chart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: '# of Submissions',
                        data: data.values,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });

    // Charts for each survey's questions
    fetch('api.php?action=survey_question_analytics')
        .then(response => response.json())
        .then(surveys => {
            const container = document.getElementById('survey-charts-container');
            surveys.forEach(survey => {
                const surveyRow = document.createElement('div');
                surveyRow.className = 'row';
                
                const surveyTitle = document.createElement('h2');
                surveyTitle.innerText = `Survey: ${survey.title}`;
                container.appendChild(surveyTitle);
                container.appendChild(surveyRow);

                survey.questions.forEach(question => {
                    if (question.type === 'rating' || question.type === 'multiple-choice') {
                        const col = document.createElement('div');
                        col.className = 'col-md-6';
                        
                        const card = document.createElement('div');
                        card.className = 'card mb-4';
                        
                        const cardHeader = document.createElement('div');
                        cardHeader.className = 'card-header';
                        cardHeader.innerHTML = `<h3>${question.question_text}</h3>`;
                        
                        const cardBody = document.createElement('div');
                        cardBody.className = 'card-body';
                        
                        const canvas = document.createElement('canvas');
                        cardBody.appendChild(canvas);
                        card.appendChild(cardHeader);
                        card.appendChild(cardBody);
                        col.appendChild(card);
                        surveyRow.appendChild(col);

                        new Chart(canvas.getContext('2d'), {
                            type: 'bar',
                            data: {
                                labels: question.answers.labels,
                                datasets: [{
                                    label: 'Count',
                                    data: question.answers.values,
                                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                }
                            }
                        });
                    }
                });
            });
        });
});