@php
        //Bsucar o Sector deste indiviudo
        //dd($user->id);
        $meusector=\App\Models\Funcionario::join('sectores','sectores.id','=','funcionarios.sector_id')
										  ->where('user_id',Auth::id())->select('sectores.sector')->first();
        $meusector->sector;
@endphp


@extends('usuarios.funcionarios.master.layout2')

@section('conteudo')

  <script>
        window.PUSHER_APP_KEY = '{{ config('broadcasting.connections.pusher.key') }}';
        window.APP_DEBUG = {{ config('app.debug') ? 'true' : 'false' }};
    </script>
<style type="text/css">
    .bodymessage{
        display:none;
    }
    #imageSend
    {
        height:120px;
        width:120px;
    }

	#lbupload {
    margin: 0px 0px 1px 4px;
    top: -8px;
    position: absolute;
    left: 98% !important;
}
.position-relative.sendmsgCliente {
    width: 89% !important;
}
</style>


<!-- <link href="{{asset('css/lib/bootstrap.min.css')}}" type="text/css" rel="stylesheet"> -->
		<!-- Swipe core CSS -->
<!-- Favicon -->
<!-- <link href="{{asset('img/favicon.png')}}" type="image/png" rel="icon"> -->
<link href="{{asset('css/swipe.min.css')}}" type="text/css" rel="stylesheet">
{{-- <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css"> --}}

<style type="text/css">
    
  .navigation .inside .menu 
    {
        display: flex;
        flex-basis: auto;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: center;
    }
</style>

<nav class="d-none">
	{{$Chat=App\Models\MensagensChat::get()}}
    {{ $vectorUsers=0}}

	@if($Chat->count()<=0)
        {{$Funcionarios=App\Models\Funcionario::join('users','users.id','=','funcionarios.user_id')->where('users.id','!=',Auth::id())->distinct()->get()}}
    @else
    {{$MensagensUserFuncionarios=App\Models\MensagensChat::where('user_from','!=',Auth::id())->orderBy('id','Asc')->get()}}
    {{$usuariosListChatIds[]=0}}
    @foreach ($MensagensUserFuncionarios as  $MensagemUserFuncionario)
        {{-- Adicionar uma lista dos funcionários que têm comunicação com o usuário actual para poder ver quem não tem --}}
    @endforeach
    {{-- {{$FuncionariosChat=App\Models\Funcionario::join('users','users.id','=','funcionarios.user_id')->join('mensagenschats','mensagenschats.user_from','=','users.id')->where('users.id','!=',Auth::id())->select('users.*','funcionarios.*','mensagenschats.*')->orderBy('mensagenschats.id','Desc')->get()}} --}}
    {{$Funcionarios=App\Models\Funcionario::join('users','users.id','=','funcionarios.user_id')->join('mensagenschats','mensagenschats.user_from','!=','users.id')->where('users.id','!=',Auth::id())->distinct('users.id')->get()}}
	@endif
    {{ $meuUser=Auth::id() }}
    {{ $usersListChatIds[]=0 }}
</nav>

<nav class="container">
	<main>
		<input value="{{Auth::id()}}" id="meuValorLogadoUser" hidden/>

			<div class="layout">
				<!-- Start of Navigation -->
				<div class="navigation ">
					<div class="container shadow">
						<div class="inside">
							<div class="nav nav-tab menu">
								<button class="btn"><img class="avatar-xl" src="{{ asset('storage/img/'.Auth::user()->avatar) }}" alt="avatar"></button>
								<!-- <a href="#members" data-toggle="tab"><i class="material-icons">account_circle</i></a> -->
								<a href="#discussions" data-toggle="tab" class="active" onclick="esconderBodyMessag()" ><i class="material-icons active">chat_bubble_outline</i></a>

								 <a href="#grupo_talk" data-toggle="tab" class="f-grow1" onclick="esconderBodyMessag()"><i class="material-icons">people</i></a>
								 <a href="#clientes_group" data-toggle="tab" class="f-grow1"  onclick="esconderBodyMessag(3)" ><i class="material-icons">receipt</i></a>
								 <a href="#talcklose" data-toggle="tab" class="f-grow1" onclick="esconderBodyMessag(1)"><i class="material-icons">speaker_notes_off</i></a>

								 {{-- <a href="#notifications" data-toggle="tab" class="f-grow1"><i class="material-icons">group</i></a>  --}}
								 {{-- <a href="#notifications" data-toggle="tab" class="f-grow1"><i class="material-icons">notifications_none</i></a>  --}}

								<!-- <button class="btn mode"><i class="material-icons">brightness_2</i></button> -->
								<!-- <a href="#settings" data-toggle="tab"><i class="material-icons">settings</i></a> -->
								<!-- <button class="btn power" onclick="visitPage();"><i class="material-icons">power_settings_new</i></button> -->
							</div>
						</div>
					</div>
				</div>
				<!-- End of Navigation -->
				<!-- Start of Sidebar -->
				<div class="sidebar " style="background-color: #f6f6f6;" id="sidebar">
					<div class="container">
						<div class="col-md-12">
							<div class="tab-content">
								<!-- Start of Contacts -->
								
								<div class="tab-pane fade" id="talcklose">
									{{-- <div class="search">
										<form class="form-inline position-relative">
											<input type="search" class="form-control" id="people" placeholder="Encontre pessoas...">
											<button type="button" class="btn btn-link loop"><i class="material-icons">search</i></button>
											<input type="text" id="altertalk_aberta_close" value="server" hidden>
										</form>
										<button class="btn create" data-toggle="modal" data-target="#exampleModalCenter"><i class="material-icons">person_add</i></button>
									</div> --}}
									<div class="list-group sort">
										<button class="btn filterNotficationsBtn active show" data-toggle="list" data-filter="all"></button>
										<!-----			
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="online">Online</button>
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="offline">Offline</button>------>
									</div>
									<div class="discussions">
										<h1>Conversas Fechadas</h1>

										<div class="list-group" id="fechadasclosetalck" role="tablist">
														@php 
															$conversasMeusClientes=App\Models\Conversa::where('estado',"fechada")
																							->orderBy('id','desc')->get();

														@endphp
														<div id="sideConversasFechadas">
														@foreach($conversasMeusClientes as $msgcliente)
														
															<a href="#list-{{$msgcliente->getUser->id}}" class="userChat filterNotficationsBtn all single" onclick="abrirMsg( {{$msgcliente->user_id}},{{$msgcliente->id}} )" id="list" data-toggle="list" role="tab">
																<img class="avatar-md" src="{{ asset('storage/img/'.$msgcliente->getUser->avatar) }}" data-toggle="tooltip" data-placement="top" title="{{$msgcliente->getUser->name}}" alt="avatar">
																<div class="status">
																	<i class="material-icons">fiber_manual_record</i>
																</div>
																<div class="new bg-red">
																	<span>close</span>
																</div>
																<div class="data">
																	<h5>{{$msgcliente->getUser->name}}</h5>
																	<span>{{$msgcliente->created_at}}</span>
																	<p>{{$msgcliente->tema}}</p>
																</div>
																
															</a>
															@endforeach
													    </div>
                                               


										</div>
									</div>
								</div>
								<!-- End of Contacts -->

									<!-- begim of Grupos -->
								<div class="tab-pane fade" id="grupo_talk">
									<div class="search">
										<form class="form-inline position-relative">
											<input type="search" class="form-control" id="people" placeholder="Encontre grupos...">
											<button type="button" class="btn btn-link loop"><i class="material-icons">search</i></button>
											<input type="text" id="altertalk_aberta_close" value="server" hidden>
										</form>
										<button class="btn create" data-toggle="modal" data-target="#exampleModalCenter"><i class="material-icons">person_add</i></button>

									</div>
									<div class="list-group sort">
										<button class="btn filterNotficationsBtn active show" data-toggle="list" data-filter="all"></button>
										<!-----			
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="online">Online</button>
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="offline">Offline</button>------>
									</div>
									<div class="discussions">
										<h1>Grupos</h1>

										<div class="list-group" id="grupostalks" role="tablist">
														@php 
															$conversasMeusClientes=App\Models\Conversa::join('participantes','participantes.conversa_id','=','conversas.id')
																										->where('participantes.user_id',Auth::id())
																										->where('conversatipo',"grupo")
																										->orderBy('id','desc')
																										->select('conversas.created_at','conversas.id','conversas.tema','conversas.user_id')->get();

														@endphp
														<div id="sideConversasGrupo">
														@foreach($conversasMeusClientes as $msgcliente)
														
															<a href="#list-{{$msgcliente->getUser->id}}" class="userChat filterNotficationsBtn all single" onclick="abrirMsgGrupo( {{$msgcliente->user_id}},{{$msgcliente->id}} )" id="list" data-toggle="list" role="tab">
																<img class="avatar-md" src="{{ url('img/grupo1.png')}}" data-toggle="tooltip" data-placement="top" title="{{$msgcliente->getUser->name}}" alt="avatar">
																<div class="status">
																	<i class="material-icons">fiber_manual_record</i>
																</div>
																<div class="new bg-orange">
																	<span>++</span>
																</div>
																<div class="data">
																	<h5>{{$msgcliente->tema}}</h5>
																	{{-- <h5>{{$msgcliente->getUser->name}}</h5> --}}
																	<span>{{$msgcliente->created_at}}</span>
																	<p>Grupo</p>
																</div>
														
															</a>
															@endforeach
													    </div>
                                                    {{-- @endif --}}
												{{-- @endforeach --}}
											{{-- @endif --}}
											@foreach($Funcionarios as $funcionario)
                                              
											@endforeach


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

								<!-- Start of Discussions conversa entre funcioanrios -->
								<div id="discussions" class="tab-pane fade active show">
									<div class="search">
										<form class="form-inline position-relative">
											<input type="search" class="form-control" id="conversations" placeholder="Encontre os colegas...">
											<button type="button" class="btn btn-link loop"><i class="material-icons">search</i></button>
										</form>
										<!-- <button class="btn create" data-toggle="modal" data-target="#startnewchat"><i class="material-icons">create</i></button> -->
									</div>
									<div class="list-group sort">
										<button class="btn filterDiscussionsBtn active show" id="ajuda_show_grupo" onclick="esconderBodyMessag()" data-toggle="list" data-filter="read">Conversas</button>
										<button class="btn filterDiscussionsBtn	" data-toggle="list" onclick="esconderBodyMessag()" data-filter="contacto">Contactos</button>
										<!-- <button class="btn filterDiscussionsBtn" data-toggle="list" data-filter="unread">Grupos</button> -->
									</div>
									<div class="discussions">
									{{--	<h1>Conversas</h1> --}}
										@php 
											$funcionarios_gestdock=\App\Models\User::join('pessoas','pessoas.id','=','users.pessoa_id')
																					->join('funcionarios','funcionarios.user_id','=','users.id')
																					->where('users.id','!=',Auth::id())
																					->select('users.*')->get();
										@endphp

										<div class="list-group" id="contactosGestdock" role="tablist">
											<div id="meu_funcionarios">
												@foreach($funcionarios_gestdock as $funcionario)
												<a href="#" class="userChat filterDiscussions contacto single" onclick="clickUser({{$funcionario->id}})" data-toggle="list">
													<img class="avatar-md" src="{{asset('storage/img/'.$funcionario->avatar)}}" data-toggle="tooltip" data-placement="top" title="{{$funcionario->name}}" alt="{{$funcionario->name}}">
													<div class="status">
														<i class="material-icons online">fiber_manual_record</i>
													</div>
													<div class="data">
														<h5>{{$funcionario->name}}</h5>
														<!----<p>Sofia, Bulgaria</p>---->
													</div>
													<div class="person-add">
														<i class="material-icons">person</i>
													</div>
												</a>
												@endforeach
											</div>


										</div>

										<div class="list-group" id="chats" role="tablist">
										

														@php 
														//______MINHAS CONVERSAS________________
															$conversasFuncioarios_gestdock=App\Models\Conversa::join('participantes','participantes.conversa_id','=','conversas.id')
																												->where('conversas.estado',"aberta")
																												->where('conversas.originatario',"funcionario")
																												->where('conversas.conversatipo',"privada")
																												->where('participantes.user_id',Auth::user()->id)
																												->orderBy('conversas.id','desc')->distinct()
																												->select('conversas.created_at','participantes.user_id','conversas.id')->get();

														@endphp

															

														<div id="sidefuncioanriosConversas_single">
												
														@foreach($conversasFuncioarios_gestdock as $msgcliente)

														@php 
															$meusPartcipantes=\App\Models\Participante::join('conversas','conversas.id','=','participantes.conversa_id')
																				->where('conversas.id',$msgcliente->id)
																				->where('participantes.user_id','!=',Auth::id())
																				->select('participantes.user_id')->first();
														
														@endphp

															@php $meuPerfil=\App\Models\User::where('id',$meusPartcipantes->user_id)->first(); @endphp
															<a href="#list-{{$msgcliente->getUser->id}}" class="userChat filterDiscussions read single" onclick="abrirMsgFuncionario({{$meuPerfil->id}},{{$msgcliente->id}} )" id="list" data-toggle="list" role="tab">
																<img class="avatar-md" src="{{ asset('storage/img/'.$meuPerfil->avatar) }}" data-toggle="tooltip" data-placement="top" title="{{$meuPerfil->name}}" alt="avatar">
																<div class="status">
																	<i class="material-icons">fiber_manual_record</i>
																</div>
																<div class="new bg-yellow">
																	<span>+7</span>
																</div>
																<div class="data">
																	<h5>{{$meuPerfil->name}}</h5>
																	<span>{{$msgcliente->created_at}}</span>
																	<p>{{$msgcliente->tema}}</p>
																</div>
													
															</a>
															@endforeach
													    </div>
                                              


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

								<!--  -->
								<div class="tab-pane fade" id="clientes_group">
									<div class="search">
										<form class="form-inline position-relative">
											<input type="search" class="form-control" id="people" placeholder="Encontre grupos...">
											<button type="button" class="btn btn-link loop"><i class="material-icons">search</i></button>
											<input type="text" id="altertalk_aberta_close" value="server" hidden>
										</form>
										{{-- <button class="btn create" data-toggle="modal" data-target="#exampleModalCenter"><i class="material-icons">person_add</i></button> --}}

									</div>
									{{-- <div class="list-group sort">
										<button class="btn filterDiscussionsBtn active show" data-toggle="list" data-filter="all"></button>
										<!-----			
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="online">Online</button>
										<button class="btn filterNotficationsBtn" data-toggle="list" data-filter="offline">Offline</button>------>
									</div> --}}
									<div class="discussions">
										<h1>Clientes</h1>

										<div class="list-group" id="clientes_group" role="tablist">
															@php 
															$conversasMeusClientes=App\Models\Conversa::join('participantes','participantes.conversa_id','=','conversas.id')
																									  ->join('users','users.id','=','participantes.user_id')
																									  ->where('participantes.user_id',Auth::user()->id) 
																									  ->where('conversas.estado',"aberta")
																									  ->where('conversas.originatario',"cliente")
																									  ->orderBy('conversas.id','desc')->select('conversas.*')->distinct()->get();

														@endphp
														<div id="side_clientes" >
												
														@foreach($conversasMeusClientes as $msgcliente)
														
															<a href="#list-{{$msgcliente->getUser->id}}" class="userChat filterDiscussions read single" onclick="abrirMsg( {{$msgcliente->user_id}},{{$msgcliente->id}} )" id="list" data-toggle="list" role="tab">
																<img class="avatar-md" src="{{asset('storage/img/'.$msgcliente->getUser->avatar)}}" data-toggle="tooltip" data-placement="top" title="{{$msgcliente->getUser->name}}" alt="avatar">
																<div class="status">
																	<i class="material-icons">fiber_manual_record</i>
																</div>
																<div class="new bg-yellow">
																	<span>+7</span>
																</div>
																<div class="data">
																	<h5>{{$msgcliente->getUser->name}}</h5>
																	<span>{{$msgcliente->created_at}}</span>
																	<p>{{$msgcliente->tema}}</p>
																</div>
																
															</a>
															@endforeach
													    </div>
                                             
										</div>
									</div>
								</div>

								<!-- End of Discussions -->

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

				<div class="main  " id="sideMsgCliente">
					<div class="tab-content " id="nav-tabContent">
						<!-- Start of Babble -->
						<div class="babble tab-pane fade active show" id="list-chat" role="tabpanel" aria-labelledby="list-chat-list">
							<div class="chat " >
							<div class="top container">
								<div class="row">
								<div class="col-md-12">
									<div class="inside">
									<a href="#">
										<div class="imageUserView">

										<img class="avatar-md " src="" data-toggle="tooltip" data-placement="top" title="Lean" alt="avatar">
										</div>
									</a>
									<div class="status">
										<i class="material-icons offline iconeChatView">fiber_manual_record</i>
									</div>
									<div class="data">
										<h5><a href="#" class="nomeUserView"></a></h5>
										<span class="estadoUserView"> </span>
									</div>
									<button class="btn connect d-md-block d-none" name="2"><i class="material-icons md-30">phone_in_talk</i></button>
									<button class="btn connect d-md-block d-none" name="2"><i class="material-icons md-36">videocam</i></button>
									<button class="btn d-md-block d-none"><i class="material-icons md-30">info</i></button>
									<div class="dropdown">
										<button class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons md-30">more_vert</i></button>
										<div class="dropdown-menu dropdown-menu-right">
										<button class="dropdown-item connect" name="2"><i class="material-icons">phone_in_talk</i>Voice Call</button>
										<button class="dropdown-item connect" name="2"><i class="material-icons">videocam</i>Video Call</button>
										<hr>
										<button class="dropdown-item"><i class="material-icons">clear</i>Clear History</button>
										<button class="dropdown-item"><i class="material-icons">block</i>Block Contact</button>
										<button class="dropdown-item"><i class="material-icons">delete</i>Delete Contact</button>
										</div>
									</div>
									</div>
								</div>
								</div>
							</div>

                            <div class="content" id="content">
                                <div class="container">
                                    <div class="col-md-12 messageList">
                                                <nav class="chatNavigationArea">
                                                </nav>

                                            </div>
                                        </div>
                                    </div>
								<div class="message d-none">
									<img class="avatar-md" src="{{asset('img/avatars/avatar-female-5.jpg')}}" data-toggle="tooltip" data-placement="top" title="Keith" alt="avatar">
									<div class="text-main">
										<div class="text-group">
											<div class="text typing">
												<div class="wave">
													<span class="dot"></span>
													<span class="dot"></span>
													<span class="dot"></span>
												</div>
											</div>
										</div>
									</div>
								</div>
								@if($meusector->sector==="Pedidos e Consultas" || $meusector->sector==="adm")
								<div class="container">
									<div class="col-md-12">
										<div class="bottom">
											<form class="position-relative sendmsgCliente" name="sendmsgCliente" entype="multipart/form-​data">
												@csrf
												<input type="text" name="id_clicado" id="id_clicado" class="form-control" hidden />
                                       			<input type="text" name="id_conversa" id="id_conversa" class="form-control" hidden />
												   <input type="text" name="tipoMensagem" id="tipoMensagem" class="form-control" hidden />
												   <textarea class="form-control caixaMensagem" name="menssagem" placeholder="Escreva para "  rows="1"></textarea>
												   <button class="btn emoticons"><i class="material-icons">insert_emoticon</i></button>
												   <button type="submit" class="btn send"><i class="material-icons">send</i></button>
											   
												<label id="lbupload">
													<input type="file" id="minhaimagem" name="minhaimagem[]" multiple>
													<span class="btn attach d-sm-block d-none"><i class="material-icons">attach_file</i></span>
												</label>
												
											</form>
											
										</div>
									</div>
								</div>
								@else
								<div class="container" id="conteudoSendMsg_Grupo">
									<div class="col-md-12">
										<div class="bottom">
											<form class="position-relative sendmsgCliente" name="sendmsgCliente" entype="multipart/form-​data">
												@csrf
												<input type="text" name="id_clicado" id="id_clicado" class="form-control" hidden />
                                       			<input type="text" name="id_conversa" id="id_conversa" class="form-control" hidden />
												   <input type="text" name="tipoMensagem" id="tipoMensagem" class="form-control" hidden />
												   <textarea class="form-control caixaMensagem" name="menssagem" placeholder="Escreva para "  rows="1"></textarea>
												   <button class="btn emoticons"><i class="material-icons">insert_emoticon</i></button>
												   <button type="submit" class="btn send"><i class="material-icons">send</i></button>
											   
												<label id="lbupload">
													<input type="file" id="minhaimagem" name="minhaimagem[]" multiple>
													<span class="btn attach d-sm-block d-none"><i class="material-icons">attach_file</i></span>
												</label>
												
											</form>
											
										</div>
									</div>
								</div>
								@endif
							</div>
					{{--
								<!-- End of Chat -->
								<!-- Start of Call -->
								<div class="call" id="call1">
									<div class="content">
										<div class="container">
											<div class="col-md-12">
												<div class="inside">
													<div class="panel">
														<div class="participant">
															<img class="avatar-xxl" src="{{asset('img/avatars/avatar-female-5.jpg')}}" alt="avatar">
															<span>Connecting</span>
														</div>
														<div class="options">
															<button class="btn option"><i class="material-icons md-30">mic</i></button>
															<button class="btn option"><i class="material-icons md-30">videocam</i></button>
															<button class="btn option call-end"><i class="material-icons md-30">call_end</i></button>
															<button class="btn option"><i class="material-icons md-30">person_add</i></button>
															<button class="btn option"><i class="material-icons md-30">volume_up</i></button>
														</div>
														<button class="btn back" name="1"><i class="material-icons md-24">chat</i></button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- End of Call --> --}}
						</div>

						{{-- <div class="babble tab-pane fade" id="list-request" role="tabpanel" aria-labelledby="list-request-list">
							<!-- Start of Chat -->
							<div class="chat" id="chat3">
								<div class="top container">
									<div class="row">
										<div class="col-md-12">
											<div class="inside">
												<a href="#"><img class="avatar-md" src="{{asset('img/avatars/avatar-female-6.jpg')}}" data-toggle="tooltip" data-placement="top" title="Louis" alt="avatar"></a>
												<div class="status">
													<i class="material-icons offline">fiber_manual_record</i>
												</div>
												<div class="data">
													<h5><a href="#">Louis Martinez</a></h5>
													<span>Inactive</span>
												</div>
												<button class="btn disabled d-md-block d-none" disabled><i class="material-icons md-30">phone_in_talk</i></button>
												<button class="btn disabled d-md-block d-none" disabled><i class="material-icons md-36">videocam</i></button>
												<button class="btn d-md-block disabled d-none" disabled><i class="material-icons md-30">info</i></button>
												<div class="dropdown">
													<button class="btn disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled><i class="material-icons md-30">more_vert</i></button>
													<div class="dropdown-menu dropdown-menu-right">
														<button class="dropdown-item"><i class="material-icons">phone_in_talk</i>Voice Call</button>
														<button class="dropdown-item"><i class="material-icons">videocam</i>Video Call</button>
														<hr>
														<button class="dropdown-item"><i class="material-icons">clear</i>Clear History</button>
														<button class="dropdown-item"><i class="material-icons">block</i>Block Contact</button>
														<button class="dropdown-item"><i class="material-icons">delete</i>Delete Contact</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="content empty">
									<div class="container">
										<div class="col-md-12">
											<div class="no-messages request">
												<a href="#"><img class="avatar-xl" src="{{asset('img/avatars/avatar-female-6.jpg')}}" data-toggle="tooltip" data-placement="top" title="Louis" alt="avatar"></a>
												<h5> Ola! Está chamando você para uma conversa de vídeo. <span> Está esperando por você.</span></h5>
												<div class="options">
													<button class="btn button"><i class="material-icons">check</i></button>
													<button class="btn button"><i class="material-icons">close</i></button>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="container">
									<div class="col-md-12">
										<div class="bottom">
											<form class="position-relative formMessage w-100">
												<textarea class="form-control " id="messageContent" placeholder="" rows="1" disabled></textarea>
												<button class="btn emoticons disabled" disabled><i class="material-icons">insert_emoticon</i></button>
												<button class="btn send disabled" disabled><i class="material-icons">send</i></button>
											</form>
											<label>
												<input type="file" disabled>
												<span class="btn attach disabled d-sm-block d-none"><i class="material-icons">attach_file</i></span>
											</label>
										</div>
									</div>
								</div>
							</div>
							<!-- End of Chat -->
						</div> --}}
						<!-- End of Babble -->
					</div>

				</div>
				
				<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="requests">
							<div class="title">
								<h1>Criar Grupo</h1>
								<button type="button" class="btn" data-dismiss="modal" aria-label="Close"><i class="material-icons">close</i></button>
							</div>
							<div class="content">
								@include('usuarios.clientes.chat.meuselect')
							</div>
						</div>
					</div>
				</div>

			</div> <!-- Layout -->
		</main>
		<audio id="notificacao">
		  <source src="{{asset('som/beep.wav')}}" type="audio/mpeg">
		</audio>
		<script src="{{ asset('/js/app.js') }}"></script>
		
		<script src="{{asset('js/swipe.min.js')}}"></script>
		{{-- <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script> --}}

	<script >

//alert($idLogadoUserjs);
		// 	$(function(){
		// 		var generalMessage="";
        //         var idUser='{{ $vectorUsers }}';
        //         var generalIdTo=idUser;
        //         //clickUser(idUser);

		// 		var x = document.getElementById("notificacao");

		// 		function playNotificacao() {
		// 		  x.play();
		// 		}


        //         Echo.channel('canalChat')
        //         .listen('ChatComm', (e) => {
        //     		//  alert(countChatMessage)
        //             var chat=e
        //             if(chat.chat.user_to=={{ $meuUser }}){
        //                 console.log('Para mim')
        //                 if(generalIdTo==0){

        //                 }else if(chat.chat.user_from==generalIdTo){

        //                     $(".chatNavigationArea").append(chat.mensagem);
        //                     playNotificacao();
        //                     function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
        //                     scrollToBottom(document.getElementById('content'));
        //                 }

        //             }else{
        //                 console.log('Não é para mim')

        //             }
        //         });


		// 		// $(".userChat").click(function(){

		// 		// 	var idUser=$(this).find('input').val();
        //         //     generalIdTo=idUser
		// 		// 	//clickUser(idUser);
		// 		// });

		// 	$(".formMessage").submit(function(e){
		// 		e.preventDefault();
        //         if (generalMessage===''){
        //             $(".caixaMensagem").val("")

        //         }else{
		// 			return;
        //             $.post( "{{ route('us.chat.submitMessage') }}",
        //             { '_token':  '{{ csrf_token()  }}', 'idUserTo':generalIdTo, 'Message':generalMessage},
        //             function(data){
        //                 let data3=$.parseJSON(data);
        //                 $(".mensagem"+generalIdTo).text(generalMessage);
        //                 if(data3[0].qtdMensagens>1){
        //                     $(".chatNavigationArea").append(data3[0].chat);
        //                 }else{
        //                     $(".chatNavigationArea").empty();
        //                     $(".chatNavigationArea").append(data3[0].chat);
        //                 }
        //                 function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
        //                 scrollToBottom(document.getElementById('content'));
        //             }).fail(function(){
        //                 // alert("Não foi possível enviar esta mensagem, tente novamente mais tarde");
        //             });

        //             $(".caixaMensagem").val("")
        //             generalMessage=$(this).val();
        //         }

		// 	});
			
		// 	$(".caixaMensagem").on('keypress keyup keydown change',function(e){
		// 		 generalMessage=$(this).val();

		// 	});
        //     $(".caixaMensagem").on('keypress ',function(e){
		// 		 var code = (e.keyCode ? e.keyCode : e.which);
        //         if(code == 13) {
        //             $(".send").click();


        //         }
		// 	});
		// })
		function mudarEstado(el) {
			var display = document.getElementById(el).style.display;
			if(display == "none")
				console.log("nao faz nada pk já esta invisivel")
				else	
				document.getElementById(el).style.display = 'none';
    	}

            function clickUser(idUser)
			{
				generalIdTo=idUser;
                console.log(generalIdTo)
                $(".generalIdTo").val(idUser);
				$(".chatNavigationArea").empty();
                $.post( "{{ route('us.chat.getChat') }}",
                { '_token':  '{{ csrf_token()  }}', 'idUser':generalIdTo},
                function(data){

                    let data3=$.parseJSON(data);
					console.log("hayy "+generalIdTo);
                   
                    $(".chatNavigationArea").append(data3[0].chat);

                    $(".imageUserView").empty();
                    $(".imageUserView").append(data3[0].avatar);
					$(".caixaMensagem").val("");
                    $(".caixaMensagem").attr('placeholder','Escreva para '+data3[0].nome)

                    $(".iconeChatView").removeClass('online');
                    $(".iconeChatView").removeClass('offline');
                    $(".iconeChatView").addClass(data3[0].icon);
                    $(".nomeUserView").text(data3[0].nome);
                    $(".estadoUserView").text(data3[0].estado);
                    let avatar=data3[0].avatar;

						if(data3[0].idconversa==0 ||  data3[0].idconversa==null )
						{
							console.log("id da conversa via contactos "+data3[0].idconversa)
							$('#id_conversa').val("0");
						}else {$('#id_conversa').val(data3[0].idconversa);}
						
						$('#id_clicado').val(idUser);
					console.log("id da conversa via contactos verifiado "+ $("#id_conversa").val() ) 
					
					console.log("id clicado "+$('#id_clicado').val())
                    $('#tipoMensagem').val("privada");
					function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
                    scrollToBottom(document.getElementById('content'));
					$("#conteudoSendMsg_Grupo").show();
					$("#conteudoSendMsg_Grupo").show();
					showBodyMessag();
                   return;
                }).fail(function(){
                     alert("Infelizmente falhou o acesso à esta função");
                });
            }
	</script>

		<script>
	
			function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
			scrollToBottom(document.getElementById('content'));
		</script>



</nav>


<!---- ___________________________#Stress__________Adilson MNauel_______________------->

<script type="text/javascript">
var $idLogadoUserjs=$("#meuValorLogadoUser").val();

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

    //file que busca a imagen
//const defaultBtn = document.querySelector("#minhaimagem");
//botao buscar e activar o emtodod
//const customBtn = document.querySelector("#botaoActive");

//const cancelBtn = document.querySelector("#cancel-btn i");
//const img = document.querySelector("#imageSend");
//const divimg = document.querySelector(".me");

	let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
	function defaultBtnActive(){
		$("#minhaimagem").click();
	}
	$("#minhaimagem").on("change", function()
	{	
    	//var painel=document.querySelector(".add");
   

        var x = document.getElementById("minhaimagem");
        console.log("entrando..");
                var txt = "";
                if ('files' in x) {
                    if (x.files.length == 0)
                    console.log(x.files.length);
                }

                for (var i = 0; i < x.files.length; i++) 
                {
                    console.log(""+ i+1);
               
                        const file = this.files[i];
                            if(file)
                            {
                                const reader = new FileReader();
                                reader.onload = function()
                                {
                                    const result = reader.result;
                                    
                                    let idVariante=Math.floor(Math.random() * 5000);
                                    //imagem=document.createElement("img");
                                    //imagem.classList.add("img"+idVariante);
                                    //imagem.setAttribute("id","imageSend"+idVariante);

                                        console.log("meu nme"+file.name);
                                        console.log('File is not an image.', file.type, file);

                                    
                                    //verificar formato
                                    //var fileName = $('input[type="file"]')[i].file[i].name;
                                   
                                       // console.log(file.name.split('.'));
                                       var caminho_imagem="";
                                       nome=file.name;
									   console.log("tamanho do meu arquivo "+file.size);
									   var tamanho_doc=file.size;
                                        const mynomeImage=nome;
                                        nome=nome.split('.');
                                        nome=nome[nome.length-1];
										formato=['xlsx','pptx','excel','xml','xlsm','pdf','xlsx','doc','xml','txt','eps','psd'];
                                            //caso nao forem nehum destes formatos resetar o Inpu File
                                            //dar um retun sem previsualizra a imagem
                                        
                                        if(formato.indexOf(nome)==-1)
                                            caminho_imagem="";
                                         else
                                             caminho_imagem="tem arquivo";
    
                                            console.log(formato+"    "+nome);
                                       
                                    //var d=fileName.textContent[-1];
                                    //console.log(nome[nome.length-1]);
                              
                                    if( !(caminho_imagem==" " || caminho_imagem.length<=1)){
                                        console.log(" ficheiro diferente"+result);
											//cacluos de bytes
											var meutamanho="";
												var produtoMB=(tamanho_doc*0.000001);
												var	produtoKB=(tamanho_doc*0.001);
													if( (produtoMB>=0.1 ) )
													{      produtoMB=produtoMB.toFixed(2);
															meutamanho=produtoMB+"MB";
													} 
													else{
														produtoKB=produtoKB.toFixed(2);
														meutamanho=produtoKB+"KB";
														}

										$(".chatNavigationArea").append("<div class=\"message me\">"+
												"<div class=\"text-main \">"+
													"<div class=\"text-group me\">"+
														"<div class=\"text me\">"+
															"<div class=\"attachment\">"+
																"<button class=\"btn attach\">"+
																	"<div class=\"botaorem\" onclick=\"deletardiv(this)\" ><i class=\"fa fa-times-circle btnclosenew\" aria-hidden=\"true\"></i></div>"+
																	"<i class=\"material-icons md-18\" id=\"botaosucess\" hidden>insert_drive_file</i>"+
																"</button>"+
																"<div class=\"file\">"+
																	"<h5><a href=\""+result+"\" target=\"_blank\">"+mynomeImage+"</a></h5>"+
																	"<span>"+meutamanho+" Documento </span>"+
																"</div>"+
															"</div>"+
														"</div>"+
													"</div>"+
													"<span><i class=\"material-icons mychek\" >check</i>10:21 PM</span>"+
												"</div></div>");
												$(".mychek").hide();				
										 scrollToBottom(document.getElementById('content'));
                                    }else{
									
									$(".chatNavigationArea").append("<div class=\"message me\">"+
																"<div class=\"text-main\">"+
																	"<div class=\"my img\">"+
																		"<div class=\"widget-tools pull-right\">"+
																			"<button type=\"button\" onclick=\"deletardiv2(this)\" class=\"btn btn-remove closebotao\">"+
																				"<i class=\"fa fa-times-circle\"></i>"+
																			"</button>"+
																		"</div>"+
																	
																		"<img class=\"avatar\" src=\"dist/img/avatars/avatar-female-5.jpg\" data-toggle=\"tooltip\" data-placement=\"top\" id=\"image"+idVariante+"\"  title=\""+mynomeImage+"\" alt=\"avatar\" style=\"width:100px;height:100px;\" >"+
																	"</div>"+	
																											
																		"<span><i class=\"material-icons mychek\" >check</i>10:21 PM</span>"+
																"</div></div>");


                                    //$(".chatNavigationArea").append("<div class=\"message me a\"><div class=\"col-lg-4 col-md-4 col-sm-18\" id=\"myCapaImagem\"><div><div class=\"cabeca\"><div class=\"widget-tools pull-right\"><button type=\"button\" onclick=\"deletardiv(this)\" class=\"btn btn-remove closebotao\" id=\"closebotao\"><i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i> </button></div></div><div class=\"widget-body\" id=\"divafterbody\"><img src=\"bhjh\" class=\"myhover\" id=\"image"+idVariante+"\"  data-toggle=\"tooltip\" title=\""+mynomeImage+"\"  style=\"width:120px\"></div><div id=\"check\" class=\"mychek\"><i class=\"fa fa-check\" aria-hidden=\"true\"></i></div></div></div></div>");
                                    //$(".add").append("<div class=\"message me\"><div class=\"col-lg-4 col-md-4 col-sm-18\" id=\"myCapaImagem\"><div class=\"widget bg-teal\"><div class=\"widget-header\"><h5 class=\"widget-title\"><!---Remover----></h5><div class=\"widget-tools pull-right\"><button type=\"button\" class=\"btn btn-widget-tool remove-widget ik ik-x\"></button></div></div><div class=\"widget-body\" id=\"divafterbody\"><img src=\"bhjh\" id=\"imageSend2\" alt=\"de\" style=\"width:120px\"></div></div></div></div>");
                                    $(".mychek").hide();
                                        //console.log(" imagem "+result);
                                     $("#image"+idVariante).attr("src",result);
									 scrollToBottom(document.getElementById('content'));
                                    }
                                

                                }

                                        //img.src=result;
                                        //myCapaImagem.append("");
                                        //wrapper.style.display="block";
                                    reader.readAsDataURL(file);
                                
									scrollToBottom(document.getElementById('content'));
                            }
                        }
                

 	});

	function abrirMsg(id,idconversa)
	{	
		$(".caixaMensagem").val("")
		//$("#botaoconversa").show();
		console.log(" minha conversa")
		alert(""+id+" id conversa "+idconversa);
		$("#minhaimagem").val("");
		$('#id_clicado').val("");
			$(".chatNavigationArea").empty();
		showBodyMessag();
		$.post( "{{ route('us.GestChat.chat.listar.cliente') }}", { '_token':'{{ csrf_token() }}' , 'id':id,'id_conversa':idconversa})
			.done(function( data ) {
				if($("#altertalk_aberta_close").val()=="close_talk")
				{	 console.log("desabilita o form ");
				//$(".sendmsgCliente").prop('disabled', true);
				$(".sendmsgCliente").hide();
			}else{
				//$(".sendmsgCliente").prop('disabled', false);
				$(".sendmsgCliente").show();
			}

			console.log("entrar na abrr conversa")

					let data3=$.parseJSON(data);
					//console.log("hayy "+generalIdTo);
                    $(".chatNavigationArea").empty();
					if(data3[0].permissao=="close")
					{		console.log("heyy nao abre msg e não envia 1")
							$("#conteudoSendMsg_Grupo").hide();
					}else {
							console.log("heyy nao abre msg e não envia "+data3[0].permissao)
						$("#conteudoSendMsg_Grupo").show();
					}
                    $(".chatNavigationArea").append(data3[0].chat);

                    $(".imageUserView").empty();	
                    $(".imageUserView").append(data3[0].avatar);
					$(".caixaMensagem").val("");
                    $(".caixaMensagem").attr('placeholder','Escreva para '+data3[0].nome)

                    $(".iconeChatView").removeClass('online');
                    $(".iconeChatView").removeClass('offline');
                    $(".iconeChatView").addClass(data3[0].icon);
                    $(".nomeUserView").text(data3[0].nome);
                    $(".estadoUserView").text(data3[0].estado);
                    let avatar=data3[0].avatar;
					
					$('#id_conversa').val(idconversa);
					$('#id_clicado').val(id);
					$("#tipoMensagem").val("cliente_responder")

                    //$('#tipoMensagem').val("cliente");
					//$("#conteudoSendMsg_Grupo").show();
					//showBodyMessag();
					
				//End gelson

				scrollToBottom(document.getElementById('content'));
					//$('#id_conversa').val(idconversa);
					//$("#conteudoSendMsg_Grupo").show();

				$(".caixaMensagem").val("");
				scrollToBottom(document.getElementById('content'));



			}).fail(function(){
				alert("Erro ");
			});

	}

	function abrirMsgGrupo(id,idconversa)
	{	
		//$("#botaoconversa").show();
		alert(""+id+" id, Grupo "+idconversa);
		$(".caixaMensagem").val("")
		$('#id_clicado').val("");
		$("#minhaimagem").val("");
		$(".chatNavigationArea").empty();
		showBodyMessag();
		$.post( "{{ route('us.GestChat.chat.listar.gest.grupo') }}",{ '_token':'{{ csrf_token() }}' , 'id':id,'id_conversa':idconversa})
			.done(function( data ) {
				//$('.chatNavigationArea').html(data);
				
						//ideia do gelson
				let data3=$.parseJSON(data);
					//console.log("hayy "+generalIdTo);
                    //$(".chatNavigationArea").empty();
                    $(".chatNavigationArea").append(data3[0].chat);

                    $(".imageUserView").empty();	
                    $(".imageUserView").append(data3[0].avatar);
					$(".caixaMensagem").val("");
                    $(".caixaMensagem").attr('placeholder','Escreva para '+data3[0].nome)

                    $(".iconeChatView").removeClass('online');
                    $(".iconeChatView").removeClass('offline');
                    $(".iconeChatView").addClass(data3[0].icon);
                    $(".nomeUserView").text(data3[0].nome);
                    $(".estadoUserView").text(data3[0].estado);
                    let avatar=data3[0].avatar;

                    $('#tipoMensagem').val("grupo");
					$("#conteudoSendMsg_Grupo").show();
					showBodyMessag();
				//End gelson

				scrollToBottom(document.getElementById('content'));
					$('#id_conversa').val(idconversa);
					$("#conteudoSendMsg_Grupo").show();


			}).fail(function(){
				alert("Erro ");
			});

	}
	function abrirMsgFuncionario(id_clicado,idconversa)
	{	
		//$("#botaoconversa").show();
		alert("conversa "+idconversa+" id do wi "+id_clicado);
		$(".caixaMensagem").val("")
		$('#id_clicado').val("");
		$('#id_conversa').val("");
		$(".chatNavigationArea").empty();
		showBodyMessag();
		$.post( "{{ route('us.GestChat.chat2.listar.funcionarios') }}",{ '_token':'{{ csrf_token() }}' ,'id_clicado':id_clicado,'id_conversa':idconversa})
			.done(function( data ) {
				//$('.chatNavigationArea').html(data);
				if(data==="")
				{
					console.log("nao tens permissão para ver esta mensage");
					return;
				}

				//ideia do gelson
				let data3=$.parseJSON(data);
					//console.log("hayy "+generalIdTo);
                    $(".chatNavigationArea").append(data3[0].chat);

                    $(".imageUserView").empty();	
                    $(".imageUserView").append(data3[0].avatar);
					$(".caixaMensagem").val("");
                    $(".caixaMensagem").attr('placeholder','Escreva para '+data3[0].nome)

                    $(".iconeChatView").removeClass('online');
                    $(".iconeChatView").removeClass('offline');
                    $(".iconeChatView").addClass(data3[0].icon);
                    $(".nomeUserView").text(data3[0].nome);
                    $(".estadoUserView").text(data3[0].estado);
                    let avatar=data3[0].avatar;

                    $('#tipoMensagem').val("privada");
					$("#conteudoSendMsg_Grupo").show();
					$("#conteudoSendMsg_Grupo").show();
					showBodyMessag();
				//End gelson

				scrollToBottom(document.getElementById('content'));
					$('#id_conversa').val(idconversa);
					$('#id_clicado').val(data3[0].id_clicado);
					$("#conteudoSendMsg_Grupo").show();
				
			}).fail(function(){
				alert("Erro ");
			});

	}

	$(function () {
        $('form[name="sendmsgCliente"]').submit(function (data) {
            data.preventDefault();

            var form = document.forms.namedItem("sendmsgCliente");
			let primeiravez=$('#id_conversa').val();
			//
			//Mensagem Par Cliente

			if($("#tipoMensagem").val()=="cliente_responder")
			{
						console.log("envira msg no cliente");
								//___________Caso No tiver MIDIA
						if( $('#minhaimagem').get(0).files.length === 0 ) {
							console.log("No files selected.");
							
							$.ajax({
							url: "{{route('us.GestChat.enviar.messages.funcoianrio.porcliente')}}",
							type: "post",
							data: $(this).serialize(),
							success: function (data) {
							
								let data3=$.parseJSON(data);
														//console.log("hayy "+generalIdTo);
														//$(".chatNavigationArea").empty();
														$(".chatNavigationArea").append(data3[0].chat);
														$(".caixaMensagem").val("");
														$(".caixaMensagem").attr('placeholder','Escreva para sua mensagem ')

													scrollToBottom(document.getElementById('content'));
														//$('#id_conversa').val(data3[0].id_conversa);
														//$('#id_clicado').val(data3[0].id_userto);
														//$("#conteudoSendMsg_Grupo").show();
								},
								error:function(error)
								{	
									console.log("erro ao enviar msg sem midia particula")
								}
				
							});
				
							return;
						}
						console.log("tem imagem");
		
					var oData = new FormData(form);

					if($(".caixaMensagem").val()==="" || $(".caixaMensagem").val()==null)
					{	console.log("caixa vazia");
						return;
					}

					console.log(" continua...");
						var oReq = new XMLHttpRequest();
						oReq.open("POST", "{{route('us.GestChat.enviar.messages.funcoianrio.porcliente') }}", true);
						oReq.respondeType='json';
						oReq.onload = function (e) {
							if (oReq.readyState === 4) {
								if (oReq.status === 200) {
									console.log(oReq.response);
									msgs=oReq.response;
									
									let data3=$.parseJSON(msgs);


									//remover o X de close 
									$(".closebotao").each(function(i){
										// Aplica a cor de fundo
										$(this).hide(900);
									});
									//aparecer o bom lentantmente
									$(".mychek").each(function(i){
										console.log("hayy");
										$(this).show(1300);
										
									});
									//btao remover
									$("#botaoconversa").hide();
									$(".botaorem").hide();
									//bom de enviado
									$("#mychekDoc").show();
									//botao redondo
									$("#botaosucess").show();
									//console.log(msgs);

									$(".chatNavigationArea").append(data3[0].chat);
											$(".caixaMensagem").val("");
											$(".caixaMensagem").attr('placeholder','Escreva uma mensagem ')

											// $('#tipoMensagem').val("privada");
											// $("#conteudoSendMsg_Grupo").show();
											//showBodyMessag();
													//End gelson
											scrollToBottom(document.getElementById('content'));
											$('#id_conversa').val(data3[0].id_conversa);
											$('#id_clicado').val(data3[0].id_userto);
							
										$("#minhaimagem").val("");

								} else {
								console.error(oReq.statusText);
								}
							}
						};
							oReq.onerror = function (e) {
							console.error(oReq.statusText);
							};
							oReq.send(oData);




				return;
			}



			//primeira Conversa Criar conversas
			if(primeiravez==="0")
			{

				console.log("primeira vee");

						if($('#minhaimagem').get(0).files.length > 0 ) 
						{
    						console.log("com files selected, Primeira vez.");
							console.log("tem imagem");
	
									var oData = new FormData(form);

										if($(".caixaMensagem").val()==="" || $(".caixaMensagem").val()==null)
										{	console.log("caixa vazia");
											return;
										}

										console.log(" continua...");
											var oReq = new XMLHttpRequest();
											oReq.open("POST", "{{route('us.GestChat.chat2.create2.talk2.funcionarios.img') }}", true);
											oReq.respondeType='json';
											oReq.onload = function (e) {
												if (oReq.readyState === 4) {
													if (oReq.status === 200) {
														console.log(oReq.response);
														msgs=oReq.response;
														
														let data3=$.parseJSON(msgs);


														//remover o X de close 
														$(".closebotao").each(function(i){
															// Aplica a cor de fundo
															$(this).hide(900);
														});
														//aparecer o bom lentantmente
														$(".mychek").each(function(i){
															console.log("hayy");
															$(this).show(1300);
															
														});
														//btao remover
														$("#botaoconversa").hide();
														$(".botaorem").hide();
														//bom de enviado
														$("#mychekDoc").show();
														//botao redondo
														$("#botaosucess").show();
														//console.log(msgs);

														$(".chatNavigationArea").append(data3[0].chat);
																$(".caixaMensagem").val("");
																$(".caixaMensagem").attr('placeholder','Escreva uma mensagem ')

																// if(data3[0].id_userto==="" || data3[0].id_userto==null)
																// 	$('#tipoMensagem').val("grupo");
																// $("#conteudoSendMsg_Grupo").show();
																//showBodyMessag();
																		//End gelson
																scrollToBottom(document.getElementById('content'));
																$('#id_conversa').val(data3[0].id_conversa);
																$('#id_clicado').val(data3[0].id_userto);
												
															
														$("#minhaimagem").val("");

													} else {
													console.error(oReq.statusText);
													}
												}
											};
												oReq.onerror = function (e) {
												console.error(oReq.statusText);
												};
												oReq.send(oData);
											

							return;
						}

				//$(".chatNavigationArea").empty();
						
						 //enviar ou criar convesra particular
						 $.ajax({
							url: "{{route('us.GestChat.chat.create.talk.funcionarios')}}",
							type: "post",
							data: $(this).serialize(),
							success: function (data) {
																	
											let data3=$.parseJSON(data);
												//console.log("hayy "+generalIdTo);
												$(".chatNavigationArea").empty();
												$(".chatNavigationArea").append(data3[0].chat);
												$(".caixaMensagem").val("");
												$(".caixaMensagem").attr('placeholder','Escreva sua mensagem ')

												// $('#tipoMensagem').val("privada");
												showBodyMessag();
											//End gelson

											scrollToBottom(document.getElementById('content'));
												$('#id_conversa').val(data3[0].id_conversa);

												// if(idLogadoUserjs==data3[0].meuidLodadophp){
												// 	console.log("veja esta comparacao e quem mandou a conversa"+ idLogadoUserjs==data3[0].meuidLodadophp)
												// 	$("#sidefuncioanriosConversas_single").prepend(data3[0].auutnto_conversa);
												// }
												// if(data3[0].id_userto==="" || data3[0].id_userto==null)
												// 	$('#tipoMensagem').val("grupo");
												$('#id_clicado').val(data3[0].id_userto);
												//$("#conteudoSendMsg_Grupo").show();
							 	},
								 error: function(error){
									 console.log("erro ao criar conversa particula")
								 }
							})

						
				return;

			}


			console.log("secod vez e mais");
		
			//___________Caso No tiver MIDIA
				if( $('#minhaimagem').get(0).files.length === 0 ) {
    				console.log("No files selected.");
					
					$.ajax({
					url: "{{route('us.GestChat.enviar.messages')}}",
					type: "post",
					data: $(this).serialize(),
					success: function (data) {
					
						let data3=$.parseJSON(data);
												//console.log("hayy "+generalIdTo);
												//$(".chatNavigationArea").empty();
												$(".chatNavigationArea").append(data3[0].chat);
												$(".caixaMensagem").val("");
												$(".caixaMensagem").attr('placeholder','Escreva para sua mensagem ')

												// $('#tipoMensagem').val(data3[0].id_conversa);
												// $("#conteudoSendMsg_Grupo").show();
												// $("#conteudoSendMsg_Grupo").show();
												showBodyMessag();
											//End gelson

											scrollToBottom(document.getElementById('content'));
												$('#id_conversa').val(data3[0].id_conversa);
												$('#id_clicado').val(data3[0].id_userto);
												//$("#conteudoSendMsg_Grupo").show();
						},
						error:function(error)
						{	
							console.log("erro ao enviar msg sem midia particula")
						}
		
					});
		
					return;
				}
				console.log("tem imagem");
	

            // var id_clicado=$("#id_clicado").val();
            // var id_conversa=$("#id_conversa").val();
            // var menssagem=$("#caixaMensagem").val();
                    
            //     const form_data = new FormData();

            //     // Read selected files
            //     var totalfiles = document.getElementById('minhaimagem').files.length;
            //     for (var index = 0; index < totalfiles; index++) {
            //     form_data.append("myfiles[]", document.getElementById('minhaimagem').files[index]);
            //     }

           var oData = new FormData(form);
            // for(let i=0;i<vectorRemover.length;i++)
            // {
            // //oData.append('remover[]',vectorRemover[i]);
            // }

            if($(".caixaMensagem").val()==="" || $(".caixaMensagem").val()==null)
            {	console.log("caixa vazia");
                return;
            }

			console.log(" continua...");
                var oReq = new XMLHttpRequest();
                oReq.open("POST", "{{route('us.GestChat.enviar.messages.midea') }}", true);
                oReq.respondeType='json';
                oReq.onload = function (e) {
                    if (oReq.readyState === 4) {
                        if (oReq.status === 200) {
                            console.log(oReq.response);
                            msgs=oReq.response;
							
							let data3=$.parseJSON(msgs);


                            //remover o X de close 
                            $(".closebotao").each(function(i){
                                // Aplica a cor de fundo
                                $(this).hide(900);
                            });
                            //aparecer o bom lentantmente
                            $(".mychek").each(function(i){
                                console.log("hayy");
                                $(this).show(1300);
                                
                            });
							//btao remover
                            $("#botaoconversa").hide();
							$(".botaorem").hide();
							//bom de enviado
							$("#mychekDoc").show();
							//botao redondo
							$("#botaosucess").show();
                            //console.log(msgs);

							$(".chatNavigationArea").append(data3[0].chat);
									$(".caixaMensagem").val("");
									$(".caixaMensagem").attr('placeholder','Escreva uma mensagem ')

									// $('#tipoMensagem').val("privada");
									// $("#conteudoSendMsg_Grupo").show();
									//showBodyMessag();
											//End gelson
									scrollToBottom(document.getElementById('content'));
									$('#id_conversa').val(data3[0].id_conversa);
									$('#id_clicado').val(data3[0].id_userto);
                       
								$("#minhaimagem").val("");

                        } else {
                        console.error(oReq.statusText);
                        }
                    }
                };
                    oReq.onerror = function (e) {
                    console.error(oReq.statusText);
                    };
                    oReq.send(oData);
                
        });
    });

	Echo.channel('meucanal').listen('EnviarMensagemCliente', (e)=>{
        console.log(e);
         var id=e.id;
		 var idrementente=e.idrementente;
        console.log("id conversa "+id);
        var id_clicado=document.querySelector("#id_clicado").value;
        console.log("id rementente "+idrementente);
            $.post( "{{ route('us.GestChat.chat.open.msg') }}", { '_token':'{{ csrf_token() }}' , 'idrementente':idrementente,'id':id})
            .done(function( data ) {
				console.log("exibe aqui fisrt");

				let data3=$.parseJSON(data);
				//______verificarse o id que foi clicado equivale para abrir esta mensagem
				console.log($('#id_conversa').val()+"  id q veio "+data3[0].id_conversa_confirm)
				if($('#id_conversa').val()==data3[0].id_conversa_confirm)
				{	console.log("siguinifa q tu pode ver a mensagem")
					$(".chatNavigationArea").append(data3[0].chat);
					scrollToBottom(document.getElementById('content'));
                }return;
            }).fail(function(){
                console.log("Erro ao abrir mensagem entre duas pessoas ");
            });
    
    
    });

	Echo.channel('trocaMsgCliente_fucionario').listen('TrocaMsgClienteFuncionario', (e)=>
    {
        console.log(e);
         var idChatMsg=e.idChatMsg;
        console.log("id conversa "+idChatMsg);
        var id_clicado=document.querySelector("#id_clicado").value;
    
            $.post( "{{ route('us.GestChat.listar.messages.funcionario.porcliente') }}", { '_token':'{{ csrf_token() }}' ,'id':idChatMsg})
            .done(function( data ) {
				console.log("exibe aqui fisrt receber msg do cliente exibir aqui");
				console.log(data);
				if(data=="" || data==null)
				{	console.log("vc não pode ver esta mensgem")
					return;
				}
				let data3=$.parseJSON(data);
				//______verificarse o id que foi clicado equivale para abrir esta mensagem
				console.log($('#id_conversa').val()+"  id q veio "+data3[0].id_conversa_confirm)
				if($('#id_conversa').val()==data3[0].id_conversa_confirm)
				{	
					console.log("siguinifa q tu pode ver a mensagem")
					$(".chatNavigationArea").append(data3[0].chat);
					scrollToBottom(document.getElementById('content'));
                }return;
            }).fail(function(){
                console.log("Erro ao abrir mensagem no cliente em troca de mensagemn ");
            });
    
        
    });

	Echo.channel('criartalk').listen('CriarTalk', (e)=>{
        console.log(e);
         var idEnvConversaNew=e.idEnvConversaNew;
        console.log("id da nova conversa "+idEnvConversaNew);
        //var id_clicado=document.querySelector("#id_clicado").value;
        //console.log(id_clicado);
            $.post( "{{ route('us.GestChat.chat.create.conversa.funcionarios') }}", { '_token':'{{ csrf_token() }}' ,'idEnvConversaNew':idEnvConversaNew,})
            .done(function( data ) {
                 $("#side_clientes").prepend(data);
              
            }).fail(function(){
                console.log("Erro ao exibir os assuntoas para o cliente");
            });
    
    
    });

	Echo.channel('exbirAssuntosCliente_Funcionario').listen('ExibirAssuntoCliFun', (e)=>{
        console.log(e);
         var idEnvConversaNew=e.idEnvConversaNew;
        console.log("id da nova conversa "+idEnvConversaNew);
        //var id_clicado=document.querySelector("#id_clicado").value;
        //console.log(id_clicado);
            $.post( "{{ route('us.GestChat.chat.create.conversa.cliente.funcionario') }}", { '_token':'{{ csrf_token() }}' ,'idEnvConversaNew':idEnvConversaNew,})
            .done(function( data ) {
                // $("#side_clientes").prepend(data);
				 			//ideia do gelson
							 if(data=="")
							 {	 console.log("noa podes ver esta mensagem do cliente")
							 	return;
							}
							 let data3=$.parseJSON(data);

							//  if(data3[0].permissao=="close")
							//  	$("#conteudoSendMsg_Grupo").hide();
							// else $("#conteudoSendMsg_Grupo").show();
				
                    $("#side_clientes").prepend(data3[0].chat);
					console.log(" exibe aesta ensagem do cliente ");
              
            }).fail(function(){
                console.log("Erro ao exibir os assuntoas para o cliente");
            });
    
    
    });

	Echo.channel('criargrupo').listen('CriarGrupo', (e)=>{
        console.log(e);
         var idConversa_newGrupo=e.idConversa_newGrupo;
        console.log("id da nova conversa"+idConversa_newGrupo);
            $.post( "{{ route('us.GestChat.conversa.grupo.assuntos') }}", { '_token':'{{ csrf_token() }}' ,'idConversa_newGrupo':idConversa_newGrupo})
            .done(function( data ) {
                $("#sideConversasGrupo").prepend(data);
                window.scrollTo(40, 0);
                $("#sideConversasGrupo").animate({
                        scrollTop: $(".content").get(0).scrollHeight
                    }, 1500);

					scrollToBottom(document.getElementById('content'));

            }).fail(function(){
                console.log("erro ao criar grupo");
            });
    
    
    });
	
	//em usso ele criaum grupo básico pra uma nova converssa
	Echo.channel('criartalkfuncionarios').listen('CriarTalkFuncionarios', (e)=>{
        console.log(e);
         var idEnvConversaNew=e.idEnvConversaNew;
        console.log("id da nova conversa entre funcionarios "+idEnvConversaNew);
        //var id_clicado=document.querySelector("#id_clicado").value;
        //console.log(id_clicado);
            $.post( "{{ route('us.GestChat.chat.create.conversa.funcionarios') }}", { '_token':'{{ csrf_token() }}' ,'idEnvConversaNew':idEnvConversaNew,})
            .done(function( data ) {
				console.log("exbiirbi os assuntos no funcoianrio, entreeles e tu pode ver ou noa?")
                 $("#sidefuncioanriosConversas_single").prepend(data);

            }).fail(function(){
                console.log("Erro ao exibir os assuntoas para o funcinarios ");
            });
    
    
    });
	Echo.channel('enviarMensagensGrupofuncionarios').listen('EnviarMensagensGrupoFuncionario', (e)=>{
        console.log(e);
         var idnewGrupoConversa=e.idnewGrupoConversa;
		 var id_chats=e.id_chats;
        console.log("id da nova conversa entre funcionarios grupos "+idnewGrupoConversa);
        //var id_clicado=document.querySelector("#id_clicado").value;
        //console.log(id_clicado);
            $.post( "{{ route('us.GestChat.chat.open.group.msg') }}", { '_token':'{{ csrf_token() }}' ,'id_chats':id_chats,'idnewGrupoConversa':idnewGrupoConversa,})
            .done(function( data ) {

				// console.log("deu certo envoio em grupos funcionarios")
                //   $(".chatNavigationArea").append(data);

				let data3=$.parseJSON(data);
				//______verificarse o id que foi clicado equivale para abrir esta mensagem
				console.log($('#id_conversa').val()+" estamos no grupo  id q veio "+data3[0].id_conversa_confirm)
				if($('#id_conversa').val()==data3[0].id_conversa_confirm)
				{	console.log("siguinifa q tu pode ver a mensagem")
					$(".chatNavigationArea").append(data3[0].chat);
					scrollToBottom(document.getElementById('content'));
                }
				  scrollToBottom(document.getElementById('content'));
            }).fail(function(){
                console.log("Erro ao exibir ao ler grupos e participantes e funcionarios");
            });
    
    
    });

	function deletardiv(obj)
     {
          // Pega o all que está sendo enviado
                    
          var form = $(obj).closest('button');
           //console.log("hayy");
          console.log(form.parent().parent().parent().parent().parent().remove());
    }
	function deletardiv2(obj)
     {
          // Pega o all que está sendo enviado
                    
          var form = $(obj).closest('button');
           //console.log("hayy");
          console.log(form.parent().parent().parent().parent().remove());
    }
	function showBodyMessag()
    {
        //	$("#botaoconversa").show();
		$("#botaocriarGrupo").show();
		$("#minhaimagem").val("");
		$("#conteudoSendMsg_Grupo").show();
        var bodymessage=document.querySelector("#sideMsgCliente");
        bodymessage.style.display='block';
    }
	function esconderBodyMessag(close=null)
    {   
		//$("#botaoconversa").show();
		$("#botaocriarGrupo").show();
		$("#conteudoSendMsg_Grupo").hide();

		console.log("vou esconder essa sideMsgCliente");
		$("#altertalk_aberta_close").val("");
        var bodymessage=document.querySelector("#sideMsgCliente");
        bodymessage.style.display='none';
		if(close==1)	
		{
			$("#altertalk_aberta_close").val("close_talk");
			return;
		}else
		{
			if(close==3)
			$("#ajuda_show_grupo").click();
		}
		$(".sendmsgCliente").show();
    }

	$("#side_clientes,#contactosGestdock,#sideConversasGrupo a").on("click",function(){
		$("a").removeClass("active"),
		$(this).addClass("active")
	})
	
	</script>
@endsection