@extends("layouts.app")
@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')}}">

<!-- <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> -->
<!-- <link rel="stylesheet" type="text/css" href="sweetalert.css"> -->
<style>
    /* tooltip atender */
    .tooltip-atender{position: relative;display: inline-block;}
    .tooltip-atender .tooltiptext{visibility: hidden;width: 120px;background-color: #757575;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px!important;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;transition: opacity 0.3s;user-select: none;padding: 10px;box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);text-align: left;}
    .tooltip-atender .tooltiptext hr{border-color: rgba(255,255,255,.3);margin-top: 10px;margin-bottom: 10px;}
    .tooltip-atender .tooltiptext::after{content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #757575 transparent transparent transparent;}
    .tooltip-atender:hover .tooltiptext{visibility: visible;opacity: 1;}
    /* message answer */
    .message-answer{width: 100%;min-height: 30px;border-radius: 5px!important;border-left: 5px solid;cursor: pointer;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-height: 100px;font-size: 10px;font-family: inherit;padding: 1px 5px 5px 5px;position: relative;max-width: 350px;margin-bottom: 10px;}
    .in .message-answer{background-color: rgba(0,0,0,.15);border-color: #426a9e;}
    .out .message-answer{background-color: rgba(255,255,255,.15);border-color: #ffffff;}
    .message-answer label{display: block;width: 100%;margin: 5px 0; padding: 0;font-weight: 900;cursor: pointer;}
    .message-answer p{position: relative;padding-bottom: 5px;display: inline;height: 100%;margin: 0;word-break: break-word;width: 100%;}
    .message-answer .file{display: block;width: 50px;height: 50px;margin: 0;font-size: 45px;padding: 0;}}
    #chat_whtas .chats{position: relative;width: 100%;}
    #chat_whtas .chats .whatsBox{height: 100%;overflow-x: hidden;width: 100%;position: absolute;}
    #mdl_message_answer .chats{display: block;overflow-x: hidden;width: 100%;padding: 0 15px;}
    #conteudo_pendencia .modal-body{overflow-y: hidden!important;}
</style>

<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Backoffice</span>
                </li>
            </ul>
        </div>

        <div style="margin-bottom: 4%;">
            <h1 class="page-title nova-faixa"> BACKOFFICE
                <div class="pull-right">
                    <i class="nova-faixa-icon icon-envelope" style="padding-right:20px; "></i>
                </div>
            </h1>
            <h4>
                <small class="pull-right">
                    <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                        Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                    </span>
                </small>
            </h4>
        </div>

        <!--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">
            <div class="col-lg-5">
                <div class="portlet light bordered" style="width: 100%">
                    <div class="portlet-title tabbable-line" style="background:#fff!important;">
                        <div class="row">
                            <div class="caption">
                                <i class=" icon-social-twitter font-dark hide"></i>
                                <span class="caption-subject font-dark bold uppercase">
                                    <i class="fa fa-share-alt" style="margin-right: 4px;"></i>CAIXA DE ENTRADA <span style="color: grey;font-size: 12px;">BACKOFFICE</span>
                                </span>
                            </div>
                        </div>
                        <div class="row">
                        <div class="col-md-8 input-icon" style="float:left;">
                                <i class="fa fa-search" style="left: 14px;"></i>
                                <input type="text" class="form-control input-circle search" id="searchInQueue" oninput="searchInQueue()" placeholder="Pesquise por contato, telefone ou email">
                                <!-- {{-- <span class="clearInput" id="clearInput" style="display:none" onclick="clearInput()">X</span>
                                <button class="search"><i class="icon-magnifier"></i></button> --}} -->
                        </div>
                       </div>
                            
                    </div>

                    <style type="text/css">
                        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;
                        }
                    </style>

                    <div class="portlet-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_actions_pending">
                                <!-- BEGIN: Actions -->
                                <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="content" id="chat" style="height: 450px; overflow-y: scroll;">
                                    <input name="ultimo_id" id="ultimo_id" type="hidden" value=""/>
                                    <input name="id_selecionado" id="id_selecionado" type="hidden" value=""/>
                                    <ul style="padding-left: 0px;" class="lista">
                                    </ul>
 
                                    <div class="ajax-load text-center"style="display: none">
                                        <p><img src="{{asset('pages/img/gestao/loader.gif')}}"></p>
                                    </div> 

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Online Chat -->
            <div class="col-lg-7">
                <div class="writeinfo" style="margin: 0px;">

                    <style type="text/css">
                        .fa-spin{
                            animation: fa-spin 6s infinite linear !
                        }
                    </style>
                    <div class="col-md-12 hover_bkgr_fricc" id="trasparente" style="width:98%;display: block;z-index: 10;backdrop-filter: blur(3px);background-color: rgba(255, 255, 255, 0.55);">
                        <span class="helper"></span>
                        <div style="width: 40%;display: none;" id="init_atendimento" >
                            <!--div class="popupCloseButton">X</div-->
                            <div class="transp" align="center" style="/* width: 159px; */background-color: #9f9f9f;height: 120px;">
                                <div class="col-md-12 text-center" style="padding-top: -14px;color: black;/* padding-bottom: 0px; *//* padding-top: 37px; */background:#426a9e;padding-top: 15px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;">
                                    <p style="margin-bottom: 0px;margin-top: 0px; color: white; font-weight: 600; padding-bottom: 10px;">Iniciar Atendimento</p>
                                    <div class="col-md-12" style="height: 5px; background: white; margin-right: 0px; margin-top: 0px;"></div>
                                </div>
                            
                                <div class="" style="font-size: 35px;color: white;">
                                    <i id="icone_canal" class="fa fa-spinner fa-spin"></i>
                                    <h5 style="color: white;line-height: 0px" class="title">Aguardando</h5>    
                                    <button type="button" id="resgata_chamado" style="width: 100%;backdrop-filter: blur(2px)" class="btn blue adicionar_manualmente chamada_receptiva" disabled>Visualizar Chamado</button>
                                </div>
                            </div>                      
                        </div>
                    </div>

                    <!-- @if($re) -->
                            <div class="portlet light bordered" style="">
                                <!-- <form class="horizontal-form" method="post" id="formPesquisaAtendimentoContato"> -->
                                    <input type="hidden" name="id_contato" id="id_contato">

                                    <style type="text/css">
                                        /* Popup box BEGIN */

                                        /* Safari */
                                        @-webkit-keyframes spin {
                                          0% { -webkit-transform: rotate(0deg); }
                                          100% { -webkit-transform: rotate(360deg); }
                                        }

                                        @keyframes  spin {
                                          0% { transform: rotate(0deg); }
                                          100% { transform: rotate(360deg); }
                                        }

                                        .hover_bkgr_fricc {
                                            /*background: rgba(0,0,0,.4);*/
                                            /*cursor: pointer;*/
                                            display: none;
                                            height: 100%;
                                            position: absolute;
                                            text-align: center;
                                            top: 0;
                                            width: 100%;
                                            z-index: 10000;
                                            /*opacity: 0.5;*/
                                        }

                                        .hover_bkgr_fricc .helper {
                                            display: inline-block;
                                            height: 100%;
                                            vertical-align: middle;
                                        }

                                        .hover_bkgr_fricc > div {
                                            /*background-color: #0EDBE3;*/
                                            box-shadow: 4px 4px 60px #555;
                                            display: inline-block;
                                            height: auto;
                                            max-width: 100%;
                                            min-height: 50px;
                                            min-width: 50px;
                                            vertical-align: middle;
                                            width: 65%;
                                            position: relative;
                                            /*border-radius: 8px;*/
                                            /*padding: 15px 5%;*/
                                        }

                                        .transp {
                                            background-color: #0EDBE3;
                                        }

                                        /*
                                        .popupCloseButton {
                                            background-color: #fff;
                                            border: 3px solid #999;
                                            border-radius: 50px;
                                            cursor: pointer;
                                            display: inline-block;
                                            font-family: arial;
                                            font-weight: bold;
                                            position: absolute;
                                            top: -20px;
                                            right: -20px;
                                            font-size: 25px;
                                            line-height: 30px;
                                            width: 30px;
                                            height: 30px;
                                            text-align: center;
                                        }

                                        .popupCloseButton:hover {
                                            background-color: #ccc;
                                        }
                                        */

                                        .trigger_popup_fricc {
                                            cursor: pointer;
                                            font-size: 20px;
                                            margin: 20px;
                                            display: inline-block;
                                            font-weight: bold;
                                        }

                                        .block {
                                          display: block;
                                          width: 100%;
                                          border: none;
                                          background-color: #007BBA;
                                          color: white;
                                          /*padding: 14px 28px;*/
                                          font-size: 16px;
                                          cursor: pointer;
                                          text-align: center;
                                        }

                                        /* Popup box BEGIN */

                                    </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="caption col-md-5 col-xs-5 col-sm-5" id="titulo_canal" style="color: #E26A6A;">
                                    <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 class="col-md-12 col-xs-12 col-sm-12" style="height: 30px"></div>
                                <div class="col-md-12 col-xs-12 col-sm-12 input-icon" style="float:right;">
                                    <div class="row">
                                        <div class="col-md-3 col-xs-3 col-sm-3">                                      
                                            <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">00.000-000.000/00</span>
                                            <span id="cronometro" style="display: inline-block; /*float: right;*/ font-size: 12pt; color: #9eacb4; padding-left: 8px;"><span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span></span>
                                        </div>

                                        <div class="col-md-2 col-xs-2 col-sm-2">
                                            <button class="btn btn-primary" id="pendencia_atendimento"><i class="fa fa-history"></i>Pendência</button>

                                        </div>

                                        <div class="col-md-3 col-xs-3 col-sm-3">       
                                            <button class="btn btn-secondary"  id="historico"><i class="fa fa-history"></i>Tratativas/Pareceres</button>
                                        </div>
                                        
                                        <div class="col-md-3 col-xs-3 col-sm-3"> 
                                            <button class="btn btn-secondary"  id="historico_contato" ><i class="fa fa-history" ></i>Histórico Atendimentos</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-xs-12 col-sm-12" style="height: 15px"></div>
                            <div class="col-md-12" style="margin-bottom: 5px">
                                <div class="col-md-5 col-xs-5 col-sm-4" class="chat_img" style="padding-right: 0px; padding-left: 0px">
                                    <img style="float: left;" src="/pages/img/gestao/ux-base-30x30.png" width="50" height="50">
                                    <span name="nome_contato" style="display: block; margin-left: 16%; color: #9eacb4;"></span>
                                    <span name="empresa_contato" style="display: block; margin-left: 16%;" class="font-blue"><i class="fa fa-building-o" title="Empresa" style="color: black"></i></span>
                                    <a style="display: none;" id="sortQueueBy" onclick="sortByDesc()" data-sortby="desc">⇈</a>
                                </div>   
                                <script>
                                                                    // Selecione o botão "Pendência"
                                    const pendenciaButton = document.querySelector("#historico");

                                    // Selecione o elemento que contém o texto "Clique no icone para ordenar"
                                    const orderText = document.querySelector("#sortQueueBy");

                                    // Adicione um evento de clique ao botão "Pendência"
                                    pendenciaButton.addEventListener("click", function() {
                                    // Altere a propriedade "display" do elemento com base no estado atual
                                    if (orderText.style.display === "none") {
                                        orderText.style.display = "block";
                                    } else {
                                        orderText.style.display = "none";
                                    }
                                    });
                                </script>

                                    </div>

                                    

                                    <div class="col-md-4 col-xs-6 col-sm-6" style="padding-right: 0px; padding-left: 0px; padding-top: 5px">
                                        <div class="input-group" style="width: 100%">
                                            <input type="text" autocomplete="off" class="form-control input-sm" placeholder="ID:" title="ID:" name="id" disabled>
                                        </div>
                                    </div>
                            </div>
                        </div>
                   
                                   
                    
                                    <div class="portlet-body" id="conteudo_pendencia">
                                        <div class="row">   
                                            <!-- <div class="col-xs-12" style="margin-bottom: 2%;">
                                
                                                <div class="col-md-7" style="margin-top: 6px;">
                                                    <div class="btn-group" style="float: right;display: inline-block;/* margin-top: 5px; */margin-left: 5px;"></div>
                                                </div>
                                            </div> -->
                       
                                            <div class="col-md-12">

                                                <ul class="nav nav-tabs" style="/* border-width: 1px; *//* color: black; */ -webkit-border-horizontal-spacing: -22px; width: 100%;">
                                                    <li class="active" style="margin-right: 30px;">
                                                        <a href="#portlet_contato" data-toggle="tab" aria-expanded="true" id="aba_contato"> CONTATO </a>
                                                    </li>
                                                    <li class="" style="margin-right: 30px;">
                                                        <a href="#portlet_endereco" data-toggle="tab" aria-expanded="false"> ENDEREÇO </a>
                                                    </li>
                                                    <li class="" style="margin-right: 30px;">
                                                        <a href="#portlet_empresa" data-toggle="tab" aria-expanded="false"> EMPRESA </a>
                                                    </li>
                                                    <li class="" style="padding-right: 0px;margin:0px">
                                                        <a href="#portlet_info" data-toggle="tab" aria-expanded="false"> INFO </a>
                                                    </li>
                                                    <li class="" style="padding-right: 0px; float: right;margin-right:0%">
                                                        <!-- <div class="col-md-5" style="float: right;padding-right: 0px;"> -->
                                                        <div class="col-md-12 text-right">
                                                            <span class="caption bold" id="data_hora_chat" style="float: right; padding-top: 0px; font-size: 12px; white-space: nowrap;">VER DADOS &nbsp;
                                                                <span style="padding-bottom: 12px; display: inline;" title="" id="span_open_campos" ><a class="acoes_open btn btn-circle btn-default open_campos" tabindex="0"><i class="fa fa-chevron-up"></i></a></span>
                                                                <span style="padding-bottom: 12px; display: none;"  title=""  id="span_close_campos"><a class="acoes_open btn btn-circle btn-default close_campos" tabindex="0"><i class="fa fa fa-chevron-down"></i></a></span>
                                                            </span>
                                                        </div>
                                                        <!-- </div> -->
                                                    </li>

                                                </ul>

                                            </div>
                                            
                                            <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="tab-content" id="bloco_formulario">
                                                    <div class="tab-pane active" id="portlet_contato">
                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-6" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Telefone:" title="Telefone" name="telefone" onkeypress="return enviar(event,'#busca_telefone')" maxlength="20">
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-6" style="padding-right: 0px; padding-left: 0px">
                                                                <div class="input-group" style="width: 100%">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Tipo de Contato:" title="Tipo de Contato:" name="tipo_contato">
                                                                </div>
                                                            </div>                                               
                                                        </div>
                                            
                                                        <div class="col-md-12" style="padding-right: 0px;padding-left: 0px;border-bottom: 5%;">
                                                            <div class="col-md-12" style="margin-bottom:5px;">
                                                                <div class="col-md-6" style="padding-right: 0px;padding-left: 0px;">
                                                                    <div class="input-group" style="width: 100%">
                                                                        <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="CPF:" onkeypress="return enviar(event,'#busca_cpf')" title="CPF:" name="cpf" maxlength="14">
                                                                    </div>
                                                                </div>
                                                    
                                                                <div class="col-md-6" style="padding-left: 0px;padding-right: 0px">
                                                                    <div class="input-group" style="width: 100%">
                                                                        <input readonly type="text" class="form-control input-sm" placeholder="RG: " title="RG:" name="rg" maxlength="12">
                                                                    </div>
                                                                </div>
                                                            </div>
                                       
                                                            <div class="col-md-12" style=" margin-bottom: 5px">
                                                                <div class="input-group" style="width: 100%">
                                                                    <input readonly type="email" autocomplete="off" class="form-control input-sm" placeholder="E-mail:" title="E-mail:" name="email" onkeypress="return enviar(event,'#busca_email')">
                                                                </div>
                                                            </div>

                                                            <div id="divEmailCc" class="col-md-12" style="margin-bottom: 5px; display: none;">
                                                                <div class="input-group" style="width: 100%">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Cc:" title="Cc:" name="emailcc">
                                                                </div>
                                                            </div>


                                                        </div>
                                                    </div>

                                                    <div class="tab-pane" id="portlet_info">
                                                        <div class="col-md-12" style=" margin-bottom: 5px">
                                                            <textarea readonly class="form-control" autocomplete="off" style="resize: vertical;max-height: 100px;min-height: 50px" rows="8" placeholder="Informações adicionais:" title="Info" name="info"></textarea>
                                                        </div>
                                                    </div>

                                                    

                                                    <div class="tab-pane" id="portlet_endereco">
                                            
                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="CEP:" title="CEP" name="cep" onkeypress="return enviar(event,'#busca_cep')" maxlength="9">
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Endereço:" title="Endereço" name="rua">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" name="numero" placeholder="Número:" title="Número">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Complemento:" title="Complemento" name="complemento">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Bairro:" title="Bairro" name="bairro">                                            
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Estado:" title="Estado" name="estado">                                            
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12" style="margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Cidade:" title="Cidade" name="cidade">                                           
                                                                </div>
                                                            </div>
                                        
                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Ponto de Referência:" title="Ponto de Referência:" name="referencia">                                            
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <select readonly class="bs-select form-control input-sm" name="identificacao" id="identificacao22" title="Tipo de Endereço" style="height: 30px;">
                                                                        <option value="">Tipo de Endereço</option>
                                                                        <option value="1">Apartamento</option>
                                                                        <option value="2">Casa</option>
                                                                        <option value="3">Comercial</option>
                                                                        <option value="4">Outro</option>
                                                                    </select>                                          
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="tab-pane" id="portlet_empresa">
                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="CNPJ:" title="CNPJ:" name="cnpj" onkeypress="return enviar(event,'#busca_cnpj')" maxlength="18">
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Responsável:" title="Responsável" name="responsavel">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Inscrição Estadual:" title="Inscrição Estadual:" name="inscricao_estadual">                                            
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Nome da Empresa (Fantasia ou Apelido):" title="Nome da Empresa" name="nome_empresa" onkeypress="return enviar(event,'#busca_empresa')">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Segmento:" title="Segmento" name="segmento">                                            
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Inscrição Municipal:" title="Inscrição Municipal:" name="inscricao_municipal">                                            
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12" style=" margin-bottom: 5px;">
                                                            <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <input readonly type="text" autocomplete="off" class="form-control input-sm" placeholder="Razão Social:" title="Razão Social" name="razao_social" onkeypress="return enviar(event,'#busca_razaosocial')">
                                                                </div>
                                                            </div>
                                        
                                                            <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                                <div class="input-group" style="width: 100%;">
                                                                    <select readonly class="bs-select form-control input-sm" name="porte" id="porteee" title="Porte">
                                                                        <option value="">Porte da Empresa </option>
                                                                        <option value="1">MEI</option>
                                                                        <option value="2">Startup</option>
                                                                        <option value="3">Microempresa</option>
                                                                        <option value="4">Pequeno</option>
                                                                        <option value="5">Médio</option>
                                                                        <option value="6">Grande</option>
                                                                    </select>                                             
                                                                </div>
                                                            </div>
                                                
                                                            <div class="col-md-2" style="padding-left: 0px;padding-right: 0px">
                                                    
                                                                <div class="input-group" style="width: 100%;">
                                                                    <select readonly class="bs-select form-control input-sm" name="num_func" id="num_funce" title="N° Colaboradores">
                                                                        <option value="">N° Colaboradores</option>
                                                                        <option value="1">01-05</option>
                                                                        <option value="2">06-10</option>
                                                                        <option value="3">11-25</option>
                                                                        <option value="4">26-50</option>
                                                                        <option value="5">51-100</option>
                                                                        <option value="6">101-250</option>
                                                                        <option value="7">251-500</option>
                                                                        <option value="8">501-1.000</option>
                                                                        <option value="8">1.001-5.000</option>
                                                                        <option value="9">5.001-10.000</option>
                                                                        <option value="10">10.001-50.000</option>
                                                                        <option value="11">+ de 50.000</option>
                                                                    </select> 
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12" style="margin-bottom: 5px; padding: 0px;">
                                                    <div class="col-md-12"> 
                                                        <!-- <textarea class="form-control" autocomplete="off" style="resize: vertical;max-height: 360px;min-height: 200px" rows="8" placeholder="Tratativa:" title="Tratativa" name="tratativa"></textarea> -->

                                                            <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: inline;" 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: none;"  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;; display: none" id="bloco_tratativa">
                                                                    
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>

                                                <div class="col-md-12" style="padding: 0px; margin-bottom: 6px">
                                                    <div class="col-md-12"> 
                                                        <!-- <textarea class="form-control" autocomplete="off" style="resize: vertical;max-height: 360px;min-height: 200px" rows="8" placeholder="Tratativa:" title="Tratativa" name="tratativa"></textarea> -->


                                                            <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: inline;" 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: none;"  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; display: none" id="bloco_pendencia">
                                                                    <div class="row">                         
                                                                        <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
                                                                            <a id="verAnexoParecer" style="display:none;color: red; margin-right: 25px; display: inline-block;">Ver anexo <i class="fas fa-angle-down"></i></a>
                                                                            <ul id="listaAnexosParecer" style="display: none; width: 100%;height: 50px; background-color: white; left: 0px;top:33px; z-index: 10;max-height: 50px; overflow-y: scroll;"></ul>
                                                                            <textarea class="form-control" readonly autocomplete="off" style="resize: none;max-height: 360px;min-height: 80px" rows="8" placeholder="Parecer:" title="Tratativa" name="tratativa"></textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                 
                                                            </div>
                                                    </div>                    
                                                </div>
                                                
                                            </div>

                                            <!-- <div class="col-md-12" style=""><hr></div> -->
                                            <div class="col-md-12" style="">
                                                <div class="col-md-6" style="padding: 0px;">
                                                    <!-- <div class="botao3c">
                                                        <span style="padding-bottom: 12px;" title="Link Externo"><a disabled="disabled" target="_blank" class="acoes btn btn-circle btn-default" style="cursor: not-allowed;" tabindex="0"><i class="fa fa-external-link"></i></a></span>
                                                    </div> -->
                                                </div>

                                                <div class="col-md-6" style="float: right; text-align: right; padding-right: 0px;">    
                                                    <div class="">
                                                        <button type="button" class="btn btn-sm btn-success" id="concluir" tabindex="0" data-toggle="modal" data-target="#ModalConcluirAtendimento">Concluir</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>

                                    <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%">
                                                    <!--<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:  04-02-2020</span>
                                                                <span style="margin-right:3px;margin-left: 3px;color: #999">|</span>
                                                                <span style="color: #999;">Hora: 16:53:49</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>
                                                                <span style="color: #999;">Duração: 00:00:00</span><span style="margin-right:3px;margin-left: 3px;color: #999">|</span>
                                                                <span style="color: #999;">Protocolo: 20.034-002.840/20</span>
                                                            </div>
                                                        </div>
                                                        <div class="label label-sm " style="margin-right: 10px;font-size:20px;">
                                                            <i class="icon-call-in" style="color: #E26A6A"></i>
                                                        </div>
                                                        <span class="task-title-sp">
                                                            <span style="margin-right:20px;font-size:12px;">Motivo:  teste 10000</span>
                                                        </span>
                                                        <span style="margin-right:3px;">|</span> 
                                                        <span style="font-size:12px;">Assunto: teste 10000</span>
                                                        <div class="row" style="margin-top:7px;">
                                                            <div class="col-md-12">
                                                                <div class="col-md-7">
                                                                    <span class="label label-sm label-danger bg-green-meadow" id="status" style="background-color:#F1C40F!important;">
                                                                        Finalização: Teste 11000
                                                                    </span>
                                                                </div>
                                                                <div class="col-md-3" style="padding-left:0px">
                                                                    <a class="accordion-toggle collapsed" style="display: block;" data-toggle="collapse" data-parent="" href="#atentimentotelefonia0">
                                                                        <span class="label label-sm label-danger " style="background-color:#999!important" id="status"> 
                                                                            Visualizar Tratativa
                                                                            <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;">
                                                                <div class="panel-collapse collapse" id="atentimentotelefonia0">
                                                                    <div class="panel-body" style="background-color: white;">
                                                                        <ul>
                                                                            <p>Sem registro de tratativa</p>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>-->
                                                </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>
                                    <!-- erro do enter formulario -->
                                    
                                    <!--     <a href="/atendimento/integrado/0" id="retorna_receptivo" style="display: none;"><button class='btn blue' id="mudatelefone">Sim</button></a> -->
                                <!-- </form> -->
                            </div>
                    <!-- @endif -->
                </div>
            </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">
    <div class="modal fade" id="ModalConcluirAtendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#2bb8c4 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Concluir</span>
                    </div>
                </div>
                
                <div class="modal-body" >
                <div class="row col-md-12 mobile-title-modal">
                            <label class="label-title" style="font-weight: bold;">Ação:</label>
                        </div>
                        <div class="row col-md-12">
                            <div class="input-group">
                                <div class="col-md-12">
                                    <div class="md-radio-inline">
                                        <div class="md-radio">
                                            <input type="radio" id="rdacao1" name="rd_acao" class="md-radiobtn" value="0" checked>
                                            <label for="rdacao1">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span> Retornar para Área de Atendimento </label>
                                        </div>
                                        
                                        <div class="md-radio">
                                            <input type="radio" id="rdacao2" name="rd_acao" class="md-radiobtn" value="1">
                                            <label for="rdacao2">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span> Transferir para outra Fila </label>
                                        </div>
                                        <div class="md-radio">
                                            <input type="radio" id="rdacao3" name="rd_acao" class="md-radiobtn" value="2">
                                            <label for="rdacao3">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span> Finalizar </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div id="group_return">
                        <input id="pesquisa_retorno" value="{{ $retorno->id }}" type="hidden" data-finalizacao_id="{{$retorno->finalizacao_id}}" fila="{{$retorno->fila_nome}}"/>
                    </div>
                    <div id="group_transfer" style="display:none">
                        <label class="control-label">Selecionar Fila BackOffice</label>
                        <select class="form-control" id="pesquisa_pendencia" name="tabulacao_concluir_pen">
                           
                        </select>
                        <!-- <div id="filaatendimentopen">
                            <div class="form-group">
                                <label class="control-label">Fila</label>
                                <input class="form-control" type="text" id="filapen" readonly>
                            </div>
                        </div> -->
                        
                        <div id="agendarpendencia" class="form-group">
                            <label class="control-label">Agendar pendência?</label>
                            <div class="col-md-12">
                                <div class="row col-md-12">
                                    <div class="md-radio-inline">
                                        <div class="md-radio">
                                            <input type="radio" id="radio1" name="agendar" class="md-radiobtn" value="1" >
                                            <label for="radio1">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span>Sim</label>
                                        </div>
                                        
                                        <div class="md-radio">
                                            <input type="radio" id="radio2" name="agendar" class="md-radiobtn" value="0" checked>
                                            <label for="radio2">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span>Não</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="agendamento">
                            <div class="form-group">
                                <label class='control-label row col-md-12'>Data</label>
                                <div class="input-group col-md-11 date date-picker margin-bottom-5 bs-datetime" style="float:left" data-date-format="yyyy-mm-dd">
                                    <input type="text" class="form-control form-filter input-sm"  name="data" id="data"  multiple="multiple"  autocomplete="off" placeholder="data" >
                                    <span class="input-group-btn">
                                        <button class="btn btn-sm default" type="button">
                                        <i class="fa fa-calendar"></i>
                                        </button>   
                                    </span>
                                </div>
                                <button id="date_erase" class="btn btn-sm default">
                                    <i class="fa fa-eraser"></i>
                                </button>
                            </div>
                    <div class="form-group">
                    <label class="control-label">Horário</label>
                                <input type="time" class="form-control" id="horario" name="horario" min="00:00" max="23:59">
                            </div>
                        </div>
                    </div>
                    
                    <div id="group_finish" style="display:none" class="form-group">
                        <label class="control-label">Finalização do Atendimento</label>
                        <select class="form-control" id="pesquisa_concluir" name="tabulacao_concluir">
                            
                        </select>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control" autocomplete="off" style="resize: none;max-height: 360px;min-height: 80px" rows="8" placeholder="Parecer:" title="Parecer" id="parecer" name="parecer"></textarea>
                    </div>

                    <div id="arquivosconcluir">
                        <div class="form-group">
                            <input style="display: none;" id='file_concluir' class='file-input' type='file' name='file_concluir[]' onchange="newInput(this)" multiple='multiple' />
                            <button id='upload_files_concluir' name="upload_files_concluir" 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-concluir' style="height:39px;overflow-y:auto"></ul>

                    <div class="erros_modal" style="display: none;">
                        <div class="alert alert-danger">
                        <ul>
                            
                        </ul>
                        </div>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                   <div class="col-md-2"></div>
                        <div class="col-md-6">
                            <button type="button" class="btn blue" id='concluir_atendimento'>Concluir</button>
                            <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
                        </div>
                </div>

                <div class="erros" style="display: none;">
                    <div class="alert alert-danger">
                        <ul>
                        </ul>
                    </div>
                </div>
                
                <div class="success" style="display: none;">
                    <div class="alert alert-success">
                        <ul>
                        </ul>
                    </div>
                </div>  
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_arq" role="dialog">   
        <div class="modal-dialog" id="dialog-box">  
        
                <!-- Modal content-->   
                <div class="modal-content"> 
                    <div class="modal-header">  
                        <button type="button" class="close" data-dismiss="modal">&times;</button>   
                    </div>  
                    <div class="modal-body" id="modal_conteudo">    
                        <img src="" alt="" id="ifr_arq" style="width: 100%;height:100%;">
                       <!-- <iframe src="" id="ifr_arq" frameborder="0" style="width: 100%;height:100%;"></iframe>--> 
                    </div>  
                    <div class="modal-footer">  
                        <a id="dowload_arq" href="javascript:;"  download="teste">Download</a>  
                    </div>  
                </div>  
        
        </div>  
    </div>  
    <!--Webchat Final-->
<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 src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/scripts/tinymce/tinymce.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    $("#rdacao1").change(function(){
        $("#group_return").show();
        $("#group_transfer").hide();
        $("#group_finish").hide();
    });
    $("#rdacao2").change(function(){
        $("#group_return").hide();
        $("#group_transfer").show();
        $("#group_finish").hide();
    });
    $("#rdacao3").change(function(){
        $("#group_return").hide();
        $("#group_transfer").hide();
        $("#group_finish").show();
    });

    $(".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('');
        }
    });

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

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

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

    function insere_tratativa(data, selector)
    {
        $.each(data, function (i, item) {
            submit_menssager(item.id,item.mensagem,item.tipo,item.tipo_mensagem,item.url_arquivo,item.nome_exibicao,item.numero_in,item.created_at, item.data, item.sistema, selector);
        });
    }

    function submit_menssager(id,menssagen,tipo=0,tipo_mensagem="",url="",nome_exibicao="",numero,horario, data_json = '', sistema = '', selector = '#chat_whtas ul.chats'){
        horario = horario.split(':');
        horario = horario[0]+":" + horario[1];

        // criar icone de status
        let status_html = '';
        @if(\Auth()->user()->cliente_id == 58 || \Auth()->user()->cliente_id == 4 || \Auth()->user()->cliente_id == 8)
            if(!isEmpty(data_json) && tipo == 0 && sistema != 1)
            {
                if(typeof data_json == 'string') data_json = JSON.parse(data_json);
                let icon = null;
                let info = [];
                if(isEmpty(data_json))
                {
                    info.push(`Lida: -`);
                    info.push(`Entregue: -`);
                    icon = '<i class="fas fa-check" style="cursor: pointer;color: #bdbdbd;"></i>';
                }
                else
                {
                    if(!isEmpty(data_json['read']) && data_json['read']['status'] == true && !isEmpty(data_json['read']['date']))
                    {
                        icon = '<i class="fas fa-check-double" style="cursor: pointer;color: #2196f3;"></i>';
                        let date = formatChatMessageDate(data_json['read']['date']);
                        if(!isEmpty(date['date']) && !isEmpty(date['hour'])) info.push(`Lida: ${date['hour']}<br/>${date['date']}`);
                    }
                    else
                    {
                        info.push(`Lida: -`);
                    }

                    if(!isEmpty(data_json['delivered']) && data_json['delivered']['status'] == true && !isEmpty(data_json['delivered']['date']))
                    {
                        if(icon == null) icon = '<i class="fas fa-check-double" style="cursor: pointer;color: #bdbdbd;"></i>';
                        let date = formatChatMessageDate(data_json['delivered']['date']);
                        if(!isEmpty(date['date']) && !isEmpty(date['hour'])) info.push(`Entregue: ${date['hour']}<br/>${date['date']}`);
                    }
                    else
                    {
                        info.push(`Entregue: -`);
                    }
                    if(icon == null) icon = '<i class="fas fa-check" style="cursor: pointer;color: #bdbdbd;"></i>';
                }
                // atualizar status
                status_html = `<div class="tooltip-atender" style="margin-left: 5px;">${icon}` + 
                                    `<span class="tooltiptext">${info.join('<hr/>')}</span>` +
                               `</div>`;
            }
        @endif
        
        if(tipo_mensagem == "text"){
            menssagen = validarURL(menssagen);
            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;margin-left:10%;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;margin-right:10%;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 + status_html +'</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;margin-left:10%;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;margin-right:10%;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+status_html+'</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;margin-right:10%;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 + status_html +'</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;margin-left:10%;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;margin-right:10%;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 + status_html +'</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;margin-right:10%;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 + status_html +'</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;margin-left:10%;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;margin-right:10%;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 + status_html +'</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;margin-right:10%;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 + status_html +'</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;margin-left:10%;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;margin-right:10%;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 + status_html + '</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;margin-right:10%;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 + status_html + '</span>' +
                        '</span>' +
                        '</div>' +
                        '</li>';
                }
            }
        }
        
        $(selector).append(html);
        if(selector != '#chat_whtas ul.chats') $(selector).animate({ scrollTop: $("ul.chats")[0].scrollHeight + 20}, 0);

        // atualizar status
        @if(\Auth()->user()->cliente_id == 58 || \Auth()->user()->cliente_id == 4 || \Auth()->user()->cliente_id == 8)
            if(!isEmpty(data_json))
            {
                setTimeout(() => {
                    getAnswerOrigin(id, data_json, 'chats');
                }, 1500);
            }
        @endif
    }
</script>

<!-- <script src="{{ asset('pages/scripts/gestao/bootstrap-confirmation-index.js') }}" type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/show.js') }}" type="text/javascript"></script>-->
<!-- script src="{{ asset('pages/scripts/gestao/menu.js') }}" type="text/javascript"></script-->
<!-- --><!--script src="{{ asset('pages/scripts/gestao/slick.min.js')}}" type="text/javascript"></script-->

<!-- <script type="text/javascript" src="{{asset('global/scripts/bootstrap-sweetalert/sweetalert2.min.js')}}"></script> -->
<script src="{{ asset('pages/scripts/gestao/script-managed-pendencia.js') }}"   type="text/javascript"></script>
<script src="{{ asset('pages/scripts/funcoes/funcoes.js') }}"   type="text/javascript"></script>
<!-- <script src="{{ asset('pages/scripts/gestao/show2.js') }}"   type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/novo.js') }}"    type="text/javascript"></script>
 --><!-- <script src="{{ asset('pages/scripts/gestao/menu_id.js')}}"  type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/alerta.js')}}" type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/search.js')}}"   type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/exemploo.js')}}" type="text/javascript"></script> -->
<!-- <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" integrity="sha256-oTyWrNiP6Qftu4vs2g0RPCKr3g1a6QTlITNgoebxRc4=" crossorigin="anonymous"></script> -->
<!-- <script src='{{asset("pages/scripts/atendimento/jquery.slimscroll.min.js")}}' type="text/javascript"></script> -->
<!-- <script src='{{asset("global/scripts/app.min.js")}}' type="text/javascript"></script>  -->
<!-- <script src="{{ asset('pages/scripts/gestao/jquery.sortable.js')}}" type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/jquery.gridly.js')}}" type="text/javascript"></script> -->
<!-- <script src="{{ asset('global/scripts/bootstrap-sweetalert/sweetalert2.all.min.js')}}" type="text/javascript"></script> -->
<!-- <script src="{{ asset('pages/scripts/gestao/drag.js')}}" type="text/javascript"></script> -->

@endpush
@endsection