{% extends "admin_base.html" %}

{% block page_title %}Subscription Renewal{% endblock %}

{% block extra_head %}
{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
    <div class="mb-6 flex items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-foreground">Subscription Renewal</h1>
            <p class="mt-1 text-sm text-muted">Manage your subscription and billing details.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div>
            <div class="rounded-xl border border-divider border-l-4 {% if is_expired %}border-l-danger{% elif days_remaining <= 7 %}border-l-warning{% else %}border-l-brand{% endif %} bg-surface p-5 shadow-sm">
        <div>
                    <div class="flex items-center gap-4">
                        <div class="min-w-0 flex-1">
                            <div class="mb-1 text-xs font-bold uppercase tracking-wide {% if is_expired %}text-danger{% elif days_remaining <= 7 %}text-warning{% else %}text-brand{% endif %}">
                                Subscription Status</div>
                            <div class="text-lg font-bold text-foreground">
                                {% if is_expired %}Expired{% else %}Active{% endif %}
                            </div>
                            <div class="mt-2 text-sm text-muted">
                                {% if is_expired %}
                                <span class="text-danger">Expired on {{ expiry_date | date_in_tz(timezone=settings.timezone) }}</span>
                                {% else %}
                                Valid until {{ expiry_date | date_in_tz(timezone=settings.timezone) }}
                                {% endif %}
                            </div>
                        </div>
                        <div class="shrink-0">
                            <i class="fas fa-calendar text-2xl text-muted"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if show_plugin_ui and plugin_renewals %}
    <h4 class="mb-3 text-lg font-semibold text-foreground">What to renew</h4>
    <div class="mb-6 rounded-xl border border-divider bg-surface p-5 shadow-sm">
        <p class="text-sm text-muted">Choose what you want to keep for the next billing period. Items you uncheck stay on until your current expiry date, then turn off.</p>
        <div class="divide-y divide-divider rounded-lg border border-divider">
            {% for plugin in plugin_renewals %}
            <label class="flex flex-wrap items-center justify-between gap-3 p-4">
                <div>
                    <input type="checkbox" class="plugin-renew-checkbox mr-2 size-5 accent-brand" value="{{ plugin.name }}" checked>
                    <strong>{{ plugin.label }}</strong>
                </div>
                <span>{{ currency_symbol }}{{ plugin.daily_fee | price }}/day</span>
            </label>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <h4 class="mb-3 text-lg font-semibold text-foreground">Available Plans</h4>
    {% if subscription_mode and subscription_active %}
    <div class="mb-6 rounded-lg border border-success bg-success/10 p-4 text-foreground" role="status">
        <i class="fas fa-sync-alt mr-2" aria-hidden="true"></i>
        <strong>Auto-renewal is active.</strong> Your subscription will renew automatically each billing period — no manual action needed.
    </div>
    {% elif subscription_mode %}
    <div class="mb-6 rounded-xl border border-divider border-l-4 border-l-success bg-surface p-5 shadow-sm">
        <h5 class="mb-2 text-lg font-semibold text-success"><i class="fas fa-sync-alt mr-2" aria-hidden="true"></i>Subscribe &amp; forget</h5>
        <p class="mb-3 text-sm text-muted">Enable automatic renewal so you never have to come back here before expiry. Your card or UPI mandate will be charged each billing period.</p>
        {% if available_plans | length > 0 %}
        <button type="button" class="blocks-button blocks-button-success" data-renewal-subscription="{{ available_plans[0].id }}">
            Start auto-renewal
        </button>
        {% endif %}
    </div>
    {% endif %}
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        {% for plan in available_plans %}
        <div class="{% if plan.plugin_rows | length > 0 %}md:col-span-2 lg:col-span-3{% endif %}">
            <div class="overflow-hidden rounded-xl border border-divider bg-surface shadow-sm">
                <div class="flex flex-wrap items-center justify-between gap-4 border-b border-divider p-5">
                    <div>
                        <h6 class="m-0 text-lg font-bold text-brand">{% if plan.display_heading %}{{ plan.display_heading }}{% else %}{{ plan.name }}{% endif %}</h6>
                        {% if plan.subtitle %}
                        <p class="mt-1 text-sm text-muted">{{ plan.subtitle }}</p>
                        {% endif %}
                    </div>
                    <div class="flex flex-col items-end gap-1">
                        <span class="text-xl font-bold leading-tight text-foreground tabular-nums">{{ currency_symbol }}{{ plan.price | price }} <span class="text-xs font-medium uppercase tracking-wide text-muted">total</span></span>
                        {% if plan.show_breakup %}
                        <div class="flex flex-col items-end gap-1 text-sm leading-snug" aria-label="Price breakdown">
                            {% if plan.one_time_total > 0 %}
                            <span class="tabular-nums"><span class="mr-1 text-muted">One-time</span> {{ currency_symbol }}{{ plan.one_time_total | price }}</span>
                            {% endif %}
                            {% if plan.recurring_total > 0 %}
                            <span class="tabular-nums"><span class="mr-1 text-muted">Recurring ({{ plan.duration_days }} days)</span> {{ currency_symbol }}{{ plan.recurring_total | price }}</span>
                            {% endif %}
                            {% if plan.platform_fees > 0 %}
                            <span class="tabular-nums"><span class="mr-1 text-muted">Platform</span> {{ currency_symbol }}{{ plan.platform_fees | price }}</span>
                            {% endif %}
                        </div>
                        {% else %}
                        <span class="text-sm text-muted">{{ plan.duration_days }} days</span>
                        {% endif %}
                    </div>
                </div>
                <div class="p-5">
                    {% if plan.show_breakup and plan.plugin_rows | length == 0 and not plan.features %}
                    <dl class="mb-6 rounded-lg border border-divider bg-canvas/50 p-4">
                        {% if plan.one_time_total > 0 %}
                        <div class="flex justify-between gap-4 py-1.5 tabular-nums">
                            <dt>One-time fees</dt>
                            <dd>{{ currency_symbol }}{{ plan.one_time_total | price }}</dd>
                        </div>
                        {% endif %}
                        {% if plan.recurring_total > 0 %}
                        <div class="flex justify-between gap-4 py-1.5 tabular-nums">
                            <dt>Recurring ({{ plan.duration_days }} days)</dt>
                            <dd>{{ currency_symbol }}{{ plan.recurring_total | price }}</dd>
                        </div>
                        {% endif %}
                        {% if plan.platform_fees > 0 %}
                        <div class="flex justify-between gap-4 py-1.5 tabular-nums">
                            <dt>Platform fees</dt>
                            <dd>{{ currency_symbol }}{{ plan.platform_fees | price }}</dd>
                        </div>
                        {% endif %}
                        <div class="mt-2 flex justify-between gap-4 border-t border-divider pt-3 font-bold tabular-nums">
                            <dt>Total due now</dt>
                            <dd>{{ currency_symbol }}{{ plan.price | price }}</dd>
                        </div>
                    </dl>
                    {% elif not show_plugin_ui and not plan.show_breakup %}
                    <p class="mb-6 text-sm text-muted">Renew your subscription for the next billing period ({{ plan.duration_days }} days).</p>
                    {% elif plan.plugin_rows | length > 0 %}
                    <p class="mb-3 text-sm text-muted">One-time fees apply once each (first time only); recurring fees cover the next {{ plan.duration_days }}-day billing period.</p>
                    <div class="blocks-responsive-table mb-5 max-h-[min(28rem,55vh)] overflow-auto">
                        <table class="blocks-admin-table w-full border-collapse">
                            <thead>
                                <tr>
                                    <th scope="col">Item</th>
                                    <th scope="col" class="text-right">One-time</th>
                                    <th scope="col" class="text-right">Daily</th>
                                    <th scope="col" class="text-right">Days</th>
                                    <th scope="col" class="text-right">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in plan.plugin_rows %}
                                <tr class="{% if row.line_total == 0 %}opacity-55{% endif %}">
                                    <td data-label="Item">{{ row.label }}</td>
                                    <td data-label="One-time" class="text-right">
                                        {% if row.one_time_already_paid %}
                                        <span class="text-sm font-semibold uppercase tracking-wide text-success" title="One-time fee already paid">Paid</span>
                                        {% else %}
                                        {{ currency_symbol }}{{ row.one_time_fee | price }}
                                        {% endif %}
                                    </td>
                                    <td data-label="Daily" class="text-right">{{ currency_symbol }}{{ row.daily_fee | price }}</td>
                                    <td data-label="Days" class="text-right">{{ row.days }}</td>
                                    <td data-label="Subtotal" class="text-right font-semibold tabular-nums">{{ currency_symbol }}{{ row.line_total | price }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                {% if plan.one_time_total > 0 %}
                                <tr>
                                    <th scope="row" colspan="4">One-time fees</th>
                                    <td class="text-right">{{ currency_symbol }}{{ plan.one_time_total | price }}</td>
                                </tr>
                                {% endif %}
                                {% if plan.recurring_total > 0 %}
                                <tr>
                                    <th scope="row" colspan="4">Recurring ({{ plan.duration_days }} days)</th>
                                    <td class="text-right">{{ currency_symbol }}{{ plan.recurring_total | price }}</td>
                                </tr>
                                {% endif %}
                                {% if plan.platform_fees > 0 %}
                                <tr>
                                    <th scope="row" colspan="4">Platform fees</th>
                                    <td class="text-right">{{ currency_symbol }}{{ plan.platform_fees | price }}</td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th scope="row" colspan="4">Total due now</th>
                                    <td class="text-right font-bold tabular-nums">{{ currency_symbol }}{{ plan.price | price }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    {% elif plan.features %}
                    <ul class="mb-6 list-none space-y-2 p-0">
                        {% for feature in plan.features | json_decode %}
                        <li class="flex items-center gap-2"><i class="fas fa-check text-success"></i> {{ feature }}</li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="mb-6 text-muted">All features included.</p>
                    {% endif %}

                    {% if show_plugin_ui and plan.plugin_rows | length == 0 and plan.price == 0 %}
                    <p class="mb-6 text-sm text-muted">Nothing billable is turned on right now. Go to Settings → Extensions, turn on what you need, then return here.</p>
                    {% endif %}

                    <button data-renewal-plan="{{ plan.id }}" class="blocks-button blocks-button-primary mt-1">
                        {% if plan.name == current_plan %}Renew{% else %}Upgrade / Switch{% endif %}
                    </button>
                    {% if subscription_mode and not subscription_active %}
                    <button type="button" data-renewal-subscription="{{ plan.id }}" class="blocks-button blocks-button-success mt-2">
                        Subscribe automatically
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</div>

<div id="adminRenewalConfig" hidden 
    data-app-name="{{ app_name }}" 
    data-user-name="{{ user.name }}"
    data-user-email="{{ user.email }}"
    data-gateway-script="{{ gateway_script_url }}"
    data-renew-initiate-url="/admin/api/renewal/initiate"
    data-renew-complete-url="/admin/api/renewal/complete"
    data-subscription-initiate-url="/admin/api/renewal/subscription/initiate"
    data-subscription-complete-url="/admin/api/renewal/subscription/complete"
    data-renewal-ui-mode="{{ renewal_ui_mode }}"
    data-subscription-mode="{% if subscription_mode %}true{% else %}false{% endif %}"
    data-subscription-active="{% if subscription_active %}true{% else %}false{% endif %}"></div>
{% endblock %}

{% block scripts %}
<script src="/plugins/core-tenants/assets/js/admin_renewal.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}