@push('scripts')  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{{asset('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{{ asset('pages/scripts/atendimento/script-managed-email.js') }}" type="text/javascript"></script>
 <!-- <script src="{{ asset('pages/scripts/atendimento/script-managed-messenger.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/atendimento/script-managed-instagram.js') }}" type="text/javascript"></script> -->
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />
<!-- <script src='{{ asset("global/scripts/app.min.js")}}' type="text/javascript"></script>  -->
<script src="{{ asset('global/plugins/jquery-slimscroll/jquery.slimscroll.min.js')}}"></script>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/scripts/tinymce/tinymce.min.js')}}" type="text/javascript"></script>
<script src="{{ asset('global/scripts/markdown/markdown.js')}}" type="text/javascript"></script>
<script src="{{ asset('global/scripts/markdown/bootstrap-markdown.js')}}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/inbox.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/select2/js/select2.full.min.js')}}" type="text/javascript"></script>
<script src='{{asset("pages/scripts/atendimento/jquery.mask.js")}}' type="text/javascript"></script>
<script src='{{asset("pages/scripts/atendimento/jquery.mask.min.js")}}' type="text/javascript"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('pages/css/emojionearea.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('pages/css/atendimento/envioArquivos.css') }}">
<script type="text/javascript" src="{{ asset('pages/scripts/emojionearea.min.js')}}"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>
<script src="https://unpkg.com/howler@2.2.3/dist/howler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<style>
    .message{
        text-align:left!important;
    }
    .desabilitarPausas{
        pointer-events:none!important;
        opacity:0.6!important;
    }

    .habilitarPausas{
        pointer-events:all!important;
        opacity:1!important;
    }

    #toast-container > .toast {
        font-size: 16px;
        font-weight: bold;
        font-family: 'Arial', sans-serif;
        color: #ffffff;
        background-color: #000000;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
    }

    #toast-container > .toast-error {
        background-color: #D32F2F;
    }

    #toast-container > .toast-success {
        background-color: #388E3C;
    }
</style>

<!-- funções -->
<script src="{{ asset('pages/scripts/funcoes/funcoes.js') }}" type="text/javascript"></script>
<script>
var global = {};
var cliente_id = {{Auth::user()->cliente_id}};
var discagem = 0;
// Funções de cronometro para tempo de atendimento e tempo de pausa
var finalizando = false;
var count_title = 0;
var count_whatsapp = 0;
var count_instagram = 0;
var count_webchat = 0;
var title = document.title;
var tempo_cronometro = null;
var tiempo_corriendo = null;
tiempo_webchat = {
    hora: 0,
    minuto: 0,
    segundo: 0
};
var forcarPausa = 0;
var forcarLogout = 0;
var solicitacao = 0;
var solicitacao_email = 0;
var rota_mensagem = 0;
var rota_email = 0;
var dadosAgendamentoPausa;
var protocols = [];
var empausa = 0;
var saida = 0;
var aguardandoAtendimento = true;
var contar = 0; 
var cont = 0; 
var qtd_chamadas_fila = 0;
var status = '';
var conn;
var inputFiles = [];
let urlImage = [];
let urlAudio = [];
let urlVideo = [];
let urlDocument = [];
var contador_tel = 0;
var conf = 0;
var unicoAnexo = 0;
var tipo_atendimento= "";
var travarTeclado = false;
var telefoniaIntegracao = 0;
estawhatsAtivo = "";
teste = ""
var dadoWhatsAtivo;
var emails_atendimento = {!!$emails_atendimento!!};
teste =""
var inputFilespen = [];
let urlImagepen = [];
let urlAudiopen = [];
let urlVideopen = [];
let urlDocumentpen = [];
a = 0;
soma = 0;
var contador = 0;
var carteira_texto_pesquisa = '';

var messages_screen = "";
window.__cfRLUnblockHandlers = true;

ultimo_texto_whats = ""
ultimo_texto_webchat = ""
ultimo_texto_instagram = ""
//----Variaveis do Whasapp Ativo----
    telefoneSelecionado = "";
    templateSelecionado ="";
    template_id_selecionado = "";
    inputsAtivo = "";
    camposAtivo ="";
    objWhats = {}; 
// -----------------

//---- variaveies do email Ativo -----
textoDigitadoAtivo = "";
    textoDigitado = ""
//-------------------------
tiempo_modal = "";
verificar_arquivo = false;
// -----varaiveis EMail Ativo --- 
    estaemailAtivo = "";
    assuntoEmailAtivo = "";
    textoDigitadoAtivo ="";
    emailsAtivo =[];
//--------------------------------
//Filas Email------
    emailsFilas = []
//--------------------------------
//variavies Telefone Ativo------
    temProtocolo = false;
    regraAtivo = "";
    PausaCode = "";
//------------------------------
//variaveis contado bl verde-------
    qtd_nv_interacoes = 0;
    qtd_aguard_interacoes = 0;
    qtd_total = 0;

//variavel btn ----
    travar_btns = false;
//----------------------------
var ul_transf = "";
    
//variavel historico de atendimento
visualizando_historico_atendimento = false;

//variaveis para limitar diversas notificações ao recarregar a tela
notificacao_load = true;
notificacao_ultimos_atendimentos = [];
notificacao_enviada = false;

@if($quantAtendimentos === 0)
    if(!localStorage.getItem("telefone") && !localStorage.getItem("EmailAtivo") && !localStorage.getItem("WhatsAppAtivoIds")){
        localStorage.clear(); 
    }
@endif

function pauseOrExitIsActive() {
        // Seleciona todos os elementos de pausa e saida
        const elementos = document.querySelectorAll('#empausaReceptivo, #empausa, #solicitacao_saida');

        // Verifica se algum deles está com display: none
        const isVisible = Array.from(elementos).some(elemento => {
            return window.getComputedStyle(elemento).display !== 'none';
        });

        return isVisible;
}

document.addEventListener('DOMContentLoaded', function() {
    // Função para contar os <li> dentro da ul
    function contarLiNvInteracoes() {
        const ul = document.getElementById('caixa_entrada');
        const numLi = ul.getElementsByTagName('li').length;

        if (numLi > 0) {
            $('#qtd_nv_interacoes').text(numLi);
            $('#qtd_nv_interacoes').css('display', 'block');
        } else {
            $('#qtd_nv_interacoes').text(0);
            $('#qtd_nv_interacoes').css('display', 'none');
        }
    }

    function contarLiAgInteracoes() {
        const ul = document.getElementById('aguardando_interacao');
        const numLi = ul.getElementsByTagName('li').length;
        if (numLi > 0) {
            $('#qtd_aguard_interacoes').text(numLi);
            $('#qtd_aguard_interacoes').css('display', 'block');
        } else {
            $('#qtd_aguard_interacoes').text(0);
            $('#qtd_aguard_interacoes').css('display', 'none');
        }
    }

    // Executa a função a cada 1 segundo (1000ms)
        setInterval(function() {
            contarLiNvInteracoes();
            contarLiAgInteracoes();
        }, 1000);
    });


function updateButtonState(data) {
    if (data.length === 0) {
        $('#btnStatusWhats').addClass('disabled').css({
            'pointer-events': 'none',
            'opacity': '0.5'
        });
    } else {
        $('#btnStatusWhats').removeClass('disabled').css({
            'pointer-events': 'all',
            'opacity': '1'
        });
    }
}

$('#contatos_escolha').click(function(){
    habilitarCaixaEntrada();  
    $("#noticacao_busca").css("display","none");
    // visto que o atendente não escolheu um dos contatos na lista, considerar o primeiro
    principal_id =  $("#content-table-contatos input[name=contato_principal]:first").attr("id");
    if(!isEmpty(principal_id)) buscarContatoPorId(principal_id);
    $('#Lista_Contato').modal('hide');
})

function logout_browser(){
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: "GET",
        data:{'tipo_saida': 'X',             
            'timestamp': getFormattedTimestamp(),
            },
        url: "/gestao/atendimento/sair_atendimento",
        dataType: 'JSON',
        success: function(data){
        },
        error: function(data){
        }
    });
}

$(window).unload(function(){
    localStorage.setItem('atualizar_posicao_fila', 'nao')
    logout_browser();
    socketCloseListener("false");
    return;
});

function handleExit() {
    localStorage.setItem('saiu_aqui', true);
    localStorage.setItem('visibility', document.visibilityState);
    localStorage.removeItem('lastExit');
    localStorage.setItem('lastExit', Date.now());
}

window.addEventListener("pagehide", handleExit);

function tempoTelaAtualizar(){
    $.ajax({
        headers:{
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        url: '/gestao/atendimento/tempoTelaAtualizar',
        cache: false,
        data:{'tela_id': $("#formPesquisaAtendimentoContato input[name='id_tela']").val()},
        success: function(data){
        },
        error: function(data){
        }
    })    
}
// atualiza o tempo que esta na tela de 30 em 30 minutos no banco     
setInterval(tempoTelaAtualizar, 1800000);



    //RECUPERAR ATENDIMENTO AO RECARREGAR A PAGINA PELO LOCALSTORAGE 
    $(document).ready(function(){
        window.Notification.requestPermission();    
        if(!localStorage.getItem("WhatsAppAtivoIds")) localStorage.setItem("WhatsAppAtivoIds", JSON.stringify({}));
        $('#emailBody btn-group').remove();
        $('.emojionearea-editor').attr('onkeypress','if(event.keyCode === 13) return enviarMensagemWhatsApp()');

        //##### EMOJI WEBCHAT
        $("#inputWebchat").emojioneArea();
        $("#inputWebchat")[0].emojioneArea.on("paste", function() {
            var items = (window.event.clipboardData || window.event.originalEvent.clipboardData).items;
            fileToPreview(items);
            return false;
        });
        $(document).ready(function(){
            $('#tipo_chat_webchat').on('drop',function(event){
                var items = (window.event.dataTransfer ||event.originalEvent.dataTransfer).items;
                fileToPreview(items);
                return false;
            });
            $('#tipo_chat_webchat').on('dragover',function(event){
                event.preventDefault();
            });
        });

        $('.atender-emojiChat').click(function () {
            $('.emojionearea-button').click()
        }); 
        // VERIFCAR SE ESTA EM ATENIMENTO ATIVO PARA RECUPERAR AO ATUALIZAR A PAGINA 
        dado = JSON.parse(localStorage.getItem("telefone"));
        if(dado != null){
            if(dado['tipo_chamada'] == "Ativo"){
                PausaCode = "99";
                $("#opcoesAtivo").attr("data-statusChamada","receptivo");
                $("#opcoesAtivo #text_status_chamada").text("Alterar status para receptivo ?");
                $("input[name=tipo_chamada]").val(dado["tipo_chamada"]);
                if(dado["discagem"] == 1){
                    discagem = 1;
                }
            }
        }else{
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: 'atendimentonew/buscar_atendimento/1',
                type:'POST',
                success: function(response)
                {                
                    response = JSON.parse(response)

                    if(response.status == false)
                    {
                        localStorage.removeItem('telefone');
                    }
                    else
                    {
                        PausaCode = "99";
                        $("#opcoesAtivo").attr("data-statusChamada","receptivo");
                        $("#opcoesAtivo #text_status_chamada").text("Alterar status para receptivo ?");
                        $("input[name=tipo_chamada]").val(response.informacoes.tipo_chamada);
                        discagem = 1;              
                        dado = response.informacoes
                        localStorage.setItem("telefone", JSON.stringify(response.informacoes));  
                        localStorage.removeItem('[object HTMLInputElement]')
                        $('#email_fixo input[name="tipo_chamada"]').val(response.informacoes.tipo_chamada);
                        
                    }
                },
                error: function(error){
                    console.error('ERRO AO VALIDAR TELEFONIA ATIVA');
                }
            });
        }

        let localStorageDadoWhatsAtivoIds = JSON.parse(localStorage.getItem("WhatsAppAtivoIds"));
        let whatsappAtivoRestaurado = false;
        $.each(localStorageDadoWhatsAtivoIds, function(){
            localStorageDadoWhatsAtivoId = this
            dadoWhatsAtivo = JSON.parse(localStorage.getItem("WhatsAppAtivo"+localStorageDadoWhatsAtivoId));
      
            if(dadoWhatsAtivo){
           
                template_id_selecionado = dadoWhatsAtivo.template_id;
                senderTel = dadoWhatsAtivo.senderTel;
                template = dadoWhatsAtivo.template;
                inputsAtivo   = dadoWhatsAtivo.inputsAtivo;
                objWhats = dadoWhatsAtivo.inputsAtivo;
                if(objWhats == undefined){
                    objWhats = {};
                }
                 
                camposAtivo = dadoWhatsAtivo.camposAtivo;
                var html = `<li id="` + "li_whatsAtivo" + `"
                            data-idtimestamp="`+localStorageDadoWhatsAtivoId+`"
                            data-storage-id="WhatsAppAtivo`+localStorageDadoWhatsAtivoId+`"
                            data-protocolo=`+"protocolo"+`
                            data-tempo=`+"tempo"+`
                            class="row m-0 mb-3 atendimento whatsAppAtivo" 
                            style="height: 35px;align-items: center;display: flex;justify-content: center;">
                            <div class="sm-class" style="">
                                <div class="circle-number" style="display:none;"><span></span></div>
                                <img src="{{asset('pages/img/gestao/ux-base-30x30.png')}}" width="25" height="25">
                            </div>
                            <div class="col-lg-7 d-flex" style="align-items: center;">
                                <div class="col-xs-1 col-lg-2 p-0">
                                    <i class="fab fa-whatsapp" style="width: auto;font-size: 20px;color:#3e9be2 !important;line-height: 1.2;"></i>
                                </div>
                                <div class="col-lg-9 col-txt mt-0">
                                    <span style="font-weight:bold;white-space: nowrap;font-size: 12px;" class="nome_contato">` +  "Whatsapp Ativo" + `</span>
                                </div>
                            </div>
                            <div class="col-xs-3 col-lg-3 d-flex p-3" style="align-items: baseline;">
                                <div>
                                </div>
                                <div>
                                    <span style="color:grey"></span>
                                </div>

                            </div>
                            <span id="cancelarWhatsAtivo" onclick="cancelarWhatsappAtivo()"> X</span>
                        </li>`;
                        $('ul#caixa_entrada').append(html);
                        
                        // Desabilitar botão ao restaurar WhatsApp ativo
                        $("#btnStatusWhats").css("pointer-events", "none");
                        $("#btnStatusWhats").css("opacity", "0.4");
                        $(".contatoAtivoWhatsApp").css("opacity", "0.4");
                        $(".contatoAtivoWhatsApp").css("pointer-events", "none");
                        whatsappAtivoRestaurado = true;
                   
            }
        })
        
        // Se não havia WhatsApp ativo salvo, garantir que o botão está habilitado
        if (!whatsappAtivoRestaurado) {
            $("#btnStatusWhats").css("pointer-events", "all");
            $("#btnStatusWhats").css("opacity", "1");
            $(".contatoAtivoWhatsApp").css("opacity", "1");
            $(".contatoAtivoWhatsApp").css("pointer-events", "all");
        }

        emailAtivoReenvio = localStorage.getItem("EmailReenvio");
        if(emailAtivoReenvio == 1){
            localStorage.removeItem("EmailReenvio");
            localStorage.removeItem("EmailAtivo");
            localStorage.removeItem("tempo_email_ativo")
        }

        dadoEmailAtivo = localStorage.getItem("EmailAtivo");
       
        if(dadoEmailAtivo != null && dadoEmailAtivo != undefined && dadoEmailAtivo != 'undefined'){
            
            
            cronometroAtendimento('iniciar');
            $("#btnStatusEmail").css("pointer-events","none");
            $("#btnStatusEmail").css("opacity","0.6");
            $(".contatoAtivoEmail").css("pointer-events","none");
            $(".contatoAtivoEmail").css("opacity","0.6");
            for(i=0; i<emailsAtivo.length; i++){
                $("#selectEmailAtivo").append("<option value="+emailsAtivo[i]+">"+emailsAtivo[i]+ " </option>");    
            }

            var emailsCarregados = false;

            $("#selectEmailAtivo").on("click", function() {
                if (!emailsCarregados) {
                    $.ajax({
                        url: '/atendimento/fila/email/ativo',
                        type: 'get',
                        success: function(response) {
                            if (response.length > 0) {
                                $("#selectEmailAtivo").empty();
                                $("#selectEmailAtivo").append("<option value=''>Selecione o email</option>");
                                for (var i = 0; i < response.length; i++) {
                                    var email = response[i].emailAtivo;
                                    $("#selectEmailAtivo").append(
                                        "<option value='" + email + "'>" + email + " </option>"
                                    );
                                }
                            } else {
                                console.error('A resposta não contém emails ativos.');
                            }
                            emailsCarregados = true;
                        }
                    });
                }
            });

            textoDigitadoAtivo = dadoEmailAtivo.mensagem;
            assuntoEmailAtivo = dadoEmailAtivo.assuntoEmailAtivo;
            var html = `<li id="` + "li_EmailAtivo" + `"
                        data-protocolo=`+dadoEmailAtivo.protocolo+`
                        data-tempo=`+'0'+`
                        class="row m-0 mb-3 atendimento emailAtivo" 
                        style="height: 35px;align-items: center;display: flex;justify-content: center;">
                        <div class="sm-class" style=""> 
                            <img src="{{asset('pages/img/gestao/ux-base-30x30.png')}}" width="25" height="25">
                        </div>
                        <div class="col-lg-7 d-flex" style="align-items: center;">
                            <div class="col-xs-1 col-lg-2 p-0">
                                 <i class="fa fa-envelope-o" style="width: auto;font-size: 20px;color: blue;line-height: 1.2;"></i>
                            </div>
                            <div class="col-lg-9 col-txt mt-0">
                                <span style="font-weight:bold;white-space: nowrap;font-size: 12px;" class="nome_contato">` +  "Email Ativo" + `</span>
                            </div>
                        </div>
                        <div class="col-xs-3 col-lg-3 d-flex p-3" style="align-items: baseline;">
                            <div>
                            </div>
                            <div>
                                <span style="color:grey"></span>
                            </div>
                        </div>
                        <span id="cancelarEmailAtivo" onclick="anularEmailAtivo()"> X </span>
                    </li> `;
            $('ul#caixa_entrada').append(html);
            
        }else{
            $("#btnStatusEmail").css("pointer-events","all");
            $("#btnStatusEmail").css("opacity","1");
            $(".contatoAtivoEmail").css("pointer-events","all");
            $(".contatoAtivoEmail").css("opacity","1");
        }
    });

    $("#atender-uploadFile").on('change',function(){
        $("#inputWebchat").css('pointer-events','none');
        $('#inputWebchat').siblings(".form-control").find(".emojionearea-editor").css("pointer-events","none");     
        $('#inputWebchat').siblings(".form-control").find(".emojionearea-button").css("pointer-events","none");
    });
    function uploadFile( element ){
        $('#concluido_wc').attr('disabled','disabled');
        var classCSS = '';
        var countc =0;
        var id_file = $('.selecionado').attr("id");
        for(var i=0; i < element.files.length; i++){
            classCSS = '';
            var file = element.files[i];
            name = file.name;
            classCSS = file.name.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
            countc = ((countc+1));
            if($('li.file_name.'+classCSS).length > 0) $('li.file_name.'+classCSS).remove();
                            
            $("#dp-files-webchat").append( 
                "<li class='file_name "+classCSS+"' style='font-size: 10px;'>" + name +
                "<span id='eraseAttachment-webchat'+><i class='fa fa-minus-circle' style='font-size: 13px;'></i></span></li>"
            );
        } 
        var clone = $("#atender-uploadFile").clone(true);
        clone.attr('id',id_file);
        clone.attr('class', id_file+' '+classCSS);
        clone.attr('name', 'field2');
        if($('input.'+id_file+'.'+classCSS).length > 0) $('input.'+id_file+'.'+classCSS).remove();
        clone.appendTo($(".field2_area-webchat"));
        $('#concluido_wc').removeAttr('disabled');

        $(document).on('click','#eraseAttachment-webchat', function(){
            var id_file = $('.selecionado.box-email').attr("id");
            $('#inputWebchat').siblings(".form-control").find(".emojionearea-editor").css("pointer-events","all");      
            $('#inputWebchat').siblings(".form-control").find(".emojionearea-button").css("pointer-events","all");
            doc = $(this).parent().text(); 
            
            if($(".field2_area_ignore-webchat .input_ignore."+id_file).length == 0){
                $("#field2_area_ignore-webchat").append(
                    "<input type='hidden' name='ignore_"+id_file+"' class='input_ignore "+id_file+"' value='"+doc+"'>"
                );
            }else{
                var arquivo = $(".field2_area_ignore-webchat .input_ignore."+id_file).val();
                arquivo = doc+","+arquivo;
                $(".field2_area_ignore-webchat .input_ignore."+id_file).val(arquivo);
            }
            $(this).parent().remove();
        });
    }


    
    function ininiar_atendimento(){
        $.ajax({
            type: 'POST',
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/gestao/atendimento/ininiar_atendimento',
            cache: false,
            data:{'tela_id': 4},
            success: function(data){
                regraAtivo = data[1];
                $("#nome_atendente").attr("data-nome-atendente",data['nome_atendente']);
                $(".icon-control-play").css('color','blue');
                if (data[0] && data[0]['status_atendente'] === 'PAUSADO') {
                    if(data[0]['id_pausa'] != "99"){
                        dado = JSON.parse(localStorage.getItem('tempo_pausa'));

                        $(".icon-control-pause").css('color','blue');
                        $(".icon-control-play").css('color','');
                        id_pausa    = data[0]['id_pausa'];      
                        $('#finaliza_pausa').attr("id_pausa",id_pausa);
                        tempo_pausa = data[0]['duracao'];
                        nome_pausa  = data[0]['nome_pausa'];
                        limite  = data[0]['limite'];
                        
                        $('#TipoPausa').text(nome_pausa);
                      
                        $("#Tempo").css('color', '');
                        let em_pausa = localStorage.getItem('em_pausa');
                        if(em_pausa == true || em_pausa == 'true'){
                            if(!$("#PausaCronometro").hasClass('in')){
                                $("#load_list_pause").css('pointer-events','none');
                                const idDiv = 'empausa';
                                const divElement = document.getElementById(idDiv);
                                const tipoValor = divElement.getAttribute('tipo');

                                dadosPausa = {
                                    "id": data[0]['id_pausa'],
                                    "tempo": data[0].duracao,
                                    "nome": data[0].nome_pausa,
                                    "limite": data[0].limite,
                                    "tipo": tipoValor
                                }
                            }
                        }else{
                            inicia_cronometro(tempo_pausa, false);
                        }
                   
                    }else{
                        // quando foi ja foi feita a pausa ativo
                        $("#nome_chamada").text("Atendimento Ativo");
                        PausaCode = "99";// variavel para verificacao de click da caixa de Entrada
                        $('#chamada_receptiva').attr("data-duracao",data['duracao']);
                    }   
                }else if(data && data.length > 0 && data[0] && (data[0]['status_atendente'] == 'ATIVO' || data[0]['status_atendente'] == "DISCADOR LOGADO")){
                    PausaCode = "99";
                }else if(data[0] && data[0].nome_pausa != ""){
                    if(data[1] == 99){
                        PausaCode = "99";
                        id_pausa = 99;
                        tempo_pausa ="";
                        nome_pausa ="PAUSA ATIVO";
                        //pausa(id_pausa, tempo_pausa, nome_pausa);
                        
                        $("#nome_chamada").text("Atendimento Ativo");
                        PausaCode = "99";// variavel para verificacao de click da caixa de Entrada
                        $('#chamada_receptiva').attr("data-duracao",data['duracao']);
                    } 
                    dadosAgendamentoPausa = data[0];
                }
            },
            error: function (xhr, status, error) {
           
            }
        }); 
    }

function minhaFuncao() {
    // Simulando uma operação assíncrona
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, 100); // Delay de 100ms (simulando alguma operação)
    });
}
   
     //ininiar_atendimento
    $(window).load(function(){
        logLoginAtendimento(getFormattedTimestamp());
        let em_pausa = localStorage.getItem('em_pausa');
        if(em_pausa == true || em_pausa == 'true'){
            $("#load_list_pause").css('pointer-events','none');
                ininiar_atendimento();
        }else{
            ininiar_atendimento();
            desabilitarPausas()
        }
    });

    async function logLoginAtendimento(timestamp){        
        try {
            const resposta = await $.ajax({
                url: '/gestao/atendimento/evento_pausa',
                method: 'GET',
                //contentType: 'application/json',
                data: {
                    "evento": "LOGIN",
                    "id_pausa": 0,
                    "timestamp": timestamp,
                }
            });
        } catch (erro) {
            console.error('Erro:', erro);
        }
    }

    $("#upload_files_backoffice").on('click', function() {
        $('#file_backoffice').click();
    })

    function getFormattedTimestamp() {
        const now = new Date();

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');

        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }


    function newInput(input,type){
        var filesStr = "";
        var filesize = 0;
        var filetype = "";

        // verificar se o total de arquivos ultrapassa 25mb
        var files_tmp = input.files; //arquivos a serem adicionados
        var size_tmp = 0;
        for(let x=0; x < files_tmp.length; x++)
        {
            size_tmp = size_tmp + (0.000001*files_tmp[x].size);
        }
        //arquivos adicionados anteriormente
        for(let x=0; x < inputFilespen.length; x++)
        {
            size_tmp = size_tmp + (0.000001*inputFilespen[x].size);
        }
        if(size_tmp > 25)
        {
            alert('Tamanho máximo de 25mb para todos os anexos a serem enviados.');
            return;
        }

        for (let i = 0; i < input.files.length; i++){
            filesize = input.files[i].size/1024/1024;
            filetype = input.files[i].type.split('/');
            if(filetype[1] == 'acc' || filetype[1] == 'amr' || filetype[1] == 'mpeg' || filetype[1] == 'ogg'){
                writefiles(input.files[i],urlAudiopen)
                inputFilespen.push(input.files[i]);
                filesStr += "<li>" + input.files[i].name + "<a onclick='removeLi(this)'><i class='fas fa-times'></i></a>" + "</li>";
            }else if(filetype[1] == 'mp4' || filetype[1] == '3gpp'){
                writefiles(input.files[i],urlVideopen)
                inputFilespen.push(input.files[i]);
                filesStr += "<li>" + input.files[i].name + "<a onclick='removeLi(this)'><i class='fas fa-times'></i></a>" + "</li>";
            }else if(filetype[1] == 'png' || filetype[1] == 'jpeg'){
                writefiles(input.files[i],urlImagepen)
                inputFilespen.push(input.files[i]);
                filesStr += "<li>" + input.files[i].name + "<a onclick='removeLi(this)'><i class='fas fa-times'></i></a>" + "</li>";
            } else if (
                filetype[1] == 'pdf' ||
                filetype[1] == 'vnd.openxmlformats-officedocument.presentationml.presentation' ||
                filetype[1] == 'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                filetype[1] == 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                filetype[1] == 'vnd.ms-powerpoint' ||
                filetype[1] == 'vnd.ms-excel' ||
                filetype[1] == 'msword' ||
                filetype[1] == 'pptx' ||
                filetype[1] == 'ppt' ||
                filetype[1] == 'docx' ||
                filetype[1] == 'doc' ||
                filetype[1] == 'xlsx' ||
                filetype[1] == 'xls' ||
                filetype[1] == 'csv' ||
                filetype[1] == 'x-zip-compressed' ||
                filetype[1] == 'vnd.openxmlformats-officedocument.spreadsheetml.template' ||
                filetype[1] == 'xltx' ||
                filetype[1] == 'vnd.oasis.opendocument.spreadsheet' ||
			    filetype[1] == 'ods' ||
                filetype[1] == 'zip' || 
                filetype[1] == 'webp'
            ) {
                writefiles(input.files[i], urlDocumentpen)
                inputFilespen.push(input.files[i]);
                filesStr += "<li>" + input.files[i].name +
                    "<a onclick='removeLi(this)'><i class='fas fa-times'></i></a>" + "</li>";
            }else{
                alert('Tipo não compatível, selecione um arquivo com uma das seguintes extensões: acc, mp4, amr, mpeg, ogg, 3gpp, pdf, png, jpeg, pptx, ppt, xlsx, xls,xtlx,ods, docx, doc, zip');
                input.files[i].remove;
            }
        }

        document.getElementById("file_backoffice").value = "";
        document.getElementById("dp-files-backoffice").innerHTML += filesStr;
    }

    function removeLi(e) {
        inputFiles = inputFiles.filter(function(file){
            return file.name !== e.parentNode.innerHTML.split("<a")[0];
        })
        inputFilespen = inputFilespen.filter(function(file){
            return file.name !== e.parentNode.innerHTML.split("<a")[0];
        })
        e.parentNode.parentNode.removeChild(e.parentNode);
    }


$('.botoestpc').attr('disabled','disabled');

//##################### 12P ACOES  ##############################

    Array.prototype.diff = function(a) {
        return this.filter(function(i) {return a.indexOf(i) < 0;});
    };

    $('#limpa_campo').click(function(){
        $('#check_limpaCampos').css('display','block');
        // funcionalidade de clickoff no fundo
        if($('#check_limpaCampos').hasClass('background-button-link') == false){$('#check_limpaCampos').addClass('background-button-link')}
        $("<div>",{class: 'background-button',onclick: 'background_button_close()'}).insertBefore("#check_limpaCampos");
    })
    $('#LimpaNao').click(function(){
        background_button_close();
    })
    $('#LimpaSim').click(function(){
        limparInputs();
        background_button_close();
    })
    
    function toTimestamp(strDate){
        var datum = Date.parse(strDate);
        return datum/1000;
    }

    function changeTitle(n,tipo){
        soma = n;
        if(tipo == 'soma'){
            count_title = parseInt(count_title)+1
            //count_title++;
            var newTitle = '(' + count_title + ') ' + title;
        }else if(tipo ="subtracao"){
            if(n == ""){
                var newTitle =  title;
            }else{
                var newTitle = '(' + n + ') ' + title;
            }
            document.title = newTitle;
        }else{
            numero =  numero - n;
            if(numero == 0){
                var newTitle =  title;
            }else{
                var newTitle = '(' + numero + ') ' + title;
            }
            document.title = newTitle;
        }
    }

    function browserNotification(nomeExibicao, tipo = "nova_msg", canal = "", atendimento_id = "", origem_mensagem = false, tipo_mensagem = "") {
        //if (!document.hidden) return;
        if (!window.Notification) {} else {
            // verificar se é o ultimo atendimento para ser notificado
            if (origem_mensagem == true && notificacao_ultimos_atendimentos.length > 0) {
                if ($.inArray(atendimento_id, notificacao_ultimos_atendimentos) === '-1') return;
            }
            if (atendimento_id != '' && notificacao_load == true) {
                if (notificacao_ultimos_atendimentos.length > 0) {
                    if (notificacao_ultimos_atendimentos[notificacao_ultimos_atendimentos.length - 1] !=
                        atendimento_id || notificacao_enviada == true) return;
                }
            }
            notificacao_enviada = true;
            setTimeout(() => {
                notificacao_load = false;
                notificacao_ultimos_atendimentos = [];
            }, 30000);

            var messageType = "";
            if(tipo_mensagem == "location"){
                messageType = "📍 Localização";
            }else if(tipo_mensagem == "image"){
                messageType = "📷 Foto";
            }else if(tipo_mensagem == "audio"){
                messageType = "🎙️ Áudio";
            }else if(tipo_mensagem == "video"){
                messageType = "🎥 Vídeo";
            }else if(tipo_mensagem === "document"){
                messageType = "📎 PDF";
            }else{
                messageType = "Mensagem de texto";
            }

            if (tipo === "nova_msg") {
                if (nomeExibicao != "" && nomeExibicao != "null" && nomeExibicao != null) {
                    var mensagemBrowserNotification = nomeExibicao + ' te enviou uma mensagem';
                } else {
                    var mensagemBrowserNotification = "Você recebeu uma mensagem de um contato desconhecido.";
                }
            } else if (tipo === "novo_at") {
                var mensagemBrowserNotification = 'um novo atendimento no canal ' + nomeExibicao;
            }

            if (Notification.permission === 'granted') {
                var notify = new Notification('Atualização no canal ' + canal, {
                    body: mensagemBrowserNotification + "\n" + messageType,
                    icon: '{{ asset('img/logo-mini.png') }}',
                });
                notify.onclick = (event) => {
                    window.parent.parent.focus();
                }
            } else {
                Notification.requestPermission().then(function(p) {
                    if (p === 'granted') {
                        var notify = new Notification('Uma nova mensagem no canal ' + canal, {
                            body: mensagemBrowserNotification,
                            icon: '{{ asset('img/logo-mini.png') }}',
                        });
                        notify.onclick = (event) => {
                            window.parent.parent.focus();
                        }
                    } else {}
                }).catch(function(err) {});
            }
        }
    }

    function isMobile(){
        if($(window).width() < 991){
            return true;
        }
        return false;
    }

    function IsJsonString(str) {
        try {
            return JSON.parse(str);
        } catch (e) {
            return false;
        }
    }

    function isJson(str)
    {
        if(typeof str == 'undefined' || str == '' || str == null || typeof str == 'object')
        {
            return false;
        }
        if(typeof str == 'object')
        {
            return true;
        }
        try
        {
            JSON.parse(str);
        }
        catch(e)
        {
            return false;
        }
        return true;
    }
    
    function esconderMensagem(){
        $('#buttons-line').css('position','absolute');
        $('#buttons-line').css('bottom','16px');
        $('.md-header').hide();
        $("#mensagem").attr('rows', 2);
        $('.inbox').show();
        $('.chat-form .btn-cont .arrow').css('top', '9px')
        $('.chat-form .btn-cont').css('margin-top', '-32px');
        $('.chat-form .btn-cont .btn').css('height', '32px')
        $('.chat-form .btn-cont .btn').css('margin', '0');
        $('#btnesconde').hide();
    }
//##################### FIM  ACOES  ##############################

// ######  NAO SEI ##############
        $(document).on('click','#status',function(){
            $(this).parent().parent().parent().siblings('.mensagens_historico').slideToggle('slow');
        }); 
        $(document).on("touch touchstart click tap", "#email_fixo", function(){
            if (isMobile()) {
                $('body').animate({
                    scrollTop: $("#formPesquisaAtendimentoContato").offset().top
                }, 2000);
            }
        });
        function recupera_dados(){
            var dados_storage = JSON.parse(localStorage.getItem("telefone"));
            if(dados_storage != null){
                $("#fila_de_atendimento").text(dados_storage["fila_telefonia"]);
                $("#formPesquisaAtendimentoContato input[name=nome]").val(dados_storage["nome"]);
                $("#formPesquisaAtendimentoContato input[name=nome_social]").val(dados_storage["nome_social"]);
                $("#formPesquisaAtendimentoContato input[name=telefone]").val(dados_storage["telefone"]);
                $("#formPesquisaAtendimentoContato input[name=tipo_contato]").val(dados_storage["tipo_contato"]);
                $("#assunto").val(dados_storage["assunto"]).change();           
                $("#assunto").multiselect("refresh");
                $("#tabulacao_motivo").val(dados_storage["tabulacao_motivo"]).change();         
                $("#tabulacao_motivo").multiselect("refresh");
                $("#formPesquisaAtendimentoContato textarea[name=tratativa]").val(dados_storage["tratativa"]);  
                $("#formPesquisaAtendimentoContato input[name=email]").val(dados_storage["email"]);
                $("#formPesquisaAtendimentoContato input[name=cpf]").val(dados_storage["cpf"]);
                $("#formPesquisaAtendimentoContato input[name=cnpj]").val(dados_storage["cnpj"]);
                $("#formPesquisaAtendimentoContato input[name=bairro]").val(dados_storage["bairro"]);
                $("#formPesquisaAtendimentoContato input[name=estado]").val(dados_storage["estado"]);
                $("#formPesquisaAtendimentoContato input[name=cidade]").val(dados_storage["cidade"]);
                $("#formPesquisaAtendimentoContato input[name=rg]").val(dados_storage["rg"]);
                $("#formPesquisaAtendimentoContato input[name=endereco]").val(dados_storage["endereco"]);
                $("#formPesquisaAtendimentoContato input[name=numero]").val(dados_storage["numero"]);
                $("#formPesquisaAtendimentoContato input[name=cep]").val(dados_storage["cep"]);
                $("#formPesquisaAtendimentoContato input[name=complemento]").val(dados_storage["complemento"]);
                $("#formPesquisaAtendimentoContato input[name=referencia]").val(dados_storage["referencia"]);
                $("#formPesquisaAtendimentoContato select[name=identificacao]").val(dados_storage["identificacao"]).change();
                $("#formPesquisaAtendimentoContato input[name=razao_social]").val(dados_storage["razao_social"]);
                $("#formPesquisaAtendimentoContato input[name=segmento]").val(dados_storage["segmento"]);
                $("#formPesquisaAtendimentoContato input[name=responsavel]").val(dados_storage["responsavel"]);
                $("#formPesquisaAtendimentoContato select[name=numero_func]").val(dados_storage["numero_func"]).change();
                $("#formPesquisaAtendimentoContato select[name=porte]").val(dados_storage["porte"]).change();
                $("#formPesquisaAtendimentoContato input[name=inscricao_estadual]").val(dados_storage["inscricao_estadual"]);
                $("#formPesquisaAtendimentoContato input[name=inscricao_municipal]").val(dados_storage["inscricao_municipal"]);
                $("#formPesquisaAtendimentoContato input[name=insq_estadual]").val(dados_storage["insq_estadual"]);
                $("#formPesquisaAtendimentoContato input[name=insq_municipal]").val(dados_storage["insq_municipal"]);
                $("#formPesquisaAtendimentoContato input[name=nome_empresa]").val(dados_storage["nome_empresa"]);
                $("#formPesquisaAtendimentoContato input[name=rua]").val(dados_storage["rua"]);
                $('#Protocolo').text(dados_storage["protocolo"]);
            }
        }
//######  FIM NAO SEI #######################    
</script>

<script>
    $(document).on("click","#open_historico",function(){
        $("#ModalHistorico .chats").html('');
        var contato=$(this).attr('contato');
        var protocolo=$(this).attr('protocolo');
        var atendente=$(this).attr('atendente');
        var data_atendimento=$(this).attr('data');
        var hora_atendimento=$(this).attr('hora');
        var contato_id = $(this).attr('contato_id');
        var telefone = $(this).attr('telefone');
        var email = $(this).attr('email');
        
        $.ajax({
            url: '/relatorio/historicoretorno/'+$(this).attr('idd'),
            type: 'GET',
            success: function(data){
                data_atendimento = data_atendimento.split(' ')
                hora_atendimento = hora_atendimento.split(':')
                hora_atendimento = hora_atendimento[0]+":" + hora_atendimento[1]
                
                var mensagens = data['mensagens']
                var anexo = data['anexos']
                var canal = data['canal']
                data = data['historico']

                $("#ModalHistorico #titulo_chasts").html( "Protocolo: "+protocolo+'<br>Contato:'+contato+" <br> Atendente: " +atendente);
                $("#ModalHistorico #data_hora_chat").html( "Data : "+data_atendimento[0]+'  </br>Hora : '+hora_atendimento);
                
                if(!isEmpty(telefone))
                {
                    $("#whatsapp").attr('onClick', 'backoffice_whatsapp("'+telefone+'","'+contato_id+'");');
                    $("#telefonia").attr('onClick', 'backoffice_telefonia("'+telefone+'","'+contato_id+'");');
                }
                else
                {
                    $("#whatsapp").removeClass('backoffice-whatsapp');
                    $("#whatsapp").addClass('backoffice-disabled');
                    $("#telefonia").removeClass('backoffice-telefonia');
                    $("#telefonia").addClass('backoffice-disabled');
                }
                if(!isEmpty(email))
                {
                    $("#email").attr('onClick', 'reenviarEmail("'+protocolo+'","'+email+'","'+contato_id+'");$("#ModalHistorico").modal("hide")');
                }
                else
                {
                    $("#email").removeClass('backoffice-email');
                    $("#email").addClass('backoffice-disabled');
                }

                $.each(data, function(index, value) {
                    var html =""
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;">Data:'+ value.dataa +'</span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<span style="color: #999;">Hora:'+ value.hora+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<span style="color: #999;">Protocolo:'+ value.protocolo_final+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<span style="color: #999;">Status:'+ value.status+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<br/><span style="color: #999;">Tempo em Fila:'+ value.tempo_fila +'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<span style="color: #999;">Duração:'+ value.duracao +'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                '<span style="color: #999;">Atendente:'+ value.atendente+'</span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(value.canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(value.canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(value.canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(value.canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;">Motivo:'+value.motivo +'</span>'+
                        '</span>'+
                        '<span style="margin-right:3px;">|</span>'+ 
                        '<span style="font-size:12px;">Assunto:'+ value.assunto  +'</span>'+
                        '<span style="margin-right:3px;">|</span>'+ 
                        '<span style="font-size:12px;">Fila:'+ value.fila_nome +'</span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    '<span class="label label-sm label-danger bg-green-meadow" id="status" style="background-color:#F1C40F!important;">'+
                                        'Finalização:'+ value.finalizacao+
                                    '</span>'+
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo'+value.id_solicitacao_pendencia+'" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer'+ value.id +'">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Parecer'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos'+value.id_solicitacao_pendencia+'" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno'+ value.id +'">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                            '<p>'+value.tratativa+'</p>'+
                                        '</ul>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';
                    
                    $("#ModalHistorico .chats").append(html);
                    if(value.url != null){
                        var anexo = "";
                        var filename = value.filename.split('$$');
                        var url = value.url.split('$$');
                        var extension = value.extension.split('$$');
                        var i = 0;
                        $('#verAnexo'+value.id_solicitacao_pendencia).css('display','inline-block');
                        $('#listaAnexos'+value.id_solicitacao_pendencia).empty();
                        
                        $.each(url, function(chave,dados){
                            if(extension[i] == 'gif' || extension[i] == 'jpg'|| extension[i] == 'jpeg' || extension[i] == 'png' || extension[i] == 'pdf' ){
                                var download = '';
                            }else{
                                var download = 'download="'+filename[i]+'"';
                            }
                            anexo +='<li style="list-style-type: none;margin-bottom:2px;">'+
                                        '<a style="color: black; text-decoration: underline; text-align: left;" '+download+' target="_blank" href="'+dados+'" title="'+filename[i]+'">'+filename[i]+'</a>'+
                                        '</li>';
                            i++
                        });
                        $('#listaAnexos'+value.id_solicitacao_pendencia).append(anexo);
                        
                    }
                    $('#ModalHistorico #verAnexo'+value.id_solicitacao_pendencia).off()
                    $('#ModalHistorico #verAnexo'+value.id_solicitacao_pendencia).on('click',function(){
                        $('#ModalHistorico #listaAnexos'+value.id_solicitacao_pendencia).slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verParecer'+value.id).off()
                    $('#ModalHistorico #verParecer'+value.id).on('click',function(){
                        $('#ModalHistorico #atendimentoretorno'+ value.id).slideToggle( "slow", function() {
                        })
                    })
                });

                html = ''
                html += '<div class="col-md-12" style="margin-bottom: 5px; padding: 0px;">'+
                           '<div style="background-color: #ddd;">'+
                                '<div class="modal-body" style="height: 200px;height: 200px !important;max-height: 200px !important;min-height: 200px !important; display: " id="bloco_tratativa">'+
                                '</div>'+
                            '</div>'+
                        '</div>';
                $("#ModalHistorico .chats").append(html);
                if(canal == "3"){
                    $("#bloco_tratativa").empty();
                    $("#bloco_tratativa").css('padding',0)
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;"></span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<br/><span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;"></span>'+
                        '</span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo0" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer0">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Origem'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos0" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno0">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                            '<div id="chat_whtas_retorno" style="position: relative; overflow: hidden; width: auto; height: 180px;">'+
                                                '<ul class="chats_retorno" style="height: 100%;overflow-y: auto;padding-right: 20px;">'+
                                                '</ul>'+
                                            '</div>'+
                                        '</ul>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';
                    $("#bloco_tratativa").append(html);
                    $('#ModalHistorico #verParecer0').off()
                    $('#ModalHistorico #verParecer0').on('click',function(){
                        $('#ModalHistorico #atendimentoretorno0').slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verAnexo0').off()
                    $('#ModalHistorico #verAnexo0').on('click',function(){
                        $('#ModalHistorico #listaAnexos0').slideToggle( "slow", function() {
                        })
                    })
                    mensagens.forEach(add_lista);
                    function add_lista(dados){
                        let data_solicitacao = dados['created_at'].split(' ')[1];
                        data_solicitacao = data_solicitacao.split(':');
                        data_solicitacao = data_solicitacao[0]+":"+data_solicitacao[1];
                        submit_menssager_retorno(dados['id'],dados['mensagem'],dados['tipo'],dados['tipo_mensagem'],dados['url_arquivo'],dados['nome_exibicao'],dados['numero_in'],dados['created_at'].split(' ')[1]);
                    }
                } else if(canal == "4"){
                    $("#bloco_tratativa").empty();
                    $("#bloco_tratativa").css('padding',0)
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;"></span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<br/><span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(canal == 4){html += '<i class="fa fa-instagram" style="color:#d321ba"></i>'}else if(canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;"></span>'+
                        '</span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo0" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer0">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Origem'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos0" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno0">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                            '<div id="chat_whtas_retorno" style="position: relative; overflow: hidden; width: auto; height: 180px;">'+
                                                '<ul class="chats_retorno" style="height: 100%;overflow-y: auto;padding-right: 20px;">'+
                                                '</ul>'+
                                            '</div>'+
                                        '</ul>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';
                    $("#bloco_tratativa").append(html);
                    $('#ModalHistorico #verParecer0').off()
                    $('#ModalHistorico #verParecer0').on('click',function(){
                        $('#ModalHistorico #atendimentoretorno0').slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verAnexo0').off()
                    $('#ModalHistorico #verAnexo0').on('click',function(){
                        $('#ModalHistorico #listaAnexos0').slideToggle( "slow", function() {
                        })
                    })
                    mensagens.forEach(add_lista);
                    function add_lista(dados){
                        let data_solicitacao = dados['created_at'].split(' ')[1];
                        data_solicitacao = data_solicitacao.split(':');
                        data_solicitacao = data_solicitacao[0]+":"+data_solicitacao[1];
                        submit_menssager_retorno(dados['id'],dados['mensagem'],dados['tipo'],dados['tipo_mensagem'],dados['url_arquivo'],dados['nome_exibicao'],dados['numero_in'],dados['created_at'].split(' ')[1]);
                    }
                }else if(canal == "5"){      
                        var mensagem = ''
                        //mensagem = mensagens[i]['mensagem'].replace(new RegExp('<title(.*?)title>', 'gms'), "");
                        mensagem = mensagem.replace(new RegExp('<title(.*?)title>', 'gms'), "");
                        mensagem = mensagem.replace(new RegExp('<base(.*?)>', 'gms'), "");
                        mensagem = mensagem.replace(new RegExp('<script(.*?)script>', 'gms'), "");
                        mensagem = mensagem.replace(new RegExp('<style(.*?)style>', 'gms'), "");
                        mensagem = mensagem.replace(new RegExp('style="(.*?)"', 'gms'), "");

                        $("#bloco_tratativa").empty();
                        $("#bloco_tratativa").css('padding',0)
                        html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;"></span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<br/><span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;"></span>'+
                        '</span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo0" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer0">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Origem'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos0" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno0">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                            '<ul id="listaAnexos" style="position: absolute;display:none;    width: 100%;'+
                                            'height: auto;'+
                                            'background-color: white;'+
                                            'left: 0px;'+
                                            'top:33px;'+
                                            'z-index: 10;max-height: 170px; overflow-y: scroll;">';
                                                $.each(anexo,function(index,item){
                                                    if(item['content'] != undefined){
                                                        html += '<li><a href="'+item['content']+'" target="_blank">'+item['filename']+'</a></li>';
                                                    }
                                                })
                                            html +='</ul>'+ 
                                            '<div style="padding-right: 0;text-align: right;margin: 0;" class="col-md-7" >';
                                            if(anexo != ""){
                                            html +='<a  id="verAnexo" style="color: red;'+
                                                'margin-right: 10px;">Ver anexo <i class="fas fa-angle-down"></i></a>';  
                                            }                        
                                            html+='</div>'+
                                            '</div>'+ 
                                            '<div id="message">'+
                                            '<div id="conteudo_email" class="col-md-12" style="overflow:scroll;height:165px">';
                                                for(i=0;i<mensagens.length;i++){
                                                    html += '<span><strong>De: </strong>'+mensagens[i]['email_sender']+'</span><br/>'+
                                                    '<span><strong>Data / Hora: </strong>'+mensagens[i]['created_at']+'</span><br/>'+
                                                    '<span><strong>Para: </strong>'+mensagens[i]['email_receiver']+'</span><br/>'+
                                                    '<span><strong>Assunto: </strong>'+mensagens[i]['email_subject']+'</span><br/>';
                                                    html += mensagem;
                                                }
                                            html += '</div>'+
                                            '</ul>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'; 
                        
                    $("#bloco_tratativa").append(html); 
                    $('#ModalHistorico #verParecer0').off()
                    $('#ModalHistorico #verParecer0').on('click',function(){
                        $('#ModalHistorico #atendimentoretorno0').slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verAnexo0').off()
                    $('#ModalHistorico #verAnexo0').on('click',function(){
                        $('#ModalHistorico #listaAnexos0').slideToggle( "slow", function() {
                        })
                    })

                    $('#verAnexo').click(function(){
                        $('#listaAnexos').toggle('display')
                    }) 
                }else if(canal == "9"){
                    $("#bloco_tratativa").empty();
                    $("#bloco_tratativa").css('padding',0)
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;"></span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<br/><span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;"></span>'+
                        '</span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo0" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer0">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Origem'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos0" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno0">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                            '<div id="chat_whtas_retorno" style="position: relative; overflow: hidden; width: auto; height: 180px;">'+
                                                '<ul class="chats_retorno" style="height: 100%;overflow-y: auto;padding-right: 20px;">'+
                                                '</ul>'+
                                            '</div>'+
                                        '</ul>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';
                    $("#bloco_tratativa").append(html);
                    $('#ModalHistorico #verParecer0').off()
                    $('#ModalHistorico #verParecer0').on('click',function(){
                        $('#ModalHistorico #atendimentoretorno0').slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verAnexo0').off()
                    $('#ModalHistorico #verAnexo0').on('click',function(){
                        $('#ModalHistorico #listaAnexos0').slideToggle( "slow", function() {
                        })
                    })
                    var json
                    for(var i =0; i < mensagens.length; i++){
                        json = JSON.parse(mensagens[i]['mensagem'])
                        submit_menssager_retorno(
                            mensagens[i]['id'],
                            json['msg'],json['how'] == 'atendente' ? '1' : '0',
                            mensagens[i]['tipo_mensagem'],
                            mensagens[i]['url_arquivo'],
                            mensagens[i]['nome_exibicao'],
                            mensagens[i]['numero_in'],
                            mensagens[i]['created_at'].split(' ')[1]
                        );
                    }
                }else{
                    $("#bloco_tratativa").empty();
                    $("#bloco_tratativa").css('padding',0)
                    mensagens = JSON.parse(mensagens)

                    
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                        '<div class="col-md-12" style="padding-left:40px">'+
                            '<div style="margin-top: 4px; font-size:11px;">'+
                                '<span style="color: #999;"></span>'+
                                '<span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<br/><span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span><span style="margin-right:3px;margin-left: 3px;color: #999"></span>'+
                                '<span style="color: #999;"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                        if(canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                        html += '</div>'+
                        '<span class="task-title-sp">'+
                            '<span style="margin-right:20px;font-size:12px;"></span>'+
                        '</span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<span style="margin-right:3px;"></span>'+ 
                        '<span style="font-size:12px;"></span>'+
                        '<div class="row" style="margin-top:7px;">'+
                            '<div class="col-md-12">'+
                                '<div class="col-md-6">'+
                                    
                                '</div>'+
                                '<div style="padding-left: 0;" class="col-md-3" >'+
                                    '<a  id="verAnexo0" style="color: red;margin-right: 25px;display:none">'+
                                        'Ver anexo <i class="fas fa-angle-down"></i>'+
                                    '</a>'+
                                '</div>'+
                                '<div class="col-md-3" style="padding-left:0px">'+
                                    '<a id="verParecer0">'+
                                        '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                            'Visualizar Origem'+
                                            '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                        '</span>'+
                                    '</a>'+
                                '</div>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<ul id="listaAnexos0" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                '</ul>'+
                            '</div>'+
                            '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                '<div style="display:none;" id="atendimentoretorno0">'+
                                    '<div class="panel-body" style="background-color: white;">'+
                                        '<ul>'+
                                        '<div class="row">'+                         
                                            '<div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">'+
                                                '<div class="row">'+
                                                    '<div class="col-md-2 col-sm-2 col-lg-2 col-xs-3">'+
                                                        '<span>Gravação:</span>'+
                                                    '</div>'+
                                                    '<div class="col-md-10 col-sm-10 col-lg-10 col-xs-9">'+
                                                        '<ul class="play-audio" style="padding-left: 0%;"><audio id="audio_gravacao" controls="" controlslist="nodownload" class="audioplay" style="width: 100%" src="integracao_telefonia/gravacao/'+mensagens["gravacao"]+'"><source src="" type="audio/ogg"><source src="" type="audio/mpeg"><source src="" type="audio/wma">Your browser does not support the audio element.</audio></ul>'+
                                                    '</div>'+
                                                '</div>'+
                                                '<div class="row">'+
                                                    '<div class="col-md-2 col-sm-2 col-lg-2 col-xs-3">'+
                                                        '<span>Tratativa: </span>'+
                                                    '</div>'+
                                                    '<div class="col-md-10 col-sm-10 col-lg-10 col-xs-9">'+
                                                        '<textarea id="tratativa" readonly rows="5" style="resize: none;width: 100%" value="'+mensagens['tratativa']+'">Sem registro de tratativa</textarea>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</div>'+
                                        '</div>'+
                                        '</ul>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';     
                    $("#bloco_tratativa").empty();
                    $("#bloco_tratativa").append(html); 
                    
                    $('#ModalHistorico #verParecer0').off()
                    $('#ModalHistorico #verParecer0').on('click',function(){
                        $('#ModalHistorico #atendimentoretorno0').slideToggle( "slow", function() {
                        })
                    })
                    $('#ModalHistorico #verAnexo0').off()
                    $('#ModalHistorico #verAnexo0').on('click',function(){
                        $('#ModalHistorico #listaAnexos0').slideToggle( "slow", function() {
                        })
                    })
                }

                $("#ModalHistorico").modal();
            },
            error: function(error){
                console.error(error);
            }
        }); 
    });

    $('#ModalHistorico').on('hidden.bs.modal', function(){
        // remover disabled, reatribuir classe de canais
        $('#ModalHistorico .backoffice-disabled').removeClass('backoffice-disabled');
        if($('#ModalHistorico #telefonia').hasClass('backoffice-telefonia') == false) $('#ModalHistorico #telefonia').addClass('backoffice-telefonia');
        if($('#ModalHistorico #whatsapp').hasClass('backoffice-whatsapp') == false) $('#ModalHistorico #whatsapp').addClass('backoffice-whatsapp');
        if($('#ModalHistorico #instagram').hasClass('backoffice-instagram') == false) $('#ModalHistorico #instagram').addClass('backoffice-instagram');
        if($('#ModalHistorico #email').hasClass('backoffice-email') == false) $('#ModalHistorico #email').addClass('backoffice-email');
    });

    $(document).on("click",".historico_parecer",function(){
        var id_chamada = $(this).attr('id_chamada');
        if($('.parecer_historico'+id_chamada).hasClass('active')){
            $('.parecer_historico'+id_chamada).removeClass('active');
            $('.parecer_historico'+id_chamada).css('display','none')
            return ;
        }
        $.ajax({
            url: '/relatorio/historicoretorno/'+$(this).attr('id_chamada'),
            type: 'GET',
            success: function(data){
                data = data['historico']
                $('#atendimento_backoffice'+id_chamada).empty();
                if(data.length > 0){
                    $.each(data, function(index, value) {
                        var html =""
                        
                        html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                            '<div class="col-md-12" style="padding-left:40px">'+
                                '<div style="margin-top: 4px; font-size:11px;">'+
                                    '<span style="color: #999;">Data:'+ value.dataa +'</span>'+
                                    '<span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<span style="color: #999;">Hora:'+ value.hora+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<span style="color: #999;">Protocolo:'+ value.protocolo_final+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<span style="color: #999;">Status:'+ value.status+'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<br/><span style="color: #999;">Tempo em Fila:'+ value.tempo_fila +'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<span style="color: #999;">Duração:'+ value.duracao +'</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>'+
                                    '<span style="color: #999;">Atendente:'+ value.atendente+'</span>'+
                                '</div>'+
                            '</div>'+
                            '<div class="label label-sm " style="margin-right: 10px;font-size:20px;">';
                            if(value.canal == 10){html += '<i class="icon-call-in" style="color: #E26A6A"></i>'}else if(value.canal == 3){html += '<i class="fa fa-whatsapp" style="color:#25d366"></i>'}else if(value.canal == 9){html += '<i class="fa fa-commenting" style="color:#2598d8"></i>'}else if(value.canal == 5){html += '<i class="fa fa-envelope" style="color:red"></i>'}
                            html += '</div>'+
                            '<span class="task-title-sp">'+
                                '<span style="margin-right:20px;font-size:12px;">Motivo:'+value.motivo +'</span>'+
                            '</span>'+
                            '<span style="margin-right:3px;">|</span>'+ 
                            '<span style="font-size:12px;">Assunto:'+ value.assunto  +'</span>'+
                            '<span style="margin-right:3px;">|</span>'+ 
                            '<span style="font-size:12px;">Fila:'+ value.fila_nome +'</span>'+
                            '<div class="row" style="margin-top:7px;">'+
                                '<div class="col-md-12">'+
                                    '<div class="col-md-6">'+
                                        '<span class="label label-sm label-danger bg-green-meadow" id="status" style="background-color:#F1C40F!important;">'+
                                            'Finalização:'+ value.finalizacao+
                                        '</span>'+
                                    '</div>'+
                                    '<div style="padding-left: 0;" class="col-md-3" >'+
                                        '<a  id="verAnexo'+value.id_solicitacao_pendencia+'" style="color: red;margin-right: 25px;display:none">'+
                                            'Ver anexo <i class="fas fa-angle-down"></i>'+
                                        '</a>'+
                                    '</div>'+
                                    '<div class="col-md-3" style="padding-left:0px">'+
                                        '<a id="verParecer'+ value.id +'">'+
                                            '<span class="label label-sm label-danger " style="background-color:#999!important" id="status">'+ 
                                                'Visualizar Parecer'+
                                                '<i class="fa fa-angle-down" style="margin-left:7px;padding-rigth:7px;"></i>'+
                                            '</span>'+
                                        '</a>'+
                                    '</div>'+
                                '</div>'+
                                '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                    '<ul id="listaAnexos'+value.id_solicitacao_pendencia+'" data-show="0" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;">'+
                                    '</ul>'+
                                '</div>'+
                                '<div class="col-md-12" style="margin-top:10px;margin-left: 0px;">'+
                                    '<div style="display:none;" id="atendimentoretorno'+ value.id +'">'+
                                        '<div class="panel-body" style="background-color: white;">'+
                                            '<ul>'+
                                                '<p>'+value.tratativa+'</p>'+
                                            '</ul>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>';
                    
                        $('#atendimento_backoffice'+id_chamada).append(html);
                        if(value.url != null){
                            var anexo = "";
                            var filename = value.filename.split('$$');
                            var url = value.url.split('$$');
                            var extension = value.extension.split('$$');
                            var i = 0;
                            $('#atendimento_backoffice'+id_chamada+' #verAnexo'+value.id_solicitacao_pendencia).css('display','inline-block');
                            $('#atendimento_backoffice'+id_chamada+' #listaAnexos'+value.id_solicitacao_pendencia).empty();
                            
                            $.each(url, function(chave,dados){
                                if(extension[i] == 'gif' || extension[i] == 'jpg'|| extension[i] == 'jpeg' || extension[i] == 'png' || extension[i] == 'pdf' ){
                                    var download = '';
                                }else{
                                    var download = 'download="'+filename[i]+'"';
                                }
                                anexo +='<li style="list-style-type: none;margin-bottom:2px;">'+
                                            '<a style="color: black; text-decoration: underline; text-align: left;" '+download+' target="_blank" href="'+dados+'" title="'+filename[i]+'">'+filename[i]+'</a>'+
                                            '</li>';
                                i++
                            });
                            $('#atendimento_backoffice'+id_chamada+' #listaAnexos'+value.id_solicitacao_pendencia).append(anexo);
                            
                        }
                        $('#atendimento_backoffice'+id_chamada+' #verAnexo'+value.id_solicitacao_pendencia).off()
                        $('#atendimento_backoffice'+id_chamada+' #verAnexo'+value.id_solicitacao_pendencia).on('click',function(){
                            $('#atendimento_backoffice'+id_chamada+' #listaAnexos'+value.id_solicitacao_pendencia).slideToggle( "slow", function() {
                            })
                        })
                        $('#atendimento_backoffice'+id_chamada+' #verParecer'+value.id).off()
                        $('#atendimento_backoffice'+id_chamada+' #verParecer'+value.id).on('click',function(){
                            $('#atendimento_backoffice'+id_chamada+' #atendimentoretorno'+ value.id).slideToggle( "slow", function() {
                            })
                        })
                    });
                }else{
                    $('#atendimento_backoffice'+id_chamada).empty();
                    html = '<div class="col-md-12" id="tabulacao" style="background-color: #f0f0f0;padding-bottom:20px;margin-bottom:6px">'+
                            '<span style="text-align:center; color:rgb(255,0,0)">Esse atendimento não teve interações BackOffice</span>'+
                            '</div>';
                    $('#atendimento_backoffice'+id_chamada).append(html);
                }
                $('.parecer_historico'+id_chamada).css('display','')
                $('.parecer_historico'+id_chamada).addClass('active');
            },
            error: function(error){
                console.error(error);
            }
        }); 
    });
    function submit_menssager_retorno(id,menssagen,tipo=0,tipo_mensagem="",url="",nome_exibicao="",numero,horario){
        horario = horario.split(':')
        horario = horario[0]+":" + horario[1]
        
        if(tipo_mensagem == "text"){
            if(tipo == 1){
                var html = '<li class="in" id_menssagen='+id+'>'+ 
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">'+ 
                        '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;width: 80%;">'+
                            '<span class="arrow" style="border-right:8px solid #fff"> </span>'+
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+breakrow(menssagen)+'<br>'+
                                '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">'+horario+'</span>'+
                            '</span>'+
                        '</div>'+
                    '</li>';
            }else{
                var html = '<li class="out" id_menssagen='+id+'>'+ 
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+ 
                        '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+breakrow(menssagen)+'<br>'+ 
                                '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                            '</span>'+
                        '</div>'+
                    '</li>';
            }
        }else if(tipo_mensagem == 'image'){
            if(tipo == 1){
                var html = '<li class="in" id_menssagen='+id+'>'+ 
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">'+ 
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;width: 80%;">'+
                        '<span class="arrow" style="border-right:8px solid #fff"> </span>'+
                        '<span>'+
                            '<image id="teste" src="'+url+'" style="width:320px;height:240px"/>'+
                        '</span>'+
                        '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                            '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">'+horario+'</span>'+
                        '</span>'+
                    '</div>'+
                '</li>';
            }else{
                if(url == ""){
                    if(urlImage != ""){
                        html = ""
                        urlImage.forEach(function(imageurl)
                        {
                            html += '<li class="out" id_menssagen="'+id+'">'+
                                '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+ 
                                '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                                    '<span>'+
                                        '<image src="'+imageurl+'" style="width:320px;height:240px"/>'+
                                    '</span>'+  
                                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                                        '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+horario+'</span>'+
                                    '</span>'+
                                '</div>'+
                            '</li>';
                        });
                        urlImage = []
                    }
                }else{
                    html = '<li class="out" id_menssagen='+id+'>'+
                        '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+ 
                        '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                            '<span>'+
                                '<image src="'+url+'" style="width:320px;height:240px"/>'+
                            '</span>'+  
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                                '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                            '</span>'+
                        '</div>'+
                    '</li>';
                }
            }
        }else if(tipo_mensagem == 'audio'){
            if(tipo == 1){
                var html = '<li class="in" id_menssagen='+id+'>'+ 
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">'+
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;width: 80%;">'+
                        '<span class="arrow" style="border-right:8px solid #fff"> </span>'+
                        '<span>'+
                            '<audio src="'+url+'" controls></audio>'+
                        '</span>'+
                        '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">'+
                            '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">'+horario+'</span>'+
                        '</span>'+
                    '</div>'+
                '</li>';
            }else{
                if(url == ""){
                    if(urlAudio != ""){
                        var html = ""
                        urlAudio.forEach(function(audiourl){
                            html += '<li class="out" id_menssagen='+id+'>'+ 
                            '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+
                            '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                                '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                                '<span>'+
                                    '<audio src="'+audiourl+'" controls></audio>'+
                                '</span>'+  
                                '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">'+
                                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                                '</span>'+
                            '</div>'+
                        '</li>';
                        })
                        urlAudio = []
                    }
                }else{
                    var html = '<li class="out" id_menssagen='+id+'>'+ 
                        '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+
                        '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                            '<span>'+
                                '<audio src="'+url+'" controls></audio>'+
                            '</span>'+  
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">'+
                                '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                            '</span>'+
                        '</div>'+
                    '</li>';
                }
            }
        }else if(tipo_mensagem == 'video'){
            if(tipo == 1){
                var html = '<li class="in" id_menssagen='+id+'>'+
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">'+ 
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;width: 80%;">'+
                        '<span class="arrow" style="border-right:8px solid #fff"> </span>'+
                        '<span>'+
                            '<video width="320" height="240" controls>'+
                                '<source src="'+url+'" disablePictureInPicture type="video/mp4">'+
                                'Your browser does not support the video tag.'+
                            '</video>'+
                        '</span>'+
                        '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                            '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">'+horario+'</span>'+
                        '</span>'+
                    '</div>'+
                '</li>';
            }else{
                if(url == ""){
                    if(urlVideo != ""){
                        var html = ""
                        urlVideo.forEach(function(videourl){
                            html += '<li class="out" id_menssagen='+id+'>'+ 
                            '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+ 
                            '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                                '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                                '<span>'+
                                    '<video width="320" height="240" controls>'+
                                        '<source src="'+videourl+'" disablePictureInPicture type="video/mp4">'+
                                        'Your browser does not support the video tag.'+
                                    '</video>'+
                                '</span>'+
                                '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                                '</span>'+
                            '</div>'+
                        '</li>';
                        })
                        urlVideo = []
                    }
                }else{
                    var html = '<li class="out" id_menssagen='+id+'>'+ 
                        '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">'+ 
                        '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                            '<span>'+
                                '<video width="320" height="240" controls>'+
                                    '<source src="'+url+'" disablePictureInPicture type="video/mp4">'+
                                    'Your browser does not support the video tag.'+
                                '</video>'+
                            '</span>'+
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >'+
                                '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                            '</span>'+
                        '</div>'+
                    '</li>';
                }
            }
        } else if (
                tipo_mensagem == 'pdf' ||
                tipo_mensagem == 'vnd.openxmlformats-officedocument.presentationml.presentation' ||
                tipo_mensagem == 'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                tipo_mensagem == 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                tipo_mensagem == 'vnd.ms-powerpoint' ||
                tipo_mensagem == 'vnd.ms-excel' ||
                tipo_mensagem == 'msword' ||
                tipo_mensagem == 'pptx' ||
                tipo_mensagem == 'ppt' ||
                tipo_mensagem == 'docx' ||
                tipo_mensagem == 'doc' ||
                tipo_mensagem == 'xlsx' ||
                tipo_mensagem == 'xls' ||
                tipo_mensagem == 'csv' ||
                tipo_mensagem == 'x-zip-compressed' ||
                tipo_mensagem == 'vnd.openxmlformats-officedocument.spreadsheetml.template' ||
                tipo_mensagem == 'xltx' ||
                tipo_mensagem == 'vnd.oasis.opendocument.spreadsheet' ||
			    tipo_mensagem == 'ods' ||
                tipo_mensagem == 'zip'
            ) {
                const iconClasses = {
                    'pdf': 'far fa-file-pdf',
                    'ppt': 'far fa-file-powerpoint',
                    'pptx': 'far fa-file-powerpoint',
                    'doc': 'far fa-file-word',
                    'docx': 'far fa-file-word',
                    'xls': 'far fa-file-excel',
                    'xlsx': 'far fa-file-excel',
                    'xltx': 'far fa-file-excel',
                    'ods': 'far fa-file-excel',
                    'zip': 'far fa-file-archive',
                };

                const extension = nome_exibicao.split('.').pop();
                const iconClass = iconClasses[extension] || 'far fa-file';
                if (tipo == 1) {
                    var html = '<li class="in" id_menssagen=' + id + '>' +
                        '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">' +
                        '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;width: 80%;">' +
                        '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                        '<span>' +
                        '<a style="color:#000" target="_blank" href="' + url + '" download="' + nome_exibicao +
                        '"><i class="' + iconClass + '" style="font-size:16px"></i> ' + nome_exibicao + '</a>' +
                        '</span>' +
                        '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                        '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' +
                        horario + '</span>' +
                        '</span>' +
                        '</div>' +
                        '</li>';
                } else {
                    if (url == "") {
                        if (urlDocument != "") {
                            var html = ""
                            urlDocument.forEach(function(pdfurl) {
                                html += '<li class="out" id_menssagen=' + id + '>' +
                                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">' +
                                    '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                                    '<span>' +
                                    '<a style="color:#fff" target="_blank" href="' + pdfurl + '" download="' +
                                    nome_exibicao + '"><i class="' + iconClass + '" style="font-size:16px"></i> ' +
                                    nome_exibicao + '</a>' +
                                    '</span>' +
                                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' +
                                    horario + '</span>' +
                                    '</span>' +
                                    '</div>' +
                                    '</li>';
                            })
                            urlDocument = []
                        }
                    } else {
                        var html = '<li class="out" id_menssagen=' + id + '>' +
                            '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;">' +
                            '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                            '<span>' +
                            '<a style="color:#fff" target="_blank" href="' + url + '" download="' + nome_exibicao +
                            '"><i class="' + iconClass + '" style="font-size:16px"></i> ' + nome_exibicao + '</a>' +
                            '</span>' +
                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                            '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' +
                            horario + '</span>' +
                            '</span>' +
                            '</div>' +
                            '</li>';
                    }
                }
            }
        
        $("#chat_whtas_retorno ul.chats_retorno").append(html);
        $("#chat_whtas_retorno ul.chats_retorno").animate({ scrollTop: $("ul.chats")[0].scrollHeight + 20}, 0);
    }
    
    function vinculaAtendente(id_pendencia){
        window.localStorage
        localStorage.setItem('Ativo',id_pendencia);
        try{
            $.ajax({
                url: 'gestao/atendimento/vincularetorno/'+id_pendencia+'/{{Auth::user()->id}}',
                type: 'GET',
                success: function(response){
                },
                error: function(error){
                    window.localStorage.removeItem('Ativo')
                }
            })
        }catch(error){
            window.localStorage.removeItem('Ativo')
        }
    }

    function desvinculaAtendente(id_pendencia){
        if (id_pendencia !== null) {
            $.ajax({
                url: 'gestao/atendimento/desvincularetorno/'+id_pendencia+'/{{Auth::user()->id}}',
                type:'GET',
                success: function(response){
                    window.localStorage.removeItem('Ativo')
                },
                error: function(error){
                    console.error(error);
                }
            })
        }
    }

    function inserirAtendimento(stringChamada1,stringChamada2,div, data='', protocolo='',status= '', atendente = '',historico ='')
    {
        data = data.split(" ");
        var data_data = data[0];
        data = data[0].split("-");
        data = `${data[2]}-${data[1]}-${data[0]}`;
        data_show = "Visualizar Histórico (+1 dias)";
        
        if(stringChamada1 == stringChamada2){
            data_data = '';
            data_data = moment(new Date(), 'YYYY-MM-DD', true);
            data_day = data_data.date();
            data_month = data_data.month()+1;
            //data_month = data_data+1;
            data_year = data_data.year()
            data_day = data_day <= 9? '0'+data_day : data_day;
            data_month = data_month <= 9? '0'+data_month : data_month;
            data_data =  `${data_year}-${data_month}-${data_day}`;
        }
        if($(div).children('a[data-chamada="'+stringChamada1+'"]').length == 0 && historico != 1){
            $(`div.whatsBox a[data-chamada_id="${stringChamada2}"]`).remove();
           
            $(div).append(`<a id="verAnterior" href="javascript:;" style="display: table;padding: 2px; border-color: #222!important;margin: 18px auto;border-style:solid!important" class="btn btn-xs default" data-chamada_id="${stringChamada2}" data-chamada="${stringChamada1}" data-date="${data_data}">${data_show} <i class="icon-bubbles"></i></a>`);
            if(protocolo != '' && stringChamada1 != stringChamada2){
                status = status == 1 ? "Em Atendimento" : "Finalizado";
                if($(div).children('span[data-date]').size != 0){
                    $(div).children('span[data-date]').remove();
                }
                $(div).append(`<span style="display: table;background-color: #3E9BE2;padding: 2px; border-radius: 5px!important;color: #fff;margin: 18px auto;">Data: ${data} | Protocolo: ${protocolo} | Status: ${status} | Atendente: ${atendente}</span>`);
            }
        }
    }
    
    function inserirData(stringDate,div,stringChamada1 = "",stringChamada2 = "",stringDateAtendimento = "")
    {
        if(stringChamada1 == stringChamada2){
            var data_atual = moment(new Date(), 'YYYY-MM-DD');
            var data = stringDate.split(" ");
            data = data[0].split("-");
            data[0] = parseInt(data[0]);
            data[1] = parseInt(data[1]);
            data[2] = parseInt(data[2]);
            data_completa = data[0]+"/"+data[1]+"/"+data[2];
            data_completa = moment(data_completa, 'YYYY-MM-DD');
            
            periodo = moment.duration(data_atual.diff(data_completa));
            periodo = periodo.asDays();
            if(periodo < 1)
            {
                data_show = "Hoje";
            }
            else if(periodo < 2)
            {
                data_show = "Ontem";
            }
            else
            {
                //adicionar zero a esquerda para meses e dias
                data[1] = data[1] <= 9? '0'+data[1] : data[1];
                data[2] = data[2] <= 9? '0'+data[2] : data[2];
                data_completa = data[2]+"/"+data[1]+"/"+data[0];
                data_show = data_completa;
            }
            data_date = data[2]+data[1]+data[0];
            if($(div).children('span[data-date="'+data_date+'"]').length == 0){
                
                $(div).append('<span style="display: table;background-color: #426AB4;padding: 2px; border-radius: 5px!important;color: #fff;margin: 18px auto;" data-date="'+data_date+'">'+data_show+'</span>');
            }
        }else{
            var dataAtendimento = moment(stringDateAtendimento, 'YYYY-MM-DD');
            var dataMensagem = moment(stringDate, 'YYYY-MM-DD');
            var ediferente = moment.duration(dataMensagem.diff(dataAtendimento));
            ediferente = ediferente.asDays();
            if(ediferente > 0){
                var data = stringDate.split(" ");
                data = data[0].split("-");
                data_date = data[2]+data[1]+data[0];
                data_completa = data[2]+"/"+data[1]+"/"+data[0];
                data_show = data_completa;
                if($(div).children('span[data-date="'+data_date+'"]').length == 0){
                    $(div).append('<span style="display: table;background-color: #3E9BE2;padding: 2px; border-radius: 5px!important;color: #fff;margin: 18px auto;" data-date="'+data_date+'">'+data_show+'</span>');
                }
            }
        }
    }

    function habilitarPausas(){ 
        $("#lista_pausa").addClass('habilitarPausas');
        // habilita a pausa ativo
        $("#btnStatus").addClass('habilitarPausas');
        $("#lista_pausa").removeClass('desabilitarPausas');
        // desabilita a pausa ativo
        $("#btnStatus").removeClass('desabilitarPausas');
    }
    function desabilitarPausas(){
        $("#lista_pausa").addClass('desabilitarPausas');
        // desabilita a pausa ativo
        $("#btnStatus").addClass('desabilitarPausas');
        $("#lista_pausa").removeClass('habilitarPausas');
        // habilita a pausa ativo
        $("#btnStatus").removeClass('habilitarPausas');
    }

    $("#rdtratativa1").change(function(){
        emails_externo = 0;
        inputFilespen = [];
                urlImagepen = [];
                urlAudiopen = [];
                urlVideopen = [];
                urlDocumentpen = [];
        $(".backoffice_interno").show();
        $(".backoffice_externo").hide();
        $('#ModalPendenciaAtendimento_wc #email_externo').val('');
        $('#ModalPendenciaAtendimento_wc #emails_externo').empty();
        $('#parecer_pendencia_wc').val('')
        document.getElementById("file_backoffice").value = "";
                document.getElementById("dp-files-backoffice").innerHTML = '';
    });
    $("#rdtratativa2").change(function(){
        inputFilespen = [];
        urlImagepen = [];
        urlAudiopen = [];
        urlVideopen = [];
        urlDocumentpen = [];
        $(".backoffice_interno").hide();
        $(".backoffice_externo").show();
        limparTabulacao();
        document.getElementById("file_backoffice").value = "";
        document.getElementById("dp-files-backoffice").innerHTML = '';
    });
    $("#rdacao1").change(function(){
        $("#pendencia_atendimento_wc").show();
        $("#pendencia_concluir_atendimento_wc").hide();
        $('.finaliza').css('display','');

        // atualizar select de motivo
        let canal_id = $(".selecionado").data('canal');
        let fila_id = $(".selecionado").data('fila_atendimento_id');
        let tipo_atendimento = 'receptivo';
        if($(".selecionado").hasClass("whatsAppAtivo") || $(".selecionado").hasClass("emailAtivo") ||  $(".selecionado").hasClass("email_fixo"))
        {
            // se telefonia verificar novamente
            if($(".selecionado").hasClass("email_fixo"))
            {
                canal_id = '10';
                if(ativo == 'Ativo'){tipo_atendimento = 'ativo';}
            }
            else if($('.selecionado').hasClass('emailAtivo'))
            {
                canal_id = '5';
                tipo_atendimento = 'ativo';
            }
            else
            {
                tipo_atendimento = 'ativo';
            }
        }
        get_tabulacao_motivo(canal_id, fila_id, tipo_atendimento,'#assunto_wc_pendencia');

        // limpar selects
        $('#assunto_wc_pendencia').val('');
        $('#assunto_wc_pendencia').multiselect('refresh');
        $('#tabulacao_motivo_wc_pendencia').find('option:not(:first)').remove();
        $('#tabulacao_motivo_wc_pendencia').multiselect('rebuild');
        $('#pesquisa_pendencia_wc').find('option:not(:first)').remove();
        $('#pesquisa_pendencia_wc').multiselect('rebuild');
    });
    $("#rdacao2").change(function(){
        $("#pendencia_atendimento_wc").hide();
        $("#pendencia_concluir_atendimento_wc").show();
        $('.finaliza').css('display','none');
    });
    emails_externo = 0;
     $(document).on('click','a#remover',function(){
        var apagar = confirm("Deseja remover este item?")
        if(apagar == true){
            $(this).closest('div.email_externo').remove();
        }
    }) 
    
    $('#ModalPendenciaAtendimento_wc').off('click','a#adicionar');
    $("#ModalPendenciaAtendimento_wc a#adicionar").click(function(){
        emails_externo +=1;
        var html = '<div class="col-md-10 email_externo">'+
                            '<div class="col-md-8" style="padding-right: 0px; padding-left: 0px;margin-left:50%">'+
                                '<div class="input-group" style="height: 11px; width: 99%;">'+
                                    '<input class="col-md-9 form-control" id="email_externo" type="email" name="email_externo['+emails_externo+']" placeholder="Email Externo" style="padding-left: 15px !important;"/>'+
                                    '<a id="remover" class="col-md-1" href="#"><i style="font-size:12px;color:#ea5460 !important" class="fas fa-trash-alt"></i></a>'+
                                    '<br />'+
                                    '<br />'+
                                '</div>'+
                            '</div>'+
                        '</div>';
        $('#emails_externo').append(html);
    });

    const buttonProximaPagina = $('#historico #historico-paginacao #proxima-pagina');
    const buttonPaginaAnterior = $('#historico #historico-paginacao #pagina-anterior');
    const spanPaginaAtual = $('#historico #historico-paginacao #pagina-atual');
    const spanPaginaTotal = $('#historico #historico-paginacao #total-paginas');

    function atualizarHistoricoAtendente(paginaAtual = 1){
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            data:{
                'atendente_id': {{Auth()->user()->id}},
                'pesquisa': $('#txt_historico_pesquisa').val(),
                'paginaAtual': paginaAtual
            },
            url: "/gestao/atendimento/search_historico_atendente",
            dataType: "json"
        }).done(function(response){

            $("#historico #historico-lista li").remove();

            if(response.status == true) {

                $.each(response.historico, function(key, item) {

                    //variaveis para guardar icone dos canais
                    let icone = document.createElement('i');
                    if(item.canal == 'Telefonia') {
                        if(item.tipo_atendimento == 'Receptivo'){
                            icone.classList.add("icon-call-in","historico-canal");
                            icone.setAttribute('style','color: #E26A6A;')
                        } else {
                            icone.classList.add("icon-call-out","historico-canal");
                            icone.setAttribute('style','color: #337ab7;')
                        }
                    } else if(item.canal == 'Whatsapp') {
                        icone.classList.add("fa","fa-whatsapp","historico-canal");
                        icone.setAttribute('style','color: #03D603;');
                    } else if(item.canal == 'Instagram') {
                        icone.classList.add("fa","fa-instagram","historico-canal");
                        icone.setAttribute('style','color: #03D603;');
                    } else if(item.canal == 'Email') {
                        icone.classList.add("fa","fa-envelope-o","historico-canal");
                        icone.setAttribute('style','color: #E26A6A;');
                    } else if(item.canal == 'Chat') {
                        icone.classList.add("fa","fa-commenting","historico-canal");
                        icone.setAttribute('style','color: #337ab7;');
                    }

                    let tooltip = 'Fila: ' + item.fila + ' \r\n';
                    tooltip += 'Origem: ' + item.origem;
                    icone.setAttribute('title',tooltip);

                    //criar item da lista
                    let li = document.createElement('li');
                    li.setAttribute('data-atendimento', item.id_atendimento);
                    li.classList.add('historico-item');
                    li.setAttribute('onclick','historicoItem(this)');

                    //nome do cliente
                    let cliente = document.createElement('div');
                    cliente.classList.add('historico-cliente');
                    cliente.innerText = item.cliente;
                    cliente.setAttribute('title',tooltip);

                    // calcular limite de caracteres de acordo com a tela
                    let tela = window.innerWidth;
                    let qtd_letras = 20;
                    let qtd_data = 11;
                    if (tela >= 1920) {
                        qtd_letras = 35;
                    } else if (tela > 1600) {
                        qtd_letras = 25;
                    } else if (tela > 1366) {
                        qtd_letras = 20;
                    } else if (tela > 1280) {
                        qtd_letras = 10;
                    } else if (tela > 1074) {
                        qtd_letras = 7;
                    } else {
                        qtd_letras = 5;
                        qtd_data = 11;
                    }

                    cliente.innerText = limitarTexto(item.cliente, qtd_letras);
                    cliente.setAttribute('title', tooltip);

                    //hora
                    let hora = document.createElement('div');
                    let horas = document.createElement('i');
                    horas.classList.add("fas","fa-history");
                    hora.classList.add('historico-horas');
                    hora.innerText = limitarTexto(item.datee, qtd_data);
                    hora.prepend(horas);

                    //icone
                    let historico = document.createElement('i');
                    historico.classList.add("far","fa-file-alt","historico-button");
                    historico.setAttribute('title','Visualizar histórico');

                    //adicionar novas informações
                    li.append(icone,cliente,hora,historico);
                    $('#historico #historico-lista').append(li);
                });

                configShowPaginate(response);
                atualizaStatusPaginacao(response.paginaAtual, response.totalPaginas);
            }
        });
    }

    function configShowPaginate (response) {
        if (response.totalItens <= 30 || response.totalPaginas <= 1) {
            $('#pagina-atual').hide();
            $('#total-paginas').hide();
            $('#pagina-anterior').hide();
            $('#proxima-pagina').hide();
            $('#barra-entre-pg-historico').hide();
            $('#historico-paginacao').hide();
            
            desabilitaHabilitaBotoes(response.paginaAtual, response.totalPaginas);                    
        } else {
            $('#historico-paginacao').show();
            $('#pagina-atual').text(response.paginaAtual);
            $('#total-paginas').text(response.totalPaginas);
            $('#barra-entre-pg-historico').show();
            $('#total-paginas').show();
            $('#pagina-anterior').show();
            $('#proxima-pagina').show();
        }
    }

    function desabilitaHabilitaBotoes(paginaAtual, totalPaginas) {
        if (paginaAtual === 1) {
            buttonPaginaAnterior.prop('disabled', true);
        } else {
            buttonPaginaAnterior.prop('disabled', false);
        }

        if (paginaAtual === totalPaginas) {
            buttonProximaPagina.prop('disabled', true);
        } else {
            buttonProximaPagina.prop('disabled', false);
        }
    }

    function atualizaStatusPaginacao(paginaAtual, totalPaginas) {
        spanPaginaAtual.text(paginaAtual);
        spanPaginaTotal.text(totalPaginas);

        if (totalPaginas > 1) {
            $('#pagina-atual').show();
            $('#total-paginas').show();
        }
    }

    function navegarPagina(direcao) {
        let pagina_atual = parseInt(spanPaginaAtual.text(), 10);
        let total_paginas = parseInt(spanPaginaTotal.text(), 10);
        
        if (direcao === 'prev' && pagina_atual > 1) {
            atualizarHistoricoAtendente(pagina_atual - 1);
        }

        if (direcao === 'next' && pagina_atual < total_paginas) {
            atualizarHistoricoAtendente(pagina_atual + 1);
        }
    }

    function limitarTexto(data, qtdChar) {
        var d = '' + data;

        if (d != 'null' && d != null && d != '') {
            return data.substr(0, qtdChar);
        }

        return '-';
    }
    
    function historicoItem(element) {
        $('.historico-botao-reenviar-email').remove();
        $('.historico-botao-encaminhar-email').remove();
        $('.whatsBox.show').removeClass('show');
        $('#box-whatsAtivo').css('display','none');
        $('#tipo_chat_whatsapp').css('display','none');        
        $('#tipo_chat_instagram').css('display','none');        
        $('.coversaWebchat.show').removeClass('show');
        $('.coversaWebchat').css('display','none');
        $('#tipo_chat_webchat').css('display','none');        
        $('#emailBodyAtivo').css('display','none');
        //email
        $('#listaAnexos').empty();
        $('#assunto_email span').remove();
        $('#verAnexoEmailHistorico').remove();
        $('input[name="protocolo_final"]').val('');
        $('#formPesquisaAtendimentoContato #Protocolo').text('');
        $('#emailBody').css('display','none');
        $('#message').empty();
        //telefone
        $('.audio-historico-atendimento').remove();
        let pai = element.parentElement;
        let filhos = pai.children;
        for(let x=0; x<filhos.length; x++)
        {
            if(filhos[x].classList.contains('historico-selecionado') == true)
            {
                //wpp
                $('.whatsBox[data-atendimento="'+filhos[x].getAttribute('data-atendimento')+'"]').remove();
                //chat
                $('.coversaWebchat[data-atendimento="'+filhos[x].getAttribute('data-atendimento')+'"]').remove();
                //remover classe
                filhos[x].classList.remove('historico-selecionado');
                $('#listaexemplo').empty();
            }
        }

        element.classList.add('historico-selecionado');
        if($(".historico-botao-fechar").length == 0)
        {
            $('#formPesquisaAtendimentoContato .portlet').after('<span class="historico-botao-fechar" onclick="fecharHistorico('+element.getAttribute('data-atendimento')+')">Fechar Histórico</span>');
        }
        else
        {
            $('.historico-botao-fechar').attr('onclick','fecharHistorico('+element.getAttribute('data-atendimento')+')');
        }
        carregarHistorico(element);
    }

    function pesquisarHistoricoEnter(event)
    {
        var key = event.wich || event.keyCode;
        if(key == 13)
        {
            atualizarHistoricoAtendente();
        }
    }
    
    var historico_aberto = '';
    function carregarHistorico(element)
    {
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            data:{'id_atendimento': element.getAttribute('data-atendimento')},
            url: "/gestao/atendimento/search_historico_atendente/true",
            dataType: "json"
        }).done(function(response){
            if(response.status == true)
            {
                //liberar todos os botões de ativos
                $('#btnStatus').removeClass('btn_ativo_disabled');
                $('#btnStatus').removeAttr('style');
                $('#btnStatusEmail').removeClass('btn_ativo_disabled');
                $('#btnStatusEmail').removeAttr('style');
                $('#btnStatusWhats').removeClass('btn_ativo_disabled');
                $('#btnStatusWhats').removeAttr('style');

                var dados = [];
                var canal_ativo = '';
                var id_atendimento = element.getAttribute('data-atendimento');
                goTo('#formPesquisaAtendimentoContato');
                // retirar mensagem de sem atendimento
                visualizando_historico_atendimento = true;
                limparInputs();
                esconderAguardando();
                esconderAguardandoAtivo();
                esconderAguardandoReceptivo();
                cronometroAtendimento('limpar');
                // preencher formulario com as informações do contato
                if(typeof response.contact != 'undefined' && response.contact != null)
                {
                    preencherCampos(response.contact,false,1);
                    $('#formPesquisaAtendimentoContato #fila_de_atendimento').text(response.contact['fila']);
                    dados.push({name: 'tipo_busca', value:'id'});
                    dados.push({name: "id_contato" , value: response.contact['contato_id']});
                    dados.push({name: "pesquisa" , value: ''});
                    dados.push({name: "telefone" , value: response.contact['telefone']});
                    dados.push({name: "protocolo_final" , value: response.contact['protocolo_final']});
                    $('#Protocolo').text(response.contact['protocolo_final']);
                    let total_atendimento = response.contact['tot_atendimento'];
                    total_atendimento = total_atendimento.split(':');
                    $('#id_contato').val(response.contact['contato_id']);
                    if(total_atendimento.length == 3)
                    {
                        $('#cronometro #hour').text(total_atendimento[0]);
                        $('#cronometro #minute').text(total_atendimento[1]);
                        $('#cronometro #second').text(total_atendimento[2]);
                    }
                }
                else
                {
                    $('#btnStatus').addClass('btn_ativo_disabled');
                    $('#btnStatusEmail').addClass('btn_ativo_disabled');
                    $('#btnStatusWhats').addClass('btn_ativo_disabled');
                }
                // desabilitar formulario
                $.each($('#formPesquisaAtendimentoContato input'),
                function(){
                    $(this).prop('disabled',true);
                });
                $.each($('#formPesquisaAtendimentoContato textarea'),
                function(){
                    $(this).prop('disabled',true);
                });
                $.each($('#formPesquisaAtendimentoContato select'),
                function(){
                    $(this).prop('disabled',true);
                });
                // Bloqueia os botoes campos de pesquisa do formulario
                $.each($('#formPesquisaAtendimentoContato span.input-group-addon a'), function(){
                    $(this).css('pointer-events', 'none');
                });
                // Bloqueia o botao campo de salvar dados do formulario
                $('#formPesquisaAtendimentoContato a#salva_dados').css('pointer-events', 'none');
                // Bloqueia o botao campo de gerenciamento de telefones do formulario
                $('#formPesquisaAtendimentoContato span[title="Gerenciar telefones"]').css('pointer-events', 'none');

                $('.telefone-grupo button').prop('disabled',true);
                $('.chat-form .input-group').css({'pointer-events': 'none','cursor': 'not-allowed'});
                $('.chat-form .atender-sendMessageButton').css({'pointer-events': 'none','cursor': 'not-allowed'});
                $('.chat-form button').css({'pointer-events': 'none','cursor': 'not-allowed'});
                $('.emojionearea-editor').css({'pointer-events': 'none','cursor': 'not-allowed'});
                $('.bt-mensagens-rapidas button').attr('disabled',true);
                $('#box-acoes-outras a').css({'pointer-events': 'none','cursor': 'not-allowed'});
                // liberar apenas ativos compativeis
                if(typeof response.contact.email == 'undefined' || response.contact.email == null || response.contact.email == '')
                {
                    $('#btnStatusEmail').addClass('btn_ativo_disabled');
                }
                if(typeof response.contact.telefone == 'undefined' || response.contact.telefone == null || response.contact.telefone == '')
                {
                    $('#btnStatusWhats').addClass('btn_ativo_disabled');
                    $('#btnStatus').addClass('btn_ativo_disabled');
                }
                $(`div#${id_atendimento}`).remove();
                // habilitar caixa de mensagens de acordo com o canal de atendimento
                if(typeof response.contact == 'undefined' || response.contact == null){return;}
                if(response.contact.canal_id == '3') {
                    if(response.contact['tipo_atendimento'] == '1'){canal_ativo = 'whatsapp';}
                    trocar_tipo_chat('tipo_chat_whatsapp');
                    trocarTitulo("whatsapp");
                    calcular_emojiarea();
                    if(typeof response.posts == 'undefined' || response.posts == null){return;}
                    let html = '<div id="'+response.posts[0]['solicitacao_chat_whatsapp_id']+'" class="whatsBox show" data-atendimento="'+element.getAttribute('data-atendimento')+'"></div>';
                    response.posts.forEach(function(item,index){
                        if ((item['mensagem'] != "" && item['mensagem'] != null) ||
                            item['tipo_mensagem'] == "image" ||
                            item['tipo_mensagem'] == "video" ||
                            item['tipo_mensagem'] == "audio" ||
                            item['tipo_mensagem'] == "pdf" ||
                            item['tipo_mensagem'] ==
                            'vnd.openxmlformats-officedocument.presentationml.presentation' ||
                            item['tipo_mensagem'] ==
                            'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                            item['tipo_mensagem'] ==
                            'vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                            item['tipo_mensagem'] == 'vnd.ms-powerpoint' ||
                            item['tipo_mensagem'] == 'x-zip-compressed' ||
                            item['tipo_mensagem'] == 'vnd.openxmlformats-officedocument.spreadsheetml.template' ||
                            item['tipo_mensagem'] == 'xltx' ||
                            item['tipo_mensagem'] == 'vnd.oasis.opendocument.spreadsheet' ||
			                item['tipo_mensagem'] == 'ods' ||
                            item['tipo_mensagem'] == 'vnd.ms-excel' ||
                            item['tipo_mensagem'] == 'msword' ||
                            item['tipo_mensagem'] == 'zip' ||
                            item['tipo_mensagem'] == "xls" ||
                            item['tipo_mensagem'] == "doc" ||
                            item['tipo_mensagem'] == "ppt" ||
                            item['tipo_mensagem'] == "xlsx" ||
                            item['tipo_mensagem'] == 'csv' ||
                            item['tipo_mensagem'] == "docx" ||
                            item['tipo_mensagem'] == "pptx" ||
                            item['tipo_mensagem'] == "location"
                        ) {
                            submit_menssager(
                                item['id'],
                                item['mensagem'],
                                item['tipo'],
                                item['tipo_mensagem'],
                                item['url_arquivo'],
                                item['nome_exibicao'],
                                item['numero_in'],
                                item['created_at'],
                                id_atendimento,
                                item['data'],
                                item['nome'],
                                id_atendimento,
                                '',
                                "",
                                "",
                                "",
                                "",
                                item['sistema'],
                                false,
                                1
                            );
                        }
                    });

                    $(`#${id_atendimento}`).addClass('show');
                } else if(response.contact.canal_id == '9') {
                    trocarTitulo("webchat");
                    trocar_tipo_chat('tipo_chat_webchat');
                    calcular_emojiarea();
                    if(typeof response.posts == 'undefined' || response.posts == null){return;}
                    response.posts.forEach(function(item,index){
                        let mensagem = JSON.parse(item.mensagem);
                        let data = {};
                        data['protocol'] = typeof(mensagem['protocol']) != 'undefined' ? mensagem['protocol']: '';
                        data['msg'] = typeof(mensagem['msg']) != 'undefined' ? mensagem['msg']: '';
                        data['how'] = typeof(mensagem['how']) != 'undefined' ? mensagem['how']: '';
                        data['nome_exibicao'] = typeof(mensagem['nome_exibicao']) != 'undefined' ? mensagem['nome_exibicao']: '';
                        data['hour'] = typeof(mensagem['hour']) != 'undefined' ? mensagem['hour']: '';
                        data['atendente'] = typeof(mensagem['atendente']) != 'undefined' ? mensagem['atendente']: '';
                        data['transferencia'] = typeof(mensagem['transferencia']) != 'undefined' ? mensagem['transferencia']: '';
                        data['type'] = item['tipo'];
                        data['tipo_mensagem'] = item['tipo_mensagem'];
                        data['url_arquivo'] = item['url_arquivo'];
                        data['id_mensagem'] = item['id'];
                        data['name'] = '';
                        showMessages(data);
                    });

                    if(isJson(response.posts[0]['mensagem']) == true)
                    {
                        let protocol = JSON.parse(response.posts[0]['mensagem']);
                        protocol = typeof protocol['protocol'] != 'undefined' ? protocol['protocol']: '';
                        $('#chat_webchat #webchat-conversa #'+protocol).addClass('show');
                        $('#chat_webchat #webchat-conversa #'+protocol).attr('data-atendimento',element.getAttribute('data-atendimento'));
                    }
                } else if(response.contact.canal_id == '5') {
                    $('#emailBody').css('display','block');
                    if(response.contact['tipo_atendimento'] == '1'){canal_ativo = 'email';}
                    trocarTitulo('email');
                    trocar_tipo_chat('emailBody');
                    let email_cc = "";
                    // adicionar emails em cópia
                    if(typeof response.email_cc != 'undefined') {
                        if(response.email_cc.length >= 2){
                            for(i=0;i < response.email_cc.length; i++){
                                if(email_cc != "")
                                {
                                    email_cc += ";" + response.email_cc[i].mail;
                                } else {
                                    email_cc = response.email_cc[i].mail;
                                }
                            }
                        } else if(response.email_cc.length == 1) {
                            email_cc = response.email_cc[0].mail;
                        } else {
                            email_cc = '';
                            $('#emailBody #copia').hide();
                        }
                    }

                    $('#formPesquisaAtendimentoContato input[name=chat_email_messages]').val('');
                    $('input[name="id_email"]').val('');
                    cronometroAtendimento('limpar');
                    
                    // informações de email
                    if(typeof response.atendimento != 'undefined' && response.atendimento != null) {
                        $('#formPesquisaAtendimentoContato #fila_de_atendimento').text(response.atendimento['fila']);
                        $('input[name="protocolo_final"]').val(response.atendimento['protocolo_final']);
                        $('#formPesquisaAtendimentoContato #Protocolo').text(response.atendimento['protocolo_final']);
                        $('#emailBody #copia span').text(email_cc);
                        $('#emailBody #from span').text(response.atendimento['from']);
                        $('#emailBody #to span').text(response.atendimento['to']);
                        $('#emailBody #date_hour span').text(response.atendimento['date_hour']);
                        $('#emailBody #assunto_email span').text(response.atendimento['assunto']);
                        $("input[name=email_cc]").val(email_cc);

                        if($(".historico-botao-reenviar-email").length == 0) {
                            $('#formPesquisaAtendimentoContato .portlet').after('<span class="historico-botao-reenviar-email" title="reenviar email conforme o histórico carregado" onclick="reenviarEmailHistorico(\''+response.atendimento['protocolo_final']+'\')">Reenviar</span>');
                            $('#formPesquisaAtendimentoContato .portlet').after('<span class="historico-botao-encaminhar-email" title="encaminhar email conforme o histórico carregado" onclick="reenviarEmailHistorico(\''+response.atendimento['protocolo_final']+'\',1)">Encaminhar</span>');
                        } else {
                            $('.historico-botao-reenviar-email').attr('onclick','reenviarEmailHistorico(\''+response.atendimento['protocolo_final']+'\')');
                            $('.historico-botao-encaminhar-email').attr('onclick','reenviarEmailHistorico(\''+response.atendimento['protocolo_final']+'\',1)');
                        }
                    }
                    assunto = '<div style="padding-right: 0;" class="col-md-12" id="assunto"><strong> Assunto: </strong> <span></span> </div> ';
                    $('#emailBody #message').empty();

                    // anexos
                    if(typeof response.anexos != 'undefined'){
                        if(response.anexos.length == 0) {
                            $('#verAnexo').css('display','none');
                        } else {
                            $('#verAnexo').css('display','none');
                            let ver_anexo = $('#verAnexo').clone();
                            $(ver_anexo).attr('id','verAnexoEmailHistorico');
                            $(ver_anexo).css('display','inline-block');
                            $(ver_anexo).attr('onclick','$(\'#listaAnexos\').slideToggle("slow")');
                            $('#verAnexo').after(ver_anexo);
                        }
                        var anexo = "";
                        $('#listaAnexos').empty();
                        $.each(response.anexos, function(){
                            if(this.extension == 'gif' || this.extension == 'jpg'|| this.extension == 'jpeg' || this.extension == 'png' || this.extension == 'pdf' ){
                                var download = '';
                            }else{
                                var download = 'download="'+this.filename+'"';
                            }
                            anexo +='<li style="list-style-type: none;">'+
                                        '<a style="color: black; text-decoration: underline; text-align: left;" '+download+' target="_blank" href="'+this.content+'" title="'+this.filename+'">'+this.filename+'</a>'+
                                        '</li><br>';
                        });
                        $('#listaAnexos').append(anexo);
                    } else {
                        $('#verAnexo').css('display','none');
                    }
                    
                    // conteudo do email
                    if(typeof response.posts != 'undefined' && response.posts != null) {
                        $.each(response.posts, function() {
                            let cabecalho = `
                                <div id="cabecalho_email" class="row">
                                    <div class="col-md-12" id="from"><strong>De:</strong> ${this.email_sender}</div>
                                    <div class="col-md-12" id="date_hour"><strong>Hora:</strong> ${this.created_at}</div>
                                    <div class="col-md-12" id="to"><strong>CC:</strong> ${email_cc}</div>
                                    <div class="col-md-12" id="assunto_email"><strong>Assunto:</strong> ${this.email_subject}</div>
                                </div>`;

                            let mensagem = this.mensagem
                                .replace(/<a/g, '<a target="_blank"')
                                .replace(/<title(.*?)title>/gms, "")
                                .replace(/<base(.*?)>/gms, "")
                                .replace(/<script(.*?)script>/gms, "")
                                .replace(/<meta(.*?)>/gms, "")
                                .replace(/<link(.*?)>/gms, "")
                                .replace(/<style(.*?)style>/gms, "")
                                .replace(/style="(.*?)"/gms, "")
                                .trim();

                            cabecalho += `<div>${mensagem}</div>`;

                            $('#message').append(cabecalho);
                        });
                    }

                    $('#emailBody').css('display','block');
                    $(".inbox-view .inbox-view").remove();
                    $('#message').removeAttr('style');
                    $("#message a").attr("target","_blank");
                    if(tinyMCE.get('mensagem')) tinyMCE.get('mensagem').destroy();
                    $('#mensagem').css({'pointer-events': 'none','cursor': 'not-allowed'});
                    $('#mensagem').css('height', '55px');
                } else if(response.contact.canal_id == '10') {
                    id_atendimento = 'telefone';
                    trocarTitulo("telefonia_receptivo");
                    $("#tipo_chat_phone").show();
                    if(typeof response.posts['tratativa'] != 'undefined')
                    {
                        $('textarea[name="tratativa"]').val(response.posts['tratativa']);
                    }
                    if(typeof response.posts['tipo_atendimento'] != 'undefined' && response.posts['tipo_atendimento'] == '1')
                    {
                        trocarTitulo("telefonia_ativo");
                        canal_ativo = 'telefone';
                    }
                    if(typeof response.contact['fila'] == 'undefined' || response.contact['fila'] == 'null'){$('#formPesquisaAtendimentoContato #fila_de_atendimento').text('atendimento ativo');}
                }

                dados.push({name: "id_atendimento" , value: id_atendimento});
                dados.push({name: "canal_ativo" , value: canal_ativo});

                $.ajax({
                    type: "GET",
                    url: "/gestao/atendimento/search_historico",
                    data: dados
                
                }).done(function(retorno){
                    insere_historico(retorno['historico']);
                });
            }
        });
    }

    function fecharHistorico(atendimento, atendimento_selecionado = 0)
    {
        visualizando_historico_atendimento = false;
        //wpp
        $('#tipo_chat_whatsapp').css('display','none');
        $('.whatsBox[data-atendimento="'+atendimento+'"]').remove();
        $(`div#${atendimento}`).remove();
        //chat
        $('#tipo_chat_webchat').css('display','none');
        $('.coversaWebchat[data-atendimento="'+atendimento+'"]').remove();
        //email
        $('#listaAnexos').empty();
        $('#assunto_email span').remove();
        $('#verAnexoEmailHistorico').remove();
        $('input[name="protocolo_final"]').val('');
        $('#formPesquisaAtendimentoContato #Protocolo').text('');
        $('#emailBody').css('display','none');
        $('#message').empty();
        //telefone
        $('.audio-historico-atendimento').remove();
        //remover classe
        $('.historico-selecionado').removeClass('historico-selecionado');
        $('.historico-botao-fechar').remove();
        $('.historico-botao-reenviar-email').remove();
        $('.historico-botao-encaminhar-email').remove();
        //retirar disabled dos campos
        $.each($('#formPesquisaAtendimentoContato input'),
        function(){
            $(this).prop('disabled',false);
        });
        $.each($('#formPesquisaAtendimentoContato textarea'),
        function(){
            $(this).prop('disabled',false);
        });
        $.each($('#formPesquisaAtendimentoContato select'),
        function(){
            $(this).prop('disabled',false);
        });
        // Desbloqueia os botoes campos de pesquisa do formulario
        $.each($('#formPesquisaAtendimentoContato span.input-group-addon a'), function(){
            $(this).css('pointer-events', '');
        });
        // Desbloqueia o botao campo de salvar dados do formulario
        $('#formPesquisaAtendimentoContato a#salva_dados').css('pointer-events', '');
        // Desbloqueia o botao campo de gerenciamento de telefones do formulario
        $('#formPesquisaAtendimentoContato span[title="Gerenciar telefones"]').css('pointer-events', '');
        
        $('.telefone-grupo button').prop('disabled',true);
        $('.chat-form .input-group').css({'pointer-events': 'auto','cursor': 'pointer'});
        $('.chat-form .atender-sendMessageButton').css({'pointer-events': 'auto','cursor': 'pointer'});
        $('.chat-form button').css({'pointer-events': 'auto','cursor': 'pointer'});
        $('.emojionearea-editor').css({'pointer-events': 'auto','cursor': 'text'});
        $('#mensagem').css({'pointer-events': 'auto','cursor': 'text'});
        $('.bt-mensagens-rapidas button').attr('disabled',false);
        $('#box-acoes-outras a').css({'pointer-events': 'auto','cursor': 'auto'});
        $('.telefone-grupo button').attr('disabled',false);
        $('#listaexemplo').empty();
        //liberar todos os botões de ativos
        $('#btnStatus').removeClass('btn_ativo_disabled');
        $('#btnStatusEmail').removeClass('btn_ativo_disabled');
        $('#btnStatusWhats').removeClass('btn_ativo_disabled');
        //verificar se tem atendimento para voltar
        if($('#ul_content li').length == 0 || atendimento_selecionado == 1)
        {
            //limpar formulario
            limparInputs();
        }
        else
        {
            let elem_tmp = $('#ul_content li')[0];
            if ($(elem_tmp).hasClass('box-email')) {
                setTimeout(() => {
                    renderizar_formulario_email($(elem_tmp));
                }, 1000);
            }
            $('#ul_content li')[0].click();
        }
    }

    function fecharEmailAtivo () {
        $("#cancelarEmailAtivo").click();

        toastr.error('sua fila é inválida!', 'Não foi possível reenviar,');
    }

    function bloquearCampoEmailEnvio() {
        $('#selectEmailAtivo').prop('readonly', true);
        // desabilitar formulario
        setTimeout(() => {
            $.each($('#formPesquisaAtendimentoContato input'), function () {
                if ($(this).attr('type') !== 'file') {
                    $(this).prop('readonly', true);
                }
            });
            $.each($('#formPesquisaAtendimentoContato textarea'),
            function(){
                $(this).prop('readonly',true);
            });
            $.each($('#formPesquisaAtendimentoContato select'),
            function(){
                $(this).prop('readonly',true);
            });
            // Bloqueia os botoes campos de pesquisa do formulario
            $.each($('#formPesquisaAtendimentoContato span.input-group-addon a'), function () {
                if ($(this).attr('id') !== 'uploadAtivo') {
                    $(this).css('pointer-events', 'none');
                }
            });
            // Bloqueia o botao campo de salvar dados do formulario
            $('#formPesquisaAtendimentoContato a#salva_dados').css('pointer-events', 'none');
            // Bloqueia o botao campo de gerenciamento de telefones do formulario
            $('#formPesquisaAtendimentoContato span[title="Gerenciar telefones"]').css('pointer-events', 'none');
        }, 1000);
    }

    function desbloquearCampoEmailEnvio() {
        $('#selectEmailAtivo').prop('readonly', false);
        // desabilitar formulario
        setTimeout(() => {
            $.each($('#formPesquisaAtendimentoContato input'), function () {
                if ($(this).attr('type') !== 'file') {
                    $(this).prop('readonly', false);
                }
            });
            $.each($('#formPesquisaAtendimentoContato textarea'),
            function(){
                $(this).prop('readonly', false);
            });
            $.each($('#formPesquisaAtendimentoContato select'),
            function(){
                $(this).prop('readonly', false);
            });
            // Bloqueia os botoes campos de pesquisa do formulario
            $.each($('#formPesquisaAtendimentoContato span.input-group-addon a'), function () {
                if ($(this).attr('id') !== 'uploadAtivo') {
                    $(this).css('pointer-events', 'all');
                }
            });
            // Bloqueia o botao campo de salvar dados do formulario
            $('#formPesquisaAtendimentoContato a#salva_dados').css('pointer-events', 'all');
            // Bloqueia o botao campo de gerenciamento de telefones do formulario
            $('#formPesquisaAtendimentoContato span[title="Gerenciar telefones"]').css('pointer-events', 'all');
        }, 1000);
    }

    function reenviarEmailHistorico(protocolo,encaminhar = null) {
        //sinaliza que é reenvio
        encaminhar == null ? localStorage.setItem('EmailReenvio',1) : localStorage.setItem('EmailEncaminhar',1)

        // entrar em email ativo
        setTimeout(() => {
            $('#statusSimEmail').click();
        }, 1000);

        //resgatar informações do atendimento para adicionar a tela
        setTimeout(() => {
            $.ajax({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                data:{'protocolo': protocolo},
                url: "/gestao/atendimento/search_historico_email",
                dataType: "json"
            }).done(function(response) {
                if(typeof response.status != 'undefined' && response.status == true)
                {
                    //inserir histórico já como texto
                    let html = '<br><br><hr style="display: inline-block; width: 98%;">';
                    if (typeof response.historico !== 'undefined' && response.historico !== null && response.historico !== '') {
                        $.each(response.historico, function() {
                            let cabecalho = `
                                <div id="cabecalho_email" class="row">
                                    <div class="col-md-12" id="from"><strong>De:</strong> ${this.email_sender}</div>
                                    <div class="col-md-12" id="date_hour"><strong>Hora:</strong> ${this.created_at}</div>
                                    <div class="col-md-12" id="to"><strong>Para:</strong> ${this.email_receiver}</div>
                                    <div class="col-md-12" id="assunto_email"><strong>Assunto:</strong> ${this.email_subject}</div>
                                </div>`;

                            let mensagem = this.mensagem
                                .replace(/<a/g, '<a target="_blank"')
                                .replace(/<title(.*?)title>/gms, "")
                                .replace(/<base(.*?)>/gms, "")
                                .replace(/<script(.*?)script>/gms, "")
                                .replace(/<meta(.*?)>/gms, "")
                                .replace(/<link(.*?)>/gms, "")
                                .replace(/<style(.*?)style>/gms, "")
                                .replace(/style="(.*?)"/gms, "")
                                .trim();

                            cabecalho += `<div>${mensagem}</div>`;
                            html += cabecalho;
                        });
                    }

                    if (tinyMCE.get("mensagemAtivo") == null) {
                        $('#mensagemAtivo').val(html);$('#mensagemAtivo').click();
                    } else {
                        tinyMCE.get("mensagemAtivo").setContent(html);
                    }

                    //inserir assunto original
                    if(typeof response.assunto != 'undefined' && response.assunto != null && response.assunto != '') {
                        //retirar protocolo original se houver no assunto
                        if(response.assunto.indexOf("- Protocolo:") != '-1') {
                            response.assunto = response.assunto.substring(0,response.assunto.indexOf("- Protocolo:"));
                        }

                        $("input[name=assuntoEmailAtivo]").val(response.assunto);
                    }

                    //inserir email do atendente se ele estiver listado, se não lista a primeira opção
                    if(typeof response.origem != 'undefined' && response.origem != null && response.origem != '') {
                        $('#selectEmailAtivo option').remove();
                        $("#selectEmailAtivo").append(
                            '<option value="' + response.origem + '" selected>' + response.origem + '</option>'
                        );
                    }

                    //inserir emails ccs separados por ponto e virgula
                    $("input#email_cc").val('');
                    if(typeof response.ccs != 'undefined' && response.ccs != null && response.ccs != '') {
                        $("input#email_cc").val(response.ccs);
                        // adicionei ao contato para que do outro lado ao preencher campos preencha de forma correta esse campo também
                        response.contato.email_cc = response.ccs;
                    }

                    //preenche informações contato
                    if(!isEmpty(response.contato)){
                        preencherCampos(response.contato)
                    }
                }

                if(encaminhar == null) {bloquearCampoEmailEnvio();}
            }).error(function(err){
                $('#mensagemAtivo').val('Erro ao buscar historico de email');
                setTimeout(() => {
                    $('#mensagemAtivo').val('');
                }, 3000);

                console.error('Erro ao buscar historico de email')
            });
        }, 3000);
    }

    $(window).on('load', function(){
        atualizarHistoricoAtendente();
        atualizarCarteira();
    });


function atualizarInteracoes(elemento, acrescentar = true) {
    // Validar se o elemento existe
    if (typeof elemento == 'undefined' || elemento == null || elemento == '') return;

    // Garantir que o seletor está formatado corretamente (ID ou Classe)
    let selector = (elemento.startsWith('.') || elemento.startsWith('#')) ? elemento : '#' + elemento;

    if ($(selector).length == 0) return;

    // Verificar quantidade de interações anteriores do atendimento
    let interacoes_anteriores = 0;
    if ($.isNumeric($(selector + ' .circle-number span').text())) {
        interacoes_anteriores = parseInt($(selector + ' .circle-number span').text());
    }

    // Atualizar a quantidade de interações no elemento
    if (acrescentar == true) {
        $(selector + ' .circle-number span').text(interacoes_anteriores + 1);
        $(selector + ' .circle-number').css('display', 'block');
    } else {
        $(selector + ' .circle-number span').text(0);
        $(selector + ' .circle-number').css('display', 'none');
    }


    /** Comentando código para divir funcionalidade na aba nova interações

    // Inicializar variável total fora do bloco de condições
    let total = 0;

    // Identificar e atualizar aba
    
    if ($(selector).parent().length > 0) {
        let aba = $(selector).parent().attr('id');
        if (typeof aba != 'undefined' && aba != null && aba != '') {
            aba = (aba == 'aguardando_interacao') ? 'qtd_aguard_interacoes' : 'qtd_nv_interacoes';
            total = parseInt($('#' + aba).text());

            if (isNaN(total)) total = 0; // Garantir que o total seja um número

            if (acrescentar == true) {
                total += 1; // Incrementa 1 no total
            } else {
                total -= interacoes_anteriores; // Subtrai as interações anteriores do total
            }

            // Evitar que o total fique negativo
            if (total < 0) total = 0;

            // Atualizar o título da aba e a exibição
            //changeTitle(total, "atualizacao");

            if (total > 0) {
                $('#' + aba).text(total);
                $('#' + aba).css('display', 'block');
            } else {
                $('#' + aba).text(0);
                $('#' + aba).css('display', 'none');
            }
        }
    }

    */
}




    function pesquisarCarteiraEnter(event)
    {
        var key = event.wich || event.keyCode;
        if(key == 13)
        {
            atualizarCarteira();
        }
    }

    var expanded = false; // Variável global para controlar o estado expandido/retraído da lista
    function mostrarLista() {
        var dropdownMenu = document.querySelector('.dropdown-menu');
        if (!expanded) {
            dropdownMenu.style.display = 'block';
            expanded = true;
        } else {
            dropdownMenu.style.display = 'none';
            expanded = false;
        }
    }
    function filtrarLista() {
        var itens = document.querySelectorAll('.btn-group li');
        var todosCheckbox = document.getElementById('checkboxTodos');
        var whatsappCheckbox = document.getElementById('checkboxWhatsapp');
        var emailCheckbox = document.getElementById('checkboxEmail');
        var telefoniaCheckbox = document.getElementById('checkboxTelefonia');
        for (var i = 0; i < itens.length; i++) {
            var item = itens[i];
            var showItem = true; // Definir o valor inicial para true
            if (todosCheckbox.checked) {
            // Se o checkbox "Todos" estiver marcado, exibir o item
            item.style.display = 'block';
            continue; // Pular para a próxima iteração do loop
            }
            var checkbox = item.querySelector('input[type="checkbox"]');
            var icon = item.querySelector('i');
            if (
            (checkbox === whatsappCheckbox && icon.classList.contains('fab') && icon.classList.contains('fa-whatsapp')) ||
            (checkbox === emailCheckbox && icon.classList.contains('far') && icon.classList.contains('fa-envelope')) ||
            (checkbox === telefoniaCheckbox && icon.classList.contains('icon-call-out'))
            ) {
            showItem = true; // Definir showItem como true se pelo menos uma condição for atendida
            } else {
            showItem = false; // Definir showItem como false se nenhuma condição for atendida
            }
            item.style.display = showItem ? 'block' : 'none';
        }
    }

    function atualizarCarteira(page = null)
    {
        if(!isEmpty(event.target) && !isEmpty(event.target.nodeName) && typeof event.currentTarget.nodeName != 'undefined')
        {
            if(event.currentTarget.nodeName.toLowerCase() == 'input' || event.currentTarget.nodeName.toLowerCase() == 'span')
            {
                carteira_texto_pesquisa = $('#txt_carteira_pesquisa').val();
                $('.carteira-navigation .carteira-pagination').empty();
            }
        }

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            data: {
                'atendente_id': {{ Auth()->user()->id }},
                'pesquisa': (page == null) ? $('#txt_carteira_pesquisa').val(): carteira_texto_pesquisa,
                'canais': $('#ckb_filtro_carteira').val(),
                'pagina_atual': page
            },
            url: "/gestao/atendimento/search_carteira",
            dataType: "json"
        }).done(function(response) {
            $("#carteira .lista li").remove();
            if (response.status == true) {
                $.each(response.contatos, function(key, item) {
                    // criar item da lista
                    let li = document.createElement('li');
                    li.setAttribute('data-id', item.id)
                    // criar elemento de nome
                    let nome = document.createElement('div');
                    nome.classList.add('nome');
                    let label = document.createElement('label');
                    label.innerText = (isEmpty(item.nome) || item.nome.toLocaleLowerCase() == 'null' ||
                        item.nome.toLocaleLowerCase() == 'undefined') ? 'Desconhecido' : item.nome;
                    nome.append(label);
                    // adicionar nome da empresa
                    if (!isEmpty(item.empresa) && item.empresa.toLocaleLowerCase() != 'null' && item
                        .empresa.toLocaleLowerCase() != 'undefined') {
                        let span = document.createElement('span');
                        span.innerText = item.empresa;
                        nome.append(span);
                    }
                    // adicionar telefone do contato
                    if (!isEmpty(item.telefone) && item.telefone.toLocaleLowerCase() != 'null' && item
                        .telefone.toLocaleLowerCase() != 'undefined') {
                        let span2 = document.createElement('span');
                        span2.innerText = item.telefone;
                        nome.append(span2);
                    }
                    // icones
                    let botoes = document.createElement('div');
                    botoes.classList.add('botoes');
                    let telefone = document.createElement('i');
                    telefone.classList.add('icon-call-out');
                    telefone.title = 'Iniciar atendimento ativo';
                    telefone.setAttribute('data-opened', '0');
                    if (typeof item.telefone == 'undefined' || item.telefone == null || item.telefone ==
                        '') {
                        telefone.classList.add('disabled');
                    } else {
                        telefone.addEventListener('click', function(event) {
                            if (status == "DISPONÍVEL") {
                                $(event.target).attr('data-opened', '1');
                                $('.selecionado').removeClass('.selecionado');
                                desabilitarCaixaEntrada();
                                visualizando_historico_atendimento = true;
                                entrarAtendimentoAtivo('');
                                goTo('#nome_atendente');
                                trocarTitulo(canal = "telefonia_ativo");
                                setTimeout(() => {
                                    buscarContatoPorId(item.id);
                                    visualizando_historico_atendimento = false;
                                    trocarTitulo(canal = "telefonia_ativo");
                                    habilitarCaixaEntrada();
                                }, 5000);
                            } else {
                                if (discagem == 0) {
                                    // se estiver em ativo mas não discou, simular click e trocar apenas informações 
                                    $(event.target).attr('data-opened', '1');
                                    localStorage.removeItem('telefone');
                                    limparInputs();
                                    $('.selecionado').removeClass('.selecionado');
                                    desabilitarCaixaEntrada();
                                    visualizando_historico_atendimento = true;
                                    $('#chamada_receptiva').click();
                                    goTo('#nome_atendente');
                                    trocarTitulo(canal = "telefonia_ativo");
                                    setTimeout(() => {
                                        buscarContatoPorId(item.id);
                                        visualizando_historico_atendimento = false;
                                        trocarTitulo(canal = "telefonia_ativo");
                                        habilitarCaixaEntrada();
                                    }, 1000);
                                } else {
                                    $(event.target).attr('data-opened', '0');
                                    // se ja estiver discado, mandar alerta
                                    $('#formPesquisaAtendimentoContato .erros').css('display',
                                        'block');
                                    $('#formPesquisaAtendimentoContato .erros ul').html(
                                        '<li>Finalize o atendimento de telefonia ativa atual.</li>'
                                    );
                                    goTo('#nome_atendente');
                                    setTimeout(() => {
                                        $('#formPesquisaAtendimentoContato .erros').css(
                                            'display', 'none');
                                        $('#formPesquisaAtendimentoContato .erros ul')
                                            .empty();
                                    }, 5000);
                                }
                            }
                        });
                    }
                    let whatsapp = document.createElement('i');
                    whatsapp.classList.add('fab', 'fa-whatsapp');
                    whatsapp.title = 'Iniciar atendimento ativo';
                    if (typeof item.telefone == 'undefined' || item.telefone == null || item.telefone == '' || item.somente_telefone == 1) {
                        whatsapp.classList.add('disabled');
                    } else {
                        whatsapp.addEventListener('click', function() {
                            // se já estiver ativo, apenas atualizar informações
                            if ($('#li_whatsAtivo').length == 0) {
                                entrarWhatsAppAtivo();
                                goTo('#nome_atendente');
                                setTimeout(() => {
                                    buscarContatoPorId(item.id);
                                }, 3000);
                            } else {
                                buscarContatoPorId(item.id);
                                goTo('#nome_atendente');
                                setTimeout(() => {
                                    $('#li_whatsAtivo').click();
                                }, 1000);
                            }
                        });
                    }
                    let email = document.createElement('i');
                    email.classList.add('far', 'fa-envelope');
                    email.title = 'Iniciar atendimento ativo';
                    if (typeof item.email == 'undefined' || item.email == null || item.email == '') {
                        email.classList.add('disabled');
                    } else {
                        email.addEventListener('click', function() {
                            // se já estiver ativo, apenas atualizar informações
                            if ($('#li_EmailAtivo').length == 0) {
                                entrarEmailAtivo('', item.id);
                                goTo('#nome_atendente');
                            } else {
                                buscarContatoPorId(item.id);
                                goTo('#nome_atendente');
                                setTimeout(() => {
                                    $('#li_EmailAtivo').click();
                                }, 1000);
                            }
                        });
                    }
                    botoes.append(telefone, whatsapp, email);
                    // adicionar novas informações
                    li.append(nome, botoes);
                    $('#carteira .lista').append(li);
                });

                // verificar se houver mais de uma página desbloquear paginação
                if(!isEmpty(response.qtd_paginas) && response.qtd_paginas > 1)
                {
                    $('.carteira-navigation .carteira-pagination').empty();
                    let pagina_atual = (!isEmpty(response.pagina_atual)) ? response.pagina_atual: 1;
                    let min = pagina_atual - 2;
                    let max = pagina_atual + 2;
                    if(min <= 0)
                    {
                        for(let cont = min;cont <= 0; cont++)
                        {
                            max++;
                        }
                        min = 1;
                    }
                    if(response.qtd_paginas > 5 && max > response.qtd_paginas)
                    {
                        for(let cont = max;cont >= response.qtd_paginas;cont--)
                        {
                            min--;
                        }
                        max = response.qtd_paginas;
                    }

                    for(let cont = min;cont <= max;cont++)
                    {
                        if(cont > response.qtd_paginas) break;
                        if(cont == min)
                        {
                            if(min > 1)
                            {
                                // criar opção de primeira página
                                $('.carteira-navigation .carteira-pagination').append(`<div class="carteira-page-item" onclick="atualizarCarteira(1)" title="primeira"><i class="fa fa-angle-double-left"></i></div>`);
                                $('.carteira-navigation .carteira-pagination').append(`<div class="previous" onclick="atualizarCarteira(${pagina_atual-1})" title="anterior"><i class="fa fa-angle-left"></i></div>`);
                                continue;
                            }
                            else
                            {
                                $('.carteira-navigation .carteira-pagination').append(`<div class="previous" onclick="atualizarCarteira(${pagina_atual-1})" title="anterior"><i class="fa fa-angle-left"></i></div>`);
                            }
                        }
                        if(cont == max || cont == response.qtd_paginas)
                        {
                            if(max < response.qtd_paginas)
                            {
                                // criar opção de última
                                $('.carteira-navigation .carteira-pagination').append(`<div class="next" onclick="atualizarCarteira(${pagina_atual+1})" title="próxima"><i class="fa fa-angle-right"></i></div>`);
                                $('.carteira-navigation .carteira-pagination').append(`<div class="carteira-page-item" onclick="atualizarCarteira(${response.qtd_paginas})" title="última"><i class="fa fa-angle-double-right"></i></div>`);
                                continue;
                            }
                            else
                            {
                                $('.carteira-navigation .carteira-pagination').append(`<div class="next" onclick="atualizarCarteira(${pagina_atual+1})" title="próxima"><i class="fa fa-angle-right"></i></div>`);
                            }
                        }
                        // criar opções normais
                        let html = '';
                        if(cont == pagina_atual)
                        {
                            if(cont == 1){$('.carteira-navigation .carteira-pagination .previous').addClass('bloqueado');$('.carteira-navigation .carteira-pagination .previous').attr('onclick','');}
                            else if(cont == response.qtd_paginas){$('.carteira-navigation .carteira-pagination .next').addClass('bloqueado');$('.carteira-navigation .carteira-pagination .next').attr('onclick','');}
                            html = `<div class="carteira-page-item ativo" onclick="atualizarCarteira()">${cont}</div>`;
                        }
                        else
                        {
                            html = `<div class="carteira-page-item" onclick="atualizarCarteira(${cont})">${cont}</div>`;
                        }

                        if($('.carteira-navigation .carteira-pagination .next').length == 1)
                        {
                            $('.carteira-navigation .carteira-pagination .next').before(html);
                        }
                        else
                        {
                            $('.carteira-navigation .carteira-pagination').append(html);
                        }
                    }
                    $('.carteira-navigation').css('display','block');
                }

                if(page != null)
                {
                    $('#contatos_bloco').animate({
                        scrollTop:  $('#contatos_bloco').scrollTop() - $('#contatos_bloco').offset().top + $(`#contatos_bloco .lista`).offset().top - 150
                    }, 1000);
                }
            }
        })
    }

    // limpar tabela ao fechar modal
    $('#modal_campos_extras').on('hidden.bs.modal', function() {
        $($('#botao_discagem_ativo').parent()).find('span[data-camposextras="true"]').attr('data-contatoid','');
        $('#modal_campos_extras table tbody').empty();
        $('#modal_campos_extras .erros').css('display', 'none');
        $('#modal_campos_extras .erros ul').empty();
        $('#modal_campos_extras .success').css('display', 'none');
        $('#modal_campos_extras .success ul').empty();
        $('#modal_campos_extras h5').remove();
    });
    function verificarContatoWhatsApp() 
    {
        
        let storageId = $('.selecionado').attr('data-storage-id');

        if (typeof storageId != 'undefined' && storageId != null && storageId != '') {
                if (storageId.includes('whatsapp')) {
                    
                        // Exibir o ícone no WhatsApp
                    $('#modal_campos_extras input[name="chk_whatsapp"]').addClass('fa fa-check-square-o');
                    $('#modal_campos_extras input[name="chk_whatsapp"]').removeClass('far fa-square');
                    }
        }else if ($('#modal_campos_extras .btn-primary').attr('data-tipo') == 'email') {
                $('#alternate_email').val(item);
                $('.selecionado').attr('data-email', item);
                let storage = JSON.parse(localStorage.getItem($('.selecionado').attr('data-storage-id')));
                // Desmarcar a caixa de seleção
                $('#modal_campos_extras input[name="chk_whatsapp"]').removeClass('fa fa-check-square-o');
                    $('#modal_campos_extras input[name="chk_whatsapp"]').addClass('far fa-square');
        }
        else {
                $('#modal_campos_extras').modal('hide');
        }
    } 
    function abrir_modal_campos_extras(tipo, elemento) {
        // trocar titulo
        var html = '';
        $('#modal_campos_extras .btn-primary').attr('data-tipo', tipo);
        if (tipo == 'telefone') {
            html =
                '<i class="fas fa-phone-square-alt" style="margin-right: 10px;font-size: 23px;"></i>Números de Telefone';
            $('#modal_campos_extras table thead th:nth-child(2)').text('Telefone');
        } else if (tipo == 'email') {
            html = '<i class="fas fa-envelope" style="margin-right: 10px;font-size: 23px;"></i>Endereços de E-mail';
            $('#modal_campos_extras table thead th:nth-child(2)').text('E-mail');
        } else {
            return;
        }
        $('#modal_campos_extras .modal-title').html(html);
        // pesquisar contato
        let contato_id = $(elemento).attr('data-contatoId');
        if (isEmpty(contato_id) && !isEmpty($('.selecionado').attr('data-id_contato'))) contato_id = $('.selecionado').attr('data-id_contato');
        let telefone = $('#alternate_telefone').val().replace(/\D/g, "");
        let email = $('#alternate_email').val();
        if (typeof contato_id == 'undefined' || contato_id == null || contato_id == '') contato_id = null;
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'POST',
            url: '/busca/contato_campos_extras',
            data: {
                'contato_id':contato_id,
                'telefone': telefone,
                'email': email
            },
            success: function(response) {
                
                if(isEmpty(response.contato)||isEmpty(response.contato.id))
                {
                    if(isEmpty($('#alternate_telefone').val().replace(/\D/g, ""))==false)
                    {
                        let telefone = $('#alternate_telefone').val().replace(/\D/g, "");
                        let whatsapp = true;
                        // criar validação para saber se o whatsapp foi desmarcado
                        let storage_tmp = localStorage.getItem('contatocamposextra');
                        if (!isEmpty(storage_tmp)) {
                            storage_tmp = JSON.parse(storage_tmp);
                            if (telefone == storage_tmp['telefone'] && (storage_tmp['whatsapp'] == false || storage_tmp['whatsapp'] == 'false')) whatsapp = false;
                        }
                        let contato_tmp={
                            'email':[],
                            'id':'-1',
                            'nome': isEmpty($('#alternate_nome').val()) ? 'Descohecido': $('#alternate_nome').val(),
                            'telefone':[{telefone,'principal':true,whatsapp}],
                            
                        }
                        response.contato=contato_tmp;
                        delete contato_tmp;
                    }
                    $('#modal_campos_extras .btn-primary').attr('onclick', 'atualizarCamposExtras(true)')
                    // $('#modal_campos_extras .btn-primary').attr('telefone',telefone)
                }
                if (response.status == true) {
                    
                    // setar contato id no botão
                    $('#modal_campos_extras .btn-primary').attr('data-contatoId', response['contato'][
                        'id'
                    ]);
                    if (typeof response['contato']['nome'] != 'undefined' && response['contato']['nome'] !=
                        null && response['contato']['nome'] != '') {
                        $('#modal_campos_extras table').before('<h5><b>Contato:</b> ' + response['contato'][
                            'nome'
                        ] + '</h5>');
                    }
                    // setar tabela
                    for (let i = 0; i < response['contato'][tipo].length; i++) {
                        let principal = '';
                        let icone = '<i class="far fa-star"></i>';
                        if (response['contato'][tipo][i]['principal'] == true) {
                            principal = 'checked';
                            icone = '<i class="fas fa-star"></i>';
                        }
                        let whatsapp=(response['contato'][tipo][i]['whatsapp'] == true || typeof response['contato'][tipo][i]['whatsapp'] == 'undefined') ? 'checked' : '';

                        //não deixar desflegar caso já esteja marcado como whatsapp.
                        let disabled_check = '';                    
                        if(whatsapp == 'checked'){
                            disabled_check = 'onclick="return false"';
                        }
                                                
                        let html = '<tr class="linhas-campos-extras">' +
                            '<td><input type="radio" name="rd_campos_extras" value="' + i + '" ' +
                            principal + '/></td>' +
                            '<td>' + response['contato'][tipo][i][tipo] + '</td>' +
                            '<td><label for="rd_campos_extras_principal' + i +
                            '" onclick="campos_extras_principal_icone(this)">' + icone +
                            '</label><input type="radio" name="rd_campos_extras_principal" id="rd_campos_extras_principal' +
                            i + '" value="' + i + '" ' + principal + ' hidden /></td>' +
                            '<td><input class="form-check-input" type="checkbox" id="ckb_campos_extras_whatsapp'+i+'"'+whatsapp+'></td>' +
                            
                            '<tr>';
                        $('#modal_campos_extras table tbody').append(html);
                        if (response['contato'][tipo][i]['principal'] == true) $(
                            '#rd_campos_extras_principal' + i).click();
                    }
                    // verificar se é telefone ou email
                    let html = '';
                    let tipo_campos = $('#modal_campos_extras .btn-primary').attr('data-tipo');
                    if (typeof tipo_campos != 'undefined' && tipo_campos != '' && tipo_campos != null && (
                            tipo_campos == 'telefone' || tipo_campos == 'email')) {
                        let input;
                        if (tipo_campos == 'telefone') {
                            // adicionar campo de telefone
                            input = document.createElement('div');
                            input.classList.add('telefone-grupo');
                            input.setAttribute('data-inputname', '');
                            input.setAttribute('data-inputid', '');
                        } else if (tipo_campos == 'email') {
                            // limitar caracteres razoavelmente, e validar se e-mail é valido
                            input = document.createElement('input');
                            input.type = 'text';
                            input.placeholder = 'Adicionar e-mail';
                            input.classList.add('form-control');
                            input.style =
                                'height: 25px;line-height: 25px;background: rgba(0,0,0,0);border: none;';
                            input.value = '';
                            input.setAttribute('maxlength', '100');
                            input.addEventListener('keydown', function(event) {
                                if (event.key === "Enter" || event.keyCode === 13) {
                                    adicionar_campo_extra();
                                }
                            });
                        }

                    } else {
                        html = '<tr class="adiocionar-campos-extras">' +
                            '<td colspan="3" style="padding: 5px;"><input type="text" class="form-control" placeholder="Adicionar item" style="height: 25px;line-height: 25px;background: rgba(0,0,0,0);border: none;" onkeydown="keyDownCamposExtras(event)" /></td>' +
                            '</tr>';
                    }
                    $('#modal_campos_extras table tbody').append(html);

                    $('#modal_campos_extras').modal('show');
                } else {
                    // limpar mensagens de sucesso
                    $('#modal_campos_extras .success').css('display', 'none');
                    $('#modal_campos_extras .success ul').empty();
                    // setar mensagens de erro
                    $('#modal_campos_extras .erros').css('display', 'block');
                    $('#modal_campos_extras .erros ul').html('<li>' + response.message + '</li>');
                    $('#modal_campos_extras').modal('show');
                    setTimeout(() => {
                        $('#modal_campos_extras .erros').css('display', 'none');
                        $('#modal_campos_extras .erros ul').empty();
                    }, 7000);
                }
            },
            error: function(response) {
                // limpar mensagens de sucesso
                $('#modal_campos_extras .success').css('display', 'none');
                $('#modal_campos_extras .success ul').empty();
                // setar mensagens de erro
                $('#modal_campos_extras .erros').css('display', 'block');
                $('#modal_campos_extras .erros ul').html('<li>Erro interno, contate o administrador.</li>');
                $('#modal_campos_extras').modal('show');
                setTimeout(() => {
                    $('#modal_campos_extras .erros').css('display', 'none');
                    $('#modal_campos_extras .erros ul').empty();
                }, 7000);
            }
        });
    }
    function adicionar_campo_extra() {
        try {
            // validar se atingiu o limite de quantide de campos extras
            let limite = 5;
            if ($('#modal_campos_extras tbody tr.linhas-campos-extras').length >= limite)
                throw 'Limite de itens atingido.';
            // verificar se o input foi preenchido
        //   ;  let text = $('#modal_campos_extras tbody .adicionar-campos-extras').last().find('input').val();
            if (typeof text == 'undefined' || text == null || text == '') throw 'Item não pode ser vazio.'
            // se for email verificar se e-mail é valido
            if ($('#modal_campos_extras .btn-primary').attr('data-tipo') == 'email') {
                let pattern =
                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                if (pattern.test(text) == false) throw 'Insira um e-mail válido.'
            } else if ($('#modal_campos_extras .btn-primary').attr('data-tipo') == 'telefone') {
                //adicionar ddi e manter apenas números do input
                text = text.replace(/\D/g, '');
                // text = $('#modal_campos_extras tbody .adicionar-campos-extras').last().find('input').data('ddi') + ' ' +
                    text;
            }
            // verificar se a informação já existe
            let linhas = $('#modal_campos_extras tbody tr.linhas-campos-extras td:nth-child(2)');
            if (typeof linhas != undefined && linhas.length > 0) {
                for (let i = 0; i < linhas.length; i++) {
                    if ($(linhas[i]).text() == text) {
                        throw 'Já cadastrado.'
                        break;
                    }
                }
            }
            // adicionar a tabela
            let tabela = $('#modal_campos_extras tbody tr.linhas-campos-extras td:nth-child(1)');
            let i = 0;
            for (let cont = 0; cont < tabela.length; cont++) {
                let value = $(tabela[cont]).children().attr('value');
                if (typeof value != 'undefined' && value != null && value != '') {
                    i = (value >= i) ? value : i;
                }
            }
            i++;
            let checked = ($('#modal_campos_extras tbody tr.linhas-campos-extras').length > 0) ? '' : 'checked';
            let icone = ($('#modal_campos_extras tbody tr.linhas-campos-extras').length > 0) ?
                '<i class="far fa-star"></i>' : '<i class="fas fa-star"></i>';
            let html = '<tr class="linhas-campos-extras">' +
                '<td><input type="radio" name="rd_campos_extras" value="' + i + '" ' + checked + ' /></td>' +
                '<td>' + text + '</td>' +
                '<td><label for="rd_campos_extras_principal' + i + '" onclick="campos_extras_principal_icone(this)">' +
                icone + '</label><input type="radio" name="rd_campos_extras_principal" id="rd_campos_extras_principal' +
                i + '" value="' + i + '" hidden ' + checked + ' /></td>' +
                '<tr>';
            if ($('#modal_campos_extras tbody tr.linhas-campos-extras').length > 0) {
                $('#modal_campos_extras tbody tr.linhas-campos-extras').last().after(html);
            } else {
                // $('#modal_campos_extras tbody .adicionar-campos-extras').last().before(html);
            }
            // limpar input
            $('#modal_campos_extras input[type="text"]').val('');
        } catch (error) {
            let message = (typeof error == 'string' && error != null && error != '') ? error :
                'Erro interno contate o administrador.';
            // limpar mensagens de sucesso
            $('#modal_campos_extras .success').css('display', 'none');
            $('#modal_campos_extras .success ul').empty();
            // setar mensagens de erro
            $('#modal_campos_extras .erros').css('display', 'block');
            $('#modal_campos_extras .erros ul').html('<li>' + message + '</li>');
            $('#modal_campos_extras').modal('show');
            setTimeout(() => {
                $('#modal_campos_extras .erros').css('display', 'none');
                $('#modal_campos_extras .erros ul').empty();
            }, 3000);
        }
    }
    function remover_campo_extra() {
        try {
            // validar se é o último elemento
            let linhas = $('#modal_campos_extras tbody tr.linhas-campos-extras');
            if (linhas.length == 1) throw 'Item não pode ser removido.'
            // remover item
            $(event.target).parent().parent().remove();
        } catch (error) {
            let message = (typeof error == 'string' && error != null && error != '') ? error :
                'Erro interno contate o administrador.';
            // limpar mensagens de sucesso
            $('#modal_campos_extras .success').css('display', 'none');
            $('#modal_campos_extras .success ul').empty();
            // setar mensagens de erro
            $('#modal_campos_extras .erros').css('display', 'block');
            $('#modal_campos_extras .erros ul').html('<li>' + message + '</li>');
            $('#modal_campos_extras').modal('show');
            setTimeout(() => {
                $('#modal_campos_extras .erros').css('display', 'none');
                $('#modal_campos_extras .erros ul').empty();
            }, 3000);
        }
    }
    function campos_extras_principal_icone(elemento) {
        // limpar todas as estrelas no mesmo nivel
        $('#modal_campos_extras i.fas.fa-star').addClass('far', 'fa-star');
        $('#modal_campos_extras i.fas.fa-star').removeClass('fas');
        // manter apenas estrela atual
        $(elemento).html('<i class="fas fa-star"></i>');
    }
    function keyDownCamposExtras(event) {
        if (event.key === "Enter" || event.keyCode === 13) {
            adicionar_campo_extra();
        } else if (event.key !== 'Backspace' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !==
            'Delete' && event.key !== 'Home' && event.key !== 'End') {
            let text = event.key;
            let pattern = /[A-z|!|@|#|$|%|¨|"|'|&|*|(|)|_|=|-|{|}|.|,|//|\\|>|<|?|-]/g;
            if (pattern.test(text) == true) event.preventDefault();
        }
    }
    function atualizarCamposExtras(contato=true) {
        let tabela = $('#modal_campos_extras .linhas-campos-extras');

        // desabilitar botão de confirmar
        if(contato == true) {
            $('#modal_campos_extras .btn-primary').attr('disabled', 'disabled');
            $('#modal_campos_extras .btn-primary').css('cursor', 'not-allowed');
            // resgatar informações da tabela
        
            let json = [];
            for (let i = 0; i < tabela.length; i++) {
                let posicao = $(tabela[i]).find('td:nth-child(3) input').val();
                let valor = $(tabela[i]).find('td:nth-child(2)').text();
                let whatsapp = $(tabela[i]).find('td:nth-child(4) input[type="checkbox"]').is(':checked') ? true:false;
                if (typeof posicao == 'undefined' || posicao == null || posicao == '') continue;
                if (typeof valor == 'undefined' || valor == null || valor == '') continue;
            
                json.push({
                    "whatsapp":whatsapp,
                    "posicao": posicao,
                    "valor": valor
                });
            }
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: '/atualizar_contato_campos_extras',
                data: {
                    'contato_id': $('#modal_campos_extras .btn-primary').attr('data-contatoId'),
                    'tipo': $('#modal_campos_extras .btn-primary').attr('data-tipo'),
                    'lista': json,
                    'principal': $('#modal_campos_extras input[name="rd_campos_extras_principal"]:checked').val()
                },
                success: function(response) {
                    if (response.status == true) {
                        // limpar mensagens de sucesso
                        $('#modal_campos_extras .success').css('display', 'block');
                        $('#modal_campos_extras .success ul').html('<li>' + response.message + '</li>');
                        // setar mensagens de erro
                        $('#modal_campos_extras .erros').css('display', 'none');
                        $('#modal_campos_extras .erros ul').empty();
                        // selecionar o contato principal
                        setTimeout(() => {
                            // habilitar botão
                            $('#modal_campos_extras .btn-primary').removeAttr('disabled', true);
                            $('#modal_campos_extras .btn-primary').css('cursor', 'auto');
                            // atualizar email ou telefone em: formulario, localstorage e li
                            // resgatar linha selecionada
                            let linha = $('input[name="rd_campos_extras"]:checked').parent().parent();
                            let item = $(linha).find('td:nth-child(2)').text();
                            if ($('#modal_campos_extras .btn-primary').attr('data-tipo') ==
                                'telefone') {
                                // identificar ddi e telefone
                                let telefone = item.substring(item.indexOf(' ') + 1);
                                let ddi = '+' + item.substring(item.indexOf('+') + 1, item.lastIndexOf(
                                    ' '));
                                $('#formPesquisaAtendimentoContato .telefone-grupo ul').find(
                                    '[data-ddi="' + ddi + '"]').click();
                                $('#alternate_telefone').val(telefone);
                                $('.selecionado').attr('data-ddi', ddi);
                                $('.selecionado').attr('data-telefone', telefone);
                                let storage = JSON.parse(localStorage.getItem($('.selecionado').attr(
                                    'data-storage-id')));
                                if (typeof storage != 'undefined' && storage != null && storage != '') {
                                    storage['telefone'] = ddi + ' ' + telefone;
                                    storage = JSON.stringify(storage);
                                    localStorage.setItem($('.selecionado').attr('data-storage-id'),
                                        storage);
                                }
                            } else if ($('#modal_campos_extras .btn-primary').attr('data-tipo') ==
                                'email') {
                                $('#alternate_email').val(item);
                                $('.selecionado').attr('data-email', item);
                                let storage = JSON.parse(localStorage.getItem($('.selecionado').attr(
                                    'data-storage-id')));
                                if (typeof storage != 'undefined' && storage != null && storage != '') {
                                    storage['email'] = item;
                                    storage = JSON.stringify(storage);
                                    localStorage.setItem($('.selecionado').attr('data-storage-id'),
                                        storage);
                                }
                            }
                            $('#modal_campos_extras').modal('hide');
                        }, 3000);
                    } else {
                        // limpar mensagens de sucesso
                        $('#modal_campos_extras .success').css('display', 'none');
                        $('#modal_campos_extras .success ul').empty();
                        // setar mensagens de erro
                        $('#modal_campos_extras .erros').css('display', 'block');
                        $('#modal_campos_extras .erros ul').html('<li>' + response.message + '</li>');
                        // habilitar botão
                        $('#modal_campos_extras .btn-primary').removeAttr('disabled', true);
                        $('#modal_campos_extras .btn-primary').css('cursor', 'auto');
                        setTimeout(() => {
                            $('#modal_campos_extras .erros').css('display', 'none');
                            $('#modal_campos_extras .erros ul').empty();
                        }, 3000);
                    }
                },
                error: function(response) {
                    // limpar mensagens de sucesso
                    $('#modal_campos_extras .success').css('display', 'none');
                    $('#modal_campos_extras .success ul').empty();
                    // setar mensagens de erro
                    $('#modal_campos_extras .erros').css('display', 'block');
                    $('#modal_campos_extras .erros ul').html('<li>Erro interno, contate o administrador.</li>');
                    // habilitar botão
                    $('#modal_campos_extras .btn-primary').removeAttr('disabled', true);
                    $('#modal_campos_extras .btn-primary').css('cursor', 'auto');
                    setTimeout(() => {
                        $('#modal_campos_extras .erros').css('display', 'none');
                        $('#modal_campos_extras .erros ul').empty();
                    }, 3000);
                }
            });
        }
    }
    function pesquisarContatoBackOfficeEnter(event)
    {
        var key = event.wich || event.keyCode;
        if(key == 13)
        {
            buscaBackOffice();
        }
    }

    function validarTransferencia(event)
    {
        // validar
        let classes_proibidas = ['whatsAppAtivo','emailAtivo'];
        let valido = true;
        for(let i=0;i < classes_proibidas.length;i++)
        {
            if($('.selecionado').hasClass(classes_proibidas[i]))
            {
                valido = false;
                break;
            }
        }
        let tipo_chamada = $("input[name=tipo_chamada]").val();
        if(valido == false)        {
            $('.erros li').remove();
            $('.erros ul').append('<li><i class="fas fa-exclamation-circle"></i> Transferência indisponível.</li>');
            $('.erros').css('display','block');
            setTimeout(() => {
                $('.erros').css('display','none');
                $('.erros li').remove();
            }, 5000);
            $('#transfere').focusout();
            return event.preventDefault();
        }
    }

    function backoffice_telefonia(telefone,contato_id)
    {
        if(status == "DISPONÍVEL")
        {
            $('.selecionado').removeClass('.selecionado');
            desabilitarCaixaEntrada();
            visualizando_historico_atendimento = true;
            entrarAtendimentoAtivo('');
            goTo('#nome_atendente');
            trocarTitulo(canal = "telefonia_ativo");
            setTimeout(() => {
                buscarContatoPorId(contato_id);
                visualizando_historico_atendimento = false;
                trocarTitulo(canal = "telefonia_ativo");
                habilitarCaixaEntrada();
            }, 5000);
        }
        else
        {
            if(discagem == 0)
            {
                // se estiver em ativo mas não discou, simular click e trocar apenas informações 
                localStorage.removeItem('telefone');
                limparInputs();
                $('.selecionado').removeClass('.selecionado');
                desabilitarCaixaEntrada();
                visualizando_historico_atendimento = true;
                $('#chamada_receptiva').click();
                goTo('#nome_atendente');
                trocarTitulo(canal = "telefonia_ativo");
                setTimeout(() => {
                    buscarContatoPorId(contato_id);
                    visualizando_historico_atendimento = false;
                    trocarTitulo(canal = "telefonia_ativo");
                    habilitarCaixaEntrada();
                }, 1000);
            }
            else
            {
                // se ja estiver discado, mandar alerta
                $('#formPesquisaAtendimentoContato .erros').css('display','block');
                $('#formPesquisaAtendimentoContato .erros ul').html('<li>Finalize o atendimento de telefonia ativa atual.</li>');
                goTo('#nome_atendente');
                setTimeout(() => {
                    $('#formPesquisaAtendimentoContato .erros').css('display','none');
                    $('#formPesquisaAtendimentoContato .erros ul').empty();
                }, 5000);
            }
        }
        $("#ModalHistorico").modal("hide");
    }

    function backoffice_whatsapp(telefone,contato_id)
    {
        // se já estiver ativo, apenas atualizar informações
        if($('#li_whatsAtivo').length == 0)
        {
            entrarWhatsAppAtivo();
            goTo('#nome_atendente');
            setTimeout(() => {
                buscarContatoPorId(contato_id);
            }, 3000);
        }
        else
        {
            buscarContatoPorId(contato_id);
            goTo('#nome_atendente');
            setTimeout(() => {
                $('#li_whatsAtivo').click();
            }, 1500);
        }
        $("#ModalHistorico").modal("hide");
    }
    
    // se não for telefonia receptiva, bloquear abertura de modal transferir
    $(document).ready(function(){
        $(document).on('show.bs.modal','#ModalTransferirAtendimento', function (event){validarTransferencia(event)});
        $(document).on('show.bs.modal','#ModalTransferirAtendimentoMail', function (event){validarTransferencia(event)});
    });

    // função para ler mensagens, alterando a cor do balão de interações e localStorage
    function setReadMessage(element)
    {
        // validar se elemento existe
        if(isEmpty(element)) return;
        if($(element).length == 0) return;
        // atualizar cor do balão de interação para lido
        if($(element+' .circle-number').hasClass('white') == false) $(element+' .circle-number').addClass('white');
        // verificar se existe o localStorage
        if(isEmpty(localStorage.getItem('messages_read'))) localStorage.setItem('messages_read',JSON.stringify([]));
        // resgatar id do atendimento
        let id = $(element).attr('data-id-atendimento');
        if(isEmpty(id)) return;
        let date = getDate(2);
        let exist = false;
        let local_storage_tmp = JSON.parse(localStorage.getItem('messages_read'));
        for(let i=0; i < local_storage_tmp.length; i++)
        {
            if(local_storage_tmp[i]['id'] == id)
            {
                local_storage_tmp[i]['date'] = date;
                exist = true;
                break;
            }
        }
        if(exist == false) local_storage_tmp.push({'id': id, 'date': date});
        localStorage.setItem('messages_read',JSON.stringify(local_storage_tmp));
    }
    
    // função para verificar se o atendimento foi lido
    function checkReadMessage(element, checkDate = null)
    {
        // validar se elemento existe
        if(isEmpty(element)) return;
        if($(element).length == 0) return;
        // verificar se existe o localStorage
        if(isEmpty(localStorage.getItem('messages_read'))) return;
        // resgatar id do atendimento
        let id = $(element).attr('data-id-atendimento');
        if(isEmpty(id)) return;
        let local_storage_tmp = JSON.parse(localStorage.getItem('messages_read'));
        for(let i=0; i < local_storage_tmp.length; i++)
        {
            if(local_storage_tmp[i]['id'] == id)
            {
                // se for setado a verificação de data, analisar se o visto do atendente é anterior a ultima mensagem
                if(checkDate != null)
                {
                    checkDate = new Date(checkDate);
                    let diff = new Date(local_storage_tmp[i]['date']) - checkDate;
                    if(diff < 0)
                    {
                        removeReadMessage(element)
                    }
                    else
                    {
                        if($(element+' .circle-number').hasClass('white') == false) $(element+' .circle-number').addClass('white');
                    }
                }
                else
                {
                    // atualizar cor do balão de interação para lido
                    if($(element+' .circle-number').hasClass('white') == false) $(element+' .circle-number').addClass('white');
                }
                break;
            }
        }
    }

    // função para ler mensagens, alterando a cor do balão de interações e localStorage
    function removeReadMessage(element)
    {
        // validar se elemento existe
        if(isEmpty(element)) return;
        if($(element).length == 0) return;
        // atualizar cor do balão de interação para não lido
        if($(element+' .circle-number').hasClass('white') == true) $(element+' .circle-number').removeClass('white');
        // verificar se existe o localStorage
        if(isEmpty(localStorage.getItem('messages_read'))) return;
        // resgatar id do atendimento
        let id = $(element).attr('data-id-atendimento');
        if(isEmpty(id)) return;
        let local_storage_tmp = JSON.parse(localStorage.getItem('messages_read'));
        for(let i = (local_storage_tmp.length-1); i >= 0 ; i--)
        {
            if(local_storage_tmp[i]['id'] == id)
            {
                local_storage_tmp.splice(i,1);
                break;
            }
        }
        localStorage.setItem('messages_read',JSON.stringify(local_storage_tmp));
    }

    function salva_dados() {

            var verificaElementoSelecionado = $('.selecionado').length > 0 ?? false;
            var contatoChamadaAtiva = null;
            if(verificaElementoSelecionado) {
                var elementoSelecionado = $('.selecionado');
                if (elementoSelecionado.hasClass('email_fixo') 
                    && 
                        ($("#chamada_receptiva").attr('data-contato_id') === undefined 
                        || $("#chamada_receptiva").attr('data-contato_id') === "")
                    ) 
                {
                    $("#chamada_receptiva").attr('data-contato_id', 'null');
                    buscarContato();
                    setTimeout(function() {
                        salva_dados();
                    }, 2000);
                    return;
                } else if (
                        (elementoSelecionado.hasClass('whatsAppAtivo') 
                            || elementoSelecionado.hasClass('emailAtivo')
                        ) 
                        && 
                        ($('#ul_content li.selecionado').attr('data-contato_id') === undefined 
                        || $('#ul_content li.selecionado').attr('data-contato_id') === "")
                    ) 
                {
                    $('#ul_content li.selecionado').attr('data-contato_id', 'null');
                    buscarContato();
                    setTimeout(function() {
                        salva_dados();
                    }, 2000);
                    return;
                } else {
                    if($('.selecionado').hasClass('email_fixo')){
                        contatoChamadaAtiva = true;
                    }
                }
            }

            let telefone = document.getElementById("alternate_telefone").value
            let cpf = document.getElementById("alternate_cpf").value
            let rg = document.getElementById("alternate_rg").value
 
            var dados_formulario = {
                //dados pessoais
                dados_pessoais: {
                    alternate_nome: document.getElementById("alternate_nome").value,
                    alternate_nome_social: document.getElementById("alternate_nome_social").value,
                },
                //dados de contato
                dados_contato: {
                    alternate_telefone: telefone.replace(/\D/g, ""),
                    alternate_tipo_contato: document.getElementById("alternate_tipo_contato").value,
                    alternate_id_contato: document.getElementById("alternate_id_contato").value,
                    alternate_cpf: cpf.replace(/\D/g, ""),
                    alternate_rg: rg.replace(/\D/g, ""),
                    data_nascimento: document.getElementById("data_nascimento").value,
                    alternate_email: document.getElementById("alternate_email").value,
                    email_cc: document.getElementById("email_cc").value,
                },
                //dados de endereçco
                dados_endereco: {
                    alternate_cep: document.getElementById("alternate_cep").value,
                    rua: document.querySelector('input[name="rua"]').value,
                    numero: document.querySelector('input[name="numero"]').value,
                    complemento: document.querySelector('input[name="complemento"]').value,
                    bairro: document.querySelector('input[name="bairro"]').value,
                    estado: document.querySelector('input[name="estado"]').value,
                    cidade: document.querySelector('input[name="cidade"]').value,
                    referencia: document.querySelector('input[name="referencia"]').value,
                    identificacao: document.getElementById("identificacao22").value,
                },
                //dados de empresa
                dados_empresa: {
                    inputCnpj: document.getElementById("inputCnpj").value,
                    responsavel: document.querySelector('input[name="responsavel"]').value,
                    insq_estadual: document.querySelector('input[name="insq_estadual"]').value,
                    nome_empresa: document.querySelector('input[name="nome_empresa"]').value,
                    segmento: document.querySelector('input[name="segmento"]').value,
                    insq_municipal: document.querySelector('input[name="insq_municipal"]').value,
                    razao_social: document.querySelector('input[name="razao_social"]').value,
                    porte: document.getElementById("porteee").value,
                    numero_funcionarios: document.getElementById("numero_funce").value,
                },
                //informações add
                info_add: {
                    campo1_info_add: getFieldValue('campo1_info_add'),
                    campo2_info_add: getFieldValue('campo2_info_add'),
                    campo3_info_add: getFieldValue('campo3_info_add'),
                    campo4_info_add: getFieldValue('campo4_info_add'),
                    campo5_info_add: getFieldValue('campo5_info_add'),
                    campo6_info_add: getFieldValue('campo6_info_add'),
                    campo7_info_add: getFieldValue('campo7_info_add'),
                    campo8_info_add: getFieldValue('campo8_info_add'),
                    campo9_info_add: getFieldValue('campo9_info_add'),
                    campo10_info_add: getFieldValue('campo10_info_add'),
                },
 
                //info de atendimento
                info_atendimento: {
                    info: document.querySelector('textarea[name="info"]').value,
                    campo1: document.querySelector('input[name="campo1"]').value,
                    campo2: document.querySelector('input[name="campo2"]').value,
                    campo3: document.querySelector('input[name="campo3"]').value,
                    campo4: document.querySelector('input[name="campo4"]').value,
                },
                protocolo: $('#Protocolo').text(),
                _token: $('meta[name="csrf-token"]').attr('content')
            };
 
            var elementosLi = document.querySelectorAll('#ul_content li');
            var idLiSelecionado;
            var idContatoSelecionado = "null";
            elementosLi.forEach(function(li) {
                if (li.classList.contains('selecionado')) {
                    idLiSelecionado = li.getAttribute('data-storage-id');
                    idContatoSelecionado = li.getAttribute('data-contato_id');
                }
            });
  
            for (let i = 0; i < localStorage.length; i++) {
                const chave = localStorage.key(i);
                // if (chave.endsWith(idLiSelecionado)) {
                if (chave.includes(idLiSelecionado)) {
                    updateLocalStorage(chave);
                }
            }

            if(idContatoSelecionado == "null"){
                if(contatoChamadaAtiva) {
                    idContatoSelecionado = $("#chamada_receptiva").attr('data-contato_id') ?? null;
                } else {
                    idContatoSelecionado = null;
                }
            }

            var local_stg_contatoid = idContatoSelecionado;
            if (local_stg_contatoid !== null && local_stg_contatoid !== "") { 
                dados_formulario['contato_id'] = local_stg_contatoid;
 
                $.ajax({
                    type: "POST",
                    url: "base_contato/atualizar_formulario",
                    data: dados_formulario,
                    beforeSend: function() {
                        $("#salva_dados").css("pointer-events", 'none');  
                    },
                    success: function(response) {
                        setAtenderAlertSuccess('Contato atualizado com sucesso.');
                        $('.selecionado .nome_contato').text(response.nome_contato);
                        $('.selecionado').attr('data-nome', response.nome_contato);

                    },
                    error: function(error) {
                        setAtenderAlertError(error.responseJSON.error, expired = '')
                    },
                    complete: function() {
                        setTimeout(() => {
                            $("#salva_dados").css("pointer-events", 'all');  
                        }, 1000);
                    }
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: "base_contato/salvar_formulario",
                    data: dados_formulario,
                    beforeSend: function() {
                        $("#salva_dados").css("pointer-events", 'none');  
                    },
                    success: function(response) {
                        setAtenderAlertSuccess('Contato inserido com sucesso.');
 
                        if (response.contato_id) {
                            var contatoId = response.contato_id;
                            local_stg_contato = contatoId.toString();
                            var storageAtendimento = localStorage.getItem(idLiSelecionado);
                            var objetoStorageAtendimento = JSON.parse(storageAtendimento);
                            objetoStorageAtendimento.contato_id = local_stg_contato;
                            localStorage.setItem(idLiSelecionado, JSON.stringify(objetoStorageAtendimento));
                            localStorage.setItem('contatoid', local_stg_contato);
                            if(contatoChamadaAtiva) {
                                $("#chamada_receptiva").attr('data-contato_id', local_stg_contato)
                            } else {
                                elementosLi.forEach(function(li) {
                                if (li.classList.contains('selecionado')) {
                                    li.setAttribute('data-contato_id', local_stg_contato);
                                }
                            });
                            }
                            
                        } 
                    },
                    error: function(error) {
                        setAtenderAlertError(error.responseJSON.error, expired = '')
                    },
                    complete: function() {
                        setTimeout(() => {
                            $("#salva_dados").css("pointer-events", 'all');  
                        }, 1000);
                    }
                });
            }
        }

    function getFieldValue(fieldName) {
    var field = document.querySelector('input[name="' + fieldName + '"]');
    
    if (field) {
        // Se for um input, retorna o valor
        return field.value;
    } else {
        // Se não for um input, verifica se é um select
        field = document.querySelector('select[name="' + fieldName + '"]');
        
        if (field) {
            // Se for um select, retorna o valor selecionado
            return field.options[field.selectedIndex].value;
        } else {
            // Se não for nem input nem select, você pode tratar de acordo com sua lógica
            console.error('Campo não encontrado: ' + fieldName);
            return null;
        }
    }
}

</script>

@include('gestao.components.atendimentonew_scripts.mensagens_rapidas')
@include('gestao.components.atendimentonew_scripts.canais.email')
@include('gestao.components.atendimentonew_scripts.canais.telefonia')
@include('gestao.components.atendimentonew_scripts.canais.webchat')
@include('gestao.components.atendimentonew_scripts.canais.whatsapp')
@include('gestao.components.atendimentonew_scripts.canais.instagram')
@include('gestao.components.atendimentonew_scripts.caixa_entrada')
@include('gestao.components.atendimentonew_scripts.campos_formulario_atendimento')
@include('gestao.components.atendimentonew_scripts.cronometro')
@include('gestao.components.atendimentonew_scripts.finalizacao')
@include('gestao.components.atendimentonew_scripts.link_externo')
@include('gestao.components.atendimentonew_scripts.pausa_e_saida')
@include('gestao.components.atendimentonew_scripts.pesquisa')
@include('gestao.components.atendimentonew_scripts.historico')
@include('gestao.components.atendimentonew_scripts.websocket')
@include('gestao.components.atendimentonew_scripts.canais.busca_atendimento')

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(() => {
            atualizarSelectCamposExtras();
        }, 2000);
    });

    function atualizarSelectCamposExtras() {
        $('#ckb_filtro_carteira').multiselect('destroy');
        $('#ckb_filtro_carteira').multiselect({
            allSelectedText: 'Todos selecionados',
            nonSelectedText: 'Selecionar',
            numberDisplayed: 10,
            maxHeight: 200,
            buttonWidth: '100%',
            enableCaseInsensitiveFiltering: true,
            selectAllText: 'Selecionar Todos',
            includeSelectAllOption: true
        });
    }
</script>

@endpush