<?php require_once __DIR__ . '/../includes/auth.php'; require_login(); ?>
<div class="page-users">
<div class="container-fluid p-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>Users</h4>
    <button id="btnAddUser" class="btn btn-primary">Add User</button>
  </div>
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="table-responsive">
        <table id="users-table" class="table table-hover align-middle">
          <thead>
            <tr>
              <th>ID</th>
              <th>Username</th>
              <th>Full Name</th>
              <th>Role</th>
              <th>Branch</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<input type="hidden" id="csrf" value="<?php echo htmlspecialchars(csrf_token()); ?>" />

<div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="userForm">
        <div class="modal-body">
          <input type="hidden" name="csrf" value="<?php echo htmlspecialchars(csrf_token()); ?>">
          <input type="hidden" id="userId" name="id">
          <div class="mb-3">
            <label class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Full Name</label>
            <input type="text" class="form-control" id="full_name" name="full_name">
          </div>
          <div class="mb-3">
            <label class="form-label">Role</label>
            <select class="form-select" id="role" name="role" required onchange="toggleBranchField()">
              <option value="admin">Admin</option>
              <option value="super_admin">Super Admin</option>
              <option value="sales_user">Sales User</option>
            </select>
          </div>
          <div class="mb-3" id="branchFieldWrapper" style="display:none;">
            <label class="form-label">Branch <span class="text-danger">*</span></label>
            <select class="form-select" id="branch_id" name="branch_id">
              <option value="">-- Select Branch --</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Leave blank to keep current (on edit)">
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
            <label class="form-check-label" for="is_active">Active</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>

<script>
function toggleBranchField() {
  const role = $('#role').val();
  const $wrapper = $('#branchFieldWrapper');
  const $branch = $('#branch_id');
  if (role === 'sales_user') {
    $wrapper.show();
    $branch.attr('required', true);
  } else {
    $wrapper.hide();
    $branch.attr('required', false);
    $branch.val('');
  }
}
</script>
</body>
</html>
