@extends('layouts.master')
@section('contain')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">News Feed 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>
        .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="card">
        <div class="card-body">
            <div class="container-fluid">
                <div class="row equal-height">
                    <div class="col-md-4 d-flex flex-column">
                        <div class="card text-center mb-3 flex-fill" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                            <div class="font-bold text-muted mb-3"
                                style="text-align: center; font-size: small; margin-bottom: 1rem;">
                                Communication Open Rate
                            </div>
                            <div class="mb-3">
                                <select id="newsfeed-open-rate-filter" class="custom-select"
                                    style="width: 60%; 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>
                            </div>
                            <div class="card-body" style="padding-top: 0;">
                                <p class="card-text" id="newsfeed-open-rate-percentage"
                                    style="font-size: 3rem; font-weight: bold; color: #007bff; margin-top: 1rem; margin-bottom: 0;">
                                    {{ $openRate }}%
                                </p>
                            </div>
                        </div>

                        <div class="card text-center flex-fill" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                            <div class="font-bold text-muted mb-3"
                                style="text-align: center; font-size: small; margin-bottom: 1rem;">
                                Communication Click Through Rate
                            </div>
                            <div class="mb-3">
                                <select id="filter-click-through-rate" class="custom-select"
                                    style="width: 60%; 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>
                            </div>
                            <div class="card-body" style="padding-top: 0;">
                                <p class="card-text" id="department-click-through-rate"
                                    style="font-size: 3rem; font-weight: bold; color: #007bff; margin-top: 1rem; margin-bottom: 0;">
                                    {{ $ClickThroughRate }}%
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="card col-md-8 d-flex flex-column">
                        {{-- <div class="font-bold text-muted mb-3" style="text-align: center; font-size: small;">
                            Net Peak Times / Click Maps
                        </div>
                        <div class="button-group mb-3" style="display: flex; justify-content: center; align-items: center;">
                            <button class="btn-filter" style="flex: 1;" data-range="1hr">1 Hour</button>
                            <button class="btn-filter" style="flex: 1;" data-range="3hr">3 Hours</button>
                            <button class="btn-filter" style="flex: 1;" data-range="6hr">6 Hours</button>
                            <button class="btn-filter selected" style="flex: 1;" data-range="full">Full Day</button>
                            <input type="date" id="date-picker" class="custom-date-picker"
                                style="flex: 2; font-size: 72%; border-radius: 0.25rem; border: 1px solid #ced4da;">
                        </div>
                        <div class="flex-fill">
                            <canvas id="myChart" width="400" height="200"></canvas>
                        </div>
                        {{-- <input type="hidden" value="{{ $newsfeed->id }}" name="newsfeed_id" id="newsfeed_id"> --}}
                        <div class="font-bold text-muted mb-3" style="text-align: center; font-size: small;">
                            Net Peak Times / Click Maps
                        </div>
                        <input type="hidden" value="{{ $newsfeed->id }}" name="newsfeed_id" id="newsfeed_id">
                        <!-- 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>
    </div>
    <script>
        // $(document).ready(function() {
        //     let data = @json($peaktimeMap);
        //     let chart;

        //     // Initialize chart with the full range
        //     createChart('full');

        //     // Button filter functionality
        //     document.querySelectorAll('.btn-filter').forEach(button => {
        //         button.addEventListener('click', (event) => {
        //             document.querySelectorAll('.btn-filter').forEach(btn => btn.classList.remove(
        //                 'selected'));
        //             event.target.classList.add('selected');
        //             const range = event.target.getAttribute('data-range');
        //             createChart(range);
        //         });
        //     });

        //     // Date picker change event
        //     $('#date-picker').change(function() {
        //         const date = $(this).val();
        //         const newsfeed_id = $('#newsfeed_id').val();
        //         $.ajax({
        //             url: '{{ route('getby-day-chart') }}',
        //             method: 'GET',
        //             data: {
        //                 date: date,
        //                 newsfeed_id: newsfeed_id
        //             },
        //             success: function(response) {
        //                 // Assuming response is an array containing the data object
        //                 const newData = response[0];
        //                 console.log(newData);
        //                 // Update the data object
        //                 data = {
        //                     ...data,
        //                     ...newData
        //                 };

        //                 // Get the currently selected filter and create the chart
        //                 const selectedRange = document.querySelector('.btn-filter.selected')
        //                     .getAttribute('data-range');
        //                 createChart(selectedRange);
        //             },
        //             error: function(xhr, status, error) {
        //                 console.error('AJAX Error: ' + status + error);
        //             }
        //         });
        //     });

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

        //         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',
        //                         borderRadius: 10
        //                     },
        //                     {
        //                         label: 'Click',
        //                         data: chartData.click,
        //                         borderColor: 'gray',
        //                         fill: true,
        //                         tension: 0.4,
        //                         pointRadius: 4,
        //                         pointHoverRadius: 6,
        //                         pointBackgroundColor: 'gray',
        //                         pointBorderColor: 'gray',
        //                         pointHoverBackgroundColor: 'gray',
        //                         pointHoverBorderColor: 'gray',
        //                         borderRadius: 0
        //                     }
        //                 ]
        //             },
        //             options: {
        //                 scales: {
        //                     x: {
        //                         title: {
        //                             display: true,
        //                             text: 'Time'
        //                         }
        //                     },
        //                     y: {
        //                         title: {
        //                             display: true,
        //                             text: 'Count'
        //                         },
        //                         beginAtZero: true,
        //                         suggestedMax: Math.max(...chartData.open, ...chartData.click) + 2
        //                     }
        //                 }
        //             }
        //         });
        //     }
        // });
        $(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)
                var newsfeed_id = $('#newsfeed_id').val();
                var url = '{{ route('newsfeed.analyticsview', ['newsfeed' => ':newsfeed']) }}'.replace(':newsfeed', newsfeed_id);
                $.ajax({
                    url:url,
                    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.1,
                                pointRadius: 4,
                                pointHoverRadius: 1,
                                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
                            }
                        }
                    }
                });
            }
        });

        // pie chart end
        // open rate filter data
        $(document).ready(function() {
            $('#newsfeed-open-rate-filter').change(function() {
                var departmentId = $(this).val();
                var newsfeed_id = $('#newsfeed_id').val();
                $.ajax({
                    url: '{{ route('getNewsfeedOpenRateDepartmentData') }}', // Adjust the URL to your route
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        newsfeed_id: newsfeed_id
                    },
                    success: function(response) {
                        // Assuming response contains the percentage value
                        $('#newsfeed-open-rate-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 newsfeed_id = $('#newsfeed_id').val();
                $.ajax({
                    url: '{{ route('getNewsFeedClickThroughRateDepartmentData') }}', // Adjust the URL to your route
                    method: 'GET',
                    data: {
                        department_id: departmentId,
                        newsfeed_id: newsfeed_id
                    },
                    success: function(response) {
                        $('#department-click-through-rate').text(response
                            .percentage + '%');
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error: ' + status + error);
                    }
                });
            });

        });
    </script>
@endsection