@extends("layouts.app_menu")
@section("content")

<!-- link rel="stylesheet" type="text/css" href="{{asset('pages/css/slick.css')}}" -->
<!-- link rel="stylesheet" type="text/css" href="{{asset('pages/css/slick-theme.css')}}" -->
<!-- <link rel="stylesheet" type="text/css" href="{{asset('global/scripts/bootstrap-sweetalert/sweetalert2.min.css')}}"> -->
<link rel="stylesheet" type="text/css" href="{{asset('pages/scripts/gestao/jquery-ui.css')}}">
<style type="text/css">
        .btn.btn-primary{
    background:#426a9e!important;
    }
ul.nav.nav-tabs li a img{
    opacity: 0.3
}
ul.nav.nav-tabs li img{

}
ul.nav.nav-tabs li a:focus img{
    opacity: 1
}
ul.nav.nav-tabs  li{
    margin-right: 9%;
    bottom: 9px;
}
ul.nav.nav-tabs span img{
    opacity: 0.3;
    filter: grayscale(100%);
}
img.imagenn{
    width: 20px;
}

li>a.canais:hover{
    border:none !important;
    background: none !important;
}
li.active>a{
    border:none !important;
    background: none !important;
}
.nav.nav-tabs li.active a {
    background:#fff!important;
    border:1px solid #426a9e;
}
body{
    background-color: white;
    overflow-x: hidden;
}

.acoes{
    width: 27px;
    height: 27px;
    padding: 4px 6px 2px;
}

.slick-slide:focus { 
    outline: none!important; 
}

.page-header.navbar.navbar-fixed-top{
    display: none!important;
}

.page-content-wrapper{
    margin-top: -50px!important;
}

.slick-dotted.slick-slider{
    margin-bottom: 0px!important;
}
.multiselect.dropdown-toggle.btn.btn-default{
    padding-bottom: 2px;
}
.largura_bottao{
    width: 100%;
}
.label.label-sm.label-danger.bg-green-meadow{
     background:#426a9e!important;
}
</style>
<style type="text/css">

#sortable {
    list-style-type: none;
    display: block;
    padding: 0;
    height: 33px;
    margin-bottom: 10px;
    list-style-type: none;
    margin: 0px auto;
    white-space: nowrap;
    display: flex;
}

a{
    border: none;
}

#sortable > .list-1-item  {
    float: left;
    /*width: 40px;*/
    margin: 2px;
    padding: 5px;
    height: 35px;
}

.chat_ib {
    float: right;
    padding: 0 0 0 15px;
    margin-bottom:3px;
    width: 88%;
}

.chat_people{ overflow:hidden; clear:both; width: 49%; display: inline-block;}
.chat_list {
    border-bottom: 1px solid #c4c4c4;
    margin: 0;
    padding: 18px 16px 10px;
}
    
.chat_img {
    float: left;
    width: 11%;
}

.chat_date{
    float: right;
}

._1ht6{
    display: flex;
    margin-bottom: 0px;
}

.long-and-truncated {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.short-and-fixed {
    white-space: nowrap;
}
</style>
<div class="page-content-wrapper">
    <div class="page-content">
        <!--Intencoes-->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <!-- <div id="exemplo"></div> -->
        <style media="screen">
            nav-pills>li>a, .nav-tabs>li>a{
                padding: 0.5px;
            }
        </style>
        
        <div class="row">
            <!-- Online Chat -->
            <div class="col-lg-12">
                @if($existeTokenInativo > 0)
                <div style="margin-top:20%;margin-bottom:20%;margin-left:40%;margin-right:40%" class="msg_respondida">
                    <span style class="alert text-center alert-danger col-md-12 col-sm-12 col-xs-12">
                        Esta pendência já foi respondida.
                    </span>
                </div>
                <script type="text/javascript">
                    setTimeout(() => {
                        window.location.href = "/login"
                    }, 2000);
                </script>
                @else
                <div class="writeinfo" style="margin: 0px;">
                            <div class="portlet light bordered" style="">
                                    <div class="portlet light" style="margin-bottom: -2%;padding-left: 0px;padding-right: 0px;margin-top: -12px;">
                                        <div class="portlet-title tabbable-line" style="background:#fff!important;">
                                            <div class="row">

                                                <div class="col-md-12 col-xs-7 col-sm-7 input-icon" style="float:right;">
                                                <img class="login-logo" style="float:left;" width="15%" src="{{ asset('img/logo_elev.png') }}" />
                                                    <div style="float: right;border-left: 1px solid #9eacb4;">                                                    
                                                        <span style="display: block;font-size: 11px;color: #9eacb4; width: 40%;margin-left: 6px;">Protocolo</span>
                                                        <span style="font-size: 11px; color: #9eacb4;   margin-left: 6px;   /* margin-top: -7%; */" id="Protocolo">{{$protocolo}}</span>
                                                    </div>
                                                    <div class="caption col-md-2 col-xs-2 col-sm-2" id="titulo_canal"style="float: right; solid #9eacb4;margin-right:-6%">
                                                        <i class="icon-social-dribbble font-blue"></i><span class="caption bold font-blue" id="titulo_bloco_canal"> PENDÊNCIA</span>
                                                        <span style="font-size: 16px;color: #9eacb4; text-transform:lowercase;" id="fila_telefonia"></span>
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="portlet-body" id="conteudo_pendencia">
                                        <div class="row">   
                                            
                                            <style type="text/css">
                                                .acoes_open{
                                                    padding: 2px 4px 2px 4px;
                                                }
                                                .acoes_open i{
                                                    color:#426a9e;
                                                }
                                            </style>

                                            <div class="col-md-12" style="padding-right: 0px;padding-left: 0px;">
                                                <div class="col-md-12" style="margin-bottom: 5px; padding: 0px;">
                                                    <div class="col-md-12"> 
                                                            <div style="background-color: #ddd;">

                                                                <div style="background-color:#426a9e!important; height: 35px">
                                                                    <div class="col-md-12 text-right">
                                                                        <span class="caption bold" id="data_hora_chat" style="float: right; padding-top: 5px; font-size: 12px; padding-top: 5px;white-space: nowrap; color: white;">ATENDIMENTO &nbsp;
                                                                            <span style="padding-bottom: 12px; display: none;" title="" id="span_open_tratativa" ><a class="acoes_open btn btn-circle btn-default open_tratativa" tabindex="0"><i class="fa fa-chevron-up"></i></a></span>
                                                                            <span style="padding-bottom: 12px; display: inline;"  title=""  id="span_close_tratativa"><a class="acoes_open btn btn-circle btn-default close_tratativa" tabindex="0"><i class="fa fa fa-chevron-down"></i></a></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="modal-body" style="height: 200px;height: 200px !important;max-height: 200px !important;min-height: 200px !important;" id="bloco_tratativa">
                                                                    
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>

                                                <div class="col-md-12" style="padding: 0px; margin-bottom: 6px">
                                                    <div class="col-md-12"> 

                                                            <div style="background-color: #ddd;">

                                                                <div style="background-color:#426a9e!important; height: 35px">
                                                                    <div class="col-md-12 text-right">
                                                                            <span class="caption bold" id="data_hora_chat" style="float: right; font-size: 12px; color: white; padding-top: 5px;">PENDÊNCIA &nbsp;
                                                                            <span style="padding-bottom: 12px; display: none;" title="" id="span_open_pendencia" ><a class="acoes_open btn btn-circle btn-default open_pendencia" tabindex="0"><i class="fa fa-chevron-up"></i></a></span>
                                                                            <span style="padding-bottom: 12px; display: inline;"  title=""  id="span_close_pendencia"><a class="acoes_open btn btn-circle btn-default close_pendencia" tabindex="0"><i class="fa fa fa-chevron-down"></i></a></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="modal-body" style="height: 200px;height: 200px !important;max-height: 200px !important;min-height: 200px !important;" id="bloco_pendencia">
                                                                    <div class="row">                         
                                                                        <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
                                                                            <textarea class="form-control" readonly autocomplete="off" style="resize: none;max-height: 360px;min-height: 80px" rows="8" placeholder="Parecer:" title="Tratativa" name="tratativa">{{$parecer}}</textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>

                                                @if(!empty($anexos[0]))
                                                <div class="col-md-12" style="padding: 0px; margin-bottom: 6px">
                                                    <div class="col-md-12"> 

                                                            <div style="background-color: #ddd;">

                                                                <div style="background-color:#426a9e!important; height: 35px">
                                                                    <div class="col-md-12 text-right">
                                                                            <span class="caption bold" id="data_hora_chat" style="float: right; font-size: 12px; color: white; padding-top: 5px;">ANEXOS &nbsp;
                                                                            <span style="padding-bottom: 12px; display: none;" title="" id="span_open_anexos" ><a class="acoes_open btn btn-circle btn-default open_anexos" tabindex="0"><i class="fa fa-chevron-up"></i></a></span>
                                                                            <span style="padding-bottom: 12px; display: inline;"  title=""  id="span_close_anexos"><a class="acoes_open btn btn-circle btn-default close_anexos" tabindex="0"><i class="fa fa fa-chevron-down"></i></a></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="modal-body" style="height: 200px;height: 200px !important;max-height: 200px !important;min-height: 200px !important;" id="bloco_anexos">
                                                                    <div class="row">                         
                                                                        <div id="anexos" class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
                                                                            <ul>
                                                                                @foreach($anexos as $anexo)
                                                                                    <li><a href="{{$anexo->url}}" target="_blank">{{$anexo->filename}}</a></li>
                                                                                @endforeach
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>
                                                @endif
                                                <div class="col-md-12" style="padding: 0px; margin-bottom: 6px">
                                                    <div class="col-md-12"> 
                                                            <div style="background-color: #ddd;">

                                                                <div style="background-color:#426a9e!important; height: 35px">
                                                                    <div class="col-md-12 text-right">
                                                                            <span class="caption bold" id="data_hora_chat" style="float: right; font-size: 12px; color: white; padding-top: 5px;">RESPOSTA/PARECER &nbsp;
                                                                            <!-- <span style="padding-bottom: 12px; display: inline;" title="" id="span_open_resposta_parecer" ><a class="acoes_open btn btn-circle btn-default open_resposta_parecer" tabindex="0"><i class="fa fa-chevron-up"></i></a></span>
                                                                            <span style="padding-bottom: 12px; display: none;"  title=""  id="span_close_resposta_parecer"><a class="acoes_open btn btn-circle btn-default close_resposta_parecer" tabindex="0"><i class="fa fa fa-chevron-down"></i></a></span> -->
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="modal-body" style="height: 200px;height: 200px !important;max-height: 200px !important;min-height: 200px !important;" id="bloco_resposta_parecer">
                                                                    <div class="row">                         
                                                                        <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
                                                                            <textarea class="form-control" autocomplete="off" style="resize: none;max-height: 360px;min-height: 80px" rows="8" placeholder="Reposta/Parecer:" title="Tratativa" name="resposta_parecer"></textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>

                                            </div>

                                            <div class="col-md-12" style="">
                                                <div class="col-md-6" style="padding: 0px;">

                                                </div>
                                                <div class="col-md-12" style="float: center; text-align: center; padding-right: 30%; padding-left:30%;margin-bottom:4%;margin-top:1%">    
                                                    <div id="arquivosexterno">
                                                        <div class="form-group">
                                                            <input style="display: none;" id="file_externo" class="file-input" type="file" name="file_externo[]" onchange="newInput(this,'externo')" multiple="multiple" />
                                                            <button id="upload_files_externo" name="upload_files_externo" type="button" class="btn btn-light" style="width: 100%;">Anexar Arquivo(s) <i class="fas fa-paperclip"></i></button>
                                                        </div>
                                                    </div>

                                                    <ul id="dp-files-externo" style="height: 39px; overflow-y: scroll;"></ul>
                                                </div>
                                                <div class="col-md-12" style="float: center; text-align: center; padding-right: 0px;">    
                                                    <div class="">
                                                        <button type="button" class="btn btn-sm btn-primary" id="concluir" tabindex="0" data-toggle="modal" data-target="#ModalConcluirAtendimento">Enviar</button>
                                                    </div>
                                                </div>
                                                <!-- <div class="col-md-12">
                                                    <div class="erros telefone" style="display:none ;">
                                                        <div class="alert alert-danger telefone">
                                                            <ul>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div> -->
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <br/>
                                    <div class="success" style="display: none;">
                                                    <div class="alert alert-success">
                                                        <ul></ul>
                                                    </div>
                                                </div>
                                                <div class="erros" style="display: none;">
                                                    <div class="alert alert-danger">
                                                        <ul></ul>
                                                    </div>
                                                </div>
                                    <div class="portlet-body" id="coluna_historico" style="display: none">
                                        <div class="row">  
                                            <style type="text/css">
                                                #listaexemplo{  
                                                    overflow-y: scroll; 
                                                    height:600px;
                                                }
                                            </style>
                                            
                                            <div class="col-md-12" style="height:385px;overflow:auto">
                                                <ul id="listahistorico" style="padding-left: 0%">
                                                    
                                                </ul>  
                                            </div>
                                        </div>
                                    </div>
                                    <div class="portlet-body" id="coluna_historico_contato" style="display: none">
                                        <div class="row">  
                                            <style type="text/css">
                                                #listaexemplo{  
                                                    overflow-y: scroll; 
                                                    height:600px;
                                                }
                                            </style>
                                            
                                            <div class="col-md-12" style="height:385px;overflow:auto">  
                                                <ul id="listahistoricocontato" style="padding-left: 0%">
                                                    
                                                </ul>  
                                            </div>
                                        </div>
                                    </div>
                            </div>
                </div>
                @endif
            </div>

            <style type="text/css">
                div.atentimentos{
                    display: none;
                }
                
                div.task-title{
                    padding: 5px;
                    margin-top:10px;
                }
                
                a.accordion-toggle.collapsed{
                    text-decoration: none;
                }
                
                a:focus{
                    text-decoration: none !important;
                }

            </style>

        </div>

    </div>
</div>

<div class="col-md-12">
<style>
    #ifr_arq img{
        width: 100% !important;
    }
    #dowload_arq{ 
        width: 100%;    
        background-color: #337ab7;  
        color: white;   
        text-align: center; 
        padding: 10px;  
    }   
    #modal_conteudo{
        height: 450px !important;   
    }
    #dialog-box{    
        max-width: 760px !important;    
    }
</style>
</div>

<!-- Fim -->

@push('scripts')
<link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('global/css/metronic-plugins.min.css') }}" rel="stylesheet" type="text/css">
<script type="text/javascript">
    $("#upload_files_externo").on('click', function() {
        $('#file_externo').click();
    })

    var inputFilespen = [];
    let urlImagepen = [];
    let urlAudiopen = [];
    let urlVideopen = [];
    let urlDocumentpen = [];
    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] == 'pdf'){
                    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 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{
                alert('Tipo não compatível, selecione um arquivo com uma das seguintes extensões: acc, mp4, amr, mpeg, ogg, 3gpp, pdf, png, jpeg');
                input.files[i].remove;
            }
        }

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

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

    function writefiles(file,local){
        let reader = new FileReader();
        reader.onload = function(){
            local.push(reader.result);
        }
        reader.readAsDataURL(file)
    }

    $(".open_tratativa").click(function(){
        $("#span_open_tratativa").toggle()
        $("#span_close_tratativa").toggle()
        $("#bloco_tratativa").toggle();
    });

    $(".close_tratativa").click(function(){
        $("#span_open_tratativa").toggle()
        $("#span_close_tratativa").toggle()
        $("#bloco_tratativa").toggle();
    });

    $(".open_pendencia").click(function(){
        $("#span_open_pendencia").toggle()
        $("#span_close_pendencia").toggle()
        $("#bloco_pendencia").toggle();
    });

    $(".close_pendencia").click(function(){
        $("#span_open_pendencia").toggle()
        $("#span_close_pendencia").toggle()
        $("#bloco_pendencia").toggle();
    });

    $(".open_anexos").click(function(){
        $("#span_open_anexos").toggle()
        $("#span_close_anexos").toggle()
        $("#bloco_anexos").toggle();
    });

    $(".close_anexos").click(function(){
        $("#span_open_anexos").toggle()
        $("#span_close_anexos").toggle()
        $("#bloco_anexos").toggle();
    });

    $(".open_resposta_parecer").click(function(){
        console.log("Click 1");
        $("#span_open_resposta_parecer").toggle()
        $("#span_close_resposta_parecer").toggle()
        $("#bloco_resposta_parecer").toggle();
    });

    $(".close_resposta_parecer").click(function(){
        console.log("Click 2");
        $("#span_open_resposta_parecer").toggle()
        $("#span_close_resposta_parecer").toggle()
        $("#bloco_resposta_parecer").toggle();
    });


    $(document).ready(()=>{
        var html ='';
        var canal_id = {{$canal}};
        console.log(canal_id);

        if(canal_id == 3){
            $("#bloco_tratativa").empty();

            html = '<div id="chat_whtas" style="position: relative; overflow: hidden; width: auto; height: 180px;">'+
                '<ul class="chats" style="height: 100%;overflow-y: auto;padding-right: 20px;">'+

                '</ul>'+
            '</div>';

            $("#bloco_tratativa").append(html);
            
            var data = {!!$mensagens!!};
            data.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(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_id == 5){      
            data = {!!$mensagens!!}
                $("#bloco_tratativa").empty();
                $("#bloco_tratativa").css('padding',0)
                html = '<div style="padding: 7px;border: solid 1px #ccc;background-color:#fff" style="padding-right: 0;" class="col-md-12">'+
                    '<div style="padding-left: 0;" class="col-md-4" id="assunto_email">'+  
                        '<strong> Título: </strong> <span>'+data[0]['email_subject']+'</span>'+
                    '</div>';
                    html +='<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(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" >'+
                    '<a  id="verAnexo" style="color: red;'+
                        'margin-right: 10px;">Ver anexo <i class="fas fa-angle-down"></i></a>'+                            
                    '</div>'+
                    '</div>'+ 
                    '<div id="message">'+
                    '<div id="conteudo_email" class="col-md-12" style="overflow:scroll;height:165px">';
                        for(i=0;i<data.length;i++){
                            html += '<span><strong>De: </strong>'+data[i]['email_sender']+'</span><br/>'+
                            '<span><strong>Data / Hora: </strong>'+data[i]['created_at']+'</span><br/>'+
                            '<span><strong>Para: </strong>'+data[i]['email_receiver']+'</span><br/>'+
                            '<span><strong>Assunto: </strong>'+data[i]['email_subject']+'</span><br/>';
                            html += data[i]['mensagem'];
                        }
                    html += '</div>'+
                '</div>'; 
            
            $("#bloco_tratativa").append(html); 
            
            $('#verAnexo').click(function(){
                $('#listaAnexos').toggle('display')
            }) 
                

        }else if(canal_id == 9){
            $("#bloco_tratativa").empty();
            data = {!!$mensagens!!}
            html = '<div id="chat_whtas" style="position: relative; overflow: hidden; width: auto; height: 180px;">'+
                '<ul class="chats" style="height: 100%;overflow-y: auto;padding-right: 20px;">'+

                '</ul>'+
            '</div>';

            $("#bloco_tratativa").append(html);
            var json
            for(var i =0; i < data.length; i++){
                json = JSON.parse(data[i]['mensagem'])

                submit_menssager(
                    data[i]['id'],
                    json['msg'],json['how'] == 'atendente' ? '1' : '0',
                    data[i]['tipo_mensagem'],
                    data[i]['url_arquivo'],
                    data[i]['nome_exibicao'],
                    data[i]['numero_in'],
                    data[i]['created_at'].split(' ')[1]
                );
            }
        }else{
            data = {!!$mensagens!!}
            html = '<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="/externo/integracao_telefonia/gravacao/'+data["gravacao"]+'?api_token={{$api_token}}"><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="'+data['tratativa']+'">Sem registro de tratativa</textarea>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</div>';      

            $("#bloco_tratativa").empty();
            $("#bloco_tratativa").append(html);  
        }
    });

    $(".date-picker").datepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
    });

    $('#data').change(function(){
        let data = new Date();
        data = data.toLocaleDateString("en-CA");
        if(data > $('#data').val()){
            alert('Não é possivel selecionar uma data do passado');
            $('#data').val('');
        }
    });

    $('#concluir').click(()=>{
        $('#concluir').css('pointer-events', 'none');
        if($('textarea[name="resposta_parecer"]').val() == ""){
            $(".erros").css('display','');
            $(".alert.alert-danger ul").append('<li>Campo Resposta/Parecer não pode estar vazio.</li>');
            setTimeout(() => {
                $(".erros").css('display','none');
                $(".alert.alert-danger ul").empty();
            }, 2000);
            $('#concluir').css('pointer-events', 'all');
        }
        formData = new FormData();
        formData.append('resposta_parecer', $('textarea[name="resposta_parecer"]').val());
        formData.append('id_pendencia', {{$id_pendencia}});
        inputFilespen.forEach(function(file){
            formData.append('fileexterno[]',file);
        })
        if($('textarea[name="resposta_parecer"]').val() != ""){
            $.ajax({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                method: "post",
                url: '/externo/finalizarAtendimentoAtendenteExterno?api_token={{$api_token}}',
                data:formData,
                processData: false,
                contentType: false,
            }).done((responde)=>{
                $('#concluir').css('pointer-events', 'all');
                $(".success .alert.alert-success ul").empty();
                $(".success").css('display','');
                $(".success .alert.alert-success ul").append('<li>Enviado com sucesso.</li>');
                setTimeout(function() {
                    window.location.href = "/login";
                }, 2000);
            }).fail((error)=>{
                $('#concluir').css('pointer-events', 'all');
                $(".alert.alert-danger ul").empty();
                $(".erros").css('display','');
                $(".alert.alert-danger").css('display','');
                console.log(error)

                if(error['responseJSON']['errors'] != undefined)
                {
                    $(".alert.alert-danger ul").append('<li>'+error['responseJSON']['errors']['errors']+'</li>');
                }
                else
                {
                    $(".alert.alert-danger ul").append('<li>Erro interno, contate o administrador.</li>');
                }
                setTimeout(() => {
                    $(".alert.alert-danger ul").empty();
                    $(".erros").css('display','none');
                }, 2000);
            })
        };
        $('#concluir').css('pointer-events', 'all');

    });

    $("#date_erase").click(function(event){
        event.preventDefault();
        $("#data").val('');
    });

    $('#agendamento').hide();
    $('#radio1').on('change',function(){
        $('#agendamento').show();
    });

    $('#radio2').on('change',function(){
        $('#agendamento').hide();
    });

    $('#filaatendimentopen').hide();
    $('#filaatendimentocon').hide();

    $("select[name=tabulacao_concluir]").on('change',function(){
        if($('select[name=tabulacao_concluir] option:selected').attr('fila') != undefined){
            $('#filacon').val($('select[name=tabulacao_concluir] option:selected').attr('fila'));
            $('#filaatendimentocon').show();
        }else{
            $('#filaatendimentocon').hide();
        }
    })

    $("#pesquisa_pendencia").on('change',function(){
        if($('select[name=tabulacao_concluir_pen] option:selected').attr('data-finalizacao_id') == "6"){
            console.log('6');
            $("#agendarpendencia").css('display', 'none'); 
            if($('select[name=tabulacao_concluir_pen] option:selected').attr('fila') != ''){
                $('#filapen').val($('select[name=tabulacao_concluir_pen] option:selected').attr('fila'));
                $('#filaatendimentopen').show();
            }else{
                $.ajax({
                    type: "GET",
                    url: "pendencia/getfila/",
                    data:{"protocolo":$('#Protocolo').text()}
                }).done(function(response){
                    $('#filapen').val(response['nome']);
                    $('#filaatendimentopen').show();
                })
            }
        }else{
            console.log('2')
            if($('select[name=tabulacao_concluir_pen] option:selected').attr('fila') != undefined){
            $('#filaatendimentopen').hide();
            $('#filapen').val($('select[name=tabulacao_concluir_pen] option:selected').attr('fila'));
            $('#filaatendimentopen').show();
            }else{
                console.log('ou não')
                $('#filaatendimentopen').hide();
            }
            $("#agendarpendencia").css('display','');
        }
    });

    function breakrow(text){
        if(/(\r\n|\n\r|\r|\n)/g.test(text)){
            let message = text.replace(/(\r\n|\n\r|\r|\n)/g,'<br />');
            return message;
        }else{
            return text;
        }
    }
    function submit_menssager(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 ul.chats").append(html);
    $("#chat_whtas ul.chats").animate({ scrollTop: $("ul.chats")[0].scrollHeight + 20}, 0);
}
</script>
<!-- <script src="{{ asset('pages/scripts/gestao/script-managed-pendencia.js') }}"   type="text/javascript"></script> -->
@endpush
@endsection