waqas
/
Kundesone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chat function

This commit is contained in:
abdul-wahab12345 2024-07-12 15:23:36 +00:00
parent f13e2a1945
commit 6b51f6a402
12 changed files with 1374 additions and 476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/Http/Controllers/Chat/ChatController.php
View File

@ -12,6 +12,21 @@
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.
*
@ -53,7 +68,7 @@ public function startChat(Request $request)
$chatGroup = ChatGroup::create($data);
return response()->json(['chat_id' => $chatGroup->id], 200);
return response()->json(['chat' => $chatGroup], 200);
}else{
return response()->json(['message' => 'user not found'], 400);
@ -109,4 +124,13 @@ public function select_user($company_id){
return $selected;
}
public function getChatGroupsByCompany(Request $request)
{
$companyId = getSelectedCompany();
$chatGroups = ChatGroup::where('company_id', $companyId)->get();
return response()->json($chatGroups);
}
}

BIN
public/assets/noti.wav Normal file
View File

Binary file not shown.

10
public/assets/script.js
View File

@ -9,11 +9,13 @@ $(document).ready(function () {
});
initFomanticDropdown(".user-select-dropdown", { action: "activate" });
//Handle opening / closing of inbox
$(".open-inbox").on("click", function () {
slideTransition("#chat-feature-widget", "left", true);
slideTransition("#inbox", "right", false);
});
// $(".open-inbox").on("click", function () {
// slideTransition("#chat-feature-widget", "left", true);
// slideTransition("#inbox", "right", false);
// });
$("#back-to-users").on("click", function () {
slideTransition("#inbox", "left", true);

242
resources/views/all-tickets.blade.php
View File

@ -5,65 +5,153 @@
@section('content')
<script>
$(document).ready(function() {
// Initially disable all the buttons
$('.handle_multiple__options .tags button').prop('disabled', true);
// 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();
});
$(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;
@ -163,7 +251,27 @@
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>
@ -185,6 +293,28 @@
</div>
</div>
<div class="filter-options">
<div class="filter">
<span> <b>Filter on:</b> &nbsp;</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>

425
resources/views/components/chat-box.blade.php Normal file
View File

@ -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>

356
resources/views/index.blade.php
View File

@ -13,6 +13,277 @@
</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="ui card chat-card">
<div class="content chat-card-header d-flex align-items-center justify-content-between">
@ -36,6 +307,44 @@
</div>
</div>
<div class="filter-options">
<div class="filter">
<span> <b>Filter on:</b> &nbsp;</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 class="content chat-content">
<ul class="chat-details">
@ -72,4 +381,51 @@
</div>
</div>
<!-- Custom Modal post -->
<div id="customModal" class="modal">
<div class="modal-content">
<span class="modal-close">&times;</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">&times;</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">&times;</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

214
resources/views/layouts/master.blade.php
View File

@ -39,216 +39,10 @@
@yield('content')
<!-- End -->
<!-- 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="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 -->
<x-chat-box />
</div>
</div>
</div>

206
resources/views/layouts/setting.blade.php
View File

@ -105,211 +105,7 @@ class="side-bar-link bg-light-color d-flex align-items-center justify-content-be
<!-- End -->
<!-- Support and Chat Fixed Buttons -->
<div class="chat-message-box position-fixed">
<!-- 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 &amp; 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 &amp; 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 &amp; 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>
<x-chat-box />
<!-- End -->
</div>
</div>

4
resources/views/show-ticket.blade.php
View File

@ -8,6 +8,10 @@
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message{
max-width:90%!important;
}
.receiver-message{
word-break: break-all;
}
</style>
<div class="inbox-content-wrapper w-100 ">

358
resources/views/waiting.blade.php
View File

@ -13,6 +13,279 @@
</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="ui card chat-card waiting-chat-card">
<div class="content chat-card-header d-flex align-items-center justify-content-between">
@ -29,6 +302,44 @@
</div>
</div>
<div class="filter-options">
<div class="filter">
<span> <b>Filter on:</b> &nbsp;</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>
@if(count($tickets) > 0)
<div class="content chat-content">
@ -71,4 +382,51 @@
</div>
</div>
<!-- Custom Modal post -->
<div id="customModal" class="modal">
<div class="modal-content">
<span class="modal-close">&times;</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">&times;</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">&times;</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

3
routes/api.php
View File

@ -22,6 +22,9 @@
Route::post('/chat/start', [ChatController::class, 'startChat']);
Route::post('/chat/send-message', [ChatController::class, 'sendMessage']);
Route::post('/chat/get', [ChatController::class, 'getChat']);
Route::post('/chat/getMessages', [ChatController::class, 'getMessages']);

6
routes/web.php
View File

@ -9,6 +9,7 @@
use App\Http\Controllers\TicketController;
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::post('store/login', [LoginController::class, 'storeLogin'])->name('store.login');
Route::post('store/register', [RegisterController::class, 'storeRegister'])->name('store.register');
@ -33,6 +35,10 @@
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('/show-domain/{domain}', [MailgunController::class, 'showDomain'])->name('showDomain');