<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';
$canEditUsers = $user && \App\Core\Auth::hasPermission('users.manage', $user);
$canDeleteUsers = $user && \App\Core\Auth::hasPermission('users.delete', $user);
if (!$user || (!$canEditUsers && !$canDeleteUsers)) { header('Location: dashboard.php'); exit; }
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>System Users | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/permissions_delete_actions.css?v=1">
  <link rel="stylesheet" href="../assets/css/admin_users_pro.css?v=2">
  <link rel="stylesheet" href="../assets/css/admin_points_badges_table.css?v=2">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container enterprise-page users-pro-page">
  <section class="page-hero admin-hero dashboard-hero enterprise-hero users-hero-pro">
    <div>
      <p class="eyebrow">Enterprise Access Control</p>
      <h1>System users & permissions</h1>
      <p class="muted">Create staff accounts, assign fine-grained permissions, manage login security, and keep Pyrk operations controlled.</p>
    </div>
    <div class="hero-actions">
      <?php if ($canEditUsers): ?><button class="btn" type="button" id="openCreateUserBtn">+ New user</button><?php endif; ?>
      <a class="btn btn-light" href="security.php">Security center</a>
      <a class="btn btn-light" href="members.php">Members CRM</a>
    </div>
  </section>

  <section class="grid four compact-stats users-kpi-row" id="userStats">
    <div class="stat stat-pro"><span>Total system users</span><strong id="totalUsers">0</strong></div>
    <div class="stat stat-pro"><span>Super admins</span><strong id="totalSuperAdmins">0</strong></div>
    <div class="stat stat-pro"><span>Managers</span><strong id="totalManagers">0</strong></div>
    <div class="stat stat-pro"><span>Walk leaders</span><strong id="totalLeaders">0</strong></div>
  </section>

  <section class="panel users-command-panel">
    <div class="section-head users-command-head">
      <div>
        <p class="eyebrow">Directory</p>
        <h2>Staff & admin users</h2>
        <p class="muted small">Use filters to find users. Create or edit users in a clean popup, including permissions.</p>
      </div>
      <div class="inline-controls search-controls">
        <input id="userSearch" placeholder="Search name, email, mobile or IP">
        <select id="userRoleFilter"><option value="">All roles</option></select>
        <select id="userStatusFilter">
          <option value="">All status</option>
          <option value="active">Active</option>
          <option value="inactive">Inactive</option>
          <option value="blocked">Blocked</option>
        </select>
      </div>
    </div>

    <div class="table-wrap pro-table-wrap users-table-wrap">
      <table class="pro-table users-pro-table">
        <thead>
          <tr>
            <th>User</th>
            <th>Role</th>
            <th>Club activity</th>
            <th>Permissions</th>
            <th>Status</th>
            <th>Login security</th>
            <th>Last login</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="usersTableBody"></tbody>
      </table>
    </div>
  </section>
</main>

<div class="modal-backdrop user-modal-backdrop" id="userModal" hidden aria-hidden="true">
  <div class="modal-card modal-large user-modal-card" role="dialog" aria-modal="true" aria-labelledby="userFormTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">System user</p>
        <h2 id="userFormTitle">Create system user</h2>
        <p class="muted small" id="userFormSubtitle">Add staff information, password, role and permissions.</p>
      </div>
      <button class="icon-btn" type="button" data-close-modal="userModal" aria-label="Close">×</button>
    </div>

    <form id="userForm" class="user-modal-form" enctype="multipart/form-data">
      <input type="hidden" name="id" id="userId">

      <div class="user-modal-layout">
        <aside class="user-profile-rail">
          <div class="avatar-preview xl" id="userAvatarPreview">U</div>
          <label class="upload-trigger user-photo-trigger">Upload photo
            <input name="profile_photo" id="userProfilePhoto" type="file" accept="image/*">
          </label>
          <small class="muted">JPG, PNG, WEBP. Max 4MB.</small>
          <div class="permission-summary-box">
            <span>Selected permissions</span>
            <strong id="selectedPermissionCount">0</strong>
          </div>
        </aside>

        <section class="user-form-body">
          <div class="form-section-card">
            <div class="mini-section-head">
              <strong>Account details</strong>
              <span>Core identity and login access</span>
            </div>
            <div class="form-grid two">
              <label>First Name<input name="first_name" id="userFirstName" required placeholder="First Name" autocomplete="given-name"></label>
              <label>Last Name<input name="last_name" id="userLastName" required placeholder="Last Name" autocomplete="family-name"></label>
              <input type="hidden" name="full_name" id="userFullName">
              <label>Email<input name="email" id="userEmail" type="email" required placeholder="name@example.com"></label>
              <label class="phone-label-pro">Mobile
                <input type="hidden" name="mobile" id="userMobile">
                <div class="phone-field-pro phone-select-wrap" data-phone-widget="user" data-code="+961" data-name="Lebanon">
                  <div class="country-select-pro">
                    <button class="country-select-btn" type="button" data-country-button="user" aria-haspopup="listbox" aria-expanded="false">
                      <span id="userCountryLabel">🇱🇧 Lebanon +961</span><b>▾</b>
                    </button>
                    <div class="country-dropdown-pro" data-country-menu="user" hidden>
                      <input class="country-search-pro" type="search" data-country-search="user" placeholder="Search country or code">
                      <div class="country-options-pro" data-country-options="user" role="listbox"></div>
                    </div>
                  </div>
                  <input id="userMobileNumber" class="phone-number-input" inputmode="tel" placeholder="Mobile number">
                </div>
                <small class="muted">Select country from dropdown, then type only the number.</small>
              </label>
              <label>Role<select name="role_id" id="userRoleSelect" required></select></label>
              <label>Status<select name="status" id="userStatus"><option value="active">Active</option><option value="inactive">Inactive</option><option value="blocked">Blocked</option></select></label>
              <label>Self-profile editing<select name="can_edit_own_profile" id="userCanEditOwnProfile"><option value="1">Allowed on web and mobile</option><option value="0">Disabled on web and mobile</option></select><small class="muted">Controls only this user's ability to edit their own profile.</small></label>
              <label>Password
                <div class="password-field-pro">
                  <input name="password" id="userPassword" type="password" placeholder="Required for new users" autocomplete="new-password">
                  <button class="password-eye-btn" type="button" id="toggleUserPassword" aria-label="Show password" title="Show password">
                    <svg class="eye-open" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5c5.5 0 9.5 5.2 9.5 7s-4 7-9.5 7-9.5-5.2-9.5-7S6.5 5 12 5Zm0 2C7.9 7 4.8 10.6 4.5 12c.3 1.4 3.4 5 7.5 5s7.2-3.6 7.5-5C19.2 10.6 16.1 7 12 7Zm0 2.2A2.8 2.8 0 1 1 12 14.8 2.8 2.8 0 0 1 12 9.2Z"/></svg>
                    <svg class="eye-closed" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.3 2 22 20.7 20.7 22l-3.2-3.2A10.4 10.4 0 0 1 12 20C6.5 20 2.5 14.8 2.5 12c0-1.2 1-2.8 2.6-4.1L2 4.7 3.3 2Zm3.2 7.3C5.3 10.3 4.7 11.4 4.5 12c.3 1.4 3.4 5 7.5 5 1.4 0 2.6-.4 3.8-1l-1.9-1.9A2.8 2.8 0 0 1 9.9 10L6.5 9.3ZM12 4c5.5 0 9.5 5.2 9.5 8 0 .9-.5 2-1.5 3.1l-2.2-2.2c.9-.9 1.5-1.7 1.7-2-.3-1.4-3.4-5-7.5-5-1 0-2 .2-2.9.6L7.5 4.9A10.7 10.7 0 0 1 12 4Z"/></svg>
                  </button>
                  <button class="btn btn-light btn-small password-generate-btn" type="button" id="generatePasswordBtn">Generate</button>
                </div>
                <small class="muted" id="userPasswordHint">Use the eye icon to review the password before saving.</small>
              </label>
            </div>
          </div>

          <div class="form-section-card">
            <div class="mini-section-head">
              <strong>Permissions</strong>
              <span>Choose exactly what this user can manage in the admin portal.</span>
            </div>
            <div class="permission-toolbar">
              <button class="btn btn-light btn-small" type="button" id="selectRoleDefaultsBtn">Role defaults</button>
              <button class="btn btn-light btn-small" type="button" id="selectAllPermissionsBtn">Select all</button>
              <button class="btn btn-light btn-small" type="button" id="clearPermissionsBtn">Clear</button>
            </div>
            <div id="permissionsGrid" class="permissions-grid-pro"></div>
          </div>
        </section>
      </div>

      <div class="modal-actions user-modal-actions">
        <p id="userMsg" class="notice"></p>
        <button class="btn btn-light" type="button" data-close-modal="userModal">Cancel</button>
        <button class="btn" type="submit" id="saveUserBtn">Save system user</button>
      </div>
    </form>
  </div>
</div>


<div class="modal-backdrop user-profile-backdrop" id="userProfileModal" hidden aria-hidden="true">
  <div class="modal-card modal-large user-profile-modal-card" role="dialog" aria-modal="true" aria-labelledby="userProfileTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">System user profile</p>
        <h2 id="userProfileTitle">User profile</h2>
        <p class="muted small">Full account, permissions and security overview.</p>
      </div>
      <button class="icon-btn" type="button" data-close-modal="userProfileModal" aria-label="Close">×</button>
    </div>
    <div id="userProfileContent" class="user-profile-content">
      <p class="muted">Loading profile...</p>
    </div>
  </div>
</div>

<script>
window.PYRK_API_BASE='../../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>';
window.PYRK_PUBLIC_BASE='../';
window.PYRK_CAN_EDIT_USERS=<?= $canEditUsers ? 'true' : 'false' ?>;
window.PYRK_CAN_DELETE_USERS=<?= $canDeleteUsers ? 'true' : 'false' ?>;
</script>
<script src="../assets/js/api.js"></script>
<script src="../assets/js/admin_users.js?v=7"></script>
</body>
</html>
