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

{% block content %}
<div class="view-header">
    <div class="view-title">
        <h2>Cuentas por Pagar (CXP)</h2>
        <p>Consolidado de deudas por proveedor en estado Solicitado a Finanzas.</p>
    </div>
</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 %}