@extends('backend.layouts.layout-2')

@section('page-title', trans('app.volunteerApplications'))
@section('page-heading', trans('app.volunteerApplications'))

@section('content')


	<link rel="stylesheet" href="/css/chat.css">

	<div class="chat-page">

		<h3 class=" text-center">{{$user_name}}</h3>
		<div class="messaging">
			<div class="inbox_msg">
				<div class="inbox_people">
					<div class="headind_srch">
						<div class="recent_heading">
							<h4>Recent</h4>
						</div>
						<!--<div class="srch_bar">
							<div class="stylish-input-group">
								<input type="text" class="search-bar" placeholder="Search">
								<span class="input-group-addon">
									<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
								</span>
							</div>
						</div> -->
					</div>
					<div class="inbox_chat">
					    @php 
					    $selected_user_id = @$_GET['user_id'];
					    @endphp
						@foreach (\App\Models\ChatMessage::orderBy('created_at', 'DESC')->when($selected_user_id, function ($query,$selected_user_id) {
        return $query->where('user_id', $selected_user_id);
    })->get()->unique('user_id') as $chat)
							<div class="chat_list @if (@$_GET['user_id'] == $chat->user_id) active_chat @endif">
								<a href="{{ route('admin.chat', ['user_id' => $chat->user_id]) }}">
									<div class="chat_people">
										<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
										<div class="chat_ib">
											<h5>{{ $chat->user->first_name }} {{ $chat->user->middle_name }} {{ $chat->user->last_name }} </h5>
											<p>{{ $chat->message }}</p>
											<span class="chat_date">{{ $chat->created_at->diffForHumans() }}</span>
										</div>
									</div>
								</a>
							</div>
						@endforeach
					</div>
				</div>
				<div class="mesgs">
					<div class="msg_history" id="msg_history">
						@foreach (\App\Models\ChatMessage::where('user_id', @$_GET['user_id'])->where('admin_id', \Auth::user()->id)->get() as $chat)
							@if ($chat->sent_from != \Auth::user()->id)
								<div class="incoming_msg">
									<div class="incoming_msg_img"> <img style="width:30px;height:auto;"
											src="https://ptetutorials.com/images/user-profile.png" alt="sunil">
									</div>
									<div class="received_msg">
										<div class="received_withd_msg">
											<p>{{ $chat->message }}</p>
											<span class="time_date"> {{ $chat->created_at->diffForHumans() }}</span>
										</div>
									</div>
								</div>
								<br>
							@endif
							@if ($chat->sent_from == \Auth::user()->id)
								<div class="outgoing_msg">
									<div class="sent_msg">
										<p>{{ $chat->message }}</p>
										<span class="time_date"> {{ $chat->created_at->diffForHumans() }}</span>
									</div>
								</div>
							@endif
						@endforeach
					</div>
						@if(@$_GET['user_id'])
					<form method="POST" action="{{ route('admin.chat.send', ['user_id' => @$_GET['user_id']]) }}">
						@csrf

						<div class="type_msg">
							<div class="input_msg_write row">
								<div class="col-10">
									<input type="text" name="message" class="form-control " placeholder="Type a message" />
								</div>
								<div class="col-2">
									<button class="btn btn-primary mt-2" type="submit">Send</button>
								</div>
							</div>
						</div>
					</form>
					@endif
				</div>
			</div>



		</div>
	</div>


	<script>
		var elem = document.getElementById('msg_history');
		elem.scrollTop = elem.scrollHeight;
	</script>
@endsection