{% load carro_tags %}

<div id="productos-carro">

<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_carro > 0 %} ({{total_productos_carro}}) {% 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 request.session.carro.items %}


            {% for key, value in request.session.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_carro|truncate|money_format:"$"}}
                </td>
            </tr>
            {% if request.session.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-->
                    <!--Nota: total_productos_carro viene del context_processor de la aplicacion CarroApp-->
                    {% if total_productos_carro >= 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-->


</div>