Viewing file:  c51fa0176b15b7309c2b2cb22c629708.php (133.52 KB) -rwxrwxrwx
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title'); ?> Chats <?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-css'); ?>
<link rel="stylesheet" href="<?php echo e(asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/select2/css/select2.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/daterangepicker/daterangepicker.css')); ?>">
<style>
.search-box {
background: #fafafa;
padding: 0px 0px;
border-radius: 14px;
}
.input-wrapper {
padding: 13px;
background: #eee;
border-radius: 20px;
}
i {
vertical-align: middle;
}
input {
border: none;
border-radius: 30px;
width: 80%;
height: 35px;
background: #eeeeee;
}
::placeholder {
font-weight: 300;
margin-left: 20px;
}
:focus {
outline: none;
}
.friend-drawer {
display: flex;
vertical-align: baseline;
background: #fff;
transition: .3s ease;
}
--grey {
background: #eee;
}
.text {
margin-left: 12px;
width: 100%;
}
p {
margin: 0;
}
--onhover:hover {
background: blue;
cursor: pointer;
}
hr {
margin: 5px auto;
width: 60%;
}
.chat-bubble--left {
padding: 10px 14px;
background: #D9FDD3;
margin: 10px;
border-radius: 9px;
position: relative;
:after {
content: '';
position: absolute;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom: 0;
margin-top: -10px;
}
--left {
:after {
left: 0;
border-right-color: #eee;
border-left: 0;
margin-left: -20px;
}
}
--right {
:after {
right: 0;
border-left-color: blue;
border-right: 0;
margin-right: -20px;
}
}
}
.chat-bubble--right {
padding: 10px 14px;
background: #d3d7de;
margin: 10px;
border-radius: 9px;
position: relative;
}
.offset-md-8 {
.chat-bubble {
background: blue;
color: #fff;
}
}
.chat-box-tray {
background: #eee;
display: flex;
align-items: baseline;
padding: 10px 15px;
align-items: center;
margin-top: 65px;
bottom: 0;
input {
margin: 0 10px;
padding: 6px 2px;
}
i {
color: grey;
font-size: 30px;
vertical-align: middle;
:last-of-type {
margin-left: 25px;
}
}
}
.chat-box-body {
height: 640px;
overflow-y: auto;
overflow-x: hidden;
}
.chat-box-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(134, 134, 134, 0.3);
background-color: #F5F5F5;
}
.chat-box-body::-webkit-scrollbar {
width: 2px;
background-color: #F5F5F5;
}
.chat-box-body::-webkit-scrollbar-thumb {
background-color: #b5b3b3;
border: 1px solid #aaaaaa;
}
.chat-box-side {
height: calc(86vh - 212px);
overflow-y: auto;
}
.icon {
display: none;
color: black;
}
@media (max-width: 700px) {
.icon {
display: block !important;
}
}
.selectBox {
height: 40px;
border: 0;
margin-right: 16px;
border-radius: 10px;
padding: 5px;
}
.label {
width: 100% !important;
}
.list-group-item-light.list-group-item-action.active {
background-color: #3c8dbc;
border-color: #3c8dbc;
}
.loading {
position: relative;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
.loader {
left: 50%;
margin-left: -4em;
font-size: 10px;
border: .8em solid rgba(218, 219, 223, 1);
border-left: .8em solid rgba(58, 166, 165, 1);
animation: spin 1.1s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 4em;
height: 4em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.message-sent-time {
color: black;
float: right;
margin: -10px 11px 0px 0px;
font-size: 12px;
}
.chat_heading {
padding: 0px !important;
}
.response_value {
padding: 10px 0px 10px 20px;
cursor: pointer;
color: black !important;
border-bottom: 0.5px solid #e0e2e6;
}
#showResponse {
width: 100%;
position: absolute;
z-index: 99;
background: #f4f6f9;
color: black;
bottom: 47px;
min-height: 100px;
max-height: 250px;
overflow-y: auto;
padding: 10px 0px 10px 0px;
margin: 0 auto;
border-radius: 8px;
}
.type_message_section {
width: 100%;
}
.card {
border-radius: 14px;
}
.inbox-heading {
padding: 10px 0px 4px 15px;
}
.card-body {
padding: 0px 10px !important;
}
.daterangepicker.show-calendar {
bottom: auto !important;
top: 28% !important;
left: 15% !important;
}
.search-chat-head {
border-bottom: hidden !important;
background: white !important;
}
.search-chat-head:hover {
border-bottom: hidden !important;
background: white !important;
}
.search-section .input-group-text {
border-radius: 15px 0px 0px 14px;
}
.search-section input {
border-radius: 0px 15px 15px 0px;
}
#filterBy {
border-radius: 15px;
}
#sortBy {
border-radius: 15px;
}
#dropdownMenuButton {
font-size: 13px !important;
padding: 9px !important;
}
.filter-section {
list-style-type: none;
}
.chat-number-section .date-section {
padding: 7px;
border-radius: 18px;
background: #eeeeeeb8;
}
.chat-number-section .number-section {
padding: 7px;
border-radius: 18px;
background: #eeeeeeb8;
}
.c-pointer {
cursor: pointer;
}
.chat-number-section {
overflow-x: hidden;
}
.exception_modal_btn {
border-radius: 20px;
}
.grade-list {
max-height: 200px;
overflow-y: scroll;
}
.paginate-icon {
font-size: 22px !important;
}
#search {
padding: 5px 3px 5px 5px !important;
}
#gradeList {
max-height: 200px;
overflow-y: scroll;
}
.settings-tray, .find-contact-section {
/*border-bottom: 1px solid grey;*/
box-shadow: 0 4px 2px -2px #eee;
}
.btn-danger {
background-color: #f51026 !important;
border-color: #f51026 !important;
}
#addException {
color: black !important;
background-color: yellow !important;
border-color: yellow !important;
}
.ajax-loader {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #ebebeb;
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #bfbfbf;
}
</style>
<style>
.input-group-text {
padding: 0px !important;
margin: 0px !important;
}
.section-new-message .msg-body-section {
padding: 7px;
border-radius: 5px;
box-shadow: 0 11px 14px rgb(0 0 0 / 3%), 0 6px 7px rgb(0 0 0 / 7%);
border: 1px solid #0769fb87;
}
.msg-body-section .type_message {
border: hidden !important;
}
.msg-body-section .input-group-text {
background: white !important;
border: hidden !important;
}
#page-content-wrapper {
min-height: 780px !important;
}
.section-new-message {
position: absolute;
bottom: 0;
width: 100%;
}
.attact-icon .choose_file {
padding: 3px;
border-radius: 50px;
margin-right: 6px;
cursor: pointer;
float: right;
}
.msg-send-section .sent-btn small {
font-weight: 700 !important;
}
.msg-send-section .sent-btn {
margin-right: 12px;
margin-left: -3px;
background: var(--primary) !important;
border: 1px solid #f3f4f4;
box-shadow: 0 11px 14px rgb(0 0 0 / 3%), 0 6px 7px rgb(0 0 0 / 7%);
}
.fa-smile-o:before {
content: "\f118";
}
.emoji-picker-icon {
margin-top: 5px !important;
right: 42px !important;
}
.empty-details-section {
height: calc(100vh - 230px);
display: flex;
justify-content: center;
align-items: center;
}
.chat.active h6 {
font-weight: 600 !important;
}
.emoji-menu {
bottom: 46px !important;
}
.message-body-section .con-name {
font-weight: 500;
margin-bottom: 3px !important;
}
.btn-p-custom {
background: var(--primary) !important;
border-radius: 16px;
color: white !important;
box-shadow: 0 2px 4px rgb(0 0 0 / 14%), 0 3px 4px rgb(0 0 0 / 12%);
padding: 10px !important;
}
#searchContact {
border: hidden !important;
}
body {
overflow-x: hidden !important;
}
.start-chat-text {
display: inline-block;
margin-left: 5px;
}
/*.type_message {*/
/* cursor: text;*/
/*}*/
.section-new-message {
display: none;
}
#allContacts {
height: 100vh;
overflow-y: auto;
}
.new-chat-section {
height: calc(100vh - 130px);
overflow: hidden;
}
.failed-message {
color: red;
font-weight: 500;
background: rgba(255, 0, 0, .03);
}
.chat-from-action {
display: none;
border-radius: 50%;
height: 23px;
width: 23px;
position: absolute;
top: -19px;
right: 0;
}
.chat-from-action:hover {
background: rgba(0, 0, 0, .1);
}
.chat:hover .chat-from-action{
display: inline-block;
}
.chat-reply-action {
display: none;
border-radius: 5px;
position: absolute;
}
.chat-bubble--left:hover .chat-reply-action{
display: inline-block;
}
.left-bubble-title{
margin: 10px 0;
}
.left-side-bubble-icon{
font-size: 18px;
background: var(--primary);
padding: 8px 12px;
border-radius: 50px;
color: white;
position: relative;
top: 7px;
}
.unread-msg-counter{
float: right;
font-weight: 900;
background: var(--primary);
padding: 0px 6px;
border-radius: 25px;
color: white;
}
.empty-image-section img{
width:100%;
height:100%;
}
.empty-image-section{
width: 200px;
}
.from-nmbr-border-right{
border-right: 2px solid var(--primary) !important;
z-index: 999;
}
/*.sent-btn i{*/
/* color: white !important;*/
/*}*/
.sent-btn{
background: var(--primary)!important;
color: white !important;
width: 100%;
height: 100%;
}
.newMessage{
position: relative;
z-index: 9999;
background: var(--primary);
width: 77%;
text-align: left;
left: 10%;
padding: 5px 25px;
border-radius: 15px;
color: white;
cursor: pointer;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search.select2-search--inline .select2-search__field {
border: 0;
margin-top: 6px;
height: 25px !important;
}
.switch input {
display:none;
}
.switch {
display: inline-block;
width: 48px;
height: 18px;
margin: 4px;
transform: translateY(50%);
position: relative;
}
/* Style Wired */
.slider {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border-radius:30px;
box-shadow: 0 0 0 2px #e0dddd, 0 0 4px #fffefe;
cursor:pointer;
border:2px solid transparent;
overflow:hidden;
transition:.4s;
}
.slider:before {
position:absolute;
content:"";
width:100%;
height:100%;
background: #b6b5b5;
border-radius:30px;
transform:translateX(-30px);
transition:.4s;
}
input:checked + .slider:before {
transform:translateX(30px);
background: var(--success);
}
input:checked + .slider {
box-shadow:0 0 0 2px var(--success),0 0 2px var(--success);
}
span.filter-head-text {
font-weight: 700;
}
span.filter-head-value {
font-weight: 500;
}
.chat-box-filter-head-sec {
margin: 10px 0px;
}
input.form-check-input {
border: none;
border-radius: 30px;
width: 70px !important;
height: 15px !important;
background: #eeeeee;
}
.chatbox-asigned-content {
display: flex;
align-items: center;
}
.chatbox-timing-sec {
margin-left: 10px;
}
.chatbox-notification-sec {
background: red;
padding: 1px 4px 1px 4px;
border-radius: 3px;
color: #fff;
font-size: 10px;
}
.chatbox-notification-sec-two {
background: #ea9292;
padding: 1px 4px 1px 4px;
border-radius: 3px;
color: #fff;
font-size: 10px;
}
.btn.sm.button-sc {
border-radius: 50%;
margin-left: 38px;
font-size: 7px !important;
padding: 5px 4px 4px 4px !important;
margin-top: 2px;
}
.assign-btn-for-all{
border: hidden;
background: initial;
color: #6c757d;
cursor: pointer;
}
.chat-box-bottom-sec{
padding: 0px 0px 5px 0px;
}
.assign_campaign:focus,.remove_campaign:focus{
outline: white !important;
}
.chat-box-filter-content-sec::-webkit-scrollbar {
width: 0px;
background-color: #ffffff40;
}
.chat-box-filter-content-sec {
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) !important;
padding: 10px;
border-radius: 5px;
}
.chat-box-filter-content-sec::-webkit-scrollbar-thumb {
border: 2px solid #A2ADB7;
background: #A2ADB7;
border-radius: 7px;
}
.chat:hover .assign-btn-for-all,.chat:hover .rmv-cmp{
background: #f4f6f9;
}
.custom-form-control{
height: 25px !important;
padding: 0px 10px !important;
}
.conversation-assigned-sec-icons .assign-btn-for-all{
padding: 0px !important;
}
.flagged_contact.active i{
color: #5b73e8 !important;
}
#existingStaffs{
list-style: none !important;
}
.chat-number-section-left{
min-height: 697px;
}
.total-counter-unread{
background: red;
padding: 0px 4px;
color: white;
border-radius: 5px;
text-align: center;
margin: 0 auto;
font-size: 11px;
position: absolute;
top: 0;
}
.d-contents{
display: table-caption !important;
}
.assign_staff_contact{
outline: 0px auto -webkit-focus-ring-color !important;
}
.assigned-user-icon{
background: #5b73e8;
padding: 6px;
border-radius: 50px;
font-size: 11px;
text-align: right;
color: white;
font-weight: 700;
}
.trash_contact:focus{
outline: 0px auto -webkit-focus-ring-color !important;
}
</style>
<link href="<?php echo e(asset('emoji/css/emoji.css')); ?>" rel="stylesheet">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<div class="container-fluid" id="wrapper">
<div class="row">
<div class="col-md-5 col-xl-5 col-sm-5">
<div class="card p-2 mt-3">
<div class="card-heading message-title-section">
<?php if(auth('customer')->user()->type !='staff'): ?>
<div class="send-new-message-pop-up mb-2">
<button type="button" id="send-new-message-pop-up-button" class="btn btn-success btn-sm send-new-message-pop-up-btn">Send Message</button>
</div>
<?php endif; ?>
<div class="inbox-heading d-none">
<h6><i class="fa fa-inbox mr-2"></i> <b>Messages</b></h6>
<button class="btn btn-p-custom new_chat mt-2" type="button">
<i class="fa fa-sms text-white"></i> <span class="start-chat-text">Start Chat </span>
</button>
</div>
</div>
<div class="card-body">
<div class="border-end bg-white chat-number-section-left" id="sidebar-wrapper">
<?php if(auth('customer')->user()->type !='staff'): ?>
<div class="chat-box-filter-content-sec" id="chat-box-fitler">
<div class="chat-box-filter-head-sec">
<span class="message-for-archive d-none">
<span class="filter-head-text">
Archive :
<span class="filter-head-value archive_total_channel">0</span>
</span>
</span>
<span class="message-for-inbox"> <span class="filter-head-text">Channels : <span class="filter-head-value total_channel">0</span></span></span>
<span class="message-for-inbox"><span class="filter-head-text">Unread : <span class="filter-head-value total_unread">0</span></span></span>
<span class="float-right">
<button type="button"
class="btn btn-danger btn-sm ml-2 inbox_messages">
<i class="fa fa-archive" aria-hidden="true"></i>
</button>
</span>
<span class="float-right">
<?php if(auth('customer')->user()->type=='reseller'): ?>
<button type="button" class="btn btn-success btn-sm ml-4 filter-by-customer-btn"
id="filter-by-customer-preview-btn">
<i class="fa <?php echo e(isset($access_staff_view) && $access_staff_view=='no'?'fa-eye-slash':'fa-eye'); ?>" aria-hidden="true"></i>
</button>
<?php endif; ?>
</span>
</div>
<div class="row">
<div class="col-sm-12 search-by-customer-select">
<div class="form-group ">
<?php if(auth('customer')->user()->type=='reseller'): ?>
<select class="form-control choose_staff custom-form-control">
<option value="all"><?php echo e(trans('--Select User--')); ?></option>
<?php $__currentLoopData = $staffs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $staff): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e($staff->id); ?>"><?php echo e($staff->email); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
<?php endif; ?>
<input type="text" class="form-control custom-form-control mt-2" name="" placeholder="Search For Anything">
</div>
</div>
</div>
<div class="row">
<?php if(auth('customer')->user()->type!='staff'): ?>
<div class="col-sm-4">
<div class="form-group">
<label for="">Campaign</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control custom-form-control" id="all_campaigns">
<option value="all">--Choose Campaign--</option>
<?php $__currentLoopData = $campaigns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $campaign): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e($campaign->id); ?>"><?php echo e($campaign->title); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
</div>
</div>
<?php endif; ?>
<div class="col-sm-4 d-none">
<div class="form-group mb-0">
<label for="">Flags</label>
</div>
</div>
<div class="col-sm-8 d-none">
<div class="form-group mb-0">
<select class="form-control custom-form-control" name="" id="">
<option value="">None</option>
</select>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-5">
<span>Unread: <input type="checkbox" class="form-check-input" id="unreadStatus"></span>
</div>
<div class="col-md-7">
<span>Order by Oldest: <input type="checkbox" class="form-check-input" id="orderByOldest"></span>
</div>
</div>
<div id="view_all_campaing">
</div>
<div class="mt-4 d-none">
<span><i class="fa fa-file" aria-hidden="true"></i> <span class="ml-2"><strong>+9292929883</strong> <span class="text-muted">-Thomas</span></span> </span>
</div>
<div class="chat-box-bottom-sec d-none align-items-center justify-content-between">
<div class="chatbox-asigned-content">
<div class="chatbox-notification-sec-two">
+
</div>
<div class="chatbox-timing-sec">
<div class="chatbox-assigned-title text-muted">
Videos
</div>
<div class="chatbox-time-sec text-muted">
11/11/2023 8.20 Am
</div>
</div>
</div>
<div class="conversation-assign-section">
<div class="conversation-assigned-sec-icons">
<span>
<i class="fa fa-users" aria-hidden="true"></i>
</span>
<span>
<i class="fa fa-flag text-muted" aria-hidden="true"></i>
</span>
<span>
<i class="fa fa-archive text-danger" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="list-group list-group-flush">
<div class="list-group list-group-flush">
<div
class="list-group-item list-group-item-action search-chat-head list-group-item-light chat_heading">
</div>
<div class="ajax-loader d-none">
<img src="<?php echo e(asset('images/ezgif-1-7aba96d47e.gif')); ?>" alt="">
</div>
<div class="newMessageAlert">
</div>
<div class="chat-box-side mt-3 chat-number-section" id="numb" data-current-page="2">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center pt-3">
<button class="btn btn-sm mr-3 disabled" id="previous-page"><i
class="fa fa-chevron-left paginate-icon text-success"></i></button>
<span>Pages <span class="ml-2" id="cPage">1</span></span>
<button class="btn btn-sm ml-3" id="next-page"><i
class="fa fa-chevron-right paginate-icon text-success"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-xl-7 col-sm-7">
<!-- Page content wrapper-->
<div class="card p-2 mt-3 message-details-section">
<div id="page-content-wrapper" class="page-content-section-wrapper" style="width: 100%;">
<div class="container-fluid">
<div class="col-md-12 d-none details-section">
<div class="settings-tray">
<div class="friend-drawer no-gutters friend-drawer--grey">
<div class="text">
<p class="text-muted mt-2" id="mess"></p>
<div class="form-group label pt-2 d-none" id="label">
<div class="row">
<div class="col-sm-4">
<?php if(auth('customer')->user()->type !='staff'): ?>
<button class="btn exception_modal_btn btn-warning btn-sm"
data-type="add" id="addException" type="button">Suppress
</button>
<button class="btn exception_modal_btn btn-danger btn-sm d-none"
data-type="delete" id="removeException" type="button">
Suppress
</button>
<div style="display: initial">
<button class="btn btn-sm btn-success ml-3"
id="sendNumberInfo">Push
</button>
</div>
<?php endif; ?>
</div>
<div class="col-lg-4 text-center" id="contactName">
</div>
<?php if(auth('customer')->user()->type !='staff'): ?>
<div class="col-lg-3">
<select class="form-control label" name="label"
id="select-label">
<?php $__currentLoopData = $labels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option
style="color: <?php echo e(isset($label->color)?$label->color:''); ?>"
value="<?php echo e($label->id); ?>"><?php echo e(ucfirst($label->title)); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
</div>
<div class="col-lg-1">
<a type="button"
class="btn btn-info save d-none text-white"><?php echo app('translator')->get('admin.form.button.save'); ?></a>
</div>
<?php else: ?>
<div class="col-lg-4">
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="chat-box-body" id="to-chat" data-current-chats="2"></div>
</div>
<div class="col-md-12 empty-details-section text-center">
<div class="row">
<div class="col-md-12">
<div class="empty-text">
<div class="empty-image-section mx-auto">
<img src="<?php echo e(asset('images/campaign-cuate.png')); ?>" alt="">
</div>
</div>
</div>
<div class="col-md-12">
<h6 class="text-center empty-text"><?php echo e(formatDate(now())); ?>
<br>
<span class="mt-4 pt-3 font-weight-bold">Select a contact to start conversation</span>
</h6>
</div>
</div>
</div>
<div class="col-md-12 new-chat-section d-none text-center" id="new-chat-sec-wrapper">
<div class="row mt-4 find-contact-section">
<div class="col-md-2 col-4 pt-2">
<label for="">To :</label>
</div>
<div class="col-md-10 col-10">
<input type="text" id="searchContact" placeholder="Type a name to find contact"
class="form-control b-0">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 col-12" id="allContacts">
<?php $__currentLoopData = auth('customer')->user()->contacts()->limit(30)->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $contact): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php
$chars = 'ABCDEF0123456789';
$color = '#';
for ( $i = 0; $i < 6; $i++ ) {
$color .= $chars[rand(0, strlen($chars) - 1)];
}
?>
<div data-to-number="<?php echo e($contact->number); ?>"
class="chat row single-contact p-2 mt-1" id="c_<?php echo e($contact->id); ?>"
data-number="<?php echo e($contact->number); ?>"
data-name="<?php echo e($contact->fullname?:$contact->number); ?>"
data-id="<?php echo e($contact->id); ?>">
<div class="col-md-2 col-2 text-center new-contact-section"
id="contact_name_<?php echo e($contact->id); ?>">
<strong style="background: <?php echo e($chars); ?>" class="new-c-name-icon">
<?php echo e($contact->first_name?substr(strtoupper($contact->first_name), 0, 1):'?'); ?>
</strong>
</div>
<div class="col-md-9 text-left">
<h6 class="m-0"> <?php echo e($contact->fullname); ?></h6>
<h6 class="m-0"><?php echo e($contact->number); ?></h6>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
</div>
<div class="row mb-3 section-new-message">
<div class="col-11 col-sm-10 msg-body-section">
<div class="input-group lead emoji-picker-container">
<div class="input-group-prepend from-nmbr-border-right">
<span class="input-group-text">
<div class="btn-group">
<button type="button"
class="btn pt-0 pb-0 from-number-text dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<?php echo e(isset($numbers[0])?substr($numbers[0]->number, 0,5):'From'); ?>
</button>
<div class="dropdown-menu" role="menu" style="">
<?php $__currentLoopData = $numbers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $number): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<a class="dropdown-item choose-from-number"
data-number="<?php echo e($number->number); ?>"
href="#"><?php echo e($number->number); ?></a>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
</span>
</div>
<?php if($chat_responses->isNotEmpty()): ?>
<div id="showResponse" class="d-none">
<?php $__currentLoopData = $chat_responses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chat_response): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<h6 data-title="<?php echo e(isset($chat_response->content)?$chat_response->content:''); ?>"
class="response_value"><?php echo e($chat_response->title); ?></h6>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php endif; ?>
<input type="text" data-emojiable="true" data-emoji-input="unicode"
class="form-control pt-2 type_message" id="message"
placeholder="Type your message here...">
<div class="attact-icon">
<span class="choose_file"><i class="fa fa-link"></i></span>
</div>
<input type="hidden" id="number"
value="<?php echo e(isset($numbers[0])?$numbers[0]->number:''); ?>"
class="setFromNumber">
<input type="file" name="mms_file" class="mms_file d-none">
<input type="hidden" name="chat_type" value="existing">
</div>
</div>
<div class="col-l col-sm-2 msg-send-section">
<button class="btn btn-default sent-btn send">
<small>Send</small>
</button>
</div>
</div>
</div>
</div>
<?php if(auth('customer')->user()->type !='staff'): ?>
<div id="send-message-pop-up" class="send-message-pop-up-sec d-none p-4">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="send-message-pop-up-close-btn-sec">
<button class="btn btn-danger btn-sm float-right close-send-message-pop-up-btn">X</button>
</div>
</div>
<div class="col-md-12">
<input type="hidden" name="from_selected_type" value="sms" id="from-selected-type">
<div class="from-section" id="sms_section_content">
<div class="form-group" id="sender_type">
<label for="">Select Sender Type</label>
<select name="type" class="form-control senderType">
<option value="number">Number</option>
<option value="sender_id">SenderID</option>
</select>
</div>
<div class="form-group from-number-section" id="phone_number_section">
<label for="">From</label>
<select name="from_number[]" id="smsFromNumber" class="select2 compose-select"
multiple="multiple"
data-placeholder="<?php echo e(trans('customer.select_senders')); ?>:">
<?php if(isset($users_from_number)): ?>
<optgroup label="From Numbers">
<?php $__currentLoopData = $users_from_number; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $number): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e(json_encode($number)); ?>"><?php echo e($number['number']); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</optgroup>
<?php endif; ?>
<?php if(isset($users_from_groups)): ?>
<optgroup label="From Groups">
<?php $__currentLoopData = $users_from_groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e(json_encode($group)); ?>"><?php echo e($group['number']); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</optgroup>
<?php endif; ?>
</select>
</div>
</div>
<div class="number-select-default-system">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="to-number-input-control">To Number</label>
<textarea name="to_number[]" id="to_number_sec" class="form-control" id="" cols="4" rows="4" placeholder="Enter To Number"></textarea>
</div>
<div class="form-group">
<label for="to-number-input-control">Message Body</label>
<textarea name="message_body" id="message_body_sec" class="form-control" id="" cols="4" rows="4" placeholder="Enter Your Message"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="send-message-pop-up-btn mt-3">
<button type="button" class="btn btn-primary btn-sm float-right message-send-btn">Send Message</button>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="modal" id="exceptionModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Exception</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-dark exception_message"></p>
<div class="d-none form-group mt-3" id="check_new_contact">
<input type="checkbox" class="float-left" id="checkInput" name="check_new_contact"
style="width: 5% !important;"> <label for="checkInput" class="ml-2 mt-2">Do you want to
add this number in your contact list?</label>
</div>
</div>
<div class="modal-footer">
<button type="button" id="saveException" class="btn btn-primary">Confirm</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="active_number">
<div class="modal" id="addNewContact" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-dark">Do you want to add this number in your contact list?</p>
</div>
<div class="modal-footer">
<button type="button" id="addNewContactBtn" class="btn btn-primary">Confirm</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php $settings = auth('customer')->user()->settings->where('name', 'data_posting')->first();
$settings = isset($settings) && isset($settings->value)?json_decode($settings->value):'';
?>
<!-- Modal -->
<div class="modal fade" id="sendCInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Send</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">Select Method</label>
<select name="" class="form-control" id="sendUrlMethod">
<option <?php echo e(isset($settings->type) && $settings->type=='get'?'selected':''); ?> value="get">GET
</option>
<option <?php echo e(isset($settings->type) && $settings->type=='post'?'selected':''); ?> value="post">
POST
</option>
</select>
</div>
<div class="form-group">
<label for="">Enter Url</label>
<input type="text" id="sendUrl" value="<?php echo e(isset($settings->url)?$settings->url:''); ?>"
placeholder="Enter Url" class="form-control">
<small class="text-danger" id="altMessage"></small>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="confirmUrlSend" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="filtered_by_label">
<!-- Modal -->
<div class="modal fade" id="assignStaffModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Assign Staff</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for=""><?php echo e(trans('Choose Staff')); ?></label>
<select name="" class="form-control" id="assignStaff">
</select>
<input type="hidden" class="message_campaign_id">
<input type="hidden" class="message_contact_id">
<input type="hidden" class="message_log_id">
</div>
<div class="form-group">
<label for="">Assigned Staffs</label>
<ul class="mt-2" id="existingStaffs">
<li class="text-center text-danger">
No Data Available
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="assignNewStaff" class="btn btn-primary">Assign</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="multiAssignStaffModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<h6>This contact has been already assigned to another user.Do you want to assign this user too?</h6>
<input type="hidden" class="message_campaign_id">
<input type="hidden" class="message_contact_id">
<input type="hidden" class="message_log_id">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="multiAssignNewStaff" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?>
<script src="<?php echo e(asset('plugins/datatables/jquery.dataTables.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/select2/js/select2.full.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/daterangepicker/moment.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/daterangepicker/daterangepicker.js')); ?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="<?php echo e(asset('js/bootstrap-4-navbar.js')); ?>"></script>
<script>
"use strict";
$(document).ready(function () {
$('#to_number_sec').on('keyup or paste', function () {
var to_number = $(this).val();
var newValue = to_number.replace(/\s/g, '');
$('#to_number_sec').text(newValue?newValue:'0');
});
});
$(document).on('click', '.message-send-btn', function (e) {
e.preventDefault();
const send_type = $('.senderType').val();
const from_number = $('#smsFromNumber').val();
const all_to_number = $('#to_number_sec').val();
const to_numbers = all_to_number.replace(/\s/g, '');
const message_body = $('#message_body_sec').val();
const from_selected_type = $('#from-selected-type').val();
$.ajax({
type:'POST',
url:'<?php echo e(route('customer.chat.pop.up.message.send')); ?>',
data:{
send_type:send_type,
from_number:from_number,
to_numbers:to_numbers,
message_body:message_body,
from_selected_type:from_selected_type,
_token: '<?php echo e(csrf_token()); ?>',
},
success: function (res) {
if (res.status == 'success') {
$('#message_body_sec').val('');
$('#smsFromNumber').val('').trigger('change');
$('#to_number_sec').val('');
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
}else{
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Error',
body: res.message,
});
}
}
})
});
$(document).on('change', '.senderType', function (e){
const type=$(this).val();
const from_selected_type = $('.from_selected_type').val();
if(!type){
toastr.success('Select valid type','Copied!', {timeOut: 2200});
return;
}
$.ajax({
type:'GET',
url:'<?php echo e(route('customer.all.senders')); ?>',
data:{
type:type,from_selected_type:from_selected_type
},
success: function(res){
if(res.status=='success'){
let numbers = '';
if(res.number.length > 0) {
$.each(res.number, function (index, value) {
numbers+= `<option value='${JSON.stringify(value)}'>${value['number']}</option>`;
});
}
let groups = '';
if(res.groups.length > 0) {
$.each(res.groups, function (index, value) {
groups+= `<option value='${JSON.stringify(value)}'>${value['number']}</option>`;
});
}
$('#smsFromNumber').html(`<optgroup label="From Sender ID">${numbers}</optgroup><optgroup label=" Sender Group">${groups}</optgroup>`);
}
}
})
});
$('#smsFromNumber').select2({
tags: false,
placeholder: 'Select an from number'
});
$(document).on('click', '.send-new-message-pop-up-btn', function (e) {
e.preventDefault();
$('#page-content-wrapper').addClass('d-none');
$('.send-message-pop-up-sec').removeClass('d-none');
});
$(document).on('click', '.close-send-message-pop-up-btn', function (e) {
e.preventDefault();
$('.send-message-pop-up-sec').removeClass('active');
$('#page-content-wrapper').removeClass('d-none');
$('.send-message-pop-up-sec').addClass('d-none');
$('.empty-details-section').removeClass('d-none');
if ($("#new-chat-sec-wrapper").hasClass("active")) {
$('#new-chat-sec-wrapper').removeClass('d-none');
$('#new-chat-sec-wrapper').addClass('active');
}else{
$('#new-chat-sec-wrapper').addClass('d-none');
$('#new-chat-sec-wrapper').removeClass('active');
}
});
let sidebarAjax;
$(document).on('click', '.choose_file', function (e) {
$('.mms_file').trigger('click');
});
$(document).on('change', '#unreadStatus', function(e){
e.preventDefault();
$('#all_campaigns').val('all');
$('.choose_staff').val('all');
if($('#orderByOldest').is(":checked")){
$('#orderByOldest').trigger('click');
}
chatList();
});
$(document).on('change', '#orderByOldest', function(e){
e.preventDefault();
$('#all_campaigns').val('all');
$('.choose_staff').val('all');
if($('#unreadStatus').is(":checked")){
$('#unreadStatus').trigger('click');
}
chatList();
});
$(document).on('change', '#all_campaigns', function(e){
e.preventDefault();
chatList();
})
$(document).on('click', '#assignNewStaff', function (e) {
const staff_id = $('#assignStaff').val();
const campaign_id = $('.message_campaign_id').val();
const contact_id = $('.message_contact_id').val();
const message_log_id = $('.message_log_id').val();
$('#assignNewStaff').attr('disabled', 'disabled');
$.ajax({
type: 'POST',
url: '<?php echo e(route('customer.staff.assign.in.campaign')); ?>',
data: {
'_token':'<?php echo e(csrf_token()); ?>',staff_id: staff_id, campaign_id: campaign_id, contact_id: contact_id,message_log_id:message_log_id
},
success: function (res) {
if(res.status=='pre_assigned'){
$('#multiAssignStaffModal').modal('show');
$('#assignStaffModal').modal('hide');
}
if (res.status == 'success') {
$('#assignStaffModal').modal('hide');
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Error',
body: res.message,
});
}
$('#assignNewStaff').removeAttr('disabled');
}
});
});
$(document).on('click', '#multiAssignNewStaff', function (e) {
const staff_id = $('#assignStaff').val();
const campaign_id = $('.message_campaign_id').val();
const contact_id = $('.message_contact_id').val();
const message_log_id = $('.message_log_id').val();
$('#multiAssignNewStaff').attr('disabled', 'disabled');
$.ajax({
type: 'POST',
url: '<?php echo e(route('customer.staff.assign.in.campaign')); ?>',
data: {
'_token':'<?php echo e(csrf_token()); ?>',
staff_id: staff_id,
campaign_id: campaign_id,
contact_id: contact_id,
message_log_id:message_log_id,
type:'assigned_contact'
},
success: function (res) {
if (res.status == 'success') {
$('#assignStaffModal').modal('hide');
$('#multiAssignStaffModal').modal('hide');
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Error',
body: res.message,
});
}else if(res.status=='pre_assigned'){
notify('danger','Staff already assigned to this contact');
}
$('#multiAssignNewStaff').removeAttr('disabled');
}
});
});
$(document).on('click', '.assign_staff_contact', function (e) {
e.preventDefault();
// console.log(e);
const contact_id = $(this).attr('data-contact-id');
const campaign_id = $(this).attr('data-campaign-id');
const message_id = $(this).attr('data-message-id');
$('.message_campaign_id').val(campaign_id);
$('.message_contact_id').val(contact_id);
$('.message_log_id').val(message_id);
$.ajax({
type: 'get',
url: '<?php echo e(route('customer.get.campaign.staffs')); ?>',
data: {
contact_id: contact_id, campaign_id: campaign_id
},
success: function (res) {
if (res.status=='success') {
let html = '';
let existing_staffs = '';
$.each(res.staffs, function (index, value) {
html += `<option value="${value.id}">${value.first_name} ${value.last_name}(${value.email})</option>`;
});
$.each(res.pre_staffs, function (index, value) {
existing_staffs += `<li id="ex_staff_li_${value.id}">
<span class="ex-staff-name">${value.name}(${value.email})</span>
<span class="float-right delete_ex_staff" data-id="${value.id}">
<i class="fa fa-trash text-danger"></i>
</span>
</li>`;
});
$('#assignStaff').html(html);
$('#existingStaffs').html(existing_staffs);
$('#assignStaffModal').modal('show');
}
}
})
});
$(document).on('click', '.delete_ex_staff', function(e){
const id=$(this).attr('data-id');
$.ajax({
type:'GET',
url:'<?php echo e(route('customer.delete.contact.staff')); ?>',
data:{
id:id
},
success:function(res){
if(res.status=='success'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Error',
body: res.message,
});
$('#ex_staff_li_'+id).remove();
$('#assignStaffModal').modal('hide');
}
}
})
});
$(document).ready(function(){
getMessageCounter();
});
$(document).on('click', '.trash_contact', function(e){
const contact_id=$(this).attr('data-contact-id');
$.ajax({
type:'POST',
url:'<?php echo e(route('customer.message.move.trash')); ?>',
data:{
contact_id:contact_id,'_token':'<?php echo e(csrf_token()); ?>'
},
success:function(res){
if(res.status=='success'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
$('.delete_chat_row_'+contact_id).remove();
$('.details-section').addClass('d-none');
$('.empty-details-section').removeClass('d-none');
$('.new-chat-section').addClass('d-none');
$('.section-new-message').css('display', 'none !important');
}else{
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
}
chatList();
}
});
getMessageCounter();
});
//Remove Trash Contact
$(document).on('click', '.remove_trash_contact', function(e){
const contact_id=$(this).attr('data-contact-id');
$.ajax({
type:'POST',
url:'<?php echo e(route('customer.remove.trash.contact')); ?>',
data:{
contact_id:contact_id,'_token':'<?php echo e(csrf_token()); ?>'
},
success:function(res){
if(res.status=='success'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
$('.delete_chat_row_'+contact_id).remove();
$('.details-section').addClass('d-none');
$('.empty-details-section').removeClass('d-none');
$('.new-chat-section').addClass('d-none');
}else{
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
}
chatList();
}
})
getMessageCounter();
});
$(document).on('click', '.flagged_contact', function(e){
const contact_id=$(this).attr('data-contact-id');
$.ajax({
type:'POST',
url:'<?php echo e(route('customer.flag.contact')); ?>',
data:{
'_token':'<?php echo e(csrf_token()); ?>',contact_id:contact_id
},
success:function(res){
if(res.status=='success'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
$('.flagged_active_'+contact_id).addClass('active');
}else{
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
$('.flagged_active_'+contact_id).addClass('active');
}
}
})
});
$(document).on('click', '.inbox_messages', function(e){
e.preventDefault();
if($('.inbox_messages').hasClass('active')){
$('.inbox_messages').removeClass('active').removeClass('btn-success').addClass('btn-danger').html(`<i class="fa fa-archive" aria-hidden="true"></i>`);
$('.message-for-archive').addClass('d-none');
$('.message-for-inbox').removeClass('d-none');
}else{
$('.inbox_messages').addClass('active').removeClass('btn-danger').addClass('btn-success').html(`<i class="fa fa-inbox" aria-hidden="true"></i>`);
$('.message-for-inbox').addClass('d-none');
$('.message-for-archive').removeClass('d-none');
}
getMessageCounter();
chatList();
});
function getMessageCounter(){
let message_type='inbox';
if($('.inbox_messages').hasClass('active')){
message_type='trash';
}
$.ajax({
type:'GET',
url:'<?php echo e(route('customer.message.counter')); ?>',
data:{
message_type:message_type
},
success:function(res){
if(res.status=='success'){
if(message_type=='trash') {
$('.archive_total_channel').text(res.total_message)
}
$('.total_channel').text(res.total_message)
$('.total_unread').text(res.total_unread_message)
}
}
})
}
$(document).on('click', '.filter-by-customer-btn', function() {
$.ajax({
type:'POST',
url:'<?php echo e(route('customer.access.staff.message.view')); ?>',
data:{
'_token':'<?php echo e(csrf_token()); ?>'
},
success:function(res){
if(res.type=='no'){
$("#filter-by-customer-preview-btn").html(`<i class="fa fa-eye-slash" aria-hidden="true"></i>`);
}else{
$("#filter-by-customer-preview-btn").html(`<i class="fa fa-eye" aria-hidden="true"></i>`);
}
$('#all_campaigns').val('all');
$('.choose_staff').val('all');
chatList();
}
});
});
$(document).on('change', '.choose_staff', function(e){
$('#all_campaigns').val('all');
if($('#unreadStatus').is(":checked")){
$('#orderByOldest').trigger('click');
}
if($('#orderByOldest').is(":checked")){
$('#orderByOldest').trigger('click');
}
chatList();
});
$(document).on('click', '.choose-from-number', function (e) {
e.preventDefault();
const number = $(this).attr('data-number');
$('.setFromNumber').val(number);
$('.from-number-text').text(number.substring(0, 5));
});
$(document).on('click', '.filter-by', function (e) {
e.preventDefault();
const type = $(this).attr('data-type');
if (type == 'date') {
$('#reservation').trigger('click');
}
});
$(function () {
$('#reservation').daterangepicker();
});
$(document).on('click', '#sendNumberInfo', function (e) {
const number = $(this).attr('data-number');
$('#sendCInfoModal').modal('show');
$('#confirmUrlSend').attr('data-number', number);
});
</script>
<script>
"use strict";
window.addEventListener('DOMContentLoaded', event => {
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
let already_sent = false;
$(document).on('click', '.new_chat', function (e) {
e.preventDefault();
$('.new-chat-section').removeClass('d-none');
$('.section-new-message').css('display', 'none');
$('.empty-details-section').addClass('d-none');
$('.details-section').addClass('d-none');
$('.chat').removeClass('active');
$('input[name=chat_type]').val('new_chat');
if ($("#send-message-pop-up").hasClass("active")) {
$('.send-message-pop-up-sec').removeClass('d-none');
$('#page-content-wrapper').addClass('d-none');
}else{
$('.send-message-pop-up-sec').addClass('d-none');
$('#page-content-wrapper').removeClass('d-none');
}
});
function delay(callback, ms) {
let timer = 0;
return function () {
let context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
$(document).on('keyup', '#searchContact', delay(function (e) {
const name = $(this).val();
$.ajax({
type: 'GET',
url: '<?php echo e(route('customer.search.contacts',['page'=>1])); ?>',
data: {
name: name
},
success: function (res) {
if (res.status == 'success') {
let html = '';
$.each(res.data, function (index, value) {
html += `<div data-to-number="${value.number}" class="chat row single-contact p-2 mt-1" id="c_${value.id}" data-number="${value.number}"
data-name="${value.name}" data-id="${value.id}">
<div class="col-md-2 col-2 text-center new-contact-section" id="contact_name_${value.id}">
<strong" class="new-c-name-icon">
${value.name.substring(0, 1)}
</strong>
</div>
<div class="col-md-9 text-left">
<h6 class="m-0">${value.name}</h6>
<h6 class="m-0">${value.number}</h6>
</div>
</div>`;
});
$('#allContacts').html(html);
}
}
})
}, 500))
$('.select2').select2({
multiple: true,
placeholder: 'Select an recipients'
});
$(document).on('click', '.chat', function (e) {
e.preventDefault();
if($(this).attr('auto-ref') !='true') {
$('#to-chat').html(`<div class="loading"><div class="loader"></div></div>`);
}
$('#mess').html("");
const number = $(this).attr('data-to-number');
if (number) {
$('#label').removeClass("d-none");
}
$('.details-section').removeClass('d-none');
$('.empty-details-section').addClass('d-none');
$('.new-chat-section').addClass('d-none');
$('.send').attr('data-to-number', number);
$('.save').attr('data-to-number', number).addClass('d-none');
$('#active_number').attr('data-to-number', number);
$('.chat').removeClass('active');
$(this).addClass('active');
$('input[name=chat_type]').val('existing');
const id= $(this).attr('data-id');
$('#unread_'+id).remove();
$.ajax({
url: '<?php echo e(route('customer.chat.get.data')); ?>',
method: "GET",
data: {
number: number,
},
success: function (res) {
already_sent = false;
$('.section-new-message').css('display', 'flex');
if (res.status == 'success') {
let html = '';
let replyAction='';
let last_to_number = null;
const messages = res.data.messages.sort((a, b) => new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime());
$.each(messages, function (index, value) {
let created_at = (new Date(value.created_at)).toLocaleString(undefined, {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: 'numeric',
minute: 'numeric'
});
replyAction=`<span class="float-right dropdown d-none">
<span data-toggle="dropdown" class="chat-reply-action"><i class="fas fa-ellipsis-v"></i></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-message="${value.to}" class="dropdown-item reply-btn block-from" href="#">Reply</a>
</div>
</span>`;
if (value.type == 'sent') {
html += `<div class="row no-gutters"><div class="col-md-4 offset-md-8" data-toggle="tooltip" data-placement="left" title="From : ${value.from}"><div class="chat-bubble chat-bubble--right ${value.status == 'failed' ? 'failed-message' : ''}">${value.body}</div><small class="message-sent-time ${value.status == 'failed' ? 'text-danger' : ''}">${value.status == 'failed' ? 'Failed' : created_at}</small></div></div>`;
} else {
html += `<div class="row no-gutters left-chat-action"><div class="left-bubble-title"><span class="left-side-bubble-icon"><i class="fa fa-user mb-1 text-white"></i></span></div><div class="col-md-4" data-toggle="tooltip" data-placement="right" title="To : ${value.to}"><div class="chat-bubble chat-bubble--left">${value.body} ${replyAction}</div><small class="message-sent-time">${created_at}</small></div></div>`;
last_to_number = value.to;
}
});
if (res.data.number) {
$('#addException').addClass('d-none');
$('#removeException').removeClass('d-none');
} else {
$('#addException').removeClass('d-none');
$('#removeException').addClass('d-none');
}
if (!res.data.label && !res.data.id) {
$('.save').attr('have-label', 'no');
$('#check_new_contact').removeClass('d-none');
} else {
$('#check_new_contact').addClass('d-none');
$('.save').attr('have-label', 'yes');
}
$('#to-chat').html(html).scrollTop($('#to-chat')[0].scrollHeight);
$('#to-chat').attr('data-current-chats', res.data.page);
$('.send').attr('data-id', res.data.id);
$('#contactName').html(`<p class="text-dark"> <b>${res.data.name ? res.data.name : ''}</b> </p><p class="text-dark"> ${number ? number : number} </p><small class="text-dark"> ${res.data.address ? res.data.address : ''} </small>`);
$('#addException').attr('data-number', number);
$('#removeException').attr('data-number', number);
$('#select-label').val(res.data.label);
$('#sendNumberInfo').attr('data-number', number);
$('[data-toggle="tooltip"]').tooltip();
if (last_to_number) {
$('#number').val(last_to_number).change();
}
}
}
});
$('.chat').removeAttr('auto-click')
});
//Send SMS Ajax Here
$(document).on('click', '.send', function (e) {
e.preventDefault();
const id = $(this).attr('data-id');
let numb = '';
const chatType = $('input[name=chat_type]').val();
if (chatType == 'existing') {
numb = $(this).attr('data-to-number');
} else {
numb = $('#new_chat_contact').val();
}
if (!numb) {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Error',
body: 'Please select a recipient number',
});
return true;
}
if (chatType == 'existing' && !id) {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Error',
body: 'Unknown contact',
});
return true;
}
const number_to = {id: id, type: 'contact'};
const from_number = $('#number').val();
const body = $('#message').val();
if (!body) {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Error',
body: 'Type your message and try again',
});
return true;
}
$.ajax({
url: '<?php echo e(route('customer.smsbox.compose.sent')); ?>',
method: "POST",
data: {
to_numbers: [JSON.stringify(number_to)],
from_number: from_number,
body: body,
from_type: 'phone_number',
_token: '<?php echo e(csrf_token()); ?>'
},
success: function (res) {
if (res.status == 'success') {
$('.type_message').html('');
$('#message').val('');
const html = `<div class="row no-gutters"><div class="col-md-3 offset-md-9"><div class="chat-bubble chat-bubble--right">${body}</div></div></div>`;
$('#to-chat').append(html).scrollTop($('#to-chat')[0].scrollHeight);
setTimeout(()=>{
$("#chat-wrapper-single-"+id).trigger('click');
},2000);
} else {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
}
},
error: function (res) {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
}
});
});
$(document).on('change', '#select-label', function (e) {
$('.save').removeClass('d-none');
})
$(document).on('click', '.save', function (e) {
const label = $('#select-label').val();
const number = $(this).attr('data-to-number');
const contact = $(this).attr('have-label');
if (contact == 'no') {
$('#addNewContact').modal('show');
$('#addNewContactBtn').attr('data-label', label).attr('data-number', number);
return true;
}
$.ajax({
method: "POST",
url: '<?php echo e(route('customer.chat.label.update')); ?>',
data: {
label: label,
number: number,
_token: '<?php echo e(csrf_token()); ?>'
},
success: function (res) {
if (res.status == 'success') {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
$('#search').trigger('keyup')
}
}
});
});
$(document).on('click', '#addNewContactBtn', function (e) {
const label = $(this).attr('data-label');
const number = $(this).attr('data-number');
$.ajax({
method: "POST",
url: '<?php echo e(route('customer.add.new.contact')); ?>',
data: {
label: label,
number: number,
_token: '<?php echo e(csrf_token()); ?>'
},
success: function (res) {
if (res.status == 'success') {
$('#addNewContact').modal('hide');
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
const pageNumber = $('#numb').attr('data-current-page');
$('#search').attr('search-page-number', parseInt(pageNumber) - 1);
$('#search').trigger('keyup');
}
}
});
});
function generateLabel(labels, toNumber, $preLabel) {
let html = '';
$.each(labels, function (index, value) {
html += `<button data-to-number="${toNumber}" have-label="${$preLabel ? 'yes' : 'no'}" data-label="${value.id}" class="dropdown-item label update_label"><span style="color: ${value.color}">${value.title}</span></button>`;
});
return html;
}
$('#search').on('keyup', function (e) {
e.preventDefault();
const search = $(this).val();
const date = $('#reservation').val();
const type = $('#sortBy').val();
const label_id = $('#filtered_by_label').val();
const prePage = $(this).attr('search-page-number');
$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "get",
data: {
search: search,
date: date,
type: type,
label_id: label_id,
page: prePage ? prePage : 1,
},
success: function (res) {
if (res.status == 'success') {
let html = '';
let labels = '';
if (res.data.numbers != []) {
$.each(res.data.numbers, function (index, value) {
let randColor = getRandomColor();
html += `<div class="chat p-2 c-pointer" data-to-number="${value.number}">
<div class="row">
<div class="col-md-2 col-2 text-center name-icon-section">
<strong style="background: ${randColor}" class="name-icon"> ${value.full_name.substring(0, 1)} </strong>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6>${value.full_name ? value.full_name : value.number}</h6>
<h6>${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">${value.created_at}</div>
</div>
</div>`;
});
} else {
html = '<div class="row"><div class="col-sm-12 text-center">No Data Available</div><div>';
}
$('#numb').html(html);
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
}
}
});
});
$(document).ready(function (e) {
chatList();
})
// Chat List Function
function chatList(){
let unread_only='false';
if($('#unreadStatus').is(":checked")){
unread_only='true'
}
let order_by_oldest='false';
if($('#orderByOldest').is(":checked")){
order_by_oldest='true'
}
let trash_contacts='';
if($('.inbox_messages').hasClass('active')){
trash_contacts='trash';
}
const prePage = $(this).attr('search-page-number');
const campaign_id=$('#all_campaigns').val();
const staff_id=$('.choose_staff').val();
sidebarAjax=$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "get",
data: {
page: prePage ? prePage : 1,
campaign_id:campaign_id,
staff_id:staff_id,
unread_only:unread_only,
order_by_oldest:order_by_oldest,
trash_contacts:trash_contacts
},
success: function (res) {
if (res.status == 'success') {
let html = '';
let labels = '';
let dataNumber=$('.send').attr('data-to-number');
if (res.data.numbers != []) {
$.each(res.data.numbers, function (index, value) {
let unread='';
let uniqueCounter=value.number.replace('+','');
// if(value.unread > 0){
// unread=`<span id="unread_${value.id}" class="unread-msg-counter">${value.unread}</span>`;
// }
let randColor = getRandomColor();
html += `<div class="chat p-2 c-pointer delete_chat_row_${value.id} ${dataNumber && dataNumber==value.number?'active':''}" trigger="${value.number.replace('+','')}" auto-ref="${dataNumber && dataNumber==value.number?'true':'false'}" id="chat-wrapper-single-${value.id}" data-id="${value.id}" data-to-number="${value.number}">
<div class="row created-at-for-new-msg" data-date="${value.createdAt}">
<div class="col-md-2 col-2 text-center name-icon-section">
<span class="left-side-bubble-icon"><i class="fa fa-user mb-1 text-white"></i></span>
<span class="total-counter-unread ${value.unread<=0?'d-none':''}">${value.unread}</span>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6 class="m-0 con-name">${value.full_name ? value.full_name : value.number} ${unread}</h6>
<h6 class="m-0">${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">
<small>
${value.created_at}
</small>
${getAssignBox(value,res.data.access_staff_view,trash_contacts)}
</div>
</div>
</div>`;
});
} else {
html = '<div class="row"><div class="col-sm-12 text-center">No Data Available</div><div>';
}
$('#numb').html(html);
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
}
}
});
}
function getAssignBox(value,access_staff_view,trash_contacts=null) {
let html='';
const crr_user='<?php echo e(auth('customer')->user()->type); ?>';
if(crr_user && crr_user=='staff'){
return `<div class="text-center dropdown p-3 mt-3"></div>`;
}
let class_name='';
let flagged='';
if(value.flagged){
flagged='active';
}
if(access_staff_view && access_staff_view=='no'){
class_name='d-none'
}
let trash_contact=`<button id="trash_contact_${value.id}" type="button" data-contact-id="${value.id}" class="assign-btn-for-all trash_contact">
<i class="fa fa-archive text-danger" aria-hidden="true"></i>
</button>`;
if(trash_contacts){
trash_contact=`<button id="trash_contact_${value.id}" type="button" data-contact-id="${value.id}" class="assign-btn-for-all remove_trash_contact">
<i class="fa fa-retweet text-danger" aria-hidden="true"></i>
</button>`
}
html = `<div class="assigned-user-name-section mr-2 text-center ${value.assigned_staff_name.length=='0'?'d-none':''}"><span class="assigned-user-icon">${value.assigned_staff_name}</span></div>
<div class="conversation-assigned-sec-icons mt-2">
<button type="button"
class="assign-btn-for-all assign_staff_contact ${class_name} ${crr_user=='reseller'?'':'d-none'}"
data-campaign-id="${value.campaign_id}" data-contact-id="${value.id}"
data-message-id="${value.message_id}">
<i class="fa fa-users" aria-hidden="true"></i>
</button>
<span class="flagged_contact flagged_active_${value.id} ${flagged}" data-contact-id="${value.id}">
<i class="fa fa-flag text-muted" aria-hidden="true"></i>
</span>
${trash_contact}
<div class="text-center dropdown d-contents">
<span data-toggle="dropdown" class="chat-from-action"><i class="fas fa-ellipsis-v"></i></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-message="Are you sure you want to block this number?" data-action="<?php echo e(route('customer.exception')); ?>" data-input="{"type":"block","number":"${value.number}"}" data-toggle="modal" data-target="#modal-confirm" class="dropdown-item block-from" href="#">Block</a>
<a data-message="Are you sure you want to delete full conversation?" data-action="<?php echo e(route('customer.chat.delete')); ?>" data-input="{"number":"${value.number}"}" data-toggle="modal" data-target="#modal-confirm" class="dropdown-item block-from" href="#">Delete</a>
</div>
</div>
</div>`;
return html;
}
// Send Request Con
setInterval(function () {
const page = $('#numb').attr('data-current-page');
$('.newMessage').remove();
let nmbr = $('.send').attr('data-to-number');
if (page && page == 2) {
chatList();
if (nmbr) {
$('.send').attr('scroll-top-height', this.scrollTop).attr('scroll-height', this.scrollHeight).attr('offset-height', this.offsetHeight);
const scrollTop= parseInt($('.send').attr('scroll-top-height'));
const scrollHeight= parseInt($('.send').attr('scroll-height'));
const offsetHeight= parseInt($('.send').attr('offset-height'));
if((scrollHeight - scrollTop-offsetHeight)<=500){
nmbr = nmbr.replace('+', '');
$(`.chat[trigger=${nmbr}]`).trigger('click');
}
}
} else {
let time = [];
$('.created-at-for-new-msg').each(function () {
time.push($(this).attr('data-date'));
});
// newMessage(time[0]);
if (nmbr) {
nmbr = nmbr.replace('+', '');
$(`.chat[trigger=${nmbr}]`).trigger('click');
}
}
}, 10000);
function newMessage(time){
$.ajax({
url: '<?php echo e(route('customer.chat.get.new')); ?>',
method: "get",
data:{
time:time
},
success: function (res) {
if (res.status == 'success') {
if(res.data && res.data > 0) {
let newHtml = `<div class="newMessage"><?php echo e(trans('admin.message.new_message')); ?> <span class="float-right">${res.data}</span></div>`;
$('.newMessageAlert').html(newHtml);
}else{
$('.newMessageAlert').html('');
}
}
}
});
}
$(document).on('click', '.newMessageAlert', function(e){
$('.newMessage').remove();
chatList();
})
$('#sortBy').on('change', function (e) {
e.preventDefault();
const type = $(this).val();
const search = $('#search').val();
const date = $('#reservation').val();
const label_id = $('#filtered_by_label').val();
$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "get",
data: {
type: type,
search: search,
date: date,
label_id: label_id,
page: 1,
},
success: function (res) {
if (res.status == 'success') {
let html = '';
let labels = '';
if (res.data.page != 'end') {
$.each(res.data.numbers, function (index, value) {
html += `<div class="chat p-2 c-pointer" data-to-number="${value.number}">
<div class="row">
<div class="col-md-2 col-2 text-center name-icon-section">
<strong class="name-icon"> ${value.full_name.substring(0, 1)} </strong>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6>${value.full_name ? value.full_name : value.number}</h6>
<h6>${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">${value.created_at}</div>
</div>
</div>`;
});
} else {
html = '<div class="row"><div class="col-sm-12 text-center">No Data Available</div><div>';
}
$('#numb').html(html);
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
}
}
});
});
$(document).on('click', '.applyBtn', function (e) {
e.preventDefault();
const date = $('#reservation').val();
const type = $('#sortBy').val();
const search = $('#search').val();
const label_id = $('#filtered_by_label').val();
$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "get",
data: {
date: date,
type: type,
search: search,
label_id: label_id,
page: 1,
},
success: function (res) {
if (res.status == 'success') {
let html = '';
let labels = '';
if (res.data.page != 'end') {
$.each(res.data.numbers, function (index, value) {
html += `<div class="chat p-2 c-pointer" data-to-number="${value.number}">
<div class="row">
<div class="col-md-2 col-2 text-center name-icon-section">
<strong class="name-icon"> ${value.full_name.substring(0, 1)} </strong>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6>${value.full_name ? value.full_name : value.number}</h6>
<h6>${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">${value.created_at}</div>
</div>
</div>`;
});
} else {
html = '<div class="row"><div class="col-sm-12 text-center">No Data Available</div><div>';
}
$('#numb').html(html);
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
}
}
});
});
$(document).on('click', '.filtered_by_label', function (e) {
e.preventDefault();
const label_id = $(this).attr('data-id');
$('#filtered_by_label').val(label_id);
const date = $('#reservation').val();
const type = $('#sortBy').val();
const search = $('#search').val();
$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "get",
data: {
label_id: label_id,
search: search,
date: date,
type: type,
page: 1,
},
success: function (res) {
if (res.status == 'success') {
let html = '';
let labels = '';
if (res.data.page != 'end') {
$.each(res.data.numbers, function (index, value) {
html += `<div class="chat p-2 c-pointer" data-to-number="${value.number}">
<div class="row">
<div class="col-md-2 col-2 text-center name-icon-section">
<strong class="name-icon"> ${value.full_name.substring(0, 1)} </strong>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6>${value.full_name ? value.full_name : value.number}</h6>
<h6>${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">${value.created_at}</div>
</div>
</div>`;
});
} else {
html = '<div class="row"><div class="col-sm-12 text-center">No Data Available</div><div>';
}
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
$('#numb').html(html);
}
}
});
});
function difference(first, sec) {
return Math.abs(first - sec);
}
let currentPageNumber = 1;
$('#next-page').on('click', function (e) {
e.preventDefault();
if(sidebarAjax){
sidebarAjax.abort()
}
$('.ajax-loader').removeClass('d-none');
const chats = $('#numb').attr('data-current-page');
const page = chats;
const search = $('#search').val();
const label_id = $('#filtered_by_label').val();
const date = $('#reservation').val();
const type = $('#sortBy').val();
if (chats != 'end') {
getPaginationData(page, search, label_id, date, type)
currentPageNumber++;
$('#next-page').removeClass('disabled').removeAttr('disabled', 'disabled');
$('#previous-page').removeClass('disabled').removeAttr('disabled', 'disabled');
} else {
$('#next-page').addClass('disabled').attr('disabled', 'disabled');
}
});
$('#previous-page').on('click', function (e) {
e.preventDefault();
$('.ajax-loader').removeClass('d-none');
const chats = $('#numb').attr('data-current-page');
if (chats > 1 || chats == 'end') {
const page = chats == 'end' ? currentPageNumber - 1 : parseInt(chats) - 2;
const search = $('#search').val();
const label_id = $('#filtered_by_label').val();
const date = $('#reservation').val();
const type = $('#sortBy').val();
getPaginationData(page, search, label_id, date, type)
currentPageNumber--;
$('#previous-page').removeClass('disabled').removeAttr('disabled', 'disabled');
$('#next-page').removeClass('disabled').removeAttr('disabled', 'disabled');
} else {
$('#previous-page').addClass('disabled').attr('disabled', 'disabled');
$('#next-page').addClass('disabled').attr('disabled', 'disabled');
}
});
function getPaginationData(page, search, label_id, date, type) {
$.ajax({
url: '<?php echo e(route('customer.chat.get.numbers')); ?>',
method: "GET",
data: {
page: page,
search: search,
label_id: label_id,
date: date,
type: type,
},
success: function (res) {
already_sent = false;
if (res.status == 'success') {
if (res.data.numbers) {
let html = '';
let labels = '';
$.each(res.data.numbers, function (index, value) {
let unread='';
// if(value.unread > 0){
// unread=`<span id="unread_${value.id}" class="unread-msg-counter">${value.unread}</span>`;
// }
html += `<div class="chat p-2 c-pointer" data-to-number="${value.number}">
<div class="row created-at-for-new-msg" data-date="${value.createdAt}">
<div class="col-md-2 col-2 text-center name-icon-section">
<span class="left-side-bubble-icon"><i class="fa fa-user mb-1 text-white"></i></span>
</div>
<div class="col-md-8 col-10 text-left message-body-section">
<h6>${value.full_name ? value.full_name : value.number} ${unread}</h6>
<h6>${value.body}</h6>
</div>
<div class="col-md-2 col-lg-2 d-lg-block d-none text-sm">
<small>
${value.created_at}
</small>
<div class="text-center dropdown">
<span data-toggle="dropdown" class="chat-from-action"><i class="fas fa-ellipsis-v"></i></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a data-message="Are you sure you want to block this number?" data-action="<?php echo e(route('customer.exception')); ?>" data-input="{"type":"block","number":"${value.number}"}" data-toggle="modal" data-target="#modal-confirm" class="dropdown-item block-from" href="#">Block</a>
<a data-message="Are you sure you want to delete full conversation?" data-action="<?php echo e(route('customer.chat.delete')); ?>" data-input="{"number":"${value.number}"}" data-toggle="modal" data-target="#modal-confirm" class="dropdown-item block-from" href="#">Delete</a>
</div>
</div>
</div>
</div>
</div>`;
});
$('#numb').html(html);
}
if (res.data.page != 'end') {
$('#cPage').text(parseInt(res.data.page) - 1);
} else {
$('#cPage').text(res.data.page);
}
$('#numb').attr('data-current-page', res.data.page);
}
$('.ajax-loader').addClass('d-none');
},
error: function (res) {
$('.ajax-loader').addClass('d-none');
}
});
}
$(document).on('click', '.update_label', function (e) {
e.preventDefault();
const label = $(this).attr('data-label');
const number = $(this).attr('data-to-number');
const contact = $(this).attr('have-label');
if (contact == 'no') {
$('#addNewContact').modal('show');
$('#addNewContactBtn').attr('data-label', label).attr('data-number', number);
return true;
}
$.ajax({
method: "POST",
url: '<?php echo e(route('customer.chat.label.update')); ?>',
data: {
label: label,
number: number,
_token: '<?php echo e(csrf_token()); ?>'
},
success: function (res) {
if (res.status == 'success') {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-success',
title: 'Notification',
body: res.message,
});
const pageNumber = $('#numb').attr('data-current-page');
$('#search').attr('search-page-number', parseInt(pageNumber) - 1);
$('#search').trigger('keyup');
}
}
});
});
$('#to-chat').on('scroll', function () {
$('.send').attr('scroll-top-height', this.scrollTop).attr('scroll-height', this.scrollHeight).attr('offset-height', this.offsetHeight);
if (this.scrollTop < 20) {
if (!already_sent) {
already_sent = true;
const chats = $('#to-chat').attr('data-current-chats');
const number = $('#active_number').attr('data-to-number');
if (chats != 'end') {
$.ajax({
url: '<?php echo e(route('customer.chat.get.chats')); ?>',
method: "GET",
data: {
chats: chats,
number: number,
},
success: function (res) {
already_sent = false;
if (res.status == 'success') {
let html = '';
$.each(res.data.messages, function (index, value) {
let created_at = (new Date(value.created_at)).toLocaleString();
if (value.type == 'sent') {
html += `<div class="row no-gutters"><div class="col-md-4 offset-md-8" data-toggle="tooltip" data-placement="left" title="From : ${value.from}"><div class="chat-bubble chat-bubble--right">${value.body}</div><small class="message-sent-time">${created_at}</small></div></div>`;
} else {
html += `<div class="row no-gutters"><div class="col-md-4" data-toggle="tooltip" data-placement="right" title="To : ${value.to}"><div class="chat-bubble chat-bubble--left">${value.body}</div></div></div>`;
}
});
$('#to-chat').prepend(html);
$('#to-chat').attr('data-current-chats', res.data.page);
$('[data-toggle="tooltip"]').tooltip();
}
}
});
}
}
}else{
// $('#to-chat').attr('data-current-chats', 2);
}
});
$(document).on('click', '.response_value', function (e) {
let value = $(this).attr('data-title');
var curPos = document.getElementById("message").selectionStart;
let x = $("#message").val();
$("#message").val(x.slice(0, curPos) + value + x.slice(curPos)).focus();
$('.emoji-wysiwyg-editor').append(value).focus();
checkCharecter();
$('#showResponse').addClass('d-none');
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function checkCharecter() {
var messageValue = $('#message').val();
var div = parseInt(parseInt(messageValue.length - 1) / 160) + 1;
if (div <= 1) {
$("#count").text("Characters left: " + (160 - messageValue.length));
} else {
$("#count").text("Characters left: " + (160 * div - messageValue.length) + "/" + div);
}
}
$(document).on('click', '#message', function (e) {
checkCharecter();
$('#showResponse').removeClass('d-none');
});
$(document).on('click', '.type_message', function (e) {
checkCharecter();
$('#showResponse').removeClass('d-none');
});
$(document).on('keyup', '#message', function (e) {
checkCharecter();
$('#showResponse').addClass('d-none');
});
$(document).mouseup(function (e) {
var container = $("#message");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$("#showResponse").addClass('d-none');
}
});
$(document).on('click', '.exception_modal_btn', function (e) {
$('#exceptionModal').modal('show');
const number = $(this).attr('data-number');
const type = $(this).attr('data-type');
$('#saveException').attr('data-number', number).attr('data-type', type);
if (type == 'add') {
$('.exception_message').text('Are you sure to add this number in Exception list')
} else {
$('.exception_message').text('Are you sure to remove this number from Exception list')
}
});
$(document).on('click', '#saveException', function (e) {
const number = $(this).attr('data-number');
const type = $(this).attr('data-type');
const check_add_contact = $('#checkInput:checked').val();
$.ajax({
type: 'post',
url: '<?php echo e(route('customer.exception')); ?>',
data: {
_token: '<?php echo e(csrf_token()); ?>',
number: number,
type: type,
check_add_contact: check_add_contact,
},
success: function (res) {
if (res.status == 'success') {
if (res.type == 'add') {
$('#removeException').attr('data-number', number).removeClass('d-none');
$('#addException').addClass('d-none');
$('#exceptionModal').modal('hide');
$('#check_new_contact').addClass('d-none');
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-success',
title: 'Notification',
body: 'Suppress added successfully',
});
} else {
$('#removeException').addClass('d-none');
$('#addException').removeClass('d-none').attr('data-number', number);
$('#exceptionModal').modal('hide');
$('#check_new_contact').addClass('d-none');
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-success',
title: 'Notification',
body: 'Suppress removed successfully',
});
}
}
}
})
});
$('#sendUrl').on('click', function (e) {
$('#altMessage').text(' ')
$('#sendUrl').css('border', '1px solid white');
})
$(document).on('click', '#confirmUrlSend', function (e) {
e.preventDefault();
$('#confirmUrlSend').html(' <i class="fa fa-spinner fa-spin"></i> Loading')
const number = $(this).attr('data-number');
const data_url = $('#sendUrl').val();
const method = $('#sendUrlMethod').val();
if (!data_url) {
$('#sendUrl').css('border', '1px solid red');
$('#altMessage').text('Enter url first')
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-danger',
title: 'Notification',
body: 'Please enter url first',
});
return true;
} else {
$('#sendUrl').css('border', '1px solid white');
}
$.ajax({
type: 'POST',
url: '<?php echo e(route('customer.send.contact.data')); ?>',
data: {
_token: '<?php echo e(csrf_token()); ?>',
number: number, url: data_url, url_method: method
},
success: function (res) {
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-success',
title: 'Notification',
body: 'Data sent successfully',
});
$('#confirmUrlSend').text('Confirm')
$('#sendCInfoModal').modal('hide');
}
});
});
$('#sortBy').trigger('change');
$(document).on('click','.block-from',function(e){
e.preventDefault();
return false;
})
$(document).on('click','.delete-from',function(e){
e.preventDefault();
return false;
})
</script>
<!-- For Emoji -->
<!-- Begin emoji-picker JavaScript -->
<script src="<?php echo e(asset('emoji/js/config.min.js')); ?>"></script>
<script src="<?php echo e(asset('emoji/js/util.min.js')); ?>"></script>
<script src="<?php echo e(asset('emoji/js/jquery.emojiarea.min.js')); ?>"></script>
<script src="<?php echo e(asset('emoji/js/emoji-picker.min.js')); ?>"></script>
<!-- End emoji-picker JavaScript -->
<script>
"use strict";
$(function () {
// Initializes and creates emoji set from sprite sheet
window.emojiPicker = new EmojiPicker({
emojiable_selector: '[data-emojiable=true]',
assetsPath: '<?php echo e(asset('/emoji/img')); ?>',
popupButtonClasses: 'fa fa-smile-o'
});
// Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
// You may want to delay this step if you have dynamically created input fields that appear later in the loading process
// It can be called as many times as necessary; previously converted input fields will not be converted again
window.emojiPicker.discover();
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/picotech/domains/test.sms.picotech.app/public_html/resources/views/customer/chat/index.blade.php ENDPATH**/ ?>
|