{% extends "base.html" %}

{% block content %}
<div class="c-form">
    <div class="container pt-5">
        <div class="row">
            {% if user_role == 'COORDINADOR' %}
                <div class="col">
                    <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.menu_manager', user_id=user_id) }}">Volver</a>
                </div>
            {% elif user_role == 'VENDEDOR' %}
                <div class="col">
                    <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.menu_salesman', user_id=user_id) }}">Volver</a>
                </div>
            {% endif %}
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="./logout">Salir</a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="c-users">
                    <p class="c-users__title">Listado de Transacciones</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <ul class="request-list c-overflow">
                    {% for detalle_transaccion in detalles_transacciones %}
                    <li class="request-item mb-4" data-status="{{ detalle_transaccion['status'] }}">
                        <p><strong>Fecha:</strong> <span>{{ detalle_transaccion['fecha'] }}</span></p>
                        <p><strong>Tipo de transacción:</strong> <span>{{ detalle_transaccion['tipo'] }}</span></p>
                        <p><strong>Concepto:</strong> <span>{{ detalle_transaccion['concepto'] }}</span></p>
                        <p><strong>Descripción:</strong> <span>{{ detalle_transaccion['descripcion'] }}</span></p>
                        <p><strong>Valor:</strong> <span>$ {{ '{:,.0f}'.format(detalle_transaccion['monto']) }}</span></p>
                        <p><strong>Estado:</strong> <span>{{ detalle_transaccion['status'] }}</span></p>
                        <button class="c-btn c-btn-primary js-comprobante mt-3" data-target="modal{{ loop.index }}">Ver comprobante</button>
                    </li>
                    {% endfor %}
                </ul>
                {% for detalle_transaccion in detalles_transacciones %}
                    <div class="c-modal" id="modal{{ loop.index }}">
                        {% if detalle_transaccion['attachment'] %}
                            <img class="img-attachment" src="{{ url_for('static', filename='images/' + detalle_transaccion['attachment']) }}" alt="Imagen de la transacción">
                        {% else %}
                            <p>No hay comprobante disponible</p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- Paginación -->
        {% if pagination.pages > 1 %}
        <div class="row mt-4">
            <div class="col">
                <div class="c-pagination">
                    <nav aria-label="Navegación de páginas">
                        <ul class="pagination">
                            {% if pagination.has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ pagination.prev_num }}">‹ Anterior</a>
                                </li>
                            {% endif %}
                            
                            {% for page_num in pagination.iter_pages() %}
                                {% if page_num %}
                                    {% if page_num != pagination.page %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ page_num }}</span>
                                        </li>
                                    {% endif %}
                                {% else %}
                                    <li class="page-item disabled">
                                        <span class="page-link">...</span>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if pagination.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ pagination.next_num }}">Siguiente ›</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                <p class="pagination-info">
                    Mostrando {{ pagination.per_page * (pagination.page - 1) + 1 }} a 
                    {{ pagination.per_page * (pagination.page - 1) + pagination.items|length }} 
                    de {{ pagination.total }} transacciones
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}