{% extends 'base.html' %}
{% block title %}Мои записи — Sharp Cut{% endblock %}
{% block content %}
<section class="container py-5">
    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4">
        <div>
            <h1 class="display-6 fw-bold mb-2">Мои записи</h1>
            <p class="text-muted mb-0">{{ user.username }} · {{ user.email }}</p>
        </div>
        <div class="align-self-lg-end">
            <a class="btn btn-dark rounded-pill px-4" href="{% url 'appointment_create' %}">Новая запись</a>
        </div>
    </div>
    {% if appointments_with_forms %}
        <div class="row g-4">
            {% for appointment, form in appointments_with_forms %}
                <div class="col-12 col-lg-6">
                    <article class="card card-sharp border-0 shadow-sm rounded-3 h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between gap-3 mb-3">
                                <div>
                                    <h2 class="h5 fw-bold mb-1">{{ appointment.service.name }}</h2>
                                    Мастер: <strong>{{ appointment.master.name }}</strong>
                                </div>
                                <span class="status-badge status-{{ appointment.status }}">{{ appointment.get_status_display }}</span>
                            </div>
                            <div class="small mb-3">
                                <span class="text-muted d-block">Дата и время</span>
                                <strong>{{ appointment.appointment_datetime|date:'d.m.Y H:i' }}</strong>
                                <span class="text-muted d-block mt-2">Тип визита</span>
                                <strong>{{ appointment.get_visit_type_display }}</strong>
                                <span class="text-muted d-block mt-2">Способ оплаты</span>
                                <strong>{{ appointment.get_payment_method_display }}</strong>
                            </div>
                            <p class="mb-3">
                                <span class="text-muted d-block small">Комментарий</span>
                                {% if appointment.comment %}<strong>{{ appointment.comment }}</strong>{% else %}<span class="text-muted">Не указан</span>{% endif %}
                            </p>
                            {% if form %}
                                <button class="btn btn-outline-dark rounded-pill" data-bs-toggle="collapse" data-bs-target="#reviewForm{{ appointment.id }}">
                                    Оставить отзыв
                                </button>
                                <div class="collapse mt-3" id="reviewForm{{ appointment.id }}">
                                    <form method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="feedback_appointment_id" value="{{ appointment.id }}">
                                        <div class="mb-3">
                                            <label for="id_content_{{ appointment.id }}" class="form-label">Ваш отзыв</label>
                                            <textarea class="form-control rounded-3"
                                                      id="id_content_{{ appointment.id }}"
                                                      name="content"
                                                      rows="2"
                                                      placeholder="Напишите впечатления...">{% if form.content.value %}{{ form.content.value }}{% endif %}</textarea>
                                        </div>
                                        <button class="btn btn-dark btn-sm rounded-pill" type="submit">Отправить</button>
                                    </form>
                                </div>
                            {% elif appointment.feedback %}
                                <div class="alert alert-success rounded-3 mb-0 py-2">Отзыв уже оставлен</div>
                            {% endif %}
                        </div>
                    </article>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center bg-white rounded-3 shadow-sm p-5">
            <h2 class="h4 fw-bold">У вас пока нет записей</h2>
            <p class="text-muted">Оформите первую запись на странице каталога.</p>
            <a class="btn btn-dark rounded-pill px-4" href="{% url 'catalog' %}">Перейти в каталог</a>
        </div>
    {% endif %}
    <div class="alert alert-info alert-dismissible fade show mt-4 rounded-3">
        Как оставить отзыв? Вы можете оставить отзыв только после подтверждения администратором статуса <strong>«Оказана»</strong>.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</section>
{% endblock %}