safekat/ci4/app/Views/themes/vuexy/form/mensajes/mensajeria.js

/**
 * App Chat
 */

// Seleccionar elementos del DOM
const chatContactsBody = $('.app-chat-contacts .sidebar-body'),
    chatContactListItems = $('.chat-contact-list-item:not(.chat-contact-list-item-title)'),
    chatHistoryBody = $('.chat-history-body'),
    chatSidebarLeftUserAbout = $('.chat-sidebar-left-user-about'),
    messageInput = $('.message-input'),
    searchInput = $('.chat-search-input'),
    sendMsgBtn = $('.send-msg-btn'); // Seleccionar el botón de envío de mensaje

// Inicializar PerfectScrollbar
if (chatContactsBody.length) {
    new PerfectScrollbar(chatContactsBody[0], {
        wheelPropagation: false,
        suppressScrollX: true
    });
}

if (chatHistoryBody.length) {
    new PerfectScrollbar(chatHistoryBody[0], {
        wheelPropagation: false,
        suppressScrollX: true
    });
}

// Función para desplazar el scroll al final
function scrollToBottom() {
    if (chatHistoryBody.length) {
        chatHistoryBody.scrollTop(chatHistoryBody[0].scrollHeight);
    }
}

scrollToBottom();

// Seleccionar chat o contacto
chatContactListItems.on('click', function () {
    chatContactListItems.removeClass('active');
    $(this).addClass('active');
});

// Filtrar chats
if (searchInput.length) {
    searchInput.on('keyup', function () {
        const searchValue = $(this).val().toLowerCase(),
            chatListItem0 = $('.chat-list-item-0'),
            contactListItem0 = $('.contact-list-item-0'),
            searchChatListItems = $('#chat-list li:not(.chat-contact-list-item-title)'),
            searchContactListItems = $('#contact-list li:not(.chat-contact-list-item-title)');

        // Buscar en chats
        const chatListItemsCount = searchChatContacts(searchChatListItems, searchValue);
        // Mostrar u ocultar mensaje de "No se encontraron resultados" en chats
        if (chatListItem0.length) {
            chatListItem0.toggleClass('d-none', chatListItemsCount === 0);
        }

        // Buscar en contactos
        const contactListItemsCount = searchChatContacts(searchContactListItems, searchValue);
        // Mostrar u ocultar mensaje de "No se encontraron resultados" en contactos
        if (contactListItem0.length) {
            contactListItem0.toggleClass('d-none', contactListItemsCount === 0);
        }
    });
}

// Función para buscar en chats y contactos
function searchChatContacts(searchListItems, searchValue) {
    let searchListItemsCount = 0;
    searchListItems.each(function () {
        const searchListItemText = $(this).text().toLowerCase();
        const matchesSearch = searchListItemText.indexOf(searchValue) !== -1;

        $(this).toggleClass('d-flex', matchesSearch);
        $(this).toggleClass('d-none', !matchesSearch);

        if (matchesSearch) {
            searchListItemsCount++;
        }
    });

    return searchListItemsCount;
}

// Enviar mensaje
if (sendMsgBtn.length) {
    sendMsgBtn.on('click', function (e) {
        e.preventDefault();
        if (messageInput.val()) {
            const renderMsg = $('<div>').addClass('chat-message-text mt-2').html(`<p class="mb-0">${messageInput.val()}</p>`);
            const lastChatMessageWrapper = $('li:last-child .chat-message-wrapper');
            if (lastChatMessageWrapper.length) {
                lastChatMessageWrapper.append(renderMsg);
            }
            messageInput.val('');
            scrollToBottom();
        }
    });
}

// Seleccionar los elementos <p> con la clase .chat-contact-status
$('.chat-contact-status').on('click', function () {
    // Obtener el id de la conversación desde el atributo id del elemento <p>
    var conversationId = $(this).attr('id');

    console.log(conversationId)

    // Realizar la llamada AJAX
    $.ajax({
        url: 'internos/chat/' + conversationId, // Cambia esta URL por la ruta correcta a tu API
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            // Manejar la respuesta exitosa de la llamada AJAX
            console.log('Datos recibidos:', data);
            // Aquí puedes actualizar el DOM o realizar otras acciones con los datos recibidos
            if (Array.isArray(data.people) && data.people.length > 0) {
                // Limpiar el contenedor donde se mostrarán los participantes
                $('#participants-container').empty();
                data.people.forEach(person => {
                    // Crear el HTML para cada participante y agregarlo al contenedor
                    var participantHtml = `
                            <div class="avatar d-block flex-shrink-0 me-2">
                                <span class="avatar-initial rounded-circle bg-label-primary ">${person.user_id}</span>
                            </div>`;
                    $('#participants-container').append(participantHtml);
                });
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Manejar errores en la llamada AJAX
            console.error('Error en la llamada AJAX:', textStatus, errorThrown);
        }
    });
})
;