<!DOCTYPE html>
    <%- include("header.ejs") %>
    <body>
        <title>Stock Management | Ventas</title>
        <div class ="table-container">
            
	<h1  class="title">Tabla de Ventas</h1>
            <table class = "table table-striped table-bordered" >
                <thead>
                    <tr>
                        <th scope ="col">Codigo</th>
                        <th scope ="col">Vendedor</th>
                        <th scope ="col">Total</th> 
                        <th scope ="col">Fecha</th>
                    </tr>
                </thead>
                <tbody>
                <% for(var i=0; i < ventas.length; i++) { %>
                    <tr>
                        <td><%= ventas[i].codigo %></td>
                        <td><%= ventas[i].vendedor %></td>
                        <td><%= ventas[i].total %></td>
                        <td><%= ventas[i].fecha %></td>
                    </tr>
                    <tr>
                        <th>Productos:</th>
                        <td> 
                            <% for (var j=0;j < ventas[i].arr_cantidad.length;j++) { %>
                                <p style="color:red-300;"> <%= ventas[i].arr_cantidad[j] %> x <%= ventas[i].arr_nombre[j] %> </p>
                            <% } %>
                        </td>
                        <td> 
                            <% for (var j=0;j < ventas[i].arr_cantidad.length;j++) { %>
                                <p style="color:red-300;"> <%= ventas[i].arr_cantidad[j] %> x <%= ventas[i].arr_precio[j] %> </p>
                            <% } %>
                        </td>
                    </tr>
                <% } %>
                </tbody>
            </table>
        </div>

    </body>
        <script>
            const d = new Date();
            document.getElementById("mes").innerHTML = d.getMonth() + 1;
        </script>
</html>
