{% extends "cliente/base.php" %}
{% block body %}
<!-- LOADING ANIMATION -->
<style>
{% include 'cliente/chat/style.css' %}
</style>

	<div id="page" class="d-flex mt-lg-4 ms-lg-2 me-lg-2 mt-mobile ms-80" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
		<div id="conversasDiv" class="col-md-3 col-12 me-lg-2">
			<div class="box d-flex" style="height: 100%;" >
				<div class="bg-purple" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
					<div class="p-3 py-2">
						<a type="button" class="text-white bg-none" style="font-size:14px;">&nbsp;</a>
					</div>
				</div>
				
				<div id="containerConversas" class="box-body p-0 bg-light-gray" style="position: absolute; height: 100%; width: 100%; border-bottom-left-radius: 6px; border-bottom-right-radius: 10px;">
					<!--h4 class="text-center m-3 mb-0">Selecionar número</h4-->
					<!--select id="meusNumeros" class="selectpicker form-control form-control-sm col-12" title="Número">
						<option value="TODOS" class="" style="letter-spacing: 1px !important;">Todos</option>
						{% for n in numeros %}
						<option value="{{n.getIdNumeros}}" class="" style="letter-spacing: 1px !important;">{{n.getDescricao}} ({{n.getNumero}})</option>
						{% endfor %}
					</select-->
					
					<div id="containerConversasHeader" class="bg-purple" style="border-top-left-radius: 10px;border-top-right-radius: 10px;">
						<div class="p-3 py-2 d-flex align-items-center">
							<!--a class="btn btn-outline-light btn-circle border-0 btn-sm" data-bs-toggle="tooltip" data-bs-original-title="Ativar sons"><i class="mdi mdi-music-box" style="font-size: 20px;"></i></a>
							<a class="btn btn-outline-light btn-circle border-0 btn-sm " data-bs-toggle="tooltip" data-bs-original-title="Ativar notificações"><i class="mdi mdi-comment-alert" style="font-size: 20px;"></i></a-->
							<span>
								<a id="novaConversa" type="button" class="text-white bg-none" data-bs-toggle="tooltip" data-bs-original-title="Nova conversa"><i class="fa fa-comment-dots"></i></i></a>
							</span>
							<span>
								<a id="showOciosos" type="button" class="text-white bg-none ms-3" data-bs-toggle="tooltip" data-bs-original-title="Ociosos" style="position:relative;">
									<i class="fa fa-clock" style=""></i>
									<span id="ociososBadge" class="badge badge-md badge-pill badge-danger d-none" style="position: absolute; top: -5px; left: 10px; font-size: 8px; padding: 1px 4px 1px 4px;">1</span>
								</a>
							</span>
							{%if userLogged.tipo == 'ATENDENTE'%}
							<span>
								<a id="showConversasAtendentes" type="button" class="text-white bg-none ms-3" data-bs-toggle="tooltip" data-bs-original-title="Conversar com um atendente" style="position:relative;">
									<i class="fa fa-headset" style=""></i>
									<span id="conversasAtendentesBadge" class="badge badge-md badge-pill badge-danger d-none" style="position: absolute; top: -5px; left: 10px; font-size: 8px; padding: 1px 4px 1px 4px;">0</span>
								</a>
							</span>
							{%endif%}
							
							{% if numeros|length > 1%}
							<div id="selectNumero" data-selected="TODOS" class="btn-group" style="position: absolute; left: 30%; right: 30%; max-width: 40%; font-size: 15px;">
								<button class="b-0 badge badge-pill bg-purple fw-bold dropdown-toggle no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
									Números <i class="fa fa-chevron-down fa-xs"></i>
								</button>
								<div class="dropdown-menu" style="">
									<a id="TODOS" class="dropdown-item" href="javascript:void(0)">Todos</a>
								</div>
							</div>
							{%else%}
							<span class="text-center mt-1 fw-bold" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Conversas
							</span>
							{%endif%}
							
							<div class="ms-auto">
								{% if numeros|length == 1%}
								<span class="">
									<a id="pausarRetomarAtendimento" type="button" 
										class="bg-none ms-3 {%if numeros.0.getPausarAtendimento == 0%}text-success{%else%}text-warning{%endif%}" 
										data-bs-toggle="tooltip" data-bs-original-title="Pausar/Retomar atendimento" 
										data-id="{{numeros.0.getIdNumeros}}" data-numero="{{numeros.0.getNumero}}"
										style="position:relative;">
										<i class="fa fa-circle" style=""></i>
									</a>
								</span>
								{%endif%}
								
								<span class="dropdown ms-auto">
									<a class="text-white bg-none" type="button" data-bs-toggle="dropdown">
										<i class="fa fa-ellipsis-vertical ps-2 pe-1" style=""></i>
									</a>
									<div class="dropdown-menu" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 43px);" data-popper-placement="bottom-start">
										<a id="ativarSons" class="dropdown-item text-purple" href="javascript:void(0)"><i class="fa fa-volume-xmark me-1"></i>Desativar sons</a>
										<a id="ativarNotificacoes" class="dropdown-item text-purple" href="javascript:void(0)"><i class="fa fa-bell me-1"></i>Ativar notificações</a>
										<a class="dropdown-item text-purple" href="javascript:void(0)" onclick="showMensagensRapidas()"><i class="fa fa-bolt me-1"></i>Mensagens rápidas (<small>Ctrl + /</small>)</a>
										{%if userLogged.tipo == 'ATENDENTE'%}
										<a id="ativarDesativarFila" class="dropdown-item text-purple" href="javascript:void(0)" data-fila="{{userLogged.ativarFilaAtendimento}}"><i class="fa fa-users-line me-1"></i>{% if userLogged.ativarFilaAtendimento == 1 %}Desativar{%else%}Ativar{%endif%} fila de atendimento</a>
										{%endif%}
									</div>
								</span>
							</div>
						</div>
					</div>
					<div id="containerConversasBuscar" class="p-2 d-flex bg-purple align-items-center">
						<div class="col-9 text-left">
							<div class="input-group mb-0" style="">
								<div class="input-group-addon bg-green-manager border-0 py-0 d-flex align-items-center" style="">
									<i class="fa-solid fa-magnifying-glass"></i>
								</div>
								<input id="buscarConversa" type="text" placeholder="Buscar por nome ou número" class="form-control pull-right border-0 bg-manager-gray" style="border-radius: 0px 5px 5px 0px!important;" value="" autocomplete="off"/>
							</div>
							
						</div>
						<div class="d-flex col-2 justify-content-around ps-1">
							<div id="selectTag" class="d-flex align-items-center">
							    <a class="dropdown-toggle no-caret" data-dismiss="modal" data-bs-toggle="tooltip" data-bs-original-title="Filtrar por Tags" type="button" onclick="$('#tagsFiltro').selectpicker('toggle');" aria-expanded="false" style="white-space: nowrap; text-overflow: ellipsis;">
							        <i class="fa-solid fa-tags text-white" style="font-size: 1.2rem;"></i>
							    </a>
							    <select id="tagsFiltro" class="selectpicker hidden-select" title="Filtrar tags" data-live-search="true" multiple data-selected-text-format="count > 2" data-count-selected-text="{0} tags selecionadas" data-actions-box="true" data-select-all-text="Marcar Todas" data-deselect-all-text="Desmarcar" autocomplete="off">
							        {% for t in tags %}
							        <option value="{{t.getIdTags}}" style="letter-spacing: 1px !important;" data-content="<i class='fa-solid fa-tag' style='color: {{t.getCor}}'></i> {{t.getNome}}">
							            {{t.getNome}}
							        </option>
							        {% endfor %}
							    </select>
							</div>
							{%if userLogged.tipo == 'CLIENTE'%}
							<div id="selectAtendente" class="d-flex align-items-center" data-selected="TODOS" style="">
								<a class="dropdown-toggle no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="white-space: nowrap;text-overflow: ellipsis;">
									<i class="fa fa-headset fa-lg text-white"></i>
								</a>
								<div class="dropdown-menu" style="">
									<a id="TODOS" class="dropdown-item" href="javascript:void(0)">Todos</a>
									{% for key,a in atendentes %}
										<a id="{{a.getIdAtendentes}}" class="dropdown-item" href="javascript:void(0)">{{a.getNomeAtendente}}</a>
									{%endfor%}
								</div>
							</div>
							{%else%}
								{%if userLogged.departamentos == null%}
									<div id="selectAtendente" class="d-flex align-items-center" data-selected="TODOS" style="">
										<a class="dropdown-toggle no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
											<i class="fa fa-headset fa-lg text-white"></i>
										</a>
										<div class="dropdown-menu" style="">
											<a id="TODOS" class="dropdown-item" href="javascript:void(0)">Todos</a>
											{% for key,a in atendentes %}
												<a id="{{a.getIdAtendentes}}" class="dropdown-item" href="javascript:void(0)">{{a.getNomeAtendente}}</a>
											{%endfor%}
										</div>
									</div>
								{%endif%}
							{%endif%}
						</div>
					</div>
					<div id="selectStatus" class="col-12 p-2 text-left bg-purple d-flex flex-wrap gap-1">
					    <span class="badge bg-azul text-white fw-bold">
					        <a id="TODOS" class="text-white" href="javascript:void(0)">Todos</a>
					    </span>
					    <span class="badge bg-light-gray text-white fw-bold">
					        <a id="AGUARDANDO ATENDENTE" class="text-purple" href="javascript:void(0)">Aguardando Atendente</a>
					    </span>
					    <span class="badge bg-light-gray text-white fw-bold">
					        <a id="ATENDIMENTO INICIADO" class="text-purple" href="javascript:void(0)">Atendimento Iniciado</a>
					    </span>
					    <span class="badge bg-light-gray text-white fw-bold">
					        <a id="NÃO LIDOS" class="text-purple" href="javascript:void(0)">Não Lidos</a>
					    </span>
					</div>
					
					<!--h4 class="text-center m-3">Conversas</h4>								
					<div class="lookup lookup-sm lookup-right d-none d-lg-block my-20">
						<input type="text" name="s" placeholder="Search" class="w-p100">
					</div-->
					<div class="">
						<div id="conversas" class="media-list media-list-hover sortable bg-light-gray" style="overflow-y: auto; border-radius: 0 0 10px 10px;">
						
						</div>
					</div>
				</div>
				
				<div id="containerConversasAtendentes" class="box-body p-0 bg-light-gray" style="position: absolute; height: 100%; width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
					<div id="containerConversasAtendentesHeader" class="bg-purple" style="border-top-left-radius: 10px;border-top-right-radius: 10px;">
						<div class="p-3 py-2 d-flex align-items-center">
							<span>
								<a id="fechaConversasAtendentes" type="button" class="text-white bg-none"><i class="fa fa-arrow-left" style=""></i></a>
							</span>
							<span class="text-center mt-1 fw-bold" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Conversas Atendentes
							</span>
							<div class="ms-auto">
								<a id="novaConversaAtendente" type="button" class="text-white bg-none" data-bs-toggle="tooltip" data-bs-original-title="Iniciar conversa com um atendente"><i class="fa fa-user-plus" style=""></i></a>
							</div>
						</div>
					</div>
					<div id="containerConversasAtendentesBuscar" class="p-2 bg-purple">
						<div class="col-12 text-left">
								<div class="input-group mb-0" style="">
									<div class="input-group-addon bg-green-manager border-0 py-0 d-flex align-items-center" style="">
										<i class="fa-solid fa-magnifying-glass"></i>
									</div>
									<input id="buscarConversaAtendentes" type="text" placeholder="Buscar por nome" class="form-control border-0 bg-manager-gray" value=""/>
								</div>				
							</div>
						</div>
					<div class="">
						<div id="conversasAtendentes" class="media-list media-list-hover sortable" style="overflow-y: auto;">
						</div>
					</div>
				</div>
				
				
				<div id="containerOciosos" class="box-body p-0 bg-light-gray" style="position: absolute; height: 100%; width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
					<div id="containerOciososHeader" class="bg-purple" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
						<div class="p-3 py-2">
							<a id="fechaOciosos" type="button" class="text-white bg-none"><i class="fa fa-arrow-left" style=""></i></a>
							<span class="text-center m-auto fw-bold" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Ociosos
							</span>
						</div>
					</div>
					<div class="p-0 py-2">
						<div class="">
							<span class="position-absolute" style="top: 50%; left:45%;">
								<i id="ociososLoading" class="fa fa-fw fa-circle-notch rotate mt-4 d-none" style="font-size: 28px;"></i>
							</span>
							<div id="ociosos" class="p-0 media-list media-list-hover" style="overflow-y: auto;">
								
							</div>
						</div>
					</div>
				</div>
				
				
				<div id="containerContatos" class="box-body p-0 bg-light-gray" style="position: absolute; height: 100%; width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
					<div id="containerContatosHeader" class="bg-purple" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
						<div class="p-3 py-2 d-flex align-items-center">
							<a id="fechaContatos" type="button" class="text-white bg-none"><i class="fa fa-arrow-left" style=""></i></a>
							<span class="text-center fw-bold mt-1" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Contatos
							</span>
							<div class="ms-auto">
								{% if userLogged.tipo == 'CLIENTE' %}
								<a id="listarGrupos" type="button" class="text-white bg-none me-2" data-bs-toggle="tooltip" data-bs-original-title="Listar grupos"><i class="fa fa-users" style=""></i></a>
								{%endif%}
								<a id="novoContato" type="button" class="text-white bg-none" data-bs-toggle="tooltip" data-bs-original-title="Novo contato"><i class="fa fa-user-plus" style=""></i></a>
							</div>
						</div>
					</div>
					<div class="p-0 py-2">
						<div id="containerContatosBuscar" class="p-2 bg-purple">
							<div class="col-12 text-left">
								<div class="input-group mb-0" style="">
									<div class="input-group-addon bg-green-manager border-0 py-0 d-flex align-items-center" style="">
										<i class="fa-solid fa-magnifying-glass"></i>
									</div>
									<input id="buscarContato" type="text" placeholder="Buscar por nome ou número" class="form-control pull-right border-0 bg-manager-gray" style="border-radius: 0px 5px 5px 0px!important;" value="" autocomplete="off"/>
								</div>				
							</div>
						</div>
						<!--div class="lookup lookup-sm lookup-right d-none d-lg-block my-20">
							<input type="text" name="s" placeholder="Search" class="w-p100">
						</div-->
						<!--span class="d-flex  justify-content-center p-2">
							<i id="contatosLoading" style="font-size: 28px;" class="fa fa-circle-notch rotate "></i>
						</span-->
						
						
						<div class="">
							<div id="contatos" class="p-0 media-list media-list-hover" style="overflow-y: auto;"> 

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

		<div id="chatDiv" class="col-md-9 col-12 pe-lg-2" style="">
			<div id="noChat" class="box box-solid bs-3 border-primary shadow mb-2" style="height: 100%;">
				<div class="d-flex align-items-center justify-content-center p-0 mb-0 bg-light-gray rounded-0" style="height: 100%;-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax */">
					<div class="row text-center">
						<img class="mb-40" src="assets/images/noChatImage.svg" alt="" height="200" style=""/>
						<h4 class="fw-bold text-purple">Nenhuma conversa selecionada</h4>
						<h6 class="fw-bold text-purple">Selecione uma conversa para começar a enviar e receber mensagens.</h6>
					</div>
				</div>
			</div>
			
			<div id="chat" class="box box-solid bs-3 border-primary bg-lighter shadow mb-2 d-none" style="height: 100%;">
				<div class="box-header p-3" style="">
					<div id="chatHeader" class="media align-items-center p-0">
						<a href="javascript:void(0)" onclick="deselectConversa()"><i class="fa fa-chevron-left"></i></a>
						<a id="showPerfil" class="avatar avatar-lg mx-0" href="javascript:void(0)">
							<img id="imgChat" src="{{host}}assets/images/svg-icon/image.svg" class="rounded-circle" alt="..." style="filter: invert(0.50); max-width: 48px; max-height: 48px; object-fit: cover;">
						</a>
						
						<div class="media-body">
							<p class="fs-16 text-dark">
								<span class="" href="#"><h5 id="nomeChat" class="mb-0 fw-bold text-purple" style="font-weight: 500;">Nenhuma conversa selecionada</h5></span>
							</p>
							<small class="text-purple fw-bold" id="ultimaMsgChat"></small>
						</div>
						<div class="list-icons-item dropdown me-0">
							<button id="dropDownChat" href="javascript:void(0)" class="btn btn-circle btn-white text-dark" data-bs-toggle="dropdown" disabled><i class="fa fa-ellipsis-v fa-lg"></i></button>
							<div class="dropdown-menu dropdown-menu-en" style=""> 
								<a id="encerrarAtendimento" href="javascript:void(0)" class="dropdown-item text-purple"><i class="fa fa-close"></i> Encerrar atendimento</a>
								<a id="transfAtendimento" href="javascript:void(0)" class="dropdown-item text-purple">
									<i class="fa fa-arrow-right"></i>
									Transferir atendimento
								</a>
								<a id="fecharConversaAtendente" href="javascript:void(0)" class="dropdown-item text-purple"><i class="fa fa-close"></i> Fechar conversa</a>
								<a id="sincMsgNaoRecebidas" href="javascript:void(0)" class="dropdown-item text-purple"><i class="fa fa-clock-rotate-left"></i> Sincronizar mensagens</a>
							</div>
						</div>
					</div>             
				</div>
				
				<div class=" p-0 mb-0 rounded-0 position-relative">
					<div id="mensagens" class="p-0 me-0 bg-secondary text-center" 
						style="padding-top: 5px !important; overflow-y: auto; 
						background-image:url(assets/images/pattern.svg); 
						backface-visibility: hidden;
						-webkit-backface-visibility: hidden;
						  -webkit-transform: translateZ(0) scale(1.0, 1.0);
						  transform: translateZ(0); 
						  max-height: 100vh; overflow-y: auto; overflow-x: hidden;">
					</div>
				</div>
				
				<div id="mensagensRapidas" class="box mb-0 d-none" style="position: absolute; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 99; -webkit-animation-duration: 0.5s;">
					<div class="box-header ps-4 pe-4 pt-2 pb-2">
						<div class="d-flex align-items-center justify-content-between">
							<div class="d-flex align-items-center" style="min-width: 80%;">
								<h5 class="box-title ">Mensagens rápidas</h5>
								
								<a id="addRespostaRapida" class="btn btn-primary rounded-circle btn-xs justify-content-start ms-3" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-original-title="Adicionar mensagem rápida"><i class="fa fa-plus"></i></a>
							
								<input id="buscarMensagemRapida" class="form-control form-control-sm ms-3 w-200" placeholder="Buscar mensagem"></input>
							</div>
							
							<div class="d-flex align-items-center justify-content-end" style="min-width: 20%;">
								<a class="" href="javascript:void(0)" onclick="hideMensagensRapidas();"><i class="fa fa-close"></i></a>
							</div>
						</div>
					</div>
					<div class="box-body p-0" style="overflow-y: auto;">
						<div id="respostasRapidas" class="media-list media-list-hover inner-user-div" style="">

						</div>
					</div>
				</div>
				
				<div id="conversaPreviewImagem" class="box d-none" style="position: absolute; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 99; -webkit-animation-duration: 0.5s;">
					<div class="box-header ps-4 pe-4 pt-2 pb-2">
						<h5 class="box-title ">Enviar imagem/arquivo</h5>
						<a class="float-end" href="javascript:void(0)" onclick="hideFilePreview();"><i class="fa fa-close"></i></a>
					</div>
					
					<div class="box-body d-flex align-items-center justify-content-center">
						<div id="imgPreview" class="b-2 b-dashed border-secondary rounded p-3 d-none">
							<img class="image-responsive ms-auto me-auto" src="assets/images/img3.jpg" alt="" style="display: block;margin-left: auto;margin-right: auto;"/>
							<div class="filename text-center text-dark mt-2"></div>
						</div>
						
						<div id="filePreview" class="b-2 b-dashed border-secondary rounded p-3 d-none">
							<img class="image-responsive" src="assets/images/previewFile.svg" alt="" onmousedown="return false;" style="display: block;margin-left: auto;margin-right: auto;"/>
							<h6 class="text-center text-dark mb-0 mt-2">Pré-visualização não disponível</h6>
							<div class="filename text-center text-dark"></div>
						</div>
					</div>
				</div>
				
				<div class="box-footer p-2 pb-0" style="">
					<div id="respondeMensagemPreview" class="mb-2 py-2 ms-4 d-none" style="z-index: 99; -webkit-animation-duration: 0.5s; max-height: 20vh; overflow-y: auto;">
						<div id="mensagemRespondeBody" class="rounded bg-secondary text-purple bs-3 border-primary p-1 position-relative">
							<span id="mensagemRespondeMedia" class="d-none"></span>
							<span id="mensagemRespondeText" style="white-space: pre-wrap"></span>
							<a id="hideRespondeMensagens" href="javascript:void(0)" class="btn btn-xs btn-danger rounded-circle text-white shadow d-flex align-items-center justify-content-center" 
								style="position: absolute; width: 21px; height: 21px; top: -6px; right: -6px;">
								<i class="fa fa-close "></i>
							</a>
						</div>
					</div>
					
					<div class="d-flex justify-content-between align-items-center" style="">
						<div class="d-flex align-items-top my-auto me-1">
							<a id="showMensagensRapidasBtn" href="javascript:void(0)" class="px-1" data-bs-toggle="tooltip" data-bs-original-title="Mensagens rápidas">
								<i class="fa fa-bolt text-purple" style=""></i>
							</a>
						</div>
						<div class="d-flex align-items-top my-auto me-1 d-none">
							<a id="showTemplateMessages" href="javascript:void(0)" class="px-1" data-bs-toggle="tooltip" data-bs-original-title="Modelo/Template de mensagem">
								<i class="fa fa-envelope-circle-check text-purple" style=""></i>
							</a>
						</div>
						
						
						<div class="position-relative w-p100 me-10 d-flex align-itens">
							<textarea id="chatMensagem" class="form-control b-0" type="text" placeholder="Mensagem" style="display: inline-block; resize: none; height: 42px; overflow-y:hidden; max-height: 126px; background-color: #e1e1e1;" disabled></textarea>
							<div id="emojiPicker"></div>
						</div>
						
						<div id="gravarAudioDiv" class="d-none w-p100 h-50">
							<div id="gravandoDiv">
								<div class="d-flex w-p100 h-50">
									<div id="waveform" class="d-block w-p100 mx-3" style="max-height: 50px;"></div>
									<div class="w-p10 h-50 d-flex align-items-center">
										<button id="paraGravacao" class="button btn btn-sm btn-circle btn-danger me-2"><i class="fa fa-stop" aria-hidden="true"></i></button>
									</div>
								</div>
							</div>
							<div id="reproduzAudioDiv" class="d-none">
								<div class="d-flex align-items-center w-p100 h-50">
									<div id="audioGravado" class="w-p100 mx-3"></div>
									<div class="d-flex">
										<button id="reproduzAudio" class="button btn btn-xs btn-circle btn-success me-2"><i class="fa fa-play" aria-hidden="true"></i></button>
										<button id="cancelaAudio" class="button btn btn-xs btn-circle btn-danger"><i class="fa fa-xmark" aria-hidden="true"></i></button>
									</div>
								</div>
							</div>
						</div>
						
						<div class="d-flex justify-content-between">
							<div class="fab-container me-2">
								<button id="enviarAnexo" type="button" class="fab waves-effect waves-circle btn btn-sm btn-circle btn-purple-manager" disabled>
									<i class="fa fa-paperclip" style=""></i>
								</button>
								
								<ul class="fab-options">
									<li>
										<div id="selecionarArquivo" class="fab-icon-holder bg-warning">
											<i class="fa fa-file-lines"></i>
										</div>
									</li>
									<li>
										<div id="selecionarImagem" class="fab-icon-holder bg-danger">
											<i class="fa fa-image"></i>
										</div>
									</li>
									<li>
										<div id="gravarAudio" class="fab-icon-holder bg-primary">
											<i class="fa fa-microphone"></i>
										</div>
									</li>
								</ul>
								
								<div class="">
									<input type="file" accept="" id="uploadArquivo" class="d-none">
									<input type="file" accept="image/*" id="uploadImagem" class="d-none">
								</div>
							</div>
							
							<button id="enviarMensagem" type="button" class="waves-effect waves-circle btn btn-sm btn-circle btn-green-manager2" style="" disabled>
								<i class="fa fa-paper-plane"></i>
							</button>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
	
	<div id="chatAudio" class="d-none"></div>



{% endblock %}
{% block footer %}

{%endblock%}
{% block scripts %}
<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<script src="assets/vendor_plugins/vcard-parser/vcard-parser.js"></script>
<script>
{% include 'cliente/chat/chat_websocket.js' %}
{% include 'cliente/chat/chat_utils.js' %}
{% include 'cliente/chat/chat_media.js' %}
{% include 'cliente/chat/chat_ui.js' %}
{% include 'cliente/chat/chat_formatacao_conteudo.js' %}
{% include 'cliente/chat/chat_formatacao.js' %}
{% include 'cliente/chat/chat_mensagens.js' %}
{% include 'cliente/chat/chat_script.js' %}
{% include 'cliente/chat/chat_ocioso.js' %}
{% include 'cliente/chat/chat_atendentes.js' %}
{% include 'cliente/chat/chat_contatos.js' %}
{% include 'cliente/chat/chat_perfil_contatos.js' %}
{% include 'cliente/chat/chat_pedidos.js' %}
{% include 'cliente/chat/chat_grupos.js' %}
{% include 'cliente/chat/chat_notificacoes.js' %}
{% include 'cliente/chat/chat_mensagens_rapidas.js' %}
</script>
{% endblock %}