{% extends "base.html" %}

{% block content %}
<div class="c-form">
    <div class="container pt-5">
        <div class="row">
            <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>
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.logout') }}">Salir</a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="c-users">
                    <p class="c-users__title">Transacciones</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.transactions') }}">Crear Transacción</a>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <ul class="request-list">
                    {% for detalle_transaccion in detalles_transacciones %}
                    <li class="request-item mb-4 d-flex justify-content-center align-items-center"
                        style="border: 1px solid white; padding: 1.5rem; border-radius: 10px;">
                        <div class="text-center"> <!-- Agregado -->
                            <p>Creador por: <span>{{ detalle_transaccion['vendedor'] }}</span></p>
                            <p>Valor: <span>$ {{ '{:,.0f}'.format(detalle_transaccion['monto']) }}</span></p>
                            <p>Tipo de Gasto: <span>{{ detalle_transaccion['tipo'] }}</span></p>
                            <p>Concepto: <span>{{ detalle_transaccion['concepto'] }}</span></p>
                            <p>Descripción: <span>{{ detalle_transaccion['descripcion'] }}</span></p>
                            {% if detalle_transaccion['attachment'] %}
                                <button class="c-btn c-btn-primary js-comprobante mt-4" data-target="modal{{ loop.index }}">Ver comprobante</button>
                            {% endif %}
                            <form class="mt-4" method="POST"
                                action="{{ url_for('routes.modify_transaction', transaction_id=detalle_transaccion['id']) }}">
                                <label for="approval_status">Aprobar/Denegar:</label>
                                <select class="request-dropdown mt-3 mb-3" name="new_status" id="approval_status">
                                    <option value="APROBADA">Aprobar</option>
                                    <option value="RECHAZADA">Denegar</option>
                                </select><br>
                                <button type="submit" class="btn btn-primary">Procesar Solicitud</button>
                            </form>
                        </div>
                    </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']|urlencode) }}" alt="Imagen de la transacción">
                        {% else %}
                            <p>No hay comprobante disponible</p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}