{% extends "management/base.html" %}
{% load i18n lucide %}

{% block heading %}{% blocktrans with number=invoice.number %}Invoice {{ number }}{% endblocktrans %}{% endblock heading %}
{% block topbar_context %}<span class="text-sm text-muted">{{ member }}</span>{% endblock topbar_context %}

{% block actions %}
    <a class="btn btn-outline gap-2" href="{% url 'management:membership_list' %}">{% lucide "arrow-left" size=16 %} {% trans "Dues & billing" %}</a>
    <a class="btn btn-outline gap-2" href="{% url 'management:membership_invoice_pdf' membership.pk %}">{% lucide "file-down" size=16 %} {% trans "Download PDF" %}</a>
{% endblock actions %}

{% block panel %}
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div class="card p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Amount due" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if invoice.is_paid %}text-ok{% else %}text-ink{% endif %}">€{{ invoice.amount }}</div>
            <div class="mt-1 text-[13px] text-muted">
                {% if invoice.is_paid %}{% trans "Paid" %}{% elif invoice.is_overdue %}<span class="text-club">{% trans "Overdue" %}</span>{% else %}{% blocktrans with date=invoice.due_date|date:"j F Y" %}Due {{ date }}{% endblocktrans %}{% endif %}
            </div>
        </div>
        <div class="card p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Sent" %}</div>
            <div class="mt-1 font-display text-[22px] leading-none font-extrabold text-ink">{{ invoice.sent_at|date:"j M Y" }}</div>
            <div class="mt-1 text-[13px] text-muted">{{ invoice.sent_to_email }}{% if invoice.sent_to_guardian %} <span class="text-dim">({% trans "parent/guardian" %})</span>{% endif %}</div>
        </div>
        <div class="card p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Reminders" %}</div>
            <div class="mt-1 font-display text-[22px] leading-none font-extrabold text-ink tabular-nums">{{ invoice.reminder_count }}</div>
            <div class="mt-1 text-[13px] text-muted">
                {% if invoice.last_reminder_sent_at %}{% blocktrans with date=invoice.last_reminder_sent_at|date:"j M Y" %}Last sent {{ date }}{% endblocktrans %}{% else %}{% trans "None sent yet" %}{% endif %}
            </div>
        </div>
    </div>

    <div class="card card-body gap-3">
        <h2 class="card-title">{% lucide "receipt" size=18 %} {% trans "Details" %}</h2>
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div>
                <div class="text-xs text-muted">{% trans "Member" %}</div>
                <div class="font-semibold text-ink"><a class="link link-hover" href="{% url 'management:member_detail' member.pk %}">{{ member }}</a></div>
            </div>
            <div>
                <div class="text-xs text-muted">{% trans "Season" %}</div>
                <div>{{ membership.season }}</div>
            </div>
            <div>
                <div class="text-xs text-muted">{% trans "Fee status" %}</div>
                <div>
                    <span class="badge badge-sm
                        {% if membership.fee_status == "paid" %}badge-success
                        {% elif membership.fee_status == "partially_paid" %}badge-warning
                        {% elif membership.fee_status == "unpaid" %}badge-error
                        {% else %}badge-neutral{% endif %}">
                        {{ membership.get_fee_status_display }}
                    </span>
                </div>
            </div>
            <div>
                <div class="text-xs text-muted">{% trans "Invoice number" %}</div>
                <div class="font-mono">{{ invoice.number }}</div>
            </div>
        </div>
    </div>
{% endblock panel %}