{% extends "base.html" %}
{% block title %}Личный кабинет — FitnessCenter{% endblock %}
{% block content %}
<div class="container py-4 py-lg-5">
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card glass-card shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-accent-subtle text-accent fw-bold me-3">{{ request.user.first_name|default:request.user.username|slice:":1" }}</div>
                        <div>
                            <div class="fw-bold">{{ request.user.get_full_name|default:request.user.username }}</div>
                            <div class="text-secondary small">{{ request.user.email }}</div>
                        </div>
                    </div>
                    {% if active_subscription %}
                        <div class="alert alert-success">Активен до {{ active_subscription.end_date|date:"d.m.Y" }}</div>
                    {% else %}
                        <div class="alert alert-warning">Нет активного абонемента</div>
                    {% endif %}
                    <a class="btn btn-outline-light w-100" href="{% url 'logout' %}">Выйти</a>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card glass-card shadow-sm mb-4">
                <div class="card-body">
                    <h2 class="h5 fw-bold mb-3">Оформить абонемент</h2>
                    <div class="row g-3">
                        {% for plan in plans %}
                            <div class="col-md-6">
                                <div class="border rounded-3 p-3 h-100">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <div class="fw-bold">{{ plan.name }}</div>
                                            <div class="text-secondary small">{{ plan.duration_days }} дней</div>
                                        </div>
                                        <div class="fw-bold">{{ plan.price }} ₽</div>
                                    </div>
                                    <p class="text-secondary small mb-3">{{ plan.description }}</p>
                                    <form method="post" action="{% url 'subscribe' plan.id %}">
                                        {% csrf_token %}
                                        <button class="btn btn-accent w-100" type="submit">Купить</button>
                                    </form>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="card glass-card shadow-sm">
                <div class="card-body">
                    <h2 class="h5 fw-bold mb-3">История</h2>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>План</th>
                                    <th>Период</th>
                                    <th>Статус</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for sub in history %}
                                    <tr>
                                        <td>{{ sub.plan.name }}</td>
                                        <td>{{ sub.start_date|date:"d.m.Y" }} — {{ sub.end_date|date:"d.m.Y" }}</td>
                                        <td>
                                            {% if sub.is_active %}
                                                <span class="badge text-bg-success">Активен</span>
                                            {% else %}
                                                <span class="badge text-bg-secondary">Истёк</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr><td colspan="3" class="text-secondary">Покупок пока нет</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}