{% load carro_tags %}
<div>
    <div class="h4 mr-3 ml-3 ml-md-0 mt-4 mt-md-0  mb-4">
       <span class="fas fa-shopping-cart"></span> Carrito de la compra {% if total_productos > 0 %} ({{total_productos}}) {% endif %}
       
    </div>

    <div class="  mr-3 ml-3 ml-md-0 mt-4 mt-md-0 ">
        <table class="table table-borderless border-right border-left border-top border-bottom  " >
            <thead>
            
                <tr>
                    <th class="text-center" style=" width: 36%;">Productos</th>
                    <th class="text-center" style=" width: 38%;">Cantidad</th>
                    <th class="text-center" style=" width: 36%;">Total</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


<div class="mr-3 ml-3 ml-md-0 mt-4 mt-md-0 overflow-auto" style="height: 390px;" >
  
<table class="table table-hover border-bottom" >

    
    <tbody >

       {% if total_items > 0 %}
        

            {% for key, value in carro.items %}


                <tr class="text-center ">    
                    <td title="{{value.descripcion}}" >{{value.nombre}}</td>
                    <td>

                    

                    <input class=" actualizar-producto " type="number" data-producto="{{value.producto_id}}"
                        value="{{value.cantidad}}" min="1" max="50" id="nuevo{{value.producto_id}}" style="width:60px; vertical-align:bottom;">
                    <input type="hidden" id="viejo{{value.producto_id}}" value="{{value.cantidad}}">
                    <button class="btn btn-sm btn-danger eliminar-producto" data-producto="{{value.producto_id}}" style="width:32px;" >

                        <span class="" id="spiner-eliminar{{value.producto_id}}" style="display: none;"><i class="fa fa-spinner fa-pulse"></i></span>

                        <span id="spiner-trash{{value.producto_id}}"><i class="fas fa-trash"></i></span>

                    </button>


                    </td>
                    <td>
                        {% if value.cantidad < value.stock %}

                        

                        {% else%}
                        <p class="alert alert-info">Último</p>
                        

                        {% endif %}

                       
                        {{value.precio|multiply:value.cantidad|truncate|money_format:"$"}}
                    </td>
                    
                </tr>


            {% endfor %}
        
            
        {% else %}
            <tr>
                <td colspan="3">
                    <div class="alert alert-danger text-center">
                        Todavía no agregas productos
                    </div>
                </td>
            </tr>
        {% endif %}
    
    </tbody>
    

       

</table>
</div>

<!--Estoy modificado a partir de aqui para que los botones (crear pedido y vaciar carro) queden por fuera del scroll-->

<div class=" mr-3 ml-3 ml-md-0 border-top ">
    <table class="mt-2">
        <tfoot>
            <tr>
                <td colspan="3">
                    Total: {{importe_total|truncate|money_format:"$"}}
                </td>
            </tr>
            {% if carro.items %}
            <tr>
                <td colspan="3">
                    <a href="{% url 'carro:limpiar_carro' %}" class="btn btn-danger">
                        Vaciar Carrito
                    </a>
                    
                    
                    <!--Logica para verificar que la compra minima sea de al menos 24 unidades-->
                    {% if total_productos >= 24 or user.is_staff == True %}

                    <!--Este boton activa el modal (ventana emergente) para poder revisar el pedido-->
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#ModalCrearPedido">
                        Crear Pedido
                    </button>

                    {% else %}

                    <!--Este boton activa el modal para avisar al usuario que la compra minima es de 24 unidades-->
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#ModalInfoCliente">
                        Crear Pedido
                    </button>

                    {% endif %}


                    <!--
                    <a href="{% url 'procesar_orden' %}" class="btn btn-success">
                        Crear Pedido
                    </a>
                    -->

                </td>
            </tr>
        
        
            {% endif %}
        </tfoot>

    </table>
</div>


<!--hasta aqui la modificacion-->

<!--Inicio del modal para verificar pedido-->

<div class="modal fade" id="ModalCrearPedido" tabindex="-1" role="dialog" aria-labelledby="ModalLabelCrearPedido"
    aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabelCrearPedido">
                    <span><i class="fas fa-exclamation-triangle h2 text-warning"></i>
                    </span> ¿Está usted seguro de su pedido?
                </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Una vez que presione "Aceptar", su pedido será creado y no podrá ser modificado.
                Si no está seguro, presione "Regresar" para revisarlo nuevamente.
            </div>
            <div class="modal-footer">
                <span class=" h4 mt-2 text-secondary" style="display: none;" id="spiner-aceptar"><i
                        class="fa fa-spinner fa-pulse"></i></span>

                <button type="button" class="btn btn-secondary btn-regresar" data-dismiss="modal">Regresar</button>
                <a href="{% url 'procesar_orden' %}" class="btn btn-success btn-aceptar">Aceptar</a>
            </div>
        </div>
    </div>
</div>

<!--Fin del modal-->

<!--Inicio del modal para avisar al cliente que la compra minima es de 24 unidades-->
<div class="modal fade" id="ModalInfoCliente" tabindex="-1" role="dialog" aria-labelledby="ModalLabelInfoCliente"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabelInfoCliente">
                    <span ><i class="fas fa-times-circle h2 text-danger"></i>
                    </span>Pedido inferior al mínimo permitido.
                </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               La compra mínima debe ser mayor o igual a 12 pares de cristales (24 unidades).
               Por favor, complete esta cantidad para continuar. Disculpe las molestias.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
                
            </div>
        </div>
    </div>
</div>
<!--Fin del modal para avisar al cliente que la compra minima es de 24 unidades-->