<?php $user_perm_pages = crmPagesConfig(); ?>
<!-- ===================== USERS TAB ===================== -->
<div class="tab-pane <?= ($requested_tab === 'users') ? 'active' : '' ?>" id="tab-users">
  <div class="mini-tabs" style="margin-bottom:14px"><button type="button" class="mini-tab active" onclick="openUsersSubtab('usersListPane',this)">Users List</button><?php if ($can_manage_settings_users): ?><button type="button" class="mini-tab" onclick="openUsersSubtab('usersAddPane',this)">Add User</button><?php endif; ?></div>
  <?php if ($can_manage_settings_users): ?>
  <div id="usersAddPane" class="users-subpane" style="display:none"><div class="card" style="padding:18px;margin-bottom:18px">
    <div class="toolbar" style="margin-bottom:12px"><span class="card-title">Add User</span></div>
    <form id="addUserForm">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Name *</label><input type="text" name="name" class="form-control" required></div>
        <div class="form-group"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control"></div>
        <div class="form-group"><label class="form-label">Email *</label><input type="email" name="email" class="form-control" required></div>
        <div class="form-group"><label class="form-label">Password *</label><input type="password" name="password" class="form-control" required minlength="6"></div>
        <div class="form-group span-2"><label class="form-label">Role</label><select name="role_id" class="form-control"><option value="">No Role</option><?php $roles->data_seek(0); while ($ro = $roles->fetch_assoc()): ?><option value="<?= $ro['id'] ?>"><?= htmlspecialchars($ro['name']) ?></option><?php endwhile; ?></select></div>
      </div>
      <div style="border-top:1px solid var(--border);margin-top:16px;padding-top:16px">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
          <h3 style="margin:0">Permissions</h3>
          <label style="display:inline-flex;align-items:center;gap:7px"><input type="checkbox" id="addUserAllPermissions" onchange="toggleAllAddUserPermissions(this.checked)"> Give all access</label>
        </div>
        <div class="table-wrapper"><table class="crm-table"><thead><tr><th>Page</th><th>Page Access</th></tr></thead><tbody>
          <?php foreach($user_perm_pages as $key=>$cfg): ?>
          <tr>
            <td><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" class="add-user-page-all" data-page="<?= htmlspecialchars($key) ?>" onchange="toggleAddUserPagePermissions('<?= htmlspecialchars($key) ?>', this.checked)"><strong><?= htmlspecialchars($cfg['label']) ?></strong></label><div class="text-xs text-muted"><?= htmlspecialchars($key) ?></div></td>
            <td style="display:flex;gap:10px;flex-wrap:wrap">
              <label style="display:inline-flex;align-items:center;gap:6px;background:var(--bg-base);padding:6px 10px;border-radius:8px;border:1px solid var(--border)">
                <input type="checkbox" class="add-user-perm-check add-user-perm-<?= htmlspecialchars($key) ?>" name="permissions[]" data-page="<?= htmlspecialchars($key) ?>" data-action="view" value="<?= htmlspecialchars($key.'|view') ?>"> Full page access
              </label>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody></table></div>
      </div>
      <div style="text-align:right;margin-top:16px"><button type="button" class="btn btn-primary" onclick="addUser()">Create User</button></div>
    </form>
  </div>
  </div><?php endif; ?>

  <div id="usersListPane" class="users-subpane">
  <div class="toolbar">
    <span class="card-title">Team Members</span>
  </div>
  <div class="card">
    <div class="table-wrapper">
      <table class="crm-table">
        <thead><tr><th>Name</th><th>Email</th><th>Phone</th><th>Role</th><th>Since</th><th>Page Access</th></tr></thead>
        <tbody>
          <?php while ($u = $all_users->fetch_assoc()): ?>
          <tr id="user_<?= $u['id'] ?>">
            <td><div class="d-flex align-center gap-8"><div class="avatar avatar-sm"><?= strtoupper(substr($u['name'],0,2)) ?></div><?= htmlspecialchars($u['name']) ?></div></td>
            <td><?= htmlspecialchars($u['email']) ?></td><td><?= htmlspecialchars($u['phone'] ?: '—') ?></td>
            <td><?php if ($can_manage_settings_users && $u['id'] != $user_id): ?><select class="form-control form-control-sm" onchange="changeUserRole(<?= $u['id'] ?>, this.value)"><option value="">No Role</option><?php $roles->data_seek(0); while ($ro = $roles->fetch_assoc()): ?><option value="<?= $ro['id'] ?>" <?= $u['role_id'] == $ro['id'] ? 'selected' : '' ?>><?= htmlspecialchars($ro['name']) ?></option><?php endwhile; ?></select><?php else: ?><span class="badge badge-blue"><?= htmlspecialchars($u['role_name'] ?: 'User') ?></span><?php endif; ?></td>
            <td class="text-muted text-xs"><?= formatDate($u['datetime_created']) ?></td>
            <td><?php if ($u['id'] != $user_id && $can_manage_settings_users): ?><button class="btn btn-warning btn-sm" onclick="editUser(<?= $u['id'] ?>, '<?= addslashes($u['name']) ?>', '<?= addslashes($u['email']) ?>', '<?= addslashes($u['phone']) ?>', <?= $u['role_id'] ?: 'null' ?>)">Edit</button> <a class="btn btn-secondary btn-sm" href="index.php?page=settings&tab=permissions&perm_user_id=<?= $u['id'] ?>">Permissions</a> <button class="btn btn-danger btn-sm" onclick="deleteUser(<?= $u['id'] ?>, '<?= addslashes($u['name']) ?>')">Remove</button><?php else: ?><span class="badge badge-teal">You</span><?php endif; ?></td>
          </tr>
          <?php endwhile; ?>
        </tbody>
      </table>
    </div>
  </div>
  </div>
</div>
<style>.mini-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);padding-bottom:8px}.mini-tab{border:0;background:transparent;padding:10px 14px;border-radius:10px;font-weight:800;color:var(--text-muted);cursor:pointer}.mini-tab.active{background:#eaf2ff;color:#163b7c}</style><script>function openUsersSubtab(id,btn){document.querySelectorAll('#tab-users .users-subpane').forEach(p=>p.style.display='none');const p=document.getElementById(id);if(p)p.style.display='block';document.querySelectorAll('#tab-users .mini-tab').forEach(b=>b.classList.remove('active'));if(btn)btn.classList.add('active');}</script>
