647 lines
23 KiB
PHP
647 lines
23 KiB
PHP
<style>
|
||
|
||
/* Force DataTable to allow rounded corners */
|
||
#scroll-horizontal-datatable {
|
||
border-collapse: separate !important;
|
||
border-spacing: 0 8px !important; /* space between rows */
|
||
width: 100%;
|
||
}
|
||
|
||
/* HEADER */
|
||
thead th {
|
||
background-color: #00999E;
|
||
color: #fff !important;
|
||
border-top: 0px solid #fff !important;
|
||
border-bottom: 0px solid #fff !important;
|
||
}
|
||
|
||
/* .table thead th {
|
||
vertical-align: bottom;
|
||
border-bottom: 2px solid #fff;
|
||
} */
|
||
|
||
/* Rounded header corners */
|
||
thead th:first-child {
|
||
border-top-left-radius: 15px !important;
|
||
border-bottom-left-radius: 15px !important;
|
||
}
|
||
thead th:last-child {
|
||
border-top-right-radius: 15px !important;
|
||
border-bottom-right-radius: 15px !important;
|
||
}
|
||
|
||
/* BODY ROWS */
|
||
tbody td {
|
||
background: #F5FFFF; /* apply bg to td not tr */
|
||
padding: 12px;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
/* Add shadow + spacing row "card" effect */
|
||
tbody tr {
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
/* Rounded corners for first + last cell of each row */
|
||
tbody tr td:first-child {
|
||
border-top-left-radius: 15px !important;
|
||
border-bottom-left-radius: 15px !important;
|
||
}
|
||
tbody tr td:last-child {
|
||
border-top-right-radius: 15px !important;
|
||
border-bottom-right-radius: 15px !important;
|
||
}
|
||
|
||
/* Hover effect */
|
||
#scroll-horizontal-datatable tbody tr:hover td {
|
||
background-color: #e0e0e0;
|
||
border-top-left-radius: 15px !important;
|
||
border-bottom-left-radius: 15px !important;
|
||
}
|
||
|
||
/* Search input with icon */
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
.dataTables_filter input {
|
||
padding-right: 30px;
|
||
background: url('https://cdn.jsdelivr.net/npm/@mdi/svg/svg/magnify.svg') no-repeat right 8px center;
|
||
background-size: 16px;
|
||
}
|
||
|
||
/* Optional: control first column width */
|
||
.table th:nth-child(1),
|
||
.table td:nth-child(1) {
|
||
max-width: 200px !important;
|
||
min-width: 100px !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
.col-12 {
|
||
|
||
max-width: 98% !important;
|
||
}
|
||
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
|
||
.dataTables_filter input {
|
||
padding-right: 30px; /* space for icon */
|
||
background: url('https://cdn.jsdelivr.net/npm/@mdi/svg/svg/magnify.svg') no-repeat right 8px center;
|
||
background-size: 16px;
|
||
}
|
||
|
||
.right-align-input {
|
||
text-align: right;
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
/* .table th:nth-child(1),
|
||
.table td:nth-child(1) {
|
||
max-width: 200px !important;
|
||
min-width: 100px !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
white-space: nowrap !important;
|
||
} */
|
||
|
||
#scroll-horizontal-datatable tbody tr:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
td .text-muted {
|
||
font-size: 0.85em; /* smaller than default */
|
||
color: #6c757d !important; /* Bootstrap muted grey */
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="padding-bottom: 10px;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Ticket List </h4>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table id="scroll-horizontal-datatable" class="table w-100 nowrap">
|
||
<thead>
|
||
<tr>
|
||
<th>Ticket Number</th>
|
||
<th>Name</th>
|
||
<th>Policy Number</th>
|
||
<th>Ticket Type</th>
|
||
<th>Subject</th>
|
||
<th>Status</th>
|
||
<th>Assign To</th>
|
||
<th>Created At</th>
|
||
<th>Updated At</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if (isset($ticket_data)) { ?>
|
||
<?php foreach($ticket_data as $index => $row){ ?>
|
||
|
||
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
|
||
<td><?php echo $row['thz_id']; ?></td>
|
||
<td>
|
||
<?php echo $row['name']; ?>
|
||
<span class="text-muted"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
|
||
<span class="text-muted"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
|
||
</td>
|
||
<td><?php echo $row['policy_no']; ?></td>
|
||
<td><?php echo $row['ticket_type']; ?></td>
|
||
<td><?php echo $row['subject']; ?></td>
|
||
<td><?php echo $row['status']; ?></td>
|
||
<td><?php echo $row['assignee_name']; ?></td>
|
||
<td>
|
||
<?php if (!empty($row['created_at'])):
|
||
$cdt = new DateTime($row['created_at']);
|
||
echo $cdt->format('d/m/Y') . "<br><span class='time'>" . $cdt->format('h:i a') . "</span>";
|
||
endif;
|
||
?>
|
||
</td>
|
||
<td>
|
||
<?php if (!empty($row['updated_at'])):
|
||
$udt = new DateTime($row['updated_at']);
|
||
echo $udt->format('d/m/Y') . "<br><span class='time'>" . $udt->format('h:i a') . "</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">
|
||
<div class="modal-content">
|
||
<form 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">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" 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" id="mobile"
|
||
name="mobile" placeholder="Enter Mobile"
|
||
pattern="^[0-9]{10}$" required
|
||
title="Please enter a valid 10-digit mobile number">
|
||
</div>
|
||
|
||
<div class="form-group col-md-1" style="padding:27.5px 0 0 0;">
|
||
<button type="button" class="btn btn-primary" style="padding: 0 10px !important; border-radius:13px;" onclick="getAutoFetchDetails()"><i class="mdi mdi-cached" style="font-size:24px; color:#fff !important;"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<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-6">
|
||
<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-6">
|
||
<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-6">
|
||
<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-6">
|
||
<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="ticket_type">Ticket Type<span class="text-danger">*</span></label>
|
||
<select class="form-control" id="ticket_type" name="ticket_type" required>
|
||
<option value="">Select Ticket Type</option>
|
||
<option value="Sales">Sales</option>
|
||
<option value="Service">Service</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
|
||
// 2,3,4 dropdown data'va varannum but those role means hide it -->
|
||
<?php if(in_array(get_role_id(), [2,3,4]) ) { ?>
|
||
<div class="form-group col-md-6">
|
||
<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(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>
|
||
<?php } ?>
|
||
|
||
<div class="form-group col-md-12">
|
||
<label for="subject">Subject</label>
|
||
<input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject">
|
||
</div>
|
||
|
||
<div class="form-group col-md-12">
|
||
<label for="message">Message</label>
|
||
<!-- <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="4"></textarea>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-ternary btn-border-radius" onclick="submitTicket()">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 btn-ternary btn-border-radius" onclick="updateAssignTo()">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
function openTicket(){
|
||
var form = document.getElementById('ticketForm');
|
||
form.reset();
|
||
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 submitTicket() {
|
||
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 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;
|
||
}
|
||
|
||
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);
|
||
|
||
$.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);
|
||
}
|
||
});
|
||
}
|
||
|
||
</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_personal || "";
|
||
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.policy_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].policy_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 || "";
|
||
}
|
||
</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();
|
||
});
|
||
|
||
// Datatable document ready
|
||
$(document).ready(function() {
|
||
|
||
var ticketsTable = $('#scroll-horizontal-datatable');
|
||
$('#scroll-horizontal-datatable_filter').prepend('<i class="mdi mdi-magnify"></i>');
|
||
|
||
if (ticketsTable.length) {
|
||
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
dom: "<'row'<'col-sm-6'f><'col-sm-6 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> Create New Ticket',
|
||
className: 'btn btn-ternary btn-border-radius text-white mr-2',
|
||
attr: { style: "color:#fff !important;" },
|
||
action: function(e, dt, node, config) {
|
||
openTicket();
|
||
}
|
||
},
|
||
{
|
||
extend: 'collection',
|
||
text: ' Export <i class="mdi mdi-menu-down"></i>',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: 'CSV',
|
||
title: 'ticket-List'
|
||
},
|
||
{
|
||
extend: 'excel',
|
||
text: ' Excel',
|
||
title: 'ticket-List',
|
||
exportOptions: {
|
||
orthogonal: 'sort'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: "_INPUT_",
|
||
searchPlaceholder: "Search..."
|
||
},
|
||
paging: true,
|
||
pageLength: 25,
|
||
ordering: false,
|
||
});
|
||
|
||
} else {
|
||
console.error("Table Not found.");
|
||
}
|
||
});
|
||
|
||
function viewTicket(ticket_id){
|
||
|
||
// $('.loader').fadeIn();
|
||
// $('.loader-mask').fadeIn();
|
||
|
||
let url = '<?= base_url('ticketConversationList?return_type=web¬es_ticket_type=Internal&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>
|