const btnCrearSala = document.getElementById("btnCrearSala");

const nombreSala = document.getElementById("nombreSala");
const nombreEquipo1 = document.getElementById("nombreEquipo1");
const nombreEquipo2 = document.getElementById("nombreEquipo2");

btnCrearSala.addEventListener("click", function () {
  limpiarErrores();

  const sala = nombreSala.value.trim();
  const equipo1 = nombreEquipo1.value.trim();
  const equipo2 = nombreEquipo2.value.trim();

  let formularioValido = true;

  if (sala === "") {
    mostrarError(nombreSala, "El nombre de la sala es obligatorio.");

    formularioValido = false;
  }

  if (equipo1 === "") {
    mostrarError(nombreEquipo1, "El nombre del equipo 1 es obligatorio.");

    formularioValido = false;
  }

  if (equipo2 === "") {
    mostrarError(nombreEquipo2, "El nombre del equipo 2 es obligatorio.");

    formularioValido = false;
  }

  if (!formularioValido) {
    return;
  }

  console.log("Sala:", sala);
  console.log("Equipo 1:", equipo1);
  console.log("Equipo 2:", equipo2);


  const idSala = 1;

  //TODO aqui va la peticion ayax en el futuro para crear la sala en la bbdd

  window.location.href = "sala.html?id=" + idSala;
});

function mostrarError(input, mensaje) {
  input.classList.add("is-invalid");

  // Comprobamos si ya existe un mensaje
  let mensajeError = input.parentElement.querySelector(".invalid-feedback");

  if (!mensajeError) {
    mensajeError = document.createElement("div");

    mensajeError.classList.add("invalid-feedback");

    input.parentElement.appendChild(mensajeError);
  }

  mensajeError.textContent = mensaje;
}

function limpiarErrores() {
  const inputs = [nombreSala, nombreEquipo1, nombreEquipo2];

  inputs.forEach((input) => {
    input.classList.remove("is-invalid");

    const mensajeError = input.parentElement.querySelector(".invalid-feedback");

    if (mensajeError) {
      mensajeError.remove();
    }
  });
}