{% load lucide ui %}

{% comment %}
    What the platform bills this club: plan, periods, and the modals for changing plan,
    opening a period, and recording a payment. Included with `club`, `subscription`,
    `dues`, `today`, `subscription_form`, `open_period_form`, `open_period_blurb` already
    in context.
{% endcomment %}
<div class="card mb-6 bg-base-100 shadow">
    <div class="card-body">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <h2 class="card-title text-base">{% lucide "receipt-euro" size=18 %} Billing</h2>
            <div class="flex flex-wrap gap-2">
                <button class="btn btn-outline btn-sm gap-2" type="button" onclick="document.getElementById('subscription_modal').showModal()">
                    {% lucide "layers" size=14 %} {% if subscription %}Change plan{% else %}Start billing{% endif %}
                </button>
                {% if subscription %}
                    <button class="btn btn-primary btn-sm gap-2" type="button" onclick="document.getElementById('open_period_modal').showModal()">
                        {% lucide "calendar-plus" size=14 %} {% if club.is_archived %}Reactivate{% else %}Open period{% endif %}
                    </button>
                {% endif %}
            </div>
        </div>

        {% if not subscription %}
            <p class="text-sm opacity-70">This club is not billed for anything. Put it on a tier to start.</p>
        {% else %}
            <p class="text-sm opacity-70">
                On plan <strong>{{ subscription.tier.name }}</strong>.
                {% if subscription.auto_renew %}
                    Renews automatically 30 days before the period ends.
                {% else %}
                    <span class="badge badge-warning badge-sm">Auto-renew off</span> — you must open each period by hand, or this club uses the platform for free.
                {% endif %}
                {% if subscription.auto_archive %}
                    Archived automatically when a period goes unpaid past its grace period.
                {% else %}
                    <span class="badge badge-warning badge-sm">Auto-archive off</span> — it will never be archived for non-payment.
                {% endif %}
            </p>

            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Period</th>
                            <th class="text-right">Billed</th>
                            <th class="text-right">Paid</th>
                            <th class="text-right">Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for due in dues %}
                            <tr>
                                <td>
                                    {{ due.period_start|date:"j M Y" }} — {{ due.period_end|date:"j M Y" }}
                                    <div class="text-xs opacity-60">{{ due.tier.name }} · {{ due.invoice.number }} · grace to {{ due.grace_until|date:"j M Y" }}</div>
                                </td>
                                <td class="text-right tabular-nums">€{{ due.amount|floatformat:2 }}</td>
                                <td class="text-right tabular-nums">€{{ due.amount_paid|floatformat:2 }}</td>
                                <td class="text-right">
                                    {% if due.status == "paid" %}
                                        <span class="badge badge-success gap-1">{% lucide "check" size=12 %} Paid</span>
                                    {% elif due.status == "waived" %}
                                        <span class="badge badge-outline gap-1">{% lucide "check" size=12 %} Waived</span>
                                    {% elif due.grace_until < today %}
                                        <span class="badge badge-error gap-1">{% lucide "triangle-alert" size=12 %} Overdue</span>
                                    {% elif due.period_end < today %}
                                        <span class="badge badge-warning gap-1">{% lucide "hourglass" size=12 %} In grace</span>
                                    {% else %}
                                        <span class="badge badge-outline">{{ due.get_status_display }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-right flex flex-row gap-2 justify-end">
                                    {% if due.is_owing %}
                                        <button class="btn btn-primary btn-outline btn-sm gap-1" type="button" onclick="document.getElementById('{{ due.pk|dom_id:"due_pay_modal" }}').showModal()">{% lucide "banknote" size=14 %} Add payment</button>
                                        {% if not due.payments.all %}
                                            <form class="inline" method="post" action="{% url 'controlpanel:due_waive' due.pk %}">
                                                {% csrf_token %}
                                                <button class="btn btn-outline btn-sm gap-1" type="submit">{% lucide "ban" size=14 %} Waive payment</button>
                                            </form>
                                        {% endif %}
                                    {% endif %}
                                    <a class="btn btn-accent btn-outline btn-sm gap-1" href="{% url 'controlpanel:due_invoice' due.pk %}">{% lucide "file-down" size=14 %} Download invoice</a>
                                </td>
                            </tr>
                            {% for payment in due.payments.all %}
                                <tr class="text-xs opacity-70">
                                    <td colspan="2" class="pl-8">
                                        {% lucide "corner-down-right" size=12 %}
                                        {{ payment.paid_at|date:"j M Y" }} · {{ payment.get_method_display }}{% if payment.reference %} · {{ payment.reference }}{% endif %}
                                    </td>
                                    <td class="text-right tabular-nums">€{{ payment.amount|floatformat:2 }}</td>
                                    <td colspan="2"></td>
                                </tr>
                            {% endfor %}
                        {% empty %}
                            <tr>
                                <td colspan="5" class="text-center opacity-60">No periods billed yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% comment %} Dialogs live outside the table: <tbody> may only contain <tr> elements. {% endcomment %}
            {% for due in dues %}
                {% if due.is_owing %}
                    {% url 'controlpanel:due_pay' due.pk as due_pay_url %}
                    {% include "controlpanel/_modal_form.html" with modal_id=due.pk|dom_id:"due_pay_modal" title="Record payment" form=due.payment_form action_url=due_pay_url submit_label="Record payment" submit_icon="banknote" %}
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>
</div>

{% url 'controlpanel:club_subscribe' club.pk as subscribe_url %}
{% include "controlpanel/_modal_form.html" with modal_id="subscription_modal" title=subscription|yesno:"Change plan,Start billing" form=subscription_form action_url=subscribe_url submit_label="Save plan" submit_icon="layers" blurb="Changing tier does not re-bill: the current period keeps the amount it was issued at, and the new rate applies from the next one." %}

{% if subscription %}
    {% url 'controlpanel:club_open_period' club.pk as open_period_url %}
    {% include "controlpanel/_modal_form.html" with modal_id="open_period_modal" title=club.is_archived|yesno:"Reactivate,Open period" form=open_period_form action_url=open_period_url submit_label="Open period" submit_icon="calendar-plus" blurb=open_period_blurb %}
{% endif %}