@extends('layouts.app_menu')

@section('content')
<style type="text/css">
    .page-footer-inner{
        color:#333!important;
    }
    .page-footer a{
        color:#333!important;
    }
    .btn.btn-primary{
    background:#426a9e!important;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.5/css/fork-awesome.min.css" integrity="sha256-P64qV9gULPHiZTdrS1nM59toStkgjM0dsf5mK/UwBV4=" crossorigin="anonymous">

<style type="text/css">

body{
    background-color: white;
    overflow-x: hidden;
}

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

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

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

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

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

<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 href="{{asset('global/scripts/bootstrap-sweetalert/sweetalert.css')}}" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" type="text/css">

@push('css')
<!--link href="{{asset('global/scripts/bootstrap-sweetalert/sweetalert.css')}}" rel="stylesheet" type="text/css" /-->

<!-- link rel="stylesheet" type="text/css" href="{{asset('pages/css/atendimento/slick.css')}}">
<link type='text/css' rel='stylesheet' href ='{{asset("pages/css/atendimento/slick-theme.css")}}'-->

@endpush

<div class="page-content-wrapper">
    <div class="page-content" style=" background-color: #efefef;">
        <div class="page-bar">
           <!--  <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Atendimento</span>
                </li>
            </ul> -->
            <style type="text/css">
                  span.status_cor{
                    background:@if($atendente_receptivo) red  @else blue @endif;
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                      border-radius: 50%!important;

        }  


            </style>
        
            <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>
                @if($integracao_telefonia)
                <span class="pull-right" style="width: 27%;font-size: 15.5px">Ramal: {{$ramal}}<span class="status_cor" style="margin-left: 2%"></span><span style="padding-left: 6px; ">Status:</span><span id="status_ramal" style="margin-left: 2%;">@if($atendente_receptivo) Sem Conexão @else Em chamada Ativa @endif</span></span>
                @endif
            </h4>
        </div>
        <div style="margin-bottom: 0.5%; ">
            <h1 class="page-title nova-faixa" style="line-height: 40px;">Atendimento
                <div class="pull-right">

                    <i class="nova-faixa-icon  icon-earphones-alt" style="padding-right:20px;"></i>
                </div>
            </h1>
        </div>
        <style type="text/css">
        	div.row div.col-md-3 div{
         border-color: rgb(211, 211, 211) !important;
        	}
        	div.row div.col-md-4 {
        		margin-bottom: -89px!important;
        	}
        </style>

        <div class="row" >
        	<div class="col-lg-4 col-xs-12 col-sm-12">
                <div class="portlet light bordered"style="height: 130px;">
                    <div class="portlet-body">
                        <div class="row" >
                                      
                            <style type="text/css">
                                div#canais ul li{
                                    display: inline-block;
                                    font-size: 35pt;
                                    opacity: 0.3;
                                }
                                ul#lista_canal{
                                    text-align: center;
                                    margin-top: 20px;

                                }
                                ul#lista_canal li{
                                    padding-left: 10px;
                                }
                                #whatsapp  i{
                                    color: #25D366;
                                }
                                a#whatsapp:active i{
                                	color:black;
                                }
                                #instagram  i{
                                    color: #d321ba;
                                }
                                a#instagram:active i{
                                	color:black;
                                }
                                #messenger  i {
                                    color:#0084FF;
                                }
                                #telegram  i{
                                    color:#0088cc;
                                }
                                #telefone  i{
                                color:red;
                                }
                                #chat{
                                    padding: 4px;
                                    color:orange;
                                }
                                .badge.badge-default{
                                	background-color:#009af2; 
                                } 
                                a#whatsapp:focus{
                                	color: black;
                                }
                                a#instagram:focus{
                                	color: black;
                                }

                            </style>
                    
                            <div class="row" style="height: 89px">
                                <div class="col-md-12">
                                    <div id="canais">
                                        <h4 id="titulo_canal" canal="" style="margin-top: 0px;margin-bottom: 0px; /* width: 50%; */ text-align: center; font-size: 15px;">Canais</h4>
                                        <ul id='lista_canal'class="nav na" style="margin-top:10px;">
                                            <style type="text/css">
                                                ul#lista_canal li{
                                                    padding-left: 0px;
                                                }
                                            </style>

                                            <li style="padding-right: 10px;padding-left: 10px;opacity: 1 " >
                                                <div class='col' >
                                                    <span class="badge badge-default" id="badge_telefone" style="position: absolute;"> 0 </span>
                                                    <a id="telefone" title="Telefonia" class="active" >
                                                        <i class='icon-call-in' style="font-size: 27px;"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            
                                            <li>
                                                <div style="filter: grayscale(100%);">
                                                    <span class="badge badge-default" style="position: absolute;"> 0 </span>
                                                    <a  class="active" disabled="disabled" style="cursor: not-allowed;" title="Whatsapp" >
                                                        <i class='fa fa-whatsapp'></i><br>                                    
                                                    </a>
                                                </div>
                                            </li>

                                            <li >
                                                <div  class='col' style="filter: grayscale(100%);">
                                                    <span class="badge badge-default" style="position: absolute;"> 0 </span>
                                                    <a  title="Messenger" disabled="disabled" style="cursor: not-allowed;" class="active" >
                                                        <i class='fa fa-facebook-messenger'></i>
                                                    </a>
                                                </div>
                                            </li>
        
                                            <li>
                                                <div  class='col' style="filter: grayscale(100%);">
                                                    <span class="badge badge-default" style="position: absolute;cursor: not-allowed;"> 0 </span>
                                                    <a  title="Telegram" disabled="disabled" style="cursor: not-allowed;" dclass="active">
                                                        <i class='fa fa-telegram'></i>
                                                    </a>
                                                </div>
                                            </li>
                                            
                                            <li>
                                                <div class='col' style="filter: grayscale(100%);">
                                                    <span class="badge badge-default" style="position: absolute; "> 0 </span>
                                                    <a idd="chat"  title="Chat" disabled="disabled" style="cursor: not-allowed;" data-toggle="tab">
                                                        <img src="{{asset('pages/img/gestao/testchat.png')}}"  width="51px" height="51px" style="margin-top: -6px;">
                                                    </a>
                                                </div>
                                            </li>      
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div> 
                                        
                    </div>
                </div>
            </div>
        	<!-- feeeeeeeeeeeeeeeeeeeeeeeeeee -->
            <div class="col-lg-4 col-xs-12 col-sm-12">
                <div class="portlet light bordered" style="height: 130px">
                    <div class="portlet-body">
                        <div class="row" >
                            <div class='col-lg-5 col-xs-5 col-sm-5 text-center' style="padding-right: 0px;">
                                <div>
                                    <i id="icone_canal" class="icon-call-in" style="font-size: 27px; height: 27px;"></i>
                                </div>
                                
                                <div>
                                    <h4 id="nome_canal" style="font-size: 15px;margin-top: 0px;margin-bottom: 5px;">Telefonia</h4>
                                </div>

                                <div class="botao3c" style="/* margin-top: 0px; *//* width: 113%; */">
                                    <span style="padding-bottom: 12px;"  class="mostra" disabled><a title="Fila" disabled="disabled" id="hometopo" class="acoes btn btn-circle btn-default "><i class=" fa fa-home"></i></a></span>
                        <!--             <span style="padding-bottom: 12px;" id="botaotelefone" class="">
                            	       <a id="icone_canal1c" class="acoes btn btn-circle btn-default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <i class=" icon-call-out"></i></a>
                                    
                                    <div class="dropdown-menu pull-right" style="z-index: 10011">
                                	   <div class="col-md-12 text-center">
                                       
                                            <div class="col-md-12" style="margin-bottom: 10px;">			
                                                <h5 class="text-center"> Alterar status para <span class="status_atual">{{$tipo_atendimento}}</span> </h5>
                                                @if($integracao_telefonia)
                                                @if($atendente_receptivo)
                                                <a  href="{{url('atendimento/integrado/1')}}"><button class='btn blue' id="mudatelefone">Sim</button></a>
                                                @else
                                                <a  href="{{url('atendimento/integrado/0')}}"><button class='btn blue' id="mudatelefone">Sim</button></a>
                                                @endif
                                                @else
                                                <a  href="{{url('gestao/atendimento')}}"><button class='btn blue' id="mudatelefone">Sim</button></a>
                                                @endif
                                                <button class="btn red">Não</button>
                                            </div>
                                        </div>
                                    </div>
                                    </span> -->
  
                                    <span style="padding-bottom: 12px;"  ><a title="Total na Fila" id='filatopo'class="acoes btn btn-circle btn-default "><i class=" fa fa-users"></i></a></span>
                                    <span style="padding-bottom: 12px;"><a disabled="disabled"  title="Pendências" id="pedenciastopo" class="acoes btn btn-circle btn-default"><i class="icon-bell "></i></a></span>
   
                                </div>
                            </div>
                                    
                            <div class="conteudo">
                                <div class="col-lg-7 col-xs-7 col-sm-7">
                                   <!--  <ul class="feeds" id="lista_topo" style="height: 95px;overflow-y: scroll;">
                                        <li>
                                            <style type="text/css">
                                             	.label.label-sm.label-default.label1{
                                             		background-color: #2598d8;
                                             	}
                                                .desc{
                                                    width: 100%;
                                                }
                                                .cont{
                                                    width: 100%
                                                }
                                            </style>
                                            
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    </div>
                                                
                                                    <div class="cont-col2">
                                                        <div class="desc"> Desconhecido
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li>
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="cont-col2">
                                                        <div class="desc"> Alex Oliveira
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                 
                                        <li>
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    
                                                    </div>
                                                    
                                                    <div class="cont-col2">
                                                        <div class="desc"> Luiz Claudio
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="cont-col2">
                                                        <div class="desc"> Desconhecido
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="cont-col2">
                                                        <div class="desc"> Desconhecido
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="col1">
                                                <div class="cont">
                                                    <div class="cont-col1">
                                                        <div class="label label-sm label-default label1">
                                                            <i class="fa fa-user"></i>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="cont-col2">
                                                        <div class="desc"> Desconhecido
                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-xs-12 col-sm-12">
<div class="portlet light bordered" style="height: 130px">
                                    
                    
                                    
                    <div class="portlet-body">
                             
                        <div class="row"> 
                                    
                            <div class="col-lg-3 col-xs-3 col-sm-3 text-center" style="padding-right:0px;padding-left: 0px;">
                                <div class="col-md-12" style="padding-right: 0px;padding-left: 0px;"> 
                                    <img src="http://138.68.55.232/img/ux-base-atendimento-50.png" width="50" height="50">
                                    <h5 id="nome_atendente" style="margin: 0px;">{{ \Auth()->user()->name }}</h5>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                            </div> 

                            <div class="col-lg-4 col-xs-7 col-sm-7 text-center" style="
    padding-left: 0px;
    padding-right: 0px;
">
                                
                                
                                <div class="conteudo2" style=";">
                                    <div clas="col-lde col-xde col-smde text-center">
                                        <h6 style="margin-bottom: 4px;font-weight: 700;">Controle de Pausas</h6>
                                        <span>
                                            <span></span> 
                                            Total de Pausas</span>
                                        <span>
                                    </span></div>
                                    </div>
                                    </div>
                    
                            <div class="col-lg-5  col-xs-2 col-sm-2 text-center" style="
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2%;
">
    <div class="botao3c col-md-11" style="
    margin-bottom: 10%;
">
                                    <span style="padding-bottom: 12px;" class="mostra">   <a class="acoes btn btn-circle btn-default" href="#" title="Controle de Pausas" id="pausa3coluna"><i class="icon-home"></i></a></span>
                                    <span style="padding-bottom: 12px;"> <a class="acoes btn btn-circle btn-default" href="#" title="Total de Atendimentos" id="totatendimento3coluna"><i class="icon-earphones-alt "></i></a></span>
                                    <!-- <a class="acoes btn btn-circle btn-default" href="#" title='Avaliação'><i class=" icon-star"></i></a> -->
                                    <span style="padding-bottom: 12px;"><a disabled="disabled" class="acoes btn btn-circle btn-default" href="#" title="Volume de Filas" ids="volumedefila3coluna"><i class="fa fa fa-users "></i></a></span>
                                    <span style="padding-bottom: 12px;"><a disabled="disabled" class="acoes btn btn-circle btn-default" href="#" title="Volume de Pendências" ids="volumepedencia3coluna"><i class="icon-bell"></i></a></span>
                                </div>
                                <style type="text/css">
                                    #icones-plays  li{
                                    list-style: none;}
                                </style>
@if($atendente_receptivo == true)
                                <div class="col-md-12"  id='botoes_acoes_pausa_sair' style="
    padding-left: 0px;
    padding-right: 0px;
">
@else
 <div class="col-md-12" style="
    padding-left: 0px;
    padding-right: 0px;
    display: none;
">
@endif
                                    <style type="text/css">
                                        ul.mx-auto.justify-content-cente li i {
                                            font-size: 20px;
                                        }
                                          ul.mx-auto.justify-content-cente li  {
                                            padding-bottom: 6px;
                                        }
                                    </style>
                                    
                     

                                    <div class="col-md-6" title="Pausa" id="lista_pausa" style="
    padding-left: 0px;
    padding-right: 0px;
">
                                        <a style="color: black;" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"><button class="btn btn-primary" style="
    font-size: 12px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
">Pausar<i class="glyphicon glyphicon-pause" style="
    font-size: 12px;
    padding-left: 4px;
"></i></button></a>

                                        <ul class="dropdown-menu pull-right" id="load_list_pause" style="z-index: 10001;">
                                            

     @foreach($pausas as $pausa)

                                        
                                            <li id="{{$pausa->id}}"><a id="iniciar_pausa"><i class="icon-control-pause"></i> {{$pausa->nome}}</a></li>
                                            @endforeach 


                                                     <!--                                                                                            <li id="35">
                                                        <a id="iniciar_pausa"><i class="icon-control-pause"></i> Pausa 1</a>
                                                    </li>
                                                                                                    <li id="32">
                                                        <a id="iniciar_pausa"><i class="icon-control-pause"></i> Pausa Almoço</a>
                                                    </li>
                                                                                                    <li id="36">
                                                        <a id="iniciar_pausa"><i class="icon-control-pause"></i> Pausa sem limite</a>
                                                    </li> -->
                                                                                                                                        
                                            <!-- <li>
                                                <a href="javascript:;" data-target="#pausa_cronometro" id="descanso" data-toggle="modal"><i class='icon-control-pause' ></i>Descanso </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" data-toggle='modal' data-target='#pausa_pedencia'><i class='icon-control-pause'></i>Almoço</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Banheiro</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Reunião</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Feedback</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Confraternização</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Comunicado Geral</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Dinâmica</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i>Ginástica Laboral1</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;"><i class='icon-control-pause'></i> Outras</a>
                                            </li> -->


                                        </ul>
                                    </div>

                                    <div class="col-md-6" title="Sair do Atendimento" style="
    padding-left: 0px;
    padding-right: 30px;
"> 
                                        <a href="javascript:;" style="color: black;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true">
    <button class="btn voltar" style="
    font-size: 12px;
    padding-top: 3px;
    padding-left: 6px;
    padding-bottom: 3px;
    padding-right: 12px;
">Sair  <i class="icon-logout" style="
    font-size: 12px;
    margin-left: 0px;
"></i></button>
   </a>
                                        <div class="dropdown-menu pull-right">
                                           <div class="col-md-12 text-center">
                                               <div class="col-md-12" style="margin-bottom: 10px;">
                                                    <h5 class="text-center">Deseja Sair? </h5>
                                                    <button class="btn blue" data-target="#pausa_pedencia2" data-toggle="modal" id="sair_atendimento">Sim</button>
                                                    <button class="btn voltar">Não</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
</div>
                            </div>

                            <!--    <span style="margin: 0px; font-size: 12px;display:block;">Atendimento</span>
                                    <span style="margin: 0px;display: block;font-size: 12px;">03 canais</span>
                                    <span style="margin: 0px;display: block;font-size: 12px;">46 total de atendimento</span> -->
                        </div>
                                        
                    </div>
             

                </div>          
        </div>
   
        <!--segunda coluna-->
        <style type="text/css">
        	div.row div.col-md-4{
        		padding: 1%;
        		height: 40%;
        	}
        	span.input-group-addon{
        		padding: -500px !important;
        	}
        </style>

        <style type="text/css">
        	div.row div.col-md-4{
        		height: 40%!important; 
        	margin-bottom: 20px;
        	

        	}
        	div.row div.col-md-4 div{
        		border-color: rgb(211, 211, 211) !important;
        	}
        	
        </style>

        <div class="row" id="primeira" style="">
            <div class="col-lg-2 col-xs-12 col-sm-12"></div>
            <div class="col-lg-8 col-xs-12 col-sm-12">
  @if($integracao_telefonia == false ||($integracao_telefonia == false  || $atendente_receptivo == false) && $logado == true)
                <div class="col-md-12 hover_bkgr_fricc" id="trasparente" style="display: block;">
                    <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: 20px;color: white;/* padding-bottom: 50px; *//* height: 130px; */">
                                <i id="icone_canal" class="" style="font-size: 16px;height: -31px;/* padding-right: 10px; */color: white;margin-right: 4px;margin-top: 0px;"></i>
                                <div class="col-md-12" style="/* padding-right: 0px; *//* padding-left: 0px; *//* top: -21px; *//* bottom: 14px; */">
        <div class="col-md-6" style="/* padding-left: 3px; */"><button type="button" style="width: 100%" id=" " class="btn blue adicionar_manualmente chamada_ativa">Ativo</button></div>

 @if($integracao_telefonia== false)
     <div class="col-md-6" style="
    /* padding-left: 30px; */
    /* padding-right: 0px; */

    ">
    <button type="button" id="chamada_receptiva " style="width: 100%" class="btn red adicionar_manualmente chamada_receptiva">Receptivo</button>
    </div>
@else
   <a href="{{url('atendimento/integrado/0')}}"><button class='btn btn-danger col-md-5'>Receptivo</button></a>
@endif

    </div>
</div>
                        </div>
                      
                   </div>
                </div>
                @else
<style type="text/css">
    .fa-spin{
        animation: fa-spin 6s infinite linear !important
    }
</style>
                 <div class="col-md-12 hover_bkgr_fricc" id="trasparente" style="display: block;">
                    <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 Chamada</h5>    
                           <button type="button" style="width: 100%;visibility: hidden;" id=" " class="btn blue adicionar_manualmente chamada_receptiva"></button>


</div>
                        </div>
                      
                   </div>
                </div>
                @endif


                <div class="portlet light bordered" style="">
                    <form class="horizontal-form" method="post"  id="formPesquisaAtendimentoContato">
                        
                        <input type="hidden" name="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: -3%;padding-left: 0px;padding-right: 0px;">
                            <div class="portlet-title tabbable-line " style="">
                                <div class="caption " id="titulo_canal" style="color: #E26A6A;">
                                    <i class="icon-call-in" style="color: #E26A6A"></i><span class="caption  bold " id="titulo_bloco_canal"> CHAMADAS RECEPTIVAS</span>
                                       <span style="font-size: 16px;color: #9eacb4;/* width: 40%; */margin-left: 6px;">Fila:</span>
                                <span style="font-size: 16px;color: #9eacb4; text-transform:lowercase;" id="fila_telefonia"></span>
                                </div>
                               
                             
<div class="col-md-4" style="float: right;">
    <div style="float: right;border-left: 1px solid #9eacb4;">
                                    <span style="display: block;font-size: 11px;color: #9eacb4; width: 40%;margin-left: 6px;">Protocolo</span>
                                    <span style="font-size: 11px; color: #9eacb4;   margin-left: 6px;   /* margin-top: -7%; */" id="Protocolo">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>
                            </div>
                        </div>

                        <div class="portlet-body">
                            <div class="row">	
                                <div class="col-xs-12" style="margin-bottom: 2%;">
                                    <div class="col-md-12" style="margin-top: 6px;padding-right: 0px;">
                                        <div class="col-md-1" style="padding-left: 40px;"><img src="http://138.68.55.232/pages/img/gestao/ux-base-30x30.png" width="30" height="30"></div>
                                        <div class="col-md-6" style="padding-right: 0px;padding-left: 40px;">
                                            <input type="text" name="nome_contato" class="form-control input-sm" placeholder="Nome do Contato:" autocomplete="off" style="font-weight: 600;font-size: 20px;/* margin-top: 5px; *//* margin-left: 3%; */">
                                        </div>
                                        <div class="col-md-5" style="padding-top: 0px; padding-right: 0px;">
                                            <div class="input-group">
                                                <input type="text" class="form-control input-sm" placeholder="ID:" autocomplete="off" name="id" maxlength="50">
                                                <span class="input-group-addon"><a id="busca_id"      type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></span>
                                                <span class="input-group-addon"><a id="busca_externa" title="consultar dados" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-exchange"></i></a></span>
                                                <!-- <span class="input-group-addon" style="cursor: not-allowed;"><i class="fa fa-search"></i></span>                 -->
                                            </div>
                                        </div>
                                    </div>
                                
                                    <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;">
                                            <!-- <a class="btn green btn-outline btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"> Id:
                                                <i class="fa fa-angle-down"></i>
                                            </a> -->
                                            
                                            <!-- <ul class="dropdown-menu pull-right">
                                                <li>
                                                    <a href="javascript:;"><i class="fa fa-plus"></i>Criar ID</a>
                                                </li>
                                                <li class="divider"> </li>
                                                <li>
                                                    <a href="javascript:;"><i class="fa fa-eye"></i>Visualizar Id</a>
                                                </li>
                                            </ul> -->
                                        </div>
                                    </div>
                                </div>

                       
<div class="col-xs-12">

   <ul class="nav nav-tabs" style="
        /* border-width: 1px; */
        /* color: black; */
        -webkit-border-horizontal-spacing: -22px;
        width: 100%;
    ">
        <li class="  active">
            <a href="#portlet_contato" data-toggle="tab" aria-expanded="true" id="aba_contato"> CONTATO </a>
        </li>
        <li class="">
            <a href="#portlet_endereco" data-toggle="tab" aria-expanded="false"> ENDEREÇO </a>
        </li>
        <li class="">
            <a href="#portlet_empresa" data-toggle="tab" aria-expanded="false"> EMPRESA </a>
        </li>
        <li class="" style="padding-right: 0px;padding-right: 27px;">
            <a href="#portlet_info" data-toggle="tab" aria-expanded="false"> INFO</a>
        </li>
        <li class="col-md-6" style="padding-right: 0px; float: right;">
            
 <div class="col-md-5" style="float: right;padding-right: 0px;">
                                        @if($integracao_telefonia)
                                        <!-- possition fixed para deixar o icone fixo na tela -->
                                                @if($atendente_receptivo)
                                                      <div class="dropdown-menu pull-right" style="z-index: 10011">
                                       <div class="col-md-12 text-center">
                                       
                                            <div class="col-md-12" style="margin-bottom: 10px;">            
                                                <!-- <h5 class="text-center"> Alterar status para <span class="status_atual">{{$tipo_atendimento}}?</span> </h5> -->
                                                <h5 class="text-center"> Alterar status para <span class="status_atual">Ativo</span> ? </h5>
                                                @if($integracao_telefonia)

                                                @if($atendente_receptivo)
                                                <a  id="validade_fim_receptivo"><button  type="button" class='btn blue' id="change_ativo">Sim</button></a>
                                                @else
                                                <a id="change_ativo"><button type="button"  class='btn blue' id="mudatelefone">Sim</button></a>
                                                @endif
                                                @else
                                              <!--   <a  href="{{url('gestao/atendimento')}}"><button class='btn blue' id="mudatelefone">Sim</button></a> -->
                                                @endif
                                                <button type="button" class="btn voltar">Não</button>
                                            </div>
                                        </div>
                                    </div>
                                                <a  href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true" style="z-index: 10000;">
                                                    <button type='button' class='btn voltar2' style='z-index: 10000;position: relative;float: right;' id="mudatelefone">
                                                        <i class="icon-call-out" style=" margin-right: 5px;"></i> <span class="status_atual">Ativo</span>
                                                    </button>
                                                </a>
                                             
                                             <!--    <a  href="{{url('atendimento/integrado/0')}}" style='z-index: 10000;'>
                                                    <button type='button' class='btn btn-danger' style='z-index: 10000;position: relative;float: right;' id="mudatelefone">
                                                 <i class="icon-call-in" style="margin-right: 5px;"></i> Receptivo
                                             </button>
                                             </a> -->
                                                @endif
                                                @else
                                           <!--      <a  href="{{url('gestao/atendimento')}}" style='z-index: 10000;position: fixed;'><button type='button' class='btn btn-primary'style='z-index: 10000;position: relative;'  id="mudatelefone">Ativo</button></a> -->
                                                @endif

                                </div>


        </li>
       


</ul>

</div>
                                
                                <div class="col-md-12" style="padding-right: 0px;padding-left: 0px;border-bottom: 5%;">

                                    <div class="tab-content">
                                        <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">
                                                        <input type="text" autocomplete="off" class="form-control input-sm" placeholder="Telefone:" title="Telefone" name="telefone" onKeyPress="return enviar(event,'#busca_telefone')">
                                                        <span class="input-group-addon" id="botao_discagem_ativo" style="display: none"><a id="discagem_ativo" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="icon-call-out"></i></a></span>
                                                        <span class="input-group-addon"><a id="busca_telefone" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></span>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="padding-right: 0px; padding-left: 0px">
                                                        <div class="input-group" style="width: 100%">
                                                            <input 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">
                                                            <input type="text" autocomplete="off" class="form-control input-sm" placeholder="CPF:" onkeypress="
                                                            return enviar(event,'#busca_cpf')"  title="CPF:" name="cpf">
                                                            <spam class="input-group-addon"><a id="busca_cpf"  type='button'style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></spam>                                
                                                        </div>
                                                    </div>
                                                    
                                                     <div class="col-md-6" style="padding-left: 0px;padding-right: 0px">
                                                    <div class="input-group" style="width: 100%">
                                                        <input type="text" class="form-control input-sm" placeholder="RG: " title='RG:'name='rg'>
                                                        <!-- <span class="input-group-addon"><i class="fa fa-search"></i></span> -->
                                                    </div>
                                                </div>
                                                </div>
                                       
                                                <div class="col-md-12" style=" margin-bottom: 5px">
                                                    <div class="input-group">
                                                        <input type="email" autocomplete="off" class="form-control input-sm" placeholder="E-mail:" title="E-mail:" name="email"  onkeypress="return enviar(event,'#busca_email')">
                                                        <span class="input-group-addon"><a onKeyPress="return submitenter(this,event,'#busca_email')" id="busca_email"><i class="fa fa-search"></i></a></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="portlet_info">
                                            <div class='col-md-12' style=" margin-bottom: 5px">
                                                <textarea 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">
                                                        <input type="text" autocomplete="off" class="form-control input-sm"  placeholder="CEP:" title="CEP" name="cep" onkeypress="return enviar(event,'#busca_cep')">
                                                        <spam class="input-group-addon"><a onKeyPress="return submitenter(this,event,'#busca_cep')" id="busca_cep" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></spam>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                    <div class="input-group" style="width: 100%;">
                                                        <input 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 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 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 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 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 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 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 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">
                                                        <input type="text" autocomplete="off" class="form-control input-sm" placeholder="CNPJ:" title="CNPJ:" name="cnpj"  onkeypress="return enviar(event,'#busca_cnpj')">
                                                        <spam class="input-group-addon"><a onKeyPress="return submitenter(this,event,'#busca_cnpj')" id="busca_cnpj" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></spam>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                    <div class="input-group" style="width: 100%;">
                                                        <input 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 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">
                                                        <input 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')">
                                                        <spam class="input-group-addon"><a onKeyPress="return submitenter(this,event,'#busca_empresa')" id="busca_empresa" type="button" style="padding-right: 0px;padding-left: 0px;border: none; background-color: transparent;"><i class="fa fa-search"></i></a></spam>
                                                    </div>
                                                </div>

                                                <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                    <div class="input-group" style="width: 100%;">
                                                        <input 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 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" >
                                                        <input 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')" >    <spam class="input-group-addon"><a onKeyPress="return submitenterthis,event,'#busca_razaosocial')"        id="busca_razaosocial" type="button" style="border: none; background-color: transparent;"><i class="fa fa-search"></i></a></spam>                                        
                                                    </div>
                                                </div>
                                        
                                                <div class="col-md-5" style="padding-left: 0px;padding-right: 0px">
                                                    <div class="input-group" style="width: 100%;">
                                                        <select 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 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="row">
                                        <div class="col-md-12" style=" margin-bottom: 5px">
                            	
                                            <div class="col-md-6" style="padding-right: 0px;">
                                                <div class="input-group " style="height: 11px;width: 99%">
                                                    <select class="bs-select form-control input-sm" name="assunto" id="assunto" title="Assunto" style="font-size: 11px;">
                                                        <option value="">Selecionar Motivo:</option>
                                                        @foreach( $assuntos as $assunto )
                                                            <option value="{{ $assunto->id }}">{{ $assunto->nome }}</option>
                                                        @endforeach
                                                    </select>                           
                                                </div>
                                            </div>

                                            <div class="col-md-6" style="padding-left: 0px">
                                                <div class="input-group " style="height:11px; width: 100%">
                                                    <select class="bs-select form-control input-sm" name="tabulacao_motivo" id="tabulacao_motivo" style="font-size: 11px;">
                                                        <option value="">Selecionar Assunto:</option>
                                                        
                                                    </select>                            
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12" style="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>                    
                              
                                        </div>
                                        <div class="col-md-12" style="; margin-top: -13px;">
                                         <!--    <div style="background: #e9eff3; padding: 10px; margin-top: 4%;" class="col-md-12">
                                                <buttom class="btn white col-md-5" style=" border-color: #ddd">Chamada Atual</buttom>
                                                <buttom disabled class="btn white col-md-6" style=" /* width: 150px; */  /* height: 30px; */ float: right; border-color:#ddd;">Tabulação Pendente
                                                    <span class="badge badge-default" style=" position: absolute;  /* top: -9px; */ right: -3px; top: -10px; bottom: -28px;  /* padding: 0px; */ padding-left: 30px; padding-right: 34px; background: #ed6b75;">Tabular</span>
                                                </buttom>
                                            </div> -->
                                        </div>
                                    </div>

                                    <div class="col-md-12" style=""><hr></div>
                                    <div class="col-md-12" style="">
                                        <div class="col-md-4" style="padding: 0px;">
                                            <div class="botao3c">
                                                <!-- <span style="padding-bottom: 12px;" title="Historico"><a class="acoes btn btn-circle btn-default" tabindex="0"><i class="fa fa-history "></i></a></span>
                                                <span style="padding-bottom: 12px;" title="Roteiro"><a class="acoes btn btn-circle btn-default" tabindex="0"><i class="icon-book-open"></i></a></span>
                                                <span style="padding-bottom: 12px;" title="Favoritos"><a class="acoes btn btn-circle btn-default" tabindex="0"><i class="icon-star"></i></a></span> -->
                                                <span style="padding-bottom: 12px;" title="Link Externo"><a id="limpa_campo" title="Limpa Campo" class="acoes btn btn-circle btn-default" tabindex="0"><i class="fa fa-eraser"></i></a></span> 
                                                <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-9" style="float: right; text-align: right; padding-right: 0px;">    
                                            <div class="">
                                                <button type="button" class="btn btn-sm btn-circle btn-success" id="concluido"  tabindex="0" data-toggle='modal'>Concluir</button>
                                                <button type="button" class="btn btn-sm btn-circle btn-info"    id="transferir" tabindex="0" data-toggle='modal'>Transferir</button>
                                                <!-- data-target='#ModalConcluirAtendimento' -->
                                        <!--         <button disabled type="button" class="btn btn-sm btn-circle btn-info "  id="transferir" data-toggle='modal' data-target='#exemplotransferir'>Transferir</button>
                                                <button disabled type="button" class="btn btn-sm btn-circle btn-danger" id="pedente" style="" tabindex="0" data-toggle='modal' data-target='#exemploretorno'>Pendente</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>
                        <input type="hidden" name="tipo_chamada">
                          @if($integracao_telefonia == true)
                        <input type="hidden" name="chamada_integracao">
                    <!-- erro do enter formulario -->
                    <!--  -->
                    <!--  -->

                    <!--     <a href="{{url('atendimento/integrado/0')}}" id="retorna_receptivo" style="display: none;"><button class='btn blue' id="mudatelefone">Sim</button></a> -->
                        @endif
                    </form>
                </div>
            </div>

            <div class="col-lg-2 col-xs-12 col-sm-12"></div>
        </div>

        <div class="row" style="background-color:rgb(239, 239, 239)" style="display: none;">	
            <div class="col-lg-2"></div>
                <!-- final primeiro -->    		
                
                <div class="col-lg-8 col-xs-12 col-sm-12" id="bloco_historico" >
                    <div class="portlet light bordered"  style="height: 700px">
                        <div class="portlet-title tabbable-line">
                            <div class="caption">
                                <span class="caption bold font-red-sunglo" style="text-transform: uppercase;"><i class="fa fa-history"></i> Histórico</span>
                            </div>

                            <div class="actions">
                                <div class="portlet-input input-inline">
                                    <div class="input-icon right">
                                        <i class="icon-magnifier" id="pesquisa_historico"></i>
                                        <input type="text" class="form-control input-circle" placeholder="Pesquisar" id="formpesquisahistorico">
                                    </div>
                                </div>
                                
                                <div class="botao3cc" style="display: inline-block;"> 
                                    <span style="padding-bottom: 12px;" ids="mostrahistorico" class="mostra"><a class="acoes btn btn-circle btn-default historico3linha" ids="historico"><i class="fa fa-history "></i></a></span>
                                    <span style="padding-bottom: 12px;" idq="mostraroteiro2"  title="Roteiro" class=""><a   disabled ids="roteiro" class="acoes btn btn-circle btn-default roteiro3linha00"><i class="icon-book-open"></i></a></span>
                                    <span style="padding-bottom: 12px;" idq="mostrafavorito2" title="Favoritos" class=""><a disabled ids="favoritos" class="acoes btn btn-circle btn-default favoritos3linha00"><i class="icon-star"></i></a></span>
                                </div>                                 
                            </div>
                        </div>  
                        
                        <div class="portlet-body" id="coluna_historico">
                            <div class="row">  
                                <style type="text/css">
                                    #listaexemplo{  
                                        overflow-y: scroll; 
                                        height: 87%;
                                    }
                                </style>

                                <ul id="listaexemplo" style="height: 600px;margin-right: 10px;">
                                   <!--  <div class="col-md-12" id="tabulacao" style="background-color: #fafafa;">
                                        <div class="label label-sm " style="margin-right: 10px;" >
                                            <i class="icon-call-in" style="color: #E26A6A"></i>
                                        </div>
                                        
                                        <span class="task-title-sp"> Informações sobre prazo de entrega </span>
                                        <a class="accordion-toggle collapsed" style="display: block;margin-top: 5px;" data-toggle="collapse" data-parent="" href="#atentimento">
                                            <span class="label label-sm label-danger bg-green-meadow" id="status">Produto Entregue <i class=" fa fa-mail-forward"></i> </span>
                                        </a>

                                        <div class="panel-collapse collapse" id="atentimento">
                                            <div class="panel-body" style="background-color: white;">
                                                <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p>
                                                <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                                                                eiusmod.</p>
                                            </div>
                                        </div>

                                        <div style="margin-top: 4px;"><span style="color: #999;">Data: 24/06/1998</span> <span style="color: #999">Protocolo:AER45678IUYTMKIKG-QG</span></div>
                                    </div> -->
                                </ul>      
                            </div>
                        </div> 
                    </div>
                </div>  

                <div class="col-lg-8 col-xs-12 col-sm-12" id="bloco_roteiro" style="display: none;">
                    <div class="portlet light bordered" style="height: 700px;" >
                        <div class="portlet-title tabbable-line">
                            <div class="caption">
                                <span class="caption bold font-red-sunglo" style="text-transform: uppercase;"><i class="icon-call-in"></i> Roteiro</span>
                            </div>
                            
                            <div class="actions">
                                <div class="portlet-input input-inline">
                                    <div class="input-icon right">
                                        <i class="icon-magnifier" id="pesquisa_historico"></i>
                                        <input type="text" class="form-control input-circle" placeholder="Pesquisar">
                                    </div>
                                </div>
                                
                                <div  class='botao3cc' style="display: inline-block;"> 
                                    <span style="padding-bottom: 12px;"><a class="acoes btn btn-circle btn-default historico3linha" id='historico'><i class="fa fa-history"></i></a></span>
                                    <span style="padding-bottom: 12px;" title="Roteiro" class="mostra"><a id='roteiro'class="acoes btn btn-circle btn-default roteiro3linha"><i class="icon-book-open"></i></a></span>
                                    <span style="padding-bottom: 12px;" title="Favoritos"><a id='favoritos'class="acoes btn btn-circle btn-default favoritos3linha"><i class="icon-star"></i></a></span>
                                </div>                                 
                            </div>
                        </div>

                        <div class="portlet-body">
                            <style type="text/css">
                                .label.label-sm.label-default{
                                	background-color: #fafafa;
                                }
                                ul.feeds li{
                                    border: 1px solid #dddddd;
                                    margin-bottom: 1%;
                                }
                                ul.feeds ul li{
                                    border:none!important;
                                    list-style: none;
                                }sd

                                .label.label-sm.label-default{
                                    background-color: #cfdbe2 !important;
                                }
                    
                                #textarea_roteiro{border: none; width:100%;height:150px;resize: none; background-color: #fff; }

                                ul.feeds .icon-star{
                                	color:#009af2;
                                }
                                .fa.fa-bars{
                                	color:#009af2;
                                }
                            </style>
                            
                            <ul class="feeds">
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo3" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default"><i class="fa fa-bars"></i></div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc"> Sobre a Empresa</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>

                                    <ul id="exemplo3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo4" aria-expanded="false" class="collapsed">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="fa fa-bars"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Informações da Loja</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            
                                            <ul id="exemplo4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                <li>
                                                    <div class="col1">
                                                        <div class="cont">
                                                            <div class="col-md-1" style="padding-right: 0px;width: 50px;">
                                                                <a id="muda_estatus">
                                                                    <div class="cont-col1">
                                                                        <div class="label label-sm label-default">
                                                                            <i id="estrela" class="icon-star" style="color: rgb(0, 154, 242);"></i>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                            
                                                            <div class="col-md-9" style="padding-left: 0px;">
                                                                <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false">
                                                                    <div class="col-md-9" style="padding-left: 0px;">
                                                                        <div class="desc">Endereço</div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                        </div>

                                                        <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                    </div>

                                                    <div id="exemplo5" class="">
                                                        <div class="panel-body">
                                                            <div class="col-md-12">
                                                                <textarea id="textarea_roteiro" readonly="">Estamos localizado na Av. São Luís  n°112 18°Andar</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>                                                    
                                    </ul>
                                </li>                                      

                                <!-- segunda -->
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo3" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default">
                                                        <i class="fa fa-bars"></i>
                                                    </div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc">  Cancelamento</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                                    
                                    <ul id="exemplo3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo4" aria-expanded="false" class="collapsed">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="fa fa-bars"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Atendimento</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            
                                            <ul id="exemplo4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                <li>
                                                    <div class="col1">
                                                        <div class="cont">
                                                            <div class="col-md-2">
                                                                <a id="muda_estatus">
                                                                    <div class="cont-col1">
                                                                        <div class="label label-sm label-default">
                                                                            <i id="estrela" class="icon-star"></i>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false">
                                                                    <div class="cont-col2">
                                                                        <div class="desc"> Atendimento </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                        </div>

                                                        <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                    </div>

                                                    <div id="exemplo5" class="">
                                                        <div class="panel-body">
                                                            <textarea id="textarea_roteiro" readonly="">                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                </textarea>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                                    
                                        </li>
                                    </ul>
                                </li> 
                                
                                <!-- terceira -->
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo3" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default">
                                                        <i class="fa fa-bars"></i>
                                                    </div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc"> Devolução</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    
                                    <ul id="exemplo3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo4" aria-expanded="false" class="collapsed">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="fa fa-bars"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Atendimento</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            
                                            <ul id="exemplo4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                <li>
                                                    <div class="col1">
                                                        <div class="cont">
                                                            <div class="col-md-2">
                                                                <a id="muda_estatus">
                                                                    <div class="cont-col1">
                                                                        <div class="label label-sm label-default">
                                                                            <i id="estrela" class="icon-star"></i>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false">
                                                                    <div class="cont-col2">
                                                                        <div class="desc"> Atendimento </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                        </div>

                                                        <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                    </div>

                                                    <div id="exemplo5" class="">
                                                        <div class="panel-body">
                                                            <textarea id="textarea_roteiro" readonly="">                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                </textarea>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li> 
                                
                                <!-- quarta -->
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo3" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default">
                                                        <i class="fa fa-bars"></i>
                                                    </div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc"> Sac</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>

                                    <ul id="exemplo3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo4" aria-expanded="false" class="collapsed">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="fa fa-bars"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Atendimento</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>

                                            <ul id="exemplo4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                <li>
                                                    <div class="col1">
                                                        <div class="cont">
                                                            <div class="col-md-2">
                                                                <a id="muda_estatus">
                                                                    <div class="cont-col1">
                                                                        <div class="label label-sm label-default">
                                                                            <i id="estrela" class="icon-star"></i>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false">
                                                                    <div class="cont-col2">
                                                                        <div class="desc"> Atendimento </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                        </div>

                                                        <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                    </div>

                                                    <div id="exemplo5" class="">
                                                        <div class="panel-body">
                                                            <textarea id="textarea_roteiro" readonly="">                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                </textarea>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>                                       
                            </ul>
                            <!--fim -->
                        </div>
                    </div>
                </div>
                        

                <div class="col-lg-8 col-xs-12 col-sm-12" id="bloco_favoritos" style="display: none;">
                    <div class="portlet light bordered" style="height: 700px;" >
                        <div class="portlet-title tabbable-line">
                            <div class="caption">
                                <span class="caption bold font-red-sunglo" style="text-transform: uppercase;"><i class="icon-call-in"></i> Favoritos</span>
                            </div>

                            <div class="actions" style="">
                                <div class="portlet-input input-inline">
                                    <div class="input-icon right">
                                        <i class="icon-magnifier"></i>
                                        <input type="text" class="form-control input-circle" placeholder="Pesquisar">
                                    </div>
                                </div>
                                
                                <div class="botao3cc" style="display: inline-block;"> 
                                    <span style="padding-bottom: 12px;" id="mostrahistorico" ><a class="acoes btn btn-circle btn-default historico3linha" id="historico"><i class="fa fa-history "></i></a></span>
                                    <span style="padding-bottom: 12px;" id="mostraroteiro" title="Roteiro" class=""><a id="roteiro" class="acoes btn btn-circle btn-default roteiro3linha"><i class="icon-book-open"></i></a></span>
                                    <span style="padding-bottom: 12px;" id="mostrafavorito" title="Favoritos" class="mostra"><a id="favoritos" class="acoes btn btn-circle btn-default favoritos3linha"><i class="icon-star"></i></a></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="portlet-body" >
                            <ul class="feeds">
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo20" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default">
                                                        <i class="fa fa-bars"></i>
                                                    </div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc"> Sobre a Empresa</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    
                                    <ul id="exemplo20" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo21" aria-expanded="false" class="collapsed">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="fa fa-bars"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Informa</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>

                                            <ul id="exemplo21" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                <li>
                                                    <div class="col1">
                                                        <div class="cont">
                                                            <div class="col-md-1" style=" padding-right: 0px;width: 60px;">
                                                                <a id="muda_estatus">
                                                                    <div class="col-md-2">
                                                                        <div class="label label-sm label-default">
                                                                            <i  class="fa fa-star" style="color:#337ab7 "></i>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <div class="col-md-9" style="padding-left: 0px;">
                                                                <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo22" aria-expanded="false">
                                                                    <div class="col-md-9" style="padding-left: 0px;">
                                                                        <div class="desc"> Endereço </div>
                                                                    </div>
                                                                </a>
                                                            </div>

                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo22" aria-expanded="false"></a>
                                                        </div>

                                                        <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo5" aria-expanded="false"></a>
                                                    </div>

                                                    <div id="exemplo22" class="">
                                                        <div class="panel-body">
                                                            <div class="col-md-12">
                                                                <textarea id="textarea_roteiro" readonly="">Estamos localizado na Av. São Luís  n°112 18°Andar</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li> 
                                
                                <li>
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#exemplo12" aria-expanded="false" class="collapsed">
                                        <div class="col1">
                                            <div class="cont">
                                                <div class="cont-col1">
                                                    <div class="label label-sm label-default">
                                                        <i class="icon-star"></i>
                                                    </div>
                                                </div>
                                                
                                                <div class="cont-col2">
                                                    <div class="desc"> Atendimento</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    
                                    <ul id="exemplo12" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <li>
                                            <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo13" aria-expanded="true">
                                                <div class="col1">
                                                    <div class="cont">
                                                        <div class="cont-col1">
                                                            <div class="label label-sm label-default">
                                                                <i class="icon-star"></i>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="cont-col2">
                                                            <div class="desc"> Atendimento</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            
                                            <ul id="exemplo13" class="panel-collapse collapse in" aria-expanded="true" style="">
                                                <li>
                                                    <a data-toggle="collapse" data-parent="#accordion1" href="#exemplo14" aria-expanded="false" class="collapsed">
                                                        <div class="col1">
                                                            <div class="cont">
                                                                <div class="cont-col1">
                                                                    <div class="label label-sm label-default">
                                                                        <i class="fa fa-star" style="color: yellow;"></i>
                                                                    </div>
                                                                </div>
                                                            
                                                                <div class="cont-col2">
                                                                    <div class="desc"> Atendimento</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>

                                                    <div id="exemplo14" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                        <div class="panel-body">
                                                            <textarea id="textarea_roteiro" readonly="">                                                                dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                                    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                                            </textarea>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul> 
                        </div> 
                    </div>
                </div>

                <div class="col-lg-2"></div>
                    <!-- row -->
            </div>	
        </div>
    </div>
</div>
      
</div>	
</div>
</div>


<div class="col-md-12">
    <div class="modal fade" id="exemplotransferir" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#508edb ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Transferir</span>
                    </div>
                </div>
                
                <div class="modal-body">
                    <style type="text/css">
                        .multiselect-item.multiselect-group{
                        	margin-left: -12px!important;
                        }
                    </style>
                    
                    <div class="form-group">
                        <label class="control-label">Razão da Transferência</label>
                        <select class="form-control" id="pesquisar_modulos" name="modulos[]" size="1">
                            <optgroup label="TECNICO">
                                <option value="" class="subclass">Problema de internet</option>
                                <option value="">Problema de rede</option>
                                <option value="">Problema técnico na região</option>  
                            </optgroup>
                            
                            <optgroup label="FINANCEIRO">
                                <option value="" class="subclass">Problema de pagamento</option>
                                <option value="">Problema na analise de crédito</option>
                                <option value="">Problema técnico na região</option>  
                            </optgroup>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">Transferir para</label>
                        <select class="form-control" id="pesquisar_modulos2"  name="modulos[]" size="1">
                            <optgroup label="FILA">
                                <option value="" class="subclass">Atendimento</option>
                                <option value="">Financeiro</option>
                                <option value="">SAC</option>
                                <option value="">Tecnico</option>     
                            </optgroup>
                            
                            <optgroup label="USUÁRIO">
                                <option value="" class="subclass">Michele Lima</option>
                                <option value="">Luiz Claudio</option>
                                <option value="">Alex Oliveira</option>
                                <option value="">Gabriel Monzato</option>     
                                <option value="">Flávio Lucio</option>     
                            </optgroup>
                        </select>
                    </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" data-toggle='modal' data-target='#do_model_transferir' id="finalizar">Finalizar</button>
                            <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="ModalConcluirAtendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" 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="form-group">
                        <label class="control-label">Finalização do Atendimento</label>
                        <select class="form-control" id="pesquisa_concluir" name="tabulacao_concluir">
                        
                                <option  value=""> Selecionar</option>
                            

                        </select>
                    </div>
                    <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'>Finalizar</button>
                            <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="ModalPendenciaAtendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#ea5460!important">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Pendência</span>
                    </div>
                </div>
                
                <div class="modal-body" >
                    <div class="form-group">
                        <label class="control-label">Finalização do Atendimento</label>
                        <select class="form-control" id="pesquisa_concluir_pendencia" name="tabulacao_pendencia">
                            <option value="">Selecionar Concluir:</option>
                            
                        </select>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control"  autocomplete="off" style="resize: none; min-height: 100px" rows="6" placeholder="Parecer:" title="Parecer" name="parecer_pendencia"></textarea>
                    </div>

                    <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_pendencia'>Finalizar</button>
                            <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="ModalTransferirAtendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#659be0 !important">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Transferir</span>
                    </div>
                </div>
                
                <div class="modal-body">
                    <style type="text/css">
                        .multiselect-item.multiselect-group{
                            margin-left: -12px!important;
                        }
                    </style>
                    
                    <div class="form-group">
                        <label class="control-label">Razão da Transferência</label>
                        <select class="form-control" id="pesquisa_concluir_transferir" name="tabulacao_transferir">
                            <option  value=""> Selecionar</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">Transferir para</label>
                        <input type="text" class="form-control" id="transferir_para" name="transferir-para"/>
                    </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" data-toggle='modal' id="concluir_atendimento_transferir">Finalizar</button>
                            <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="exemploretorno" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#ea5460 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Pendente para Retorno</span>
                    </div>
                </div>
                
                <div class="modal-body">
                	<style type="text/css">
                    	.multiselect.dropdown-toggle.btn.blue{
                    		   background: white;
                    		   color: black;
                    		   border-color: #e7ecf1;
                    	}
                    </style>
                  
                    <div class="form-group">
                        <label class="control-label">Razão da Pendência</label>
                        <select class="form-control" id="pesquisa_pendente"  name="modulos[]" size="1">
                            <optgroup label="TECNICO">
                                <option value="">Visita tecnica na residência do cliente</option>
                                <option value="">Visita tecnica na região e feedback para cliente</option>   
                            </optgroup>
                            
                            <optgroup label="FINANCEIRO">
                                <option value="">Confirmação de recebimento/pagamento</option>
                                <option value="">Devolutiva da analise de crédito</option>
                                <option value="">Devolutiva da analise de crédito</option>    
                            </optgroup>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">Pendente  para:</label>
                        <select class="form-control" id="pesquisa_pendente2"  name="modulos[]" size="1">
                            <optgroup label="FILA">
                                <option value="">Atendimento</option>
                                <option value="">Financeiro</option>
                                <option value="">SAC</option>
                                <option value="">Tecnico</option>     
                            </optgroup>
                            
                            <optgroup label="USUÁRIO">
                                <option value="">Michele Lima</option>
                                <option value="">Luiz Claudio</option>
                                <option value="">Alex Oliveira</option>
                                <option value="">Gabriel Monzato</option>   
                                <option value="">Flávio Lucio</option> 
                            </optgroup>
                        </select>
                    </div>

                    <label class="control-label">Data</label>
                    <div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy" style="">
                        <input type="text" class="form-control form-filter input-sm" name="data_init" autocomplete="off" placeholder="Escolher" value="">
                        <span class="input-group-btn">
                            <button class="btn btn-sm default" type="button">
                                <i class="fa fa-calendar"></i>
                            </button>
                        </span>
                    </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" data-toggle='modal' data-target='#do_model_transferir'>Finalizar</button>
                            <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="exemploconcluir" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <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" style="height: 190px;">
                    <div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;"><div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span><div class="swal2-success-ring"></div> <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div><div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div></div>
                        <div class="col-md-12">
               	            <div class="col-md-3"></div>
                                <span class="caption  bold  text-center" style=" font-size: 18px;  color: black;">Chamada Concluida com sucesso</span>
                        </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" data-dismiss="modal">Finalizar</button>
                        <button type="button" class="btn voltar" 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>

<div class="col-md-12">
    <div class="modal fade" id="PausaPendencia" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Pausa Agendada</span>
                    </div>
                </div>

                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12">
               	        <div class="col-md-2"></div>
                            <span class="caption  bold  text-center" style="font-size: 16px; color: black;"> Pausa começará assim que terminar atendimento</span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>


<div class="col-md-12">
    <div class="modal fade" id="modal_em_chamada_error" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px; width: 51%;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Error</span>
                    </div>
                </div>

                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12 text-center">
                      
                            <span class="caption  bold  text-center" style="font-size: 14px; color: black;"> Por favor, termine seu atendimento receptivo, logo após solicite novamente a mudança para realizar chamadas ativas </span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>

<div class="col-md-12">
    <div class="modal fade" id="modal_em_chamada_error_receptivo" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px; width: 51%;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Error</span>
                    </div>
                </div>

                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12 text-center">
                      
                            <span class="caption  bold  text-center" style="font-size: 14px; color: black;"> Por favor, termine seu atendimento ativo, logo após solicite novamente a mudança para receber chamadas </span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>

<div class="col-md-12">
    <div class="modal fade" id="ErroValidacao" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;" id="titulo_error_modal"> Ops! </span>
                    </div>
                </div>

                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12 text-center">
                        <span class="caption bold" style="font-size: 16px; color: black;" id="Mensagem_erro"> </span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>
<!-- modal cpf invalido -->
<div class="col-md-12">
    <div class="modal fade" id="modalcpfinvalido" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;"> Ops! </span>
                    </div>
                </div>

                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12 text-center">
                        <span class="caption bold" style="font-size: 16px; color: black;" id="Mensagem_erro2"> </span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>
<!--  -->
<!-- modal cronometro -->
<div class="col-md-12">
    <div class="modal fade" id="PausaCronometro" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px; width: 50%">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px;  color: white;" id="TipoPausa"></span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 370px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex; margin-top: 70px;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12 text-center" style="font-size: 21px;" id="TempoLimite">Tempo de Pausa</div>
                    <div class="col-md-12 text-center">
                        <span class="caption text-center" style="font-size: 80px; color: black;" id="Tempo"></span>
                    </div>
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal" id="finaliza_pausa">Encerrar Pausa</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>

<!--  -->
<!--  -->
<div class="col-md-12">
    <div class="modal fade " id="Lista_Contato" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px; width: 50%">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px;  color: white;" >Lista de Contatos</span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 370px;">
                    <select class="form-control"  name="modulos[]" size="1" id="lista_contatos">
                                <option value="">Escolher</option>  
                        </select> 
                    
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal" id="contatos_finalizar">Confimar</button>
                        <button type="button" class="btn voltar" data-dismiss="modal" id="contatos_escolha">Voltar</button>
                    </div>
                </div>

               
            </div>
        </div>
    </div>
</div>
<!--  -->
<!-- 
 -->
 <div class="col-md-12">
    <div class="modal fade " id="Lista_Contato_email" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px; width: 50%">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px;  color: white;" >Lista de Contatos</span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 370px;">
                    <select class="form-control"  name="modulos[]" size="1" id="lista_contatos2">
                                <option value="">Escolher</option>  
                        </select> 
                    
                </div>

                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal" id="contatos_finalizar_email">Confimar</button>
                        <button type="button" class="btn voltar" data-dismiss="modal" id="contatos_escolha">Voltar</button>
                    </div>
                </div>

               
            </div>
        </div>
    </div>
</div>
 <!--  -->
<div class="col-md-12">
    <div class="modal fade" id="SairAtendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style="font-size: 22px; color: white;">Sair do Atendimento</span>
                    </div>
                </div>
            
                <div class="modal-body" style="height: 190px;">
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;"><span class="swal2-icon-text">!</span></div>
                    <div class="col-md-12">
                        <div class="col-md-2"></div>
                            <span class="caption  bold  text-center" style="font-size: 16px; color: black;">A saída irá acontecer assim que finalizar os atendimentos!</span>
                    </div>
                </div>
                
                <div class="modal-footer text-center" >
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn blue" data-dismiss="modal">Ok</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>

<div class="col-md-12">
    <div class="modal fade" id="ModalAtendimentoConcluido" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                	<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" style="height: 190px;">
                    <div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;"><div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span><div class="swal2-success-ring"></div> <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div><div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div></div>
                    <div class="col-md-12">
               	        <div class="col-md-3"></div>
                            <span class="caption  bold  text-center" style="font-size: 18px; color: black;">Atendimento concluído com sucesso</span>
                    </div>
                </div>
                
                <div class="modal-footer text-center" >
            	   
                </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>
<div class="col-md-12">
    <div class="modal fade" id="modal_consulta_cpf" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px; color: white;">CPF</span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 190px;">
                   <div class="col-md-12">
                       <span class="bold">CPF: </span><span class="cpf"></span>
                   </div>
                     <div class="col-md-12">
                       <span class="bold">Nome: </span><span class="nome"></span>
                   </div>
                     <div class="col-md-12">
                       <span class="bold">Telefone: </span><span class="telefone"></span>
                   </div>
                     <div class="col-md-12">
                       <span class="bold">Email: </span><span class="email"></span>
                   </div>
                   <div class="col-md-12 text-center">
                    
                                       <h4 style="
    margin-bottom: 10px;
    margin-top: 15px;
">Contato existente.</h4>
<h4>Deseja utilizar os dados deste contato neste atendimento?</h4>
                   </div>
                   </div>
                
                <div class="modal-footer text-center" >
                   <div class="col-md-12">
                       <div class="col-md-4"></div>
                       
                       <div class="col-md-2"><button class="btn btn-success" id="sim_cpf">Sim</button></div>
                       <div class="col-md-2"><button class="btn btn-danger" id="nao_cpf">Não</button></div>
                   </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>

<div class="col-md-12">
    <div class="modal fade " id="ModalLogin" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header " style=" background-color: #2598d8 ">
                	<div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px; color: white;">Atendimento</span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 260px;">
                   <div class="col-md-12 " style="
    padding-top: 50px;
">
                   	<div class="icon text-center">	<i class="icon-login" style="font-size: 80px;color: #797979"></i> </div>
                   	
                   </div>
                    <div class="col-md-12 text-center" style="margin-top: 40px">
               	       
                            <span class="caption    text-center" style="font-size: 18px; color: black;">O que deseja fazer no Sistema de Atendimento ? </span>
                    </div>
                    <div class="col-md-12 text-center" style="margin-top: 25px">
               	       <div class="col-md-2"></div>
                           <div class="col-md-4 text-center" style="
    ">
                           	<button class="btn green " style="width: 100%;" id="iniciar_atendimento"><i class="fa fa-play"></i> <span style="padding-left: 3px"> Ficar Disponível</span></button>
                           </div>
                          <!--  <div class="col-md-4 text-center">
                           		<a  href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"    class="btn  blue" style="width: 100%; color: white;" ><i class="fa fa-pause"></i><span style="padding-left: 6px">Entrar em Pausa</span></a>
 										<ul class="dropdown-menu pull-right" id="pausas_comeco">
                                            
                                            @foreach( $pausas as $pausa )
                                                <li id="{{ $pausa->id }}">
                                                    <a id='iniciar_pausa'><i class='icon-control-pause'></i> {{ $pausa->nome }}</a>
                                                </li>
                                            @endforeach
                                        </ul>

                           		
                           </div> -->
                 
                           <div class="col-md-4 text-center">
                           		<button class="btn red " style="width: 100%;" id="nlogar"><i class="icon-logout"></i><span style="padding-left: 6px">Sair</span></button>
                           </div>
                    </div>
                </div>
                

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


<div class="col-md-12">
    <div class="modal fade" id="Modalencerraratendimento" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#36c6d3 ">
                    <div class="col-md-12 text-center">
                        <span class="caption  bold  text-center" style=" font-size: 22px; color: white;">Saindo da Tela de Atendimento...</span>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 160px;">
                  
                    <div class="col-md-12">
                        <div class="col-md-3"></div>
                           <div class='col-md-12 text-center'><i class='fa fa-spinner fa-spin' style='margin-top: 10%; font-size: 75px; color: #426a9e;'></i></div>
                    </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>
<!-- <h1>{{$logado_init }}5555555555555555</h1> -->
@push('scripts')
<script type="text/javascript">
    ativo_comintegraçao = {!! $ativo_integracao !!};

    logado2 = {!! $logado_init !!};
</script>

<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />

<!-- <script src='{{ asset("global/scripts/app.min.js")}}' type="text/javascript"></script>  -->
<script src="{{ asset('global/plugins/jquery-slimscroll/jquery.slimscroll.min.js')}}"></script>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#init_atendimento").hide();
        
        $('#pesquisar_modulos').multiselect({
            templates: {
                liGroup: '<li class="aaa"><label class="bbb"></label></li>'
            },
            buttonClass: 'btn ',
            selectAllText: 'Selecionar todos',
            allSelectedText: 'Todos selecionados',
            nonSelectedText: 'Nenhuma categoria selecionada',
            numberDisplayed: 10,
            maxHeight: 200,
            buttonWidth: '100%',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            filterPlaceholder: 'Pesquise aqui...',      
            enableCollapsibleOptGroups: true
        });

	 $("#ModalLogin").modal({backdrop: 'static', keyboard: false})
            $("#iniciar_atendimento").click(function(){
            	
              $("#ModalLogin").modal('toggle');
               $("#init_atendimento").show();
            });
            $("#nlogar").click(function(){
            	window.close();
            });
        
            $('#pesquisar_modulos2').multiselect({
                  templates: {
                    liGroup: '<li class="aaa"><label class="bbb"></label></li>'
                },
                buttonClass: 'btn ',
                selectAllText: 'Selecionar todos',
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Nenhuma categoria selecionada',
                numberDisplayed: 10,
                maxHeight: 200,
                buttonWidth: '100%',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                filterPlaceholder: 'Pesquise aqui...',
              
                enableCollapsibleOptGroups: true
            });


            // $('#pesquisa_pendente').multiselect({
            //       templates: {
            //         liGroup: '<li class="aaa"><label class="bbb"></label></li>'
            //     },
            //     buttonClass: 'btn',
            //     selectAllText: 'Selecionar todos',
            //     allSelectedText: 'Todos selecionados',
            //     nonSelectedText: 'Nenhuma categoria selecionada',
            //     numberDisplayed: 10,
            //     maxHeight: 200,
            //     buttonWidth: '100%',
            //     enableFiltering: true,
            //     enableCaseInsensitiveFiltering: true,
            //     filterPlaceholder: 'Pesquise aqui...',
               
            //     enableCollapsibleOptGroups: true
            // });

            // $('#pesquisa_pendente2').multiselect({
            //       templates: {
            //         liGroup: '<li class="aaa"><label class="bbb"></label></li>'
            //     },
            //     buttonClass: 'btn',
            //     selectAllText: 'Selecionar todos',
            //     allSelectedText: 'Todos selecionados',
            //     nonSelectedText: 'Nenhuma categoria selecionada',
            //     numberDisplayed: 10,
            //     maxHeight: 200,
            //     buttonWidth: '100%',
            //     enableFiltering: true,
            //     enableCaseInsensitiveFiltering: true,
            //     filterPlaceholder: 'Pesquise aqui...',
               
            //     enableCollapsibleOptGroups: true
            // });

            $('#assunto').multiselect({
                buttonClass: 'btn ',
                selectAllText: 'Selecionar todos',
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Nenhuma categoria selecionada',
                numberDisplayed: 10,
                maxHeight: 200,
                buttonWidth: '100%',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                filterPlaceholder: 'Pesquise aqui...',
                enableCollapsibleOptGroups: true
            });

            $('#tabulacao_motivo').multiselect({
                buttonClass: 'btn ',
                selectAllText: 'Selecionar todos',
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Nenhuma categoria selecionada',
                numberDisplayed: 10,
                maxHeight: 200,
                buttonWidth: '100%',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                filterPlaceholder: 'Pesquise aqui...',
                enableCollapsibleOptGroups: true
            });

            $('#pesquisa_concluir').multiselect({
                  templates: {
                    liGroup: '<li class="aaa"><label class="bbb"></label></li>'
                },
                buttonClass: 'btn ',
               
                selectAllText: 'Selecionar todos',
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Nenhuma categoria selecionada',
                numberDisplayed: 10,
                maxHeight: 200,
                buttonWidth: '100%',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                filterPlaceholder: 'Pesquise aqui...',
                enableCollapsibleOptGroups: true
            });

            $("#identificacao").multiselect({
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Selecionar',
                maxHeight: 200,
                buttonWidth: '90%',
                numberDisplayed: 10,
                optionClass: function(element) {
                return 'largura_bottao'
                }
            });
            $("#porte").multiselect({
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Selecionar',
                maxHeight: 200,
                buttonWidth: '100%',
                numberDisplayed: 10,

            });
            $("#num_func").multiselect({
                allSelectedText: 'Todos selecionados',
                nonSelectedText: 'Selecionar',
                maxHeight: 300,
                buttonWidth: '95%',
                numberDisplayed: 10,
                optionClass: function(element) {
                return 'largura_bottao'
                }
              
            });
            
            $("#oktransferir").click(function(){
                $("#exemplotransferir").modal('hide');
            });
               
            $("#oktransferir").click(function(){
                $("#exemploconcluir").modal('hide');
            });
            
            $("#oktransferir").click(function(){
                $("#exemploretorno").modal('hide');
            });
    

            //$(".trigger_popup_fricc").click(function(){
               $('.hover_bkgr_fricc').show();
            //});
            //$('.hover_bkgr_fricc').click(function(){
            //    $('.hover_bkgr_fricc').hide();
            //});
            //$('.popupCloseButton').click(function(){
             //   $('.hover_bkgr_fricc').hide();
            //});

            $('.adicionar_manualmente').click(function(){
                $('.hover_bkgr_fricc').hide();
            });

            $('.mt-multiselect.btn.btn-default.mt-noicon').multiselect({
                enableClickableOptGroups: true
            });

$(".chamada_ativa").click(function(){
console.log();
$('input[name=tipo_chamada]').val(1);
console.log($('input[name=tipo_chamada]').val());
$("#icone_canal").attr('class'," icon-call-out");
$("#icone_canal1c i").attr("class","icon-call-in");
$("#telefone i").attr("class",'icon-call-out');
$("#mudatelefone").attr("title",'Ativo');
$("#telefone i").css("color","#2598d8");
$('.status_atual').text("Receptivo");
$("#titulo_canal  i").removeClass("icon-call-in").addClass('icon-call-out');
$("#titulo_canal  i").css("color",'#2598d8')
$("#titulo_bloco_canal").css('color','#2598d8');
$("#titulo_bloco_canal").text("CHAMADAS ATIVAS");
});
$(".chamada_receptiva").click(function(){
	console.log('oi2');
$('input[name=tipo_chamada]').val(2);
console.log($('input[name=tipo_chamada]').val());
$("#icone_canal").attr('class'," icon-call-in");
$("#mudatelefone i").attr("class","icon-call-in");
$("#telefone i").attr("class",'icon-call-in');
$("#icone_canal1c i").attr("class",'icon-call-out');
$("#mudatelefone").attr("title",'Recipitivo');
$("#telefone i").css("color","red");
$('.status_atual').text("Ativo");
$("#titulo_canal  i").removeClass("icon-call-out").addClass('icon-call-in');
$("#titulo_canal  i").css("color",'#E26A6A')
$("#titulo_bloco_canal").css('color','#E26A6A');
$("#titulo_bloco_canal").text("CHAMADAS RECEPTIVAS");
});


    });
</script>

<script src="{{ asset('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>
<!--script src="{{asset('pages/scripts/atendimento/exemplo.js')}}"></script-->
<!-- <script src="{{asset('pages/scripts/atendimento/slick.min.js')}}"></script> -->
<script src="{{asset('pages/scripts/atendimento/abrepopup.js')}}"></script>
<script src="{{asset('pages/scripts/atendimento/muda_status.js')}}"></script>
<!-- <script src="{{asset('pages/scripts/atendimento/carrosel.js')}}"></script> -->
<script src="{{asset('pages/scripts/atendimento/muda2columna.js')}}"></script>
<script src="{{asset('pages/scripts/atendimento/muda3coluna.js')}}"></script>
<script src="{{asset('pages/scripts/atendimento/notificacao.js')}}"></script>
<!-- <script src="{{asset('pages/scripts/atendimento/carrosel2.js')}}"></script> -->
<script src="{{asset('pages/scripts/atendimento/mudalinks3c.js')}}"></script>
<script src="{{asset('pages/scripts/atendimento/mudatopocoluna1.js')}}"></script>
<script src="{{asset('pages/scripts/atendimento/mudamenu1v.js')}}"></script>
<!-- <script src="{{asset('pages/scripts/atendimento/exit.js')}}"></script> -->
<!-- <script src="{{asset('pages/scripts/atendimento/cronometro.js')}}"></script> -->
@if($integracao_telefonia == false ||($integracao_telefonia == false  || $atendente_receptivo == false) && $logado == true)
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="{{ asset('pages/scripts/atendimento/script-managed.js') }}" type="text/javascript"></script>
@if($integracao_telefonia == true)
<script>
    $(document).ready(function(){
     $('.chamada_ativa').click();
    })
</script>
<script type="">
    function redireciona(){
         window.location.href = '{{url("atendimento/integrado/0")}}';
    }

</script>
@else
<script type="">
    function redireciona(){
        
    }

</script>
@endif

@else
<script src="{{ asset('pages/scripts/atendimento/script-managed-integracao.js') }}" type="text/javascript"></script>
@endif

<!-- @if($logado == true)
      <script type="text/javascript">
          
          $(document).ready(function(){
            $("#iniciar_atendimento").click();
            console.log("teste do click 2019");
          })
      </script>  

@endif -->
<script src="{{asset('pages/scripts/atendimento/mudacanal.js')}}"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> -->
<!-- <script src='{{asset("pages/scripts/atendimento/scholl.js")}}' type="text/javascript"></script>-->
<script src='{{asset("pages/scripts/atendimento/jquery.slimscroll.min.js")}}' type="text/javascript"></script>
<script src='{{asset("pages/scripts/atendimento/jquery.mask.js")}}' type="text/javascript"></script>
<script src='{{asset("pages/scripts/atendimento/jquery.mask.min.js")}}' type="text/javascript"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script type="text/javascript">
    ativo_comintegraçao = {!! $ativo_integracao !!};

    // logado2 = {!! $logado_init !!};
    // console.log(logado2 == true)
    // if(logado2 == true){
    //     $("#iniciar_atendimento").click();
    //     logado2 =false;
    // }
</script>

@endpush

    
@endsection
<!--   <div class="transp" align="center" style="/* width: 159px; */ background-color: #6f6f6f">
                            <div class="col-md-12" style="padding-top: -14px;color: black;/* margin-top: 20px; */padding-bottom: 20px;"><i class="fa fa-spinner fa-spin" style="font-size: 50px;color: white;margin-top: 20px;"></i></div>
                            <div class="" style="font-size: 20px;color: white;padding-bottom: 5px;"><i id="icone_canal" class="" style="font-size: 16px;height: 20px;padding-right: 10px;color: white;"></i> <span style="
                            width: -25%; /* font-size: 13px; */ " id="cronometro_osioso"> 00:00:00</span> </div>
                        </div>

                        <div style="height: 5px;"><br></div>
                        <div class="col" style="background-color: #007BBA">
                            <button id="adicionar_manualmente" type="button" class="btn btn-primary col-12 block" style="background-color:#007BBA"> Iniciar Atendimento</button>
                        </div> -->