@extends('layouts.master')
@section('contain')
    <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;
            /* Set a fixed height */
            line-height: 24px;
            /* Adjust line height for vertical alignment */
        }

        .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;
        }
    </style>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">News Feed Data Overview</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>
    <div class="card">
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 text-center">
                    <!-- Card -->
                    <div class="card text-center">
                        <div class="card-body">
                            <h2 class="card-title text-primary">{{ $newsFeedCount }}</h2>
                            <h4 class="card-subtitle">Number of NewsFeed</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 text-center">
                    <!-- Card -->
                    <div class="card text-center">
                        <div class="card-body">
                            <h2 class="card-title text-primary">{{ round($openRate, 1) }}</h2>
                            <h4 class="card-subtitle">Open Rate %</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 text-center">
                    <!-- Card -->
                    <div class="card text-center">
                        <div class="card-body">
                            <h2 class="card-title text-primary">{{ round($clickThroughRate, 1) }}</h2>
                            <h4 class="card-subtitle">Click Through Rate %</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="card mx-auto col-md-9" style="">
                    <div class="font-bold text-muted mb-3" style="text-align: center; font-size: small;">
                        Net Peak Times / Click Maps
                    </div>

                    <!-- Centering the selector group and making it smaller -->
                    <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;">
                            <!-- Options for years will be dynamically populated -->
                        </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;">
                            <!-- Options for months will be dynamically populated -->
                        </select>

                        <!-- Day Selector -->
                        <select id="day-selector" class="custom-select"
                            style="flex: 1; font-size: 72%; margin: 0 5px; border-radius: 0.25rem; border: 1px solid #ced4da;">
                            <!-- Options for days will be dynamically populated based on selected month and year -->
                        </select>
                    </div>

                    <div class="flex-fill">
                        <canvas id="myChart" width="400" height="200"></canvas>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Get current year and month
            const currentYear = new Date().getFullYear();
            const currentMonth = new Date().getMonth() + 1; // Months are zero-indexed

            // Populate year selector (e.g., 10 years up to the current year)
            const $yearSelector = $('#year-selector');
            for (let year = currentYear; year >= currentYear - 10; year--) {
                $yearSelector.append(new Option(year, year));
            }
            // Set the default selected value for the year as the current year
            $yearSelector.val(currentYear);

            // Populate month selector with a placeholder
            const $monthSelector = $('#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
                    ));
                }
            }

            // Populate days based on selected year and month
            function populateDays() {
                const $daySelector = $('#day-selector');
                const selectedYear = $yearSelector.val();
                const selectedMonth = $monthSelector.val();

                // Clear previous options
                $daySelector.empty();

                // Add a placeholder to the day selector
                $daySelector.append(new Option('Select Day', '', true, true)).prop('disabled', false);

                // If a month is selected, populate the day selector
                if (selectedMonth) {
                    const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
                    for (let day = 1; day <= daysInMonth; day++) {
                        $daySelector.append(new Option(day, day));
                    }
                }
            }

            // Initialize month and day selectors
            populateMonths();
            populateDays();

            // Add event listeners to update months and days when year or month changes
            $yearSelector.change(function() {
                populateMonths(); // Reset month selector when year changes
                populateDays(); // Update days based on the new year and selected month
            });

            $monthSelector.change(populateDays);
        });
        $(document).ready(function() {
            let data = @json($peaktimeMap);
            let chart;
            // Initialize the chart with the full range of data
            createChart();
            // Date picker change event
            $('#day-selector, #month-selector, #year-selector').change(function() {
                // Get the values of each selector
                const dayValue = $('#day-selector').val();
                const monthValue = $('#month-selector').val();
                const yearValue = $('#year-selector').val();
                // Display the values (for demonstration)
                $.ajax({
                    url: '{{ route('newsfeeds.overview') }}',
                    method: 'GET',
                    data: {
                        day: dayValue,
                        month: monthValue,
                        year: yearValue,
                    },
                    success: function(response) {
                        const newData = response['Data'];
                        // alert(JSON.stringify(newData));
                        // Update the data object with new data from the response
                        data = {
                            ...data,
                            ...newData
                        };
                        // Recreate the chart with updated data
                        createChart();
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error: ' + status + error);
                    }
                });
            });

            // Function to create the chart
            function createChart() {
                const ctx = document.getElementById('myChart').getContext('2d');

                if (chart) {
                    chart.destroy(); // Destroy the old chart if it exists
                }

                // Create a new chart
                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [{
                                label: 'Open',
                                data: data.open,
                                borderColor: 'blue',
                                backgroundColor: 'rgba(0, 0, 255, 0.2)',
                                fill: true,
                                tension: 0.2,
                                pointRadius: 4,
                                pointHoverRadius: 2,
                                pointBackgroundColor: 'blue',
                                pointBorderColor: 'blue',
                                pointHoverBackgroundColor: 'blue',
                                pointHoverBorderColor: 'blue',
                                borderRadius: 10
                            },
                            {
                                label: 'Click',
                                data: data.click,
                                borderColor: 'gray',
                                backgroundColor: 'rgba(128, 128, 128, 0.2)',
                                fill: true,
                                tension: 0.1,
                                pointRadius: 4,
                                pointHoverRadius: 2,
                                pointBackgroundColor: 'gray',
                                pointBorderColor: 'gray',
                                pointHoverBackgroundColor: 'gray',
                                pointHoverBorderColor: 'gray',
                                borderRadius: 0
                            }
                        ]
                    },
                    options: {
                        scales: {
                            x: {
                                title: {
                                    display: false,
                                    text: 'Month'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Count'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.max(...data.open, ...data.click) + 2
                            }
                        }
                    }
                });
            }
        });
    </script>
@endsection