{% extends 'base.html.twig' %}

{% block title %}Messagerie
{% endblock %}

{% block body %}
{% block stylesheets %}
	<link rel="stylesheet" href="{{asset('assets/css/chat.css')}}">
{% endblock %}
	<div class="container">
		<div class="row clearfix">
			<div class="col-lg-12">
				<div class="card chat-app">
					<div id="plist" class="people-list">

						<ul class="list-unstyled chat-list mb-0">
							{% for message in messages %}
								{% set userToShowId = message.receiverUid %}
								{% set userToShowReceiverNom = message.receiverNom %}
								{% set userToShowReceiverPrenom = message.receiverPrenom %}
								{% set userToShowReceiverImage = message.receiverImage %}
							{% if app.user.id == message.receiverId %}
								{% set userToShowId = message.senderUid %}
								{% set userToShowReceiverNom = message.senderNom %}
								{% set userToShowReceiverPrenom = message.senderPrenom %}
								{% set userToShowReceiverImage = message.senderImage %}
							{% endif %}
							<a href="{{path('messages',{'uid':userToShowId})}}">
								<li class="clearfix">
									{% if message.receiverImage is null  %}
										<img width="50" src="{{asset('assets/images/userMessneger.jpg')}}" class="mini-avatar" alt="">
									{% else %}
											
										<img src="{{asset('uploads/imagesUser/'~userToShowReceiverImage)}}" alt="avatar">
									{% endif %}
									<div class="about">
										<div class="name">{{userToShowReceiverNom}}{{userToShowReceiverPrenom}}</div>
										<div class="status"> <i class="fa fa-circle offline"></i> {{ message.messageCreatedAt ? message.messageCreatedAt|date('Y-m-d H:i') : '' }} </div> 
										<div class="message my-message">
											{% if message.isRead == false %}
											<p style="color:black"><b>{{message.content|slice(0,20)}}... </b></p>
											{% else %}
												<p>{{message.content|slice(0,20)}}... </p>
											{% endif %}
										</div>                                             
									</div>
								</li>
							</a>	
						{% endfor %}
						</ul>
					</div>
					<div class="chat">
						<div class="chat-header clearfix">
							<div class="row">
								<div class="col-lg-6">
									<a href="javascript:void(0);" data-toggle="modal" data-target="#view_info">
										{% if userLocataire.image is null  %}
											<img width="50" src="{{asset('assets/images/userMessneger.jpg')}}" class="mini-avatar" alt="">
										{% else %}
											<img src="{{asset('uploads/imagesUser/'~userLocataire.image)}}" alt="avatar">
										{% endif %}
									</a>
									<div class="chat-about">
										<h6 class="m-b-0">{{userLocataire.nom}}{{userLocataire.prenom}}</h6>
									</div>
								</div>
							</div>
						</div>
						<div class="chat-history">
							<ul class="m-b-0">
							{% for conversation in conversations %}
								{% if userLocataire.uid == conversation.recipient.uid %}
									<li class="clearfix">
										<div class="message-data text-right">
											<span class="message-data-time">{{conversation.createdAt ? conversation.createdAt|date('Y-m-d H:i') : ''}}</span>
										</div>
										<div class="message other-message bg-primary float-right"> {{conversation.content|raw}} </div>
									</li>
									{% else %}
										<li class="clearfix">
									<div class="message-data">
										<span class="message-data-time">{{conversation.createdAt ? conversation.createdAt|date('Y-m-d H:i') : ''}}</span>
									</div>
									<div class="message my-message">{{conversation.content|raw}}</div>                                    
								</li>  
								{% endif %}
							{% endfor %}
							</ul>
						</div>
						<div class="chat-message clearfix">
							{{ form_start(form, {'attr': {'action': path('send', {'uid': userLocataire.uid})}}) }}
							<div class="input-group mb-0">
								<div class="input-group-prepend">
									<button type="submit" class="input-group-text"><i class="fa fa-paper-plane"></i></button>
								</div>
								{{ form_widget(form.content, {'attr': {'class': 'form-control', 'placeholder': 'Enter text here...'}}) }}
								{# <input type="text" class="form-control" placeholder="Enter text here...">     #}
								{{ form_end(form) }}                                
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block javascripts %}
{% endblock %}