{% extends 'base.html' %}

{% block title %}Личный кабинет — Конференции.РФ{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- Слайдер -->
    <div id="mainSlider" class="carousel slide mb-4 rounded-4 overflow-hidden shadow" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="slider-placeholder d-flex align-items-center justify-content-center" style="height: 300px; background: linear-gradient(135deg, #667eea, #764ba2);">
                    <div class="text-center text-white">
                        <i class="fas fa-chalkboard-teacher fa-3x mb-3"></i>
                        <h3>Аудитории для конференций</h3>
                        <p>Современное оборудование и комфорт</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="slider-placeholder d-flex align-items-center justify-content-center" style="height: 300px; background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <div class="text-center text-white">
                        <i class="fas fa-laptop-house fa-3x mb-3"></i>
                        <h3>Коворкинг-пространства</h3>
                        <p>Идеальная среда для продуктивной работы</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="slider-placeholder d-flex align-items-center justify-content-center" style="height: 300px; background: linear-gradient(135deg, #4facfe, #00f2fe);">
                    <div class="text-center text-white">
                        <i class="fas fa-film fa-3x mb-3"></i>
                        <h3>Кинозалы</h3>
                        <p>Масштабные мероприятия на большом экране</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="slider-placeholder d-flex align-items-center justify-content-center" style="height: 300px; background: linear-gradient(135deg, #43e97b, #38f9d7);">
                    <div class="text-center text-white">
                        <i class="fas fa-handshake fa-3x mb-3"></i>
                        <h3>Удобное бронирование</h3>
                        <p>Оформите заявку за пару кликов</p>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#mainSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- Приветствие -->
    <div class="d-flex justify-content-between align-items-center mb-4 fade-in">
        <h3 class="fw-bold mb-0">
            <i class="fas fa-user-circle me-2 text-primary"></i>{{ user.full_name }}
        </h3>
        <a href="{{ url_for('booking') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Новая заявка
        </a>
    </div>

    <!-- Заявки -->
    <div class="card border-0 shadow-sm fade-in">
        <div class="card-header bg-white border-0 pt-3">
            <h5 class="fw-bold mb-0"><i class="fas fa-list me-2"></i>Мои заявки</h5>
        </div>
        <div class="card-body">
            {% if bookings %}
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Помещение</th>
                                <th>Дата</th>
                                <th>Оплата</th>
                                <th>Статус</th>
                                <th>Отзыв</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for b in bookings %}
                            <tr>
                                <td>{{ b.id }}</td>
                                <td>{{ b.room.name }}</td>
                                <td>{{ b.event_date }}</td>
                                <td>{{ b.payment_method }}</td>
                                <td>
                                    {% if b.status == 'Новая' %}
                                        <span class="badge bg-warning text-dark">{{ b.status }}</span>
                                    {% elif b.status == 'Мероприятие назначено' %}
                                        <span class="badge bg-primary">{{ b.status }}</span>
                                    {% else %}
                                        <span class="badge bg-success">{{ b.status }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if b.review %}
                                        <span class="text-success"><i class="fas fa-check-circle"></i> {{ b.review[:30] }}...</span>
                                    {% elif b.status != 'Новая' %}
                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#reviewModal{{ b.id }}">
                                            <i class="fas fa-pen"></i> Оставить
                                        </button>
                                        <!-- Модальное окно отзыва -->
                                        <div class="modal fade" id="reviewModal{{ b.id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <form method="POST" action="{{ url_for('add_review', booking_id=b.id) }}">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Отзыв о заявке #{{ b.id }}</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <textarea class="form-control" name="review" rows="4" placeholder="Напишите ваш отзыв..." required></textarea>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-primary">Отправить</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-inbox fa-3x mb-3"></i>
                    <p>У вас пока нет заявок</p>
                    <a href="{{ url_for('booking') }}" class="btn btn-primary">Создать первую заявку</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}