{% extends "Base.html" %}

{% block content %}
<main class="conteiner">
    <div class="row">
        <div class="col-md-10 offset-md-1 mt-4">
            <form action="/ventas/" method="POST">
                    <div class="card-header">
                      <h3 class="text-center">Tabla de ventas</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table mt-3">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Fecha</th>
                                    <th scope="col">Bodega</th>
                                    <th scope="col">Artículo</th>
                                    <th scope="col">Cantidad</th>
                                    <th scope="col">Precio Unitario</th>
                                    <th scope="col">Total</th>
                                    <th scope="col">Observaciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for venta in ventas %}
                                <tr>
                                    <th scope="row"> {{venta.id}} </th>
                                    <td>{{ venta.fecha }}</td>
                                    <td>{{ venta.bodega }}</td>
                                    <td>{{ venta.articulo.nombre_articulo }}</td>
                                    <td>{{ venta.cantidad }}</td>
                                    <td>${{ venta.precio_unitario }}</td>
                                    <td>${{ venta.total }}</td>
                                    <td>{{ venta.observaciones }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                  </table>
                </div>

            </form>
        </div>
    </div>
    <div class="fixed-bottom col-12 mc-3">
        <di class="gap-2 d-md-flex justify-content-md-end mb-3">
            <a class="btn btn-success rounded-pill btn-lg" href="{% url 'nueva_venta' %}" >&#128190;</a>
            <br>
            <br>
        </div>
    </div>
</main>

{% endblock  %}