{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Заявки</h2>
        <button class="btn btn-primary btn-sm" onclick="showCreateTicket()">+ Создать</button>
    </div>
    <div class="filter-bar">
        <select id="filter-status" onchange="loadTickets()"><option value="">Все статусы</option><option value="open">Открытые</option><option value="in_progress">В работе</option><option value="resolved">Решённые</option><option value="closed">Закрытые</option></select>
        <select id="filter-priority" onchange="loadTickets()"><option value="">Все приоритеты</option><option value="low">Низкий</option><option value="normal">Обычный</option><option value="high">Высокий</option><option value="urgent">Срочный</option></select>
    </div>
    <div class="table-wrap"><table><thead><tr><th>Номер</th><th>Клиент</th><th>Объект</th><th>Приоритет</th><th>Статус</th><th>Инженер</th><th>Дата</th><th class="actions"></th></tr></thead>
        <tbody id="tickets-list"></tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-ticket"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-ticket-title">Новая заявка</h2>
    <form id="modal-ticket-form">
        <div class="form-group"><label>Заголовок</label><input type="text" name="title" id="ticket-title" required></div>
        <div class="form-group"><label>Описание</label><textarea name="description" id="ticket-desc" rows="3"></textarea></div>
        <div class="form-row">
            <div class="form-group"><label>Приоритет</label><select name="priority" id="ticket-priority"><option value="low">Низкий</option><option value="normal" selected>Обычный</option><option value="high">Высокий</option><option value="urgent">Срочный</option></select></div>
            <div class="form-group"><label>Инженер</label><select name="assigned_to" id="ticket-engineer"><option value="">Не назначен</option></select></div>
        </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-ticket-detail"><div class="modal" style="max-width:700px">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="detail-title"></h2>
    <div id="detail-info" style="margin-bottom:16px;font-size:13px;color:var(--text-muted)"></div>
    <div id="detail-messages" style="border:1px solid var(--border);border-radius:8px;padding:12px;min-height:150px;max-height:300px;overflow-y:auto;margin-bottom:12px"></div>
    <div class="form-row">
        <div class="form-group" style="flex:1"><input type="text" id="detail-input" placeholder="Добавить сообщение..."></div>
        <div class="form-group" style="align-self:flex-end">
            <select id="detail-status" onchange="changeTicketStatus()" style="margin-right:8px"><option value="open">Открыта</option><option value="in_progress">В работе</option><option value="resolved">Решена</option><option value="closed">Закрыта</option></select>
            <button class="btn btn-primary btn-sm" onclick="sendTicketMessage()">Отправить</button>
        </div>
    </div>
</div></div>
<script>
var currentTicketId = null;
function loadTickets(){
    var status = document.getElementById('filter-status').value;
    var priority = document.getElementById('filter-priority').value;
    var url = '/service/api/bot/tickets?';
    if(status) url += 'status=' + status + '&';
    if(priority) url += 'priority=' + priority;
    fetch(url).then(function(r){ return r.json() }).then(function(tickets){
        var tbody = document.getElementById('tickets-list');
        tbody.innerHTML = '';
        tickets.forEach(function(t){
            var tr = document.createElement('tr');
            var pClass = t.priority === 'high' || t.priority === 'urgent' ? 'value-red' : t.priority === 'normal' ? 'value-yellow' : 'value-green';
            var sClass = t.status === 'open' ? 'badge-progress' : t.status === 'in_progress' ? 'badge-default' : t.status === 'resolved' ? 'badge-done' : 'badge-default';
            tr.innerHTML = '<td><a href="#" onclick="openTicket(' + t.id + ');return false">' + t.ticket_number + '</a></td><td>' + (t.user_name||'—') + '</td><td>' + (t.object_name||'—') + '</td><td><span class="' + pClass + '">' + t.priority + '</span></td><td><span class="badge ' + sClass + '">' + t.status + '</span></td><td>' + (t.engineer_name||'—') + '</td><td>' + t.created_at.substring(0,10) + '</td><td class="actions"><button class="btn btn-secondary btn-sm" onclick="openTicket(' + t.id + ')">👁</button></td>';
            tbody.appendChild(tr);
        });
    });
    fetch('/service/api/bot/engineers').then(function(r){ return r.json() }).then(function(engs){
        var sel = document.getElementById('ticket-engineer');
        sel.innerHTML = '<option value="">Не назначен</option>';
        engs.forEach(function(e){ sel.innerHTML += '<option value="' + e.id + '">' + e.full_name + '</option>'; });
    });
}
function showCreateTicket(){
    document.getElementById('modal-ticket-title').textContent = 'Новая заявка';
    document.getElementById('ticket-title').value = '';
    document.getElementById('ticket-desc').value = '';
    document.getElementById('ticket-priority').value = 'normal';
    document.getElementById('modal-ticket').classList.add('open');
}
document.getElementById('modal-ticket-form').addEventListener('submit', function(e){
    e.preventDefault();
    var data = {
        title: document.getElementById('ticket-title').value,
        description: document.getElementById('ticket-desc').value,
        priority: document.getElementById('ticket-priority').value,
        assigned_to: document.getElementById('ticket-engineer').value || null,
        created_by: 'portal'
    };
    fetch('/service/api/bot/tickets/create', {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-ticket').classList.remove('open'); loadTickets(); }
    });
});
function openTicket(id){
    currentTicketId = id;
    fetch('/service/api/bot/tickets/' + id).then(function(r){ return r.json() }).then(function(t){
        document.getElementById('detail-title').textContent = 'Заявка ' + t.ticket_number;
        document.getElementById('detail-info').innerHTML = '<strong>' + t.title + '</strong><br>Клиент: ' + (t.user_name||'—') + ' | Объект: ' + (t.object_name||'—') + '<br>Приоритет: ' + t.priority + ' | Создана: ' + t.created_at;
        document.getElementById('detail-status').value = t.status;
        var msgs = document.getElementById('detail-messages');
        msgs.innerHTML = '';
        (t.messages||[]).forEach(function(m){
            var align = m.direction === 'out' ? 'text-align:right' : 'text-align:left';
            var bg = m.direction === 'out' ? 'var(--accent)' : 'var(--bg-secondary)';
            var color = m.direction === 'out' ? '#fff' : 'var(--text-primary)';
            msgs.innerHTML += '<div style="' + align + ';margin:6px 0"><span style="background:' + bg + ';color:' + color + ';padding:6px 12px;border-radius:12px;display:inline-block;max-width:80%">' + escapeHtml(m.text) + '<br><small style="opacity:0.7">' + m.sender + ' — ' + m.timestamp.substring(0,16) + '</small></span></div>';
        });
        document.getElementById('modal-ticket-detail').classList.add('open');
    });
}
function sendTicketMessage(){
    var text = document.getElementById('detail-input').value.trim();
    if(!text || !currentTicketId) return;
    fetch('/service/api/bot/tickets/' + currentTicketId + '/message', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({text:text, direction:'out', sender:'engineer'})})
    .then(function(r){ return r.json() }).then(function(d){
        if(d.ok){ document.getElementById('detail-input').value = ''; openTicket(currentTicketId); }
    });
}
function changeTicketStatus(){
    var status = document.getElementById('detail-status').value;
    if(!currentTicketId) return;
    fetch('/service/api/bot/tickets/' + currentTicketId + '/status', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({status:status})})
    .then(function(r){ return r.json() }).then(function(d){
        if(d.ok) loadTickets();
    });
}
function escapeHtml(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
document.getElementById('detail-input').addEventListener('keydown', function(e){ if(e.key === 'Enter') sendTicketMessage(); });
loadTickets();
</script>
{% endblock %}