{% extends 'base.html' %}

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

{% block content %}
<div class="container py-4">
    <!-- Слайдер -->
    <div id="dashSlider" class="carousel slide mb-4 rounded-4 overflow-hidden shadow animate__animated animate__fadeIn" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#dashSlider" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#dashSlider" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#dashSlider" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#dashSlider" 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: 280px; 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: 280px; 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: 280px; 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: 280px; 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="#dashSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#dashSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- Приветствие -->
    <div class="row align-items-center mb-4 animate__animated animate__fadeInUp">
        <div class="col-md-8">
            <h3 class="fw-bold mb-1">
                <i class="fas fa-user-circle me-2 text-primary"></i>{{ user.full_name }}
            </h3>
            <p class="text-muted mb-0">{{ user.email }} · {{ user.phone }}</p>
        </div>
        <div class="col-md-4 text-md-end mt-3 mt-md-0">
            <a href="{{ url_for('booking') }}" class="btn btn-primary btn-hover-scale">
                <i class="fas fa-plus me-1"></i>Новая заявка
            </a>
        </div>
    </div>

    <!-- Заявки -->
    <div class="card border-0 shadow-sm animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
        <div class="card-header bg-white border-0 pt-3 d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0"><i class="fas fa-list me-2"></i>Мои заявки</h5>
            <span class="badge bg-primary">{{ bookings|length }}</span>
        </div>
        <div class="card-body">
            {% if bookings %}
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <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 class="table-row-animate">
                                <td><strong>{{ b.id }}</strong></td>
                                <td>
                                    <div class="fw-semibold">{{ b.room.name }}</div>
                                    <small class="text-muted">{{ b.room.room_type }}</small>
                                </td>
                                <td>{{ b.event_date }}</td>
                                <td><span class="text-muted">{{ b.payment_method }}</span></td>
                                <td>
                                    {% if b.status == 'Новая' %}
                                        <span class="badge bg-warning text-dark status-badge">
                                            <i class="fas fa-clock me-1"></i>{{ b.status }}
                                        </span>
                                    {% elif b.status == 'Мероприятие назначено' %}
                                        <span class="badge bg-primary status-badge">
                                            <i class="fas fa-check me-1"></i>{{ b.status }}
                                        </span>
                                    {% else %}
                                        <span class="badge bg-success status-badge">
                                            <i class="fas fa-flag-checkered me-1"></i>{{ b.status }}
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if b.review %}
                                        <span class="text-success" title="{{ b.review }}">
                                            <i class="fas fa-check-circle"></i> Оставлен
                                        </span>
                                    {% elif b.status != 'Новая' %}
                                        <button class="btn btn-sm btn-outline-primary btn-hover-scale" 
                                                data-bs-toggle="modal" data-bs-target="#reviewModal{{ b.id }}">
                                            <i class="fas fa-pen me-1"></i>Оставить
                                        </button>
                                        <div class="modal fade" id="reviewModal{{ b.id }}" tabindex="-1">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content border-0 shadow">
                                                    <form method="POST" action="{{ url_for('add_review', booking_id=b.id) }}">
                                                        <div class="modal-header border-0">
                                                            <h5 class="modal-title fw-bold">Отзыв о заявке #{{ 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 border-0">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                                            <button type="submit" class="btn btn-primary">
                                                                <i class="fas fa-paper-plane me-1"></i>Отправить
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        <span class="text-muted"><i class="fas fa-hourglass-half me-1"></i>Ожидание</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-inbox fa-4x mb-3 opacity-50"></i>
                    <h5>У вас пока нет заявок</h5>
                    <p>Создайте первую заявку на бронирование помещения</p>
                    <a href="{{ url_for('booking') }}" class="btn btn-primary btn-hover-scale">
                        <i class="fas fa-plus me-1"></i>Создать заявку
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}