@extends('layouts.master')
@section('contain')
    <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><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    <li><a class="breadcrumb-item active" href="javascript:history.go(-1);">back</a></li>
                    {{-- <li class="breadcrumb-item active">User Table</li> --}}
                </ol>
                {{-- <a href="{{ Route('poll.create') }}"><button type="button"
                        class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa fa-plus-circle"></i>Create
                        New</button></a> --}}
            </div>
        </div>
    </div>
    <style>
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .card-body {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: stretch;
            /* Ensures both elements stretch to the same height */
        }

        .chart-container {
            position: relative;
            flex: 1;
            margin-right: 20px;
            /* Space between chart and year box */
            /* height: 400px; */
            /* Set fixed height */
            text-align: center;
            text-align: -webkit-center;
            height: 100%;
        }

        .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);
            height: 400px;
            /* Set fixed height to match the chart */
            overflow-y: auto;
            width: 135px;
            align-self: center;
            scrollbar-width: none;
            /* Adjust width as needed */
        }

        .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;
        }

        .month-box2 {
            border: 1px solid #ddd;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            height: 400px;
            /* Set fixed height to match the chart */
            overflow-y: auto;
            width: 135px;
            align-self: center;
            scrollbar-width: none;
            /* Adjust width as needed */
        }

        .month-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;
        }

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

        .month-box2 button.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
    <style>
        .product-review {
            list-style: none;
            padding: 0;
            margin: 9%;
        }

        .product-review li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: -43px;
            /* Decreased space between items */
            position: relative;
        }

        .product-review font {
            margin-right: 10px;
            font-size: 1.5rem;
            /* Ensure icons are sharp */
        }

        .product-review span {
            flex-grow: 1;
            margin-right: 10px;
        }

        .product-review .card-title,
        .product-review .card-subtitle {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            /* Ensure text is sharp */
        }

        .product-review .progress {
            flex-grow: 1;
            height: 10px;
            /* Adjusted height for better spacing */
            background-color: #e9ecef;
            position: relative;
            margin-bottom: 30px;
            /* Add space for the text above the bar */
        }

        .product-review .progress-bar {
            height: 100%;
            position: relative;
        }

        .product-review .progress-bar .progress-bar-text {
            position: absolute;
            left: 50%;
            bottom: 100%;
            transform: translate(-50%, -10%);
            font-size: 0.8rem;
            color: #000;
            /* Ensure the text is readable */
            white-space: nowrap;
        }

        .progress-bar.bg-success {
            background-color: #28a745;
        }

        .progress-bar.bg-danger {
            background-color: #dc3545;
        }

        .progress-bar.bg-primary {
            background-color: #007bff;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .product-review li {
                flex-direction: column;
                align-items: flex-start;
            }

            .product-review font {
                margin-bottom: 5px;
            }

            .product-review span {
                margin-bottom: 5px;
            }
        }

        /* Additional styles for the nested list and lines */
        .product-review ul {
            list-style-type: none;
            margin: 5%;
            padding: 0;
            width: 100%;
        }

        .nested-list {
            margin-left: 20px;
        }

        .text-muted {
            font-size: 1.5em;
        }

        .card-title {
            font-size: 1.2em;
        }

        .card-subtitle {
            font-size: 1em;
        }

        .progress {
            height: 15px;
            margin-top: 5px;
        }

        .category-label {
            transform: rotate(-90deg);
            transform-origin: left bottom;
            display: inline-block;
            margin-left: -4%;
            font-weight: bold;
            position: absolute;
            /* Adjusted to set the label position */
        }

        .line {
            position: absolute;
            left: -20px;
            top: 2%;
            bottom: 2%;
            width: 3px;
            background-color: #ccc;
        }

        .promoter .line {
            background-color: green;
        }

        .passive .line {
            background-color: orange;
        }

        .detractor .line {
            background-color: red;
        }

        .btn-filter {
            margin: 0;
            padding: 0px 5px;
            cursor: pointer;
            border: 1px solid blue;
            border-right: none;
            background-color: white;
            color: blue;
            transition: background-color 0.3s, color 0.3s;
        }

        .btn-filter:last-child {
            border-right: 1px solid blue;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
        }

        .btn-filter.selected {
            background-color: blue;
            color: white;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card" style="position: relative;">
                            <div class="font-bold text-muted" style=" left: 50%; text-align: center; font-size: small;">
                                Participation Rate By Department</div>

                            <canvas id="departmentChart"></canvas>
                            <div id="chart-center" style=" left: 50%; text-align: center; font-size: 24px;"></div>
                        </div>
                    </div>

                    <div class="card col-md-8">
                        <div style="height: 89%; display: flex; flex-direction: column; align-items: center;">
                            <div id="nps-score-container" class="font-bold text-muted" style="text-align: center; font-size: small;">
                                Net Promoter Score
                                <span id="nps-score"></span> <!-- This span will hold the percentage value -->
                            </div>

                            <canvas id="npsPieChart" style="height: 300px; width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card text-center"
                            style="position: relative; padding: 24%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                            <h5 class="font-bold text-muted mb-3" style="font-size: 1.25rem; margin-bottom: 1rem;">
                                Communication Open Rate</h5>
                            <div class="mb-3" style="margin-bottom: 1rem;">
                                <select id="department-filter" class="custom-select"
                                    style="font-size: 1rem; border-radius: 0.25rem; border: 1px solid #ced4da;">
                                    <option value="">Filter By Department</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" value="{{ $pollId }}" name="poll_id" id="poll_id">
                            </div>
                            <div class="card-body" style="padding-top: 0;">
                                <p class="card-text" id="department-percentage"
                                    style="font-size: 3rem; font-weight: bold; color: #007bff; margin-top: 1rem; margin-bottom: 0;">
                                    {{ round($CommunicationsEngagementPercentage, 1) }}%
                                </p>
                            </div>
                        </div>
                        {{-- </div> --}}
                        {{-- <div class="col-md-4"> --}}
                        <div class="card text-center"
                            style="position: relative; padding: 24%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                            <h5 class="font-bold text-muted mb-3" style="font-size: 1.25rem; margin-bottom: 1rem;">
                                Communication Click Through Rate</h5>
                            <div class="mb-3" style="margin-bottom: 1rem;">
                                <select id="filter-click-through-rate" class="custom-select"
                                    style="font-size: 1rem; border-radius: 0.25rem; border: 1px solid #ced4da;">
                                    <option value="">Filter By Department</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" value="{{ $pollId }}" name="poll_id" id="poll_id">
                            </div>
                            <div class="card-body" style="padding-top: 0;">
                                <p class="card-text" id="department-percentage-click-through-rate"
                                    style="font-size: 3rem; font-weight: bold; color: #007bff; margin-top: 1rem; margin-bottom: 0;">
                                    {{ round($clickThroughRateCount, 1) }}%
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="card col-md-8">
                        <div class="font-bold text-muted" style=" left: 50%; text-align: center; font-size: small;">
                            Sentiment Categories & Induvidual Bar Response</div>
                        <ul class="product-review">
                            <!-- Promoter Group -->
                            <li class="promoter">
                                <div class="line"></div>
                                <div class="category-label">Promoter</div>
                                <ul class="nested-list">
                                    @foreach ($pollAnswers->answers->slice(0, 2) as $pollAnswer)
                                        @php
                                            $percentage = number_format(
                                                ($pollAnswer->react_counts_count / $pollAnswers->totalUsers) * 100,
                                                1,
                                            );
                                            switch ($pollAnswer->grade) {
                                                case '1':
                                                    $emoji = 'mdi mdi-emoticon-excited';
                                                    break;
                                                case '2':
                                                    $emoji = 'mdi mdi-emoticon-happy';
                                                    break;
                                                case '3':
                                                    $emoji = 'mdi mdi-emoticon-neutral';
                                                    break;
                                                case '4':
                                                    $emoji = 'mdi mdi-emoticon-sad';
                                                    break;
                                                case '5':
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                                default:
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                            }
                                        @endphp

                                        <li>
                                            <font class="text-muted display-5"><i class="{{ $emoji }}"
                                                    style="color: {{ $pollAnswer->color }}"></i></font>
                                            <span>
                                                <h6 class="card-title">{{ $pollAnswer->answer }}</h6>
                                                <h6 class="card-subtitle">Total Reviews
                                                    ({{ $pollAnswer->react_counts_count }}) ({{ $percentage . ' %' }})
                                                </h6>
                                            </span>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar"
                                                    style="width: {{ $percentage }}%; background-color: {{ $pollAnswer->color }}"
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                    <span class="progress-bar-text">{{ $percentage }}%</span>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>

                            <!-- Passive Group -->
                            <li class="passive">
                                <div class="line"></div>
                                <div class="category-label">Passive</div>
                                <ul class="nested-list">
                                    @foreach ($pollAnswers->answers->slice(2, 1) as $pollAnswer)
                                        @php
                                            $percentage = number_format(
                                                ($pollAnswer->react_counts_count / $pollAnswers->totalUsers) * 100,
                                                1,
                                            );
                                            switch ($pollAnswer->grade) {
                                                case '1':
                                                    $emoji = 'mdi mdi-emoticon-excited';
                                                    break;
                                                case '2':
                                                    $emoji = 'mdi mdi-emoticon-happy';
                                                    break;
                                                case '3':
                                                    $emoji = 'mdi mdi-emoticon-neutral';
                                                    break;
                                                case '4':
                                                    $emoji = 'mdi mdi-emoticon-sad';
                                                    break;
                                                case '5':
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                                default:
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                            }
                                        @endphp

                                        <li>
                                            <font class="text-muted display-5"><i class="{{ $emoji }}"
                                                    style="color: {{ $pollAnswer->color }}"></i></font>
                                            <span>
                                                <h6 class="card-title">{{ $pollAnswer->answer }}</h6>
                                                <h6 class="card-subtitle">Total Reviews
                                                    ({{ $pollAnswer->react_counts_count }}) ({{ $percentage . ' %' }})
                                                </h6>
                                            </span>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar"
                                                    style="width: {{ $percentage }}%; background-color: {{ $pollAnswer->color }}"
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                    <span class="progress-bar-text">{{ $percentage }}%</span>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>

                            <!-- Detractor Group -->
                            <li class="detractor">
                                <div class="line"></div>
                                <div class="category-label">Detractor</div>
                                <ul class="nested-list">
                                    @foreach ($pollAnswers->answers->slice(3, 2) as $pollAnswer)
                                        @php
                                            $percentage = number_format(
                                                ($pollAnswer->react_counts_count / $pollAnswers->totalUsers) * 100,
                                                1,
                                            );
                                            switch ($pollAnswer->grade) {
                                                case '1':
                                                    $emoji = 'mdi mdi-emoticon-excited';
                                                    break;
                                                case '2':
                                                    $emoji = 'mdi mdi-emoticon-happy';
                                                    break;
                                                case '3':
                                                    $emoji = 'mdi mdi-emoticon-neutral';
                                                    break;
                                                case '4':
                                                    $emoji = 'mdi mdi-emoticon-sad';
                                                    break;
                                                case '5':
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                                default:
                                                    $emoji = 'mdi mdi-emoticon-dead';
                                                    break;
                                            }
                                        @endphp

                                        <li>
                                            <font class="text-muted display-5"><i class="{{ $emoji }}"
                                                    style="color: {{ $pollAnswer->color }}"></i></font>
                                            <span>
                                                <h6 class="card-title">{{ $pollAnswer->answer }}</h6>
                                                <h6 class="card-subtitle">Total Reviews
                                                    ({{ $pollAnswer->react_counts_count }}) ({{ $percentage . ' %' }})
                                                </h6>
                                            </span>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar"
                                                    style="width: {{ $percentage }}%; background-color: {{ $pollAnswer->color }}"
                                                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                    <span class="progress-bar-text">{{ $percentage }}%</span>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="card mx-auto col-md-12">
                        <div class="card-body d-flex">
                            <div class="years-box">
                                <!-- Years will be populated by JavaScript -->
                            </div>
                            <div id="peak-time-month" class="month-box2 mx-2" style="display: none">
                                <!-- Years will be populated by JavaScript -->
                            </div>
                            <div class="chart-container mx-4">
                                <h4 class="font-bold text-muted mb-3"
                                    style="text-align: center;font-size: 1rem; margin-bottom: 1rem;">
                                    <span id="chartHeading">Current Year: <span id="selectedYear"></span></span>
                                    <span>Net Peak Times / Click Maps</span>
                                </h4>
                                <canvas id="myChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- net permotor score --}}
    <script>
        // Provided data
        // const chartData = {
        //     total_reacts: {
        //         promoter: 5,
        //         passive: 4,
        //         detractor: 2
        //     },
        //     percentages: {
        //         promoter: 35.71,
        //         passive: 28.57,
        //         detractor: 14.29
        //     },
        //     people_responded: 14,
        //     net_promoter_score: 21.43
        // };
        const chartData = @json($totalReactCountByMonth);
        // Unique context variable for the pie chart
        const pieCtx = document.getElementById('npsPieChart').getContext('2d');
        const npsPieChart = new Chart(pieCtx, {
            type: 'pie',
            data: {
                labels: ['Promoters', 'Passives', 'Detractors'],
                datasets: [{
                    data: [
                        chartData.percentages.promoter.toFixed(2),
                        chartData.percentages.passive.toFixed(2),
                        chartData.percentages.detractor.toFixed(2)
                    ],
                    backgroundColor: ['green', 'orange', 'red'],
                    hoverBackgroundColor: ['#4CAF50', '#FF9800', '#F44336'],
                    borderWidth: 1,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.label + ': ' + tooltipItem.raw + '%';
                            }
                        }
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: 10
                            },
                            color: '#333',
                            generateLabels: function(chart) {
                                const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
                                const labels = original.call(this, chart);
                                labels.forEach((label, index) => {
                                    const percentage = chart.data.datasets[0].data[index];
                                    label.text += ` (${percentage}%)`;
                                });

                                // Add NPS value to the bottom of the legend
                                const npsScore = chartData.net_promoter_score.toFixed(
                                2); // Format to 2 decimal places

                                // Update the span with the NPS value
                                document.getElementById('nps-score').textContent = `: ${npsScore}%`;

                                return labels;
                            }
                        }
                    }
                }
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            const currentYear = new Date().getFullYear();
            const startYear = currentYear - 10;
            const endYear = currentYear;
            const yearsBox = $('.years-box');
            const peakTimeMonthBox = $('#peak-time-month');

            const years = [];

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

            years.sort((a, b) => {
                if (a === currentYear) return -1;
                if (b === currentYear) return 1;
                return b - a;
            });

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

            $('.year-button').click(function() {
                const selectedYear = $(this).data('year');
                $('.year-button').removeClass('active');
                $(this).addClass('active');
                $('#selectedYear').text(selectedYear);
                $('#chartHeading').text('Selected Year: ' + selectedYear);
                peakTimeMonthBox.show();

                // Populate the months
                populateMonths();

                function populateMonths() {
                    peakTimeMonthBox.empty(); // Clear existing months
                    for (let month = 1; month <= 12; month++) {
                        const monthName = new Date(0, month - 1).toLocaleString('default', {
                            month: 'long'
                        });
                        peakTimeMonthBox.append(
                            `<button class="month-button" data-month="${month}">${monthName}</button>`);
                    }

                    // Add click event to month buttons
                    $('.month-button').click(function() {
                        const selectedMonth = $(this).data('month');
                        $('.month-button').removeClass('active');
                        $(this).addClass('active');
                        fetchChartData(selectedYear, selectedMonth);
                    });
                }

                // Fetch chart data with the selected year only
                fetchChartData(selectedYear);
            });

            let chart;

            function createChart(chartData) {
                const ctx = document.getElementById('myChart').getContext('2d');

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

                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: chartData.labels,
                        datasets: [{
                                label: 'Open',
                                data: chartData.open,
                                borderColor: 'blue',
                                backgroundColor: 'rgba(0, 0, 255, 0.2)',
                                fill: true,
                                tension: 0.4,
                                pointRadius: 4,
                                pointHoverRadius: 6,
                                pointBackgroundColor: 'blue',
                                pointBorderColor: 'blue',
                                pointHoverBackgroundColor: 'blue',
                                pointHoverBorderColor: 'blue',
                            },
                            {
                                label: 'Click',
                                data: chartData.click,
                                borderColor: 'gray',
                                fill: true,
                                tension: 0.4,
                                pointRadius: 4,
                                pointHoverRadius: 6,
                                pointBackgroundColor: 'gray',
                                pointBorderColor: 'gray',
                                pointHoverBackgroundColor: 'gray',
                                pointHoverBorderColor: 'gray',
                            }
                        ]
                    },
                    options: {
                        scales: {
                            x: {
                                title: {
                                    display: false,
                                    text: 'Year'
                                }
                            },
                            y: {
                                title: {
                                    display: false,
                                    text: 'Count'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.max(...chartData.open, ...chartData.click) + 2
                            }
                        }
                    }
                });
            }

            function fetchChartData(year = null, month = null) {
                $.ajax({
                    url: "{{ route('poll.peaktimeyear', ['id' => $pollId]) }}",
                    method: "GET",
                    data: {
                        year: year,
                        month: month
                    },
                    success: function(response) {
                        console.log(response);
                        createChart(response.years);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                        alert('Error fetching data');
                    }
                });
            }

            // Initial chart load with current year data
            fetchChartData(currentYear);
        });

        // line chart end
        // pie chart
        const departments = @json($pieData['departments']);
        const departmentCounts = @json($pieData['departmentReactCounts']); // Example data

        // Calculate the total count
        const totalCount = departmentCounts.reduce((acc, count) => acc + count, 0);

        // Assume total percentage is 60%
        // const totalPercentage = @json($pieData['TotalPercentage']);
        const totalPercentage = Math.round(@json($pieData['TotalPercentage'], 1));

        // Calculate the actual department percentages based on the total percentage
        const departmentPercentages = departmentCounts.map(count => ((count / totalCount) * totalPercentage).toFixed(1));

        // Calculate the remaining percentage
        const remainingPercentage = (100 - totalPercentage).toFixed(1);

        // Colors for each department plus the blank space
        const colors = @json($pieData['colors']); // The last color is gray for the blank space

        // Update departmentCounts to include the remaining percentage as a segment
        departmentCounts.push(totalCount * (remainingPercentage / totalPercentage));

        // Display the total percentage in the center
        const centerText = `${totalPercentage}%`;
        document.getElementById('chart-center').innerText = 'Total' + " " + centerText;

        const ctx = document.getElementById('departmentChart').getContext('2d');

        const departmentChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                // labels: departments.map((department, index) => `${department} (${departmentPercentages[index]}%)`)
                labels: departments.map((department, index) => `${department}`)
                    .concat(['Remaining']),
                datasets: [{
                    data: departmentCounts,
                    backgroundColor: colors,
                    hoverBackgroundColor: colors
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const percentage = departmentPercentages[context.dataIndex] ||
                                    remainingPercentage;
                                return `Total(${value.toFixed(0)}) Percentage(${percentage}%)`;
                                // return `${label}: ${value.toFixed(1)} (${percentage}%)`;
                            }
                        },
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        titleFont: {
                            size: 16,
                        },
                        bodyFont: {
                            size: 14,
                        },
                        padding: 10,
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: 12,
                            },
                            color: '#333',
                        },
                    },
                },
                cutout: '0%',
            },
        });
        // pie chart end
        // open rate filter data
        $(document).ready(function() {
            $('#department-filter').change(function() {
                var departmentId = $(this).val();
                var poll_id = $('#poll_id').val();
                $.ajax({
                    url: '{{ route('getOpenRateDepartmentData') }}', // Adjust the URL to your route
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        poll_id: poll_id
                    },
                    success: function(response) {
                        // Assuming response contains the percentage value
                        $('#department-percentage').text(response.percentage + '%');
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error: ' + status + error);
                    }
                });
            });
            $('#filter-click-through-rate').change(function() {
                var departmentId = $(this).val();
                var poll_id = $('#poll_id').val();
                $.ajax({
                    url: '{{ route('getClickThroughRateDepartmentData') }}', // Adjust the URL to your route
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        poll_id: poll_id
                    },
                    success: function(response) {
                        // alert(JSON.stringify(response));
                        // Assuming response contains the percentage value
                        $('#department-percentage-click-through-rate').text(response
                            .percentage + '%');
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error: ' + status + error);
                    }
                });
            });

        });
    </script>
@endsection