{% extends 'layouts/base.html' %}

{% block title %}Billing{% endblock %}

{% block content %}
<div class="billing-container">
    <div class="page-header">
        <div>
            <h1 class="page-title">Billing</h1>
            <p class="page-subtitle">Track your package purchases and remaining validity.</p>
        </div>
    </div>

    {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
    {% endif %}

    <div class="card">
        <div class="card-header">
            <div>
                <h2 class="card-title">Payment History</h2>
                <p class="card-subtitle">Each subscription is valid for 30 days from the start date.</p>
            </div>
        </div>
        <div class="card-body">
            {% if payments %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Package</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Started</th>
                            <th>Expires</th>
                            <th>Remaining Days</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for payment in payments %}
                        <tr>
                            <td>{{ payment.package_title }}</td>
                            <td>{{ payment.amount }} {{ payment.currency }}</td>
                            <td>
                                <span class="status status-{{ payment.status }}">{{ payment.status|capitalize }}</span>
                            </td>
                            <td>{{ payment.started_at.strftime('%Y-%m-%d %H:%M') if payment.started_at else '—' }}</td>
                            <td>{{ payment.expires_at.strftime('%Y-%m-%d %H:%M') if payment.expires_at else '—' }}</td>
                            <td>
                                {% if payment.remaining_days is not none %}
                                {{ payment.remaining_days }} day{{ 's' if payment.remaining_days != 1 else '' }}
                                {% else %}
                                —
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fa-light fa-inbox"></i>
                <p>No payments recorded yet.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}