166 lines
8.8 KiB
PHP
166 lines
8.8 KiB
PHP
@extends('frontend.layouts.member_panel')
|
|
@section('panel_content')
|
|
<div class="aiz-chat">
|
|
<div class="row no-gutters">
|
|
<div class="col-lg-4">
|
|
<div class="chat-user-list-wrap z-1035">
|
|
<div class="overlay dark c-pointer" data-toggle="class-toggle" data-target=".chat-user-list-wrap" data-same=".aiz-all-chat-toggler"></div>
|
|
<div class="chat-user-list-header d-flex justify-content-between align-items-center bg-white border-bottom border-right h6 mb-0">
|
|
<span class="p-2 m-1">{{translate('Members')}}</span>
|
|
<button class="btn btn-icon d-lg-none" data-toggle="class-toggle" data-target=".chat-user-list-wrap"><i class="las la-times"></i></button>
|
|
</div>
|
|
<div class="chat-user-list border-right py-3 c-scrollbar-light">
|
|
@forelse ($chat_threads as $key => $single_chat_thread)
|
|
@php
|
|
$num_of_message = $single_chat_thread->chats->where('seen', 0)->count();
|
|
$current_user = Auth::user()->id;
|
|
@endphp
|
|
@if ($single_chat_thread->receiver != null && $single_chat_thread->sender != null)
|
|
<a href="javascript:void(0)" class="chat-user-item p-3 d-block text-inherit" data-url="{{ route('chat_view', $single_chat_thread->id) }}" data-refresh="{{ route('chat_refresh', $single_chat_thread->id) }}" onclick="loadChats(this)">
|
|
@if($current_user == $single_chat_thread->sender->id)
|
|
@php $user_to_show = 'receiver'; @endphp
|
|
@else
|
|
@php $user_to_show = 'sender'; @endphp
|
|
@endif
|
|
<div class="media">
|
|
<span class="avatar avatar-sm mr-3 flex-shrink-0">
|
|
@if ($single_chat_thread->$user_to_show->photo != null)
|
|
<img src="{{ uploaded_asset($single_chat_thread->$user_to_show->photo) }}">
|
|
@else
|
|
<img src="{{ static_asset('assets/frontend/default/img/avatar-place.png') }}">
|
|
@endif
|
|
|
|
@if(Cache::has('user-is-online-' . $single_chat_thread->$user_to_show->id))
|
|
<span class="badge badge-dot badge-circle badge-success badge-status badge-md"></span>
|
|
@else
|
|
<span class="badge badge-dot badge-circle badge-secondary badge-status badge-md"></span>
|
|
@endif
|
|
</span>
|
|
<div class="media-body minw-0">
|
|
<h6 class="mt-0 mb-1 fs-14 text-truncate">{{ $single_chat_thread->$user_to_show->first_name.' '.$single_chat_thread->$user_to_show->last_name }}</h6>
|
|
@if ($single_chat_thread->chats->last() != null)
|
|
@if ($single_chat_thread->chats->last()->message != null)
|
|
<div class="fs-12 text-truncate opacity-60">{{ $single_chat_thread->chats->last()->message }}</div>
|
|
@else
|
|
<div class="fs-12 text-truncate opacity-60">{{ translate('Attachments')}}</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
<div class="ml-2 text-right">
|
|
@if ($single_chat_thread->chats->last() != null)
|
|
<div class="opacity-60 fs-10 mb-1">{{ Carbon\Carbon::parse($single_chat_thread->chats->last()->created_at)->diffForHumans() }}</div>
|
|
@endif
|
|
<span class="badge badge-primary badge-circle flex-shrink-0 ml-4">{{ count($single_chat_thread->chats->where('sender_user_id', '!=', Auth::user()->id)->where('seen', 0)) }}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endif
|
|
@empty
|
|
<div class=" text-center">
|
|
<i class="las la-frown la-4x mb-4 opacity-40"></i>
|
|
<h4>{{ translate('Nothing Found')}}</h4>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8" id="single_chat">
|
|
<div class="chat-box-wrap h-100">
|
|
<div class="attached-top bg-white border-bottom chat-header d-flex justify-content-between align-items-center p-3 shadow-sm">
|
|
<div class="media">
|
|
<h6 class="mb-0">{{ translate('Chats')}}</h6>
|
|
</div>
|
|
<button class="aiz-mobile-toggler d-lg-none aiz-all-chat-toggler mr-2" data-toggle="class-toggle" data-target=".chat-user-list-wrap">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
<div class="px-3 py-5 text-center">
|
|
<i class="las la-user la-6x text-primary mb-4"></i>
|
|
<h5>{{ translate('Select a Member to view chats') }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('modal')
|
|
@include('modals.package_update_alert_modal')
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script type="text/javascript">
|
|
function loadChats(el){
|
|
$('.selected-chat').each(function() {
|
|
$(this).removeClass('bg-soft-primary');
|
|
$(this).removeClass('selected-chat');
|
|
});
|
|
$(el).addClass('selected-chat');
|
|
$(el).addClass('bg-soft-primary');
|
|
$.get($(el).data('url'),{}, function(data){
|
|
$('#single_chat').html(data);
|
|
AIZ.extra.scrollToBottom();
|
|
initializeLoadMore();
|
|
$('#send-mesaage').on('submit',function(e){
|
|
e.preventDefault();
|
|
send_reply();
|
|
});
|
|
});
|
|
}
|
|
function send_reply(){
|
|
var chat_thread_id = $('#chat_thread_id').val();
|
|
var message = $('#message').val();
|
|
var attachment = $('#attachment').val();
|
|
if(message.length > 0 || attachment.length > 0){
|
|
$.post('{{ route('chat.reply') }}',{_token:'{{ csrf_token() }}', chat_thread_id:chat_thread_id, message:message, attachment:attachment}, function(data){
|
|
$('#message').val('');
|
|
$('#attachment').val('');
|
|
$('#chat-messages').append(data);
|
|
AIZ.extra.scrollToBottom();
|
|
});
|
|
}
|
|
}
|
|
$(document).on('click','.chat-attachment',function(){
|
|
AIZ.uploader.trigger(
|
|
this,
|
|
'direct',
|
|
'all',
|
|
'',
|
|
true,
|
|
function(files){
|
|
$('#attachment').val(files);
|
|
send_reply();
|
|
}
|
|
);
|
|
});
|
|
$(document).ready(function () {
|
|
setInterval(function () {
|
|
refreshChats();
|
|
}, 5000);
|
|
});
|
|
function refreshChats(){
|
|
var el = $('.selected-chat');
|
|
$.get($(el).data('refresh'),{}, function(data){
|
|
if (data.count > 0) {
|
|
$('#chat-messages').append(data.messages);
|
|
AIZ.extra.scrollToBottom();
|
|
}
|
|
});
|
|
}
|
|
function initializeLoadMore(){
|
|
$('.load-more-btn').on('click', function(){
|
|
$.post('{{ route('get-old-message') }}', {_token:'{{ csrf_token() }}', first_message_id:$(this).data('first')}, function(data){
|
|
if (data.first_message_id > 0) {
|
|
$('#chat-messages').prepend(data.messages);
|
|
$('.load-more-btn').data('first', data.first_message_id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function package_update_alert(){
|
|
$('.package_update_alert_modal').modal('show');
|
|
}
|
|
</script>
|
|
@endsection
|