35846-vm/assets/js/main.js

document.addEventListener('DOMContentLoaded', function () {
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('csv-file');
    const fileNameDisplay = document.getElementById('file-name-display');
    const uploadForm = document.getElementById('upload-form');
    const resultsSection = document.getElementById('results-section');
    const analysisOutput = document.getElementById('analysis-output');
    const submitButton = uploadForm.querySelector('button[type="submit"]');
    const spinner = submitButton.querySelector('.spinner-border');

    // Chart-related elements
    const chartSection = document.getElementById('chart-section');
    const chartRequestInput = document.getElementById('chart-request-input');
    const generateChartBtn = document.getElementById('generate-chart-btn');
    const chartOutput = document.getElementById('chart-output');
    const chartCanvas = document.getElementById('chart-canvas');
    const chartSpinner = generateChartBtn.querySelector('.spinner-border');
    let chartInstance = null;
    let uploadedFilePath = '';

    // Open file dialog when drop zone is clicked
    dropZone.addEventListener('click', () => fileInput.click());

    // Drag and drop events
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateFileName();
        }
    });

    // Update file name display on change
    fileInput.addEventListener('change', updateFileName);

    function updateFileName() {
        if (fileInput.files.length > 0) {
            fileNameDisplay.textContent = fileInput.files[0].name;
        } else {
            fileNameDisplay.textContent = 'No file selected';
        }
    }

    // Handle form submission for analysis
    uploadForm.addEventListener('submit', function (e) {
        e.preventDefault();

        if (fileInput.files.length === 0) {
            alert('Please select a CSV file to analyze.');
            return;
        }

        // Show spinner and disable button
        spinner.classList.remove('d-none');
        submitButton.disabled = true;
        chartSection.style.display = 'none'; // Hide chart section on new analysis

        const formData = new FormData(uploadForm);

        resultsSection.style.display = 'block';
        analysisOutput.innerHTML = `
            <div class="text-center p-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3">AI is analyzing your data, this may take a moment...</p>
            </div>
        `;
        resultsSection.scrollIntoView({ behavior: 'smooth' });

        fetch('upload.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                analysisOutput.innerHTML = data.analysis;
                uploadedFilePath = data.filePath; // Save the file path
                chartSection.style.display = 'block'; // Show chart section
                if(chartInstance) {
                    chartInstance.destroy(); // Clear previous chart
                }
                chartRequestInput.value = ''; // Clear previous request
            } else {
                analysisOutput.innerHTML = `<div class="alert alert-danger">${data.error || 'An unknown error occurred.'}</div>`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            analysisOutput.innerHTML = `<div class="alert alert-danger">An error occurred while communicating with the server.</div>`;
        })
        .finally(() => {
            spinner.classList.add('d-none');
            submitButton.disabled = false;
        });
    });

    // Handle chart generation
    generateChartBtn.addEventListener('click', function() {
        const chartRequest = chartRequestInput.value.trim();
        if (!chartRequest) {
            alert('Please describe the chart you want to create.');
            return;
        }
        if (!uploadedFilePath) {
            alert('Please analyze a CSV file first.');
            return;
        }

        chartSpinner.classList.remove('d-none');
        generateChartBtn.disabled = true;

        const formData = new FormData();
        formData.append('chart_request', chartRequest);
        formData.append('file_path', uploadedFilePath);

        fetch('chart.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.chartData) {
                renderChart(data.chartData);
            } else {
                chartOutput.innerHTML = `<div class="alert alert-danger">${data.error || 'Failed to generate chart.'}</div>`;
            }
        })
        .catch(error => {
            console.error('Chart Error:', error);
            chartOutput.innerHTML = `<div class="alert alert-danger">An error occurred while generating the chart.</div>`;
        })
        .finally(() => {
            chartSpinner.classList.add('d-none');
            generateChartBtn.disabled = false;
        });
    });

    function renderChart(chartData) {
        if (chartInstance) {
            chartInstance.destroy();
        }
        chartInstance = new Chart(chartCanvas, {
            type: chartData.type,
            data: chartData.data,
            options: chartData.options || {}
        });
    }
});