Proyecto_venta_boletos/js/index.js

document.addEventListener('DOMContentLoaded', function() {
    const asientos = document.querySelectorAll('.asiento.disponible');
    const resumenAsientos = document.getElementById('asientosSeleccionados');
    const resumenTotal = document.getElementById('totalVenta');
    const asientosInput = document.getElementById('asientosSeleccionadosInput');
    const formulario = document.getElementById('formularioVenta');
    
    let seleccionados = [];
    const precioBoleto = 50.00; // Precio por boleto
    
    // Función para actualizar el resumen
    function actualizarResumen() {
        if (seleccionados.length === 0) {
            resumenAsientos.textContent = 'Ninguno';
            resumenTotal.textContent = '0.00';
        } else {
            // Mostrar los asientos seleccionados
            const detalles = seleccionados.map(asiento => {
                const fila = Math.floor((asiento.id - 1) / 15) + 1;
                const numero = ((asiento.id - 1) % 15) + 1;
                return `F${fila}-${numero}`;
            });
            
            resumenAsientos.textContent = detalles.join(', ');
            resumenTotal.textContent = (seleccionados.length * precioBoleto).toFixed(2);
            
            // Actualizar campo oculto para el envío del formulario
            asientosInput.innerHTML = '';
            seleccionados.forEach(asiento => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'asientos[]';
                input.value = asiento.id;
                asientosInput.appendChild(input);
            });
        }
    }
    
    // Escuchar clics en los asientos
    asientos.forEach(asiento => {
        asiento.addEventListener('click', function() {
            const asientoId = parseInt(this.getAttribute('data-id'));
            
            // Verificar si ya está seleccionado
            const indice = seleccionados.findIndex(a => a.id === asientoId);
            
            if (indice === -1) {
                // Agregar a seleccionados
                seleccionados.push({
                    id: asientoId,
                    elemento: this
                });
                this.classList.remove('disponible');
                this.classList.add('seleccionado');
            } else {
                // Quitar de seleccionados
                seleccionados.splice(indice, 1);
                this.classList.remove('seleccionado');
                this.classList.add('disponible');
            }
            
            actualizarResumen();
        });
    });
    
    // Validar formulario antes de enviar
    formulario.addEventListener('submit', function(e) {
        if (seleccionados.length === 0) {
            e.preventDefault();
            alert('Por favor, seleccione al menos un asiento.');
            return false;
        }
        
        const nombreCliente = document.getElementById('nombre_cliente').value.trim();
        if (nombreCliente === '') {
            e.preventDefault();
            alert('Por favor, ingrese el nombre del cliente.');
            return false;
        }
        
        return true;
    });
});