@extends('main')
@section('title', 'Mesanger')
@section('content')
<style>
.text-bold{
	font-weight:bold;
}
</style>
<div class="col-sm-12">
	<div class="widget-box">
		<a href="{{url('members')}}">
			<button class="btn btn-primary btn-xs"><i class="fa fa-angle-double-left" aria-hidden="true"></i>
			&nbsp;
			Back
			</button>
		</a>
	</div>
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title lighter smaller">
				<i class="ace-icon fa fa-comment blue"></i>
				Conversation
			</h4>
		</div>
		<div class="widget-body">
			<div class="widget-main no-padding">
				<!-- #section:pages/dashboard.conversations -->
				<div class="dialogs ace-scroll scroll-active" id="message_container">
					<div class="scroll-track" style="display: block; height: 300px;">
						<div class="scroll-bar" style="height: 236px; top: 0px;"></div>
					</div>
					<div class="scroll-content" style="overflow: scroll; max-height: 300px;" id="message_wall">
					    <?php $i=0; ?>
						@foreach($data as $key=>$values)
						<div class="itemdiv dialogdiv">
							<div class="user">

								@if($values["app_user_id"]==session('session_login')['app_user_id'])
										<img height="60" width="50" alt="" src="{{url('uploads/image').'/'.session('session_login')['app_user_id'].'/'.session('session_photo_profile')}}">
								@else
										<img height="60" width="50" alt="" src="{{url('uploads/image').'/'.$values['app_user_id'].'/'.$values['photo_profile']}}">
								@endif
							</div>

							<div class="body">
								<div class="time">
									<i class="ace-icon fa fa-clock-o"></i>
									<span class="blue">{{$values["message_date"]}}</span>
								</div>

								<div class="name">
									@if($values["app_user_id"]==session('session_login')['app_user_id'])
										<a href="#">{{session('session_login')['username']}}</a>
									@else
										<a href="#">{{$values["username"]}}</a>
									@endif
								</div>
								@if($i==0)
								<div class="text text-bold">{{$values["message_content"]}}</div>
								@else
								<div class="text">{{$values["message_content"]}}</div>
								@endif
								<div class="tools">
									<a href="#" class="btn btn-minier btn-info">
										<i class="icon-only ace-icon fa fa-trash"></i>
									</a>
								</div>
							</div>
						</div>
						<?php $i++; ?>
						@endforeach
					</div>
				</div>

				<!-- /section:pages/dashboard.conversations -->
				<form>
					<div class="form-actions">
						<div class="input-group">
							<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
							<input placeholder="Type your message here ..." type="text" class="form-control" id="message" name="message"><br>

							<span class="input-group-btn">
								<button class="btn btn-sm btn-info no-radius" type="button" onclick="send_messsage()">
									<i class="ace-icon fa fa-paper-plane"></i>
									Send
								</button>
							</span>
						</div>
						<div class="input-group" style="display:none;">
							<input type="text" id="total_message"/>
							<input type="text" id="uptodate_massage"/>
						</div>
					</div>
				</form>
			</div>
			<!-- /.widget-main -->
		</div>
		<!-- /.widget-body -->
	</div>
	<!-- /.widget-box -->
</div>
@include('Messanger::action_js')
@endsection