503 lines
17 KiB
PHP
503 lines
17 KiB
PHP
@extends('theme::layouts.app')
|
|
|
|
|
|
@section('content')
|
|
|
|
<h2 class="dashboard-title">{{ __("Service Chat") }}</h2>
|
|
<div class="card-chat">
|
|
<div class="flex h-100">
|
|
<div class="chat-room-area">
|
|
<h3 class="h2-title text-left">{{ __("Chat Room") }}</h3>
|
|
<div class="accordion-lists">
|
|
<div class="accordion-box">
|
|
<div class="accordion-title">
|
|
<span class="text-uppercase">{{ __("Recent") }}</span>
|
|
<img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}">
|
|
{{-- <button class="accordion-button"><img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}"></button> --}}
|
|
</div>
|
|
<div class="accordion-items chat-lists">
|
|
{{-- <div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>Site Alpha</h4>
|
|
<span>Client: Company A</span>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-area" style="display:none;">
|
|
<div class="flex">
|
|
<div class="chat-topic">
|
|
<h3 class="topic-title text-uppercase">{{ __("Service Topic") }}</h3>
|
|
<div class="topic-lists">
|
|
{{-- <div class="topic-list">
|
|
<div class="topic-head">
|
|
<h4>Copmany Secretary Service</h4>
|
|
<time>21/04/2023</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: Hi, I can't upload my documents successfully</p>
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<div class="topic-head">
|
|
<h4>Copmany Secretary Service</h4>
|
|
<time>21/04/2023</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: Hi, I can't upload my documents successfully</p>
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<div class="topic-head">
|
|
<h4>Copmany Secretary Service</h4>
|
|
<time>21/04/2023</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: Hi, I can't upload my documents successfully</p>
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<div class="topic-head">
|
|
<h4>Copmany Secretary Service</h4>
|
|
<time>21/04/2023</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: Hi, I can't upload my documents successfully</p>
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<div class="topic-head">
|
|
<h4>Copmany Secretary Service</h4>
|
|
<time>21/04/2023</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: Hi, I can't upload my documents successfully</p>
|
|
<span class="number-item">4</span>
|
|
</div>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
<div class="chat-inside-content" style="display:none;s">
|
|
<div class="chat-inside-head">
|
|
<h5 class="topic-title">-</h5>
|
|
<button class="more-item" type="button"><img src="{{ asset('themes/tailwind/images/more-plain.svg') }}"></button>
|
|
</div>
|
|
<div class="chat-inside-body">
|
|
{{-- <div class="chat-box chat-sender">
|
|
<div class="chat-label">LM</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box">
|
|
<div class="chat-label">CS</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box chat-sender">
|
|
<div class="chat-label">LM</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box">
|
|
<div class="chat-label">CS</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box chat-sender">
|
|
<div class="chat-label">LM</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box chat-sender">
|
|
<div class="chat-label">LM</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-box">
|
|
<div class="chat-label">CS</div>
|
|
<div class="chat-content"><time>1 day ago</time>Hi, I am logistics manager at Company A. My name is Ellen.</div>
|
|
</div>
|
|
<div class="chat-messages-date">
|
|
<span>Today</span>
|
|
</div> --}}
|
|
</div>
|
|
<div class="chat-inside-footer">
|
|
<div class="chat-message-box">
|
|
<form action="{{ route('cms.chat.send-message', ':id') }}" class="chat-message-box w-100" id="chatFrm">
|
|
<input type="file" name="chat_message_file" style="display:none;">
|
|
<button type="button" class="chat-file"><img src="{{ asset('themes/tailwind/images/Attachment.svg') }}"></button>
|
|
<button type="button" class="chat-smile"><img src="{{ asset('themes/tailwind/images/Smile.svg') }}"></button>
|
|
<textarea name="chat_message" placeholder="Type a message here..." rows="1"></textarea>
|
|
<button type="submit" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-side-area" style="display:none;">
|
|
<div class="chat-side-head">
|
|
<img src="{{ asset('themes/tailwind/images/company.svg') }}">
|
|
<h3 class="text-uppercase">{{ __("Company Info") }}</h3>
|
|
</div>
|
|
<div class="company-info-wrapper">
|
|
<div class="chat-side-info">
|
|
<label class="text-uppercase">{{ __("User Email") }}</label>
|
|
<p class="user-email">-</p>
|
|
</div>
|
|
<div class="chat-side-info">
|
|
<label class="text-uppercase">{{ __("Phone") }}</label>
|
|
<p class="user-phone">-</p>
|
|
</div>
|
|
<div class="chat-side-info">
|
|
<label class="text-uppercase">{{ __("Location") }}</label>
|
|
<p class="company-address">-</p>
|
|
</div>
|
|
</div>
|
|
<div class="chat-side-scroll">
|
|
<div class="accordion-box">
|
|
<div class="accordion-title accordion-title__image">
|
|
<img src="{{ asset('themes/tailwind/images/simcard.svg') }}">
|
|
<span class="text-uppercase">{{ __("Form List") }}</span>
|
|
<img src="{{ asset('themes/tailwind/images/arrow-down.svg') }}">
|
|
{{-- <button class="accordion-button"><img src="http://127.0.0.1:8000/themes/tailwind/images/arrow-down.svg"></button> --}}
|
|
</div>
|
|
<div class="accordion-items">
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Incorporation of Hong Kong Limited") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Change Company Name") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Change Company Address") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Change of Company and Director (Appointment / Cessation)") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Change of Company Secretary (Appointment / Cessation)") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Change in Particulars of Company Secretary or Director") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<div class="accordion-content">
|
|
<h4>{{ __("Resignation of Reserve Director") }}</h4>
|
|
</div>
|
|
<div class="accordion-notif">
|
|
<button type="button" class="chat-send-message"><img src="{{ asset('themes/tailwind/images/send.svg') }}"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
$(document).ready( function () {
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
|
|
window.Echo.channel(`chat-channel`).listen("ChatEvent", (e) => {
|
|
getChats();
|
|
if ($('.show-messages[data-id="' + e.chatId + '"]').hasClass('active') && e.toAdmin) {
|
|
var url = "{{ route('cms.chat.get-messages', [':id']) }}";
|
|
url = url.replace(":id", e.chatId);
|
|
showMessages(url);
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.show-topics', function(e) {
|
|
var userId = $(this).attr('data-user-id');
|
|
var companyId = $(this).attr('data-company-id');
|
|
var activeId = $('.show-messages.active').attr('data-id');
|
|
|
|
if (! $(this).hasClass('active')) {
|
|
$('.show-topics').removeClass('active');
|
|
$(this).addClass('active');
|
|
}
|
|
|
|
$.ajax({
|
|
url: "{{ route('cms.chat.get-topics') }}",
|
|
type: "post",
|
|
data: {
|
|
userId: userId,
|
|
companyId: companyId,
|
|
},
|
|
dataType: 'json',
|
|
success:function(data) {
|
|
var chats = data.chats;
|
|
var html = '';
|
|
|
|
chats.forEach(function(chat) {
|
|
html += `
|
|
<div class="topic-list show-messages ` + (activeId == chat.id ? 'active' : '') + `" data-id="` + chat.id + `" data-title="` + chat.topic + `">
|
|
<div class="topic-head">
|
|
<h4>` + chat.topic + `</h4>
|
|
<time>` + chat.date + `</time>
|
|
</div>
|
|
<div class="topic-body">
|
|
<p>Client: ` + chat.first_message + `</p>
|
|
` + (chat.unread_count > 0 ? `<span class="number-item">` + chat.unread_count + `</span>` : '') + `
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$('.topic-lists').html(html);
|
|
$('.company-info-wrapper .user-email').html(data.user.email ? data.user.email : '-');
|
|
$('.company-info-wrapper .user-phone').html(data.user.phone ? data.user.phone : '-');
|
|
$('.company-info-wrapper .company-address').html(data.company.address ? data.company.address : '-');
|
|
$('.chat-area').show();
|
|
$('.chat-side-area').show();
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.show-messages', function(e) {
|
|
var title = $(this).attr('data-title');
|
|
var id = $(this).attr('data-id');
|
|
var url = "{{ route('cms.chat.get-messages', [':id']) }}";
|
|
url = url.replace(":id", id);
|
|
|
|
$('.show-messages').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
showMessages(url, title);
|
|
});
|
|
|
|
$(document).on('click', '#chatFrm .chat-file', function(e) {
|
|
$('#chatFrm input[name="chat_message_file"]').click();
|
|
});
|
|
|
|
$(document).on('change', '#chatFrm input[name="chat_message_file"]', function(e) {
|
|
if ($(this).val()) {
|
|
$('#chatFrm').submit();
|
|
}
|
|
});
|
|
|
|
$(document).on('submit', '#chatFrm', function(e) {
|
|
e.preventDefault();
|
|
var action = $(this).attr('action');
|
|
var button = $(this).find('button[type="submit"]');
|
|
var data = new FormData(this);
|
|
var id = $('.show-messages.active').attr('data-id');
|
|
action = action.replace(":id", id);
|
|
|
|
if (!button.is(':disabled') && action && ($('#chatFrm [name="chat_message"]').val() != '' || $('#chatFrm [name="chat_message_file"]').val() != '')) {
|
|
button.attr('disabled', 'disabled');
|
|
$('#chatFrm [name="chat_message"]').val('');
|
|
$('#chatFrm [name="chat_message_file"]').val('');
|
|
|
|
$.ajax({
|
|
url: action,
|
|
type: "post",
|
|
data: data,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
success:function(data) {
|
|
button.removeAttr('disabled');
|
|
$('.show-messages.active').click();
|
|
},
|
|
error: function(data) {
|
|
var errors = data.responseJSON.errors;
|
|
$.each(errors, function(index, error) {
|
|
popToast('danger', errors[0]);
|
|
return false;
|
|
});
|
|
|
|
button.removeAttr('disabled');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$(document).on( 'keyup', '#chatFrm textarea', function (){
|
|
$(this).height( 0 );
|
|
$(this).height( this.scrollHeight );
|
|
}).keypress(function (e) {
|
|
if(e.which === 13 && !e.shiftKey) {
|
|
e.preventDefault();
|
|
|
|
$('#chatFrm').submit();
|
|
}
|
|
});
|
|
|
|
getChats();
|
|
|
|
function getChats() {
|
|
var activeId = $('.show-topics.active').attr('data-id');
|
|
|
|
$.ajax({
|
|
url: "{{ route('cms.chat.get-chats') }}",
|
|
type: "get",
|
|
data: {},
|
|
dataType: 'json',
|
|
success:function(data) {
|
|
var chats = data.chats;
|
|
var html = '';
|
|
|
|
chats.forEach(function(chat) {
|
|
html += `
|
|
<div class="accordion-item cursor-pointer show-topics ` + (activeId == chat.id ? 'active' : '') + `" data-user-id="` + chat.user_id + `" data-company-id="` + chat.company_id + `" data-id="` + chat.id + `">
|
|
<div class="accordion-content">
|
|
<h4>` + chat.user_first_name + ` ` + chat.user_last_name + `</h4>
|
|
<span>Client: ` + chat.company_name + `</span>
|
|
</div>
|
|
`;
|
|
|
|
if (chat.unread_count > 0) {
|
|
html += `
|
|
<div class="accordion-notif">
|
|
<span class="number-item">` + chat.unread_count + `</span>
|
|
</div>
|
|
`;
|
|
}
|
|
html += '</div>';
|
|
});
|
|
|
|
$('.chat-lists').html(html);
|
|
|
|
if (activeId) {
|
|
$('.show-topics[data-id="' + activeId + '"]').click();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function showMessages(url, title = '') {
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
data: {},
|
|
dataType: 'json',
|
|
success:function(response) {
|
|
var data = response.data;
|
|
var html = '';
|
|
|
|
data.forEach(function(item) {
|
|
html += `
|
|
<div class="chat-messages-date">
|
|
<span>` + (item.is_today ? 'Today' : item.date) + `</span>
|
|
</div>
|
|
`;
|
|
item.messages.forEach(function(message) {
|
|
html += `
|
|
<div class="chat-box ` + (message.is_own_message ? 'chat-sender' : '') + `">
|
|
<div class="chat-label">` + message.initials + `</div>
|
|
<div class="chat-content"><time>` + message.elapsed_time + `</time>` + message.message + `</div>
|
|
</div>
|
|
`;
|
|
});
|
|
});
|
|
|
|
if (title) {
|
|
$('.chat-inside-content .topic-title').html(title);
|
|
}
|
|
|
|
$('.chat-inside-content .chat-inside-body').html(html);
|
|
$('.chat-inside-content').show();
|
|
$('.chat-inside-content .chat-inside-body').scrollTop($('.chat-inside-content .chat-inside-body')[0].scrollHeight);
|
|
}
|
|
});
|
|
}
|
|
} );
|
|
</script>
|
|
@endsection |