432 lines
18 KiB
PHP
432 lines
18 KiB
PHP
<style>
|
||
|
||
.notes-box {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #00aaff;
|
||
border-radius: 6px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.notes-box textarea {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
resize: none;
|
||
padding: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.icon-buttons {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.btn-icon {
|
||
background: #008b8b;
|
||
border: none;
|
||
color: white;
|
||
border-radius: 50%;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-icon i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.conversation-card{
|
||
border-radius: 15px !important;
|
||
box-shadow: 0 2px 4px 0 #00000040;
|
||
}
|
||
|
||
.card-scroll{
|
||
overflow-y:auto;
|
||
height:440px;
|
||
}
|
||
.recard-scroll{
|
||
overflow-y:auto;
|
||
height:295px;
|
||
}
|
||
|
||
.maincard{
|
||
margin-top:0 !important;
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
.conversation-card,
|
||
.conversation-card .card-header,
|
||
.conversation-card .card-body {
|
||
background: #F5FFFF !important;
|
||
}
|
||
|
||
.master-card{
|
||
border-radius: 15px !important;
|
||
box-shadow: 0 2px 4px 0 #00000040;
|
||
}
|
||
</style>
|
||
<style>
|
||
.related-ticket-card
|
||
.related-ticket-card .card-header,
|
||
.related-ticket-card .card-body {
|
||
background: #F5FFFF !important;
|
||
overflow-y:auto;
|
||
box-shadow: 0 2px 4px 0 #00000040;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
<div class="col-12">
|
||
<div class="card ">
|
||
<div class="card-body maincard">
|
||
|
||
<!-- Title -->
|
||
<div class="row" id="notes-title" style="padding-bottom: 10px;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Ticket ID-<?php echo $master[0]['thz_id']; ?></h4>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="row" id="notes-body">
|
||
|
||
<!-- Left Details -->
|
||
<div class="col-4" id="notes-body-left">
|
||
<div class="card master-card" style="background:#F5FFFF;">
|
||
<div class="card-header d-flex justify-content-between align-items-center" style="background:none; border:none;">
|
||
<h5 class="mb-0">Details</h5>
|
||
<a href="javascript:void(0);"
|
||
onclick="openEditTicket()">
|
||
<i class="mdi mdi-pencil"
|
||
title="Edit"
|
||
style="font-size:15px; color:#555; cursor:pointer; transition:0.2s;"
|
||
onmouseover="this.style.color='#02a8b5'; this.style.fontSize='17px';"
|
||
onmouseout="this.style.color='#555'; this.style.fontSize='15px';">
|
||
</i>
|
||
</a>
|
||
</div>
|
||
<div class="card-body card-scroll" style="padding-left: 27px !important; background:#F5FFFF;">
|
||
<div class="row mb-2 ml-o">
|
||
<div class="col-5">Ticket ID</div>
|
||
<div class="col-7 text-end"><?= $master[0]['thz_id'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Name</div>
|
||
<div class="col-7 text-end"><?= $master[0]['name'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Mobile</div>
|
||
<div class="col-7 text-end"><?= $master[0]['mobile'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Policy Number</div>
|
||
<div class="col-7 text-end"><?= $master[0]['policy_no'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Assigned To</div>
|
||
<div class="col-7 text-end"><?= $master[0]['assignee_name'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Status</div>
|
||
<div class="col-7 text-end"><?= $master[0]['status'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Ticket Type</div>
|
||
<div class="col-7 text-end"><?= $master[0]['ticket_type'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Subject</div>
|
||
<div class="col-7 text-end"><?= $master[0]['subject'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Message</div>
|
||
<div class="col-7 text-end"><?= $master[0]['message'];?></div>
|
||
</div>
|
||
<div class="row mb-2">
|
||
<div class="col-5">Related Tickets</div>
|
||
<div class="col-7 text-end">
|
||
<u class="text-warning">
|
||
<a href="javascript:void(0);"
|
||
class="text-warning"
|
||
data-toggle="modal"
|
||
data-target="#relatedTicketModal"
|
||
data-id="<?= $master[0]['created_by']; ?>">
|
||
View
|
||
</a>
|
||
</u>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- add more fields -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Conversation -->
|
||
|
||
<div class="col-8">
|
||
|
||
<!-- Conversation Card -->
|
||
<div class="card mb-3 conversation-card">
|
||
<div class="card-header border-0">
|
||
<h5 class="mb-0" style="font-size:15px;">Conversation</h5>
|
||
<hr/>
|
||
</div>
|
||
|
||
<div class="card-body pt-0 recard-scroll">
|
||
<?php if(!empty($notes)): ?>
|
||
<?php foreach($notes as $i => $conv): ?>
|
||
|
||
<!-- Top Row: Message + Badge -->
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<p class="mb-1 mr-4"><?= $conv['notes'] ?></p>
|
||
<!-- <?php if(!empty($conv['notes_by'])): ?>
|
||
<span class="badge bg-warning text-dark"><?= $conv['notes_by'] ?></span>
|
||
<?php endif; ?> -->
|
||
<?php if (!empty($conv['notes_type']) && $conv['notes_type'] === "Internal"): ?>
|
||
<span class="badge bg-warning text-dark"><?= $conv['notes_type'] ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- Bottom Row: Name + Date -->
|
||
<div class="d-flex justify-content-between small text-muted">
|
||
<span><i class="mdi mdi-account"></i> <?= $conv['name'] ?></span>
|
||
<span><?= date("j F Y h:i a", strtotime($conv['created_at'])) ?></span>
|
||
</div>
|
||
|
||
<?php echo $i < count($notes)-1 ? '<hr/>' : ''; ?>
|
||
|
||
<?php endforeach; ?>
|
||
<?php else: ?>
|
||
<div class="d-flex justify-content-center align-items-center">
|
||
<p class="text-center"><i>No Data Found</i></p>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Input Card -->
|
||
<div class="card">
|
||
<form id="conversationForm">
|
||
<input type="hidden" id="notes_type" name="notes_type">
|
||
<input type="hidden" id="thz_id" name="thz_id">
|
||
<input type="hidden" id="notes_by" name="notes_by" value="Staff">
|
||
<input type="hidden" id="created_by" name="created_by" value="<?= get_session_userid(); ?>">
|
||
<div class="notes-box">
|
||
<textarea class="form-control" id="notes" name="notes" placeholder="Write your notes here..."></textarea>
|
||
<div class="icon-buttons">
|
||
<!-- save btn means local - internal -->
|
||
<button type="button" class="btn-icon" onclick="submitConverstionTicket('Internal')"><i class="mdi mdi-content-save"></i></button>
|
||
<!-- mail btn means notify - external -->
|
||
<button type="button" class="btn-icon" onclick="submitConverstionTicket('External')"><i class="mdi mdi-email"></i></button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- /notes-body -->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="EditModal" 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="EditModalLabel">Update</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<input type="text" id="edit_thz_id" name="thz_id">
|
||
<input type="text" id="updated_by" name="updated_by" value="<?= get_session_userid(); ?>">
|
||
|
||
<div class="form-group col-md-12">
|
||
<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-12">
|
||
<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-12">
|
||
<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>
|
||
</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="relatedTicketModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content" style="border-radius:15px;">
|
||
|
||
<div class="modal-header" style="border-bottom-width:0;">
|
||
<h4 class="modal-title">Related Tickets</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body card-scroll" style="padding-top:5px!important;">
|
||
|
||
<?php foreach($related_tickets as $j => $rt): ?>
|
||
<div class="card related-ticket-card mb-3">
|
||
<div class="card-body" style="border-radius: 20px; padding:27px !important;">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<h5 class="mb-1"><?php echo $rt['ticket_type']; ?></h5>
|
||
<small>
|
||
<?php if (!empty($rt['created_at'])):
|
||
$cdt = new DateTime($rt['created_at']);
|
||
echo $cdt->format('d/m/Y') . "<span class='time'>" . $cdt->format('h:i a') . "</span>";
|
||
endif;
|
||
?></small>
|
||
</div>
|
||
<p class="mb-2"><?php echo $rt['subject']; ?></p>
|
||
<small><span style="color: green !important;">Status: </span><?php echo $rt['status']; ?></small>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<script>
|
||
|
||
$(document).ready(function() {
|
||
// Initialize select2
|
||
$("#ticket_type").select2();
|
||
$("#status").select2();
|
||
$("#assign_to").select2();
|
||
var form = document.getElementById('ticketForm');
|
||
form.reset();
|
||
|
||
var masterData = <?= json_encode($master[0]); ?>;
|
||
|
||
document.getElementById('edit_thz_id').value = masterData.thz_id;
|
||
document.getElementById('assign_to').value = masterData.assign_to;
|
||
document.getElementById('status').value = masterData.status;
|
||
document.getElementById('ticket_type').value = masterData.ticket_type;
|
||
|
||
document.getElementById('EditModalLabel').innerText = "Update Ticket: " + masterData.thz_id ;
|
||
|
||
});
|
||
|
||
|
||
function openEditTicket() {
|
||
|
||
var masterData = <?= json_encode($master[0]); ?>;
|
||
console.log(masterData);
|
||
|
||
document.getElementById('EditModalLabel').innerText = "Update Ticket: " + masterData.thz_id ;
|
||
|
||
var myModal = new bootstrap.Modal(document.getElementById('EditModal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function submitTicket() {
|
||
|
||
var form = document.getElementById("ticketForm");
|
||
var id = form.querySelector("[name='thz_id']").value;
|
||
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('ticketConversationList?return_type=web&thz_id=') ?>" + id;
|
||
} else {
|
||
toastr.error(response.message, 'error');
|
||
}
|
||
},
|
||
error: function(xhr) {
|
||
toastr.error("Something went wrong!", 'error');
|
||
console.error(xhr.responseText);
|
||
}
|
||
});
|
||
}
|
||
|
||
function submitConverstionTicket(notetype) {
|
||
|
||
document.getElementById("notes_type").value = notetype;
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
document.getElementById("thz_id").value = urlParams.get('thz_id');
|
||
var id = urlParams.get('thz_id');
|
||
var form = document.getElementById("conversationForm");
|
||
var formData = new FormData(form);
|
||
|
||
$.ajax({
|
||
url: "<?= base_url('ticketConversationSave') ?>",
|
||
type: "POST",
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
dataType: 'json',
|
||
success: function(response) {
|
||
if (response.status === "success") {
|
||
toastr.success(response.message, 'success');
|
||
form.reset();
|
||
window.location.href = "<?= base_url('ticketConversationList?return_type=web&thz_id=') ?>" + id;
|
||
} else {
|
||
toastr.error(response.message, 'error');
|
||
}
|
||
},
|
||
error: function(xhr) {
|
||
toastr.error("Something went wrong!", 'error');
|
||
console.error(xhr.responseText);
|
||
}
|
||
});
|
||
}
|
||
</script>
|