#if ($!pages.length > 0)<div class="edu-tab">
  <h2>Kurstillfällen</h2>
   <!-- Skriv ut som tabbar -->
   <div class="edu-tab--tabs">
      #foreach ($tab in $pages)
          <button id="tab-$foreach.index" onclick="openTab(event, 'content-$foreach.index')">
            <span>$!tab.tabDay</span><span>$!tab.tabMonth</span>
          </button>
      #end
    </div>
    #foreach ($item in $pages)
      <div id="content-$foreach.index" class="edu-tab--content" #if ($foreach.index == 0) style="display: flex;" #end>
        <table>
            <tr>
              <td>Start</td>
              <td>$!item.startDate</td>
            </tr>
            <tr>
              <td>Dagar</td>
              <td>$!item.duration</td>
            </tr>
            <tr>
              <td>Senaste anmälningsdag</td>
              <td>$!item.lastDayForRegistration</td>
            </tr> 
        </table>
      </div>
    #end
  </div>
#end

#if ($!pages.length > 0)
  <div class="edu-form">
      <h2>Anmäl dig till kurstillfället den <span id="eduEvent">$!pages[0].tabDay $!pages[0].tabMonth</span></h2>
      <form action="/utbildningar/tack-for-din-kursanmalan" method="post">
        <label for=firstName>Ditt förnamn</label>
        <input id="firstName" type="text" name="firstName" placeholder="Förnamn" required>
        <label for=lastName>Ditt efternamn</label>
        <input id="lastName" type="text" name="lastName" placeholder="Efternamn" required>
        <label for=email>Din e-postadress</label>
        <input id="email" type="email" name="email" placeholder="E-post" required>
        <label for=emailConfirm>Bekräfta din e-postadress</label>
        <input id="emailConfirm" type="email" name="emailConfirm" placeholder="Bekräfta e-post" required>
        <label for=phone>Ditt telefonnummer</label>
        <input id="phone" type="tel" name="phone" placeholder="Telefon">
        <input type="hidden" name="courseName" value="">
        <input type="hidden" name="courseDate" value="$!pages[0].startDate">
        <div class="edu-form--gdpr">
          <p>Vi behöver dina uppgifter för att kunna hantera din anmälan. <a href="/om-oss/gdpr">Läs mer om hur vi hanterar personuppgifter enligt GDPR</a>.</p>
          <p><input type="checkbox" name="gdpr" required> Jag godkänner att mina uppgifter sparas enligt GDPR.</p>
        </div>
        <input type="submit" value="Skicka" disabled>
      </form>
  </div>
#else
  <h2 style="margin-top: 0;">Tillfällen</h2>
  <p>Det finns inga planerade tävlingar just nu. Titta gärna in igen om ett tag.</p>
#end


<script>

  // Sätter status på checkboxen för GDPR
  function checkGDPR() {
    document.querySelector("input[type='submit']").disabled = !document.querySelector("input[name='gdpr']").checked;
  }

  // Funktion för att formatera datum till exempel: 1 jan
  function formatDate(date) {
    date = date.toString();
    const newDate = new Date(date);
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun",
      "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"
    ];
    return newDate.getDate() + " " + monthNames[newDate.getMonth()].toLowerCase();
  }


  // Funktion för att hämta sidans h1-tagg
  function getPageTitle() {
    return document.querySelector("h1").innerText;
  }

  function resetTabs() {

    // Hämta alla buttons i elementet med klassen "edu-tab--tabs"
    var tablinks = document.getElementsByClassName("edu-tab--tabs")[0].getElementsByTagName("button");
    
    // Återställer bakgrundsfärg på alla buttons i elementet med klassen "edu-tab--tabs"
    for (var i = 0; i < tablinks.length; i++) {
      tablinks[i].style.backgroundColor = "#f1f1f1";
    }

    // Hämta alla element med klassen "edu-tab--content"
    var tabcontent = document.getElementsByClassName("edu-tab--content");

    // Dölj alla element med klassen "edu-tab--content"
    for (var i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

  }

	// Hantera klick på tabbarna här!
  function openTab(evt, tabName) {
        
    // Återställ alla tabbar
    resetTabs();

    let tabID = tabName.split("-")[1];

    // Visa element kopplat till det id som skickas in som argument
    if(tabID != null) {
      document.getElementById('tab-' + tabID).style.backgroundColor = "#e3f4ee";
      document.getElementById('content-' + tabID).style.display = "block";
    }

    // Sätt sidans titel i formulärets input [hidden] för kursnamn
    document.querySelector("input[name='courseName']").value = getPageTitle();

    // Sätt kursens startdatum i formulärets input [hidden] för kursdatum
    document.querySelector("input[name='courseDate']").value = document.getElementById(tabName).getElementsByTagName("td")[5].innerText;

    // Sätt sidans startdatum i formulärets rubrik
    let startDate = document.getElementById(tabName).getElementsByTagName("td")[5].innerText;
    document.getElementById("eduEvent").innerText = formatDate(startDate);

  }


  function initializeTabs() {
    // Sätt bakgrundsfärgen på det första tab-elementet
    document.getElementById("tab-0").style.backgroundColor = "#e3f4ee";
    // Visa det första elementet
    document.getElementById("content-0").style.display = "flex";
    // Om checkboxen för GDPR inte är ikryssad, hindra formuläret från att skickas
    document.querySelector("input[type='submit']").addEventListener("click", function(event) {
      if(!document.querySelector("input[name='gdpr']").checked) {
        alert("Du måste godkänna GDPR för att skicka formuläret!");
        event.preventDefault();
      }
    });

    // Sätt sidans titel i input-fältet för kursnamn
    document.querySelector("input[name='courseName']").value = getPageTitle();

    // Inaktivera skicka-knappen om checkboxen för GDPR inte är ikryssad
    document.querySelector("input[name='gdpr']").addEventListener("change", checkGDPR);

  }



  // Kör initializeTabs när sidan laddas
  window.onload = initializeTabs;




  // När besökaren klickar på skicka-knappen skall formuläret valideras
  document.querySelector(".edu-form form").addEventListener("submit", function(event) {
    var email = document.querySelector("input[name='email']").value;
    var emailConfirm = document.querySelector("input[name='emailConfirm']").value;

    if(email !== emailConfirm) {
      alert("E-postadresserna matchar inte!");
      event.preventDefault();
    }

    const firstName = document.querySelector("input[name='firstName']").value;
    const lastName = document.querySelector("input[name='lastName']").value;
    const courseName = document.querySelector("input[name='courseName']").value;
    const courseDate = document.querySelector("input[name='courseDate']").value;

    // Förhindra att formuläret skickas
    event.preventDefault();

    // TODO: Skicka ett mail med formulärsdata till en utpekad mottagare

    // Skicka användaren till en tack-sida och lägg till en query parameter för att visa att det är skickat.
    window.location.href = "/utbildningar/tack-for-din-kursanmalan?"
                            + "firstName=" + firstName
                            + "&lastName=" + lastName
                            + "&courseName=" + getPageTitle()
                            + "&courseDate=" + courseDate;

  });

   
</script>