@extends('layouts.filas.app')
@section('content')
<div class="wrapper">
    {{-- Header --}}
    <div class="page-head">
        <h1>Gerenciamento de filas</h1>
    </div>
    {{-- Conteudo --}}
    <div class="content">
        <div id="row" class="row">  
            {{-- PRIMEIRA COLUNA --}}
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
                <div class="content-div bg-white p-15 list-contacts">
                    {{-- HEADER COLUNA --}}
                    <div class="head-contacts">
                        <div class="caption text-center"> 
                            <span class="bold title">CONTATOS</span>
                            <a id="sortQueueBy" onclick="sortQueueBy(false)" data-sortby="asc">⇈</a>
                        </div>
                        <hr class="divider">
                        <div class="search-content">
                            <input type="text" oninput="searchInQueue()" id="searchInQueue" class="search" placeholder="Pesquise por contato, telefone ou email">
                            <span class="clearInput" id="clearInput" style="display:none" onclick="clearInput()">X</span>
                            <button class="search"><i class="icon-magnifier"></i></button>
                        </div>  
                    </div>
                    {{-- LISTAGEM COLUNA --}}
                    <div class="content-contacts">
                      <div id="contacts_ske" class="mt-10">
                            <div class="skeleton">
                                <div class="skeleton__image"></div>
                                <div class="skeleton__text-container">
                                    <div class="skeleton__title"></div>
                                    <div class="skeleton__text"></div>
                                </div>  
                            </div>
                                <div class="skeleton">
                                <div class="skeleton__image"></div>
                                <div class="skeleton__text-container">
                                    <div class="skeleton__title"></div>
                                    <div class="skeleton__text"></div>
                                </div>  
                            </div>
                                <div class="skeleton">
                                <div class="skeleton__image"></div>
                                <div class="skeleton__text-container">
                                    <div class="skeleton__title"></div>
                                    <div class="skeleton__text"></div>
                                </div>  
                            </div>
                                <div class="skeleton">
                                <div class="skeleton__image"></div>
                                <div class="skeleton__text-container">
                                    <div class="skeleton__title"></div>
                                    <div class="skeleton__text"></div>
                                </div>  
                            </div>
                                <div class="skeleton">
                                <div class="skeleton__image"></div>
                                <div class="skeleton__text-container">
                                    <div class="skeleton__title"></div>
                                    <div class="skeleton__text"></div>
                                </div>  
                            </div>
                        </div>
                        <div class="search-results" id="search-results">
                          
                        </div>
                    </div>
                </div>
            </div>
            {{-- SEGUNDA COLUNA --}}
            <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7  coluna-cemail">
                <div class="col-lg-12" id="content_ske" style="display: none">
                    {{-- inputs para transferencia --}}
                        <input id="info_transfer_id_atendimento" type="hidden">
                        <input id="info_transfer_telefone" type="hidden">
                        <input id="info_transfer_protocolo_final" type="hidden">
                        <input id="info_transfer_email_uid" type="hidden">
                        <input id="info_transfer_canal_id" type="hidden">
                        <input id="info_transfer_id_chamada" type="hidden">
                        <input id="info_filter_low_active" type="hidden">
                        <input id="info_transfer_id_ativo" type="hidden">                        <input id="info_transfer_id_ativo" type="hidden">
                        <input id="priorizarInputval" type="hidden">

                        
                    {{-- inputs para transferencia --}}
                    <div class="coSkeleton-content">
                        <div class="coSkeleton__text-container-inline">
                            <div class="coSkeleton__image"></div>
                            <div class="coSkeleton__text ww50"></div>
                            <div class="coSkeleton__text ww50"></div>
                        </div>
                    </div>
                    <div class="coSkeleton-content">
                        <div class="coSkeleton__text-container-inline">
                            <div class="coSkeleton__text ww75"></div>
                            <div class="coSkeleton__text ww25"></div>
                        </div>
                    </div>
                    <div class="coSkeleton-content">
                        <div class="coSkeleton__text-container-inline">
                            <div class="coSkeleton__text ww50"></div>
                            <div class="coSkeleton__text ww50"></div>
                        </div>
                        <div class="coSkeleton__text-container-inline">
                            <div class="coSkeleton__text ww50"></div>
                            <div class="coSkeleton__text ww50"></div>
                        </div>
                        <div class="coSkeleton__text-container-inline">
                            <div class="coSkeleton__text ww50"></div>
                            <div class="coSkeleton__text ww50"></div>
                        </div>
                    </div>
                </div>
                    <form class="horizontal-form p-15 init-blur" method="post" id="contacts_content_ske" >
                        {{-- SOBREPOSIÇÃO --
                        <div class="overflow">
                            <div class="box-alert">
                                
                            </div>
                        </div>
                        {{-- HEADER --}}
                        <div class="portlet light m-0">
                            <div class="row">
                                <div class="col-lg-12 header-info">
                                    {{-- LOGO HEADER --}}
                                    <div class="logo-content" id="titulo_canal">
                                        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11 p-0">
                                            <span class="bold titulo_bloco_canal" id="logo_atender">
                                                <img width="150"
                                                    src="{{asset('/pages/img/gestao/logo-site-area-cliente.png')}}"
                                                    class="custom-logo" alt="Elev Tecnologia" />
                                            </span>
                                            <div class="titulo_bloco_canal" id="chamada_email">
                                                <div class="" id="titulo_canal" style="color: #e26a6a; display: flex; flex-direction: row; align-items: center; gap: 10px;">
                                                    <i class="fa fa-envelope-o" style="color: red;font-size: 18px" aria-hidden="true"></i> 
                                                    <span style="color: red;" class="bold" id="titulo_bloco_canal">E-mail</span>
                                                </div>
                                            </div>
                                            <div class="titulo_bloco_canal" id="chamada_whatsapp">
                                                <div class="" id="titulo_canal" style="color: #e26a6a; display: flex; flex-direction: row; align-items: center; gap: 10px;">
                                                    <i class="fa fa-whatsapp" style="color: green;font-size: 18px" aria-hidden="true"></i> 
                                                    <span style="color: green;" class="bold" id="titulo_bloco_canal">WhatsApp</span>
                                                </div>
                                            </div>
                                            <div class="titulo_bloco_canal" id="chamada_instagram">
                                                <div class="" id="titulo_canal" style="color: #e26a6a; display: flex; flex-direction: row; align-items: center; gap: 10px;">
                                                    <i class="fa fa-instagram" style="color: #d321ba;font-size: 18px" aria-hidden="true"></i> 
                                                    <span style="color: #d321ba;" class="bold" id="titulo_bloco_canal">Instagram</span>
                                                </div>
                                            </div>
                                            <div class="titulo_bloco_canal" id="chamada_chat">
                                                <div class="" id="titulo_canal" style="color: #e26a6a; display: flex; flex-direction: row; align-items: center; gap: 10px;">
                                                    <i class="fas fa-comment-dots" style="color: #337ab7;font-size: 18px"></i> 
                                                    <span style="color: #337ab7;" class="caption bold" id="titulo_bloco_canal">Chat</span> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- INFORMAÇÕES DO CONTATO --}}
                                    <div class="info-fila">
                                        {{-- FILA --}}
                                        <div class="fila-content" id="">
                                            <div class="info-fila"></div>
                                            <span class="fila-text">Fila:</span>
                                            <span class="fila-text" id="alternate_tipo_fila">Aguardando Mensagem</span>
                                        </div>
                                        {{-- PROTOCOLO --}}
                                        <div class="fila-content">
                                            <span class="fila-text">Protocolo:</span>
                                            <span class="fila-text protocolNumber">00.000-000.000/00</span>
                                        </div>
                                        <div id="selecionado" class="selecionado" style="display:none;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- CAMPOS CONTATO --}}
                        <div class="portlet-body">
                        
                            <div class="row">
                               
                                {{-- Linha identificação (Nome/ID) --}}
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="row mt-10">
                                        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30">
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pr-1">
                                            <div class="input-group">
                                                <input disabled type="text" id="alternate_nome" name="nome"
                                                    class="form-control input-sm" placeholder="Nome civil:" value="">
                                            </div>
                                        </div>
                                        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 pl-1">
                                            <div class="input-group ">
                                                <input disabled type="text" id="alternate_nome_social"
                                                    name="nome_social" class="form-control input-sm"
                                                    placeholder="Nome social:" value="" maxlength="50">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- NAVEGAÇÃO TABS --}}
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="flex justify-between flex-end mb-10">
                                        <ul class="nav nav-tabs responsive-tabs">
                                            <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="" style="padding-right: 0px;">
                                                <a href="#portlet_empresa" data-toggle="tab" aria-expanded="false">EMPRESA</a>
                                            </li>
                                            <li class="" style="padding-right: 0px;">
                                                <a href="#portlet_info" data-toggle="tab" aria-expanded="false">INFO</a>
                                            </li>
                                        </ul>
                                        <div class="responsive-input">
                                            <div class="input-group ">
                                                <input disabled type="text" id="alternate_id"
                                                    class="form-control input-sm" style="cursor: initial;"
                                                    placeholder="ID:" name="id">
                                                <input type="hidden" id="id" name="id_contato" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- TAB CONTENT--}}
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-00">
                                    <div class="tab-content" id="bloco_formulario_info">
                                        {{-- Tab CONTATO --}}
                                        <div class="tab-pane active" id="portlet_contato">
                                            {{-- LINHA 1 --}}
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-6 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" id="alternate_telefone" class="form-control input-sm"
                                                                placeholder="Telefone:" name="phone"
                                                                value="" disabled />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled id="alternate_tipo_contato"
                                                                class="form-control input-sm"
                                                                placeholder="Tipo de contato:" name="tipo_contato"
                                                                spellcheck="true" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- LINHA 2 --}}
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-6 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled id="alternate_cpf"
                                                                class="form-control input-sm" placeholder="CPF:"
                                                                name="cpf" value="" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled id="alternate_rg"
                                                                class="form-control input-sm" placeholder="RG: "
                                                                name="rg" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- LINHA 3 --}}
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-6 mb-1" id="campo_email">
                                                        <div class="input-group">
                                                            <input type="email" disabled id="alternate_email"
                                                                class="form-control input-sm" placeholder="E-mail:"
                                                                name="email" value="exemplo@exemplo.com" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-1" id="campo_email_copia" style="display:none">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                name="email_cc" id="email_cc"
                                                                placeholder="E-mail C/C:" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Tab INFO --}}
                                        <div class="tab-pane" id="portlet_info">
                                            <div class="col-md-12">
                                                <textarea disabled class="form-control mb-1" autocomplete="off" rows="3"
                                                    placeholder="Informações adicionais:" title="Info" name="info"
                                                    maxlength="2000"></textarea>
                                            </div>
                                            <div class="col-md-6 pr-1 mb-1">
                                                <div class="input-group">
                                                    <input disabled type="text" autocomplete="off"
                                                        class="form-control input-sm" placeholder="Campo 1:"
                                                        title="Campo 1" name="dataNascimento" />
                                                </div>
                                            </div>
                                            <div class="col-md-6 pl-1 mb-1">
                                                <div class="input-group">
                                                    <input disabled type="text" autocomplete="off"
                                                        class="form-control input-sm" placeholder="Campo 2:"
                                                        title="campo 2" name="codigoProjeto" />
                                                </div>
                                            </div>
                                            <div class="col-md-6 pr-1 mb-1">
                                                <div class="input-group">
                                                    <input disabled type="text" autocomplete="off"
                                                        class="form-control input-sm" placeholder="Campo 3:"
                                                        title="Campo 1" name="campo3" />
                                                </div>
                                            </div>
                                            <div class="col-md-6 pl-1 mb-1">
                                                <div class="input-group">
                                                    <input disabled type="text" autocomplete="off"
                                                        class="form-control input-sm" placeholder="Campo 4:"
                                                        title="campo 4" name="campo4" />
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Tab ENDEREÇO --}}
                                        <div class="tab-pane" id="portlet_endereco">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                id="alternate_cep" placeholder="CEP:" name="cep"
                                                                maxlength="9" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled id="alternate_endereco" class="form-control input-sm"
                                                                placeholder="Endereço:" name="rua" maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" id="alternate_numero" disabled class="form-control input-sm"
                                                                name="numero" placeholder="Número:" maxlength="10" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Complemento:" name="complemento"
                                                                spellcheck="true" maxlength="50" id="alternate_complemento" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Bairro:" id="alternate_bairro" name="bairro" spellcheck="true"
                                                                maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Estado:" id="alternate_estado" name="estado" maxlength="3" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Cidade:" name="cidade" spellcheck="true"
                                                                maxlength="50" id="alternate_cidade" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Ponto de referência:" name="referencia"
                                                                spellcheck="true" id="alternate_referencia" maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                           <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Identificacao:" name="identificacao"
                                                                spellcheck="true" id="alternate_identificacao" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Tab EMPRESA --}}
                                        <div class="tab-pane" id="portlet_empresa">

                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                id="alternate_cnpj_empresa" placeholder="CNPJ:" name="cnpj"
                                                                maxlength="18" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Responsável:" id="alternate_responsavel_empresa" name="responsavel"
                                                                spellcheck="true" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="IE:" id="alternate_insq_estadual_empresa" name="insq_estadual" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Nome da empresa (Fantasia ou Apelido):"
                                                                name="nome_empresa" id="alternate_nome_empresa" spellcheck="true" maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Segmento:" id="alternate_segmento_empresa" name="segmento"
                                                                spellcheck="true" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="IM:" id="alternate_insq_municipal_empresa"  name="insq_municipal" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Razão social:" id="alternate_razao_social_empresa" name="razao_social"
                                                                spellcheck="true" maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Porte empresa:" id="alternate_porte_empresa" name="porte_empresa"
                                                                spellcheck="true" maxlength="50" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 mb-1">
                                                        <div class="input-group">
                                                            <input type="text" disabled class="form-control input-sm"
                                                                placeholder="Nº funcionarios" id="alternate_numero_funcionarios_empresa" name="numero_funcionarios_empresa"
                                                                spellcheck="true" maxlength="50" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- TRATATIVA --}}
                                <div class="col-md-12">
                                    <div id="exibir_tipo_chat" class="row">
                                        <!-- Exibir o campo de tratativa para Email -->
                                        <div class="col-md-12 p-00" id="tipo_chat_email" style="display: none">
                                            <div class="col-md-12">
                                                <div class="info-message">
                                                    <div class="content-info">
                                                        <span><strong>Título:</strong> <span class='subjectEmail'>teste</span></span>
                                                    </div>
                                                    <div id="abrirAnexos">Abrir anexos</div>
                                                    <div class="content-info">
                                                        <span><strong>Protocolo:</strong> <span class="protocolNumber">00.000-000.000/00</span></span>
                                                    </div>
                                                </div>
                                                <div id="anexos"></div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="show-message">
                                                    <p><strong>De: </strong><span id="email_from"></span></p>
                                                    <p><strong>Data e hora: </strong><span id="email_time"></span></p>
                                                    <p><strong>Para: </strong><span id="email_to"></span></p>
                                                    <p><strong>Assunto: </strong><span id="email_subject"></span></p>
                                                    <div id="email_message"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Exibir o campo de tratativa para Email -->
                                        <div class="col-md-12 mt-20 mb-10" id="tipo_chat_chat" style="display: none">
                                            <div class="chat-body"  id="load_chat_messages">
                                                <div class="content-right-message">
                                                    <div class="content-message" id="content-chat-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta nobis, atque magni reiciendis corrupti veritatis eaque laborum autem quos provident recusandae illo sequi, eius, repellendus aliquam earum fuga ad amet.</p>
                                                            <span>16:07</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Exibir o campo de tratativa para WhatsApp -->
                                        <div class="col-md-12 mt-20 mb-10" id="tipo_chat_whatsapp" style="display: none;">
                                            <div class="chat-body"  id="load_whatsapp_messages">
                                                <div class="content-right-message">
                                                    <div class="content-message" id="content-whatsapp-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta nobis, atque magni reiciendis corrupti veritatis eaque laborum autem quos provident recusandae illo sequi, eius, repellendus aliquam earum fuga ad amet.</p>
                                                            <span>16:07</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Exibir o campo de tratativa para Instagram -->
                                        <div class="col-md-12 mt-20 mb-10" id="tipo_chat_instagram" style="display: none;">
                                            <div class="chat-body"  id="load_instagram_messages">
                                                <div class="content-right-message">
                                                    <div class="content-message" id="content-instagram-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta nobis, atque magni reiciendis corrupti veritatis eaque laborum autem quos provident recusandae illo sequi, eius, repellendus aliquam earum fuga ad amet.</p>
                                                            <span>16:07</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-left-message">
                                                    <div class="content-message">
                                                        <div class="photo">
                                                            <img src="{{asset("/pages/img/filas/icon.png")}}" width="30" height="30" alt="" srcset="">
                                                        </div>
                                                        <div class="text-message">
                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sed. Exercitationem culpa error aut tempore fuga optio qui fugiat aperiam quos, distinctio perspiciatis molestias corrupti reprehenderit, doloremque amet repellendus ad.</p>
                                                            <span>16:20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>
            {{-- TERCEIRA COLUNA --}}
            <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 column-actions">
                {{-- FILTROS --}}
                <div class="bg-white p-15 pt-3 mb-20">
                    {{-- HEADER FILTROS --}}    
                    <div class="caption text-center">
                        <span class="title sub titulo-bloco">Filtros</span>
                    </div>
                    <hr class="divider">
                    {{-- SELEÇÃO CANAIS/FILAS --}}
                    <div class="select-content mt-10 select_filas">
                        <select class="form-control"  id="multiselect_pendencia_grupo" multiple="multiple">
                            <optgroup id="optionWhatsapp" label="Whatsapp">
                                
                            </optgroup>
                            <optgroup id="optionInstagram" label="Instagram">
                                
                            </optgroup>
                            <optgroup id="optionEmail" label="Email">

                            </optgroup>
                            <optgroup id="optionChat" label="Chat">
                                
                            </optgroup>
                        </select>
                    </div>
                    {{-- SELEÇÃO PERIODO --}}
                    <div class="period-content">
                        <p class="period-sub">Período:</p>
                        <div class="form-check-inline mr-20">
                            <input class="form-check-input" type="radio" name="periodValue" id="period1"
                                value="option1" checked>
                            <label class="form-check-label" style="font-weight: 300;" for="period1">Todos</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="periodValue" id="period2"
                                value="option2">
                            <label class="form-check-label" style="font-weight: 300;" for="period2">Data específica</label>
                        </div>
                    </div>
                    {{-- SELEÇÃO DATA --}}
                    <div class="date-content" style="display:none">
                        <div class=" form-flex-inline mb-10">
                            <label for="initial" style="font-weight: 300;">Data inicial</label>
                            <input class="form-control input-sm" id="initialDate" type="date" name="initial">
                        </div>
                        <div class="form-flex-inline">
                            <label for="final" style="font-weight: 300;">Data final</label>
                            <input class="form-control input-sm" id="finalDate" type="date" name="final">
                        </div>
                    </div>
                    <div class="acction-buttons text-center mt-10 d-grid p-0">
                        <button class="btn btn-acction btn-secondary m-0" id="concluido"><i class="fas" aria-hidden="true"></i>Filtrar</button>
                    </div>
                </div>
                {{-- FILAS DE ATENDIMENTO --}}
                <div class="bg-white p-15 pt-3 mb-20">
                    {{-- HEADER ATENDIMENTO --}}
                    <div class="caption text-center">
                        <span class="title sub titulo-bloco">Canais de atendimento</span>
                    </div>
                    <hr class="divider">
                    {{-- TOTAL DE CONTATO --}}
                    <div class="caption text-center p-05 m-0">
                        <span class="black total" id="totalContacts"></span>
                    </div>
                    <hr class="divider">
                    {{-- TOTAL DE CONTATO P/ TIPO --}}
                    <div class="contact-type-count p-05">
                        <a href="javascript:void(0)" class="icon-type blocked disabled">
                            <i class="icon-call-in img-icon" style="font-size: 26px;line-height: 40px !important;color: red;" title="Telefonia"></i>
                            <!--<img class="img-fluid img-icon" src="{{asset('/pages/img/filas/telephone.png')}}" alt="" title="Telefonia"> -->
                            <span id="telephoneTotal" data-count=""></span>
                        </a>
                        <a href="javascript:void(0)" id="clickWhatsapp"  class="icon-type" title="WhatsApp">
                            <i class="fa fa-whatsapp img-icon" style="color: #25d366"  data-id="3" title="Whatsapp"  onclick="filterContactType(this, 3)" data-type="whatsapp" ></i>
                            <span onclick="filterContactType(this, 3)"  data-id="3" data-type="whatsapp"  id="whatsappTotal"></span>
                        </a>
                        <a href="javascript:void(0)" id="clickInstagram"  class="icon-type" title="Instagram">
                            <i class="fa fa-instagram img-icon" style="color: #d321ba"  data-id="4" title="Instagram"  onclick="filterContactType(this, 4)" data-type="instagram" ></i>
                            <span onclick="filterContactType(this, 4)"  data-id="4" data-type="instagram"  id="instagramTotal"></span>
                        </a>
                        <a href="javascript:void(0)" class="icon-type" id="clickEmail"    title="E-mail">
                            <i class="fa fa-envelope-o img-icon" style="margin-top:4px;line-height: 1 !important;color: red;padding: 6.5px 0px;font-size: 20px;border-radius: 20px;margin-bottom: 7px;" data-id="5" onclick="filterContactType(this, 5)" data-type="email"></i>
                            <span onclick="filterContactType(this, 5)" data-id="5"  data-type="email" id="emailTotal"></span>
                        </a>
                        <a href="javascript:void(0)"  class="icon-type" id="clickChat"   title="Chat">
                            <i class="fa fa-commenting img-icon" style="margin-top:4px;line-height: 1 !important;background: #2598d8;color: #fff;padding: 6.5px 7px;font-size: 16px;border-radius: 20px;margin-bottom: 11px;" data-id="9" onclick="filterContactType(this, 9)" data-type="chat"></i>
                            <span onclick="filterContactType(this, 9)"  data-id="9" data-type="chat" id="chatTotal"></span>
                        </a>
                    </div>
                </div>
                {{-- AÇÕES --}}
                <div class="bg-white p-15 pt-3 ">
                    {{-- HEADER AÇÕES--}}
                    <div class="caption text-center">
                        <span class="title sub titulo-bloco">Ações</span>
                    </div>
                    <hr class="divider">
                    {{-- BOTÕES DE AÇÕES --}}
                    <div class="acction-buttons text-center mt-10 d-grid">
                       <!--  <button type="button" onclick="openPriorityModal()" class="botoestpc btn btn-primary" style="margin-bottom: 10px; background: #ff9800; border-color: #ff9800;">
                        <i class="fa fa-exclamation" style="background: #fff0;padding: 2px 6.5px;border:none;"></i>
                            Priorizar</button> -->
                        <button onclick="openTransferModal()" class="botoestpc btn btn-primary" id="transfere" style="margin-bottom: 10px; background: #3b98de; border-color: #3b98de;"><i
                                class="fas" aria-hidden="true"></i>
                            Transferir</button>
                        <button class="botoestpc btn btn-primary" onclick="openConcludeModal()" id="concluido"><i class="fas" aria-hidden="true"></i>
                            Finalizar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@include('filas.components.modals.webchat')
@include('filas.components.modals.email')
@include('filas.components.modals.whatsapp')
@include('filas.components.modals.instagram')
@include('filas.components.modals.priorizar')
@include('filas.components.modals.concluir')

@push('scripts')
<script>
    // inicializar inputs de data
    function getDate()
    {
        let d = new Date();
        let day = d.getDate();
        day = ('00' + day).slice(-2);
        let month = d.getMonth() + 1;
        month = ('00' + month).slice(-2);
        let year = d.getFullYear();
        d  = year+'-'+month+'-'+day;
        return d;
    }

    let d = getDate();
    $('#initialDate').val(d);
    $('#initialDate').attr('max',d);
    $('#finalDate').val(d);
    $('#finalDate').attr('max',d);

    // filtro de filas e data
    let queues = $('#multiselect_pendencia_grupo').val();
    if(typeof queues == 'undefined' || queues == '' || queues == 'undefined') queues = null;
    let date = {};
    if($('input[name="periodValue"]:checked').val() == 'option2')
    {
        date['init'] = $('#initialDate').val();
        date['end'] = $('#finalDate').val();
    }

    $('#concluido').on('click',function(){
        let error = [];
        // validar datas
        if($('input[name="periodValue"]:checked').val() == 'option2')
        {
            let init_tmp = $('#initialDate').val();
            let end_tmp = $('#finalDate').val();
            if(typeof init_tmp == 'undefined' || init_tmp == null || init_tmp == '') error.push('Data inicial não identificada.');
            if(typeof end_tmp == 'undefined' || end_tmp == null || end_tmp == '') error.push('Data final não identificada.');
            // validar se data final é maior que a inicial
            if(error.length == 0)
            {
                let diff = new Date(end_tmp) - new Date(init_tmp);
                if(diff < 0) error.push('Data final não pode ser maior que a data inicial.');
            }
            delete init_tmp, end_tmp;
        }
        else
        {
            date = {};
        }

        if(error.length > 0)
        {
            for(let i=0;i < error.length;i++)
            {
                if(i == 0){setAtenderAlertError(error[i]);continue;}
                setTimeout(() => {
                    setAtenderAlertError(error[i]);
                }, 500*i);
            }
            return;
        }
        // atualizar filtros
        date['init'] = $('#initialDate').val();
        date['end'] = $('#finalDate').val();
        let queues_tmp = $('#multiselect_pendencia_grupo').val();
        queues = (typeof queues_tmp == 'undefined' || queues_tmp == '' || queues_tmp == 'undefined') ? null: queues_tmp;
        filterContactAdvanced('high');
        delete queues_tmp;
    });
</script>
<script src="{{asset('pages/scripts/funcoes/funcoes.js')}}"></script>
<script src="{{asset('pages/scripts/filas/script.js')}}"></script>
<script src="{{asset('pages/scripts/filas/caixaEntrada.js')}}"></script>

<!-- SCRIPTS AÇÕES DOS MODALS -->
<script src="{{asset('pages/scripts/filas/modals/concluir.js')}}"></script>
<script src="{{asset('pages/scripts/filas/modals/transferencia.js')}}"></script>
<script src="{{asset('pages/scripts/filas/modals/prioridade.js')}}"></script>
<!-- SCRIPTS AÇÕES DOS MODALS -->

<!--<script src="{{asset('pages/scripts/filas/filtros.js')}}"></script> -->


<script src="{{asset('pages/scripts/filas/mascaras.js')}}"></script>
<script src='{{asset("pages/scripts/atendimento/jquery.mask.min.js")}}' type="text/javascript"></script>
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>


<!-- END PAGE LEVEL PLUGINS -->
@endpush