document.addEventListener("DOMContentLoaded", () => {
  cargarConfiguracionCanchas();
  cargarHorarios();

  // Configurar el guardado para cada formulario
  const formularios = document.querySelectorAll(
    ".cancha-formulario[data-tipo]"
  );

  formularios.forEach((form) => {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const T = form.dataset.tipo; // Obtiene 'F', 'P' o 'Q'

      // Capturamos los valores dinámicamente usando el prefijo del tipo
      const datos = {
        tipo: T,
        precio: document.getElementById(`precio-${T}`)?.value || 0,
        duracion: document.getElementById(`duracion-${T}`)?.value || 0,
        cantidad: document.getElementById(`cantidad-${T}`)?.value || 0,
        reservas_cupon:
          document.getElementById(`reservas-cupon-${T}`)?.value || 0,
        descuento: convertirDescuentoAPorcentaje(
          document.getElementById(`descuento-${T}`)?.value || 0
        ),
        faltas: document.getElementById(`faltas-${T}`)?.value || 0,
        duracion_cupon: document.getElementById(`duracion-cupon-${T}`)?.value || 0,
      };

      // Caso especial para Quincho que llamaste al input "reservas-Q" en lugar de "reservas-cupon-Q"
      if (T === "Q") {
        datos.reservas_cupon =
          document.getElementById(`reservas-Q`)?.value || 0;
      }
      actualizarCancha(datos);
    });
  });
});

// Guardar configuración de Horarios
const formHorarios = document.getElementById("form-horarios");
  if (formHorarios) {
    formHorarios.addEventListener("submit", (e) => {
      e.preventDefault();
      const datosHorarios = [
        {
          dia: "Lunes a Viernes",
          ape: document.getElementById("apertura-l").value,
          cie: document.getElementById("cierre-l").value,
        },
        {
          dia: "Sábado",
          ape: document.getElementById("apertura-s").value,
          cie: document.getElementById("cierre-s").value,
        },
        {
          dia: "Domingo",
          ape: document.getElementById("apertura-d").value,
          cie: document.getElementById("cierre-d").value,
        },
      ];
      actualizarHorarios(datosHorarios);
    });
  }

function cargarHorarios() {
  console.log('Cargando horarios...');
  fetch("../php/Obtener_Horarios.php")
    .then((res) => res.json())
    .then((data) => {
      console.log('Datos de horarios recibidos:', data);
      data.forEach((h) => {
        if (h.Dia === "Lunes a Viernes") {
          setVal("apertura-l", h.Hora_Apertura);
          setVal("cierre-l", h.Hora_Cierre);
        } else if (h.Dia === "Sábado") {
          setVal("apertura-s", h.Hora_Apertura);
          setVal("cierre-s", h.Hora_Cierre);
        } else if (h.Dia === "Domingo") {
          setVal("apertura-d", h.Hora_Apertura);
          setVal("cierre-d", h.Hora_Cierre);
        }
      });
      console.log('Horarios cargados exitosamente');
    })
    .catch((err) => console.error("Error al cargar horarios:", err));
}

window.cargarHorarios = cargarHorarios;

function normalizarNumero(valor) {
  if (valor === null || valor === undefined || valor === "") return 0;
  const texto = String(valor).trim().replace(/\s+/g, "");
  if (!texto) return 0;
  const numero = parseFloat(texto.replace(/,/g, "."));
  return Number.isFinite(numero) ? numero : 0;
}

function convertirDescuentoAPorcentaje(valor) {
  const numero = normalizarNumero(valor);
  if (numero === 0) return 0;
  return numero > 1 ? numero / 100 : numero;
}

function convertirDescuentoAFormulario(valor) {
  const numero = normalizarNumero(valor);
  if (numero === 0) return "";
  return numero > 1 ? numero : numero * 100;
}

function actualizarHorarios(datos) {
  fetch("../php/Actualizar_Horarios.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(datos),
  })
    .then((res) => res.text())
    .then((msg) => alert(msg))
    .catch((err) => console.error("Error:", err));
}

function cargarConfiguracionCanchas() {
  console.log('Cargando configuración de canchas...');
  fetch("../php/Obtener_Canchas.php")
    .then((res) => res.json())
    .then((data) => {
      console.log('Datos de canchas recibidos:', data);
      data.forEach((cancha) => {
        const T = cancha.Tipo; // 'F', 'P', 'Q'

        // Usamos el operador ?. para no romper el código si un input no existe en un tipo
        setVal(`precio-${T}`, cancha.Precio);
        setVal(`duracion-${T}`, cancha.Duracion);
        setVal(`cantidad-${T}`, cancha.Cant_Canchas);
        setVal(`reservas-cupon-${T}`, cancha.Cant_Reservas_Cupon);
        setVal(`descuento-${T}`, convertirDescuentoAFormulario(cancha.Descuento_Cupon));
        setVal(`faltas-${T}`, cancha.Cant_Faltas);
        setVal(`duracion-cupon-${T}`, cancha.Duracion_Cupon);

        // Ajuste para ID específico de Quincho
        if (T === "Q") setVal(`reservas-Q`, cancha.Cant_Reservas_Cupon);
      });
      console.log('Configuración de canchas cargada exitosamente');
    })
    .catch((err) => console.error("Error al cargar configuración:", err));
}

window.cargarConfiguracionCanchas = cargarConfiguracionCanchas;

// Función auxiliar para asignar valores de forma segura
function setVal(id, valor) {
  const el = document.getElementById(id);
  if (el) el.value = valor;
}

function actualizarCancha(datos) {
  fetch("../php/Actualizar_Cancha.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(datos),
  })
    .then((res) => res.text())
    .then((msg) => {
      alert(msg);
      cargarConfiguracionCanchas(); // Recargar para confirmar cambios
    })
    .catch((err) => console.error("Error al actualizar:", err));
}