<%- include('../partial/head.ejs'); %>
<%- include('../partial/menu.ejs'); %>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div class="container">
    <div class="row no-busca"></div>
</div>


<script>
    function a単ade_carrito(id){
            var inventario={};
            inventario.id_inv = id;
            console.log(inventario.id_inv);
            axios.post('https://elzacatecano.herokuapp.com/agregacarrito',inventario).then((response)=>{                
                alert("Se a単adio a tu carrito");
                console.log("nel");
                //window.location.href="productos.html";
            })
            .catch((error)=>{
                alert("Error de insercion");
                console.log(error);
            });
        }

axios.get("https://elzacatecano.herokuapp.com/productos")
    .then((response)=>{
        console.log(response);
        var cantidad = response.data. length;
        for(i=0;i<cantidad;i++){
        
            const app = document.createElement("div"); // <div></div>
            app.id = "app"+response.data[i].inventario_id; 
            app.className += "col-4"
            app.innerHTML ='<div class="card bg-light" style="width: 18rem; margin: 1rem ; ">'+
                '<img src="'+ response.data[i].img_url +'" class="card-img-top" alt="..."></img>'+
                '<div class="card-body">'+
                    '<h5 class="card-title"> '+ response.data[i].producto +'</h5>'+
                    '<p class="card-text">' + response.data[i].nombre  +'</p>'+
                    '<h6 class="card-text">$'+ response.data[i].precio +'</h6>'+
                    '<button onclick = "a単ade_carrito('+response.data[i].inventario_id+')" class="btn btn-warning"><i class="ri-shopping-cart-2-line"></i> A単ade al Carrito </button>'+
                '</div>'+
            '</div>'
            const ant = document.querySelector(".no-busca"); 
            ant.insertAdjacentElement("afterbegin", app);
        
        }
        document.getElementById('nobusca').style.display = 'none';
        document.getElementById('busca').style.display = '';
    });
    
    
</script>


<%- include('../partial/footer.ejs'); %>
