@extends('root.layouts.master')
@section('content')

<script type="text/javascript">
    $(window).on('load',function(){
      document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;

      // const height = $(window).height();
      // const scrollTop = $(window).scrollTop();
      
      // document.getElementById("chater").scrollTop = getElementById("nonlu").scrollTop;
    });
</script>

<script type="text/javascript">
	$(document).ready(function() {
	    $('#trainingcategorie').DataTable( {
	    	dom: 'Bfrtip',
	        buttons: [
	            'copy', 'csv', 'excel', 'pdf', 'print'
	        ]
	    } );
	} );
</script>

<div class="col-lg-12">
	<nav class="breadcrumb_widgets" aria-label="breadcrumb mb30">
		<h4 class="title float-left">Messages sur la formation : {{$formation->LibelleFormation }} </h4>
		<!-- <ol class="breadcrumb float-right">
	    	<a href="" class="btn btn-primary pull-rignt">Nouveau</a>
		</ol> -->
	</nav>
</div>
<div class="col-lg-12">
	<div class="row message_container">
		<div class="col-sm-12 col-md-6 col-lg-5 col-xl-4 pr0 pl0">
			<div class="inbox_user_list">
				<div class="iu_heading">
					<!-- <div class="candidate_revew_search_box">
						<form class="form-inline my-2 my-lg-0">
					    	<input class="form-control mr-sm-2" type="search" placeholder="Serach" aria-label="Search">
					    	<button class="btn my-2 my-sm-0" type="submit"><span class="flaticon-magnifying-glass"></span></button>
					    </form>
					</div> -->
				</div>
				<ul>
					
					
				</ul>
			</div>
		</div>
		<div class="col-sm-12 col-md-6 col-lg-7 col-xl-8 pr0 pl0">
			<div class="user_heading">
				<a href="#">
					<div class="wrap">
						<!-- <span class="contact-status online"></span> -->
						<img class="img-fluid" src="{{url($formateur->profil)}}" alt="profil" style="width: 70px;" />
						<div class="meta">
							<h5 class="name"> {{$formateur->name }} {{$formateur->prenom}}</h5>
							<!-- <p class="preview">was online today at 11:43</p> -->
						</div>
					</div>
				</a>
			</div>
			<div class="last_seen_time text-center">
				<a href="#">{{date('d-m-Y')}}</a>
			</div>
			<div class="inbox_chatting_box" id="chat">
				<ul class="chatting_content">
					@foreach($message as $messages)
					@if($messages->IdSender != utilisateur()->id)
					<li class="media sent">
						<span class="contact-status busy"></span>
						<img class="img-fluid align-self-start mr-3" src="{{asset($formateur->profil)}}" alt="profil" style="width: 50px;" />
						<div class="media-body">
							<div class="date_time">{{$messages->DateMessage}} {{$messages->HeureMessage}} </div>
					    	{!! $messages->ContenuMessage !!}
						</div>
					</li>
					@else
					<li class="media reply">
						<div class="media-body text-right">
							<div class="date_time">{{$messages->DateMessage}} {{$messages->HeureMessage}}</div>
							<p>{!! $messages->ContenuMessage !!}</p>
						</div>
					</li>
					@endif
					@endforeach
					
				</ul>
			</div>
			
		</div>
		<div class="col-md-6 col-lg-6">
			<p style="color: #fff;">Test</p>
		</div>
		<div class="col-md-6 col-lg-6">
							<form class="" method="POST" enctype="multipart/form-data" action="{{url('envoi_message2')}}">
								@csrf
								<input type="hidden" name="idformation" value="{{$formation->IdFormation}}">
								<input type="hidden" name="sender" value="{{utilisateur()->id}}">
								<input type="hidden" name="receiver" value="{{$formateur->id}}">
								<textarea name="message" id="message">
									
								</textarea>
								<script>
			                                CKEDITOR.replace('message', {
			                                    filebrowserUploadUrl: '../editor/ckeditor/ck_upload.php',
			                                    filebrowserUploadMethod: 'form'
			                                });
			                            </script>
						    	<!-- <input class="form-control" type="search" placeholder="Votre message..." aria-label="Search"> -->
						    	<button class="btn btn-primary"  type="submit">Envoyer <span class="flaticon-paper-plane"></span></button>
						    </form>
		</div>
	</div>
	
	
</div>		

@endsection