<a target="_blank" href="https://de.m.wikipedia.org/wiki/Nintendo_Direct" style=color:blue>ND</a><br>
<?php

$url = "https://de.m.wikipedia.org/wiki/Nintendo_Direct";
$html = file_get_contents($url);

$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_clear_errors();

$xpath = new DOMXPath($dom);

$rows = $xpath->query("//table[contains(@class, 'wikitable')]/tbody/tr");

$data = [];

$germanMonths = [
    "Jan." => "January", "Feb." => "February", "März" => "March", "Apr." => "April",
    "Mai" => "May", "Juni" => "June", "Juli" => "July", "Aug." => "August",
    "Sep." => "September", "Okt." => "October", "Nov." => "November", "Dez." => "December"
];

$years = []; 

foreach ($rows as $row) {
    $cols = $row->getElementsByTagName('td');
    if ($cols->length >= 3) { 
        $title = trim($cols->item(0)->nodeValue); 
        $dateRaw = trim($cols->item(2)->nodeValue); 

        foreach ($germanMonths as $de => $en) {
            $dateRaw = str_replace($de, $en, $dateRaw);
        }

        $dateTime = DateTime::createFromFormat('d. F Y', $dateRaw);
        if ($dateTime) {
            $formattedDate = $dateTime->format('Y');
            $year = $dateTime->format('Y');
            $data[] = ['date' => $dateTime->format('Y-m-d'), 'title' => $title];

            if (!in_array($year, $years)) {
                $years[] = $year;
            }
        }
    }
}

$jsonData = json_encode($data);
$yearsJson = json_encode($years); 
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nintendo Direct Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luxon@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script> <!-- Annotation Plugin -->
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>

    <!-- Div to show the clicked event as a hyperlink -->
    <div id="eventDisplay" style="margin-top: 20px; font-size: 18px;"></div>

    <script>

        var dataFromPHP = <?php echo $jsonData; ?>;
        var years = <?php echo $yearsJson; ?>;

        var chartData = dataFromPHP.map(function(item, index) {
            let color = 'rgb(75, 192, 192)'; 

            if (item.title === "Nintendo Direct") {
                color = 'red'; 
            } else if (item.title === "Nintendo Direct Mini") {
                color = 'orange'; 
            }

            return {
                x: new Date(item.date),
                y: index + 1, 
                title: item.title,
                formattedDate: item.date,
                pointBackgroundColor: color,
                pointRadius: (color !== 'rgb(75, 192, 192)') ? 6 : 3 
            };
        });

        var verticalLines = years.map(year => ({
            type: 'line',
            mode: 'vertical',
            scaleID: 'x',
            value: new Date(`${year}-01-01`),
            borderColor: 'rgba(255, 0, 0, 0.5)',
            borderWidth: 2,
            label: {
                content: year,
                enabled: true,
                position: 'top'
            }
        }));

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Nintendo Direct Events',
                    data: chartData,
                    borderColor: 'rgb(75, 192, 192)',
                    fill: false,
                    pointBackgroundColor: chartData.map(item => item.pointBackgroundColor), 
                    pointRadius: chartData.map(item => item.pointRadius) 
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Nintendo Direct Events'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return dataFromPHP[tooltipItem.dataIndex].title;
                            }
                        }
                    },
                    annotation: {
                        annotations: verticalLines 
                    }
                },
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'month'
                        },
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Event Order'
                        }
                    }
                },
                onClick: function(event, elements) {
                    if (elements.length > 0) {
                        var index = elements[0].index;
                        var clickedEvent = chartData[index];

                        var youtubeSearchUrl = "https://www.youtube.com/results?search_query=" + 
                            encodeURIComponent(clickedEvent.formattedDate + " " + clickedEvent.title);

                        document.getElementById('eventDisplay').innerHTML = 
                            `You clicked: <a href="${youtubeSearchUrl}" target="_blank">${clickedEvent.title} (${clickedEvent.formattedDate})</a>`;
                    }
                }
            }
        });
    </script>
</body>
</html>
