<script>
  function updateEventTimezone() {
    document.querySelectorAll(".training-event-card .event-info").forEach((cardDetails) => {
      const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

      const day = cardDetails.querySelector(".event-date").innerText.split(" ")[0]
      const month = cardDetails.querySelector(".event-date").innerText.split(" ")[1]
      const year = cardDetails.querySelector(".event-year").innerText
      const startTime = cardDetails.querySelector(".event-time").innerText;

      var eventShortTimezone = cardDetails.querySelector(".event-timezone").innerText
      if (eventShortTimezone == "CET") {
        eventShortTimezone = "GMT+0100"
      } else if (eventShortTimezone == "CEST") {
        eventShortTimezone = "GMT+0200"
      }

      var startDate = new Date(`${day} ${month} ${year} ${startTime} ${eventShortTimezone}`);
      var userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      var userTimeZoneAbbreviation = new Date().toLocaleTimeString('en-us',{timeZone: userTimeZone, timeZoneName:'short'}).split(' ')[2];

      var startFormatedTime = formatAMPM(startDate)

      cardDetails.querySelector(".event-time").innerText = startFormatedTime
      cardDetails.querySelector(".event-date").innerText = `${startDate.getDate()} ${monthNames[startDate.getMonth()]}`
    })

    function formatAMPM(date) {
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var ampm = hours >= 12 ? 'PM' : 'AM';
      hours = hours % 12;
      hours = hours ? hours : 12;
      minutes = minutes < 10 ? '0'+minutes : minutes;
      var strTime = hours + ':' + minutes + ' ' + ampm;
      return strTime;
    }
  }
  
</script>