651 lines
24 KiB
PHP
651 lines
24 KiB
PHP
@extends('layouts.master')
|
|
|
|
<title>All Tickets</title>
|
|
|
|
@section('content')
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
$('.side-bar-links a').removeClass('bg-light-color');
|
|
$('.aw-a-inbox').addClass('bg-light-color');
|
|
});
|
|
|
|
</script>
|
|
|
|
<!-- Toastr CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
|
|
<!-- Toastr JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
|
|
<!-- SweetAlert2 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
|
|
<!-- SweetAlert2 JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
|
|
|
|
@php
|
|
$companyId = getSelectedCompany();
|
|
$company_users = get_company_users($companyId);
|
|
@endphp
|
|
|
|
<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>
|
|
// `);
|
|
var options = '<option value="">Select assigned to</option>';
|
|
// Loop through the company_users array
|
|
@foreach($company_users as $company_user)
|
|
options += '<option value="{{ $company_user->user->id }}">{{ $company_user->user->name }}</option>';
|
|
@endforeach
|
|
|
|
$('#status-select').html(options);
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'With activity':
|
|
$('#status-select').html(`
|
|
<option value="">Select No activity</option>
|
|
<option value="last 24 hours">Last 24 hours</option>
|
|
<option value="last 3 days">Last 3 days</option>
|
|
<option value="last week">Last week</option>
|
|
<option value="last month">Last month</option>
|
|
<option value="last 3 months">Last 3 months</option>
|
|
<option value="last 6 months">Last 6 months</option>
|
|
<option value="last year">Last year</option>
|
|
<option value="the past 2 years">The past 2 years</option>
|
|
<option value="the past 3 years">The past 3 years</option>
|
|
<option value="the past 4 years">The past 4 years</option>
|
|
<option value="the past 5 years">The past 5 years</option>
|
|
`);
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'No activity':
|
|
$('#status-select').html(`
|
|
<option value="">Select No activity</option>
|
|
<option value="last 24 hours">Last 24 hours</option>
|
|
<option value="last 3 days">Last 3 days</option>
|
|
<option value="last week">Last week</option>
|
|
<option value="last month">Last month</option>
|
|
<option value="last 3 months">Last 3 months</option>
|
|
<option value="last 6 months">Last 6 months</option>
|
|
<option value="last year">Last year</option>
|
|
<option value="the past 2 years">The past 2 years</option>
|
|
<option value="the past 3 years">The past 3 years</option>
|
|
<option value="the past 4 years">The past 4 years</option>
|
|
<option value="the past 5 years">The past 5 years</option>
|
|
`);
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'Editor':
|
|
$('#status-select').html(`
|
|
<option 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 value="">Select Spam</option>
|
|
<option value="marked as spam">Marked as spam</option>
|
|
<option value="marked as not spam">Marked as not spam</option>
|
|
`);
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'Status':
|
|
$('#status-select').html(`
|
|
<option value="">Select status</option>
|
|
<option value="open">Open</option>
|
|
<option value="waiting">Waiting</option>
|
|
<option value="done">Done</option>
|
|
`);
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'Tags':
|
|
|
|
var options = '<option value="">Select Tags</option>';
|
|
@foreach($tags as $tag)
|
|
options += '<option value="{{$tag->name}}">{{$tag->name}}</option>';
|
|
@endforeach
|
|
|
|
$('#status-select').html(options);
|
|
|
|
$('.filter_based__data').show();
|
|
break;
|
|
case 'Users':
|
|
|
|
var options = '<option value="">Select Users</option>';
|
|
// Loop through the company_users array
|
|
@foreach($company_users as $company_user)
|
|
options += '<option value="{{ $company_user->user->id }}">{{ $company_user->user->name }}</option>';
|
|
@endforeach
|
|
|
|
// Update the select element with the generated options
|
|
$('#status-select').html(options);
|
|
$('.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;
|
|
}
|
|
/* Hide checkboxes initially */
|
|
.checkbox-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
/* Show checkboxes when 'Handle Multiple' is active */
|
|
.handle-multiple-active .checkbox-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
/* Show checkboxes when 'Handle Multiple' is active */
|
|
.handle-multiple-active .checkbox-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
.chat-content {
|
|
padding: 12px 11px !important;
|
|
}
|
|
|
|
.chat-user-img{
|
|
margin-left:12px !important;
|
|
}
|
|
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* When checkbox is checked, set background to green */
|
|
input[type="checkbox"]:checked {
|
|
background-color: #748C62;
|
|
border-color: #748C62;
|
|
}
|
|
|
|
/* Optional: Add checkmark icon or any visual effect */
|
|
input[type="checkbox"]:checked::before {
|
|
transform: translate(0px, -1px);
|
|
content: '✔';
|
|
display: block;
|
|
text-align: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
margin-bottom: -1px;
|
|
}
|
|
input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
margin-right: 7px;
|
|
}
|
|
.handle_multiple__options label {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
.handle_multiple__options label {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
align-items: flex-start;
|
|
/* margin-top: 12px; */
|
|
transform: translate(2px, 6px);
|
|
}
|
|
#cannedResponseModal ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex !important;
|
|
gap: 8px !important;
|
|
flex-wrap: wrap !important;
|
|
}
|
|
.canned-response {
|
|
background-color: #748C62 !important;
|
|
color: white;
|
|
}
|
|
|
|
|
|
</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">
|
|
<div class="header">Chats</div>
|
|
<div class="data-actions d-flex justify-content-end">
|
|
|
|
<button class="action-button d-flex align-items-center list-filter-btn">
|
|
<img src="{{ asset('images/icons/list-filter.png') }}" alt="">
|
|
</button>
|
|
|
|
<button class="action-button bg-dark-green-color color-light handle-multiple-btn">
|
|
<img src="{{ asset('images/icons/Add_Plus.png') }}" alt="Plus Icon">
|
|
<span>Handle Multiple</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="filter-options">
|
|
<div class="filter">
|
|
<span> <b>Filter on:</b> </span>
|
|
<select id="filter-select" name="">
|
|
<option value="select_filter_default">Select filter</option>
|
|
<option value="Assigned to">Assigned to</option>
|
|
<option value="With activity">With 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 id="delete-posts">Delete</button>
|
|
<!--<button>Move</button>-->
|
|
<button data-status="open" class="update-posts-status">Open</button>
|
|
<button data-status="waiting" class="update-posts-status">Waiting</button>
|
|
<button data-status="done" class="update-posts-status">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">
|
|
@foreach($tickets as $ticket)
|
|
<li>
|
|
<a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
|
|
<div class="checkbox-wrapper">
|
|
<input type="checkbox" class="ticket-checkbox" id="ticket-{{$ticket->id}}">
|
|
</div>
|
|
<div class="chat-user-img all-tickets position-relative">
|
|
<img style="height: 42px; width: 42px; border-radius: 50%;" src="{{ asset('dummy-image.jpg') }}" alt="User">
|
|
<div
|
|
class="chat-status-icon rounded-circle text-center align-content-center position-absolute">
|
|
<img src="{{ asset('images/icons/chat-round.svg') }}" alt="Chat Round">
|
|
</div>
|
|
</div>
|
|
<div class="chat-message-info d-flex align-self-baseline">
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-light-green">#{{$ticket->id}}</p>
|
|
<div class="ui tiny label bg-light-green-color color-light">
|
|
{{$ticket->status}}
|
|
</div>
|
|
</div>
|
|
<p class="color-dark-green">{{\Carbon\Carbon::parse($ticket->created_at)->format('d/m/Y')}}</p>
|
|
</div>
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-dark-green receiver-name">{{ $ticket->sender_name }}</p>
|
|
<p class="receiver-message"> - {{\Illuminate\Support\Str::limit($ticket->subject, 90)}}</p>
|
|
</div>
|
|
<p class="color-dark-green bold message-time">{{\Carbon\Carbon::parse($ticket->created_at)->format('h:i A')}}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--Filter Status Code-->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
const filterSelect = $('#filter-select');
|
|
const statusSelect = $('#status-select');
|
|
const statusOptions = $('#status-options');
|
|
const chatDetails = $('.chat-details');
|
|
|
|
// Handle status change
|
|
$('#status-select').change(function() {
|
|
fetchTickets();
|
|
});
|
|
|
|
// Fetch tickets based on filter
|
|
function fetchTickets() {
|
|
const filter = filterSelect.val();
|
|
const status = $('#status-select').val();
|
|
|
|
$.ajax({
|
|
url: '/filter',
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': "{{ csrf_token() }}"
|
|
},
|
|
data: {
|
|
filter: filter,
|
|
status: status,
|
|
},
|
|
success: function(data) {
|
|
chatDetails.empty();
|
|
$.each(data.tickets, function(index, ticket) {
|
|
chatDetails.append(`
|
|
<li>
|
|
<a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
|
|
<div class="checkbox-wrapper">
|
|
<input type="checkbox" class="ticket-checkbox" id="ticket-${ticket.id}">
|
|
</div>
|
|
<div class="chat-user-img">
|
|
<img src="/images/Avatar.png" alt="User">
|
|
</div>
|
|
<div class="chat-message-info d-flex align-self-baseline">
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-light-green">#${ticket.id}</p>
|
|
<div class="ui tiny label bg-dark-green-color color-light">
|
|
${ticket.status}
|
|
</div>
|
|
</div>
|
|
<p class="color-dark-green">${new Date(ticket.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-dark-green receiver-name">${ticket.sender_name}</p>
|
|
<p class="receiver-message"> - ${ticket.subject}</p>
|
|
</div>
|
|
<p class="color-dark-green bold message-time">${new Date(ticket.created_at).toLocaleTimeString()}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
const chatDetails = $('.chat-details');
|
|
const filterSelect = $('#filter-select');
|
|
filterSelect.change(function() {
|
|
const selectedFilter = $(this).val();
|
|
|
|
if (selectedFilter === 'select_filter_default') {
|
|
$.ajax({
|
|
url: 'default/all-tickets',
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': "{{ csrf_token() }}"
|
|
},
|
|
success: function(data) {
|
|
chatDetails.empty();
|
|
$.each(data.tickets, function(index, ticket) {
|
|
chatDetails.append(`
|
|
<li>
|
|
<a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
|
|
<div class="checkbox-wrapper">
|
|
<input type="checkbox" class="ticket-checkbox" id="ticket-${ticket.id}">
|
|
</div>
|
|
<div class="chat-user-img">
|
|
<img src="/images/Avatar.png" alt="User">
|
|
</div>
|
|
<div class="chat-message-info d-flex align-self-baseline">
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-light-green">#${ticket.id}</p>
|
|
<div class="ui tiny label bg-dark-green-color color-light">
|
|
${ticket.status}
|
|
</div>
|
|
</div>
|
|
<p class="color-dark-green">${new Date(ticket.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
<div class="chat-ticket-row d-flex justify-content-between">
|
|
<div class="ticket-status d-flex">
|
|
<p class="color-dark-green receiver-name">${ticket.sender_name}</p>
|
|
<p class="receiver-message"> - ${ticket.subject}</p>
|
|
</div>
|
|
<p class="color-dark-green bold message-time">${new Date(ticket.created_at).toLocaleTimeString()}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
`);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<x-custom-modals />
|
|
|
|
@endsection
|
|
|