<?php
$mobileTitle = 'Members';
require_once __DIR__ . '/../includes/functions.php';
requireLogin();
$db      = getDB();
$members = $db->query("
    SELECT m.*, (SELECT COALESCE(SUM(CASE WHEN type='earn' THEN points ELSE -points END),0)
                 FROM transactions WHERE member_id=m.id) AS balance
    FROM members m WHERE m.name IS NOT NULL
    ORDER BY m.registered_at DESC LIMIT 100
")->fetchAll();
$totalCount = (int) $db->query("SELECT COUNT(*) FROM members WHERE name IS NOT NULL")->fetchColumn();
include __DIR__ . '/includes/m_header.php';
?>

<div class="m-input-group mb-3">
  <i class="bi bi-search"></i>
  <input type="search" id="memberSearch" placeholder="Search name or card…" autocomplete="off">
</div>

<div class="m-section-title">
  <?php if ($totalCount > 100): ?>
    Showing 100 of <?= number_format($totalCount) ?> members — use search to find others
  <?php else: ?>
    <?= number_format($totalCount) ?> Registered Member<?= $totalCount !== 1 ? 's' : '' ?>
  <?php endif; ?>
</div>

<div id="memberList">
<?php foreach ($members as $m): ?>
<div class="m-card mb-2 member-row" data-name="<?= strtolower(e($m['name'])) ?>" data-card="<?= strtolower(e($m['card_code'])) ?>">
  <div class="m-card-body" style="padding:.85rem 1rem">
    <div class="d-flex align-items-center gap-3">
      <div style="width:42px;height:42px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <i class="bi bi-person-fill text-primary fs-5"></i>
      </div>
      <div class="flex-grow-1 min-width-0">
        <div class="fw-semibold text-truncate"><?= e($m['name']) ?></div>
        <div class="text-muted" style="font-size:.7rem;font-family:monospace"><?= e($m['card_code']) ?></div>
        <?php if ($m['phone']): ?>
        <div class="text-muted" style="font-size:.7rem"><?= e($m['phone']) ?></div>
        <?php endif; ?>
      </div>
      <div class="text-end flex-shrink-0">
        <div class="fw-bold text-warning"><?= number_format(max(0,(int)$m['balance'])) ?></div>
        <div style="font-size:.65rem;color:#94a3b8">pts</div>
      </div>
    </div>
    <div class="d-flex gap-2 mt-2">
      <a href="purchase.php?card=<?= urlencode($m['card_code']) ?>"
         class="m-btn m-btn-success flex-grow-1" style="padding:.5rem .75rem;font-size:.82rem;border-radius:10px;min-height:38px">
        <i class="bi bi-bag-check me-1"></i>Purchase
      </a>
      <a href="redeem.php?card=<?= urlencode($m['card_code']) ?>"
         class="m-btn m-btn-warning flex-grow-1" style="padding:.5rem .75rem;font-size:.82rem;border-radius:10px;min-height:38px">
        <i class="bi bi-gift me-1"></i>Redeem
      </a>
    </div>
  </div>
</div>
<?php endforeach; ?>
<?php if (empty($members)): ?>
<div class="text-center text-muted py-5">
  <i class="bi bi-people fs-1 d-block mb-2 opacity-25"></i>
  No registered members yet.
</div>
<?php endif; ?>
</div>

<div class="text-center py-4 d-none" id="noResults">
  <i class="bi bi-search fs-2 d-block mb-2 opacity-25"></i>
  <div class="text-muted small">No members match your search.</div>
</div>

<div class="text-center mt-3 mb-2">
  <a href="register.php" class="m-btn m-btn-primary m-btn-auto">
    <i class="bi bi-person-plus me-2"></i>Register New Member
  </a>
</div>

<?php
$mExtraJS = <<<'ENDJS'
<script>
document.getElementById('memberSearch').addEventListener('input', function () {
    var q     = this.value.toLowerCase().trim();
    var rows  = document.querySelectorAll('#memberList .member-row');
    var shown = 0;
    rows.forEach(function (row) {
        var match = !q || row.dataset.name.includes(q) || row.dataset.card.includes(q);
        row.style.display = match ? 'block' : 'none';
        if (match) shown++;
    });
    document.getElementById('noResults').classList.toggle('d-none', shown > 0 || !q);
});
</script>
ENDJS;
include __DIR__ . '/includes/m_footer.php';
