nhance/app/Views/thz_list.php
2025-09-24 15:55:40 +05:30

715 lines
28 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>
.col-12 {
max-width: 98% !important;
}
.right-align-input {
text-align: right;
}
.text-custom {
font-weight: 400;
font-style: normal;
font-size: 11px;
line-height: 1.44;
letter-spacing: -0.02em;
}
</style>
<style>
.text-custom-grey{
font-size: 0.85em;
color: #6c757d !important;
}
table.dataTable td.wrap {
white-space: normal !important;
word-break: break-word;
}
</style>
<div class="col-12">
<div class="card">
<div class="card-body maincard">
<div class="row">
<div class="col-6" style="align-self: center;">
<p class="title-text font-color-black" style="position: relative;">Tickets </p>
</div>
</div>
<div>
<table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap text-custom-black text-custom app-datatable">
<thead class="app-table-head">
<tr>
<th>Ticket ID</th>
<th class="app-text-left">Name</th>
<th>Policy Number</th>
<th>Ticket Type</th>
<th>Subject</th>
<th>Status</th>
<th class="app-text-left">Assign To</th>
<th>Created At</th>
<th>Updated At</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="app-text-right"><?php echo $row['thz_id']; ?></td>
<td class="app-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="app-text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
? $row['policy_no']
: 'N/A'; ?>
</td>
<td class="app-text-center"><?php echo $row['ticket_type'] ? $row['ticket_type'] : '-'; ?></td>
<td class="app-text-center wrap" title="<?php echo htmlspecialchars($row['subject']); ?>">
<?php
$subject = $row['subject'] ? $row['subject'] : 'N/A';
echo (strlen($subject) > 50)
? htmlspecialchars(substr($subject, 0, 50)) . "..."
: htmlspecialchars($subject);
?>
</td>
<td class="app-text-center"><?php echo $row['status'] ? $row['status'] : '-' ; ?></td>
<td class="app-text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : '-'; ?></td>
<td class="app-text-left">
<?php if (!empty($row['created_at'])):
$cd = date("j F 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="app-text-left">
<?php if (!empty($row['updated_at'])):
$ud = date("j F 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 } ?>
</tbody>
</table>
<div>
</div>
</div>
</div><!-- end col -->
</div>
</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 app-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 app-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>
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 (name === "" || mobile === "" || email === "" || ticketType === "") {
toastr.warning('Please fill all required fields.', '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 > 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;
}
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();
var ticketsTable = $('#scroll-horizontal-datatable');
if (ticketsTable.length) {
ticketsTable.DataTable({
scrollX: true,
dom: "<'row'<'col-sm-2'f><'col-sm-10 text-right'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom"> Create New Ticket </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 ',
},
{
extend: 'excel',
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
exportOptions: {
orthogonal: 'sort'
},
className: 'app-btn-primary ',
}
]
}
],
paging: true,
pageLength: 25,
order: [[0, 'desc']]
});
} else {
console.error("Table Not found.");
}
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>