{% 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 mb-4">
            <div class="col">
                <div class="c-form__container">
                    <h2 class="c-form__title">Listado de Transacciones</h2>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                {% if detalles_transacciones %}
                    <div class="transaction-list">
                        {% for detalle_transaccion in detalles_transacciones %}
                        <div class="request-item mb-4" data-status="{{ detalle_transaccion['status'] }}">
                            <div class="c-form__container">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Fecha</label>
                                            <div class="transaction-field">
                                                <i class="bi bi-calendar3 me-2"></i>
                                                <span>{{ detalle_transaccion['fecha'] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Tipo</label>
                                            <div class="transaction-field">
                                                <i class="bi bi-tag me-2"></i>
                                                <span class="badge badge-{{ 'primary' if detalle_transaccion['tipo'] == 'INGRESO' else 'warning' if detalle_transaccion['tipo'] == 'GASTO' else 'info' }}">
                                                    {{ detalle_transaccion['tipo'] }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Valor</label>
                                            <div class="transaction-field transaction-field--amount">
                                                <i class="bi bi-currency-dollar me-2"></i>
                                                <span class="amount-value">$ {{ '{:,.0f}'.format(detalle_transaccion['monto']) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Estado</label>
                                            <div class="transaction-field">
                                                <i class="bi bi-check-circle me-2"></i>
                                                <span class="badge badge-{{ 'success' if detalle_transaccion['status'] == 'APROBADA' else 'warning' if detalle_transaccion['status'] == 'PENDIENTE' else 'danger' }}">
                                                    {{ detalle_transaccion['status'] }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Concepto</label>
                                            <div class="transaction-field">
                                                <i class="bi bi-list-ul me-2"></i>
                                                <span>{{ detalle_transaccion['concepto'] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="c-form__group">
                                            <label class="c-form__label">Descripción</label>
                                            <div class="transaction-field">
                                                <i class="bi bi-file-text me-2"></i>
                                                <span>{{ detalle_transaccion['descripcion'] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mt-3">
                                    <div class="col">
                                        <button class="c-btn c-btn-primary js-comprobante" data-target="modal{{ loop.index }}">
                                            <i class="bi bi-image me-2"></i>Ver comprobante
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="c-form__container">
                        <div class="text-center py-5">
                            <i class="bi bi-inbox display-1 text-muted"></i>
                            <h4 class="mt-3 text-muted">No hay transacciones registradas</h4>
                            <p class="text-muted">No se encontraron transacciones para mostrar.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Modales para comprobantes -->
        {% for detalle_transaccion in detalles_transacciones %}
            <div class="c-modal" id="modal{{ loop.index }}">
                <div class="c-modal__content">
                    <button class="c-modal__close close-button">&times;</button>
                    {% if detalle_transaccion['attachment'] %}
                        <img class="img-attachment" src="{{ url_for('static', filename='images/' + detalle_transaccion['attachment']) }}" alt="Imagen de la transacción">
                    {% else %}
                        <div class="c-modal__no-image">
                            <i class="bi bi-image display-1 text-muted"></i>
                            <p class="text-muted">No hay comprobante disponible</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
        
        <!-- Paginación -->
        {% if pagination.pages > 1 %}
        <div class="row mt-4">
            <div class="col">
                <div class="c-form__container">
                    <div class="c-pagination">
                        <nav aria-label="Navegación de páginas">
                            <ul class="pagination justify-content-center">
                                {% if pagination.has_prev %}
                                    <li class="page-item">
                                        <a class="page-link c-btn c-btn-primary" href="?page={{ pagination.prev_num }}">
                                            <i class="bi bi-chevron-left me-1"></i>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 c-btn c-btn-primary" href="?page={{ page_num }}">{{ page_num }}</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item active">
                                                <span class="page-link c-btn c-btn-primary c-btn--completed">{{ page_num }}</span>
                                            </li>
                                        {% endif %}
                                    {% else %}
                                        <li class="page-item disabled">
                                            <span class="page-link c-btn c-btn-primary pagination-disabled">...</span>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if pagination.has_next %}
                                    <li class="page-item">
                                        <a class="page-link c-btn c-btn-primary" href="?page={{ pagination.next_num }}">
                                            Siguiente<i class="bi bi-chevron-right ms-1"></i>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        
                        <div class="text-center mt-3">
                            <p class="c-text__small text-muted">
                                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>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}