388 lines
16 KiB
PHP
388 lines
16 KiB
PHP
@extends('Frontend.layouts.master')
|
|
@section('content')
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
|
|
|
|
|
|
|
|
<div>
|
|
<div class="chat-sec">
|
|
<div class="chat-box container">
|
|
<h2>Customer Support</h2>
|
|
<div class="row chat-content">
|
|
<div class="col-md-12 user-chat chat-msgs aos-init aos-animate" data-aos="fade-right"
|
|
style="height:32rem; overflow:auto">
|
|
{{-- <div class="" style="min-height:auto">
|
|
<div class="sent container mb-4">
|
|
<div class="sentchat-icon">
|
|
<div class="contact-details">
|
|
<img
|
|
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
|
|
</div>
|
|
</div>
|
|
<div class="sent-chat">
|
|
<p>Hi shubham test</p>
|
|
<div class="sent-time">
|
|
<span>27/09/2023 23:53:24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="send-right">
|
|
<div class="receive">
|
|
<p>Hi Admin</p>
|
|
<span
|
|
style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
|
|
23:53:35</span>
|
|
</div>
|
|
</div>
|
|
<div class="send-right">
|
|
<div class="receive">
|
|
<p>Hi Admin</p>
|
|
<span
|
|
style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
|
|
23:53:35</span>
|
|
</div>
|
|
</div>
|
|
<div class="sent container mb-4">
|
|
<div class="sentchat-icon">
|
|
<div class="contact-details">
|
|
<img
|
|
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
|
|
</div>
|
|
</div>
|
|
<div class="sent-chat">
|
|
<p>Hi shubham</p>
|
|
<div class="sent-time">
|
|
<span>27/09/2023 23:53:24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="send-right">
|
|
<div class="receive">
|
|
<p>Hi Admin</p>
|
|
<span
|
|
style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
|
|
23:53:35</span>
|
|
</div>
|
|
</div>
|
|
<div class="sent container mb-4">
|
|
<div class="sentchat-icon">
|
|
<div class="contact-details">
|
|
<img
|
|
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
|
|
</div>
|
|
</div>
|
|
<div class="sent-chat">
|
|
<p>Hi shubham</p>
|
|
<div class="sent-time">
|
|
<span>27/09/2023 23:53:24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="send-right">
|
|
<div class="receive">
|
|
<p>Hi Admin</p>
|
|
<span
|
|
style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
|
|
23:53:35</span>
|
|
</div>
|
|
</div>
|
|
<div class="sent container mb-4">
|
|
<div class="sentchat-icon">
|
|
<div class="contact-details">
|
|
<img
|
|
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
|
|
</div>
|
|
</div>
|
|
<div class="sent-chat">
|
|
<p>Hi shubham</p>
|
|
<div class="sent-time">
|
|
<span>27/09/2023 23:53:24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="send-right">
|
|
<div class="receive">
|
|
<p>Hi Admin</p>
|
|
<span
|
|
style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
|
|
23:53:35</span>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="spinner-border" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="send-msg">
|
|
<form id="form1" enctype="multipart/form-data" method="POST">
|
|
<div class="input-group w-100 m-auto" id="text-group">
|
|
<input type="text" class="form-control w-50" name="message" id="message"
|
|
aria-label="Text input with dropdown button">
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Attach
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" id="changeToFile" href="javascript:void(0)">File</a>
|
|
</div>
|
|
</div>
|
|
<button type="submit" id="chat-send">Send</button>
|
|
</div>
|
|
<div class="input-group w-100 m-auto d-none" id="file-group">
|
|
|
|
<input type="file" class="form-control" id="file-send" name="user_file"
|
|
aria-label="Text input with dropdown button">
|
|
|
|
<div class="input-group-append">
|
|
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
|
|
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Attach</button>
|
|
|
|
<div class="dropdown-menu">
|
|
|
|
<a class="dropdown-item" id="changeToText" href="javascript:void(0)">Text</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="submit" id="chat-send">Send</button>
|
|
|
|
</div>
|
|
</form>
|
|
{{-- <button class="d-none" id="down_btn">down</button> --}}
|
|
<i class="fa fa-chevron-down d-none" id="down_btn" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
var condition = false;
|
|
$('#down_btn').click(function() {
|
|
condition = true;
|
|
// $('.chat-msgs').scroll(function() {
|
|
$('.chat-msgs').scrollTop($(
|
|
'.chat-msgs')[0]
|
|
.scrollHeight);
|
|
condition = false;
|
|
$('#down_btn').addClass('d-none');
|
|
// });
|
|
});
|
|
|
|
$(function() {
|
|
|
|
getMessage();
|
|
setTimeout(() => {
|
|
$('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
|
|
}, 2000);
|
|
|
|
})
|
|
// var autoScrollDown = true;
|
|
setInterval(function() {
|
|
// console.log(autoScrollDown);
|
|
// if (autoScrollDown) {
|
|
getMessage();
|
|
// }
|
|
checkScroll();
|
|
|
|
// if (condition) {
|
|
// $('.chat-msgs').scroll(function() {
|
|
|
|
// setTimeout(() => {
|
|
// $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
|
|
// }, 2000);
|
|
// })
|
|
// } else {
|
|
// alert('stop');
|
|
// }
|
|
}, 4000);
|
|
|
|
$('#changeToText').click(function() {
|
|
|
|
$('#message').val('');
|
|
|
|
$('#text-group').toggleClass('d-none');
|
|
|
|
$('#file-group').toggleClass('d-none');
|
|
|
|
})
|
|
|
|
$('#changeToFile').click(function() {
|
|
|
|
$('#file-send').val(null);
|
|
|
|
$('#text-group').toggleClass('d-none');
|
|
|
|
$('#file-group').toggleClass('d-none');
|
|
|
|
})
|
|
|
|
$('#form1').submit(function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
var formData = new FormData(this);
|
|
|
|
$.ajaxSetup({
|
|
|
|
headers: {
|
|
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$.ajax({
|
|
|
|
url: "{{ route('send-msg') }}",
|
|
|
|
type: "POST",
|
|
|
|
data: formData,
|
|
|
|
processData: false,
|
|
|
|
contentType: false,
|
|
|
|
dataType: "json",
|
|
|
|
success: function(result) {
|
|
|
|
if (result.status == 200) {
|
|
|
|
// $("#companyAddModal").modal("hide");
|
|
|
|
// toastr.success(result.message);
|
|
|
|
// setTimeout(() => {
|
|
|
|
// location.reload();
|
|
|
|
// }, 1000);
|
|
|
|
getMessage();
|
|
$('#file-send').val(null);
|
|
$('#message').val('');
|
|
// checkScroll();
|
|
setTimeout(() => {
|
|
$('.chat-msgs').scrollTop($('.chat-msgs')[0]
|
|
.scrollHeight);
|
|
}, 2000);
|
|
getMessage();
|
|
// var height = $('.chat-msgs').height();
|
|
// $('.sent').scrollTop(height);
|
|
|
|
}
|
|
|
|
if (result.status == 400) {
|
|
|
|
toastr.warning(result.message);
|
|
|
|
}
|
|
if (result.status == 403) {
|
|
if (result.message.message) {
|
|
toastr.warning(result.message.message[0]);
|
|
} else {
|
|
toastr.warning(result.message.user_file[0]);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
})
|
|
|
|
firstTime = true;
|
|
|
|
function getMessage() {
|
|
|
|
$.ajax({
|
|
|
|
url: "{{ route('get-chat') }}",
|
|
|
|
type: "GET",
|
|
|
|
success: function(result) {
|
|
|
|
$('.chat-msgs').html('');
|
|
$('.chat-msgs').append(result);
|
|
if (firstTime) {
|
|
$('.chat-msgs').children('div.first').addClass('d-none');
|
|
$('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
|
|
$('.chat-msgs').children('div.first').removeClass('d-none');
|
|
}
|
|
firstTime = false;
|
|
// if (autoScrollDown) {
|
|
// $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
|
|
// }
|
|
// checkScroll();
|
|
// setTimeout(() => {
|
|
// $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
|
|
// }, 2000);
|
|
|
|
// $('#kt_drawer_chat_messenger_footer').removeClass('d-none');
|
|
|
|
if (result.status == 400) {
|
|
|
|
toastr.warning(result.message);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function checkScroll() {
|
|
// $(function() {
|
|
var lastScrollTop = 0,
|
|
delta = 5;
|
|
$('.chat-msgs').scroll(function() {
|
|
var nowScrollTop = $(this).scrollTop();
|
|
// alert(nowScrollTop);
|
|
if (Math.abs(lastScrollTop - nowScrollTop) >= delta) {
|
|
if (nowScrollTop > lastScrollTop) {
|
|
// ACTION ON
|
|
// SCROLLING DOWN
|
|
// alert('down');
|
|
autoScrollDown = true;
|
|
if ($('.chat-msgs')[0].scrollHeight) {
|
|
$('#down_btn').addClass('d-none');
|
|
}
|
|
} else {
|
|
// alert('up');
|
|
// ACTION ON
|
|
// SCROLLING UP
|
|
autoScrollDown = false;
|
|
if (condition) {
|
|
$('.chat-msgs').scroll(function() {
|
|
setTimeout(() => {
|
|
$('.chat-msgs').scrollTop($(
|
|
'.chat-msgs')[0]
|
|
.scrollHeight);
|
|
}, 2000);
|
|
});
|
|
condition = false;
|
|
} else {
|
|
// alert('stop');
|
|
$('#down_btn').removeClass('d-none');
|
|
}
|
|
}
|
|
lastScrollTop = nowScrollTop;
|
|
}
|
|
});
|
|
// });
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|