/**
 * @file recration.js
 * @brief JavaScript pro interaktivní funkce na stránce rekreační pobyty (recreation.php).
 *
 * Tento skript:
 *  - Přidává interaktivitu pro přepínání obsahu v sekci "Aréal a okolí" na stránce recreation.php.
 * - Umožňuje přepínání mezi dvěma kategoriemi (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 "Procházky" při načtení stránky.
 */

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

  function selectHeading(selectedHeading, showElement, hideElement) {
    // Odebere třídu selected-heading ze všech nadpisů
    exerciseHeading.classList.remove("selected-heading");
    walksHeading.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";
    hideElement.style.display = "none";
  }

  // Nastaví výchozí obsah "Procházky"
  selectHeading(exerciseHeading, optionExercise, optionWalks);

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

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