<div class="page-actions">
  <a href="/member/events/my-events" class="btn btn-outline-primary"><i class="bi bi-list-check"></i> My Events</a>
  <a href="/member/events/create" class="btn btn-primary"><i class="bi bi-plus-circle-fill"></i> Create Event</a>
</div>

<div class="type-filter-pills">
  <a href="/member/events" class="pill <%= !type ? 'active' : '' %>">All</a>
  <% ['in-person','virtual','hybrid','webinar','networking','workshop'].forEach(t => { %>
  <a href="/member/events?type=<%= t %>" class="pill <%= type === t ? 'active' : '' %>"><%= t.replace('-',' ') %></a>
  <% }) %>
</div>

<% if (events && events.length) { %>
<div class="events-member-grid">
  <% events.forEach(e => { %>
  <div class="event-member-card">
    <% if (e.banner_image) { %><div class="emc-banner" style="background-image:url('<%= e.banner_image %>')">
    <% } else { %><div class="emc-banner emc-banner-default">
    <% } %>
      <span class="emc-type-badge"><%= e.event_type %></span>
      <% if (e.is_free) { %><span class="emc-free-badge">Free</span><% } else { %><span class="emc-price-badge">$<%= parseFloat(e.ticket_price).toFixed(2) %></span><% } %>
    </div>
    <div class="emc-body">
      <div class="emc-date"><i class="bi bi-calendar3"></i> <%= new Date(e.start_date).toLocaleDateString('en-US', {weekday:'short', month:'short', day:'numeric', year:'numeric'}) %></div>
      <h3><a href="/member/events/<%= e.id %>"><%= e.title %></a></h3>
      <% if (e.location) { %><p class="emc-location"><i class="bi bi-geo-alt-fill"></i> <%= e.location %></p><% } %>
      <% if (e.org_name) { %><p class="emc-host"><i class="bi bi-building"></i> <%= e.org_name %></p><% } %>
      <div class="emc-stats">
        <span><i class="bi bi-people-fill"></i> <%= e.reg_count || 0 %> registered</span>
        <% if (e.capacity) { %><span><i class="bi bi-person-fill"></i> <%= e.capacity %> cap</span><% } %>
      </div>
    </div>
    <div class="emc-footer">
      <% if (e.is_registered) { %><span class="btn btn-success btn-sm btn-block"><i class="bi bi-check-circle-fill"></i> Registered</span>
      <% } else { %><button class="btn btn-primary btn-sm btn-block register-btn" data-id="<%= e.id %>" data-paid="<%= !e.is_free %>"><% if(!e.is_free) { %>Buy Ticket<% } else { %>Register Free<% } %></button><% } %>
    </div>
  </div>
  <% }) %>
</div>
<% } else { %>
<div class="empty-state"><i class="bi bi-calendar-x"></i><h3>No upcoming events</h3><p>Be the first to create a chamber event!</p><a href="/member/events/create" class="btn btn-primary">Create Event</a></div>
<% } %>

<div id="regModal" class="modal" style="display:none">
  <div class="modal-backdrop" onclick="closeModal()"></div>
  <div class="modal-content modal-sm"><div class="modal-header"><h3>Confirm Registration</h3><button onclick="closeModal()" class="modal-close"><i class="bi bi-x-lg"></i></button></div><div class="modal-body"><p>Register for this event?</p><div class="modal-actions"><button class="btn btn-primary" id="confirmReg">Confirm Registration</button><button class="btn btn-ghost" onclick="closeModal()">Cancel</button></div></div></div>
</div>

<script>
let currentEventId = null;
document.querySelectorAll('.register-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    currentEventId = btn.dataset.id;
    document.getElementById('regModal').style.display = 'flex';
  });
});
document.getElementById('confirmReg').addEventListener('click', async () => {
  const res = await fetch(`/member/events/${currentEventId}/register`, { method: 'POST', headers: {'Content-Type': 'application/json'} });
  const data = await res.json();
  closeModal();
  showToast(data.success ? data.message : data.error, data.success ? 'success' : 'error');
  if (data.success) setTimeout(() => location.reload(), 1500);
});
function closeModal() { document.getElementById('regModal').style.display = 'none'; }
</script>
