Fortbildungsplattform

<script> (function () {

const listeEl  = document.getElementById('fb-liste');
const sucheEl  = document.getElementById('fb-suche');
const katEl    = document.getElementById('fb-kategorie');
const sortEl   = document.getElementById('fb-sort');
const resetEl  = document.getElementById('fb-reset');
const source   = listeEl.getAttribute('data-fb-source');

let alleFortbildungen = [];

function escapeHtml(s) {
  if (s == null) return '';
  return String(s)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function formatDatum(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  if (isNaN(d.getTime())) return iso;
  return d.toLocaleDateString('de-DE', { weekday: 'short', year: 'numeric', month: 'long', day: '2-digit' });
}

function render() {
  const suche = (sucheEl.value || '').toLowerCase().trim();
  const kat   = katEl.value;
  let liste   = alleFortbildungen.filter(fb => {
    if (kat && fb.kategorie !== kat) return false;
    if (suche) {
      const hay = (fb.titel + ' ' + (fb.beschreibung || '') + ' ' + (fb.referent || '')).toLowerCase();
      if (!hay.includes(suche)) return false;
    }
    return true;
  });

  const sortKey = sortEl.value;
  liste.sort((a, b) => {
    if (sortKey === 'titel_asc')     return (a.titel || '').localeCompare(b.titel || '', 'de');
    if (sortKey === 'plaetze_desc')  return (b.freie_plaetze | 0) - (a.freie_plaetze | 0);
    if (sortKey === 'datum_desc')    return (b.datum || '').localeCompare(a.datum || '');
    return (a.datum || '').localeCompare(b.datum || '');
  });

  if (liste.length === 0) {
    listeEl.innerHTML = '<div style="background: #fff9e6; border-left: 5px solid #ffc107; padding: 1.25rem; border-radius: 6px;"><strong>Keine Fortbildungen gefunden.</strong><br>Versuchen Sie eine andere Suche oder schauen Sie später wieder vorbei.</div>';
    return;
  }

  const html = liste.map(fb => {
    const ausgebucht = (fb.freie_plaetze | 0) <= 0;
    const statusFarbe = ausgebucht ? '#E42927' : '#28a745';
    const statusText  = ausgebucht ? 'Ausgebucht' : (fb.freie_plaetze | 0) + ' Plätze frei';
    const anmeldeLink = ausgebucht
      ? '<span style="background: #adb5bd; color: white; padding: 0.5rem 1rem; border-radius: 6px; display: inline-block; font-size: 0.9rem;">Nicht verfügbar</span>'
      : '<a class="fb-anmelden" data-id="' + escapeHtml(fb.id) + '" href="/doku.php?id=fortbildungsplattform:anmeldung_fortbildung&fortbildung_id=' + encodeURIComponent(fb.id) + '" style="background: #3974B9; color: white !important; padding: 0.5rem 1.1rem; border-radius: 6px; text-decoration: none !important; font-weight: 600; display: inline-block;">Jetzt anmelden →</a>';

    return ''
      + '<div class="fb-card" style="background: white; border: 2px solid #e9ecef; border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1rem 0; transition: all 0.25s ease; border-left: 6px solid #3974B9;" onmouseover="this.style.borderLeftColor=\'#E42927\'; this.style.boxShadow=\'0 6px 18px rgba(57,116,185,0.12)\';" onmouseout="this.style.borderLeftColor=\'#3974B9\'; this.style.boxShadow=\'none\';">'
      +   '<div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 1rem;">'
      +     '<div style="flex: 1 1 360px;">'
      +       '<div style="margin-bottom: 0.4rem;"><span style="background: #e8f1fa; color: #3974B9; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600;">' + escapeHtml(fb.kategorie || 'Allgemein') + '</span></div>'
      +       '<h3 style="margin: 0.25rem 0 0.5rem !important; border: none !important; padding: 0 !important; color: #2c3e50 !important; font-size: 1.35rem !important;">' + escapeHtml(fb.titel) + '</h3>'
      +       '<div style="color: #6c757d; font-size: 0.95rem; line-height: 1.5;">'
      +         '<div>📅 <strong>' + escapeHtml(formatDatum(fb.datum)) + '</strong>'
      +           (fb.uhrzeit ? ' &middot; 🕒 ' + escapeHtml(fb.uhrzeit) + ' Uhr' : '')
      +           (fb.ort     ? ' &middot; 📍 ' + escapeHtml(fb.ort) : '')
      +         '</div>'
      +         (fb.referent ? '<div>👤 ' + escapeHtml(fb.referent) + '</div>' : '')
      +         (fb.dauer    ? '<div>⏱ ' + escapeHtml(fb.dauer) + '</div>' : '')
      +       '</div>'
      +     '</div>'
      +     '<div style="text-align: right; min-width: 160px;">'
      +       '<div style="background: ' + statusFarbe + '; color: white; padding: 0.35rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; display: inline-block; margin-bottom: 0.75rem;">' + statusText + '</div><br>'
      +       anmeldeLink
      +     '</div>'
      +   '</div>'
      + '</div>';
  }).join('');

  listeEl.innerHTML = html;
}

function fuelleKategorien() {
  const kats = Array.from(new Set(alleFortbildungen.map(fb => fb.kategorie).filter(Boolean))).sort((a, b) => a.localeCompare(b, 'de'));
  katEl.innerHTML = '<option value="">Alle</option>' + kats.map(k => '<option value="' + escapeHtml(k) + '">' + escapeHtml(k) + '</option>').join('');
}

fetch(source, { headers: { 'Accept': 'application/json' } })
  .then(r => r.json())
  .then(data => {
    alleFortbildungen = Array.isArray(data) ? data : [];
    fuelleKategorien();
    render();
  })
  .catch(err => {
    listeEl.innerHTML = '<div style="background: #fdeaea; border-left: 5px solid #E42927; padding: 1.25rem; border-radius: 6px;">⚠️ Fortbildungen konnten nicht geladen werden. Bitte versuchen Sie es später erneut.</div>';
    console.error('Fortbildung-Load-Fehler:', err);
  });

[sucheEl, katEl, sortEl].forEach(el => el.addEventListener('input', render));
resetEl.addEventListener('click', function () {
  sucheEl.value = '';
  katEl.value   = '';
  sortEl.value  = 'datum_asc';
  render();
});

})(); </script>

Wählen Sie oben eine Fortbildung aus und klicken Sie auf „Jetzt anmelden". Sie werden dann zur Anmeldeseite weitergeleitet.

Falls Sie keine passende Fortbildung finden: Auf der Seite „Verwaltung & Übersicht" finden Administrator:innen weitere Werkzeuge.

• Die Anmeldung ist verbindlich – bei Verhinderung bitte rechtzeitig selbst über das Verwaltungsformular abmelden
• Bei technischen Problemen wenden Sie sich an die IT-Hotline
• Sie erhalten nach erfolgreicher Anmeldung eine Bestätigungs-E-Mail
• Die Teilnehmerlisten werden ausschließlich zu organisatorischen Zwecken genutzt

Bei Fragen rund um das Fortbildungsangebot:

• E-Mail: fortbildung@bbz-rd-eck.de
• Telefon: 04331 / 123-456