{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Шаг {{ step }} из 5</h2>
        <div class="step-indicators">{% for s in range(1,6) %}<span class="step-dot {% if s == step %}active{% elif s < step %}completed{% endif %}">Шаг {{ s }}</span>{% endfor %}</div>
    </div>
    <form method="post" action="/service/questionnaire/save/{{ step }}">
        {% if session_id %}<input type="hidden" name="session_id" value="{{ session_id }}">{% endif %}
        {% for item in items %}
        <div class="form-group">
            <label>{{ item.label }}{% if item.required %} <span style="color:var(--danger)">*</span>{% endif %}</label>
            {% if item.type == 'text' %}<input type="text" name="{{ item.question_key }}" {% if item.required %}required{% endif %}>
            {% elif item.type == 'number' %}<input type="number" name="{{ item.question_key }}" {% if item.required %}required{% endif %}>
            {% elif item.type == 'textarea' %}<textarea name="{{ item.question_key }}" {% if item.required %}required{% endif %}></textarea>
            {% elif item.type in ('select','radio') %}
            <select name="{{ item.question_key }}" {% if item.required %}required{% endif %}>
                <option value="">— Выберите —</option>
                {% for opt in (item.options or {}).get('options', []) %}<option value="{{ opt }}">{{ opt }}</option>{% endfor %}
            </select>
            {% elif item.type == 'checkbox' %}<div class="form-check">{% for opt in (item.options or {}).get('options', []) %}
                <label><input type="checkbox" name="{{ item.question_key }}" value="{{ opt }}"> {{ opt }}</label>{% endfor %}</div>
            {% endif %}
            {% if item.help_text %}<small style="color:var(--text-muted)">{{ item.help_text }}</small>{% endif %}
        </div>
        {% endfor %}
        <div class="form-actions">
            {% if step > 1 %}<a class="btn btn-secondary" href="/service/questionnaire/step/{{ step-1 }}">← Назад</a>{% endif %}
            {% if step < 5 %}<button type="submit" class="btn btn-primary">Далее →</button>{% else %}<button type="submit" class="btn btn-success">Завершить</button>{% endif %}
            <button type="button" class="btn btn-secondary" onclick="exitQuestionnaire()">Выйти</button>
        </div>
    </form>
</div>
<div class="modal-overlay" id="modal-exit-questionnaire"><div class="modal" style="max-width:480px">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2>Выйти из опросника?</h2>
    <p style="color:var(--text-muted);font-size:14px;">Вы можете сохранить черновик и продолжить позже</p>
    <div class="form-actions" style="margin-top:16px">
        <button type="button" class="btn btn-primary" onclick="saveAndExit()">Сохранить черновик</button>
        <button type="button" class="btn btn-secondary" onclick="exitWithoutSaving()">Выйти без сохранения</button>
    </div>
</div></div>
<script>
function exitQuestionnaire(){
    document.getElementById('modal-exit-questionnaire').classList.add('open');
}
function saveAndExit(){
    document.querySelector('form').submit();
}
function exitWithoutSaving(){
    window.location.href = '/service/questionnaire';
}
</script>
{% endblock %}