{% 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 fade-up">
        <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 %}
        <div class="row g-4">
            {% for appointment in appointments %}
                <div class="col-12 col-lg-6 fade-up">
                    <article class="card card-sharp border-0 shadow-sm rounded-5 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>
                                    <div class="text-muted">Мастер: {{ appointment.master.name }}</div>
                                </div>
                                <span class="status-badge status-{{ appointment.status }}">{{ appointment.get_status_display }}</span>
                            </div>
                            <div class="row g-3 small mb-3">
                                <div class="col-6">
                                    <span class="text-muted d-block">Дата и время</span>
                                    <strong>{{ appointment.appointment_datetime|date:'d.m.Y H:i' }}</strong>
                                </div>
                                <div class="col-6">
                                    <span class="text-muted d-block">Тип визита</span>
                                    <strong>{{ appointment.get_visit_type_display }}</strong>
                                </div>
                            </div>
                            <p class="mb-3">
                                <span class="text-muted d-block small">Комментарий</span>
                                {% if appointment.comment %}{{ appointment.comment }}{% else %}<span class="text-muted">Не указан</span>{% endif %}
                            </p>
                            {% if appointment.id in eligible_appointments %}
                                <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-2">
                                            <label class="form-label">Ваш отзыв</label>
                                            <textarea class="form-control" name="content" rows="2" placeholder="Напишите впечатления..."></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-4 mb-0 py-2">Отзыв уже оставлен</div>
                            {% endif %}
                        </div>
                    </article>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center bg-white rounded-5 shadow-sm p-5 fade-up">
            <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-4">
        <i class="fas fa-info-circle me-2"></i>
        <strong>Как оставить отзыв?</strong> Вы можете оставить отзыв только после подтверждения администратором статуса <strong>«Оказана»</strong>.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
</section>
{% endblock %}