papa-kind-treff.info/public/assets/js/app.js

document.addEventListener('DOMContentLoaded', () => {
  const body = document.body;
  const isLoggedIn = body.dataset.auth === '1';
  const childGender = body.dataset.childGender || '';
  const header = document.querySelector('.site-header');
  const headerSentinel = document.getElementById('headerSentinel');

  // Logo-Logik
  const pickLogo = (gender) => {
    if (gender === 'female') return 'logo_female.png';
    if (gender === 'male') return 'logo_male.png';
    return Math.random() < 0.5 ? 'logo_female.png' : 'logo_male.png';
  };
  const chosenLogo = pickLogo(childGender);
  document.querySelectorAll('[data-logo-img]').forEach(img => {
    img.src = `/assets/bilder/${chosenLogo}`;
  });

  // Header shrink via IntersectionObserver (no flicker around threshold)
  if (header && headerSentinel && 'IntersectionObserver' in window) {
    const observer = new IntersectionObserver(([entry]) => {
      header.classList.toggle('is-scrolled', !entry.isIntersecting);
    }, {
      rootMargin: '-1px 0px 0px 0px',
      threshold: 0,
    });
    observer.observe(headerSentinel);
  } else if (header) {
    // Fallback with simple threshold
    const limit = 120;
    const onScroll = () => header.classList.toggle('is-scrolled', window.scrollY > limit);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
  }

  // Mobile Menü
  const mobileMenu = document.getElementById('mobileMenu');
  document.querySelectorAll('.menu-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      mobileMenu?.classList.toggle('open');
    });
  });

  // Scroll zu Events
  const scrollBtn = document.getElementById('scrollToEvents');
  if (scrollBtn) {
    scrollBtn.addEventListener('click', () => {
      document.getElementById('events')?.scrollIntoView({ behavior: 'smooth' });
    });
  }

  // Events from backend (injected on page); fallback to empty
  const events = Array.isArray(window.__events) ? window.__events : [];

  const el = {
    sliderTrack: document.getElementById('eventSlider'),
    sliderViewport: document.querySelector('.slider__viewport'),
    sliderPrev: document.querySelector('[data-slider-prev]'),
    sliderNext: document.querySelector('[data-slider-next]'),
    modal: document.getElementById('eventModal'),
    modalBody: document.getElementById('eventModalBody'),
    modalTitle: document.getElementById('eventModalTitle'),
    quickForm: document.getElementById('quickSearchForm'),
    quickLoc: document.getElementById('qsLoc'),
    quickQuery: document.getElementById('qsQuery'),
    quickLat: document.getElementById('qsLat'),
    quickLng: document.getElementById('qsLng'),
    quickGeo: document.getElementById('quickGeo'),
  };

  const fmtDate = (iso) => {
    const d = new Date(iso);
    return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
  };

  const smallTag = (label) => `<span class="badge">${label}</span>`;

  const renderCard = (item) => {
    const guest = !isLoggedIn;
    const kids = item.allowKids ? 'Mit Kindern' : 'Ohne Kinder';
    return `
    <article class="card event-card-small">
      <div class="muted small">${fmtDate(item.startsAt)}</div>
      <h3>${item.title}</h3>
      <p class="muted">${item.teaser}</p>
      <div class="muted small">📍 ${item.city || item.region || ''}</div>
      <div class="event__tags">${smallTag(kids)} ${item.visibility === 'public' ? smallTag('Öffentlich') : smallTag('Mitglieder')}</div>
      <div class="flex gap-8" style="margin-top:8px;">
        <button class="btn ghost" data-event-detail="${item.id}">Details</button>
        ${guest ? '' : '<button class="btn">Teilnehmen</button>'}
      </div>
    </article>`;
  };

  const renderSlider = () => {
    if (!el.sliderTrack) return;
    if (!events.length) {
      el.sliderTrack.innerHTML = '<p class="muted">Keine Events vorhanden.</p>';
      return;
    }
    el.sliderTrack.innerHTML = events.slice(0, 10).map(renderCard).join('');
    el.sliderTrack.querySelectorAll('[data-event-detail]').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = parseInt(btn.getAttribute('data-event-detail'), 10);
        const ev = events.find(e => e.id === id);
        if (!ev || !el.modal || !el.modalBody || !el.modalTitle) return;
        el.modalTitle.textContent = ev.title;
        el.modalBody.innerHTML = `
          <div class="muted small">${fmtDate(ev.startsAt)} · ${ev.region || ev.city || ''}</div>
          <p class="muted">${ev.teaser}</p>
          <p>${ev.description}</p>
          ${ev.locationLabel ? `<p><strong>Ort:</strong> ${ev.locationLabel}</p>` : ''}
          <p><strong>Kinder:</strong> ${ev.allowKids ? 'Mit Kindern' : 'Ohne Kinder'}</p>
          <p><strong>Sichtbarkeit:</strong> ${ev.visibility === 'public' ? 'Öffentlich' : 'Nur Mitglieder'}</p>
        `;
        el.modal.classList.add('open');
      });
    });
  };

  const scrollSlider = (dir) => {
    if (!el.sliderViewport) return;
    const amount = dir === 'next' ? 320 : -320;
    el.sliderViewport.scrollBy({ left: amount, behavior: 'smooth' });
  };

  el.sliderPrev?.addEventListener('click', () => scrollSlider('prev'));
  el.sliderNext?.addEventListener('click', () => scrollSlider('next'));

  // Quick search with geocoding
  const geocode = async (query) => {
    const url = 'https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&q=' + encodeURIComponent(query);
    const res = await fetch(url, { headers: { 'Accept-Language': 'de', 'User-Agent': 'papa-kind-treff/1.0' } });
    const data = await res.json();
    if (Array.isArray(data) && data[0]) {
      return { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) };
    }
    return null;
  };

  el.quickGeo?.addEventListener('click', () => {
    if (!navigator.geolocation) {
      alert('Geolocation wird nicht unterstützt.');
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        if (el.quickLat && el.quickLng) {
          el.quickLat.value = pos.coords.latitude.toFixed(6);
          el.quickLng.value = pos.coords.longitude.toFixed(6);
          if (el.quickLoc) el.quickLoc.value = 'Mein Standort';
        }
      },
      () => alert('Standort konnte nicht ermittelt werden.')
    );
  });

  if (el.quickForm) {
    el.quickForm.addEventListener('submit', async (e) => {
      if (!el.quickLoc || !el.quickLat || !el.quickLng) return;
      const hasCoords = el.quickLat.value && el.quickLng.value;
      const locVal = (el.quickLoc.value || '').trim();
      if (hasCoords || locVal === '') return;
      e.preventDefault();
      try {
        const coords = await geocode(locVal);
        if (coords) {
          el.quickLat.value = coords.lat.toFixed(6);
          el.quickLng.value = coords.lng.toFixed(6);
        }
      } catch (err) {
        // ignore
      } finally {
        el.quickForm.submit();
      }
    });
  }

  // Close modal
  document.querySelectorAll('[data-event-modal-close]').forEach(btn => {
    btn.addEventListener('click', () => el.modal?.classList.remove('open'));
  });
  el.modal?.addEventListener('click', (e) => { if (e.target === el.modal) el.modal.classList.remove('open'); });

  renderSlider();
});