<?php declare(strict_types=1);
$page_title       = 'Events | Big Breath';
$page_description = 'Upcoming Big Breath events with Big Joe Fauria. Workshops, retreats, keynotes, and online sessions across the United States and abroad.';
$page_canonical   = 'https://bigbreath.co/events/';
$db = new PDO('sqlite:' . __DIR__ . '/../data/events.sqlite');
$events = $db->query("SELECT * FROM events WHERE published=1 ORDER BY starts_at ASC")->fetchAll(PDO::FETCH_ASSOC);
require __DIR__ . '/../components/_header.php';
?>

<section class="bb-section" style="padding-top:calc(var(--pad-section) + 4rem);">
  <div class="bb-container">
    <span class="bb-label bb-reveal">Events</span>
    <hr class="bb-rule">
    <h1 class="bb-display bb-reveal" style="max-width:760px;margin-bottom:var(--s-6);">Join Joe. Upcoming events around the world.</h1>
    <p class="bb-body bb-reveal" style="max-width:560px;margin-bottom:var(--s-16);">Every gathering is the same method, sharpened to the room. Group classes, keynotes, retreats, and online sessions. Seats are limited on purpose.</p>

    <div class="bb-events-grid">
      <?php foreach ($events as $ev): $dt = strtotime($ev['starts_at']); ?>
      <article class="bb-event-card bb-reveal" data-event-id="<?= (int)$ev['id'] ?>">
        <div class="bb-event-card__media" style="background-image:url('<?= htmlspecialchars($ev['hero_image']) ?>');"></div>
        <div class="bb-event-card__body">
          <span class="bb-label"><?= htmlspecialchars($ev['format']) ?></span>
          <h3><?= htmlspecialchars($ev['title']) ?></h3>
          <p class="bb-event-card__meta">
            <?= date('M j, Y', $dt) ?> &middot; <?= date('g:i A', $dt) ?><br>
            <?= htmlspecialchars($ev['location']) ?>, <?= htmlspecialchars($ev['city']) ?>
          </p>
          <p class="bb-event-card__blurb"><?= htmlspecialchars($ev['blurb']) ?></p>
          <a href="/events/<?= htmlspecialchars($ev['slug']) ?>" class="bb-event-card__more">Details</a>
        </div>
      </article>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<div class="bb-event-modal" id="bb-event-modal" hidden>
  <div class="bb-event-modal__backdrop" data-close-modal></div>
  <div class="bb-event-modal__panel" role="dialog" aria-modal="true" aria-labelledby="bb-event-modal-title">
    <button type="button" class="bb-event-modal__close" data-close-modal aria-label="Close">&times;</button>
    <div class="bb-event-modal__body"></div>
  </div>
</div>

<script>
(function(){
  var data = <?= json_encode(array_map(function($e){
    return ['id'=>(int)$e['id'],'title'=>$e['title'],'starts_at'=>$e['starts_at'],'location'=>$e['location'],'city'=>$e['city'],'format'=>$e['format'],'blurb'=>$e['blurb'],'cta_label'=>$e['cta_label'],'cta_url'=>$e['cta_url'],'hero_image'=>$e['hero_image']];
  }, $events), JSON_UNESCAPED_SLASHES) ?>;
  var modal = document.getElementById('bb-event-modal');
  var body = modal.querySelector('.bb-event-modal__body');
  function fmt(s){ var d = new Date(s.replace(' ','T')); return d.toLocaleString(undefined,{weekday:'long',month:'long',day:'numeric',year:'numeric',hour:'numeric',minute:'2-digit'}); }
  document.querySelectorAll('[data-open-event]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = +btn.getAttribute('data-open-event');
      var ev = data.find(function(x){return x.id===id;});
      if(!ev) return;
      body.innerHTML =
        '<div class="bb-event-modal__hero" style="background-image:url(\''+ev.hero_image+'\');"></div>'+
        '<span class="bb-label">'+ev.format+'</span>'+
        '<h2 id="bb-event-modal-title">'+ev.title+'</h2>'+
        '<p class="bb-event-modal__meta">'+fmt(ev.starts_at)+'<br>'+ev.location+', '+ev.city+'</p>'+
        '<p class="bb-event-modal__blurb">'+ev.blurb+'</p>'+
        '<a href="'+ev.cta_url+'" class="bb-btn">'+ev.cta_label+'</a>';
      modal.hidden = false;
      document.body.style.overflow = 'hidden';
    });
  });
  modal.querySelectorAll('[data-close-modal]').forEach(function(el){
    el.addEventListener('click', function(){ modal.hidden = true; document.body.style.overflow=''; });
  });
  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !modal.hidden){ modal.hidden = true; document.body.style.overflow=''; } });
})();
</script>

<?php require __DIR__ . '/../components/_footer.php'; ?>
