@extends('layouts.master')
@section('contain')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor" id="">Bright Ideas Summary</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>
                </ol>
            </div>
        </div>
    </div>

    <style>
        .button-group {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn-filter,
        .custom-date-picker {
            padding: 8px 16px;
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            cursor: pointer;
            transition: background-color 0.3s;
            border-radius: 0;
            height: 40px;
            line-height: 24px;
        }

        .btn-filter:first-child {
            border-radius: 5px 0 0 5px;
        }

        .btn-filter:last-child,
        .custom-date-picker:last-child {
            border-radius: 0 5px 5px 0;
        }

        .btn-filter:hover {
            background-color: #e9ecef;
        }

        .btn-filter.selected {
            background-color: #007bff;
            color: white;
        }

        .custom-date-picker {
            padding: 8px 16px;
            border-left: none;
            border-radius: 0 5px 5px 0;
            background-color: #fff;
            height: auto;
        }

        .btn-filter+.btn-filter,
        .btn-filter+.custom-date-picker {
            border-left: none;
        }

        .equal-height {
            display: flex;
            flex-wrap: wrap;
        }

        .equal-height .col-md-4,
        .equal-height .col-md-8 {
            display: flex;
            flex-direction: column;
        }

        .card {
            margin-bottom: 1rem;
        }

        .flex-fill {
            flex: 1;
        }

        .text-center {
            text-align: center;
        }

        /* Responsive Chart Container */
        .chart-container {
            position: relative;
            width: 100%;
            height: auto;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="card mx-auto col-md-9">
                    <div class="font-bold text-muted mb-3 text-center" style="font-size: small;">
                        <span id="chart-title"></span>Bright Ideas Summary </div>

                    <div class="selector-group mb-3" style="width: 50%; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                        <!-- Year Selector -->
                        <select id="year-selector" class="custom-select" style="flex: 1; font-size: 72%; margin: 0 5px; border-radius: 0.25rem; border: 1px solid #ced4da;"></select>

                        <!-- Month Selector -->
                        <select id="month-selector" class="custom-select" style="flex: 1; font-size: 72%; margin: 0 5px; border-radius: 0.25rem; border: 1px solid #ced4da;"></select>
                    </div>

                    <div class="flex-fill">
                        <div class="chart-container">
                            <canvas id="myPieChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
       $(document).ready(function() {
    const currentYear = new Date().getFullYear();

    const $yearSelector = $('#year-selector');
    const $monthSelector = $('#month-selector');
    const $chartTitle = $('#chart-title');

    // Populate Year Selector
    for (let year = currentYear; year >= currentYear - 10; year--) {
        $yearSelector.append(new Option(year, year));
    }
    $yearSelector.val(currentYear);

    // Populate Month Selector
    function populateMonths() {
        $monthSelector.empty();
        $monthSelector.append(new Option('Select Month', '', true, true)).prop('disabled', false);
        for (let month = 1; month <= 12; month++) {
            $monthSelector.append(new Option(
                new Date(0, month - 1).toLocaleString('en-US', { month: 'long' }),
                month
            ));
        }
        // Do not select any month by default
        $monthSelector.val('');
    }
    populateMonths();

    // Event listener for year and month changes
    $yearSelector.change(fetchChartData);
    $monthSelector.change(fetchChartData);

    // Fetch chart data based on selected year and month
    function fetchChartData() {
        const selectedYear = $yearSelector.val();
        const selectedMonth = $monthSelector.val();

        $.ajax({
            url: '{{ route('sugesstion.barchart') }}',
            method: 'GET',
            data: {
                year: selectedYear,
                month: selectedMonth
            },
            dataType: 'json',
            success: function(response) {
                renderPieChart(response.pieChartData);
                updateChartTitle(selectedYear, selectedMonth);
            },
            error: function(xhr, status, error) {
                console.error("An error occurred:", error);
            }
        });
    }

    // Initial load without fetching data
    fetchChartData();

    // Render Pie Chart
    function renderPieChart(data) {
        const ctx = document.getElementById('myPieChart').getContext('2d');

        // Check if myPieChart is defined and is a Chart instance, then destroy it
        if (window.myPieChart instanceof Chart) {
            window.myPieChart.destroy();
        }

        // Create new pie chart
        window.myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                let label = tooltipItem.label || '';
                                let value = tooltipItem.raw || 0;
                                return label + ': ' + value + '%';
                            }
                        }
                    }
                }
            }
        });
    }

    // Update chart title with selected year and month
    function updateChartTitle(year, month) {
        let monthText = month ? new Date(0, month - 1).toLocaleString('en-US', { month: 'long' }) : 'All Months';
        $chartTitle.text(`${monthText} ${year}: `);
    }
});

    </script>
@endsection