{% 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" id="delete-qitem-form-{{ qi.id }}"><input type="hidden" name="id" value="{{ qi.id }}"><button type="button" class="btn btn-danger btn-sm" onclick="openConfirmDeleteQitem({{ qi.id }},'{{ qi.label|e }}')" title="Удалить">✕</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>
<div class="modal-overlay" id="confirm-delete-qitem">
    <div class="modal" style="max-width:420px;">
        <h2 style="font-size:16px;margin-bottom:8px;">Удалить вопрос?</h2>
        <p style="color:var(--text-secondary);font-size:14px;margin-bottom:20px;">
            <strong id="delete-qitem-name"></strong> будет удалён навсегда. Это действие нельзя отменить.
        </p>
        <div class="form-actions" style="justify-content:flex-end;">
            <button type="button" class="btn btn-danger" onclick="confirmDeleteQitem()">Удалить</button>
            <button type="button" class="btn" onclick="closeConfirmDeleteQitem()">Отмена</button>
        </div>
    </div>
</div>
<script>
var deleteQitemId = null;
function openConfirmDeleteQitem(id, name){
    deleteQitemId = id;
    document.getElementById('delete-qitem-name').textContent = name || '#' + id;
    document.getElementById('confirm-delete-qitem').classList.add('open');
}
function closeConfirmDeleteQitem(){
    document.getElementById('confirm-delete-qitem').classList.remove('open');
    deleteQitemId = null;
}
function confirmDeleteQitem(){
    if(!deleteQitemId) return;
    document.getElementById('delete-qitem-form-' + deleteQitemId).submit();
    closeConfirmDeleteQitem();
}
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 %}