Risk Event 2022

<h1 class='my-heading'>Just some HTML</h1><?php echo 'The year is ' . date('Y'); ?>

document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".risk-loop-container");
  if (!container) return;

  const kaarten = Array.from(container.querySelectorAll(".risk-card"));
  const rijen = {};

  // Sorteer alle kaarten eerst op starttijd
  kaarten.sort((a, b) => {
    const tijdA = a.getAttribute("risk-starttijd") || "";
    const tijdB = b.getAttribute("risk-starttijd") || "";
    return tijdA.localeCompare(tijdB);
  });

  // Verdeel kaarten per tijdslot
  kaarten.forEach((kaart) => {
    const tijd = (kaart.getAttribute("risk-starttijd") || "").trim();

    if (!rijen[tijd]) {
      const rij = document.createElement("div");
      rij.classList.add("risk-row");
      rij.setAttribute("data-starttijd", tijd);
      container.appendChild(rij);
      rijen[tijd] = rij;
    }

    rijen[tijd].appendChild(kaart);
  });

  // Sorteer binnen elke rij op data-podium
  Object.values(rijen).forEach((rij) => {
    const cards = Array.from(rij.querySelectorAll(".risk-card"));

    cards.sort((a, b) => {
      const pA = parseInt(a.getAttribute("data-podium")) || 999;
      const pB = parseInt(b.getAttribute("data-podium")) || 999;
      return pA - pB;
    });

    cards.forEach((kaart) => rij.appendChild(kaart));
  });
});

function sorteerEnGroepeerKaarten() {
  const container = document.querySelector(".risk-loop-container");
  if (!container) return;

  // Verwijder oude rijen (voor het opnieuw opbouwen)
  container.querySelectorAll(".risk-row").forEach((el) => el.remove());

  // Zoek alle kaarten
  const kaarten = Array.from(container.querySelectorAll(".risk-card"));
  const rijen = {};

  // Sorteer kaarten op starttijd
  kaarten.sort((a, b) => {
    const tijdA = a.getAttribute("risk-starttijd") || "";
    const tijdB = b.getAttribute("risk-starttijd") || "";
    return tijdA.localeCompare(tijdB);
  });

  // Groepeer kaarten per tijdslot
  kaarten.forEach((kaart) => {
    const tijd = (kaart.getAttribute("risk-starttijd") || "").trim();

    if (!rijen[tijd]) {
      const rij = document.createElement("div");
      rij.classList.add("risk-row");
      rij.setAttribute("data-starttijd", tijd);

      // 🔧 Dit is waar de grid toegepast moet worden:
      rij.style.display = "grid";
      rij.style.gridTemplateColumns = "repeat(auto-fit, minmax(220px, 1fr))";
      rij.style.gap = "1rem";

      container.appendChild(rij);
      rijen[tijd] = rij;
    }

    rijen[tijd].appendChild(kaart);
  });

  // Sorteer binnen elke rij op podium-nummer
  Object.values(rijen).forEach((rij) => {
    const cards = Array.from(rij.querySelectorAll(".risk-card"));

    cards.sort((a, b) => {
      const pA = parseInt(a.getAttribute("data-podium")) || 999;
      const pB = parseInt(b.getAttribute("data-podium")) || 999;
      return pA - pB;
    });

    cards.forEach((kaart) => rij.appendChild(kaart));
  });
}

// Initieel en bij AJAX reload
document.addEventListener("DOMContentLoaded", sorteerEnGroepeerKaarten);
document.addEventListener("bricks/ajax/nodes_added", sorteerEnGroepeerKaarten);

function sorteerEnGroepeerKaarten() {
  const container = document.querySelector(".risk-loop-container");
  if (!container) return;

  // Verwijder oude gegroepeerde rijen
  container.querySelectorAll(".risk-row").forEach((el) => el.remove());

  // Verzamel en sorteer alle kaarten op starttijd
  const kaarten = Array.from(container.querySelectorAll(".risk-card"));
  const rijen = {};

  kaarten.sort((a, b) => {
    const tijdA = a.getAttribute("risk-starttijd") || "";
    const tijdB = b.getAttribute("risk-starttijd") || "";
    return tijdA.localeCompare(tijdB);
  });

  // Groepeer kaarten per tijdslot
  kaarten.forEach((kaart) => {
    const tijd = (kaart.getAttribute("risk-starttijd") || "").trim();

    if (!rijen[tijd]) {
      const rij = document.createElement("div");
      rij.classList.add("risk-row");
      rij.setAttribute("data-starttijd", tijd);
      rij.style.display = "grid";
      rij.style.gridTemplateColumns = "repeat(auto-fit, minmax(220px, 1fr))";
      rij.style.gap = "1rem";

      container.appendChild(rij);
      rijen[tijd] = rij;
    }

    rijen[tijd].appendChild(kaart);
  });

  // Sorteer binnen elk tijdslot op podium
  Object.values(rijen).forEach((rij) => {
    const cards = Array.from(rij.querySelectorAll(".risk-card"));
    cards.sort((a, b) => {
      const pA = parseInt(a.getAttribute("data-podium")) || 999;
      const pB = parseInt(b.getAttribute("data-podium")) || 999;
      return pA - pB;
    });
    cards.forEach((kaart) => rij.appendChild(kaart));
  });
}

function initKaarten() {
  sorteerEnGroepeerKaarten();

  const container = document.querySelector(".risk-loop-container");

  // Herinitialiseer Bricks Extras Lightbox
  if (typeof doExtrasLightbox === "function" && container) {
    doExtrasLightbox(container, true);
    console.info("✅ Bricks Extras Lightbox opnieuw geïnitialiseerd");
  } else {
    console.warn("⚠️ Bricks Extras Lightbox functie niet beschikbaar of container niet gevonden");
  }
}

// Init bij paginalaad
document.addEventListener("DOMContentLoaded", initKaarten);

// Init na AJAX/facet filtering
document.addEventListener("bricks/ajax/nodes_added", initKaarten);