874 lines
33 KiB
PHP
874 lines
33 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%;
|
||
}
|
||
|
||
/* .table thead th {
|
||
vertical-align: bottom;
|
||
border-bottom: 2px solid #fff;
|
||
} */
|
||
|
||
|
||
/* Add shadow + spacing row "card" effect */
|
||
tbody tr {
|
||
/* box-shadow: 0 2px 5px rgba(0,0,0,0.08); */
|
||
}
|
||
|
||
/* 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: 50px !important;
|
||
min-width: 50px !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
.maincard{
|
||
margin-top:0 !important;
|
||
padding-top: 0 !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;
|
||
}
|
||
|
||
.text-custom {
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 11px;
|
||
line-height: 1.44;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
</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;
|
||
} */
|
||
|
||
.text-custom-grey{
|
||
font-size: 0.85em;
|
||
color: #6c757d !important;
|
||
}
|
||
|
||
table.dataTable td.wrap {
|
||
white-space: normal !important;
|
||
word-break: break-word;
|
||
}
|
||
|
||
table thead th {
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.btn-custom {
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
letter-spacing: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.table-custom th {
|
||
font-family: 'Poppins', sans-serif !important;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 13px;
|
||
line-height: 1.44;
|
||
letter-spacing: -0.02em;
|
||
text-align: center;
|
||
color: #000;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
|
||
/* Remove borders from all pagination buttons */
|
||
/* Pagination (p) */
|
||
.dataTables_wrapper .dataTables_paginate .paginate_button,
|
||
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
|
||
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
|
||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
|
||
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
|
||
padding: 2px 6px !important;
|
||
font-size: 12px !important;
|
||
background: transparent !important;
|
||
border-radius: 13px !important;
|
||
border: none !important;
|
||
}
|
||
|
||
.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
|
||
.dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
|
||
/* box-shadow: 0 0 0 0.15rem rgba(0,153,158,0.5) !important;
|
||
background: rgba(0,153,158,0.8) !important;*/
|
||
border-radius: 13px !important;
|
||
background-color: #F5FFFF;
|
||
border: none !important;
|
||
box-shadow: 0 0 0 0.15rem #F5FFFF;
|
||
}
|
||
|
||
|
||
|
||
/* Active page number */
|
||
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
|
||
color: #fff !important;
|
||
border-radius: 13px !important;
|
||
}
|
||
|
||
/* Inactive (not active) page numbers */
|
||
.dataTables_wrapper .dataTables_paginate .page-item:not(.active) .page-link {
|
||
border: 1px solid #fff !important;
|
||
border-radius: 13px !important;
|
||
}
|
||
|
||
|
||
|
||
/* Info text (i) */
|
||
.dataTables_info {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.form-control {
|
||
background-color: #ECECEC !important;
|
||
border: 1px solid #ccc; /* optional */
|
||
/* color: #000; keep text readable */
|
||
}
|
||
|
||
.form-control:focus {
|
||
background-color: #ECECEC !important; /* keep same color on focus */
|
||
box-shadow: none; /* remove blue glow */
|
||
}
|
||
|
||
/* Select2 box */
|
||
.select2-container .select2-selection--single {
|
||
background-color: #ECECEC !important;
|
||
border: 1px solid #ccc !important;
|
||
height: 38px !important;
|
||
}
|
||
|
||
/* Text inside */
|
||
.select2-container .select2-selection__rendered {
|
||
line-height: 36px !important;
|
||
}
|
||
|
||
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
|
||
background-color: #00999E !important;
|
||
}
|
||
|
||
|
||
|
||
</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 app-font-family font-color-black" style="position: relative;">Tickets </p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<table id="scroll-horizontal-datatable" class="table w-100 nowrap text-custom-black text-custom app-font-family 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 app-font-family" 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 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 app-font-family 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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-font-family" 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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-font-family" 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,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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-font-family">
|
||
<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 app-btn-border-radius mr-2 " onclick="resetTicket()">Reset</button>
|
||
<button type="button" class="btn app-btn-secondary app-btn-border-radius" onclick="submitTicket()">Save</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal fade app-font-family" 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 app-btn-border-radius app-font-family" 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() {
|
||
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);
|
||
|
||
$.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_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="app-font-family btn-custom"> Create New Ticket </span>',
|
||
className: 'btn app-btn-primary app-btn-border-radius mr-2',
|
||
action: function(e, dt, node, config) {
|
||
openTicket();
|
||
}
|
||
},
|
||
{
|
||
extend: 'collection',
|
||
text: '<span class="app-font-family btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
|
||
className: 'btn app-btn-secondary app-btn-border-radius',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: '<i class="mdi mdi-file-delimited " ></i><span class=" app-font-family btn-custom"> CSV </span>',
|
||
title: 'Tickets',
|
||
className: 'app-btn-primary ',
|
||
},
|
||
{
|
||
extend: 'excel',
|
||
text: '<i class="mdi mdi-file-excel " ></i><span class=" app-font-family btn-custom"> EXCEL </span>',
|
||
title: 'Tickets',
|
||
exportOptions: {
|
||
orthogonal: 'sort'
|
||
},
|
||
className: 'app-btn-primary ',
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: "_INPUT_",
|
||
searchPlaceholder: "Search...",
|
||
paginate: {
|
||
previous: "◄",
|
||
next: "►"
|
||
}
|
||
},
|
||
paging: true,
|
||
pageLength: 25,
|
||
});
|
||
|
||
} 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>
|