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,
        scrollingThreshold : 200, 
    });
}

if (chatHistoryBody.length) {
    new PerfectScrollbar(document.querySelector('.chat-history-body'), {
        wheelPropagation: false,
        suppressScrollX: true,
        scrollingThreshold : 200, 
    });
}

// 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);
//         }
//     });
// })
// ;