@extends('layouts.master')
@section('contain')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">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">{{ $totalCompany }}</h2>
                            <h4 class="card-subtitle">Number of Companies</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">Unique Open %</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">Unique Click %</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card col-md-12">
                <canvas id="myChart" width="400" height="140"></canvas>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Combined data for all months
            // const allData = {
            //     labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4','Week 5'],
            //     open: {
            //         'may': [110, 140, 160, 180,8],
            //         'jun': [120, 150, 170, 200,9]
            //     },
            //     click: {
            //         'may': [70, 90, 80, 100,44],
            //         'jun': [80, 100, 90, 110,56]
            //     }
            // };
            const allData = @json($lastTwoMonthsData);
            let chart;

            document.querySelectorAll('.button-group button').forEach(button => {
                button.addEventListener('click', (event) => {
                    const range = event.target.getAttribute('data-range');
                    if (range === 'all') {
                        createChart(allData, 'all');
                    } else {
                        createChart(allData, range);
                    }
                });
            });

            // function createChart(data, range) {
            //     const ctx = document.getElementById('myChart').getContext('2d');
            //     let chartData = {
            //         labels: data.labels,
            //         datasets: []
            //     };

            //     if (range === 'all') {
            //         chartData.datasets.push({
            //             label: 'Open (May)',
            //             data: data.open.may,
            //             borderColor: 'blue',
            //             backgroundColor: 'rgba(0, 0, 255, 0.2)', // Transparent blue (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'blue',
            //             pointBorderColor: 'blue',
            //             pointHoverBackgroundColor: 'blue',
            //             pointHoverBorderColor: 'blue',
            //             borderRadius: 10
            //         }, {
            //             label: 'Click (May)',
            //             data: data.click.may,
            //             borderColor: 'gray',
            //             backgroundColor: 'rgba(128, 128, 128, 0.2)', // Transparent gray (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'gray',
            //             pointBorderColor: 'gray',
            //             pointHoverBackgroundColor: 'gray',
            //             pointHoverBorderColor: 'gray',
            //             borderRadius: 0
            //         }, {
            //             label: 'Open (June)',
            //             data: data.open.jun,
            //             borderColor: 'green',
            //             backgroundColor: 'rgba(0, 128, 0, 0.2)', // Transparent green (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'green',
            //             pointBorderColor: 'green',
            //             pointHoverBackgroundColor: 'green',
            //             pointHoverBorderColor: 'green',
            //             borderRadius: 10
            //         }, {
            //             label: 'Click (June)',
            //             data: data.click.jun,
            //             borderColor: 'red',
            //             backgroundColor: 'rgba(255, 0, 0, 0.2)', // Transparent red (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'red',
            //             pointBorderColor: 'red',
            //             pointHoverBackgroundColor: 'red',
            //             pointHoverBorderColor: 'red',
            //             borderRadius: 0
            //         });
            //     } else {
            //         chartData.datasets.push({
            //             label: 'Open',
            //             data: data.open[range],
            //             borderColor: 'blue',
            //             backgroundColor: 'rgba(0, 0, 255, 0.2)', // Transparent blue (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'blue',
            //             pointBorderColor: 'blue',
            //             pointHoverBackgroundColor: 'blue',
            //             pointHoverBorderColor: 'blue',
            //             borderRadius: 10
            //         }, {
            //             label: 'Click',
            //             data: data.click[range],
            //             borderColor: 'gray',
            //             backgroundColor: 'rgba(128, 128, 128, 0.2)', // Transparent gray (0.2 alpha)
            //             fill: true,
            //             tension: 0.4,
            //             pointRadius: 4,
            //             pointHoverRadius: 6,
            //             pointBackgroundColor: 'gray',
            //             pointBorderColor: 'gray',
            //             pointHoverBackgroundColor: 'gray',
            //             pointHoverBorderColor: 'gray',
            //             borderRadius: 0
            //         });
            //     }

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

            //     chart = new Chart(ctx, {
            //         type: 'line',
            //         data: chartData,
            //         options: {
            //             scales: {
            //                 x: {
            //                     title: {
            //                         display: true,
            //                         text: 'Weeks'
            //                     }
            //                 },
            //                 y: {
            //                     title: {
            //                         display: true,
            //                         text: 'Count'
            //                     },
            //                     beginAtZero: true,
            //                     suggestedMax: Math.max(...chartData.datasets.flatMap(dataset => dataset
            //                         .data)) + 1
            //                 }
            //             }
            //         }
            //     });
            // }
            function createChart(data, range) {
                const ctx = document.getElementById('myChart').getContext('2d');
                let chartData = {
                    labels: data.labels,
                    datasets: []
                };

                // Loop through each month in `open` and `click` keys
                Object.keys(data.open).forEach(month => {
                    chartData.datasets.push({
                        label: `Open (${month.charAt(0).toUpperCase() + month.slice(1)})`,
                        data: data.open[month],
                        borderColor: 'blue',
                        backgroundColor: 'rgba(0, 0, 255, 0.2)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        pointBackgroundColor: 'blue',
                        pointBorderColor: 'blue',
                    });

                    chartData.datasets.push({
                        label: `Click (${month.charAt(0).toUpperCase() + month.slice(1)})`,
                        data: data.click[month],
                        borderColor: 'gray',
                        backgroundColor: 'rgba(128, 128, 128, 0.2)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        pointBackgroundColor: 'gray',
                        pointBorderColor: 'gray',
                    });
                });

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

                chart = new Chart(ctx, {
                    type: 'line',
                    data: chartData,
                    options: {
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Weeks'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Count'
                                },
                                beginAtZero: true,
                                suggestedMax: Math.max(...chartData.datasets.flatMap(dataset => dataset
                                    .data)) + 1
                            }
                        }
                    }
                });
            }

            // Initialize chart with all data
            createChart(allData, 'all');
        });
    </script>
@endsection