{% extends "theme/base.twig" %}
{% set area = 'comercial'%}
{% set type = 'whatsapp'%}
{% block CSSfiles %}
    {{ parent() }}
    <link rel="stylesheet" href="/assets/plugins/multiselect/multiselect.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/daterangepicker/daterangepicker.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/datatables/datatables.responsive.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/css/local/whatsApp.css?v={{ config.versionId }}">
{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script>
        let parameters = {{ parameters|json_encode|raw }};
        
        // Função para atualizar os contatos via AJAX
        function atualizarContatos() {
            $.ajax({
                url: '/api/whatsApp/getConversa', // Altere o caminho para o seu endpoint de contatos
                type: 'GET',
                success: function(response) {
                    console.log(response);

                    let contatosHTML = '';
                    response.forEach(function(contato) {
                        let lastMessage = contato.last_message;

                        // Verifica se a última mensagem é interativa e, em caso afirmativo, extrai o texto
                        if (contato.last_message_type === 'interactive') {
                            try {
                                let parsedMessage = JSON.parse(contato.last_message); // Assumindo que o conteúdo da mensagem seja JSON
                                if (parsedMessage.interactive && parsedMessage.interactive.body && parsedMessage.interactive.body.text) {
                                    lastMessage = parsedMessage.interactive.body.text;
                                } else {
                                    lastMessage = 'Mensagem interativa sem texto.';
                                }
                            } catch (e) {
                                lastMessage = 'Erro ao processar mensagem interativa.';
                            }
                        } else if (contato.last_message_type === 'text') {
                            // Exibe as primeiras 15 letras da mensagem de texto
                            lastMessage = lastMessage.length > 15 ? lastMessage.substring(0, 15) + '...' : lastMessage;
                        }

                        // Verifica quantas mensagens não visualizadas existem e exibe a bolinha verde, se necessário
                        let unreadCount = contato.unread_messages_count || 0;
                
                        // Constrói o HTML do contato
                        contatosHTML += `
                            <div class="contact" data-id="${contato.pk}" data-tel="${contato.ds_tel}">
                                <div class="contact-avatar">
                                    <img src="/assets/img/profile/avatar.jpg" alt="Avatar">
                                    
                                </div>
                                <div class="contact-info">
                                    <div class="contact-name">${contato.ds_nome}</div>
                                    <div class="contact-last-message">${lastMessage || 'Sem mensagens recentes'}</div>
                                    
                                </div>
                                <!-- Bolinha verde para mensagens não visualizadas -->
                                ${unreadCount > 0 ? `<span class="unread-bubble">${unreadCount}</span>` : ''}
                            </div>
                        `;
                    });
                    console.log(contatosHTML)
                    $('.chat-list').html(contatosHTML);
                }
            });
        }




        atualizarContatos()
       setInterval(function() {
            atualizarContatos(); // Atualiza a lista de contatos

            // Verifica se um contato está selecionado
            if ($('#contatoSelecionado').val() !== "") {
                // Simula o clique no contato selecionado
                $('.contact[data-id="' + $('#contatoSelecionado').val() + '"]').click();
            }
        }, 10000); // Atualiza a cada 30 segundos (30000 ms)
        // Função principal para carregar mensagens
        $(document).on('click', '.contact', function () {
            
            var conversas_pk = $(this).data('id');
            var ds_tel = $(this).data('tel');

             $('#contatoSelecionado').val(conversas_pk);
             $('#telContato').val(ds_tel);
            // Oculta a bolinha verde de notificação
            $(this).find('.unread-bubble').hide();
            

            // Carregar as mensagens desse contato
            $.ajax({
                url: '/api/whatsApp/getMensagem', // Caminho para seu endpoint
                type: 'GET',
                data: { conversas_pk: conversas_pk },
                success: function (response) {
                    $('.show-message-box').css('display','inline');
                    if (!response || response.length === 0) {
                        $('.messages').html('');
                        return;
                    }

                    let messagesHTML = '';
                    response.forEach(function (mensagem) {
                        let messageClass = mensagem.ic_direcao === "1" ? "sent" : "received";

                        if (mensagem.ds_type === 'text') {
                            // Exibe mensagens de texto
                            messagesHTML += `
                                <div class="message ${messageClass}">
                                    <span class="message-text">${mensagem.ds_mensagem}</span>
                                    <span class="message-time">${formatDateTime(mensagem.dt_cadastro)}</span>
                                </div>
                            `;
                        } else if (mensagem.ds_type === 'interactive') {
                            // Renderiza interativos
                            messagesHTML += `
                                <div class="message ${messageClass}">
                                    ${renderInteractiveContent(mensagem.ds_mensagem)}
                                    <span class="message-time">${formatDateTime(mensagem.dt_cadastro)}</span>
                                </div>
                            `;
                        }
                    });

                    $('.messages').html(messagesHTML); // Atualiza a área de mensagens
                    scrollToBottom(); // Rola até o final da página
                },
                error: function () {
                    alert('Erro ao carregar mensagens. Tente novamente.');
                }
            });
        });

        // Função para renderizar interativos
        function renderInteractiveContent(content) {
            let html = '';

            try {
                // Remover o escapamento inicial
                let unescapedContent = JSON.parse(content);

                // Interpretar o JSON completo
                let parsedContent = JSON.parse(unescapedContent);

                // Adicionar o texto do corpo
                if (parsedContent.interactive.body && parsedContent.interactive.body.text) {
                    html += `<p class="interactive-body-text">${parsedContent.interactive.body.text}</p>`;
                }

                // Verifica o tipo de interação
                if (parsedContent.interactive.type === 'button') {
                    // Botões interativos
                    parsedContent.interactive.action.buttons.forEach(function (button) {
                        if (button.reply) {
                            html += `
                                <button class="interactive-button" data-id="${button.reply.id}">
                                    ${button.reply.title}
                                </button>
                            `;
                        }
                    });
                } else if (parsedContent.interactive.type === 'list') {
                    // Lista interativa
                    html += `<div class="interactive-list">`;
                    parsedContent.interactive.action.sections.forEach(function (section) {
                        html += `<h4 class="list-section-title">${section.title}</h4><ul>`;
                        section.rows.forEach(function (row) {
                            html += `
                                <li class="list-item">
                                    <label>
                                        <input type="radio" name="interactive-option" value="${row.id}">
                                        <span class="item-title">${row.title}</span>
                                        <span class="item-description">${row.description}</span>
                                    </label>
                                </li>
                            `;
                        });
                        html += `</ul>`;
                    });
                    html += `</div>`;
                } else {
                    html = '<p>Tipo interativo não suportado.</p>';
                }
            } catch (e) {
                console.error('Erro ao processar conteúdo interativo:', e);
                html = '<p>Erro ao carregar conteúdo interativo.</p>';
            }

            return html;
        }

        // Formatar data e hora
        function formatDateTime(dateTime) {
            let date = new Date(dateTime);
            return date.toLocaleString('pt-BR', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
            });
        }

        // Rolar até o final do chat
        function scrollToBottom() {
            let chat = document.querySelector('.messages');
            chat.scrollTop = chat.scrollHeight;
        }
        // Exemplo de envio de mensagem
        $('.send-button').on('click', function() {
            var message = $('.message-box input').val();
            if (message.trim() !== '') {
                // Enviar mensagem via AJAX
                $.ajax({
                    url: '/api/whatsApp/sendMessage', // Altere para o caminho do seu endpoint de envio
                    type: 'POST',
                    data: { ds_tel: $('#telContato').val(),ds_mensagem: message, conversas_pk: $('#contatoSelecionado').val() }, // Envia a mensagem
                    success: function(response) {
                        // Adiciona a nova mensagem na tela
                        $('.messages').append('<div class="message sent">' + message + '</div>');
                        scrollToBottom(); // Rola a página até o final
                        $('.message-box input').val("");
                    }
                });
            }
        });
    </script>

    <script src="/assets/plugins/datatables/datatables.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.bootstrap.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.html5.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.jszip.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.responsive.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/multiselect/multiselect.js?v={{ config.versionId }}"></script>
{% endblock %}

{% block content %}
    <div class="content">
        
        <!-- Lista de Conversas -->
        <section class="chat-list">
            <!--input type="text" placeholder="Pesquisar" class="search"-->
        </section>
        

        <input type="hidden" id="contatoSelecionado" value="">
        <input type="hidden" id="telContato" value="">

        <!-- Área de Mensagem -->
        <section class="chat-area">
            <!-- Área de Mensagens -->
            <div class="messages">
                <img src="/assets/img/fundo-whats.png" width="680px" height="500px" alt="Tela inicial">
            </div>
            
            <!-- Barra de Envio -->
            <div class="show-message-box" style="display:none">
                <div class="message-box" >
                    <input type="text" placeholder="Digite uma mensagem">
                    <button class="send-button">Enviar</button>
                </div>
            </div>
        </section>
    </div>
{% endblock %}