@extends('layouts.app')

@section('content')
<!-- BEGIN CONTENT -->

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
.tox.tox-silver-sink.tox-tinymce-aux {
    z-index: 9999999;
}
.tox.tox-silver-sink.tox-tinymce-aux *{
    z-index: 9999999;
}
.tox-notifications-container {
    display: none !important;
}
.tox-promotion{
        display: none !important;
    }
</style>

<style type="text/css">
.table-responsive{
  overflow-x: unset;
}

.vl {
    border-left: 1px solid #ddd;
    height: 350px;
}

.estrelas input[type=radio]{
    display: none;
}.estrelas label i.fa:before{
    content: '\f005';
    /*color: #0099D7;*/
    color: #CCC;
}.estrelas  input[type=radio]:checked  ~ label i.fa:before{
    color: #CCC;
}

.checkcontainer {
  /*display: block;*/
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #e2e5ec;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color:#426a9e!important;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  background-color:#426a9e!important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* witch */
.switch_custom {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 22px;
}
.btn-success{
          background:#426a9e!important;
          border:none;

}
.switch_custom input {display:none;}

.slider_custom {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border: 0.5px solid #ebedf2;
}

.slider_custom:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: #426a9e;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider_custom {
  background-color: white;
}

input:empty + .slider_custom:before {
    color: green;
    background-color: #DFE6ED;
}

input:focus + .slider_custom {
  box-shadow: 0 0 1px white;
}

input:checked + .slider_custom:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #426a9e;
}

/* Rounded sliders */
.slider_custom.round {
  border-radius: 30px !important;
}

.slider_custom.round:before {
  border-radius: 50%;
}
.nav.nav-tabs.tabs-left li.active a {
background: none!important;
}
.nav.nav-tabs li.active a{
background: none!important;
}
.nav.nav-tabs.tabs-left li.active a {
    background:#426a9e!important;
    border:1px solid #426a9e;
}
.nav.nav-tabs.tabs-left li.active .dropdown-menu a
{
    background: rgba(0,0,0,0)!important;
    color: #000;
    border: none!important;
}
.nav.nav-tabs li.active a{
  background:#426a9e!important;
    border:1px solid #426a9e;
}
</style>


<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Configurações do Atendimento</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h1 class="page-title nova-faixa"> Configurações do Atendimento
            <div class="pull-right">
                <i class="nova-faixa-icon fa fa-gear" style="padding-right:20px; "></i>
            </div>
        </h1>
        <h4>
            <small class="pull-right">
                <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                    Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                </span>
            </small>
        </h4>
         <!-- END PAGE TITLE-->
        <!-- END PAGE HEADER-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="">                                 
                    <div class="portlet" style="margin-bottom: 0;">
                        <div class="portlet-body form">

                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="portlet box blue">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-cog"></i>Configurar </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div class="row">
                                            <div class="col-md-2 col-sm-3 col-xs-3">
                                              <style type="text/css">
                                              .nav.nav-tabs.tabs-left li.active a {
    background:#426a9e!important;
    border:1px solid #426a9e;
    color: white;
}
.nav.nav-tabs li.active a{
  background:#426a9e!important;
    border:1px solid #426a9e;
        color: white;

}
</style>
                                                <ul class="nav nav-tabs titulo tabs-left" data-options="deep_linking: true" id="myTab">
                                                   <li class="active">
                                                        <a href="#tabulacao_assunto" class="dropdown-toggle" tabindex="-1" data-toggle="tab" aria-expanded="false"> Tabulações
                                                            <!-- <i class="fa fa-angle-down"></i> -->
                                                        </a>
                                                        <!--<ul class="dropdown-menu" role="menu">
                                                            <li>
                                                                <a href="#tabulacao_assunto" tabindex="-1" data-toggle="tab"> Motivo </a>
                                                            </li>
                                                            <li>
                                                                <a href="#tabulacao_motivo" tabindex="-1" data-toggle="tab"> Assunto </a>
                                                            </li>
                                                            <li>
                                                                <a href="#tabulacao_concluir" tabindex="-1" data-toggle="tab"> Concluir </a>
                                                            </li>
                                                             <li>
                                                                <a href="#tabulacao_transferir" tabindex="-1" data-toggle="tab"> Transferir </a>
                                                            </li>
                                                            <li>
                                                                <a href="#tabulacao_pendencia" tabindex="-1" data-toggle="tab"> Pendência </a>
                                                            </li> 
                                                        </ul> -->
                                                    </li>
                                                    
                                                    <li>
                                                        <a href="#configuracao_campos" data-toggle="tab" aria-expanded="false"> 
                                                        Permissões Campos de Preenchimento </a>
                                                    </li>

                                                    <li>
                                                        <a href="#roteiro" data-toggle="tab" aria-expanded="false"> Roteiros </a>
                                                    </li>
                                                    
                                                    <li>
                                                        <a href="#pausa" data-toggle="tab" aria-expanded="false"> Pausas </a>
                                                    </li>

                                                    <li class="" id="primeira_tab">
                                                        <a href="#canais_de_atendimento" data-toggle="tab" aria-expanded="true"> Canais de Atendimento </a>
                                                    </li>

                                                    <li class="">
                                                        <a href="#filas_de_atendimento" data-toggle="tab" aria-expanded="false"> Filas de Atendimento </a>
                                                    </li>

                                                    <li class="">
                                                      <a href="#gestao_templates" data-toggle="tab" aria-expanded="false"> Gestão de Templates </a>
                                                    </li>

                                                       <li class="">
                                                        <a href="#templates_omnimeta" data-toggle="tab" aria-expanded="false"> Templates OmniMeta </a>
                                                      </li>

                                                    <li class="dropdown">
                                                      <a id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        BackOffice
                                                        <span class="caret"></span>
                                                      </a>
                                                      <ul class="dropdown-menu" aria-labelledby="dpd_backoffice">
                                                        <li>
                                                          <a href="#tabulacao_backoffice" data-toggle="tab" aria-expanded="false"> 
                                                            Tabulações
                                                          </a>
                                                        </li>                                                        
                                                      </ul>
                                                    </li>
                                                    
                                                    <li class="">
                                                        <a href="#horarios_de_atendimento" data-toggle="tab" aria-expanded="false"> Horário de Atendimento </a>
                                                    </li> 

                                                    {{-- <li class="dropdown">  
                                                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Atendente  
                                                        <i class="fa fa-angle-down"></i></a>  
                                                        <ul class="dropdown-menu" role="menu">  
                                                            <li>  
                                                                <a href="#tabulacao_encarregar_grupo" tabindex="-1" data-toggle="tab"> Vincular a Fila </a> 
                                                            </li> 
                                                        </ul> 
                                                    </li> --}}

                                                    <li>
                                                      <a a href="#tabulacao_encarregar_grupo" tabindex="-1" data-toggle="tab">
                                                        Vincular Atendente À Fila
                                                      </a>
                                                    </li>

                                                    <!-- notificações -->
                                                    @if($backoffice == 1 || $backoffice_externo == 1)
                                                    <li class="dropdown">

                                                      <a id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Notificações
                                                        <span class="caret"></span>
                                                      </a>
                                                      <!-- itens -->
                                                      <ul class="dropdown-menu" aria-labelledby="dpd_notificações">
                                                        <!-- validação externa -->
                                                        <li>
                                                          <a href="#notificacao_backoffice" data-toggle="tab" aria-expanded="false"> 
                                                            BackOffice
                                                          </a>
                                                        </li>
                                                        <li>
                                                          <a href="#disparo_email" data-toggle="tab" aria-expanded="false"> 
                                                            Disparo de E-mail
                                                          </a>
                                                        </li>                                                        
                                                      </ul>
                                                    </li>
                                                    @endif

                                                    <li>
                                                        <a href="#carteira" data-toggle="tab" aria-expanded="false"> Carteira </a>
                                                    </li>

                                                    <!-- Integrações -->
                                                    <li class="dropdown">
                                                      <a id="dpd_interacoes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Integrações
                                                        <span class="caret"></span>
                                                      </a>
                                                      <!-- itens -->
                                                      <ul class="dropdown-menu" aria-labelledby="dpd_interacoes">
                                                        <!-- validação externa -->
                                                        <li>
                                                          <a href="#validacao_externa" data-toggle="tab" aria-expanded="false"> 
                                                            Validação Externa
                                                          </a>
                                                        </li>                                                        
                                                        <!-- busca contato -->
                                                        @if(\Auth()->user()->isAClientCnpjUser())
                                                        <li>
                                                            <a href="#buscacontato" data-toggle="tab" aria-expanded="false"> 
                                                              Busca contato 
                                                            </a>
                                                        </li>
                                                        @endif                                                       
                                                        <!-- WebHook -->
                                                        <li>
                                                          <a href="#webhook" data-toggle="tab" aria-expanded="false"> 
                                                            WebHook
                                                          </a>
                                                        </li>
                                                        <!-- Integracao API Externa -->
                                                        <li>
                                                          <a href="#integracao_api_externa" data-toggle="tab" aria-expanded="false"> 
                                                            API Externa
                                                          </a>
                                                        </li>                                                        
                                                      </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#complexidade_senha" data-toggle="tab" aria-expanded="false"> Complexidade de Senha </a>
                                                    </li>
                                                    <!--  <li class="">
                                                        <a href="#filas_de_atendimento" data-toggle="tab" aria-expanded="false"> Filas de Atendimento </a>
                                                    </li> -->
                                                       <!-- <li>
                                                        <a href="#whatsapp" data-toggle="tab" aria-expanded="false"> 
                                                        WhatsApp </a>
                                                    </li> -->
                                             
                                                   
                                                    <!-- <li>
                                                        <a href="#conf_ids" data-toggle="tab" aria-expanded="false"> ID </a>
                                                    </li> -->
                                                    <!-- <li>
                                                        <a href="#envio_de_protocolo" data-toggle="tab" aria-expanded="false"> Envio de Protocolo </a>
                                                    </li> -->


                                                    
                                          <!--           <li class="dropdown">
                                                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">  Atendente
                                                         <i class="fa fa-angle-down"></i></a>
                                                         <ul class="dropdown-menu" role="menu">
                                                            <li>
                                                                <a href="#tabulacao_encarregar_grupo" tabindex="-1" data-toggle="tab"> Vincular a Fila </a>
                                                            </li>
                                                            <li>
                                                                <a href="#prioridade_de_atendente" tabindex="-1" data-toggle="tab"> Prioridade do Atendente </a>
                                                            </li>
                                                            <li>
                                                                <a href="#atendente_permissao_transferir_pessoa" tabindex="-1" data-toggle="tab"> Permissão de Transferência </a>
                                                            </li>
                                                            <li>
                                                                <a href="#permissao_pendencia_pessoa" tabindex="-1" data-toggle="tab"> Permisssão de Pendência </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    -->
                                                  
                                                    
                                                    <!-- <li>
                                                        <a href="#roteiro" data-toggle="tab" aria-expanded="false"> Roteiro </a>
                                                    </li> -->
                                                    <!-- <li>
                                                        <a href="#validacao_externa" data-toggle="tab" aria-expanded="false"> Validação Externa </a>
                                                    </li> -->
                                                </ul>
                                            </div>
                                            <div class="col-md-10 col-sm-9 col-xs-9">
                                                <div class="tab-content">

                                                  

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            
 






<div class="modal fade" id="cadastrar_roteiro" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3598dc;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Cadastrar Roteiro</h4>
            </div>
            
            <div class="modal-body" style="height: 450px;">
                <label class="col-md-2">Tema</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <input type="text" class="form-control" name="tema_roteiro" placeholder="Digitar">
                </div>

                <label class="col-md-2">Roteiro</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <textarea class="form-control" rows="3" placeholder="Digitar"></textarea>
                </div>

                <label class="col-md-2">Canais Vinculados</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
         
                    <select  id="multi_select_canais" multiple="multiple">
                        <option>Whatsapp</option>
                        <option>Instagram</option>
                        <option>Telefone</option>
                        <option>Messenger</option>
                        <option>Chat</option>
                        <option>Telegram</option>
                    </select>
                </div>

                <label class="col-md-2">Categoria</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
         
                    <select class="form-control" id="exampleFormControlSelect1_roteiro">
                        <option>Sobre a Loja</option>
                        <option>Cancelamento</option>
                        <option>Devolução</option>
                        <option>SAC</option>
                        <option value='outros'>Outro / Criar Nova</option>
                    </select>
                </div>

                <div id="Categoria_roteiro">
                    <label class="col-md-2">Nova Categoria</label>
                    <div class="col-md-9" style="margin-bottom: 25px;">
                        <input type="text" class="form-control" id="exampleFodrmControlInput1" placeholder="Digitar">
                    </div>
                </div>

                <label class="col-md-2">Subcategoria</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
         
                    <select class="form-control" id="exampleFormControlSelect1_subroteiro">
                        <option>Informações da Loja</option>
                        <option value='outros'>Outro / Criar Nova</option>
                    </select>
                </div>

                <div id="Categoria_subroteiro">
                    <label class="col-md-2">Nova Subcategoria</label>
                    <div class="col-md-9" style="margin-bottom: 25px;">
                        <input type="te" class="form-control" id="exampleFormControlInput10" placeholder="Digitar">
                    </div>
                </div>
              
            </div>

            <div class="modal-footer">
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn btn-success">Salvar</button>
                        <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- encarregar -->
<div class="modal fade" id="cadastrar_roteiro" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3598dc;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Cadastrar Roteiro</h4>
            </div>
            
            <div class="modal-body" style="height: 450px;">
  
                <label class="col-md-2">Tema</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <input type="email" class="form-control" id="exampleFormControlInsput1" placeholder="Digitar">
                </div>

                <label class="col-md-2">Roteiro</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <textarea class="form-control" rows="3" placeholder="Digitar"></textarea>
                </div>
     <label class="col-md-2">Canais Vinculados</label><div class="col-md-9" style="
    margin-bottom: 25px;
">
         
    <select  id="multi_select_canais" multiple="multiple">
      <option>Whatsapp</option>
      <option>Instagram</option>
      <option>Telefone</option>
      <option>Messenger</option>
      <option>Chat</option>
      <option>Telegram</option>
    </select>
     </div>

     
       <label class="col-md-2">Categoria</label><div class="col-md-9" style="
    margin-bottom: 25px;
">
         
         <select class="form-control" id="exampleFormControlSelect1_roteiro">
      <option>Sobre a Loja</option>
      <option>Cancelamento</option>
      <option>Devolução</option>
      <option>SAC</option>
      <option value='outros'>Outro / Criar Nova</option>
    </select>
     </div>
         <div id="Categoria_roteiro">
         <label class="col-md-2">Nova Categoria</label><div class="col-md-9" style="
    margin-bottom: 25px;
">  <input type="email" class="form-control" id="exampleFormControlIndsput1" placeholder="Digitar"></div>

     </div>
        <label class="col-md-2">Subcategoria</label><div class="col-md-9" style="
    margin-bottom: 25px;
">
         
         <select class="form-control" id="exampleFormControlSelect1_subroteiro">
      <option>Informações da Loja</option>
 
      <option value='outros'>Outro / Criar Nova</option>
    </select>
     </div>
         <div id="Categoria_subroteiro">
         <label class="col-md-2">Nova Subcategoria</label><div class="col-md-9" style="
    margin-bottom: 25px;
">  <input type="email" class="form-control" id="exampleFormContrfolInput1" placeholder="Digitar"></div>

     </div>
              
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>



<div class="modal fade" id="cadastrar_transferir" role="dialog">
    <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3598dc;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Cadastrar Tabulação: Transferir Atendimento</h4>
            </div>
            <div class="modal-body" style="height: 190px;">
  
                <label class="col-md-2">Razão</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <input type="text" class="form-control" id="exampleFormControlInput100" placeholder="Digitar">
                </div>
                
                <label class="col-md-2">Categoria</label>
                <div class="col-md-9" style=" margin-bottom: 25px;">
                    <select class="form-control" id="exampleFormControlSelect1_transferir">
                        <option value=''>Telefonia</option>
                        <option value='outros'>Outros / Nova Categoria</option>
                    </select>
                </div>
     
                <div id="Categoria_tranferir">
                    <label class="col-md-2">Nova Categoria</label>
                    <div class="col-md-9" style="margin-bottom: 25px;">
                        <input type="text" class="form-control" id="exampleFormControlInput101" placeholder="Digitar">
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn btn-success">Salvar</button>
                        <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
                    </div>
                </div>
            </div>
        </div>      
    </div>
</div>

<div class="modal fade" id="cadastrar_pedencia" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3598dc;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Cadastrar Tabulação: Pendência Atendimento</h4>
            </div>
            
            <div class="modal-body" style="height: 190px;">
                <label class="col-md-2">Razão</label>
                <div class="col-md-9" style="margin-bottom: 25px;">
                    <input type="text" class="form-control" id="exampleFormControlInput19" placeholder="Digitar">
                </div>
                
                <label class="col-md-2">Categoria</label>
                <div class="col-md-9" style=" margin-bottom: 25px;">
         
                    <select class="form-control" id="exampleFormControlSelect1_pendente">
                        <option>Telefonia</option>
                        <option value="outros">Outros / Criar Nova</option>
                    </select>
                </div>
        
                <div id="Categoria_pendente">
                    <label class="col-md-2">Nova Categoria</label>
                    <div class="col-md-9" style="margin-bottom: 25px;">
                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Digitar">
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn btn-success">Salvar</button>
                        <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
                    </div>
                </div>
            </div>
        </div>      
    </div>
</div>





<div class="modal fade" id="editar_pendencia_pessoa" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #3598dc;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Editar Permissão  de Pendência</h4>
        </div>
       <div class="modal-body" style="
    height: 190px;
">
  <div class="col-md-2"></div>
  <div class="col-md-10">
            <label class="col-md-9 text-center">Permitir Atendente ou Grupo</label><div class="col-md-9" style="
    margin-bottom: 25px;">
  <select class="form-control" id="permissao_pendencia_pessoa_modal"  name="modulos[]" size="1">
                                                                  
                                                                    <optgroup label="Grupo">
                                                                      <option value="">Financeiro</option>

                                                                    <option value="">SAC</option>
                                                                    <option value="">Tecnico</option>

                                                                    </optgroup>
                                                                    <optgroup label="Atendente">
                                                                      <option value="">Flacio Lucio</option>

                                                                    <option value="">Luiz</option>
                                                                    <option value="">Alex</option>    
                                                                    </optgroup>
                                                                    

                                                                </select>


</div>
         <label class="col-md-9 text-center">Transferir para Fila e/ou atendentes</label><div class="col-md-9" style=" margin-bottom: 25px;">
         
         <select class="form-control"  id="multiselect_pendencia_pessoa" multiple="multiple">
     <optgroup label="Whatsapp">
                                                                     

                                                                    <option value="2">Venda </option>
                                                                    <option value="3">Financeiro</option>
                                                                    <option value="4">SAC</option>     
                                                                    <option value="5">Tecnico</option>     
                                                                    <option value="6">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Telefone">
                                                                      <option value="11">Venda</option>

                                                                    <option value="22">Financeiro</option>
                                                                    <option value="33">Financeiro</option>
                                                                    <option value='44'>SAC</option>     
                                                                    <option value="55">Tecnico</option>     
                                                                    <option value="66">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Messenger">
                                                                      <option value="">Venda</option>

                                                                    <option value="77">Financeiro</option>
                                                                    <option value="88">SAC</option>
                                                                    <option value="99">Tecnico</option>     
                                                                    <option value="00">Duvida</option>     
                                                           
                                                                    </optgroup>
      
    </select>
     </div>
    </div>
              
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>
  <!--  -->
  <div class="modal fade" id="editar_pendencia_grupo" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #3598dc;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Editar Permissão  de Pendência</h4>
        </div>
       <div class="modal-body" style="
    height: 190px;
">
  <div class="col-md-2"></div>
  <div class="col-md-10">
            <label class="col-md-9 text-center">Permitir Atendente ou Grupo</label><div class="col-md-9" style="
    margin-bottom: 25px;">
  <select class="form-control" id="permissao_pendencia_grupo_select"  name="modulos[]" size="1">
                                                                  
                                                                    <optgroup label="Grupo">
                                                                      <option value="">Financeiro</option>

                                                                    <option value="">SAC</option>
                                                                    <option value="">Tecnico</option>

                                                                    </optgroup>
                                                                    <optgroup label="Atendente">
                                                                      <option value="">Flacio Lucio</option>

                                                                    <option value="">Luiz</option>
                                                                    <option value="">Alex</option>    
                                                                    </optgroup>
                                                                    

                                                                </select>


</div>
         <label class="col-md-9 text-center">Transferir para Fila e/ou atendentes</label><div class="col-md-9" style=" margin-bottom: 25px;">
         
         <select class="form-control"  id="multiselect_pendencia_grupo" multiple="multiple">
     <optgroup label="Whatsapp">
                                                                     

                                                                    <option value="2">Venda </option>
                                                                    <option value="3">Financeiro</option>
                                                                    <option value="4">SAC</option>     
                                                                    <option value="5">Tecnico</option>     
                                                                    <option value="6">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Telefone">
                                                                      <option value="11">Venda</option>

                                                                    <option value="22">Financeiro</option>
                                                                    <option value="33">Financeiro</option>
                                                                    <option value='44'>SAC</option>     
                                                                    <option value="55">Tecnico</option>     
                                                                    <option value="66">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Messenger">
                                                                      <option value="">Venda</option>

                                                                    <option value="77">Financeiro</option>
                                                                    <option value="88">SAC</option>
                                                                    <option value="99">Tecnico</option>     
                                                                    <option value="00">Duvida</option>     
                                                           
                                                                    </optgroup>
      
    </select>
     </div>
    </div>
              
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>
<!--  -->


  <!--  -->
<div class="modal fade" id="cadastrar_permissao_transferencia" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #3598dc;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Editar Permissão de Transferência</h4>
        </div>
       <div class="modal-body" style="
    height: 190px;
">
<div class="col-md-2"></div>
  <div class="col-md-10">
            <label class="col-md-9 text-center">Permitir Atendente ou Grupo</label><div class="col-md-9" style="
    margin-bottom: 25px;">
  <select class="form-control" id="permissao_tranferir_pessoa"  name="modulos[]" size="1">
                                                                  
                                                                    <optgroup label="Grupo">
                                                                      <option value="">Financeiro</option>

                                                                    <option value="">SAC</option>
                                                                    <option value="">Tecnico</option>

                                                                    </optgroup>
                                                                    <optgroup label="Atendente">
                                                                      <option value="">Flacio Lucio</option>

                                                                    <option value="">Luiz</option>
                                                                    <option value="">Alex</option>    
                                                                    </optgroup>
                                                                    

                                                                </select>


</div>
         <label class="col-md-9 text-center">Transferir para Fila e/ou atendentes</label><div class="col-md-9" style=" margin-bottom: 25px;">
         
         <select class="form-control"  id="multiselect_trasferir_pessoa" multiple="multiple">
     <optgroup label="Whatsapp">
                                                                     

                                                                    <option value="2">Venda </option>
                                                                    <option value="3">Financeiro</option>
                                                                    <option value="4">SAC</option>     
                                                                    <option value="5">Tecnico</option>     
                                                                    <option value="6">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Telefone">
                                                                      <option value="11">Venda</option>

                                                                    <option value="22">Financeiro</option>
                                                                    <option value="33">Financeiro</option>
                                                                    <option value='44'>SAC</option>     
                                                                    <option value="55">Tecnico</option>     
                                                                    <option value="66">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Messenger">
                                                                      <option value="">Venda</option>

                                                                    <option value="77">Financeiro</option>
                                                                    <option value="88">SAC</option>
                                                                    <option value="99">Tecnico</option>     
                                                                    <option value="00">Duvida</option>     
                                                           
                                                                    </optgroup>
      
    </select>
     </div>
    
             </div> 
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>


<!--  -->
<div class="modal fade" id="editar_transferencia_permissao" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #3598dc;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Editar Permissão de Transferência</h4>
        </div>
       <div class="modal-body" style="
    height: 190px;
">
  <div class="col-md-2"></div>
  <div class="col-md-10">
            <label class="col-md-9 text-center">Permitir Atendente ou Grupo</label><div class="col-md-9" style="
    margin-bottom: 25px;">
  <select class="form-control" id="permissao_tranferir_grupo"  name="modulos[]" size="1">
                                                                  
                                                                    <optgroup label="Grupo">
                                                                      <option value="">Financeiro</option>

                                                                    <option value="">SAC</option>
                                                                    <option value="">Tecnico</option>

                                                                    </optgroup>
                                                                    <optgroup label="Atendente">
                                                                      <option value="">Flacio Lucio</option>

                                                                    <option value="">Luiz</option>
                                                                    <option value="">Alex</option>    
                                                                    </optgroup>
                                                                    

                                                                </select>


</div>
         <label class="col-md-9 text-center">Transferir para Fila e/ou atendentes</label><div class="col-md-9" style=" margin-bottom: 25px;">
         
         <select class="form-control"  id="multiselect_trasferir_grupo" multiple="multiple">
     <optgroup label="Whatsapp">
                                                                     

                                                                    <option value="2">Venda </option>
                                                                    <option value="3">Financeiro</option>
                                                                    <option value="4">SAC</option>     
                                                                    <option value="5">Tecnico</option>     
                                                                    <option value="6">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Telefone">
                                                                      <option value="11">Venda</option>

                                                                    <option value="22">Financeiro</option>
                                                                    <option value="33">Financeiro</option>
                                                                    <option value='44'>SAC</option>     
                                                                    <option value="55">Tecnico</option>     
                                                                    <option value="66">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Messenger">
                                                                      <option value="">Venda</option>

                                                                    <option value="77">Financeiro</option>
                                                                    <option value="88">SAC</option>
                                                                    <option value="99">Tecnico</option>     
                                                                    <option value="00">Duvida</option>     
                                                           
                                                                    </optgroup>
      
    </select>
     </div>
    
             </div> 
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>

<!--  -->
<div class="modal fade" id="cadastrar_encarregar" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #3598dc;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title bold" style="color: white;"><i class="fa fa-cog" style="margin-right: 4px;"></i>Editar Encarregar Atendente</h4>
        </div>
       <div class="modal-body" style="
    height: 190px;
">
  
            <label class="col-md-2">Atendente e Grupo</label><div class="col-md-9" style="
    margin-bottom: 25px;">
  <select class="form-control" id="encarregar_atendente_pessoa"  name="modulos[]" size="1">
                                                                  
                                                                    <optgroup label="Grupo">
                                                                      <option value="">Financeiro</option>

                                                                    <option value="">SAC</option>
                                                                    <option value="">Tecnico</option>

                                                                    </optgroup>
                                                                    <optgroup label="Atendente">
                                                                      <option value="">Flacio Lucio</option>

                                                                    <option value="">Luiz</option>
                                                                    <option value="">Alex</option>    
                                                                    </optgroup>
                                                                    

                                                                </select>


</div>
         <label class="col-md-2">Canal e Fila</label><div class="col-md-9" style=" margin-bottom: 25px;">
         
         <select class="form-control"  id="multiselect_encarregar" multiple="multiple">
     <optgroup label="Whatsapp">
                                                                     

                                                                    <option value="2">Venda </option>
                                                                    <option value="3">Financeiro</option>
                                                                    <option value="4">SAC</option>     
                                                                    <option value="5">Tecnico</option>     
                                                                    <option value="6">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Telefone">
                                                                      <option value="11">Venda</option>

                                                                    <option value="22">Financeiro</option>
                                                                    <option value="33">Financeiro</option>
                                                                    <option value='44'>SAC</option>     
                                                                    <option value="55">Tecnico</option>     
                                                                    <option value="66">Duvida</option>     
                                                                    </optgroup>
                                                                    <optgroup label="Messenger">
                                                                      <option value="">Venda</option>

                                                                    <option value="77">Financeiro</option>
                                                                    <option value="88">SAC</option>
                                                                    <option value="99">Tecnico</option>     
                                                                    <option value="00">Duvida</option>     
                                                           
                                                                    </optgroup>
      
    </select>
     </div>
    
              
        </div>
        <div class="modal-footer">
            <div class="col-md-12">
                <div class="col-md-4"></div>
                <div class="col-md-4">
          <button type="button" class="btn btn btn-success" data-dismiss="modal">Salvar</button>
          <button type="button" class="btn red" data-dismiss="modal">Voltar</button>
      </div>
  </div>
        </div>
      </div>
      
    </div>
  </div>
            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->


<link href="{{asset('pages/css/select-bootstrap/bootstrap-select.css')}}" rel="stylesheet" type="text/css">
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@push('scripts')

<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>

<script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->


<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('pages/scripts/configuracao_atendimento/carrega_pagina.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/configuracao_atendimento/request.js') }}" type="text/javascript"></script>

<!-- END PAGE LEVEL SCRIPTS -->



<!-- <script type="text/javascript">
$(document).ready(function(){
$("#Categoria_tranferir").hide();
$("#Categoria_concluir").hide();
$("#Categoria_pendente").hide();
$("#Categoria_roteiro").hide();
$("#Categoria_subroteiro").hide();
$("#exampleFormControlSelect1_transferir").change(function(){
    if(!this.value ) {
$("#Categoria_tranferir").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_tranferir").show();
  }else{
    $("#Categoria_tranferir").hide();
  }
});
$("#exampleFormControlSelect1_concluir").change(function(){
    if(!this.value ) {
$("#Categoria_concluir").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_concluir").show();
  }else{
    $("#Categoria_concluir").hide();
  }
});
$("#exampleFormControlSelect1_pendente").change(function(){
    if(!this.value ) {
$("#Categoria_pendente").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_pendente").show();
  }else{
    $("#Categoria_pendente").hide();
  }
});
$("#exampleFormControlSelect1_concluir").change(function(){
    if(!this.value ) {
$("#Categoria_concluir").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_concluir").show();
  }else{
    $("#Categoria_concluir").hide();
  }
});
$("#exampleFormControlSelect1_roteiro").change(function(){
    if(!this.value ) {
$("#Categoria_roteiro").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_roteiro").show();
  }else{
    $("#Categoria_roteiro").hide();
  }
});
$("#exampleFormControlSelect1_subroteiro").change(function(){
    if(!this.value ) {
$("#Categoria_subroteiro").hide();
  }
  if (this.value == 'outros' ){
    $("#Categoria_subroteiro").show();
  }else{
    $("#Categoria_subroteiro").hide();
  }
});
       });

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

});

//###################################################################################

// $('#myTab a').click(function (e) {
//     e.preventDefault();
//     $(this).tab('show');
// });

// $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
//     var id = $(e.target).attr("href");
//     localStorage.setItem('selectedTab', id)
// });

// var selectedTab = localStorage.getItem('selectedTab');
// if (selectedTab != null) {
//     $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
// }



// $(window).on('popstate', function() {

//     var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

//     $('a[href=' + anchor + ']').tab('show');
// });

//###################################################################################


$(document).ready(function(){



$("#permissao_tranferir_pessoa").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
maxHeight: 200,
buttonWidth: '100%',
numberDisplayed: 10,
});
$("#permissao_tranferir_grupo").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
maxHeight: 200,
buttonWidth: '100%',
numberDisplayed: 10,
});

$("#permissao_pendencia_pessoa_select").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
maxHeight: 200,
buttonWidth: '100%',
numberDisplayed: 10,
});
$("#permissao_pendencia_pessoa_modal").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
maxHeight: 200,
buttonWidth: '100%',
numberDisplayed: 10,
});
$("#permissao_pendencia_grupo_select").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
maxHeight: 200,
buttonWidth: '100%',
numberDisplayed: 10,
});


$("#multi_select_canais").multiselect({
allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
numberDisplayed: 10,
selectAllText: 'Selecionar Todos',
includeSelectAllOption: true,
});




$("#multiselect_trasferir_pessoa").multiselect({
 enableClickableOptGroups: true,
 allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
numberDisplayed: 10,
maxHeight: 200,
buttonWidth: '100%',
enableCaseInsensitiveFiltering: true,
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true,
  
});
$("#multiselect_trasferir_grupo").multiselect({
 enableClickableOptGroups: true,
 allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
numberDisplayed: 10,
maxHeight: 200,
buttonWidth: '100%',
enableCaseInsensitiveFiltering: true,
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true,
  
});
$("#multiselect_pendencia_grupo").multiselect({
 enableClickableOptGroups: true,
 allSelectedText: 'Todos selecionados',
nonSelectedText: 'Selecionar',
numberDisplayed: 10,
maxHeight: 200,
buttonWidth: '100%',
enableCaseInsensitiveFiltering: true,
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true,
  
});

    $("#multiselect_pendencia_pessoa").multiselect({
        enableClickableOptGroups: true,
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Selecionar',
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true,
        enableCollapsibleOptGroups: true,
        collapseOptGroupsByDefault: true,  
    });

});
scri

</script> -->
<script type="text/javascript">
  $(document).ready(function(){
     $("a[href='#tabulacao_assunto']").click();
  })
     
</script>
@endpush