{% extends 'base.html' %}
{% load humanize %}

{% block content %}
<div class="view-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <div class="view-title">
        <h2>Cuentas por Pagar (CXP)</h2>
        <p>Consolidado de deudas por proveedor en estado Solicitado a Finanzas.</p>
    </div>
    {% if debts %}
    <div>
        <a href="{% url 'export_bank_transfer_csv' %}" class="btn-primary" style="background: var(--efintel-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem;">
            <i data-lucide="download" style="width:16px;"></i> Exportar Nómina de Transferencias (CSV)
        </a>
    </div>
    {% endif %}
</div>

<section class="main-content">
    <div class="data-card">
        <div class="data-table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>RUT</th>
                        <th>Razón Social</th>
                        <th>Datos de Pago</th>
                        <th>Cantidad de Facturas</th>
                        <th>Total Deuda (CLP)</th>
                        <th>Total Deuda (USD)</th>
                        <th>Acción Sugerida</th>
                    </tr>
                </thead>
                <tbody>
                    {% for debt in debts %}
                    <tr>
                        <td style="font-weight: 600; color: var(--efintel-blue);">{{ debt.vendor__rut }}</td>
                        <td style="font-weight: 600;">{{ debt.vendor__name }}</td>
                        <td>
                            {% if debt.vendor__bank %}
                                <div style="font-size: 0.85rem;">{{ debt.vendor__bank }}</div>
                                <div style="font-size: 0.75rem; color: var(--efintel-gray);">{{ debt.vendor__account_type }} - {{ debt.vendor__account_number }}</div>
                            {% else %}
                                <em style="color: var(--efintel-gray);">No registrados</em>
                            {% endif %}
                        </td>
                        <td style="text-align: center;"><span class="badge badge-amber">{{ debt.expense_count }} pendientes</span></td>
                        <td class="amount-cell" style="font-size: 1rem; color: var(--efintel-danger);">
                            ${{ debt.total_clp|floatformat:"0"|intcomma }}
                        </td>
                        <td class="amount-cell" style="font-size: 0.85rem; color: var(--efintel-gray);">
                            ${{ debt.total_usd|floatformat:"2"|intcomma }}
                        </td>
                        <td>
                            <a href="{% url 'expense_list' %}?vendor={{ debt.vendor__id }}" class="btn-primary" style="font-size: 0.75rem;">Ver Detalle</a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 3rem; color: var(--efintel-gray);">
                            No hay cuentas por pagar pendientes en este momento.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}