{% 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-user').classList.add('open')">+ Добавить</button>
    </div>
    <div class="table-wrap">
        <table><thead><tr><th>Логин</th><th>ФИО</th><th>Роль</th><th>Телефон</th><th>Email</th><th>MAX ID</th><th>Статус</th><th>Создан</th><th class="actions"></th></tr></thead>
        <tbody>{% for u in users %}<tr>
            <td>{{ u.login }}</td><td>{{ u.full_name }}</td>
            <td><span class="badge badge-{{ u.role }}">{{ {'owner':'Владелец','engineer':'Инженер','technician':'Техник'}[u.role] }}</span></td>
            <td>{{ u.phone }}</td><td>{{ u.email }}</td>
            <td>{{ u.max_user_id or '—' }}</td>
            <td><span class="badge badge-{{ 'active' if u.is_active else 'inactive' }}">{{ 'Активен' if u.is_active else 'Неактивен' }}</span></td>
            <td>{{ u.created_at.strftime('%d.%m.%Y') if u.created_at else '' }}</td>
            <td class="actions">
                <button class="btn btn-secondary btn-sm" onclick="editUser({{ u.id }},'{{ u.login }}','{{ u.full_name }}','{{ u.role }}','{{ u.phone }}','{{ u.email }}','{{ u.max_user_id or '' }}',{{ 'true' if u.is_active else 'false' }})">✎</button>
                {% if u.role != 'owner' %}
                <form method="post" action="/service/users/delete" style="display:inline" id="delete-user-form-{{ u.id }}">
                    <input type="hidden" name="id" value="{{ u.id }}">
                    <button type="button" class="btn btn-danger btn-sm" onclick="openConfirmDeleteUser({{ u.id }},'{{ u.login|e }}')" title="Удалить">✕</button>
                </form>{% endif %}
            </td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-user">
    <div class="modal">
        <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
        <h2 id="modal-user-title">Новый сотрудник</h2>
        <form method="post" id="modal-user-form" action="/service/users/create">
            <input type="hidden" name="id" id="user-id" value="">
            <div class="form-row">
                <div class="form-group"><label>Логин</label><input type="text" name="login" id="user-login" required></div>
                <div class="form-group"><label>Пароль <small>(оставьте пустым при редактировании)</small></label><input type="password" name="password" id="user-password"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>ФИО</label><input type="text" name="full_name" id="user-full_name" required></div>
                <div class="form-group"><label>Роль</label><select name="role" id="user-role"><option value="engineer">Инженер</option><option value="technician">Техник</option></select></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Телефон</label><input type="text" name="phone" id="user-phone"></div>
                <div class="form-group"><label>Email</label><input type="email" name="email" id="user-email"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>MAX ID (мессенджер)</label><input type="number" name="max_user_id" id="user-max_id" placeholder="ID пользователя в MAX"></div>
            </div>
            <div class="form-check"><input type="checkbox" name="is_active" id="user-is_active" value="1" checked><label for="user-is_active">Активен</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>
<div class="modal-overlay" id="confirm-delete-user">
    <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-user-name"></strong> будет удалён навсегда. Это действие нельзя отменить.
        </p>
        <div class="form-actions" style="justify-content:flex-end;">
            <button type="button" class="btn btn-danger" onclick="confirmDeleteUser()">Удалить</button>
            <button type="button" class="btn" onclick="closeConfirmDeleteUser()">Отмена</button>
        </div>
    </div>
</div>
<script>
var deleteUserId = null;
function openConfirmDeleteUser(id, name){
    deleteUserId = id;
    document.getElementById('delete-user-name').textContent = name || '#' + id;
    document.getElementById('confirm-delete-user').classList.add('open');
}
function closeConfirmDeleteUser(){
    document.getElementById('confirm-delete-user').classList.remove('open');
    deleteUserId = null;
}
function confirmDeleteUser(){
    if(!deleteUserId) return;
    document.getElementById('delete-user-form-' + deleteUserId).submit();
    closeConfirmDeleteUser();
}
function editUser(id,login,name,role,phone,email,maxId,active){
    document.getElementById('modal-user').classList.add('open');
    document.getElementById('modal-user-title').textContent = 'Редактировать сотрудника';
    document.getElementById('modal-user-form').action = '/service/users/edit';
    document.getElementById('user-id').value = id;
    document.getElementById('user-login').value = login; document.getElementById('user-login').required = false;
    document.getElementById('user-full_name').value = name;
    document.getElementById('user-role').value = role;
    document.getElementById('user-phone').value = phone; document.getElementById('user-email').value = email;
    document.getElementById('user-max_id').value = maxId || '';
    document.getElementById('user-is_active').checked = active;
    document.getElementById('user-password').required = false;
}
document.querySelector('#modal-user .modal-close').addEventListener('click', function(){ this.closest('.modal-overlay').classList.remove('open'); });
</script>
{% endblock %}