nhance/app/Views/thz_list.php

744 lines
30 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
.table th,
.table td {
padding: 8px;
}
table.dataTable tbody td {
padding: 4px 4px !important;
}
.col-12 {
max-width: 98% !important;
}
.dataTables_filter {
position: absolute;
}
.column-header {
margin-right: 10px;
}
.btn {
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
</style>
<style>
.text-custom-grey{
font-size: 0.85em;
color: #6c757d !important;
}
</style>
<div class="row" id="ticket_list">
<div class="col-12">
<div class="card">
<div class="card-body">
<div>
<div class="table-responsive">
<table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="tickets-table">
<thead class="bg-light">
<tr>
<th><div class="column-header">Ticket ID&nbsp;</div></th>
<th class="text-left"><div class="column-header">Name &nbsp;</div></th>
<th><div class="column-header">Policy Number &nbsp;</div></th>
<th><div class="column-header">Ticket Type &nbsp;</div></th>
<th><div class="column-header">Subject &nbsp;</div></th>
<th><div class="column-header">Status &nbsp;</div></th>
<th class="text-left"><div class="column-header">Assign To &nbsp;</div></th>
<th><div class="column-header">Created At &nbsp;</div></th>
<th><div class="column-header">Updated At &nbsp;</div></th>
</tr>
</thead>
<tbody class="app-table-body">
<?php if(isset($ticket_data)) { ?>
<?php foreach($ticket_data as $index => $row){ ?>
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
<td class="text-center"><?php echo $row['thz_id']; ?></td>
<td class="text-left"><?php echo $row['name']; ?>
<span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
<span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
</td>
<td class="text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
? $row['policy_no']
: 'N/A'; ?>
</td>
<td class="text-center"><?php echo $row['ticket_type'] ? $row['ticket_type'] : 'N/A'; ?></td>
<td class="text-center wrap" title="<?php echo htmlspecialchars($row['subject']); ?>">
<?php
$subject = $row['subject'] ? $row['subject'] : 'N/A';
echo (strlen($subject) > 18)
? htmlspecialchars(substr($subject, 0, 18)) . "..."
: htmlspecialchars($subject);
?>
</td>
<td class="text-center"><?php echo $row['status'] ? $row['status'] : 'N/A' ; ?></td>
<td class="text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : 'N/A'; ?></td>
<td class="text-left">
<?php if (!empty($row['created_at'])):
$cd = date("j M Y", strtotime($row['created_at']));
$ct = date("h:i a", strtotime($row['created_at']));
echo $cd . "<br><span class='time'> " . $ct . "</span>";
endif;
?>
</td>
<td class="text-left">
<?php if (!empty($row['updated_at'])):
$ud = date("j M Y", strtotime($row['updated_at']));
$ut = date("h:i a", strtotime($row['updated_at']));
echo $ud . "<br><span class='time'> " . $ut . "</span>";
endif;
?>
</td>
</tr>
<?php } ?>
<?php } else { ?>
<tr>
<td colspan="9" class="text-center">No data available</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- end col -->
</div>
<div class="modal fade " id="ticketModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" style="margin:5px auto!important;">
<div class="modal-content">
<form class="parsley-examples" id="ticketForm">
<!-- <div class="modal-header">
<h4 class="modal-title" id="modalLabel">New Ticket</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div> -->
<div class="modal-header flex-column">
<!-- first row -->
<div class="d-flex w-100 justify-content-between align-items-center">
<h4 class="modal-title mb-0" id="modalLabel" style="font-size:27px !important">New Ticket</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<!-- second row -->
<div class="form-row mt-3 w-100 ">
<div class="form-group col-md-6 ">
<label for="client_id">Client</label>
<select class="form-control app-field-grey font-color-black" id="client_id" name="client_id">
<option value="">Select Client</option>
<?php if(isset($client_list)) { ?>
<?php foreach ($client_list as $c) { ?>
<option value="<?= $c->id ?>"><?= $c->client_name ?> (<?= $c->short_name ?>) </option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="form-group col-md-5 ">
<label for="mobile">Mobile<span class="text-danger">*</span></label>
<input type="text" class="form-control app-field-grey" id="mobile" placeholder="Enter Mobile Number"
name="mobile"
pattern="^[0-9]{10}$" required maxlength="10"
title="Please enter a valid 10-digit mobile number">
</div>
<div class="form-group col-md-1" style="padding:32.5px 0 0 18px;">
<button type="button" class="btn-custom app-btn-primary " style="padding: 0 10px !important; border-radius:13px;" onclick="getAutoFetchDetails()"><i class="mdi mdi-cached " style="font-size:24px;"></i></button>
</div>
</div>
</div>
<div class="modal-body" style="padding: 12px 15px 0px 15px !important;">
<div class="form-row">
<input type="hidden" id="thz_id" name="thz_id">
<input type="hidden" id="return_type" name="return_type">
<input type="hidden" id="branch_id" name="branch_id">
<input type="hidden" id="policy_id" name="policy_id">
<input type="hidden" id="created_by" name="created_by" value="<?= get_session_userid(); ?>">
<div class="form-group col-md-4 ">
<label for="name">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
</div>
<div class="form-group col-md-4 ">
<label for="email">Email Id<span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email"
name="email" placeholder="Enter Email"
required
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
title="Please enter a valid email address">
</div>
<div class="form-group col-md-4 ">
<label for="empcode">Employee code</label>
<input type="text" class="form-control" id="empcode" name="empcode" placeholder="Enter Employee code">
</div>
<div class="form-group col-md-4 ">
<label for="ticket_type">Ticket Type<span class="text-danger">*</span></label>
<select class="form-control" id="ticket_type" name="ticket_type" required onchange="hideandshowpolicy()">
<option value="">Select Ticket Type</option>
<!-- <option value="Sales" selected >Sales</option> -->
<!-- <option value="Service">Service</option> -->
<!-- <option value="0">+ Add New</option> -->
<?php if (!empty($ticket_type)): ?>
<?php foreach ($ticket_type as $t): ?>
<option value="<?= esc($t['name']) ?>"
<?= (strtolower($t['name']) === "sales") ? 'selected' : '' ?>>
<?= esc($t['name']) ?>
</option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
<div class="form-group col-md-4 " id="policy_container">
<label for="policy_no">Policy Number</label>
<select class="form-control" id="policy_no" name="policy_no" onchange="changevalue()">
<option value="" selected data-id="">Select Policy</option>
</select>
</div>
<!-- <div class="form-group col-md-6">
<label for="status">Status</label>
<select class="form-control" id="status" name="status">
<option value="">Select Status</option>
<option value="Open">Open</option>
<option value="In Progress">In Progress</option>
<option value="Resolved">Resolved</option>
<option value="Closed">Closed</option>
</select>
</div> -->
<!-- // enga 5-"head" and 1-"admin" assign pannvaga dropdown-data la varakudhathu. but dropdown display aganum
// 2,3,4 dropdown data'va varannum but dropdown hide pannanum -->
<?php if (in_array(get_role_id(), [1,2,5])): ?>
<div class="form-group col-md-4">
<label for="assign_to">Assign To</label>
<select class="form-control" id="assign_to" name="assign_to">
<option value="">Select Assign To</option>
<?php if (!empty($assignee)): ?>
<?php foreach ($assignee as $a): ?>
<option value="<?= esc($a['id']) ?>">
<?= esc($a['emp_code']) ?> - <?= esc($a['first_name']) ?> <?= esc($a['last_name']) ?>
</option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
<?php else: ?>
<input type="hidden" id="hide_assign_to" name="assign_to" value="<?= esc(get_session_userid()); ?>">
<?php endif; ?>
<!-- <div class="form-group col-md-12 ">
<label for="subject">Subject<span class="text-danger">*</span></label>
<small id="subjectCounter" class="form-text text-muted text-right">0/150</small>
</div> -->
<div class="form-group col-md-12 ">
<div class="d-flex justify-content-between">
<label for="subject" class="mb-1">Subject <span class="text-danger">*</span></label>
<small id="subjectCounter" class="form-text text-muted">0/150</small>
</div>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject" required maxlength="150">
</div>
<div class="form-group col-md-12 ">
<div class="d-flex justify-content-between">
<label for="message">Message<span class="text-danger">*</span></label>
<small id="messageCounter" class="form-text text-muted text-end text-right">0/1500</small>
</div>
<!-- <input type="text" class="form-control" id="message" name="message" placeholder="Enter Message"> -->
<textarea class="form-control" id="message" name="message" placeholder="Enter Message" rows="3" required maxlength="1500"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn app-btn-primary mr-2 " onclick="resetTicket()">Reset</button>
<button type="submit" class="btn app-btn-secondary " onclick="submitTicket(event)">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade " id="AssignModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="assignModalLabel">Ticket</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-row">
<input type="hidden" id="hidden_thz_id" name="hidden_thz_id">
<div class="form-group col-md-12">
<label for="modal_assignee">Assign To<span class="text-danger">*</span></label>
<select class="form-control" id="modal_assignee" name="modal_assignee" required>
<option value="">Select Assign To</option>
<?php if(isset($assignee)) { ?>
<?php foreach ($assignee as $a) { ?>
<option value="<?= $a['id']?>"><?= $a['emp_code'] ?> - <?= $a['first_name'] ?> <?= $a['last_name'] ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-custom app-btn-secondary " onclick="updateAssignTo()">Save</button>
</div>
</div>
</div>
</div>
<script>
// Datatable document ready
$(document).ready(function() {
var ticketsTable = $('#tickets-table');
if (ticketsTable.length) {
ticketsTable.DataTable({
scrollX: true,
dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
buttons: [
{
text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom"> Add </span>',
className: 'btn app-btn-primary mr-2',
action: function(e, dt, node, config) {
openTicket();
}
},
{
extend: 'collection',
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
className: 'btn app-btn-secondary ',
buttons: [
{
extend: 'csv',
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
className: 'app-btn-primary ',
title: 'Tickets',
},
{
extend: 'excel',
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
exportOptions: {
orthogonal: 'sort'
},
className: 'app-btn-primary ',
title: 'Tickets'
}
]
}
],
language: {
search: `
<div class="datatable-search-wrapper">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon"></i>
</div>`,
searchPlaceholder: "Search"
},
paging: true,
pageLength: 10,
order: [[0, 'desc']]
});
} else {
console.error("Table not found.");
}
});
function openTicket(){
var form = document.getElementById('ticketForm');
form.reset();
$("#client_id").select2();
$("#ticket_type").select2();
document.getElementById('thz_id').value = '';
document.getElementById('modalLabel').innerText = "New Ticket";
document.getElementById('return_type').innerText = "Web";
var myModal = new bootstrap.Modal(document.getElementById('ticketModal'));
myModal.show();
}
function resetTicket(){
var form = document.getElementById('ticketForm');
form.reset();
$("#client_id").select2();
$("#ticket_type").select2();
}
function submitTicket(event) {
event.preventDefault();
var form = document.getElementById('ticketForm');
// reset any old error styles
form.classList.remove('was-validated');
var name = document.getElementById('name').value.trim();
var mobile = document.getElementById('mobile').value.trim();
var email = document.getElementById('email').value.trim();
var message = document.getElementById('message').value.trim();
var subject = document.getElementById('subject').value.trim();
var ticketType = document.getElementById('ticket_type').value.trim();
// Validation checks
if (message.length === 0) {
toastr.error('Message cannot be empty', 'Warning');
form.classList.add('was-validated');
return;
}
if (message.length > 1500) {
toastr.error('Message cannot exceed 1500 characters', 'Warning');
form.classList.add('was-validated');
return;
}
if (subject.length === 0) {
toastr.error('Subject cannot be empty', 'Warning');
form.classList.add('was-validated');
return;
}
if (subject.length > 150) {
toastr.error('Subject cannot exceed 150 characters', 'Warning');
form.classList.add('was-validated');
return;
}
var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
toastr.warning('Please enter a valid 10-digit mobile number.', 'Warning');
document.getElementById('mobile').focus();
return;
}
var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
if (!emailPattern.test(email)) {
toastr.warning('Please enter a valid email address.', 'Warning');
document.getElementById('email').focus();
return;
}
if (name === "" || mobile === "" || email === "" || ticketType === "" || subject === "" || message === "") {
toastr.warning('Please fill all required fields.', 'Warning');
form.classList.add('was-validated');
return;
}
var form = document.getElementById("ticketForm"); // your form ID
var formData = new FormData(form);
var btn = event.target;
btn.disabled = true;
btn.innerText = "Saving...";
$.ajax({
url: "<?= base_url('ticketSave') ?>",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(response) {
if (response.status === "success") {
toastr.success(response.message, 'Success');
$('#ticketModal').modal('hide');
form.reset();
window.location.href = "<?= base_url('ticketList?return_type=web') ?>";
} else {
toastr.error(response.message, 'Error');
}
},
error: function(xhr) {
toastr.error("Something went wrong!", 'Error');
console.error(xhr.responseText);
},
complete: function() {
btn.disabled = false;
btn.innerText = "Save";
}
});
}
</script>
<script>
function getAutoFetchDetails() {
var client_id = document.getElementById('client_id').value.trim();
var mobile = document.getElementById('mobile').value.trim();
// reset fields
document.getElementById('name').value = "";
document.getElementById('email').value = "";
document.getElementById('empcode').value = "";
document.getElementById('branch_id').value = "";
document.getElementById('policy_id').value = "";
// reset select dropdown
var policySelect = document.getElementById('policy_no');
policySelect.innerHTML = '<option value="" data-id="">Select Policy</option>';
if (client_id === "") {
toastr.warning('Please Select Client.', 'Warning');
return;
}
if (mobile === "") {
toastr.warning('Please Enter a mobile number.', 'Warning');
return;
}
var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
toastr.warning('Please enter a valid 10-digit mobile number.', 'Warning');
document.getElementById('mobile').focus();
return;
}
$.ajax({
url: "<?= base_url('ticketAutoFetchDetails') ?>",
type: "POST",
data: { client_id: client_id, mobile: mobile },
dataType: 'json',
success: function(response) {
if (response.status === "success") {
let client = response.data.client_details[0];
let policies = response.data.policy_details;
document.getElementById('name').value = client.name || "";
document.getElementById('email').value = client.email_corporate || "";
document.getElementById('empcode').value = client.emp_code || "";
document.getElementById('branch_id').value = client.branch_id || "";
if (policies && policies.length > 0) {
policies.forEach(function(p) {
let opt = document.createElement("option");
opt.value = p.policy_no;
opt.text = p.policy_no;
opt.setAttribute("data-id", p.id);
policySelect.appendChild(opt);
});
// If you want to auto-select the first real policy instead of "Select Policy"
policySelect.value = policies[0].policy_no;
document.getElementById('policy_no').value = policies[0].policy_no || "";
document.getElementById('policy_id').value = policies[0].id;
}
} else {
toastr.warning(response.message || "No details found.", 'Warning');
}
},
error: function(xhr) {
toastr.error("Something went wrong!", 'Error');
console.error(xhr.responseText);
}
});
}
</script>
<script>
function changevalue() {
var select = document.getElementById('policy_no');
var selectedOption = select.options[select.selectedIndex];
var policyId = selectedOption.getAttribute("data-id");
document.getElementById('policy_id').value = policyId || "";
}
// function hideandshowpolicy() {
// var select = document.getElementById('ticket_type').value;
// var policyContainer = document.getElementById('policy_container');
// if (select === 'Service') {
// policyContainer.style.display = "block"; // show
// } else {
// policyContainer.style.display = "none"; // hide
// document.getElementById('policy_no').value = "";
// document.getElementById('policy_id').value = "";
// }
// }
function hideandshowpolicy() {
var select = document.getElementById('ticket_type');
var value = select.value;
var policyContainer = document.getElementById('policy_container');
if (value === "0") {
let newType = prompt("Enter new ticket type:");
if (newType && newType.trim() !== "") {
var formData = new FormData(form);
$.ajax({
url: "<?= base_url('ticketType') ?>",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(response) {
if (response.status === "success") {
let option = new Option(newType, newType);
let addNewOption = select.querySelector('option[value="0"]');
select.insertBefore(option, addNewOption);
select.value = newType;
value = newType;
console.log(response.message);
} else { console.log(response.message); value = ""; }
},
error: function(xhr) { console.log("Error: " + xhr.statusText); value = ""; }
});
} else {
select.value = "";
value = "";
}
}
if (value === 'Service') {
policyContainer.style.display = "block";
} else {
policyContainer.style.display = "none";
document.getElementById('policy_no').value = "";
document.getElementById('policy_id').value = "";
}
}
</script>
<script>
function updateAssignTo(){
console.log('function called then call the api then refresh the updateAssignTo');
}
</script>
<!-------------------------------------------------------------------------------------------------->
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
// Initialize select2
$("#client_id").select2();
$("#ticket_type").select2();
$("#status").select2();
$("#assign_to").select2();
$("#policy_no").select2();
$("#modal_assignee").select2();
hideandshowpolicy();
const subjectInput = document.getElementById("subject");
const subjectCounter = document.getElementById("subjectCounter");
subjectInput.addEventListener("input", function () {
const subjectLength = subjectInput.value.length;
subjectCounter.textContent = `${subjectLength}/150`;
if (subjectLength > 150) {
toastr.error('Subject cannot exceed 150 characters', 'Warning');
subjectInput.classList.add('is-invalid');
} else {
subjectInput.classList.remove('is-invalid');
}
});
const messageInput = document.getElementById("message");
const messageCounter = document.getElementById("messageCounter");
messageInput.addEventListener("input", function () {
const messageLength = messageInput.value.length;
messageCounter.textContent = `${messageLength}/1500`;
if (messageLength > 1500) {
toastr.error('Message cannot exceed 1500 characters', 'Warning');
messageInput.classList.add('is-invalid');
} else {
messageInput.classList.remove('is-invalid');
}
});
});
function viewTicket(ticket_id){
// $('.loader').fadeIn();
// $('.loader-mask').fadeIn();
let url = '<?= base_url('ticketConversationList?return_type=web&thz_id='); ?>' + ticket_id;
window.location.href = url;
}
function removeticket(input, ticket_id) {
confirmActionSweertAlert("Do you want to delete this ticket?", "Yes, Proceed!", "No, Cancel").then((confirmed) => {
if (confirmed) {
let url = '<?= base_url('ticket/remove') ?>';
// Include `pt_id` in the AJAX request if necessary
let requestData = { ticket_id: ticket_id };
sendAjaxRequestForGlobal(url, 'GET', requestData, function(response) {
console.log('Data fetched successfully:', response);
if (response.status === true) {
toastr.success(response.message, 'Success');
window.location.reload();
} else {
toastr.warning(response.message, 'Warning');
}
}, function(xhr, status, error) {
console.error('Error fetching data:', error);
console.error(xhr.responseText);
});
}
});
}
$(document).on('click', 'tbody tr', function (e) {
// Exclude clicks on any elements inside the last column (actions)
if ($(e.target).closest('td').index() !== $(this).children('td').length - 1) {
const id = $(this).data('id');
console.log('Ticket ID', id)
viewTicket(id);
}
});
</script>