MarcosFlorSalcedo
621 lines
23 KiB
JavaScript
621 lines
23 KiB
JavaScript
// Estado global de la reserva
|
|
let estadoReserva = {
|
|
tipoCancha: null,
|
|
fecha: null,
|
|
horario: null,
|
|
numeroCancha: null,
|
|
quincho: false,
|
|
descuento: 0,
|
|
cuponeado: false,
|
|
reservasRestantes: null,
|
|
cantidadReservas: 0,
|
|
umbral: 0
|
|
};
|
|
|
|
// Obtener datos de las canchas al cargar
|
|
let datoscCanchas = { futbol: null, padel: null, quincho: null };
|
|
|
|
// Variable global para guardar el código de WhatsApp temporalmente
|
|
let codigoCorrecto = null;
|
|
|
|
// Cargar datos de las canchas desde la base de datos
|
|
async function cargarDatosCanchas() {
|
|
try {
|
|
const response = await fetch('../php/Obtener_Canchas.php');
|
|
const data = await response.json();
|
|
console.log('Datos recibidos de Obtener_Canchas.php:', data);
|
|
|
|
const canchas = Array.isArray(data)
|
|
? data
|
|
: (data && Array.isArray(data.canchas) ? data.canchas : []);
|
|
|
|
if (!canchas.length) {
|
|
console.warn('No se recibieron canchas válidas desde el servidor:', data);
|
|
return;
|
|
}
|
|
|
|
canchas.forEach(cancha => {
|
|
const rawTipo = String(cancha.Tipo ?? cancha.tipo ?? '').trim().toUpperCase();
|
|
const tipo = rawTipo === 'F' || rawTipo === 'FUTBOL' ? 'F'
|
|
: rawTipo === 'P' || rawTipo === 'PADEL' ? 'P'
|
|
: rawTipo === 'Q' || rawTipo === 'QUINCHO' ? 'Q'
|
|
: null;
|
|
|
|
if (!tipo) {
|
|
console.warn('Tipo de cancha desconocido en la respuesta:', rawTipo, cancha);
|
|
return;
|
|
}
|
|
|
|
const duracion = parseInt(cancha.Duracion ?? cancha.duracion, 10) || 0;
|
|
const precio = parseFloat(cancha.Precio ?? cancha.precio_venta ?? cancha.precio) || 0;
|
|
const apertura = cancha.Hora_Apertura ?? cancha.apertura ?? null;
|
|
const cierre = cancha.Hora_Cierre ?? cancha.cierre ?? null;
|
|
const cantidad = parseInt(cancha.Cant_Canchas ?? cancha.cantidad, 10) || 0;
|
|
const reservas = parseInt(cancha.Cant_Reservas_Cupon ?? cancha.reservas, 10) || 0;
|
|
const descuento = parseFloat(cancha.Descuento_Cupon ?? cancha.descuento_cupon) || 0;
|
|
const maxFaltas = parseInt(cancha.Cant_Faltas ?? cancha.cant_faltas, 10) || 0;
|
|
const duracionCupon = parseInt(cancha.Duracion_Cupon ?? cancha.duracion_cupon, 10) || 0;
|
|
|
|
if (tipo === 'F') {
|
|
datoscCanchas.futbol = {
|
|
duracion,
|
|
precio,
|
|
apertura,
|
|
cierre,
|
|
cantidad,
|
|
reservasParaCupon: reservas,
|
|
descuentoCupon: descuento,
|
|
maxFaltas,
|
|
duracionCupon
|
|
};
|
|
} else if (tipo === 'P') {
|
|
datoscCanchas.padel = {
|
|
duracion,
|
|
precio,
|
|
apertura,
|
|
cierre,
|
|
cantidad,
|
|
reservasParaCupon: reservas,
|
|
descuentoCupon: descuento,
|
|
maxFaltas,
|
|
duracionCupon
|
|
};
|
|
} else if (tipo === 'Q') {
|
|
datoscCanchas.quincho = {
|
|
precio,
|
|
reservasMax: reservas
|
|
};
|
|
}
|
|
});
|
|
|
|
console.log('Datos de canchas cargados:', datoscCanchas);
|
|
} catch (error) {
|
|
console.error('Error al cargar datos de canchas desde BD:', error);
|
|
}
|
|
}
|
|
|
|
// Inicializar la interfaz
|
|
function inicializarReserva() {
|
|
const botonesCancha = document.querySelectorAll('.btn-cancha-tipo');
|
|
|
|
botonesCancha.forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
botonesCancha.forEach(b => b.classList.remove('activo'));
|
|
btn.classList.add('activo');
|
|
estadoReserva.tipoCancha = btn.dataset.tipo;
|
|
estadoReserva.fecha = null;
|
|
estadoReserva.horario = null;
|
|
|
|
document.querySelector('.selector-fecha').style.display = 'block';
|
|
document.querySelector('.selector-horario').style.display = 'none';
|
|
document.querySelector('.datos-cliente').style.display = 'none';
|
|
document.querySelector('.resumen-reserva').style.display = 'none';
|
|
|
|
generarDiasDisponibles();
|
|
});
|
|
});
|
|
|
|
// Botón volver
|
|
document.querySelector('.btn-volver').addEventListener('click', () => {
|
|
document.querySelector('.resumen-reserva').style.display = 'none';
|
|
});
|
|
|
|
// --- LÓGICA DE DATOS DEL CLIENTE ---
|
|
document.querySelector('.btn-verificar').addEventListener('click', async () => {
|
|
const nombre = document.getElementById('cliente-nombre').value.trim();
|
|
const telefono = document.getElementById('cliente-telefono').value.trim();
|
|
const dni = document.getElementById('cliente-dni').value.trim();
|
|
|
|
if (!nombre || !telefono || !dni) {
|
|
alert('Por favor completa todos tus datos antes de continuar');
|
|
return;
|
|
}
|
|
|
|
if (!estadoReserva.numeroCancha) {
|
|
alert('Selecciona primero el número de cancha disponible.');
|
|
return;
|
|
}
|
|
|
|
await obtenerEstadoCupon(dni, estadoReserva.tipoCancha);
|
|
actualizarResumen();
|
|
document.querySelector('.resumen-reserva').style.display = 'block';
|
|
});
|
|
|
|
// Botón "Confirmar Reserva" (Pide el código)
|
|
const btnSolicitar = document.getElementById('btn-solicitar-reserva');
|
|
if (btnSolicitar) {
|
|
btnSolicitar.addEventListener('click', async () => {
|
|
await solicitarCodigoWhatsApp();
|
|
});
|
|
}
|
|
|
|
// Botón "Validar y Reservar" (Verifica el código)
|
|
const btnVerificarWA = document.getElementById('btn-verificar-codigo');
|
|
if (btnVerificarWA) {
|
|
btnVerificarWA.addEventListener('click', async () => {
|
|
const codigoIngresado = document.getElementById('codigo-verificacion').value;
|
|
if (codigoIngresado === codigoCorrecto) {
|
|
await guardarReservaFinal();
|
|
} else {
|
|
alert("Código incorrecto. Por favor, inténtelo de nuevo.");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Checkbox quincho
|
|
document.getElementById('incluir-quincho').addEventListener('change', (e) => {
|
|
estadoReserva.quincho = e.target.checked;
|
|
const precioQuincho = datoscCanchas.quincho?.precio || 0;
|
|
|
|
if (e.target.checked && precioQuincho > 0) {
|
|
document.querySelector('.precio-quincho').style.display = 'inline-block';
|
|
document.getElementById('quincho-reservas').style.display = 'block';
|
|
document.getElementById('precio-quincho-val').textContent = precioQuincho.toFixed(2);
|
|
} else {
|
|
estadoReserva.quincho = false;
|
|
document.querySelector('.precio-quincho').style.display = 'none';
|
|
document.getElementById('quincho-reservas').style.display = 'none';
|
|
e.target.checked = false;
|
|
}
|
|
actualizarPrecioTotal();
|
|
});
|
|
|
|
const formComprobante = document.getElementById('form-comprobante');
|
|
if (formComprobante) {
|
|
formComprobante.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
await enviarComprobantePago();
|
|
});
|
|
}
|
|
}
|
|
|
|
// Generar días disponibles
|
|
function generarDiasDisponibles() {
|
|
const contenedor = document.getElementById('dias-disponibles');
|
|
contenedor.innerHTML = '';
|
|
const hoy = new Date();
|
|
const diasSemana = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab'];
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const fecha = new Date(hoy);
|
|
fecha.setDate(fecha.getDate() + i);
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'btn-dia';
|
|
|
|
btn.innerHTML = `<div>${diasSemana[fecha.getDay()]}</div><div>${fecha.getDate()}/${fecha.getMonth() + 1}</div>`;
|
|
btn.dataset.fecha = fecha.toISOString().split('T')[0];
|
|
|
|
btn.addEventListener('click', async () => {
|
|
document.querySelectorAll('.btn-dia').forEach(b => b.classList.remove('activo'));
|
|
btn.classList.add('activo');
|
|
estadoReserva.fecha = btn.dataset.fecha;
|
|
estadoReserva.horario = null;
|
|
|
|
generarHorarios();
|
|
await actualizarDisponibilidadQuincho(btn.dataset.fecha);
|
|
document.querySelector('.selector-horario').style.display = 'block';
|
|
document.querySelector('.datos-cliente').style.display = 'none';
|
|
document.querySelector('.resumen-reserva').style.display = 'none';
|
|
});
|
|
contenedor.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
// Obtener disponibilidad de quinchos
|
|
async function obtenerDisponibilidadQuincho(fecha) {
|
|
try {
|
|
const response = await fetch(`../php/Obtener_Disponibilidad_Quincho.php?fecha=${fecha}`);
|
|
const data = await response.json();
|
|
return data.success ? data.disponibles : 0;
|
|
} catch (error) { return 0; }
|
|
}
|
|
|
|
// Actualizar disponibilidad de quincho en UI
|
|
async function actualizarDisponibilidadQuincho(fecha) {
|
|
const disponibles = await obtenerDisponibilidadQuincho(fecha);
|
|
const checkboxQuincho = document.getElementById('incluir-quincho');
|
|
const quinchoInfo = document.getElementById('quincho-reservas');
|
|
const quinchoAlerta = document.getElementById('quincho-no-disponible');
|
|
|
|
document.getElementById('quincho-disp').textContent = disponibles;
|
|
|
|
if (disponibles === 0) {
|
|
checkboxQuincho.disabled = true;
|
|
checkboxQuincho.checked = false;
|
|
estadoReserva.quincho = false;
|
|
quinchoInfo.style.display = 'none';
|
|
quinchoAlerta.style.display = 'block';
|
|
document.querySelector('.precio-quincho').style.display = 'none';
|
|
} else {
|
|
checkboxQuincho.disabled = false;
|
|
quinchoAlerta.style.display = 'none';
|
|
quinchoInfo.style.display = 'block';
|
|
}
|
|
actualizarPrecioTotal();
|
|
}
|
|
|
|
// Obtener disponibilidad de cancha
|
|
async function obtenerDisponibilidadCancha(fecha, horario, duracion, tipo) {
|
|
try {
|
|
const response = await fetch(`../php/Obtener_Disponibilidad_Cancha.php?fecha=${fecha}&horario=${horario}&duracion=${duracion}&tipo=${tipo === 'futbol' ? 'F' : 'P'}`);
|
|
const data = await response.json();
|
|
return data.success ? data.disponibles : 0;
|
|
} catch (error) { return 0; }
|
|
}
|
|
|
|
// Obtener números de canchas
|
|
async function obtenerNumerosCanchas(fecha, horario, duracion, tipo) {
|
|
try {
|
|
const response = await fetch(`../php/Obtener_Canchas_Numeros.php?fecha=${fecha}&horario=${horario}&duracion=${duracion}&tipo=${tipo === 'futbol' ? 'F' : 'P'}`);
|
|
const data = await response.json();
|
|
return data.success ? data.canchas : [];
|
|
} catch (error) { return []; }
|
|
}
|
|
|
|
// Generar selección de número de cancha
|
|
async function generarSeleccionNumeroCancha(horarioInicio) {
|
|
const contenedor = document.getElementById('botones-canchas-numeros');
|
|
contenedor.innerHTML = '';
|
|
const tipo = estadoReserva.tipoCancha;
|
|
const canchas = await obtenerNumerosCanchas(estadoReserva.fecha, horarioInicio, datoscCanchas[tipo].duracion, tipo);
|
|
|
|
canchas.forEach(cancha => {
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'btn-numero-cancha';
|
|
btn.textContent = `Cancha ${cancha.numero}`;
|
|
btn.dataset.numero = cancha.numero;
|
|
|
|
if (!cancha.disponible) {
|
|
btn.disabled = true;
|
|
btn.classList.add('no-disponible');
|
|
btn.style.opacity = '0.5';
|
|
btn.style.cursor = 'not-allowed';
|
|
} else {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.btn-numero-cancha').forEach(b => b.classList.remove('activo'));
|
|
btn.classList.add('activo');
|
|
estadoReserva.numeroCancha = cancha.numero;
|
|
|
|
document.querySelector('.datos-cliente').style.display = 'block';
|
|
});
|
|
}
|
|
contenedor.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
// Generar horarios
|
|
async function generarHorarios() {
|
|
const contenedor = document.getElementById('grid-horarios');
|
|
contenedor.innerHTML = '';
|
|
|
|
const tipo = estadoReserva.tipoCancha;
|
|
const datos = datoscCanchas[tipo];
|
|
|
|
if (!datos || typeof datos.duracion !== 'number' || !datos.apertura || !datos.cierre) {
|
|
console.error('No hay datos de configuración válidos para la cancha seleccionada:', tipo, datos);
|
|
alert('Error al cargar los horarios. Revisa la configuración de la cancha.');
|
|
return;
|
|
}
|
|
|
|
const duracion = datos.duracion;
|
|
|
|
const [aperturaH, aperturaM] = datos.apertura.split(':').map(Number);
|
|
const [cierreH, cierreM] = datos.cierre.split(':').map(Number);
|
|
const aperturaTotalMin = aperturaH * 60 + aperturaM;
|
|
const cierreTotalMin = cierreH * 60 + cierreM;
|
|
|
|
const ahora = new Date();
|
|
const [selYear, selMonth, selDay] = estadoReserva.fecha.split('-').map(Number);
|
|
const fechaSeleccionada = new Date(selYear, selMonth - 1, selDay);
|
|
const hoy = new Date(ahora.getFullYear(), ahora.getMonth(), ahora.getDate());
|
|
const fechaSelSoloFecha = new Date(fechaSeleccionada.getFullYear(), fechaSeleccionada.getMonth(), fechaSeleccionada.getDate());
|
|
const esHoy = fechaSelSoloFecha.getTime() === hoy.getTime();
|
|
const minutoActual = ahora.getHours() * 60 + ahora.getMinutes();
|
|
|
|
let horaActualMin = aperturaTotalMin;
|
|
const horarios = [];
|
|
|
|
while (horaActualMin + duracion <= cierreTotalMin) {
|
|
const horas = Math.floor(horaActualMin / 60);
|
|
const minutos = horaActualMin % 60;
|
|
const horaFin = Math.floor((horaActualMin + duracion) / 60);
|
|
const minutesFin = (horaActualMin + duracion) % 60;
|
|
|
|
horarios.push({
|
|
inicio: `${String(horas).padStart(2, '0')}:${String(minutos).padStart(2, '0')}`,
|
|
fin: `${String(horaFin).padStart(2, '0')}:${String(minutesFin).padStart(2, '0')}`,
|
|
minutos: horaActualMin
|
|
});
|
|
horaActualMin += duracion;
|
|
}
|
|
|
|
for (const horario of horarios) {
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'horario-slot';
|
|
btn.textContent = `${horario.inicio}\n-\n${horario.fin}`;
|
|
|
|
const inicioArr = horario.inicio.split(':').map(Number);
|
|
const inicioMin = inicioArr[0] * 60 + inicioArr[1];
|
|
const esPasado = fechaSelSoloFecha.getTime() < hoy.getTime() || (esHoy && inicioMin < minutoActual);
|
|
|
|
let disponibles = 0;
|
|
if (!esPasado) {
|
|
disponibles = await obtenerDisponibilidadCancha(estadoReserva.fecha, genericNormalizeTipo(horario.inicio), duracion, tipo);
|
|
}
|
|
|
|
if (esPasado || disponibles === 0) {
|
|
btn.disabled = true;
|
|
btn.classList.add('no-disponible');
|
|
btn.style.opacity = '0.5';
|
|
btn.style.cursor = 'not-allowed';
|
|
} else {
|
|
btn.addEventListener('click', async () => {
|
|
document.querySelectorAll('.horario-slot').forEach(b => b.classList.remove('activo'));
|
|
btn.classList.add('activo');
|
|
estadoReserva.horario = `${horario.inicio} - ${horario.fin}`;
|
|
estadoReserva.numeroCancha = null;
|
|
|
|
document.getElementById('incluir-quincho').checked = false;
|
|
estadoReserva.quincho = false;
|
|
document.querySelector('.precio-quincho').style.display = 'none';
|
|
document.getElementById('quincho-reservas').style.display = 'none';
|
|
|
|
await generarSeleccionNumeroCancha(horario.inicio);
|
|
document.querySelector('.selector-numero-cancha').style.display = 'block';
|
|
document.querySelector('.datos-cliente').style.display = 'none';
|
|
document.querySelector('.resumen-reserva').style.display = 'none';
|
|
});
|
|
}
|
|
contenedor.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function genericNormalizeTipo(inicio) {
|
|
return inicio;
|
|
}
|
|
|
|
// Actualizar resumen
|
|
function actualizarResumen() {
|
|
const tipo = estadoReserva.tipoCancha;
|
|
const datos = datoscCanchas[tipo];
|
|
|
|
document.getElementById('res-cancha').textContent = `${tipo === 'futbol' ? 'Fútbol' : 'Pádel'} - Cancha ${estadoReserva.numeroCancha}`;
|
|
document.getElementById('res-fecha').textContent = new Date(estadoReserva.fecha).toLocaleDateString('es-AR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
|
document.getElementById('res-horario').textContent = estadoReserva.horario;
|
|
|
|
const duracionHoras = Math.floor(datos.duracion / 60);
|
|
const duracionMinutos = datos.duracion % 60;
|
|
document.getElementById('res-duracion').textContent = duracionHoras > 0 ? (duracionMinutos > 0 ? `${duracionHoras}h ${duracionMinutos}m` : `${duracionHoras}h`) : `${duracionMinutos}m`;
|
|
|
|
if (estadoReserva.cuponeado) {
|
|
document.getElementById('res-cupon').textContent = `Cupón activo: ${(estadoReserva.descuento * 100).toFixed(0)}% aplicado`;
|
|
} else if (estadoReserva.reservasRestantes !== null) {
|
|
document.getElementById('res-cupon').textContent = estadoReserva.reservasRestantes > 0 ? `Faltan ${estadoReserva.reservasRestantes} reserva(s) para cupón` : 'Sin cupón activo';
|
|
} else {
|
|
document.getElementById('res-cupon').textContent = '-';
|
|
}
|
|
|
|
actualizarPrecioTotal();
|
|
}
|
|
|
|
function actualizarPrecioTotal() {
|
|
const tipo = estadoReserva.tipoCancha;
|
|
const datos = datoscCanchas[tipo];
|
|
|
|
if (!datos || typeof datos.precio !== 'number') {
|
|
console.error('No se puede actualizar el precio porque no se cargaron los datos de cancha:', tipo, datos);
|
|
return;
|
|
}
|
|
|
|
const basePrecio = datos.precio;
|
|
const descuentoMonto = basePrecio * (estadoReserva.descuento || 0);
|
|
const precioCancha = basePrecio - descuentoMonto;
|
|
const totalPrecio = precioCancha + (estadoReserva.quincho ? (datoscCanchas.quincho?.precio || 0) : 0);
|
|
|
|
const precioOriginalElement = document.getElementById('precio-original');
|
|
const precioOriginalValor = document.getElementById('res-precio-original');
|
|
const labelPrecio = document.getElementById('label-precio');
|
|
|
|
if (estadoReserva.descuento > 0) {
|
|
// Mostrar precio original tachado
|
|
precioOriginalValor.textContent = `$${basePrecio.toFixed(2)}`;
|
|
precioOriginalElement.style.display = 'block';
|
|
labelPrecio.textContent = 'Precio Final:';
|
|
} else {
|
|
// Ocultar precio original
|
|
precioOriginalElement.style.display = 'none';
|
|
labelPrecio.textContent = 'Precio:';
|
|
}
|
|
|
|
document.getElementById('res-precio').textContent = `$${totalPrecio.toFixed(2)}`;
|
|
}
|
|
|
|
async function obtenerEstadoCupon(dni, tipo) {
|
|
try {
|
|
const response = await fetch(`../php/Obtener_Cupon.php?dni=${encodeURIComponent(dni)}&tipo=${encodeURIComponent(tipo)}`);
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
throw new Error(data.message || 'No se pudo obtener el estado del cupón');
|
|
}
|
|
|
|
estadoReserva.cuponeado = data.aplicarDescuento;
|
|
estadoReserva.descuento = data.aplicarDescuento ? parseFloat(data.descuentoCanchas) : 0;
|
|
estadoReserva.cantidadReservas = data.cantidadReservas;
|
|
estadoReserva.umbral = data.umbral;
|
|
estadoReserva.reservasRestantes = data.reservasRestantes;
|
|
|
|
if (!estadoReserva.cuponeado && data.reservasRestantes === 0 && data.umbral === 0) {
|
|
estadoReserva.reservasRestantes = null;
|
|
}
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error al obtener estado de cupón:', error);
|
|
alert('No se pudo determinar el estado del cupón. Intenta nuevamente.');
|
|
estadoReserva.cuponeado = false;
|
|
estadoReserva.descuento = 0;
|
|
estadoReserva.reservasRestantes = null;
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// --- FUNCIONES DE WHATSAPP Y GUARDADO ---
|
|
|
|
async function solicitarCodigoWhatsApp() {
|
|
const nombre = document.getElementById('cliente-nombre').value.trim();
|
|
const telefono = document.getElementById('cliente-telefono').value.trim();
|
|
|
|
const btnSolicitar = document.getElementById('btn-solicitar-reserva');
|
|
btnSolicitar.disabled = true;
|
|
btnSolicitar.textContent = 'Enviando código...';
|
|
|
|
try {
|
|
const response = await fetch('../php/Enviar_Codigo_WSP.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ telefono: telefono, nombre: nombre })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
codigoCorrecto = data.codigo;
|
|
|
|
// Ocultar botones de Confirmar/Volver y mostrar campo de validación
|
|
document.querySelector('.botones-reserva').style.display = 'none';
|
|
document.getElementById('lbl-telefono').textContent = telefono;
|
|
document.getElementById('seccion-verificacion').style.display = 'block';
|
|
|
|
console.log('Código enviado a Selenium:', data.codigo);
|
|
} else {
|
|
alert('Error al enviar el mensaje de WhatsApp.');
|
|
btnSolicitar.disabled = false;
|
|
btnSolicitar.textContent = 'Confirmar Reserva';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Error de conexión con el servidor.');
|
|
btnSolicitar.disabled = false;
|
|
btnSolicitar.textContent = 'Confirmar Reserva';
|
|
}
|
|
}
|
|
|
|
async function guardarReservaFinal() {
|
|
const tipo = estadoReserva.tipoCancha;
|
|
const datos = {
|
|
nombre: document.getElementById('cliente-nombre').value.trim(),
|
|
telefono: document.getElementById('cliente-telefono').value.trim(),
|
|
dni: document.getElementById('cliente-dni').value.trim(),
|
|
fecha: estadoReserva.fecha,
|
|
horario: estadoReserva.horario.split(' - ')[0],
|
|
tipo: tipo === 'futbol' ? 'F' : 'P',
|
|
numeroCancha: estadoReserva.numeroCancha,
|
|
monto: datoscCanchas[tipo].precio,
|
|
incluirQuincho: estadoReserva.quincho,
|
|
montoQuincho: estadoReserva.quincho ? datoscCanchas.quincho.precio : 0
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('../php/Guardar_Reserva.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(datos)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
alert('¡Reserva confirmada exitosamente!');
|
|
|
|
// ADAPTACIÓN: Ocultamos la sección de reserva en vez de refrescar la pantalla
|
|
document.getElementById('seccion-verificacion').style.display = 'none';
|
|
document.querySelector('.resumen-reserva').style.display = 'none';
|
|
|
|
// Cargamos el ID retornado por tu servidor en el input oculto del formulario
|
|
// Nota: Tu php/Guardar_Reserva.php debe retornar un campo id_reserva (ej: result.id_reserva)
|
|
const idNuevaReserva = result.id_reserva || result.id || 0;
|
|
document.getElementById('comprobante-id-reserva').value = idNuevaReserva;
|
|
|
|
// Hacemos visible la ventana de carga para la imagen
|
|
document.getElementById('seccion-comprobante').style.display = 'block';
|
|
} else {
|
|
alert('Error al guardar: ' + result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Ocurrió un error crítico al intentar guardar la reserva.');
|
|
}
|
|
}
|
|
|
|
// --- FUNCIÓN ASÍNCRONA PARA SUBIR EL COMPROBANTE DE PAGO ---
|
|
async function enviarComprobantePago() {
|
|
const idReserva = document.getElementById('comprobante-id-reserva').value;
|
|
const fileInput = document.getElementById('input-file-comprobante');
|
|
const btnSubir = document.querySelector('#form-comprobante button[type="submit"]');
|
|
|
|
if (fileInput.files.length === 0) {
|
|
alert("Por favor, selecciona una foto de tu comprobante.");
|
|
return;
|
|
}
|
|
|
|
btnSubir.disabled = true;
|
|
btnSubir.textContent = "Subiendo archivo...";
|
|
|
|
// Construimos el FormData binario
|
|
const formData = new FormData();
|
|
formData.append('id_reserva', idReserva);
|
|
formData.append('comprobante', fileInput.files[0]);
|
|
|
|
try {
|
|
const response = await fetch('../php/Subir_Comprobante.php', {
|
|
method: 'POST',
|
|
body: formData // El navegador setea automáticamente el multipart/form-data
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
alert("¡Comprobante enviado con éxito! El administrador verificará su pago en la brevedad.");
|
|
location.reload(); // Ahora sí, reiniciamos la vista limpia del complejo
|
|
} else {
|
|
alert("Error: " + data.error);
|
|
btnSubir.disabled = false;
|
|
btnSubir.textContent = "Enviar Comprobante";
|
|
}
|
|
} catch (error) {
|
|
console.error("Error al subir el comprobante:", error);
|
|
alert("Error de conexión al procesar el archivo.");
|
|
btnSubir.disabled = false;
|
|
btnSubir.textContent = "Enviar Comprobante";
|
|
}
|
|
}
|
|
|
|
// Inicializar cuando el DOM esté listo
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await cargarDatosCanchas();
|
|
inicializarReserva();
|
|
}); |