chat function
This commit is contained in:
abdul-wahab12345
parent
f13e2a1945
commit
6b51f6a402
|
|
@ -12,6 +12,21 @@
|
||||||
|
|
||||||
class ChatController extends Controller
|
class ChatController extends Controller
|
||||||
{
|
{
|
||||||
|
|
||||||
|
public function getChat(Request $request){
|
||||||
|
$chat_id = $request->chat_id;
|
||||||
|
|
||||||
|
return ChatGroup::find($chat_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public function getMessages(Request $request){
|
||||||
|
$chat_id = $request->chat_id;
|
||||||
|
|
||||||
|
return Message::where('chat_id',$chat_id)->get();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Start a new chat by creating a chat group.
|
* Start a new chat by creating a chat group.
|
||||||
*
|
*
|
||||||
|
|
@ -53,7 +68,7 @@ public function startChat(Request $request)
|
||||||
|
|
||||||
$chatGroup = ChatGroup::create($data);
|
$chatGroup = ChatGroup::create($data);
|
||||||
|
|
||||||
return response()->json(['chat_id' => $chatGroup->id], 200);
|
return response()->json(['chat' => $chatGroup], 200);
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
return response()->json(['message' => 'user not found'], 400);
|
return response()->json(['message' => 'user not found'], 400);
|
||||||
|
|
@ -109,4 +124,13 @@ public function select_user($company_id){
|
||||||
return $selected;
|
return $selected;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function getChatGroupsByCompany(Request $request)
|
||||||
|
{
|
||||||
|
$companyId = getSelectedCompany();
|
||||||
|
|
||||||
|
$chatGroups = ChatGroup::where('company_id', $companyId)->get();
|
||||||
|
|
||||||
|
return response()->json($chatGroups);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -9,11 +9,13 @@ $(document).ready(function () {
|
||||||
});
|
});
|
||||||
initFomanticDropdown(".user-select-dropdown", { action: "activate" });
|
initFomanticDropdown(".user-select-dropdown", { action: "activate" });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//Handle opening / closing of inbox
|
//Handle opening / closing of inbox
|
||||||
$(".open-inbox").on("click", function () {
|
// $(".open-inbox").on("click", function () {
|
||||||
slideTransition("#chat-feature-widget", "left", true);
|
// slideTransition("#chat-feature-widget", "left", true);
|
||||||
slideTransition("#inbox", "right", false);
|
// slideTransition("#inbox", "right", false);
|
||||||
});
|
// });
|
||||||
|
|
||||||
$("#back-to-users").on("click", function () {
|
$("#back-to-users").on("click", function () {
|
||||||
slideTransition("#inbox", "left", true);
|
slideTransition("#inbox", "left", true);
|
||||||
|
|
|
||||||
|
|
@ -5,65 +5,153 @@
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Initially disable all the buttons
|
// Toggle filter dropdown on button click
|
||||||
$('.handle_multiple__options .tags button').prop('disabled', true);
|
$('.list-filter-btn').click(function() {
|
||||||
|
$('.filter-options').toggle();
|
||||||
// Toggle visibility of handle_multiple__options on button click
|
|
||||||
$('.handle-multiple-btn').click(function() {
|
|
||||||
$('.handle_multiple__options').toggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Enable/disable buttons based on the select all checkbox
|
|
||||||
$('#select-all').change(function() {
|
|
||||||
if ($(this).is(':checked')) {
|
|
||||||
$('.handle_multiple__options .tags button').prop('disabled', false);
|
|
||||||
} else {
|
|
||||||
$('.handle_multiple__options .tags button').prop('disabled', true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show the modal when "Assign post" button is clicked
|
|
||||||
$('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
|
|
||||||
e.preventDefault(); // Prevent default action to avoid any conflict
|
|
||||||
$('#customModal').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close the modal when the close button or outside the modal is clicked
|
|
||||||
$('.modal-close, .modal').click(function() {
|
|
||||||
$('#customModal').hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Prevent modal content from closing the modal when clicked
|
|
||||||
$('.modal-content').click(function(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
// Show the modal when "Move" button is clicked
|
|
||||||
$('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
|
|
||||||
e.preventDefault(); // Prevent default action to avoid any conflict
|
|
||||||
$('#customModal2').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close the modal when the close button or outside the modal is clicked
|
|
||||||
$('.modal-close, .modal').click(function() {
|
|
||||||
$('#customModal2').hide();
|
|
||||||
});
|
|
||||||
// Show the modal when "Reply to multiple" button is clicked
|
|
||||||
$('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
|
|
||||||
e.preventDefault(); // Prevent default action to avoid any conflict
|
|
||||||
$('#customModal3').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close the modal when the close button or outside the modal is clicked
|
|
||||||
$('.modal-close, .modal').click(function() {
|
|
||||||
$('#customModal3').hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Initial hide for handle_multiple__options
|
||||||
|
$('.filter-options').hide();
|
||||||
|
$('.handle_multiple__options').hide();
|
||||||
|
|
||||||
|
// Toggle visibility of handle_multiple__options on button click
|
||||||
|
$('.handle-multiple-btn').click(function() {
|
||||||
|
$('.handle_multiple__options').toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially disable all the buttons
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
|
||||||
|
// Enable/disable buttons based on the select all checkbox
|
||||||
|
$('#select-all').change(function() {
|
||||||
|
if ($(this).is(':checked')) {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', false);
|
||||||
|
} else {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Assign post" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Move" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal2').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Reply to multiple" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal3').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close the modal when the close button or outside the modal is clicked
|
||||||
|
$('.modal-close, .modal').click(function() {
|
||||||
|
$('.modal').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent modal content from closing the modal when clicked
|
||||||
|
$('.modal-content').click(function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update Select status options based on Select filter selection
|
||||||
|
$('#filter-select').change(function() {
|
||||||
|
var selectedFilter = $(this).val();
|
||||||
|
console.log("Selected filter:", selectedFilter); // Debugging log
|
||||||
|
updateStatusOptions(selectedFilter);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially hide filter based data section
|
||||||
|
$('.filter_based__data').hide();
|
||||||
|
|
||||||
|
// Function to update status options based on selectedFilter
|
||||||
|
function updateStatusOptions(selectedFilter) {
|
||||||
|
console.log("Updating status options for:", selectedFilter); // Debugging log
|
||||||
|
switch (selectedFilter) {
|
||||||
|
case 'Assigned to':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select assigned to</option>
|
||||||
|
<option value="Assigned">Assigned</option>
|
||||||
|
<option value="Unassigned">Unassigned</option>
|
||||||
|
<option value="Margin">Margin</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Which activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select activity</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'No activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select No activity</option>
|
||||||
|
<option value="Exercise">Exercise</option>
|
||||||
|
<option value="Not Yoga">Not Yoga</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Editor':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Editor</option>
|
||||||
|
<option value="Computer tool">Computer tool</option>
|
||||||
|
<option value="Direct editor">Direct editor</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Spam':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled>Select Spam</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Status':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
<option value="Completed">Completed</option>
|
||||||
|
<option value="Not Completed">Not Completed</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Tags':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Tags</option>
|
||||||
|
<option value="Target">Target</option>
|
||||||
|
<option value="Mustafa">Mustafa</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Users':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Users</option>
|
||||||
|
<option value="Merrs">Merrs</option>
|
||||||
|
<option value="Abdullah">Abdullah</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.handle_multiple__options {
|
.handle_multiple__options {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -163,6 +251,26 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter select {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -185,6 +293,28 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div class="filter">
|
||||||
|
<span> <b>Filter on:</b> </span>
|
||||||
|
<select id="filter-select" name="">
|
||||||
|
<option disabled >Select filter</option>
|
||||||
|
<option value="Assigned to">Assigned to</option>
|
||||||
|
<option value="Which activity">Which activity</option>
|
||||||
|
<option value="No activity">No activity</option>
|
||||||
|
<option value="Editor">Editor</option>
|
||||||
|
<option value="Spam">Spam</option>
|
||||||
|
<option value="Status">Status</option>
|
||||||
|
<option value="Tags">Tags</option>
|
||||||
|
<option value="Users">Users</option>
|
||||||
|
</select>
|
||||||
|
<div class="filter_based__data">
|
||||||
|
<select id="status-select" name="">
|
||||||
|
<option disabled>Select status</option>
|
||||||
|
<!-- Options will be dynamically updated based on selected filter -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="handle_multiple__options">
|
<div class="handle_multiple__options">
|
||||||
<div class="common_shre">
|
<div class="common_shre">
|
||||||
<label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
|
<label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,425 @@
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.aw-chat-head img{
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- Support and Chat Fixed Buttons -->
|
||||||
|
<div class="chat-message-box position-fixed">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Chat Drop Down -->
|
||||||
|
<div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
|
||||||
|
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
||||||
|
|
||||||
|
<div class="menu chat-menu">
|
||||||
|
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
||||||
|
<div class="header d-flex justify-content-between align-items-center text-white">
|
||||||
|
<p class="chat-popup-label text-light">Chats</p>
|
||||||
|
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="aw-chats">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- User Inbox menu -->
|
||||||
|
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
||||||
|
<div class="header aw-chat-head d-flex align-items-center" style="justify-content: space-between;">
|
||||||
|
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
||||||
|
<p class="chat-popup-label text-light">James</p>
|
||||||
|
<img id="close-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Close Chat">
|
||||||
|
</div>
|
||||||
|
<div class="scrollhint">
|
||||||
|
|
||||||
|
|
||||||
|
<!--<div class="item">-->
|
||||||
|
<!-- <div class="single-user-content d-flex">-->
|
||||||
|
<!-- <div class="chat-user-img-box receiver-message-box d-flex">-->
|
||||||
|
<!-- <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">-->
|
||||||
|
<!-- <p>Typing...</p>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!--</div>-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="outer-message-input-box">
|
||||||
|
<div class="inner-message-input d-flex align-items-center justify-content-between">
|
||||||
|
<input id="aw-sms" type="text" class="border-0" placeholder="Type a reply">
|
||||||
|
<p class="input-action d-flex align-items-center">
|
||||||
|
<!--<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">-->
|
||||||
|
<!--<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">-->
|
||||||
|
<img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
|
||||||
|
<input type="file" id="file-picker" class="file-picker">
|
||||||
|
<i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Support Drop down -->
|
||||||
|
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
||||||
|
<img src="images/icons/support.svg" alt="Support Icon">
|
||||||
|
<div class="menu support-widget">
|
||||||
|
<div class="header support-header mt-0 text-center">
|
||||||
|
<h2 class="color-dark-green">Help & Support</h2>
|
||||||
|
</div>
|
||||||
|
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/faq-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green">FAQ</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green">Using Kundo</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/launch-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/setting-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green text-wrap">Technical Settings</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green ">Integration</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/news-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green text-wrap">News & Updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green ">Training</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header contact-us-header text-center">
|
||||||
|
<h2 class="color-dark-green">Contact Us</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-us-box d-flex justify-content-center">
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green text-wrap">Technical Questions</p>
|
||||||
|
</div>
|
||||||
|
<div class="item text-center">
|
||||||
|
<div class="support-img-box align-content-center">
|
||||||
|
<img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="color-dark-green">About Kundo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- End -->
|
||||||
|
|
||||||
|
<audio style="display:none;" id="messageSound" src="{{asset('assets/noti.wav')}}" preload="auto"></audio>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://chat.rapidev.tech/socket.io/socket.io.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var customer_id = false;
|
||||||
|
var startData = false;
|
||||||
|
var localId = false;
|
||||||
|
|
||||||
|
var customers = [];
|
||||||
|
|
||||||
|
const socket = io('https://chat.rapidev.tech/', {
|
||||||
|
withCredentials: false,
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Event listener for successful connection
|
||||||
|
socket.on('connect', () => {
|
||||||
|
console.log('Connected to the server with socket ID:', socket.id);
|
||||||
|
customer_id = socket.id;
|
||||||
|
|
||||||
|
localId = "{{auth()->user()->id}}";
|
||||||
|
|
||||||
|
socket.emit('register', localId);
|
||||||
|
console.log(localId);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Optionally, handle the disconnect event
|
||||||
|
socket.on('disconnect', (reason) => {
|
||||||
|
console.log('Disconnected from the server:', reason);
|
||||||
|
customer_id = false;
|
||||||
|
if (reason === 'io server disconnect') {
|
||||||
|
// The server disconnected the client, try to reconnect
|
||||||
|
socket.connect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
console.log(socket);
|
||||||
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "{{route('chatgroups.get')}}",
|
||||||
|
method: 'GET',
|
||||||
|
success: function(response) {
|
||||||
|
console.log(response);
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
for(var i=0;i<response.length;i++){
|
||||||
|
|
||||||
|
var chat = response[i];
|
||||||
|
|
||||||
|
chat['isFirst'] = true;
|
||||||
|
|
||||||
|
customers[chat.id] = chat;
|
||||||
|
|
||||||
|
html += ` <div class="item open-inbox" data-chat="${chat.id}" data-customer="${chat.customer_id}" data-subject="${chat.subject}" data-user="${chat.user_id}">
|
||||||
|
<div class="single-user-content d-flex">
|
||||||
|
<div class="chat-user-img-box">
|
||||||
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||||||
|
</div>
|
||||||
|
<div class="user-message-detail">
|
||||||
|
<p class="recepient-message-detail">${chat.name} <span>Sep 27</span></p>
|
||||||
|
<p class="text-wrap descriptive-message">${chat.subject}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.aw-chats').html(html);
|
||||||
|
|
||||||
|
// Update action box with fetched content
|
||||||
|
// $('.action-box').html(response);
|
||||||
|
},
|
||||||
|
error: function(error) {
|
||||||
|
console.log('Error fetching action box content:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var activeChat = false;
|
||||||
|
var inbox = $('#inbox .scrollhint');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).on('click', '.open-inbox', async function() {
|
||||||
|
|
||||||
|
var chat = customers[$(this).data('chat')];
|
||||||
|
|
||||||
|
var messages = await getMessage(chat.id);
|
||||||
|
console.log(messages);
|
||||||
|
|
||||||
|
if(messages){
|
||||||
|
|
||||||
|
for(var i=0;i<messages.length;i++){
|
||||||
|
var sms = messages[i];
|
||||||
|
|
||||||
|
if(sms.from == "user"){
|
||||||
|
inbox.append(` <div class="item">
|
||||||
|
<div class="single-user-content d-flex">
|
||||||
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
||||||
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||||||
|
<p>${sms.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`);
|
||||||
|
}else{
|
||||||
|
inbox.append(` <div class="item d-flex justify-content-end">
|
||||||
|
<div class="sender-message-box text-white">
|
||||||
|
<p>${sms.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.chat-popup-label').text(chat.name);
|
||||||
|
|
||||||
|
activeChat = chat;
|
||||||
|
|
||||||
|
if(chat.isFirst){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(activeChat);
|
||||||
|
|
||||||
|
slideTransition('#chat-feature-widget', 'left', true);
|
||||||
|
slideTransition('#inbox', 'right', false);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.send-icon').click(async function(){
|
||||||
|
|
||||||
|
var sms = $('#aw-sms').val();
|
||||||
|
|
||||||
|
if(sms != ""){
|
||||||
|
|
||||||
|
console.log(activeChat.id);
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('chat_id', activeChat.id); // Static value as per your example
|
||||||
|
formData.append('from', 'company'); // Assuming a static value for simplicity
|
||||||
|
formData.append('message', sms);
|
||||||
|
formData.append('type', 'text');
|
||||||
|
|
||||||
|
|
||||||
|
// API endpoint
|
||||||
|
const apiUrl = 'https://kundesone.no/api/chat/send-message';
|
||||||
|
|
||||||
|
// Fetch API to send the FormData
|
||||||
|
fetch(apiUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
console.log('Success:', data);
|
||||||
|
|
||||||
|
socket.emit('chat message',{sms:sms,id:activeChat.id},activeChat.customer_id);
|
||||||
|
|
||||||
|
inbox.append(` <div class="item d-flex justify-content-end">
|
||||||
|
<div class="sender-message-box text-white">
|
||||||
|
<p>${sms}</p>
|
||||||
|
</div>
|
||||||
|
</div>`);
|
||||||
|
|
||||||
|
$('#aw-sms').val("");
|
||||||
|
|
||||||
|
scrollToBottom();
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
async function getMessage(chat_id) {
|
||||||
|
const apiUrl = 'https://kundesone.no/api/chat/getMessages';
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json' // Assuming the server expects JSON
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ chat_id: chat_id })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = await response.json();
|
||||||
|
return messages;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('chat message', function(msg) {
|
||||||
|
playMessageSound();
|
||||||
|
|
||||||
|
if(msg.id == activeChat.id){
|
||||||
|
|
||||||
|
inbox.append(` <div class="item">
|
||||||
|
<div class="single-user-content d-flex">
|
||||||
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
||||||
|
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||||||
|
<p>${msg.sms}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(msg);
|
||||||
|
// var item = document.createElement('li');
|
||||||
|
// item.textContent = msg;
|
||||||
|
// document.getElementById('messages').appendChild(item);
|
||||||
|
// window.scrollTo(0, document.body.scrollHeight);
|
||||||
|
|
||||||
|
scrollToBottom();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('start_chat', function(msg) {
|
||||||
|
console.log(msg);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function scrollToBottom() {
|
||||||
|
var $div = $('#scrollhint');
|
||||||
|
$div.scrollTop($div.prop("scrollHeight"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function playMessageSound() {
|
||||||
|
var sound = document.getElementById('messageSound');
|
||||||
|
|
||||||
|
sound.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -13,6 +13,277 @@
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Toggle filter dropdown on button click
|
||||||
|
$('.list-filter-btn').click(function() {
|
||||||
|
$('.filter-options').toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial hide for handle_multiple__options
|
||||||
|
$('.filter-options').hide();
|
||||||
|
$('.handle_multiple__options').hide();
|
||||||
|
|
||||||
|
// Toggle visibility of handle_multiple__options on button click
|
||||||
|
$('.handle-multiple-btn').click(function() {
|
||||||
|
$('.handle_multiple__options').toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially disable all the buttons
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
|
||||||
|
// Enable/disable buttons based on the select all checkbox
|
||||||
|
$('#select-all').change(function() {
|
||||||
|
if ($(this).is(':checked')) {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', false);
|
||||||
|
} else {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Assign post" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Move" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal2').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Reply to multiple" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal3').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close the modal when the close button or outside the modal is clicked
|
||||||
|
$('.modal-close, .modal').click(function() {
|
||||||
|
$('.modal').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent modal content from closing the modal when clicked
|
||||||
|
$('.modal-content').click(function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update Select status options based on Select filter selection
|
||||||
|
$('#filter-select').change(function() {
|
||||||
|
var selectedFilter = $(this).val();
|
||||||
|
console.log("Selected filter:", selectedFilter); // Debugging log
|
||||||
|
updateStatusOptions(selectedFilter);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially hide filter based data section
|
||||||
|
$('.filter_based__data').hide();
|
||||||
|
|
||||||
|
// Function to update status options based on selectedFilter
|
||||||
|
function updateStatusOptions(selectedFilter) {
|
||||||
|
console.log("Updating status options for:", selectedFilter); // Debugging log
|
||||||
|
switch (selectedFilter) {
|
||||||
|
case 'Assigned to':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select assigned to</option>
|
||||||
|
<option value="Assigned">Assigned</option>
|
||||||
|
<option value="Unassigned">Unassigned</option>
|
||||||
|
<option value="Margin">Margin</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Which activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select activity</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'No activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select No activity</option>
|
||||||
|
<option value="Exercise">Exercise</option>
|
||||||
|
<option value="Not Yoga">Not Yoga</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Editor':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Editor</option>
|
||||||
|
<option value="Computer tool">Computer tool</option>
|
||||||
|
<option value="Direct editor">Direct editor</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Spam':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled>Select Spam</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Status':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
<option value="Completed">Completed</option>
|
||||||
|
<option value="Not Completed">Not Completed</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Tags':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Tags</option>
|
||||||
|
<option value="Target">Target</option>
|
||||||
|
<option value="Mustafa">Mustafa</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Users':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Users</option>
|
||||||
|
<option value="Merrs">Merrs</option>
|
||||||
|
<option value="Abdullah">Abdullah</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.handle_multiple__options {
|
||||||
|
display: none;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags button {
|
||||||
|
background-color: #748C62;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags button:hover {
|
||||||
|
background-color: #383F33;
|
||||||
|
}
|
||||||
|
.handle_multiple__options .tags button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options input{
|
||||||
|
width: 32px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
|
.handle_multiple__options .common_shre{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
/* Custom Modal CSS */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 13%;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#customModal3 .modal-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 40%;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.modal-content .btn-primary{
|
||||||
|
background-color: #748C62 !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
color: #aaa;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover,
|
||||||
|
.modal-close:focus {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter select {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="ui card chat-card">
|
<div class="ui card chat-card">
|
||||||
<div class="content chat-card-header d-flex align-items-center justify-content-between">
|
<div class="content chat-card-header d-flex align-items-center justify-content-between">
|
||||||
|
|
@ -36,6 +307,44 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div class="filter">
|
||||||
|
<span> <b>Filter on:</b> </span>
|
||||||
|
<select id="filter-select" name="">
|
||||||
|
<option disabled >Select filter</option>
|
||||||
|
<option value="Assigned to">Assigned to</option>
|
||||||
|
<option value="Which activity">Which activity</option>
|
||||||
|
<option value="No activity">No activity</option>
|
||||||
|
<option value="Editor">Editor</option>
|
||||||
|
<option value="Spam">Spam</option>
|
||||||
|
<option value="Status">Status</option>
|
||||||
|
<option value="Tags">Tags</option>
|
||||||
|
<option value="Users">Users</option>
|
||||||
|
</select>
|
||||||
|
<div class="filter_based__data">
|
||||||
|
<select id="status-select" name="">
|
||||||
|
<option disabled>Select status</option>
|
||||||
|
<!-- Options will be dynamically updated based on selected filter -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="handle_multiple__options">
|
||||||
|
<div class="common_shre">
|
||||||
|
<label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
|
||||||
|
<div class="tags">
|
||||||
|
<button>Assign post</button>
|
||||||
|
<button>Delete</button>
|
||||||
|
<button>Move</button>
|
||||||
|
<button>Open</button>
|
||||||
|
<button>Waiting</button>
|
||||||
|
<button>Done</button>
|
||||||
|
<button>Tag</button>
|
||||||
|
<button>Not spam</button>
|
||||||
|
<button>Reply to multiple</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content chat-content">
|
<div class="content chat-content">
|
||||||
<ul class="chat-details">
|
<ul class="chat-details">
|
||||||
|
|
@ -72,4 +381,51 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom Modal post -->
|
||||||
|
<div id="customModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Assign Post</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label">Recipient:</label>
|
||||||
|
<input type="text" class="form-control" id="recipient-name">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="message-text" class="col-form-label">Message:</label>
|
||||||
|
<textarea class="form-control" id="message-text"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<button type="button" class="btn btn-primary">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Custom Modal move-->
|
||||||
|
<div id="customModal2" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Move</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label">Conversation moved:</label>
|
||||||
|
<input type="text" class="form-control" id="recipient-name" placeholder="Inbox">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<button type="button" class="btn btn-primary">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Custom Modal Replay to multiple-->
|
||||||
|
<div id="customModal3" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Replay to multiple</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3 mt-4">
|
||||||
|
<p>Please choose only email conversations and try again</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -39,216 +39,10 @@
|
||||||
@yield('content')
|
@yield('content')
|
||||||
<!-- End -->
|
<!-- End -->
|
||||||
|
|
||||||
<!-- Support and Chat Fixed Buttons -->
|
<x-chat-box />
|
||||||
<div class="chat-message-box position-fixed">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Chat Drop Down -->
|
|
||||||
<div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
|
|
||||||
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
|
||||||
|
|
||||||
<div class="menu chat-menu">
|
|
||||||
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
|
||||||
<div class="header d-flex justify-content-between align-items-center text-white">
|
|
||||||
<p class="chat-popup-label text-light">Chats</p>
|
|
||||||
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- User Inbox menu -->
|
|
||||||
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
|
||||||
<div class="header d-flex align-items-center">
|
|
||||||
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
|
||||||
<p class="chat-popup-label text-light">James</p>
|
|
||||||
</div>
|
|
||||||
<div class="scrollhint">
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>👋 Hi there! How can I help?</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item d-flex justify-content-end">
|
|
||||||
<div class="sender-message-box text-white">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
|
|
||||||
est,
|
|
||||||
tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
|
|
||||||
mollis, pretium augue vel, feugiat risus.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item d-flex justify-content-end">
|
|
||||||
<div class="sender-message-box text-white">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>Typing...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="outer-message-input-box">
|
|
||||||
<div class="inner-message-input d-flex align-items-center justify-content-between">
|
|
||||||
<input type="text" class="border-0" placeholder="Type a reply">
|
|
||||||
<p class="input-action d-flex align-items-center">
|
|
||||||
<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">
|
|
||||||
<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">
|
|
||||||
<img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
|
|
||||||
<input type="file" id="file-picker" class="file-picker">
|
|
||||||
<i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Support Drop down -->
|
|
||||||
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
|
||||||
<img src="images/icons/support.svg" alt="Support Icon">
|
|
||||||
<div class="menu support-widget">
|
|
||||||
<div class="header support-header mt-0 text-center">
|
|
||||||
<h2 class="color-dark-green">Help & Support</h2>
|
|
||||||
</div>
|
|
||||||
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/faq-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">FAQ</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">Using Kundo</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/launch-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/setting-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Technical Settings</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green ">Integration</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/news-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">News & Updates</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green ">Training</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header contact-us-header text-center">
|
|
||||||
<h2 class="color-dark-green">Contact Us</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-us-box d-flex justify-content-center">
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Technical Questions</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">About Kundo</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -105,211 +105,7 @@ class="side-bar-link bg-light-color d-flex align-items-center justify-content-be
|
||||||
<!-- End -->
|
<!-- End -->
|
||||||
|
|
||||||
<!-- Support and Chat Fixed Buttons -->
|
<!-- Support and Chat Fixed Buttons -->
|
||||||
<div class="chat-message-box position-fixed">
|
<x-chat-box />
|
||||||
|
|
||||||
|
|
||||||
<!-- Chat Drop Down -->
|
|
||||||
<div class="chat-widget-wrapper ui floating bg-dark-green-color icon dropdown button">
|
|
||||||
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
|
||||||
|
|
||||||
<div class="menu chat-menu">
|
|
||||||
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
|
||||||
<div class="header d-flex justify-content-between align-items-center text-white">
|
|
||||||
<p class="chat-popup-label text-light">Chats</p>
|
|
||||||
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item open-inbox">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
</div>
|
|
||||||
<div class="user-message-detail">
|
|
||||||
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
||||||
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
||||||
adipiscing
|
|
||||||
elit. In lorem est... </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- User Inbox menu -->
|
|
||||||
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
|
||||||
<div class="header d-flex align-items-center">
|
|
||||||
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
|
||||||
<p class="chat-popup-label text-light">James</p>
|
|
||||||
</div>
|
|
||||||
<div class="scrollhint">
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>👋 Hi there! How can I help?</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item d-flex justify-content-end">
|
|
||||||
<div class="sender-message-box text-white">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
|
|
||||||
est,
|
|
||||||
tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
|
|
||||||
mollis, pretium augue vel, feugiat risus.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item d-flex justify-content-end">
|
|
||||||
<div class="sender-message-box text-white">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="single-user-content d-flex">
|
|
||||||
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
||||||
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
||||||
<p>Typing...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="outer-message-input-box">
|
|
||||||
<div class="inner-message-input d-flex align-items-center justify-content-between ">
|
|
||||||
<input type="text" class="border-0" placeholder="Type a reply">
|
|
||||||
<p class="input-action d-flex align-items-center ">
|
|
||||||
<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">
|
|
||||||
<img src="{{ asset('images/icons/emoji.png') }}" alt="Gif">
|
|
||||||
<img src="{{ asset('images/icons/attachment.png') }}" alt="Gif">
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Support Drop down -->
|
|
||||||
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
|
||||||
<img src="{{ asset('images/icons/support.svg') }}" alt="Support Icon">
|
|
||||||
<div class="menu support-widget">
|
|
||||||
<div class="header support-header mt-0 text-center">
|
|
||||||
<h2 class="color-dark-green">Help & Support</h2>
|
|
||||||
</div>
|
|
||||||
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/faq-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">FAQ</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/laptop-minimalistic-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">Using Kundo</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/launch-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/setting-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Technical Settings</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/data-mapping-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green ">Integration</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/open-door-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/news-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">News & Updates</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="{{ asset('images/icons/graduate-cap-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green ">Training</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header contact-us-header text-center">
|
|
||||||
<h2 class="color-dark-green">Contact Us</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-us-box d-flex justify-content-center">
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/email-14-svgrepo-com (1) 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green text-wrap">Technical Questions</p>
|
|
||||||
</div>
|
|
||||||
<div class="item text-center">
|
|
||||||
<div class="support-img-box align-content-center">
|
|
||||||
<img src="images/icons/about-filled-svgrepo-com 1.svg') }}" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="color-dark-green">About Kundo</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- End -->
|
<!-- End -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,10 @@
|
||||||
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message{
|
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message{
|
||||||
max-width:90%!important;
|
max-width:90%!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.receiver-message{
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="inbox-content-wrapper w-100 ">
|
<div class="inbox-content-wrapper w-100 ">
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,279 @@
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Toggle filter dropdown on button click
|
||||||
|
$('.list-filter-btn').click(function() {
|
||||||
|
$('.filter-options').toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial hide for handle_multiple__options
|
||||||
|
$('.filter-options').hide();
|
||||||
|
$('.handle_multiple__options').hide();
|
||||||
|
|
||||||
|
// Toggle visibility of handle_multiple__options on button click
|
||||||
|
$('.handle-multiple-btn').click(function() {
|
||||||
|
$('.handle_multiple__options').toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially disable all the buttons
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
|
||||||
|
// Enable/disable buttons based on the select all checkbox
|
||||||
|
$('#select-all').change(function() {
|
||||||
|
if ($(this).is(':checked')) {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', false);
|
||||||
|
} else {
|
||||||
|
$('.handle_multiple__options .tags button').prop('disabled', true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Assign post" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Move" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal2').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the modal when "Reply to multiple" button is clicked
|
||||||
|
$('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#customModal3').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close the modal when the close button or outside the modal is clicked
|
||||||
|
$('.modal-close, .modal').click(function() {
|
||||||
|
$('.modal').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent modal content from closing the modal when clicked
|
||||||
|
$('.modal-content').click(function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update Select status options based on Select filter selection
|
||||||
|
$('#filter-select').change(function() {
|
||||||
|
var selectedFilter = $(this).val();
|
||||||
|
console.log("Selected filter:", selectedFilter); // Debugging log
|
||||||
|
updateStatusOptions(selectedFilter);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially hide filter based data section
|
||||||
|
$('.filter_based__data').hide();
|
||||||
|
|
||||||
|
// Function to update status options based on selectedFilter
|
||||||
|
function updateStatusOptions(selectedFilter) {
|
||||||
|
console.log("Updating status options for:", selectedFilter); // Debugging log
|
||||||
|
switch (selectedFilter) {
|
||||||
|
case 'Assigned to':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select assigned to</option>
|
||||||
|
<option value="Assigned">Assigned</option>
|
||||||
|
<option value="Unassigned">Unassigned</option>
|
||||||
|
<option value="Margin">Margin</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Which activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select activity</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'No activity':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select No activity</option>
|
||||||
|
<option value="Exercise">Exercise</option>
|
||||||
|
<option value="Not Yoga">Not Yoga</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Editor':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Editor</option>
|
||||||
|
<option value="Computer tool">Computer tool</option>
|
||||||
|
<option value="Direct editor">Direct editor</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Spam':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled>Select Spam</option>
|
||||||
|
<option value="Marked as spam">Marked as spam</option>
|
||||||
|
<option value="Not spam">Not spam</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Status':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
<option value="Completed">Completed</option>
|
||||||
|
<option value="Not Completed">Not Completed</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Tags':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Tags</option>
|
||||||
|
<option value="Target">Target</option>
|
||||||
|
<option value="Mustafa">Mustafa</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
case 'Users':
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select Users</option>
|
||||||
|
<option value="Merrs">Merrs</option>
|
||||||
|
<option value="Abdullah">Abdullah</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
$('#status-select').html(`
|
||||||
|
<option disabled value="">Select status</option>
|
||||||
|
`);
|
||||||
|
$('.filter_based__data').show();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.handle_multiple__options {
|
||||||
|
display: none;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags button {
|
||||||
|
background-color: #748C62;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options .tags button:hover {
|
||||||
|
background-color: #383F33;
|
||||||
|
}
|
||||||
|
.handle_multiple__options .tags button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle_multiple__options input{
|
||||||
|
width: 32px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
|
.handle_multiple__options .common_shre{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
/* Custom Modal CSS */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 13%;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#customModal3 .modal-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 40%;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.modal-content .btn-primary{
|
||||||
|
background-color: #748C62 !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
color: #aaa;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover,
|
||||||
|
.modal-close:focus {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter select {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="ui card chat-card waiting-chat-card">
|
<div class="ui card chat-card waiting-chat-card">
|
||||||
<div class="content chat-card-header d-flex align-items-center justify-content-between">
|
<div class="content chat-card-header d-flex align-items-center justify-content-between">
|
||||||
|
|
@ -29,6 +302,44 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div class="filter">
|
||||||
|
<span> <b>Filter on:</b> </span>
|
||||||
|
<select id="filter-select" name="">
|
||||||
|
<option disabled >Select filter</option>
|
||||||
|
<option value="Assigned to">Assigned to</option>
|
||||||
|
<option value="Which activity">Which activity</option>
|
||||||
|
<option value="No activity">No activity</option>
|
||||||
|
<option value="Editor">Editor</option>
|
||||||
|
<option value="Spam">Spam</option>
|
||||||
|
<option value="Status">Status</option>
|
||||||
|
<option value="Tags">Tags</option>
|
||||||
|
<option value="Users">Users</option>
|
||||||
|
</select>
|
||||||
|
<div class="filter_based__data">
|
||||||
|
<select id="status-select" name="">
|
||||||
|
<option disabled>Select status</option>
|
||||||
|
<!-- Options will be dynamically updated based on selected filter -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="handle_multiple__options">
|
||||||
|
<div class="common_shre">
|
||||||
|
<label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
|
||||||
|
<div class="tags">
|
||||||
|
<button>Assign post</button>
|
||||||
|
<button>Delete</button>
|
||||||
|
<button>Move</button>
|
||||||
|
<button>Open</button>
|
||||||
|
<button>Waiting</button>
|
||||||
|
<button>Done</button>
|
||||||
|
<button>Tag</button>
|
||||||
|
<button>Not spam</button>
|
||||||
|
<button>Reply to multiple</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@if(count($tickets) > 0)
|
@if(count($tickets) > 0)
|
||||||
<div class="content chat-content">
|
<div class="content chat-content">
|
||||||
|
|
@ -71,4 +382,51 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom Modal post -->
|
||||||
|
<div id="customModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Assign Post</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label">Recipient:</label>
|
||||||
|
<input type="text" class="form-control" id="recipient-name">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="message-text" class="col-form-label">Message:</label>
|
||||||
|
<textarea class="form-control" id="message-text"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<button type="button" class="btn btn-primary">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Custom Modal move-->
|
||||||
|
<div id="customModal2" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Move</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label">Conversation moved:</label>
|
||||||
|
<input type="text" class="form-control" id="recipient-name" placeholder="Inbox">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<button type="button" class="btn btn-primary">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Custom Modal Replay to multiple-->
|
||||||
|
<div id="customModal3" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="modal-close">×</span>
|
||||||
|
<h5>Replay to multiple</h5>
|
||||||
|
<form>
|
||||||
|
<div class="mb-3 mt-4">
|
||||||
|
<p>Please choose only email conversations and try again</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -22,6 +22,9 @@
|
||||||
Route::post('/chat/start', [ChatController::class, 'startChat']);
|
Route::post('/chat/start', [ChatController::class, 'startChat']);
|
||||||
Route::post('/chat/send-message', [ChatController::class, 'sendMessage']);
|
Route::post('/chat/send-message', [ChatController::class, 'sendMessage']);
|
||||||
|
|
||||||
|
Route::post('/chat/get', [ChatController::class, 'getChat']);
|
||||||
|
Route::post('/chat/getMessages', [ChatController::class, 'getMessages']);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
use App\Http\Controllers\TicketController;
|
use App\Http\Controllers\TicketController;
|
||||||
|
|
||||||
use App\Http\Controllers\Mailgun\MailgunController;
|
use App\Http\Controllers\Mailgun\MailgunController;
|
||||||
|
use App\Http\Controllers\Chat\ChatController;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -24,6 +25,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Route::get('/', [LoginController::class, 'login'])->name('login.create');
|
Route::get('/', [LoginController::class, 'login'])->name('login.create');
|
||||||
Route::post('store/login', [LoginController::class, 'storeLogin'])->name('store.login');
|
Route::post('store/login', [LoginController::class, 'storeLogin'])->name('store.login');
|
||||||
Route::post('store/register', [RegisterController::class, 'storeRegister'])->name('store.register');
|
Route::post('store/register', [RegisterController::class, 'storeRegister'])->name('store.register');
|
||||||
|
|
@ -33,6 +35,10 @@
|
||||||
|
|
||||||
Route::middleware(['auth'])->group(function(){
|
Route::middleware(['auth'])->group(function(){
|
||||||
|
|
||||||
|
// In routes/web.php
|
||||||
|
Route::get('/chatgroups', [ChatController::class, 'getChatGroupsByCompany'])->name('chatgroups.get');
|
||||||
|
|
||||||
|
|
||||||
Route::get('/test', [MailgunController::class, 'test'])->name('test');
|
Route::get('/test', [MailgunController::class, 'test'])->name('test');
|
||||||
|
|
||||||
Route::get('/show-domain/{domain}', [MailgunController::class, 'showDomain'])->name('showDomain');
|
Route::get('/show-domain/{domain}', [MailgunController::class, 'showDomain'])->name('showDomain');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue