<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

$.ajax({
  url: '/users',
  type: 'GET',
  dataType: 'json',
  success: function (result) {
    if (result.resultCd === 'M0000') {
      renderTable(result.data);
    }
  },
  error: function (xhr, status, error) {
    alert('Failed to load users: ' + error);
  }
});

$.ajax({
  url: '/users',
  type: 'GET',
  data: { status: 'ACTIVE', page: 1, size: 10 }
});
// /users?status=ACTIVE&page=1&size=10

$.ajax({
  url: '/users',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({
    username: $('#username').val(),
    email: $('#email').val(),
    status: 'ACTIVE'
  })
});

$.ajax({
  url: '/users/' + id,
  type: 'PUT',
  contentType: 'application/json',
  data: JSON.stringify({ username: 'newname' })
});

$.ajax({
  url: '/users/' + id,
  type: 'DELETE'
});

$('#username').val();
$('#title').text('New Title');
$('#modal').toggle();
$('#btn').addClass('active');

$(function () {
  loadUsers();
});

$('#saveBtn').click(function () {
  saveUser();
});

$(document).on('click', '.deleteBtn', function () {
  deleteUser($(this).data('id'));
});

function renderTable(users) {
  const tbody = $('#userTable tbody');
  tbody.empty();

  if (!users || users.length === 0) {
    tbody.append('<tr><td colspan="5">No data</td></tr>');
    return;
  }

  users.forEach(function (user, index) {
    tbody.append(`
      <tr>
        <td>${index + 1}</td>
        <td>${escapeHtml(user.username)}</td>
        <td>${escapeHtml(user.email)}</td>
        <td>${user.status}</td>
      </tr>
    `);
  });
}

function escapeHtml(str) {
  return $('<div>').text(str ?? '').html();
}

function saveUser() {
  const username = $('#username').val().trim();
  const email = $('#email').val().trim();

  if (!username) {
    alert('Username is required.');
    return;
  }
  if (!email.includes('@')) {
    alert('Valid email is required.');
    return;
  }

  $.ajax({
    url: '/users',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ username, email, status: 'ACTIVE' })
  });
}

$(document).ajaxError(function (event, xhr) {
  if (xhr.status === 401) {
    window.location.href = '/login';
  } else if (xhr.status === 500) {
    alert('Server error. Please try again.');
  }
});