{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header">
        <h2>Коэффициенты формул</h2>
        <div>
            <a href="/service/coefficients/test" class="btn btn-secondary btn-sm" style="margin-right:6px">🧪 Тест формул</a>
            <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-coeff').classList.add('open')">+ Добавить</button>
        </div>
    </div>
    {% if groups|length == 0 %}
    <div class="card-body"><p class="empty">Нет коэффициентов</p></div>
    {% else %}
    {% for gkey, gdata in groups.items() %}
    <div class="accordion">
        <div class="accordion-header" onclick="toggleAccordion(this)">
            <div class="accordion-header-left">
                <span class="accordion-arrow">▶</span>
                <span class="accordion-title">{{ gdata.info.name }}</span>
                <span class="accordion-badge">{{ gdata.coeffs|length }}</span>
            </div>
            <div class="accordion-header-right">
                <span class="accordion-formula" title="Формула" onclick="event.stopPropagation(); showFormulaPopover(this, '{{ gkey }}')" data-formula="{{ gdata.info.formula }}" data-result="{{ gdata.info.result }}">📐</span>
                <span class="accordion-action" onclick="event.stopPropagation(); window.location='/service/coefficients/test?group={{ gkey }}'">🧪</span>
            </div>
        </div>
        <div class="accordion-body">
            <div class="table-wrap"><table><thead><tr><th>Ключ</th><th>Значение</th><th>Описание</th><th>Формула</th><th>Активен</th><th class="actions"></th></tr></thead>
                <tbody>{% for c in gdata.coeffs %}<tr>
                    <td><code>{{ c.key }}</code></td>
                    <td><strong>{{ c.value }}</strong></td>
                    <td><small>{{ c.description }}</small></td>
                    <td><small>{{ c.formula_ref }}</small></td>
                    <td><form method="post" action="/service/coefficients/toggle"><input type="hidden" name="id" value="{{ c.id }}"><button class="btn btn-{{ 'success' if c.is_active else 'secondary' }} btn-sm">{{ '✓' if c.is_active else '✕' }}</button></form></td>
                    <td class="actions"><button class="btn btn-secondary btn-sm" onclick="editCoeff({{ c.id }},'{{ c.key|e }}','{{ c.value }}','{{ c.description|e }}','{{ c.formula_ref|e }}')">✎</button>
                        <form method="post" action="/service/coefficients/delete" style="display:inline" onsubmit="return confirm('Удалить коэффициент?')"><input type="hidden" name="id" value="{{ c.id }}"><button class="btn btn-danger btn-sm">✕</button></form>
                    </td>
                </tr>{% endfor %}</tbody></table>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}
</div>

<div class="modal-overlay" id="modal-coeff"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-coeff-title">Новый коэффициент</h2>
    <form method="post" id="modal-coeff-form">
        <input type="hidden" name="id" id="coeff-id">
        <div class="form-row">
            <div class="form-group"><label>Ключ</label><input type="text" name="key" id="coeff-key" required></div>
            <div class="form-group"><label>Значение</label><input type="text" name="value" id="coeff-value" required></div>
        </div>
        <div class="form-group"><label>Описание</label><input type="text" name="description" id="coeff-description"></div>
        <div class="form-group"><label>Формула</label><input type="text" name="formula_ref" id="coeff-formula_ref"></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="modal-formula-info"><div class="modal modal-sm">
    <button type="button" class="modal-close" onclick="document.getElementById('modal-formula-info').classList.remove('open')">✕</button>
    <h2 id="formula-info-title">Формула</h2>
    <div id="formula-info-content" style="margin-top:12px"></div>
</div></div>

<script>
function toggleAccordion(el) {
    var arrow = el.querySelector('.accordion-arrow');
    var body = el.nextElementSibling;
    if (body.style.display === 'none' || body.style.display === '') {
        body.style.display = 'block';
        arrow.textContent = '▼';
    } else {
        body.style.display = 'none';
        arrow.textContent = '▶';
    }
}
function editCoeff(id,key,value,desc,ref){
    document.getElementById('modal-coeff').classList.add('open');
    document.getElementById('modal-coeff-title').textContent = 'Редактировать коэффициент';
    document.getElementById('modal-coeff-form').action = '/service/coefficients/edit';
    document.getElementById('coeff-id').value = id;
    document.getElementById('coeff-key').value = key;
    document.getElementById('coeff-value').value = value;
    document.getElementById('coeff-description').value = desc;
    document.getElementById('coeff-formula_ref').value = ref;
}
function showFormulaPopover(el, gkey) {
    var formula = el.getAttribute('data-formula');
    var result = el.getAttribute('data-result');
    var title = el.closest('.accordion-header').querySelector('.accordion-title').textContent;
    document.getElementById('formula-info-title').textContent = title;
    document.getElementById('formula-info-content').innerHTML =
        '<div style="margin-bottom:12px"><strong>Формула:</strong></div>' +
        '<div style="background:var(--bg-input);padding:12px;border-radius:8px;font-family:monospace;font-size:13px;margin-bottom:12px;white-space:pre-wrap">' + formula + '</div>' +
        '<div><strong>Результат:</strong> ' + result + '</div>';
    document.getElementById('modal-formula-info').classList.add('open');
}
// Open first group by default
document.addEventListener('DOMContentLoaded', function() {
    var first = document.querySelector('.accordion-body');
    if (first) { first.style.display = 'block'; first.previousElementSibling.querySelector('.accordion-arrow').textContent = '▼'; }
});
</script>
{% endblock %}