{% extends "base.html" %}

{% block title %}Отзывы клиентов{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-light">Отзывы клиентов</h2>
    </div>

    <div class="table-responsive">
        <table class="table table-dark table-striped table-bordered table-hover rounded-table">
            <thead>
                <tr>
                    <th>№</th>
                    <th>Имя пользователя</th>
                    <th>Отзыв</th>
                    <th>Дата</th>
                    <th>Опубликован</th>
                    <th>Действие</th>
                </tr>
            </thead>
            <tbody>
                {% for review in reviews %}
                <tr>
                    <td>{{ review.id }}</td>
                    <td>{{ review.username }}</td>
                    <td>{{ review.review }}</td>
                    <td>{{ review.date.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ 'Да' if review.is_public else 'Нет' }}</td>
                    <td>
                        {% if not review.is_public %}
                        <button class="btn btn-primary btn-sm" 
                                data-bs-toggle="modal" 
                                data-bs-target="#publishModal{{ review.id }}">
                            Опубликовать
                        </button>
                        {% else %}
                        <button class="btn btn-secondary btn-sm" disabled>
                            Опубликовано
                        </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Модальные окна для публикации отзывов -->
{% for review in reviews %}
<div class="modal fade" id="publishModal{{ review.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение публикации</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы уверены что хотите опубликовать этот отзыв?</p>
                <div class="review-details">
                    <p><strong>Имя пользователя:</strong> {{ review.username }}</p>
                    <p><strong>Дата:</strong> {{ review.date.strftime('%Y-%m-%d %H:%M') }}</p>
                    <p><strong>Отзыв:</strong> {{ review.review }}</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary publish-review" 
                        data-review-id="{{ review.id }}"
                        onclick="publishReview({{ review.id }})">
                    Опубликовать
                </button>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}

{% block scripts %}
<script>
function publishReview(reviewId) {
    fetch(`/api/reviews/publish/${reviewId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Закрываем модальное окно
            const modal = bootstrap.Modal.getInstance(document.getElementById(`publishModal${reviewId}`));
            modal.hide();
            
            // Показываем уведомление
            alert('Отзыв успешно опубликован!');
        } else {
            alert(data.error || 'Произошла ошибка при публикации отзыва');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Произошла ошибка при публикации отзыва');
    });
}
</script>
{% endblock %}