@extends('layouts.master')
@section('contain')
    <style>
        .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: calc(100% - 220px);
            height: 350px;
            padding: 20px;
            flex-grow: 1;
        }

        .years-box,
        .years-box3,
        .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-box button,
        .years-box3 button,
        .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-box button:hover,
        .years-box3 button:hover,
        .years-box2 button:hover {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

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

        .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">Analytics (All The News Feeds )</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">Selected Year: <span id="selectedYear"></span></span>
                    <span>(Number of News Feeds )</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">
                <h4 class="font-bold text-muted mb-3" style="font-size: 1.25rem; margin-bottom: 1rem;">
                    <span id="chartHeading2">Selected Year: <span id="selectedYear2"></span></span>
                    <span>(Average Post Engagement )</span>
                </h4>
                <canvas style="display: inline-block;" id="participationRateChart"></canvas>
            </div>
            <div class="years-box2">

                <!-- Years will be populated by JavaScript -->
            </div>
        </div>
        <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="chartHeading3">Selected Year: <span id="selectedYear3"></span></span>
                    <span>(Average Reach of News Feeds)</span>
                </h4>
                <canvas style="display: inline-block;" id="reachRateChart"></canvas>
            </div>
            <div class="years-box3">

                <!-- Years will be populated by JavaScript -->
            </div>
        </div>

    </div>

    <script>
        // num of count
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10; // 10 years before the current year
            const endYear = currentYear; // Up to the current year
            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) => b - a);

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

            // Set the current year as active by default
            $('.year-button[data-year="' + currentYear + '"]').addClass('active');
            $('#selectedYear').text(currentYear);
            $('#chartHeading').text('Current Year: ' + currentYear);

            // Initial fetch for the current year's monthly data
            fetchChartData(currentYear);

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

            // Fetch chart data for the selected year
            function fetchChartData(year) {
                $.ajax({
                    url: "{{ route('newsfeeds.analytics') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        updateChart(response.monthlyData, year);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }

            // Update the chart with monthly data for the selected year
            function updateChart(monthlyData, year) {
                const ctx = document.getElementById('myChart').getContext('2d');
                const chartData = getMonthlyData(monthlyData, year);

                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',
                    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 `${label} ${year}`;
                                    },
                                    label: function(tooltipItem) {
                                        return `Count: ${tooltipItem.raw}`;
                                    }
                                }
                            },
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: false,
                                    text: 'Months'
                                },
                                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 the selected 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
                };
            }
        });
        // engagement avg
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10;
            const yearsBox = $('.years-box');
            const yearsBox2 = $('.years-box2');
            let chart, participationRateChart;
            $('#chartHeading2').text('Current Year');

            // 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>`);
            }
            fetchParticipationRateData();
            // 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('Selected Year: ' + selectedYear);
                fetchParticipationRateData(selectedYear);
            });
            // Fetch data for the average participation rate chart
            function fetchParticipationRateData(year = null) {
                $.ajax({
                    url: "{{ route('newsfeeds.avgParticipationRate') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        console.log(response);

                        updateParticipationRateChart(response.labels, response.data);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }
            // 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 Post Engagement 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: {
                            x: {
                                title: {
                                    display: false,
                                    text: 'Months'
                                },
                                ticks: {
                                    display: true
                                },
                                grid: {
                                    display: true,
                                    color: 'rgba(0, 0, 0, 0.1)'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Avg'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.ceil(Math.max(...data) * 1.1),
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            }

            // 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
                };
            }
        });
        // reach avg
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10;
            const yearsBox = $('.years-box');
            const yearsBox2 = $('.years-box3');
            let chart, participationRateChart;
            $('#chartHeading3').text('Current Year');

            // 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-button3" data-year="${year}">${year}</button>`);
            }
            fetchReachRateData();
            // Handle year selection for the second chart
            $('.year-button3').click(function() {
                const selectedYear = $(this).data('year');
                $('.year-button3').removeClass('active');
                $(this).addClass('active');
                $('#selectedYear3').text(selectedYear);
                $('#chartHeading3').text('Selected Year: ' + selectedYear);
                fetchReachRateData(selectedYear);
            });
            // Fetch data for the average participation rate chart
            function fetchReachRateData(year = null) {
                $.ajax({
                    url: "{{ route('newsfeeds.avgReachRate') }}",
                    method: "GET",
                    data: {
                        year: year
                    },
                    success: function(response) {
                        updateReachRateChart(response.labels, response.data);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }
            // Update the average participation rate chart
            function updateReachRateChart(labels, data) {
                const ctx = document.getElementById('reachRateChart').getContext('2d');

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

                participationRateChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Average Reach of News Feeds Rate',
                            data: data,
                            borderColor: '#21a099',
                            backgroundColor: 'rgba(00, 967, 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),
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            }

            // 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
                };
            }
        });
    </script>
@endsection