{% extends 'base.html' %}

{% block title %}Оформление заявки — Конференции.РФ{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm animate__animated animate__fadeInUp">
                <div class="card-header bg-white border-0 pt-4 pb-0">
                    <h3 class="fw-bold text-center">
                        <i class="fas fa-calendar-plus me-2 text-primary"></i>Оформление заявки
                    </h3>
                    <p class="text-muted text-center mb-0">Выберите помещение и укажите параметры бронирования</p>
                </div>
                <div class="card-body p-4">
                    <form method="POST" action="{{ url_for('booking') }}" id="bookingForm" novalidate>
                        <!-- Выбор помещения -->
                        <div class="mb-4">
                            <label for="room_id" class="form-label fw-semibold">
                                <i class="fas fa-door-open me-1 text-primary"></i>Помещение
                            </label>
                            <select class="form-select form-select-lg" id="room_id" name="room_id" required>
                                <option value="" disabled selected>Выберите помещение...</option>
                                {% for room in rooms %}
                                <option value="{{ room.id }}">
                                    {{ room.name }} ({{ room.room_type }}, {{ room.capacity }} мест)
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Описание помещения -->
                        <div id="roomDescription" class="alert alert-light border d-none mb-4 animate__animated animate__fadeIn">
                            <i class="fas fa-info-circle me-2 text-primary"></i>
                            <span id="roomDescText"></span>
                        </div>

                        <!-- Дата -->
                        <div class="mb-4">
                            <label for="event_date" class="form-label fw-semibold">
                                <i class="fas fa-calendar-alt me-1 text-primary"></i>Дата начала конференции
                            </label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                <input type="text" class="form-control form-control-lg" id="event_date" 
                                       name="event_date" placeholder="ДД.ММ.ГГГГ" 
                                       pattern="\d{2}\.\d{2}\.\d{4}" required>
                            </div>
                            <div class="form-text">Формат: ДД.ММ.ГГГГ (например, 15.06.2026)</div>
                        </div>

                        <!-- Способ оплаты -->
                        <div class="mb-4">
                            <label for="payment_method" class="form-label fw-semibold">
                                <i class="fas fa-credit-card me-1 text-primary"></i>Способ оплаты
                            </label>
                            <select class="form-select form-select-lg" id="payment_method" name="payment_method" required>
                                <option value="" disabled selected>Выберите способ оплаты...</option>
                                <option value="Банковская карта">Банковская карта</option>
                                <option value="Наличные">Наличные</option>
                                <option value="Безналичный расчёт">Безналичный расчёт</option>
                                <option value="Электронный кошелёк">Электронный кошелёк</option>
                            </select>
                        </div>

                        <!-- Кнопки -->
                        <div class="d-flex gap-3 mt-4">
                            <button type="submit" class="btn btn-primary btn-lg flex-grow-1 btn-hover-scale">
                                <i class="fas fa-paper-plane me-2"></i>Отправить заявку
                            </button>
                            <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-arrow-left me-1"></i>Назад
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Данные о помещениях для описания
    const roomData = {
        {% for room in rooms %}
        {{ room.id }}: "{{ room.description or room.room_type + ', вместимость: ' + room.capacity|string + ' чел.' }}",
        {% endfor %}
    };

    document.getElementById('room_id').addEventListener('change', function() {
        const desc = roomData[this.value];
        const descBlock = document.getElementById('roomDescription');
        const descText = document.getElementById('roomDescText');
        if (desc) {
            descText.textContent = desc;
            descBlock.classList.remove('d-none');
        } else {
            descBlock.classList.add('d-none');
        }
    });

    // Маска для даты
    document.getElementById('event_date').addEventListener('input', function(e) {
        let val = this.value.replace(/[^\d]/g, '');
        if (val.length > 2) val = val.slice(0, 2) + '.' + val.slice(2);
        if (val.length > 5) val = val.slice(0, 5) + '.' + val.slice(5);
        if (val.length > 10) val = val.slice(0, 10);
        this.value = val;
    });
</script>
{% endblock %}