<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Darts Events</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #FFFFFF;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #1E1E1E;
        }
        th, td {
            border: 1px solid #333;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #333;
            color: #4FC3F7; /* Azul */
        }
        th:nth-child(2) {
            color: #FF5252; /* Rojo */
        }
        tr:nth-child(even) {
            background-color: #2A2A2A;
        }
        tr:hover {
            background-color: #444;
        }
        h1 {
            color: #4FC3F7;
        }
        #loading {
            text-align: center;
            font-size: 1.2em;
        }
        #error {
            color: #FF5252;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Darts Events on Sky Sports</h1>
    <p id="loading">Loading events...</p>
    <p id="error" style="display: none;">Failed to load events. Please try again later.</p>
    <table style="display: none;" id="events-table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Event</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody id="events-body">
            <!-- Los datos se generarán dinámicamente aquí -->
        </tbody>
    </table>

    <script>
        const url = "https://api.codetabs.com/v1/proxy/?quest=https://www.skysports.com/watch/darts-on-sky";

        // Referencias a elementos HTML
        const loadingElement = document.getElementById("loading");
        const errorElement = document.getElementById("error");
        const tableElement = document.getElementById("events-table");
        const eventsBody = document.getElementById("events-body");

        // Recuperar datos de la página objetivo
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.text();
            })
            .then(html => {
                // Parsear el HTML recuperado
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, "text/html");

                // Buscar los eventos en la página
                const events = [];
                doc.querySelectorAll("h3.text-h4.-rs-style20.box").forEach(dateElement => {
                    const date = dateElement.textContent.trim();
                    const eventGroup = dateElement.nextElementSibling;
                    if (eventGroup && eventGroup.querySelector("strong")) {
                        const eventTitle = eventGroup.querySelector("strong").textContent.trim();
                        const eventDetails = eventGroup.querySelector("p.event-detail").textContent.trim();
                        events.push({ date, event: eventTitle, details: eventDetails });
                    }
                });

                // Mostrar los eventos en la tabla
                if (events.length > 0) {
                    events.forEach(event => {
                        const row = document.createElement("tr");

                        const dateCell = document.createElement("td");
                        dateCell.textContent = event.date;

                        const eventCell = document.createElement("td");
                        eventCell.textContent = event.event;

                        const detailsCell = document.createElement("td");
                        detailsCell.textContent = event.details;

                        row.appendChild(dateCell);
                        row.appendChild(eventCell);
                        row.appendChild(detailsCell);

                        eventsBody.appendChild(row);
                    });

                    tableElement.style.display = "table";
                } else {
                    errorElement.textContent = "No events found.";
                    errorElement.style.display = "block";
                }
            })
            .catch(error => {
                console.error("Failed to load events:", error);
                errorElement.style.display = "block";
            })
            .finally(() => {
                loadingElement.style.display = "none";
            });
    </script>
</body>
</html>
