{% extends "tienda/base.html" %}
{% load static %}

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <h2>Mis Recibos</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'portal_usuario' %}">Portal de Usuario</a></li>
                <li class="breadcrumb-item active">Recibos</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row mt-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <a href="{% url 'portal_usuario' %}" class="btn btn-outline-primary">Inicio</a>
            <a href="{% url 'mis_compras' %}" class="btn btn-outline-primary">Compras</a>
            <a href="{% url 'mis_recibos' %}" class="btn btn-primary">Recibos</a>
            <a href="{% url 'mensajes_comprador' %}" class="btn btn-outline-primary">Mensajes</a>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <p class="text-muted">Total de recibos: <strong>{{ total_receipts }}</strong></p>
        {% if receipts %}
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Recibo #</th>
                        <th>Fecha</th>
                        <th>Total</th>
                        <th>Método</th>
                        <th>Referencia</th>
                    </tr>
                </thead>
                <tbody>
                    {% for receipt in receipts %}
                    <tr>
                        <td>{{ receipt.id }}</td>
                        <td>{{ receipt.created_at|date:"d/m/Y H:i" }}</td>
                        <td>{{ receipt.total }}€</td>
                        <td>{{ receipt.get_payment_method_display }}</td>
                        <td>{{ receipt.payment_reference|default:"-" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info mb-0">
            No tienes recibos disponibles todavía.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}