630 lines
26 KiB
PHP
630 lines
26 KiB
PHP
<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;
|
||
}
|
||
|
||
.right-align-input {
|
||
text-align: right;
|
||
}
|
||
|
||
.addbtnStyle {
|
||
margin-left: 20px !important;
|
||
}
|
||
|
||
.custom-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
background-color: #ffffff !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
border-radius: 0.25rem;
|
||
padding: 0.5rem 0;
|
||
min-width: 10rem;
|
||
z-index: 9999;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.custom-dropdown-menu .dropdown-item {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
padding: 0.5rem 1rem !important;
|
||
color: #212529 !important;
|
||
text-decoration: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.custom-dropdown-menu .dropdown-item:hover {
|
||
background-color: #f8f9fa !important;
|
||
color: #16181b !important;
|
||
cursor: pointer !important;
|
||
}
|
||
</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;">Mail Template List </h4>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table id="scroll-horizontal-datatable" class="table w-100 nowrap">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th>Template Name</th>
|
||
<th>Policy Type</th>
|
||
<th>Trigger Type</th>
|
||
<th>Mail Send Type</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if (isset($ticket_data)) { ?>
|
||
<?php foreach ($ticket_data as $index => $row) { ?>
|
||
<tr>
|
||
<td> <?php echo $row['template_name'] ?? ""; ?>
|
||
<i class="fe-alert-circle"
|
||
style="color: #000;"
|
||
aria-hidden="true"
|
||
data-toggle="tooltip"
|
||
data-placement="top"
|
||
title="<?php echo "Status : ". ($row['tool_tip'] ?? ''); ?>"></i>
|
||
|
||
</td>
|
||
|
||
<td><?php echo $ticket_type[$row['ticket_type']] ?? ""; ?></td>
|
||
<td><?php echo $trigger_type[$row['trigger_type']] ?? ""; ?></td>
|
||
<td><?= $row['is_auto_mail'] == 1 ? 'Auto' : "Manual" ?></td>
|
||
<td>
|
||
<div class="btn-group dropdown">
|
||
<a href="javascript: void(0);"
|
||
class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"
|
||
aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="#"
|
||
onclick="getMailTemplateData(<?= $row['id'] ?>)"><i
|
||
class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
|
||
<a class="dropdown-item" onclick="deleteTemplate(<?= $row['id'] ?>)"><i
|
||
class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="new_mail_template" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||
aria-hidden="true" aria-modal="true" data-backdrop="static">
|
||
<div class="modal-dialog modal-full-width">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="myLargeModalLabel">Add New Template<span id="nameOfThePolicy"></span></h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="text-center" id="no_data"></div>
|
||
<form role="form" class="parsley-examples" method="post" id="ticket_mail_editor_modal"
|
||
enctype="multipart/form-data" novalidate>
|
||
<div class="form-group">
|
||
|
||
<div class="form-row">
|
||
|
||
<div class="form-group col-md-4">
|
||
<label for="emp_code">Template Name</label>
|
||
<input type="text" id="template_name" name="template_name" class="form-control"
|
||
placeholder="Template Name" required>
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<label for="emp_code">Policy Type</label>
|
||
<select class="form-control" id="policy_type" name="ticket_type" required>
|
||
<option value="">Select Policy Type</option>
|
||
<?php
|
||
if (isset($policy_type) && count($policy_type)) {
|
||
foreach ($policy_type as $key => $value) {
|
||
echo "<option value=" . $key . ">" . $value . "</option>";
|
||
}
|
||
}
|
||
?>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<label for="trigger_type">Trigger Type</label>
|
||
<select class="form-control" id="trigger_type" name="trigger_type" required>
|
||
<option value="">Select status</option>
|
||
<?php
|
||
if (isset($trigger_type) && count($trigger_type)) {
|
||
foreach ($trigger_type as $key => $value) {
|
||
echo "<option value=" . $key . ">" . $value . "</option>";
|
||
}
|
||
}
|
||
?>
|
||
</select> <input id="primaryKey" type="hidden">
|
||
</div>
|
||
|
||
<div class="form-group col-md-2">
|
||
<div>
|
||
<div id="statusSwitchWrapper" class="dt-switch-wrapper"
|
||
style="padding-top: 40px;padding-left: 10px;">
|
||
<div class="custom-control custom-switch" style="text-align: left;">
|
||
<input type="checkbox" class="custom-control-input" id="statusSwitch">
|
||
<label class="custom-control-label" for="statusSwitch">Auto Mail</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="claim_status_for_template">Claim Status</label>
|
||
<input type="text" readonly id="claim_status_for_template" class="form-control" />
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="template_subject">Subject</label>
|
||
<input type="text" id="template_subject" name="subject" class="form-control"
|
||
placeholder="Subject" required>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<!-- <textarea class="form-control" rows="5" placeholder="Enter Mail Content"></textarea> -->
|
||
<div class="form-row" id="rac_rate_dropdown">
|
||
<div class="form-group col-md-12">
|
||
<select id="ticket_mail_customButton" class="form-control"
|
||
style="border:none;right: 6px;width: auto;position: absolute;z-index: 1;top: 17px;height: 32px;float: right;">
|
||
<option value="">PlaceHolders</option>
|
||
<?php foreach ($placeHolders as $key => $value): ?>
|
||
<?php // if($value == 'member_name' || $value == 'member_mobile' || $value == 'nhance_logo' || $value == 'client_logo' || $value == 'app_link' || $value == 'client_name'){
|
||
?>member_mobile
|
||
<?php $valueChange = str_replace('_', ' ', $value);
|
||
$valueChange = ucwords($valueChange); ?>
|
||
<option value="<?php echo $key; ?>"><?php echo $valueChange; ?></option>
|
||
</option>
|
||
<?php //}
|
||
?>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="ticket_mail_editor" name="content" style="height: 300px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group text-right m-b-0">
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
|
||
id="btnGridSubmit_2">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<!-------------------------------------------------------------------------------------------------->
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
});
|
||
</script>
|
||
<script>
|
||
// Datatable document ready
|
||
$(document).ready(function() {
|
||
|
||
var ticketsTable = $('#scroll-horizontal-datatable');
|
||
|
||
if (ticketsTable.length) {
|
||
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
dom: "<'row'<'col-sm-6'f><'col-sm-6 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: 'Add Template',
|
||
className: 'buttons-html5 addbtnStyle',
|
||
action: function(e, dt, node, config) {
|
||
openModal()
|
||
}
|
||
}],
|
||
language: {
|
||
search: "_INPUT_",
|
||
searchPlaceholder: "Search..."
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 25, // Set default number of rows per page (optional)
|
||
ordering: false,
|
||
});
|
||
} else {
|
||
console.error("Table atet found.");
|
||
}
|
||
var toolbar = "bold,italic,strikethrough,|,superscript,subscript,|,align,";
|
||
const editorConfig = {
|
||
buttons: toolbar.concat(['fontsize']),
|
||
fontsize: [8, 10, 12, 14, 16, 18, 20, 22, 24], // Customize font sizes
|
||
showPlaceholder: false,
|
||
toolbarButtonSize: 'small',
|
||
toolbarAdaptive: false,
|
||
saveHeightInStorage: true,
|
||
minHeight: 400,
|
||
extraButtons: [{
|
||
name: 'info',
|
||
iconURL: '<?= base_url() . "public"; ?>/assets/images/image-solid.svg', // Replace with the actual icon URL
|
||
exec: function(editor) {
|
||
const fileInput = document.getElementById("Question_title_fileInput");
|
||
fileInput.click();
|
||
},
|
||
}, ],
|
||
};
|
||
|
||
const editor = Jodit.make("#ticket_mail_editor", editorConfig);
|
||
|
||
let lastActiveField = null;
|
||
|
||
// Track last active input field
|
||
$("#template_subject").on("focus", function() {
|
||
lastActiveField = this;
|
||
});
|
||
|
||
// Track Jodit editor focus separately
|
||
editor.events.on("focus", function() {
|
||
lastActiveField = editor;
|
||
});
|
||
|
||
document.addEventListener('change', function(event) {
|
||
var target = event.target;
|
||
if (target.matches('#ticket_mail_customButton')) {
|
||
let placeholderValue = $(target).val();
|
||
if (!placeholderValue) return;
|
||
|
||
if (lastActiveField) {
|
||
if (lastActiveField.id === "template_subject") {
|
||
insertAtCursor(lastActiveField, placeholderValue);
|
||
} else {
|
||
editor.selection.insertHTML(placeholderValue);
|
||
}
|
||
}
|
||
|
||
$(target).val('');
|
||
}
|
||
});
|
||
|
||
function insertAtCursor(input, textToInsert) {
|
||
if (document.selection) {
|
||
input.focus();
|
||
var sel = document.selection.createRange();
|
||
sel.text = textToInsert;
|
||
} else if (input.selectionStart || input.selectionStart === 0) {
|
||
let startPos = input.selectionStart;
|
||
let endPos = input.selectionEnd;
|
||
input.value = input.value.substring(0, startPos) + textToInsert + input.value.substring(endPos,
|
||
input.value.length);
|
||
input.selectionStart = input.selectionEnd = startPos + textToInsert.length;
|
||
} else {
|
||
input.value += textToInsert;
|
||
}
|
||
}
|
||
|
||
|
||
$('.close').click(function() {
|
||
$('#template_subject').val('');
|
||
$('#template_name').val('');
|
||
$('#primaryKey').val('');
|
||
$('#policy_type').val('').change();
|
||
$('#trigger_type').val('').change();
|
||
editor.setEditorValue('');
|
||
$('#primaryKey').val(null);
|
||
$('#statusSwitch').prop('checked', false);
|
||
|
||
})
|
||
$('#ticket_mail_editor_modal').submit(function(event) {
|
||
|
||
event.preventDefault();
|
||
let isValid = true;
|
||
$('#ticket_mail_editor_modal [required]').each(function() {
|
||
if (!this.value.trim()) {
|
||
isValid = false;
|
||
$(this).addClass('is-invalid'); // Add a red border for visibility
|
||
} else {
|
||
$(this).removeClass('is-invalid');
|
||
}
|
||
});
|
||
|
||
if (!isValid) {
|
||
toastr.error('Please fill all required fields.', 'Validation Error');
|
||
return; // Prevent submission
|
||
}
|
||
var joditEditor = editor;
|
||
if (joditEditor) {
|
||
var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
|
||
var formData = $(this).serializeArray();
|
||
formData.push({
|
||
name: 'mail_content',
|
||
value: mailContent
|
||
});
|
||
// formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
|
||
var isAutoMailEnabled = $('#statusSwitch').is(':checked') ? 1 : 0;
|
||
formData.push({
|
||
name: 'is_auto_mail',
|
||
value: isAutoMailEnabled
|
||
});
|
||
var primary_key = $('#primaryKey').val();
|
||
if (primary_key != null && primary_key != '') {
|
||
formData.push({
|
||
name: 'id',
|
||
value: primary_key
|
||
});
|
||
}
|
||
$('.loader').fadeIn();
|
||
$('.loader-mask').fadeIn();
|
||
var form_action = '<?= base_url("ticket/crud_mail_template/1") ?>';
|
||
$.ajax({
|
||
url: form_action,
|
||
type: "POST",
|
||
data: formData,
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.status == true) {
|
||
$('#new_mail_template').find('.close').click();
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
toastr.success('Template saved successfully!', 'Success');
|
||
location.reload();
|
||
} else if (res.status == false) {
|
||
toastr.error('Failed to Save Data', 'error');
|
||
}
|
||
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error(xhr.responseText);
|
||
console.error(status, error);
|
||
setTimeout(function() {
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
toastr.error('Something Wrong!', 'warning');
|
||
}, 1000);
|
||
}
|
||
});
|
||
} else {
|
||
console.error("Jodit editor instance is not defined.");
|
||
}
|
||
})
|
||
|
||
});
|
||
|
||
function openModal() {
|
||
var myModal = new bootstrap.Modal(document.getElementById('new_mail_template'));
|
||
myModal.show();
|
||
}
|
||
|
||
function deleteTemplate(id) {
|
||
const url = '<?= base_url("ticket/crud_mail_template/3") ?>';
|
||
const data = {
|
||
id: id
|
||
}; // Ensure data is passed as an object
|
||
|
||
Swal.fire({
|
||
title: "Are you sure?",
|
||
text: "You need to remove this template.",
|
||
icon: "info",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3085d6",
|
||
confirmButtonText: "Yes",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
$('.loader').fadeIn();
|
||
$('.loader-mask').fadeIn();
|
||
$.ajax({
|
||
url: url,
|
||
type: "POST",
|
||
data: data,
|
||
success: function(res) {
|
||
if (res.status === true) {
|
||
location.reload();
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
toastr.success('Template Deleted successfully!', 'Success');
|
||
} else if (res.status === false) {
|
||
toastr.error('Failed to Delete Template', 'Error');
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error(xhr.responseText);
|
||
console.error(status, error);
|
||
setTimeout(function() {
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
toastr.error('Something went wrong!', 'Warning');
|
||
}, 1000);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
function getMailTemplateData(id) {
|
||
const template_name = 'new_mail_template';
|
||
$('.loader').fadeIn();
|
||
$('.loader-mask').fadeIn();
|
||
|
||
var form_action = '<?= base_url("ticket/crud_mail_template/2") ?>';
|
||
var data = {
|
||
id: id
|
||
};
|
||
|
||
$.ajax({
|
||
url: form_action,
|
||
type: "POST",
|
||
data: data,
|
||
success: function(res) {
|
||
console.log('get Mail Template Data', res);
|
||
if (res) {
|
||
if (res.status == true) {
|
||
// Open the modal
|
||
openModal();
|
||
|
||
// Populate the form fields
|
||
$('#template_subject').val(res.data.subject);
|
||
$('#template_name').val(res.data.template_name);
|
||
$('#primaryKey').val(res.data.id);
|
||
$('#policy_type').val(res.data.ticket_type).change();
|
||
$('#trigger_type').val(res.data.trigger_type).change();
|
||
$('#claim_status_for_template').val(res.data.tool_tip);
|
||
$('.jodit-wysiwyg').html(res.data.mail_content);
|
||
|
||
// Set the auto mail switch
|
||
if (res.data.is_auto_mail == 1) {
|
||
$('#statusSwitch').prop('checked', true);
|
||
} else {
|
||
$('#statusSwitch').prop('checked', false);
|
||
}
|
||
|
||
// Populate any additional fields if necessary, like placeholders
|
||
// Assuming `placeholders` is an array in the response
|
||
if (res.placeholders) {
|
||
res.placeholders.forEach(function(placeholder) {
|
||
// You can populate any dropdown or field as required
|
||
$('#ticket_mail_customButton').val(placeholder);
|
||
});
|
||
}
|
||
} else {
|
||
toastr.error('Data Not Found', 'error');
|
||
}
|
||
}
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error(xhr.responseText);
|
||
console.error(status, error);
|
||
setTimeout(function() {
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
toastr.warning('Something Went Wrong!', 'warning');
|
||
}, 1000);
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const table = document.getElementById("scroll-horizontal-datatable");
|
||
|
||
// Create custom dropdown
|
||
function createCustomDropdown(row) {
|
||
// Get the original dropdown items
|
||
const originalDropdown = row.querySelector('.dropdown-menu');
|
||
if (!originalDropdown) return null;
|
||
|
||
// Create new dropdown with proper background and spacing
|
||
const customDropdown = document.createElement('div');
|
||
customDropdown.className = 'custom-dropdown-menu';
|
||
|
||
// Copy inner content while maintaining icon alignment
|
||
customDropdown.innerHTML = originalDropdown.innerHTML;
|
||
|
||
return customDropdown;
|
||
}
|
||
|
||
let activeDropdown = null;
|
||
|
||
// Add click event listener to rows
|
||
table.querySelectorAll("tbody tr").forEach(row => {
|
||
const customDropdown = createCustomDropdown(row);
|
||
if (!customDropdown) return;
|
||
|
||
document.body.appendChild(customDropdown);
|
||
|
||
row.addEventListener("click", function(event) {
|
||
// Ignore clicks on the action column
|
||
if (event.target.closest('td:last-child')) {
|
||
return;
|
||
}
|
||
|
||
// Hide any active dropdown
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
}
|
||
|
||
// Get click position
|
||
const rect = event.target.getBoundingClientRect();
|
||
|
||
// Position the dropdown with some offset
|
||
customDropdown.style.display = 'block';
|
||
customDropdown.style.position = 'fixed';
|
||
customDropdown.style.left = `${rect.left}px`;
|
||
customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
|
||
|
||
// Set as active dropdown
|
||
activeDropdown = customDropdown;
|
||
|
||
event.stopPropagation();
|
||
});
|
||
|
||
// Preserve click handlers and add auto-close
|
||
customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
const onclickAttr = this.getAttribute('onclick');
|
||
if (onclickAttr) {
|
||
eval(onclickAttr);
|
||
}
|
||
|
||
const href = this.getAttribute('href');
|
||
if (href && href !== '#') {
|
||
window.location.href = href;
|
||
}
|
||
|
||
// Close the dropdown after handling the click
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
|
||
e.stopPropagation();
|
||
});
|
||
});
|
||
});
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener("click", function() {
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
});
|
||
});
|
||
</script>
|