$(document).ready(function () {
  // Fonction pour afficher les erreurs
  const showError = (inputId, message) => {
    $(`#${inputId}Error`).text(message).css('color', 'red');
  };

  // Fonction pour nettoyer les erreurs
  const clearError = (inputId) => {
    $(`#${inputId}Error`).text('');
  };

  // Regex pour validation
  const regex = {
    name: /^[A-Za-zÀ-ÖØ-öø-ÿ' -]+$/, // Lettres, espaces, apostrophes, traits
    username: /^[A-Za-z0-9_]{4,20}$/, // Alphanumérique, underscore, 4-20 caractères
    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, // Email valide
  };

  // Validation par champ
  const validateField = (fieldId, type, required = true) => {
    const value = $(`#${fieldId}`).val().trim();

    if (required && value === "") {
      showError(fieldId, "Ce champ est obligatoire.");
      return false;
    }

    if (type === "name" && !regex.name.test(value)) {
      showError(fieldId, "Veuillez entrer un nom valide.");
      return false;
    }

    if (type === "username" && !regex.username.test(value)) {
      showError(fieldId, "Le nom d'utilisateur doit contenir 4 à 20 caractères alphanumériques ou '_'.");
      return false;
    }

    if (type === "email" && !regex.email.test(value)) {
      showError(fieldId, "Veuillez entrer un email valide.");
      return false;
    }

    clearError(fieldId);
    return true;
  };

  // Variables pour récupérer les données
  let nom, prenom, username, email;

  // Ajout d'écouteurs pour chaque champ
  const fields = [
    { id: "nom", type: "name" },
    { id: "prenom", type: "name" },
    { id: "username", type: "username" },
    { id: "email", type: "email" },
  ];

  fields.forEach(field => {
    $(`#${field.id}`).on("change", function () {
      validateField(field.id, field.type);
      if (field.id === "nom") nom = $(this).val().trim();
      if (field.id === "prenom") prenom = $(this).val().trim();
      if (field.id === "username") username = $(this).val().trim();
      if (field.id === "email") email = $(this).val().trim();
    });
  });

  // Validation finale au moment de la soumission
  $('#userForm').on("submit", function (event) {
    event.preventDefault(); // Empêche la soumission par défaut

    let isValid = true;
    fields.forEach(field => {
      if (!validateField(field.id, field.type)) {
        isValid = false;
      }
    });

    // Si le formulaire est valide, envoyer les données via AJAX
    if (isValid) {
      // Récupérer le token CSRF
      const csrfToken = $('meta[name="csrf_token"]').attr('content');

      $.ajax({
        url: "save_user",
        method: "POST",
        data: {
          'last_name': nom,
          'first_name': prenom,
          'username': username,
          'email': email,
          'csrf_token': csrfToken // Assurez-vous que le nom correspond au nom du token CSRF défini dans CodeIgniter
        },
        
        error: function (jqXHR, textStatus, errorThrown) {
          console.log("Error: " + errorThrown);
          // Gérer les erreurs (par exemple, afficher un message à l'utilisateur)
        }
      });
    }
  });
});