{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>SLA контракты</h2>
        <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-sla').classList.add('open')">+ Добавить</button>
    </div>
    <form method="get" class="filter-bar">
        <select name="object_id" onchange="this.form.submit()"><option value="">Все объекты</option>{% for o in objects %}<option value="{{ o.id }}" {% if sel_object_id == o.id %}selected{% endif %}>{{ o.name }}</option>{% endfor %}</select>
    </form>
    <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 sc in contracts %}<tr>
            <td>{{ sc.object.name if sc.object else '' }}</td>
            <td><span class="badge badge-{{ sc.service_level }}">{{ {'start':'Базовый','business':'Оптимальный','enterprise':'Максимальный'}.get(sc.service_level, sc.service_level) }}</span></td>
            <td>{{ "%.2f"|format(sc.sla_price_monthly) }} ₽</td>
            <td><small>{{ sc.start_date.strftime('%d.%m.%Y') if sc.start_date else '' }} — {{ sc.end_date.strftime('%d.%m.%Y') if sc.end_date else '∞' }}</small></td>
            <td><span class="badge badge-{{ sc.status }}">{{ {'active':'Активен','expired':'Истёк','cancelled':'Отменён','negotiation':'Переговоры'}.get(sc.status, sc.status) }}</span></td>
            <td class="actions"><button class="btn btn-secondary btn-sm" onclick="editSLA({{ sc.id }},{{ sc.object_id }},'{{ sc.service_level }}','{{ sc.sla_price_monthly if sc.sla_price_monthly is not none else '' }}','{{ sc.start_date if sc.start_date is not none else '' }}','{{ sc.end_date if sc.end_date is not none else '' }}','{{ sc.status }}')">✎</button></td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-sla"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-sla-title">Новый SLA контракт</h2>
    <form method="post" id="modal-sla-form" action="/service/sla/create">
        <input type="hidden" name="id" id="sla-id">
        <div class="form-group"><label>Объект</label><select name="object_id" id="sla-object_id" required>{% for o in objects %}<option value="{{ o.id }}">{{ o.name }}</option>{% endfor %}</select></div>
        <div class="form-row">
            <div class="form-group"><label>Уровень</label><select name="service_level" id="sla-service_level"><option value="start">Базовый</option><option value="business">Оптимальный</option><option value="enterprise">Максимальный</option></select></div>
            <div class="form-group"><label>Цена (₽/мес)</label><input type="number" step="0.01" name="sla_price_monthly" id="sla-sla_price_monthly"></div>
        </div>
        <div class="form-row">
            <div class="form-group"><label>Начало</label><input type="date" name="start_date" id="sla-start_date"></div>
            <div class="form-group"><label>Окончание</label><input type="date" name="end_date" id="sla-end_date"></div>
        </div>
        <div class="form-group"><label>Статус</label><select name="status" id="sla-status"><option value="negotiation" selected>Переговоры</option><option value="active">Активен</option><option value="expired">Истёк</option><option value="cancelled">Отменён</option></select></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 editSLA(id,oid,sl,price,start,end,status){
    document.getElementById('modal-sla').classList.add('open');
    document.getElementById('modal-sla-title').textContent = 'Редактировать SLA';
    document.getElementById('modal-sla-form').action = '/service/sla/edit';
    document.getElementById('sla-id').value = id;
    document.getElementById('sla-object_id').value = oid;
    document.getElementById('sla-service_level').value = sl;
    document.getElementById('sla-sla_price_monthly').value = price;
    document.getElementById('sla-start_date').value = start;
    document.getElementById('sla-end_date').value = end;
    document.getElementById('sla-status').value = status;
}
</script>
{% endblock %}