@extends("layouts.main")

@section("content")
<style>
    body {
        font-family: 'Montserrat', sans-serif;
        color:#252869;
    }

    .container{
        width:500px;
    }
    .headline {
        font-family: 'Montserrat', sans-serif;
        font-weight: 900;
    }
    .bar {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        border-radius: 0.5rem;
        transition: width 0.3s ease-in-out;
        background-color:#252869;
    }
    .answer {
        position: relative;
        overflow: hidden;
    }
    .tag {
        display: inline-block;
        margin: 0.25rem;
        padding: 10px;
        border-radius: calc(min(25px, 50%)); /* Fully rounded corners */
        font-size: 1rem; /* Base font size for tags */
        line-height: 2rem; /* Fixed line-height to ensure vertical centering */
        vertical-align: middle; /* Aligns the baseline of the element with the baseline of its parent */
        background-color: #252869; /* Default dark background for tags */
        color:white;
        font-weight:600;
    }
    .answer .text-lg{
        color:white;
    }
    .bar.top-item, .tag.top-item {
        background: linear-gradient(53.81deg, #28A9AB -31.23%, #B4E495 77.79%);
    }

    .top-item {
        color:#252869!important;
    }

    .text-2l{
        font-size:1.2em;
    }
    .text-2xl{
        margin-top:50px;
        margin-bottom:30px;
        text-align:center;
        font-size:2rem;
    }
</style>
<div class="mx-auto headline text-4xl mb-4" style="width:80%;">
    Survey Results
</div>
<div class=" mx-auto px-4 bg-white rounded-xl shadow" style="width:80%;">
    <div class="py-6">
        <div class="mb-12">
            <p class="text-lg"></p>
        </div>
        <div id="filters" class="text-center mb-6">
            <!-- Filters will be displayed here -->
        </div>

        <!-- Dynamic Content Area -->
        <div id="surveyResults">
            <!-- Results will be injected here by JavaScript -->
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function () {
        var surveyID = "{{$surveyID}}";  // Get survey ID from Blade template
        var results;
        var filters = [];

        function applyFilters() {
            $.ajax({
                url: 'https://chat.audienzes.com/survey_results/'+surveyID,
                type: 'GET',
                data: {
                    survey_id: surveyID,
                    filters: JSON.stringify(filters)
                },
                dataType: 'json',
                success: function(data) {
                    console.log('Fetched data:', data);  // Debugging line
                    results = data.results;
                    displayResults();
                    displayFilters();
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }

        function addFilter(filter) {
            filters.push(filter);
            applyFilters();
        }

        function removeFilter(index) {
            filters.splice(index, 1);
            applyFilters();
        }

        function displayFilters() {
            $('#filters').empty();
            filters.forEach(function (filter, index) {
                var $tag = $('<span class="tag"></span>').html(filter.question + ': <span style="font-weight:900;">' + filter.answer+'</span>');
                var $removeBtn = $('<span class="ml-2 cursor-pointer text-white">x</span>').click(function () {
                    removeFilter(index);
                });
                $tag.append($removeBtn);
                $('#filters').append($tag);
            });
        }

        function renderRadarChart(sectionData, $container) {
            if (!sectionData || !sectionData.questions) {
                console.log('No radar chart data available for this section.');  // Debugging line
                return;
            }

            console.log('Rendering radar chart for section:', sectionData);  // Debugging line

            var questions = sectionData.questions;
            var labelsWithIndex = Object.keys(questions).map(label => ({
                label: label,
                index: questions[label].index
            }));

            // Sort labels by their index values
            labelsWithIndex.sort((a, b) => a.index - b.index);

            // Extract sorted labels
            var sortedLabels = labelsWithIndex.map(item => item.label);
            var datasets = [];

            // Map options to scores
            var optionScores = {
                "Strongly Agree": 5,
                "Somewhat Agree": 4,
                "Neutral": 3,
                "Somewhat Disagree": 2,
                "Strongly Disagree": 1
            };
            
            console.log(questions);
            var aggregatedScores = sortedLabels.map((label) => {
                console.log(label);
                return questions[label].average_score ? questions[label].average_score : 0.05; 
            });

            console.log('Aggregated scores:', aggregatedScores);  // Debugging line

            datasets.push({
                label: 'Average Scores',
                data: aggregatedScores,
                fill: true,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(75, 192, 192, 1)'
            });

            // Create a canvas element
            var $canvas = $('<canvas></canvas>');
            $container.append($canvas);

            // Get context for Chart.js
            var ctx = $canvas[0].getContext('2d');

            // Custom plugin to draw dashed line and labels
            const dashedLinePlugin = {
                id: 'dashedLinePlugin',
                afterDraw: function (chart) {
                    if (chart.config.type === 'radar') {
                        const ctx = chart.ctx;
                        const chartArea = chart.chartArea;
                        const centerX = (chartArea.left + chartArea.right) / 2;
                        const centerY = (chartArea.top + chartArea.bottom) / 2;
                        const radius = Math.min(centerX - chartArea.left, centerY - chartArea.top);

                        // Draw dashed line
                        ctx.save();
                        ctx.beginPath();
                        ctx.setLineDash([5, 5]);
                        ctx.moveTo(centerX, centerY - radius);
                        ctx.lineTo(centerX, centerY + radius);
                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
                        ctx.lineWidth = 1;
                        ctx.stroke();
                        ctx.restore();

                        // Draw labels
                        ctx.save();
                        ctx.font = '16px Arial';
                        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                        ctx.textAlign = 'center';
                        ctx.fillText('Positive', centerX + radius * 0.5, centerY - radius + 20);
                        ctx.fillText('Negative', centerX - radius * 0.5, centerY - radius + 20);
                        ctx.restore();
                    }
                }
            };

            Chart.register(dashedLinePlugin);

            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: sortedLabels,
                    datasets: datasets
                },
                options: {
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 5,
                            startAngle: 22.5 // Rotate the chart counterclockwise by 22.5 degrees
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        dashedLinePlugin: true
                    }
                }
            });
        }


        function displayResults() {
            $('#surveyResults').empty();
            if (!results) {
                console.log('No results to display.');  // Debugging line
                return;
            }
            Object.keys(results).forEach(function (sectionTitle) {
                var section = results[sectionTitle];
                console.log(section);
                if (!section) {
                    return;
                }
                var $sectionDiv = $('<div class="section"><h1 class="headline text-2xl">'+sectionTitle+'</h1></div>');
                var $media;

                // Check and display media if available
                if (section.media) {
                    var mediaUrl = section.media;
                    if (mediaUrl.endsWith('.mp4')) {
                        $media = $('<video class="mb-4 mx-auto" controls style="max-width:50%;width: 50%;border-radius: 10px;"><source src="https://chat.audienzes.com/' + mediaUrl + '" type="video/mp4"></video>');
                    } else {
                        $media = $('<img class="mb-4" style="max-width:100%;margin:auto;border-radius:10px;">').attr('src', "https://chat.audienzes.com/"+mediaUrl);
                    }
                    $sectionDiv.append($media);
                }

                if (section.questions) {
                    console.log(section.type);
                    // Check if section is for radar chart
                    if (section.type === 'radar') {
                        renderRadarChart(section, $sectionDiv);
                    } else {
                        // Process each question in the section
                        Object.keys(section.questions).forEach(function (questionText) {
                            var question = section.questions[questionText];
                            if (!question) {
                                return;
                            }
                            var $questionDiv = $('<div class="mb-8"></div>');
                            var $question = $('<h3 class="headline text-2l mb-2"></h3>').text(questionText);
                            $questionDiv.append($question);

                            if (question.is_open_ended) {
                                var $optionsList = $('<div></div>');

                                if (question.terms) {
                                    question.terms.forEach(function (term) {
                                        var fontSize = 0.8 + (term.count / 8); // Assuming 3 is the max count for scaling font size
                                        var $tag = $('<span class="tag" style="font-size:' + fontSize + 'rem;"></span>').text(term.term).click(function () {
                                            addFilter({question: questionText, answer: term.term});
                                        });
                                        $tag.addClass(term.count > 3 ? 'top-item' : ''); // Apply top-item class if top term
                                        $optionsList.append($tag);
                                    });
                                }
                                $questionDiv.append($optionsList);

                                
                            } else if (question.options) {
                                var $optionsList = $('<div></div>');
                                var maxCount = Math.max(...Object.values(question.options));
                                Object.keys(question.options).forEach(function (optionName) {
                                    var count = question.options[optionName];
                                    var percentage = (count / maxCount * 100).toFixed(0) ;
                                    var $option = $('<div class="answer flex justify-between items-center p-2 bg-gray-100 rounded-lg mb-2 relative"></div>');
                                    var $bar = $('<div class="bar" style="z-index:11;overflow: hidden;"></div>').css('width', percentage+"%");
                                    console.log(percentage);
                                    $bar.addClass(count === maxCount ? 'top-item' : ''); // Apply top-item class if top response

                                    var $barName = $('<span class="text-lg z-10" style="overflow-x: hidden; white-space: nowrap; line-height: 44px; padding-left: 8px;"></span>').text(optionName);
                                    var $barCount = $('<span class="z-10 headline" style="position: absolute; right: '+(101-(100/percentage*100))+ '%; color: white;overflow-x: hidden; white-space: nowrap; line-height: 44px;"></span>').text(count + ' resp.');
                                    
                                    $bar.append($barName, $barCount);


                                    var $optionName = $('<span class="text-lg z-10" style="color:black;"></span>').text(optionName);
                                    $optionName.addClass(count === maxCount ? 'top-item' : ''); // Apply top-item class if top response
                                    var $optionCount = $('<span class="headline z-10" style=""></span>').text(count + ' resp.');

                                    $option.append($optionName, $optionCount, $bar);
                                    $option.click(function () {
                                        addFilter({question: questionText, answer: optionName});
                                    });
                                    $optionsList.append($option);
                                });
                                $questionDiv.append($optionsList);
                            }
                            // Display the first open-ended response if available
                            if (question.open_ended && question.open_ended.length > 0) {
                                var $responses = $('<div class="mb-4 mt-4"></div>');

                                // Function to display responses
                                function displayResponses(limit) {
                                    $responses.empty();
                                    for (var i = 0; i < Math.min(limit, question.open_ended.length); i++) {
                                        var $response = $('<p class="text-lg italic"></p>').text('"' + question.open_ended[i] + '"');
                                        $responses.append($response);
                                    }
                                }

                                // Initially display the first 3 responses
                                displayResponses(1);

                                // Button to show all responses
                                var $showAllButton = $('<button class="btn btn-primary mt-2">Show All</button>');
                                $showAllButton.on('click', function() {
                                    displayResponses(question.open_ended.length);
                                    $showAllButton.remove(); // Remove the button after showing all responses
                                });

                                $questionDiv.append($responses);
                                $questionDiv.append($showAllButton);
                            }

                            $sectionDiv.append($questionDiv);
                        });
                    }
                }

                $('#surveyResults').append($sectionDiv);
            });
        }

        // Initial load of survey results
        applyFilters();
    });
</script>
@endsection