292 lines
9.5 KiB
PHP
292 lines
9.5 KiB
PHP
@extends('layouts.master')
|
|
|
|
<title>All Tickets</title>
|
|
|
|
@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();
|
|
});
|
|
|
|
|
|
});
|
|
|
|
</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;
|
|
}
|
|
|
|
|
|
</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="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">
|
|
@foreach($tickets as $ticket)
|
|
<li>
|
|
<a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
|
|
<div class="chat-user-img all-tickets position-relative">
|
|
<img src="{{ asset('images/Avatar.png') }}" 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>
|
|
<!-- 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
|
|
|