{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Настройка опросника</h2>
        <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-qitem').classList.add('open')">+ Добавить вопрос</button>
    </div>
    <div class="tabs"><a href="/service/questionnaire-config" class="{% if not sel_step %}active{% endif %}">Все</a>{% for s in range(1,6) %}<a href="/service/questionnaire-config?step={{ s }}" class="{% if sel_step == s %}active{% endif %}">Шаг {{ s }}</a>{% endfor %}</div>
    <div class="table-wrap"><table><thead><tr><th>Шаг</th><th>Раздел</th><th>Ключ</th><th>Вопрос</th><th>Тип</th><th>Обязат.</th><th>Порядок</th><th>Активен</th><th class="actions"></th></tr></thead>
        <tbody>{% for qi in items %}<tr>
            <td>{{ qi.step }}</td><td>{{ qi.section }}</td><td><code>{{ qi.question_key }}</code></td><td>{{ qi.label }}</td>
            <td>{{ qi.type }}</td><td>{{ '✓' if qi.required else '—' }}</td><td>{{ qi.sort_order }}</td>
            <td><form method="post" action="/service/questionnaire-config/toggle"><input type="hidden" name="id" value="{{ qi.id }}"><button class="btn btn-{{ 'success' if qi.is_active else 'secondary' }} btn-sm">{{ '✓' if qi.is_active else '✕' }}</button></form></td>
            <td class="actions">
                <button class="btn btn-secondary btn-sm" onclick="editQItem({{ qi.id }},{{ qi.step }},'{{ qi.section|e }}','{{ qi.question_key|e }}','{{ qi.label|e }}','{{ qi.type }}','{{ qi.required|lower }}','{{ qi.sort_order }}','{{ qi.help_text|e }}')">✎</button>
                <form method="post" action="/service/questionnaire-config/delete" style="display:inline" onsubmit="return confirm('Удалить вопрос?')"><input type="hidden" name="id" value="{{ qi.id }}"><button class="btn btn-danger btn-sm">✕</button></form>
            </td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-qitem"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-qitem-title">Новый вопрос</h2>
    <form method="post" id="modal-qitem-form">
        <input type="hidden" name="id" id="qitem-id">
        <div class="form-row">
            <div class="form-group"><label>Шаг</label><select name="step" id="qitem-step"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div>
            <div class="form-group"><label>Раздел</label><input type="text" name="section" id="qitem-section"></div>
        </div>
        <div class="form-row">
            <div class="form-group"><label>Ключ</label><input type="text" name="question_key" id="qitem-question_key" required></div>
            <div class="form-group"><label>Тип</label><select name="type" id="qitem-type"><option value="text">text</option><option value="number">number</option><option value="select">select</option><option value="radio">radio</option><option value="checkbox">checkbox</option><option value="textarea">textarea</option></select></div>
        </div>
        <div class="form-group"><label>Вопрос</label><input type="text" name="label" id="qitem-label" required></div>
        <div class="form-row">
            <div class="form-group"><label>Порядок</label><input type="number" name="sort_order" id="qitem-sort_order" value="0"></div>
            <div class="form-check" style="margin-top:24px"><input type="checkbox" name="required" id="qitem-required" value="1"><label for="qitem-required">Обязательный</label></div>
        </div>
        <div class="form-group"><label>Подсказка</label><input type="text" name="help_text" id="qitem-help_text"></div>
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
    </form>
</div></div>
<script>
function editQItem(id,step,section,key,label,type,required,order,help){
    document.getElementById('modal-qitem').classList.add('open');
    document.getElementById('modal-qitem-title').textContent = 'Редактировать вопрос';
    document.getElementById('modal-qitem-form').action = '/service/questionnaire-config/edit';
    document.getElementById('qitem-id').value = id;
    document.getElementById('qitem-step').value = step;
    document.getElementById('qitem-section').value = section;
    document.getElementById('qitem-question_key').value = key;
    document.getElementById('qitem-label').value = label;
    document.getElementById('qitem-type').value = type;
    document.getElementById('qitem-required').checked = required === 'true';
    document.getElementById('qitem-sort_order').value = order;
    document.getElementById('qitem-help_text').value = help;
}
</script>
{% endblock %}