@extends('layouts.master')
@section('contain')
    <style>
        /* .page-titles {
                                    background-color: #f0f2f5
                                    padding: 15px 20px;
                                    border-radius: 8px;
                                    margin-bottom: 20px;
                                } */

        .page-titles h3 {
            font-size: 24px;
            font-weight: 600;
            color: #343a40;
        }

        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
        }

        .breadcrumb-item a {
            color: #007bff;
            text-decoration: none;
        }

        .breadcrumb-item.active a {
            color: #6c757d;
        }

        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .card-body {
            padding: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .text-themecolor {
            color: #495057 !important;
        }

        .chart-container {
            position: relative;
            width: 100%;
            height: 400px;
            /* Adjust height as needed */
        }

        /* #participationRateChart {
            width: 100% !important;
            height: 100% !important;
        } */

        .years-box {
            border: 1px solid #ddd;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-height: 350px;
            overflow-y: auto;
            width: 200px;
        }

        .years-box button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s, border-color 0.3s;
            cursor: pointer;
        }

        .years-box button:hover {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .years-box button.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .years-box2 {
            border: 1px solid #ddd;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-height: 350px;
            overflow-y: auto;
            width: 200px;
        }

        .years-box2 button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s, border-color 0.3s;
            cursor: pointer;
        }

        .years-box2 button:hover {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .years-box2 button.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .chart-container {
            position: relative;
            width: calc(100% - 220px);
            height: 350px;
            padding: 20px;
            flex-grow: 1;
        }

        .card-title {
            font-size: 20px;
            font-weight: 600;
            color: #343a40;
            margin-bottom: 20px;
        }

        .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
            content: ">";
            color: #6c757d;
            padding: 0 5px;
        }
    </style>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Poll Analytics</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:history.go(-1);">Back</a></li>
                </ol>
            </div>
        </div>
    </div>

    <div class="card mx-auto col-md-12">
        <div class="card-body">
            <div class="chart-container text-center">
                <h4 class="font-bold text-muted mb-3" style="font-size: 1.25rem; margin-bottom: 1rem;">
                    <span id="chartHeading">Year: <span id="selectedYear"></span></span>
                    <span>(Number of Polls)</span>
                </h4>
                <canvas id="myChart"></canvas>

            </div>
            <div class="years-box">

                <!-- Years will be populated by JavaScript -->
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container text-center col-md-5">
                <h4 class="font-bold text-muted mb-3" style="font-size: 1rem; margin-bottom: 1rem;">
                    <span id="chartHeading1">Year: <span id="selectedYear1"></span></span>
                    <span>(Average Participation Rate)</span>
                </h4>
                <canvas style="display: inline-block;" id="participationRateChart"></canvas>
            </div>
            <div class="chart-container text-center col-md-5">
                <h4 class="font-bold text-muted mb-3" style="font-size: 1rem; margin-bottom: 1rem;">
                    <span id="chartHeading2">Year: <span id="selectedYear2"></span></span>
                    <span>(Average Net Promoter Score)</span>
                </h4>
                <canvas style="display: inline-block;" id="netpermoterScoure"></canvas>
            </div>
            <div class="years-box2 col-md-2">
                <!-- Years will be populated by JavaScript -->
            </div>

        </div>

    </div>

    <script>
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10; // 10 years before current year
            const endYear = currentYear; // 10 years after current year
            const yearsBox = $('.years-box');
            let chart;

            // Array to hold years
            const years = [];

            // Populate the years
            for (let year = startYear; year <= endYear; year++) {
                years.push(year);
            }

            // Sort years in descending order with the current year first
            years.sort((a, b) => {
                if (a === currentYear) return -1;
                if (b === currentYear) return 1;
                return b - a; // Descending order
            });

            // Append years to the yearsBox
            years.forEach(year => {
                yearsBox.append(`<button class="year-button" data-year="${year}">${year}</button>`);
            });

            // Initial fetch for the yearly data by default
            fetchChartData();

            // Handle year selection
            $('.year-button').click(function() {
                const selectedYear = $(this).data('year');
                $('.year-button').removeClass('active');
                $(this).addClass('active');
                $('#selectedYear').text(selectedYear);
                $('#chartHeading').text('Year: ' + selectedYear);
                fetchChartData(selectedYear);
            });

            // Fetch chart data based on the year or default to yearly data
            function fetchChartData(year = null) {
                $.ajax({
                    url: "{{ route('polls.analytics') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        if (year) {
                            updateChart(response.monthlyData, response.yearlyData, year);
                        } else {
                            updateChart(null, response.yearlyData);
                        }
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }

            // Update the chart based on the fetched data
            function updateChart(monthlyData = null, yearlyData = null, year = null) {
                const ctx = document.getElementById('myChart').getContext('2d');
                let chartData;

                if (year && monthlyData) {
                    // Show monthly data for the year
                    chartData = getMonthlyData(monthlyData, year);
                    $('#chartHeading').text('Year: ' + year);
                } else {
                    // Show yearly data by default
                    chartData = getYearlyData(yearlyData, currentYear);
                    $('#chartHeading').text('Yearly Data');
                    $('.years-box button').removeClass('active');
                }

                const maxCount = Math.max(...chartData.count, 0);
                const suggestedMax = Math.ceil(maxCount * 1.1);

                // Destroy previous chart instance if exists
                if (chart) {
                    chart.destroy();
                }

                // Create a new chart
                chart = new Chart(ctx, {
                    type: 'line', // Always use line chart
                    data: {
                        labels: chartData.labels,
                        datasets: [{
                            data: chartData.count,
                            borderColor: '#007bff',
                            backgroundColor: 'rgba(0, 123, 255, 0.1)',
                            fill: true,
                            tension: 0.2,
                            pointRadius: 2,
                            borderWidth: 2,
                        }]
                    },
                    options: {
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    title: function(tooltipItems) {
                                        const label = chartData.labels[tooltipItems[0].dataIndex];
                                        return year ? `${label} ${year}` : label;
                                    },
                                    label: function(tooltipItem) {
                                        return `Count: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: false,
                                    text: 'Years'
                                },
                                ticks: {
                                    display: true
                                },
                                grid: {
                                    display: true,
                                    color: 'rgba(0, 0, 0, 0.1)'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Count'
                                },
                                ticks: {
                                    display: true
                                },
                                grid: {
                                    display: true,
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                beginAtZero: true,
                                suggestedMax: suggestedMax
                            }
                        },
                        elements: {
                            line: {
                                tension: 0.4
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            }

            // Get monthly data for a specific year
            function getMonthlyData(data, year) {
                const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
                    'September', 'October', 'November', 'December'
                ];
                const counts = [];

                for (let month = 1; month <= 12; month++) {
                    const monthKey = `${String(month).padStart(2, '0')}-${year}`;
                    counts.push(data[monthKey] ? data[monthKey].count : 0);
                }

                return {
                    labels: months,
                    count: counts
                };
            }

            // Get yearly data, ensuring it covers 5 years before and 5 years after the current year
            function getYearlyData(data, currentYear) {
                const startYear = currentYear - 10;
                const endYear = currentYear + 1;
                const years = [];
                const counts = [];

                for (let year = startYear; year <= endYear; year++) {
                    years.push(year.toString());
                    counts.push(data[year] ? data[year] : 0);
                }

                return {
                    labels: years,
                    count: counts
                };
            }
        });
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10;
            const yearsBox = $('.years-box');
            const yearsBox2 = $('.years-box2');
            let chart, participationRateChart, netpermoterScoure;

            // let chart, netpermoterScoure;
            $('#chartHeading2').text('Yearly Data');
            $('#chartHeading1').text('Yearly Data');

            // Populate years for both charts in descending order
            for (let year = currentYear; year >= startYear; year--) {
                yearsBox.append(`<button class="year-button" data-year="${year}">${year}</button>`);
                yearsBox2.append(`<button class="year-button2" data-year="${year}">${year}</button>`);
            }


            // Initial fetch for the yearly data
            fetchChartData();
            fetchParticipationRateData();

            // Handle year selection for the first chart
            $('.year-button').click(function() {
                const selectedYear = $(this).data('year');
                $('.year-button').removeClass('active');
                $(this).addClass('active');
                $('#selectedYear').text(selectedYear);
                $('#chartHeading').text('Year: ' + selectedYear);
                fetchChartData(selectedYear);
            });

            // Handle year selection for the second chart
            $('.year-button2').click(function() {
                const selectedYear = $(this).data('year');
                $('.year-button2').removeClass('active');
                $(this).addClass('active');
                $('#selectedYear2').text(selectedYear);
                $('#chartHeading2').text('Year: ' + selectedYear);
                $('#chartHeading1').text('Year: ' + selectedYear);
                fetchParticipationRateData(selectedYear);
            });

            // Fetch chart data for the first chart
            function fetchChartData(year = null) {
                $.ajax({
                    url: "{{ route('polls.analytics') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        if (year) {
                            updateChart(response.monthlyData, year);
                        } else {
                            updateChart(null, currentYear);
                        }
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }

            // Fetch data for the average participation rate chart
            function fetchParticipationRateData(year = null) {
                $.ajax({
                    url: "{{ route('polls.avgParticipationRate') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        updateParticipationRateChart(response.labels, response.data);
                        updateNetpermoterScoure(response.labels, response.netdata);
                        console.log(response.netdata);
                        console.log(response.detractorLikesMonthly);
                        console.log(response.promoterLikesMonthly);
                        console.log(response.totalPollsMonthly);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }

            // Update the first chart
            function updateChart(monthlyData = null, year = null) {
                const ctx = document.getElementById('myChart').getContext('2d');
                let chartData = monthlyData ? getMonthlyData(monthlyData, year) : getYearlyData(currentYear);

                if (chart) {
                    chart.destroy();
                }

                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: chartData.labels,
                        datasets: [{
                            data: chartData.count,
                            borderColor: '#007bff',
                            backgroundColor: 'rgba(0, 123, 255, 0.1)',
                            fill: true,
                            tension: 0.2,
                            pointRadius: 2,
                            borderWidth: 2,
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                            }
                        }
                    }
                });
            }

            // Update the average participation rate chart
            function updateParticipationRateChart(labels, data) {
                const ctx = document.getElementById('participationRateChart').getContext('2d');

                if (participationRateChart) {
                    participationRateChart.destroy();
                }

                participationRateChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Average Participation Rate',
                            data: data,
                            borderColor: '#28a745',
                            backgroundColor: 'rgba(40, 167, 69, 0.1)',
                            fill: true,
                            tension: 0.2,
                            pointRadius: 2,
                            borderWidth: 2,
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                title: {
                                    display: true,
                                    text: 'Avg'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.ceil(Math.max(...data) * 1.1),
                            }
                        }
                    }
                });
            }
            function updateNetpermoterScoure(labels, netdata) {
                const ctx = document.getElementById('netpermoterScoure').getContext('2d');

                if (netpermoterScoure) {
                    netpermoterScoure.destroy();
                }

                netpermoterScoure = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Average Participation Rate',
                            data: netdata,
                            borderColor: '#28a745',
                            backgroundColor: 'rgba(40, 167, 69, 0.1)',
                            fill: true,
                            tension: 0.2,
                            pointRadius: 2,
                            borderWidth: 2,
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                title: {
                                    display: true,
                                    text: 'Avg'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.ceil(Math.max(...netdata) * 1.1),
                            }
                        }
                    }
                });
            }

            // Generate monthly data for the first chart
            function getMonthlyData(data, year) {
                const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
                    'September', 'October', 'November', 'December'
                ];
                const counts = months.map((month, index) => {
                    const monthKey = `${String(index + 1).padStart(2, '0')}-${year}`;
                    return data[monthKey] ? data[monthKey].count : 0;
                });

                return {
                    labels: months,
                    count: counts
                };
            }

            // Generate yearly data for the first chart
            function getYearlyData(currentYear) {
                const years = [];
                for (let year = currentYear - 10; year <= currentYear; year++) {
                    years.push(year);
                }

                return {
                    labels: years,
                    count: years.map(() => Math.floor(Math.random() * 100) + 1)
                };
            }
        });
    </script>
@endsection