papa-kind-treff.info/partials/landing/search/search.php

<?php
declare(strict_types=1);

$app = app();
$pdo = $app->pdo();
$q = trim((string)($_GET['q'] ?? ''));
$loc = trim((string)($_GET['loc'] ?? ''));
$radius = isset($_GET['radius']) ? (float)$_GET['radius'] : 5.0;
$radius = ($radius > 0) ? $radius : 5.0;
$lat = isset($_GET['lat']) && $_GET['lat'] !== '' ? (float)$_GET['lat'] : null;
$lng = isset($_GET['lng']) && $_GET['lng'] !== '' ? (float)$_GET['lng'] : null;
$results = [];

function geocode_loc(string $loc): array
{
    $url = 'https://nominatim.openstreetmap.org/search?' . http_build_query([
        'format' => 'jsonv2',
        'limit' => 1,
        'q' => $loc,
    ]);
    $ctx = stream_context_create([
        'http' => [
            'method' => 'GET',
            'header' => "User-Agent: papa-kind-treff/1.0\r\nAccept-Language: de\r\n",
            'timeout' => 6,
        ],
    ]);
    $resp = @file_get_contents($url, false, $ctx);
    if ($resp === false) return [null, null];
    $json = json_decode($resp, true);
    if (!is_array($json) || empty($json[0]['lat']) || empty($json[0]['lon'])) return [null, null];
    return [round((float)$json[0]['lat'], 6), round((float)$json[0]['lon'], 6)];
}

if ($pdo && ($q !== '' || $loc !== '' || ($lat !== null && $lng !== null))) {
    if ($lat === null && $lng === null && $loc !== '') {
        [$lat, $lng] = geocode_loc($loc);
    }
    $geo = ($lat !== null && $lng !== null) ? ['lat' => $lat, 'lng' => $lng, 'radius' => $radius] : null;
    $search = new \App\Search($pdo);
    $results = $search->searchEvents($q, 100, $geo);
}
?>
<main class="section">
  <div class="container">
    <p class="eyebrow">Suche</p>
    <h1>Events finden</h1>
    <form method="get" class="form-grid single" style="margin: 14px 0; gap:12px; align-items:end;" id="searchForm">
      <div class="stack gap-6">
        <label class="label" for="q">Suchbegriff (Titel, Ort, Beschreibung)</label>
        <input id="q" name="q" class="input" value="<?= htmlspecialchars($q, ENT_QUOTES) ?>" placeholder="z. B. Berlin oder Spielplatz">
      </div>
      <div class="stack gap-6">
        <label class="label" for="loc">Ort oder PLZ (optional)</label>
        <div class="flex gap-8" style="align-items:center;">
          <input id="loc" name="loc" class="input" value="<?= htmlspecialchars($loc, ENT_QUOTES) ?>" placeholder="z. B. 10437 oder Berlin" style="flex:1;">
          <button class="btn ghost" type="button" id="btnGeo">📍</button>
          <button class="btn ghost" type="button" id="btnMap">Karte</button>
        </div>
        <input type="hidden" id="lat" name="lat" value="<?= $lat !== null ? htmlspecialchars((string)$lat, ENT_QUOTES) : '' ?>">
        <input type="hidden" id="lng" name="lng" value="<?= $lng !== null ? htmlspecialchars((string)$lng, ENT_QUOTES) : '' ?>">
      </div>
      <div class="stack gap-6" id="radiusWrap">
        <label class="label" for="radius">Umkreis (km)</label>
        <select id="radius" name="radius" class="select">
          <?php foreach ([1,2,5,10,15,25] as $r): ?>
            <option value="<?= $r ?>" <?= ((float)$radius === (float)$r) ? 'selected' : '' ?>><?= $r ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <button class="btn" type="submit">Suchen</button>
    </form>
    <div id="mapWrapper" class="map-wrapper" hidden>
      <div class="stack gap-6">
        <p class="muted small">Karte anklicken, um Standort zu wählen. Ziehen/Zoomen möglich.</p>
        <div id="mapContainer" class="map-container" style="height: 320px; border:1px solid #e5e7eb; border-radius:8px;"></div>
      </div>
    </div>

    <?php if ($q === '' && $loc === '' && $lat === null && $lng === null): ?>
      <p class="muted">Bitte gib einen Suchbegriff oder einen Ort ein.</p>
    <?php else: ?>
      <h3 style="margin-top: 16px;"><?= count($results) ?> Ergebnis(se)<?= $q !== '' ? ' für „' . htmlspecialchars($q, ENT_QUOTES) . '“' : '' ?></h3>
      <?php if (!$results): ?>
        <p class="muted">Keine passenden Events gefunden.</p>
      <?php else: ?>
        <div class="stack gap-12" style="margin-top: 12px;">
          <?php foreach ($results as $ev): ?>
            <article class="card">
              <div class="event__body">
                <div class="event__meta">
                  <span><?= htmlspecialchars($ev['starts_at'], ENT_QUOTES) ?></span>
                  <span>📍 <?= htmlspecialchars($ev['region'] ?: $ev['city'], ENT_QUOTES) ?></span>
                  <span><?= $ev['visibility'] === 'public' ? 'Öffentlich' : 'Mitglieder' ?></span>
                  <span class="badge"><?= ((int)$ev['allow_kids'] === 1) ? 'Mit Kindern' : 'Ohne Kinder' ?></span>
                  <?php if (isset($ev['distance_km'])): ?>
                    <span class="badge"><?= number_format((float)$ev['distance_km'], 1) ?> km</span>
                  <?php endif; ?>
                </div>
                <h3><?= htmlspecialchars($ev['title'], ENT_QUOTES) ?></h3>
                <p class="muted"><?= htmlspecialchars($ev['teaser_public'], ENT_QUOTES) ?></p>
                <?php if (!empty($ev['location_label'])): ?>
                  <p class="muted small"><strong>Ort:</strong> <?= htmlspecialchars($ev['location_label'], ENT_QUOTES) ?></p>
                <?php endif; ?>
                <details>
                  <summary style="cursor:pointer;">Details anzeigen</summary>
                  <p><?= nl2br(htmlspecialchars($ev['description'], ENT_QUOTES)) ?></p>
                </details>
              </div>
            </article>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    <?php endif; ?>
  </div>
</main>
<script>
(function(){
  const body = document.body;
  const locInput = document.getElementById('loc');
  const latInput = document.getElementById('lat');
  const lngInput = document.getElementById('lng');
  const radiusWrap = document.getElementById('radiusWrap');
  const radiusSelect = document.getElementById('radius');
  const btnGeo = document.getElementById('btnGeo');
  const btnMap = document.getElementById('btnMap');
  const mapWrapper = document.getElementById('mapWrapper');
  const mapContainer = document.getElementById('mapContainer');
  const isLoggedIn = body?.dataset.auth === '1';
  const profileLocationPreference = body?.dataset.locationPreference || 'prompt';
  const locationStorageKey = 'pkt_user_location';
  const locationSessionStorageKey = 'pkt_user_location_session';
  let map, marker;

  function effectiveLocationPreference() {
    if (!isLoggedIn) {
      try {
        const guestPreference = window.localStorage.getItem('pkt_location_preference_guest');
        if (guestPreference && ['disabled', 'prompt', 'enabled'].includes(guestPreference)) {
          return guestPreference;
        }
      } catch (err) {
        // ignore
      }
    }
    return profileLocationPreference;
  }

  function getStoredLocation() {
    const candidates = [];
    try {
      const sessionValue = window.sessionStorage.getItem(locationSessionStorageKey);
      if (sessionValue) candidates.push(sessionValue);
    } catch (err) {
      // ignore
    }
    try {
      const localValue = window.localStorage.getItem(locationStorageKey);
      if (localValue) candidates.push(localValue);
    } catch (err) {
      // ignore
    }

    for (const value of candidates) {
      try {
        const parsed = JSON.parse(value);
        if (parsed && Number.isFinite(parsed.lat) && Number.isFinite(parsed.lng)) {
          return parsed;
        }
      } catch (err) {
        // ignore
      }
    }

    return null;
  }

  function applyLocation(lat, lng, label = 'Mein Standort') {
    latInput.value = Number(lat).toFixed(6);
    lngInput.value = Number(lng).toFixed(6);
    if (locInput && !locInput.value.trim()) {
      locInput.value = label;
    }
    toggleRadius(true);
  }

  function toggleRadius(show) {
    if (!radiusWrap) return;
    radiusWrap.hidden = !show;
    if (radiusSelect) radiusSelect.disabled = !show;
  }

  function clearGeo() {
    if (latInput) latInput.value = '';
    if (lngInput) lngInput.value = '';
    toggleRadius(false);
  }

  function ensureLeaflet(cb) {
    if (!window.PKTConsent || !window.PKTConsent.has('external_services')) {
      alert('Für Karten- und Standortfunktionen bitte zuerst die externen Dienste in den Cookie-Einstellungen erlauben.');
      window.PKTConsent?.openPreferences?.();
      return;
    }
    if (window.L) { cb(); return; }
    const css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    document.head.appendChild(css);
    const s = document.createElement('script');
    s.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
    s.onload = cb;
    document.body.appendChild(s);
  }

  function setMarker(latlng) {
    if (!map) return;
    if (marker) {
      marker.setLatLng(latlng);
    } else {
      marker = L.marker(latlng, { draggable:true }).addTo(map);
      marker.on('dragend', () => {
        const ll = marker.getLatLng();
        latInput.value = ll.lat.toFixed(6);
        lngInput.value = ll.lng.toFixed(6);
      });
    }
    latInput.value = latlng.lat.toFixed(6);
    lngInput.value = latlng.lng.toFixed(6);
    map.setView(latlng, 13);
    toggleRadius(true);
  }

  function initMap() {
    if (map) { map.invalidateSize(); return; }
    map = L.map(mapContainer).setView([51.1657, 10.4515], 5);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
    map.on('click', (e) => setMarker(e.latlng));
    const lat = parseFloat(latInput.value);
    const lng = parseFloat(lngInput.value);
    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
      setMarker({ lat, lng });
    }
  }

  locInput?.addEventListener('input', () => {
    if (!locInput.value.trim()) {
      clearGeo();
    }
  });

  btnGeo?.addEventListener('click', () => {
    if (!window.PKTConsent || !window.PKTConsent.has('external_services')) {
      alert('Für Standortfunktionen bitte zuerst die externen Dienste in den Cookie-Einstellungen erlauben.');
      window.PKTConsent?.openPreferences?.();
      return;
    }

    const preference = effectiveLocationPreference();
    if (preference === 'disabled') {
      alert('Die Standortverwendung ist in deinem Profil deaktiviert.');
      return;
    }

    const storedLocation = getStoredLocation();
    if (preference === 'enabled' && storedLocation) {
      applyLocation(storedLocation.lat, storedLocation.lng, storedLocation.label || 'Mein Standort');
      return;
    }

    if (!navigator.geolocation) {
      alert('Geolocation wird nicht unterstützt.');
      return;
    }
    navigator.geolocation.getCurrentPosition((pos) => {
      applyLocation(pos.coords.latitude, pos.coords.longitude, 'Mein Standort');
    }, () => alert('Standort konnte nicht ermittelt werden.'));
  });

  btnMap?.addEventListener('click', () => {
    if (!mapWrapper) return;
    mapWrapper.hidden = !mapWrapper.hidden;
    if (!mapWrapper.hidden) {
      ensureLeaflet(() => setTimeout(() => initMap(), 50));
    }
  });

  // Init radius visibility based on current state
  if (!latInput?.value || !lngInput?.value) {
    toggleRadius(false);
  }
})();
</script>