<div id="event-container"></div>

<script>
// API URL
const apiUrl = "https://esci.ie/escievents.php?api_key=secret"; // Replace with your API URL and key

// Fetch event data
fetch(apiUrl)
  .then(response => {
    console.log("Raw Response:", response); // Debugging step
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log("Parsed Data:", data); // Debugging step
    if (data.status === "success") {
      const event = data.data[0]; // Adjust index for desired event
      
      // Extract required fields
      const id = event.id;
      const title = event.title;
      const eventDate = event.event_date;
      const eventEndDate = event.event_end_date;
      const shortDescription = event.short_description;
      const individualPrice = event.individual_price || "Free";

      // Generate link
      const eventLink = `https://esci.ie/index.php?option=com_eventbooking&view=event&id=${id}`;

      // Render HTML
      const eventHTML = `
        <div class="event">
          <h3>${title}</h3>
          <p><strong>Start Date:</strong> ${new Date(eventDate).toLocaleDateString()}</p>
          <p><strong>End Date:</strong> ${new Date(eventEndDate).toLocaleDateString()}</p>
          <p><strong>Description:</strong> ${shortDescription}</p>
          <p><strong>Price:</strong> €${individualPrice}</p>
          <a href="${eventLink}" target="_blank" rel="noopener noreferrer">View Event</a>
        </div>
      `;

      // Insert into the page
      document.getElementById("event-container").innerHTML = eventHTML;
    } else {
      document.getElementById("event-container").innerText = "Failed to load event data.";
    }
  })
  .catch(error => {
    console.error("Error fetching the event data:", error);
    document.getElementById("event-container").innerText = "Error loading event data.";
  });
</script>

const eventLink = `href ="${esciURL}index.php?option=com_eventbooking&view=event&id=${id}"`;

<a ${eventLink}>View Event</a>