<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';
if (!$user || !in_array($user['role_name'], ['super_admin','event_manager','walk_leader'], true)) { header('Location: dashboard.php'); exit; }
$canManage = in_array($user['role_name'], ['super_admin','event_manager'], true);
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Member Groups | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_groups_signup_code.css?v=1">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container enterprise-page groups-admin-container">
  <section class="page-hero admin-hero dashboard-hero enterprise-hero">
    <div>
      <p class="eyebrow">Member segmentation</p>
      <h1>Member Groups</h1>
      <p class="muted">Create VIP, corporate, beginner, family, private invitation, or custom groups for targeted walk invitations.</p>
    </div>
    <div class="hero-actions">
      <?php if ($canManage): ?><button class="btn" type="button" id="openGroupModal">+ Create group</button><?php endif; ?>
      <a class="btn btn-light" href="members.php">Members CRM</a>
    </div>
  </section>

  <section class="grid four compact-stats" id="groupStats">
    <div class="stat stat-pro"><span>Total groups</span><strong id="groupTotal">0</strong></div>
    <div class="stat stat-pro"><span>Active groups</span><strong id="groupActive">0</strong></div>
    <div class="stat stat-pro"><span>Grouped members</span><strong id="groupedMembers">0</strong></div>
    <div class="stat stat-pro"><span>Available members</span><strong id="availableMembers">0</strong></div>
  </section>

  <section class="panel enterprise-table-panel crm-wide-panel">
    <div class="section-head crm-section-head">
      <div><p class="eyebrow">Directory</p><h2>Groups</h2><p class="muted small">Use groups when you create invitation-only walks.</p></div>
      <div class="inline-controls search-controls">
        <input id="groupSearch" placeholder="Search groups">
        <select id="groupStatusFilter"><option value="">All statuses</option><option value="active">Active</option><option value="inactive">Inactive</option></select>
      </div>
    </div>
    <div id="groupsGrid" class="group-management-grid"></div>
  </section>
</main>

<?php if ($canManage): ?>
<div class="modal-backdrop" id="groupFormModal" hidden>
  <div class="modal-card modal-large" role="dialog" aria-modal="true" aria-labelledby="groupFormTitle">
    <div class="modal-head">
      <div><p class="eyebrow">Group setup</p><h2 id="groupFormTitle">Create group</h2></div>
      <button class="icon-btn" type="button" data-close-modal="groupFormModal">×</button>
    </div>
    <form id="groupForm" class="stack-form">
      <input type="hidden" name="id" id="groupId">
      <div class="form-grid two">
        <label>Group name<input name="group_name" id="groupName" required placeholder="Example: VIP Walkers"></label>
        <label>Status<select name="status" id="groupStatus"><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
      </div>
      <label>Description<textarea name="description" id="groupDescription" placeholder="Who belongs in this group?"></textarea></label>

      <section class="group-code-card">
        <div class="group-code-head">
          <div>
            <p class="eyebrow">Signup code</p>
            <h3>Auto-assign new members to this group</h3>
            <p class="muted small">Members can enter this code on the signup screen. You can stop the code anytime without deleting the group.</p>
          </div>
          <label class="switch-card compact-switch">
            <input type="checkbox" name="signup_code_enabled" id="signupCodeEnabled" value="1">
            <span><strong>Code active</strong><small>Allow registration with this code</small></span>
          </label>
        </div>

        <div class="form-grid code-grid">
          <label>Code
            <input name="signup_code" id="signupCode" placeholder="Example: VIP2026" autocomplete="off">
          </label>
          <div class="group-code-actions">
            <button class="btn btn-light btn-small" type="button" id="generateSignupCodeBtn">Generate</button>
            <button class="btn btn-light btn-small" type="button" id="copySignupCodeBtn">Copy</button>
          </div>
        </div>
      </section>
      <div class="modal-actions">
        <button class="btn btn-light" type="button" data-close-modal="groupFormModal">Cancel</button>
        <button class="btn" type="submit">Save group</button>
      </div>
      <p id="groupMsg" class="notice"></p>
    </form>
  </div>
</div>

<div class="modal-backdrop" id="groupMembersModal" hidden>
  <div class="modal-card modal-xl" role="dialog" aria-modal="true" aria-labelledby="groupMembersTitle">
    <div class="modal-head">
      <div><p class="eyebrow">Member assignment</p><h2 id="groupMembersTitle">Manage group members</h2><p id="groupMembersSub" class="muted small"></p></div>
      <button class="icon-btn" type="button" data-close-modal="groupMembersModal">×</button>
    </div>
    <form id="groupMembersForm" class="stack-form">
      <input type="hidden" id="membersGroupId" name="group_id">
      <input id="groupMemberSearch" placeholder="Search members by name, mobile or email" class="full-input">
      <div id="groupMembersList" class="enterprise-checkbox-list"></div>
      <div class="modal-actions">
        <button class="btn btn-light" type="button" data-close-modal="groupMembersModal">Cancel</button>
        <button class="btn" type="submit">Save members</button>
      </div>
      <p id="groupMembersMsg" class="notice"></p>
    </form>
  </div>
</div>
<?php endif; ?>

<script>
window.PYRK_API_BASE='../../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>';
window.PYRK_CAN_MANAGE_GROUPS=<?= $canManage ? 'true' : 'false' ?>;
window.PYRK_PUBLIC_BASE='../';
</script>
<script src="../assets/js/api.js"></script>
<script src="../assets/js/admin_groups.js?v=2"></script>
</body>
</html>
