@extends('layout')
@section('title','MESSAGE')
@section('content')
<style>
  * {
  font-family: 'Avenir';
}
.bubbleWrapper {
	padding: 10px 10px;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	align-self: flex-end;
  color: #fff;
}
.inlineContainer {
  display: inline-flex;
  border-radius: 16px 16px 0 16px;
}
.inlineContainer.own {
  flex-direction: row-reverse;
}
.inlineIcon {
  width:50px;
  object-fit: contain;
  border-radius: 16px 16px 0 16px;
}
.ownBubble {
	min-width: 60px;
	max-width: 700px;
	padding: 14px 18px;
  margin: 6px 8px;
	background-color: #5b5377;
	border-radius: 16px 16px 0 16px;
	border: 1px solid #443f56;
 
}
.otherBubble {
	min-width: 60px;
	max-width: 700px;
	padding: 14px 18px;
  margin: 6px 8px;
	background-color: #6C8EA4;
	border-radius: 16px 16px 16px 0;
	border: 1px solid #54788e;
  
}
.own {
	align-self: flex-end;
}
.other {
	align-self: flex-start;
}
span.own,
span.other{
  font-size: 14px;
  color: grey;
}
</style>
<br>
<h4 align="center"> MESSAGERIE</h4>

<section class="content" style="background-color: #fff">
    <div class="container-fluid">
     <div id="message_content">
      <div class="bubbleWrapper">
        <div class="inlineContainer">
          <img class="inlineIcon" src="{{asset('image/profil.png')}}" style="border-radius: 16px 16px 0 16px;">
          <div class="otherBubble other">
           Comment pouvons-nous vous aidez ? 
          </div>
        </div><span class="other">{{date('H:m')}}</span>
      </div>

      @forelse ($all_message as $m)
      <div class="bubbleWrapper">
        <div class="inlineContainer {{$m->type}}">
          <img class="inlineIcon" src="{{asset('image/profil.png')}}" style="border-radius: 16px 16px 0 16px;">
          <div class="{{$m->type}}Bubble {{$m->type}}">
           {{$m->message}}
          </div>
        </div><span class="{{$m->type}}">{{$m->created_at}}</span>
      </div>
      @empty
        
      @endforelse
     
      
     </div>
      </div>
</section>
<div style="display: flex;width: 100%;bottom:0;background-color: #fff;height: 60px;padding:5px">
  <div style="width: 90%"><input type="text" placeholder="Message" class="form-control" id="message_input"></div><div ><button class="btn btn-primary" onclick="send()">Envoyer</button></div>
</div>

@stop


<script>
  function send(){
 
var message_input=document.getElementById('message_input').value;
var user_id={{$user_id}};
  $.ajax({  
		type:"POST",  
		url:"{{ asset('store_message_admin') }}",   
		data:{message:message_input,user_id:user_id,_token: '{{ csrf_token() }}'},
		success:function(data){ 
			var data = $.parseJSON(data);
			if(data.type == 'success'){
        var newRow = $('#message_content').append('<div class="bubbleWrapper"><div class="inlineContainer other"><img class="inlineIcon" src="{{asset('image/profil.png')}}" style="border-radius: 16px 16px 0 16px;"><div class="otherBubble other">'+message_input+'</div></div><span class="other">{{date('H:m')}}</span></div>');
        document.getElementById('message_input').value="";
      }
      else{
        document.getElementById('message_input').value="";
      }
    }
  }
  );
  }
</script>