@extends('influencer.master_layout')
@section('title')
<title>{{__('admin.Live Chat')}}</title>
@endsection
@section('influencer-content')
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>{{__('admin.Live Chat')}}</h1>
</div>
<div class="section-body">
<div class="row ustify-content-center">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card">
<div class="card-header">
<h4>{{__('admin.Buyer List')}}</h4>
</div>
<div class="card-body seller_chat_list">
<ul class="list-unstyled list-unstyled-border" id="my_buyer_list">
@foreach ($buyers as $buyer)
<li id="customer-list-{{ $buyer->buyer_id }}" class="media mt-2 buyer-list" onclick="loadChatBox({{ $buyer->buyer_id }},'{{ $buyer->buyer->name }}')" style="cursor: pointer" data-buyer-id="{{ $buyer->buyer_id }}">
@if ($buyer->buyer->image)
<img alt="image" class="mr-3 ml-3 rounded-circle" width="50" src="{{ asset($buyer->buyer->image) }}">
@else
<img alt="image" class="mr-3 ml-3 rounded-circle" width="50" src="{{ asset($default_avatar->image) }}">
@endif
@php
$un_read = App\Models\Message::where(['provider_id' => $provider->id, 'buyer_id' => $buyer->buyer_id, 'provider_read_msg' => 0])->count();
$last_message = App\Models\Message::where(['provider_id' => $provider->id, 'buyer_id' => $buyer->buyer_id])->latest()->first();
@endphp
<span class="pending {{ $un_read == 0 ? 'd-none' : ''}}" id="pending-{{ $buyer->buyer_id }}">{{ $un_read }}</span>
<div class="media-body mt-4">
<div class="font-weight-bold">{{ $buyer->buyer->name }}</div>
@if ($last_message)
@if ($last_message->service_id != 0)
<div class="text-small text-dark {{ $last_message->provider_read_msg == 0 ? 'unseen_message' : '' }}" id="latest_message-{{ $buyer->buyer_id }}"> {{ $last_message?->service?->title }}</div>
@else
<div class="text-small text-dark {{ $last_message->provider_read_msg == 0 ? 'unseen_message' : '' }}" id="latest_message-{{ $buyer->buyer_id }}"> {{ $last_message?->message }}</div>
@endif
@endif
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-8">
<div class="card chat-box" id="mychatbox">
<div class="card-header buyer_name">
<h4>{{__('admin.Please choose one')}}</h4>
</div>
<div class="card-body chat-content">
</div>
<div class="card-footer chat-form">
<form id="chat-form">
@csrf
<input name="message" autocomplete="off" type="text" class="form-control" id="customer_message" placeholder="{{__('admin.Type message')}}" readonly>
<input type="hidden" id="buyer_id" name="buyer_id">
<button type="submit" class="btn btn-primary send-message-button" disabled>
<i class="far fa-paper-plane"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@endsection
@push('message-box')
@php
$active_user_for_message = Auth::guard('web')->user();
@endphp
<script>
let active_buyer_id = 0;
let default_avatar = "{{ $setting->default_avatar }}";
(function($) {
"use strict";
$(document).ready(function () {
$("#chat-form").on("submit", function(e){
e.preventDefault();
let message = $("#customer_message").val();
if(message == '')return;
$.ajax({
type:"post",
data: $('#chat-form').serialize(),
url: "{{ url('influencer/send-message-to-buyer/') }}",
success:function(response){
$(".chat-content").html(response)
$("#customer_message").val('');
scrollToBottomFunc();
$("#latest_message-"+active_buyer_id).html(message);;
},
error:function(err){
}
})
})
Echo.private("live_chat.{{$active_user_for_message->id}}")
.listen('LiveChat', (e) => {
let new_latest_message = e.message[0].string;
let sender_buyer_id = e.message[0].buyer_id;
if(parseInt(sender_buyer_id) == parseInt(active_buyer_id)){
$("#pending-"+sender_buyer_id).addClass('d-none');
$.ajax({
type:"get",
url: "{{ url('influencer/load-chat-box/') }}" + "/" + sender_buyer_id,
success:function(response){
$(".chat-content").html(response)
scrollToBottomFunc();
$("#latest_message-"+sender_buyer_id).html(new_latest_message);;
},
error:function(err){
}
})
}else{
let is_exist = false;
$('.buyer-list').each(function() {
let buyer_Id = $(this).data('buyer-id');
if(parseInt(buyer_Id) == parseInt(sender_buyer_id)) is_exist = true;
});
if(is_exist){
let current_qty = $("#pending-"+sender_buyer_id).html();
let new_qty = parseInt(current_qty) + parseInt(1);
console.log(`new qty ${new_qty}`);
$("#pending-"+sender_buyer_id).html(new_qty);
$("#pending-"+sender_buyer_id).removeClass('d-none');
$("#latest_message-"+sender_buyer_id).html(new_latest_message);;
$("#latest_message-"+sender_buyer_id).addClass('unseen_message');
}else{
$.ajax({
type:"get",
url: "{{ url('influencer/find-new-buyer/') }}" + "/" + sender_buyer_id,
success:function(response){
let new_buyer = response.buyer;
let default_avatar = response.default_avatar.image;
let root_url = "{{ route('home') }}";
let avatar = '';
if(new_buyer.image){
avatar = `<img alt="image" class="mr-3 ml-3 rounded-circle" width="50" src="${root_url}/${new_buyer.image}">`
}else{
avatar = `<img alt="image" class="mr-3 ml-3 rounded-circle" width="50" src="${root_url}/${default_avatar}">`
}
let new_item = `
<li id="customer-list-${sender_buyer_id}" class="media mt-2 buyer-list" onclick="loadChatBox(${sender_buyer_id},'${new_buyer.name}')" style="cursor: pointer" data-buyer-id="${sender_buyer_id}">
${avatar}
<span class="pending" id="pending-${sender_buyer_id}">1</span>
<div class="media-body mt-4">
<div class="font-weight-bold">${new_buyer.name}</div>
<div class="text-small text-dark unseen_message" id="latest_message-${sender_buyer_id}"> ${new_latest_message}</div>
</div>
</li>
`
$("#my_buyer_list").prepend(new_item);
},
error:function(err){
}
})
}
}
});
});
})(jQuery);
function loadChatBox(buyer_id, buyer_name){
$(".buyer_name").html(`<h4>${buyer_name}</h4>`)
$(".send-message-button").attr('disabled', false);
$("#customer_message").attr('readonly', false);
$("#buyer_id").val(buyer_id);
active_buyer_id = buyer_id;
$("#pending-"+buyer_id).addClass('d-none');
$("#latest_message-"+buyer_id).removeClass('unseen_message');
$.ajax({
type:"get",
url: "{{ url('influencer/load-chat-box/') }}" + "/" + buyer_id,
success:function(response){
$(".chat-content").html(response)
scrollToBottomFunc();
},
error:function(err){
}
})
}
function scrollToBottomFunc() {
$('.chat-content').animate({
scrollTop: $('.chat-content').get(0).scrollHeight
}, 50);
}
</script>
@endpush