{% extends './base.html' %}
{% block title %}Registro productos{% endblock %} 

{% block customCSS %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}"> 
{% endblock %}

{%  block body %}
<html>
    <body>
        <form class="ventanaregistro"  method="POST">
            <section id="pantalla" class="container"> 
                
               
                <div>
                    <table class="table table-striped container" style="border: 1px solid black; border-collapse: collapse;">
                        <thead>
                            <tr>
                                
                                <th>Producto</th>
                                <th>Agregar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Usamos el ciclo for basado en la longitud de las listas -->
                            {% for producto in productos %}
                                <tr>
                                    
                                    <td>{{ producto.1 }}</td>
                                    <td>
                                        
                                            <a href="/recibir/{{ producto.1 }}" class="btn btn-success">Registrar producto</a>
                                       
                                        
                                    </td>
                                </tr>
                            {% endfor %}
                            
                        </tbody>
                    </table>
                </div>
                <div class="izquierda">
                    {% with messages = get_flashed_messages() %}
    
                    {% if messages %}
                    <br/>
                    {% for message in messages %}
                    <div class="alert alert-primary alert-dismissible" role="alert">
                        <strong>{{ message }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    {%  endfor %} 
                    {% endif %}
        
                    {% endwith %}
                    
                    <h1 class="h3 mb-3 fw-normal">Registra tus productos</h1>
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <div class="form-floating" style="padding: 10;">
                    <input type="text" class="form-control" id="producto" name="producto" placeholder="Producto">
                    <label for="producto">nombre del produto</label>
                    </div>
                    <div class="form-floating" style="padding: 10;">
                        <input type="text" class="form-control" id="cantidad" name="cantidad" placeholder="Cantidad">
                        <label for="cantidad">cantidad</label>
                    </div>
                    <button class="w-100 btn btn-lg btn-primary" type="submit">Registrar producto</button>
                    
                    </div>

                
               
                

            </section>
            
        

        </form>
        <form class="ventanaregistroderecha" action="/finalcompra" method="POST">
            <section id="pantalla"> 
                <div class="derecha">
                    <h1 class="h3 mb-3 fw-normal"></h1>
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
    
                
                    <div class="derecha container py-3" >
                        <h1>Resumen de tu compra</h1>
                        
        
                        <table class="table table-striped container py-3" style="border: 1px solid black; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th style="padding: 10px;" 10px;>Producto</th>
                                    <th>Precio</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Usamos el ciclo for basado en la longitud de las listas -->
                                {% for i in range(listaprods|length) %}
                                    <tr>
                                        <td style="padding: 10px;">{{ listaprods[i] }}</td>
                                        <td>${{ listaprecios[i] }}</td>
                                        
                                    </tr>
                                {% endfor %}
                                <tr>
                                    <td>
                                        Total: ${{ preciolisto|sum }}</td>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="w-100 btn btn-lg btn-primary" type="submit">Finalizar compra</button>
                    </div>
    
                </section>
                
            
    
            </form>
    
            
                
                
          
        </form>
        
       
        
        
 
    </body>

    
</html>


{% endblock %}