{% extends 'base.html' %}

{% block content %}
    <div class="container">
        <h2>Detalle de Compra: {{ compra.nombre_compra }}</h2>

        <!-- Contenedor con tabla responsiva -->
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Fecha de Pago</th>
                        <th>Observaciones</th>
                        <th>Monto Extra</th>
                        <th>Monto Pagado</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pago in pagos %}
                    <tr>
                        <td>{{ pago.fecha_pago }}</td>
                        <td>{{ pago.observaciones }}</td>
                        <td>${{ pago.monto_extra }}</td>
                        <td>${{ pago.monto_pagado }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="text-center">No se han registrado pagos para esta compra.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Botones de acción -->
        <div class="d-flex justify-content-end mt-3">
            <div class="dropdown">
                <button class="btn btn-dark btn-sm me-2 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Descargar Reportes
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                    <li> <a href="{% url 'reporte_detalle_compra' compra.id %}" class="dropdown-item">  Generar PDF </a></li>
                    <li> <a href="{% url 'exportar_excel' compra.id %}" class="dropdown-item">Generar Excel</a> </li>
                    <li> <a href="{% url 'exportar_csv' compra.id %}" class="dropdown-item">Generar CSV</a> </li>
                </ul>
            </div>  
            <a href="{% url 'lista_compras' %}" class="btn btn-secondary btn-sm me-2">
                Volver a la Lista
            </a>
            <a href="{% url 'registrar_pago' compra.id %}" class="btn btn-primary btn-sm me-2">
                Registrar Pago
            </a>    
          
        </div>
        <!-- Información de pago -->
        <div class="mt-3">
            <h5>Monto Total: ${{ compra.monto_pago }}</h5>
            <h5>Total Pagado: ${{ total_pagado }}</h5>
            <h5>Restante: ${{ restante }}</h5>
            <h5>Estado: 
                <span class="badge 
                    {% if estado == 'Completado' %}
                        badge-success
                    {% elif estado == 'Pagado Parcialmente' %}
                        badge-warning
                    {% else %}
                        badge-danger
                    {% endif %}">
                    {{ estado }}
                </span>
            </h5>
        </div>
    </div>
{% endblock %}

{% block footer %}
    <footer class="footer mt-auto py-3 bg-dark text-white">
        <div class="container">
            <span class="text-muted">© 2024 Mi Aplicación de Compras. Todos los derechos reservados.</span>
        </div>
    </footer>
{% endblock %}