{% extends 'base.html' %}

{% block title %}Личный кабинет — Учусь.РФ{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 animate__animated animate__fadeIn">
    <div>
        <h3 class="fw-bold"><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>
    <a href="{{ url_for('apply_course') }}" class="btn btn-primary btn-animate">
        <i class="fas fa-plus me-1"></i>Новая заявка
    </a>
</div>

<!-- Слайдер в кабинете -->
<div class="slider-container mb-4">
    <div class="slider" id="slider">
        <div class="slide active">
            <div class="slide-content bg-primary text-white">
                <i class="fas fa-laptop-code fa-3x mb-3"></i>
                <h4>Повышение квалификации</h4>
                <p>Развивайте навыки в IT-сфере</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-success text-white">
                <i class="fas fa-sync-alt fa-3x mb-3"></i>
                <h4>Переподготовка</h4>
                <p>Освойте новую профессию</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-warning text-dark">
                <i class="fas fa-hard-hat fa-3x mb-3"></i>
                <h4>Охрана труда</h4>
                <p>Обязательные курсы для специалистов</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-info text-white">
                <i class="fas fa-certificate fa-3x mb-3"></i>
                <h4>Сертификация</h4>
                <p>Получите официальный документ</p>
            </div>
        </div>
    </div>
    <button class="slider-btn slider-prev" onclick="prevSlide()"><i class="fas fa-chevron-left"></i></button>
    <button class="slider-btn slider-next" onclick="nextSlide()"><i class="fas fa-chevron-right"></i></button>
    <div class="slider-dots" id="sliderDots"></div>
</div>

<div class="card shadow-sm animate__animated animate__fadeInUp">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-list me-2"></i>Мои заявки</h5>
        <span class="badge bg-primary rounded-pill">{{ applications|length }}</span>
    </div>
    <div class="card-body">
        {% if applications %}
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Курс</th>
                        <th>Дата начала</th>
                        <th>Оплата</th>
                        <th>Статус</th>
                        <th>Отзыв</th>
                    </tr>
                </thead>
                <tbody>
                    {% for a in applications %}
                    <tr class="table-row-animate">
                        <td>{{ a.id }}</td>
                        <td>
                            <strong>{{ a.course.name }}</strong><br>
                            <small class="text-muted">{{ a.course.course_type }} · {{ a.course.duration }}</small>
                        </td>
                        <td>{{ a.start_date }}</td>
                        <td>{{ a.payment_method }}</td>
                        <td>
                            {% if a.status == 'Новая' %}
                                <span class="badge bg-warning text-dark">{{ a.status }}</span>
                            {% elif a.status == 'Идет обучение' %}
                                <span class="badge bg-primary">{{ a.status }}</span>
                            {% else %}
                                <span class="badge bg-success">{{ a.status }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if a.review %}
                                <span class="text-success" title="{{ a.review }}"><i class="fas fa-check-circle"></i> Оставлен</span>
                            {% elif a.status != 'Новая' %}
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#reviewModal{{ a.id }}">
                                    <i class="fas fa-pen"></i> Оставить
                                </button>
                                <div class="modal fade" id="reviewModal{{ a.id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <form method="POST" action="{{ url_for('add_review', app_id=a.id) }}">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Отзыв о курсе «{{ a.course.name }}»</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="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                                    <button type="submit" class="btn btn-primary">Отправить</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <span class="text-muted"><i class="fas fa-hourglass-half"></i> Ожидание</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 class="mb-3">У вас пока нет заявок на курсы</p>
            <a href="{{ url_for('apply_course') }}" class="btn btn-primary btn-animate">
                <i class="fas fa-plus me-1"></i>Создать заявку
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}