$(document).ready(function() {
    // Получаем список сотрудников
    $.getJSON('/telezab/users/get', function(data) {
        var userList = $('#user-list');
        userList.empty();
        data.forEach(function(user) {
            var email = user.email;
            var name = email.split('@')[0].replace(/\./g, ' ').replace(/\b\w/g, char => char.toUpperCase());
            var listItem = $('<li class="list-group-item"></li>').text(name).data('user', user);
            userList.append(listItem);
        });
    });

    // Обработчик кликов по пользователям
    $('#user-list').on('click', '.list-group-item', function() {
        // Удаляем активный класс у всех элементов списка
        $('.list-group-item').removeClass('active');

        // Добавляем активный класс к выбранному элементу
        $(this).addClass('active');

        var user = $(this).data('user');
        $('#user-info').removeClass('d-none');
        $('#user-name').text(user.email.split('@')[0].replace(/\./g, ' ').replace(/\b\w/g, char => char.toUpperCase()));

        // Отображаем регионы в одну строку
        var regions = $('#user-regions');
        regions.empty();
        if (user.subscriptions) {
            var subscriptions = user.subscriptions.split(',').map(function(sub) { return sub.trim(); });
            if (subscriptions.length > 0) {
                regions.text(subscriptions.join(', '));
            } else {
                regions.text('Нет подписок');
            }
        } else {
            regions.text('Нет подписок');
        }

        // Отображаем действия
        var events = $('#user-events');
        events.empty();
        if (user.events && user.events.length > 0) {
            user.events.forEach(function(event) {
                var eventText = event.type;
                if (event.region) {
                    eventText += ' (Регион: ' + event.region + ')';
                }
                events.append('<div><strong>' + event.date + '</strong> - ' + eventText + '</div>');
            });
        } else {
            events.append('<div>Нет действий</div>');
        }
    });
});