{% extends 'main/base.html' %}
{% load widget_tweaks %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-lg-6 col-md-8">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="card-header bg-gradient-primary text-white py-4">
                <h3 class="mb-0 text-center">Новая заявка на обучение</h3>
            </div>
            <div class="card-body p-4 p-md-5">
                <form method="post" novalidate id="applicationForm">
                    {% csrf_token %}

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Курс</label>
                        {% render_field form.course class="form-select form-select-lg" %}
                        {% if form.course.errors %}<div class="text-danger small mt-1">{{ form.course.errors }}</div>{% endif %}
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Желаемая дата начала</label>
                        <input type="date" 
                               id="date_picker"
                               class="form-control form-control-lg">
                        <input type="hidden" 
                               name="start_date" 
                               id="start_date_hidden">
                        {% if form.start_date.errors %}
                            <div class="text-danger small mt-1">{{ form.start_date.errors }}</div>
                        {% endif %}
                        <div class="form-text text-muted mt-1">Нажмите на поле, чтобы открыть календарь</div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Способ оплаты</label>
                        {% render_field form.payment_method class="form-select form-select-lg" %}
                        {% if form.payment_method.errors %}<div class="text-danger small mt-1">{{ form.payment_method.errors }}</div>{% endif %}
                    </div>

                    <div class="d-grid mt-5">
                        <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow">
                            Отправить заявку
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const datePicker = document.getElementById('date_picker');
        const hiddenInput = document.getElementById('start_date_hidden');
        
        // Устанавливаем минимальную дату - сегодня
        const today = new Date().toISOString().split('T')[0];
        datePicker.min = today;
        
        // При выборе даты преобразуем из ГГГГ-ММ-ДД в ДД.ММ.ГГГГ
        datePicker.addEventListener('change', function() {
            if (this.value) {
                const parts = this.value.split('-');
                const formattedDate = `${parts[2]}.${parts[1]}.${parts[0]}`;
                hiddenInput.value = formattedDate;
            } else {
                hiddenInput.value = '';
            }
        });
        
        // Если есть значение из формы (при ошибке), показываем его
        const oldValue = '{{ form.start_date.value|default:"" }}';
        if (oldValue) {
            // Если значение в формате ДД.ММ.ГГГГ, конвертируем обратно для отображения
            const parts = oldValue.split('.');
            if (parts.length === 3) {
                const isoDate = `${parts[2]}-${parts[1]}-${parts[0]}`;
                datePicker.value = isoDate;
                hiddenInput.value = oldValue;
            }
        }
    });
</script>

{% endblock %}