/**
 * @file kids.v-4.js
 * @brief JavaScript pro interaktivní funkce na stránce dětských pobytů.
 *
 * Tento skript:
 *  - Přidává interaktivitu pro přepínání obsahu v sekci "Aréal a okolí" na stránce kids.php.
 *  - Umožňuje přepínání mezi třemi kategoriemi (Sezónní, Cvičení, Procházky) pomocí klikacích nadpisů.
 *  - Při kliknutí na nadpis zobrazí příslušný obsah a skryje ostatní, zároveň aktualizuje styl nadpisu (třída selected-heading).
 *  - Nastavuje výchozí zobrazení kategorie "Cvičení" při načtení stránky.
 *  - Zajišťuje dynamickou změnu obrázků pro "Velkou učebnu" a "Malou učebnu" při interakci s texty "předsálí" a "2. varianta".
 */

document.addEventListener("DOMContentLoaded", function () {
  const exerciseHeading = document.getElementById("exercise-heading");
  const walksHeading = document.getElementById("walks-heading");
  const seasonHeading = document.getElementById("season-heading");
  const optionExercise = document.querySelector(".optionExercise");
  const optionSeason = document.querySelector(".optionSeason");
  const optionWalks = document.querySelector(".optionWalks");

  function selectHeading(
    selectedHeading,
    showElement,
    hideElement1,
    hideElement2
  ) {
    // Odebere třídu selected-heading ze všech nadpisů
    exerciseHeading.classList.remove("selected-heading");
    walksHeading.classList.remove("selected-heading");
    seasonHeading.classList.remove("selected-heading");

    // Přidá třídu selected-heading k vybranému nadpisu
    selectedHeading.classList.add("selected-heading");

    // Zobrazí vybraný obsah a skryje ostatní
    showElement.style.display = "flex";
    hideElement1.style.display = "none";
    hideElement2.style.display = "none";
  }

  // Nastaví výchozí zobrazení na "Cvičení"
  selectHeading(exerciseHeading, optionExercise, optionWalks, optionSeason);
  seasonHeading.addEventListener("click", function () {
    selectHeading(seasonHeading, optionSeason, optionExercise, optionWalks);
  });

  exerciseHeading.addEventListener("click", function () {
    selectHeading(exerciseHeading, optionExercise, optionWalks, optionSeason);
  });

  walksHeading.addEventListener("click", function () {
    selectHeading(walksHeading, optionWalks, optionExercise, optionSeason);
  });
});

//HOVER PŘEDSÁLÍ
document.addEventListener("DOMContentLoaded", function () {
  const hoverText = document.querySelector(".hover-text");
  const schoolingImage = document.getElementById("schoolingImage");
  const hoverText2 = document.querySelector(".hover-text2");
  const schoolingImage2 = document.getElementById("schoolingImage2");

  hoverText.addEventListener("mouseover", function () {
    schoolingImage.src = "media/fotogalery/rent/7.1.png";
  });

  hoverText.addEventListener("mouseout", function () {
    schoolingImage.src = "media/rent/schooling/1.png";
  });

  hoverText2.addEventListener("mouseover", function () {
    schoolingImage2.src = "media/fotogalery/rent/4.1.png";
  });

  hoverText2.addEventListener("mouseout", function () {
    schoolingImage2.src = "media/rent/schooling/2.png";
  });
});