@extends('layouts.user')
@section('sidebar')
	@include('frontend.components.user-layout-sidebar')
@endsection

@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">
						@foreach (\App\Models\Admin::get() as $user)
							@php

								$last_chat = @\App\Models\ChatMessage::where('admin_id', $user->id)
								    ->where('user_id', \Auth::user()->id)
								    ->orderBy('created_at', 'DESC')
								    ->first();
							@endphp
							<div class="chat_list @if (@$_GET['admin_id'] == $user->id) active_chat @endif">
								<a href="{{ route('user.chat', ['admin_id' => $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>{{ $user->name }} </h5>
											<p>
												{{ @$last_chat->message }}
											</p>
											<span style="font-size:12px;"
												class="chat_date fs-sm">{{ $last_chat ? $last_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('admin_id', @$_GET['admin_id'])->where('user_id', \Auth::user()->id)->get() as $chat)
							@if ($chat->sent_from != \Auth::user()->id)
								<div class="incoming_msg">
									<div class="incoming_msg_img"> <img 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>
							@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['admin_id'])
					<form method="POST" action="{{ route('user.chat.send', ['admin_id' => @$_GET['admin_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