<!-- views/realizar-compra.ejs -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realizar Compra - Mandarin</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
    <h1 class="mb-4">Realizar Compra</h1>

    <div class="row" id="productos-container">
        <% let currentCategoria = ''; %>
        <% productos.forEach(producto => { %>
            <% if (currentCategoria !== producto.categoria) { %>
                <% currentCategoria = producto.categoria; %>
                <div class="col-12">
                    <h2 class="mt-4 mb-3"><%= producto.categoria %></h2>
                </div>
            <% } %>

            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><%= producto.nombre %></h5>
                        <p class="card-text"><%= producto.descripcion %></p>
                        <p class="card-text"><strong>Precio: $<%= producto.precio %></strong></p>
                        <div class="input-group mb-3">
                            <span class="input-group-text">Cantidad</span>
                            <input type="number"
                                   class="form-control cantidad-input"
                                   value="0"
                                   min="0"
                                   data-id="<%= producto.id %>"
                                   data-precio="<%= producto.precio %>">
                        </div>
                    </div>
                </div>
            </div>
        <% }); %>
    </div>

    <div class="card mt-4 mb-4">
        <div class="card-body">
            <h3>Resumen de compra</h3>
            <div id="resumen-container">
                <p>No hay productos seleccionados</p>
            </div>
            <h4 class="mt-3">Total: $<span id="total">0</span></h4>
            <button class="btn btn-primary mt-3" id="realizar-compra">Realizar Compra</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const cantidadInputs = document.querySelectorAll('.cantidad-input');
        const resumenContainer = document.getElementById('resumen-container');
        const totalSpan = document.getElementById('total');
        const realizarCompraBtn = document.getElementById('realizar-compra');

        function actualizarResumen() {
            let productos = [];
            let total = 0;
            let hayProductos = false;

            cantidadInputs.forEach(input => {
                const cantidad = parseInt(input.value);
                if (cantidad > 0) {
                    hayProductos = true;
                    const precio = parseFloat(input.dataset.precio);
                    const subtotal = cantidad * precio;
                    total += subtotal;
                    productos.push({
                        id: parseInt(input.dataset.id),
                        cantidad: cantidad
                    });
                }
            });

            // Mostrar los productos seleccionados en el resumen
            if (hayProductos) {
                let resumenHTML = '<ul>';
                productos.forEach(prod => {
                    const input = document.querySelector(`.cantidad-input[data-id="${prod.id}"]`);
                    const nombre = input.closest('.card').querySelector('.card-title').textContent;
                    resumenHTML += `<li>${nombre}: ${prod.cantidad} unidades</li>`;
                });
                resumenHTML += '</ul>';
                resumenContainer.innerHTML = resumenHTML;
            } else {
                resumenContainer.innerHTML = '<p>No hay productos seleccionados</p>';
            }

            totalSpan.textContent = total;
            return productos;
        }

        cantidadInputs.forEach(input => {
            input.addEventListener('change', actualizarResumen);
        });

        realizarCompraBtn.addEventListener('click', async () => {
            const productos = actualizarResumen();

            if (productos.length === 0) {
                alert('Por favor seleccione al menos un producto');
                return;
            }

            // Deshabilitar el botón mientras se procesa
            realizarCompraBtn.disabled = true;
            realizarCompraBtn.textContent = 'Procesando...';

            try {
                console.log('Enviando datos:', { productos }); // Para depuración

                const response = await fetch('/api/compras/comprar', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ productos })
                });

                console.log('Respuesta status:', response.status); // Para depuración

                const result = await response.json();
                console.log('Respuesta completa:', result); // Para depuración

                if (response.ok) {
                    alert('Compra realizada con éxito');
                    // Reiniciar formulario
                    cantidadInputs.forEach(input => input.value = 0);
                    actualizarResumen();
                } else {
                    throw new Error(result.error || 'Error al procesar la compra');
                }
            } catch (error) {
                console.error('Error detallado:', error);
                alert('Error al procesar la compra: ' + error.message);
            } finally {
                // Reactivar el botón
                realizarCompraBtn.disabled = false;
                realizarCompraBtn.textContent = 'Realizar Compra';
            }
        });
    });
</script>
</body>
</html>