{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Категории обращений</h2>
        <button class="btn btn-primary btn-sm" onclick="showCreateCategory()">+ Добавить</button>
    </div>
    <div class="table-wrap"><table><thead><tr><th>Иконка</th><th>Название</th><th>Описание</th><th>Активна</th><th class="actions"></th></tr></thead>
        <tbody id="categories-list"></tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-category"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-category-title">Новая категория</h2>
    <form id="modal-category-form">
        <input type="hidden" name="id" id="cat-id">
        <div class="form-group"><label>Название</label><input type="text" name="name" id="cat-name" required></div>
        <div class="form-group"><label>Описание</label><input type="text" name="description" id="cat-desc"></div>
        <div class="form-group"><label>Иконка (emoji)</label><input type="text" name="icon_emoji" id="cat-icon" value="📋" maxlength="10"></div>
        <div class="form-group"><label>Ключевые слова (через запятую)</label><input type="text" name="keywords" id="cat-keywords"></div>
        <div class="form-group"><label><input type="checkbox" name="active" id="cat-active" checked> Активна</label></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 loadCategories(){
    fetch('/service/api/bot/categories').then(function(r){ return r.json() }).then(function(cats){
        var tbody = document.getElementById('categories-list');
        tbody.innerHTML = '';
        cats.forEach(function(c){
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + c.icon_emoji + '</td><td>' + c.name + '</td><td>' + c.description + '</td><td>' + (c.active?'✅':'❌') + '</td><td class="actions">' +
                '<button class="btn btn-secondary btn-sm" onclick="editCategory(' + JSON.stringify(c).replace(/"/g,'&quot;') + ')">✎</button>' +
                '<form method="post" action="/service/api/bot/categories/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>';
            tbody.appendChild(tr);
        });
    });
}
function showCreateCategory(){
    document.getElementById('modal-category-title').textContent = 'Новая категория';
    document.getElementById('cat-id').value = '';
    document.getElementById('cat-name').value = '';
    document.getElementById('cat-desc').value = '';
    document.getElementById('cat-icon').value = '📋';
    document.getElementById('cat-keywords').value = '';
    document.getElementById('cat-active').checked = true;
    document.getElementById('modal-category').classList.add('open');
}
function editCategory(c){
    document.getElementById('modal-category-title').textContent = 'Редактировать категорию';
    document.getElementById('cat-id').value = c.id;
    document.getElementById('cat-name').value = c.name;
    document.getElementById('cat-desc').value = c.description;
    document.getElementById('cat-icon').value = c.icon_emoji;
    document.getElementById('cat-keywords').value = (c.keywords||[]).join(', ');
    document.getElementById('cat-active').checked = c.active;
    document.getElementById('modal-category').classList.add('open');
}
document.getElementById('modal-category-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {
        id: document.getElementById('cat-id').value,
        name: document.getElementById('cat-name').value,
        description: document.getElementById('cat-desc').value,
        icon_emoji: document.getElementById('cat-icon').value,
        keywords: document.getElementById('cat-keywords').value.split(',').map(function(s){return s.trim()}).filter(Boolean),
        active: document.getElementById('cat-active').checked,
    };
    var url = data.id ? '/service/api/bot/categories/edit' : '/service/api/bot/categories/create';
    fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)})
    .then(function(r){ return r.json() }).then(function(d){
        if(d.ok){ document.getElementById('modal-category').classList.remove('open'); loadCategories(); }
    });
});
loadCategories();
</script>
{% endblock %}