711 lines
31 KiB
PHP
711 lines
31 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;
|
||
}
|
||
|
||
.highlight {
|
||
border: 2px solid red;
|
||
background-color: #ffe6e6;
|
||
}
|
||
|
||
.column-header {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.form-section {
|
||
border: 1px solid #ccc;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.row-box {
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.addbtnStyle{
|
||
margin-left: 20px !important;
|
||
}
|
||
|
||
/* Modeal class */
|
||
.modal-content {
|
||
border-radius: 4px;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.modal-header {
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
color: #495057;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.policy-label {
|
||
font-weight: 500;
|
||
color: #495057;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.radio-option {
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
padding: 0.75rem 1rem;
|
||
margin-bottom: 0.5rem;
|
||
cursor: pointer;
|
||
background: #fff;
|
||
}
|
||
|
||
.radio-option:hover {
|
||
border-color: #007bff;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.radio-option.selected {
|
||
border-color: #007bff;
|
||
background: #e7f3ff;
|
||
}
|
||
|
||
.form-check {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-check-input {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.form-check-label {
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.modal-footer {
|
||
border-top: 1px solid #dee2e6;
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
|
||
.btn {
|
||
font-size: 0.9rem;
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
.dataTables_length label {height: 21px !important;}
|
||
/* Modeal class */
|
||
|
||
</style>
|
||
|
||
|
||
<div class="row" id="leads_list">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="margin-bottom:1rem;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Opportunities List</h4>
|
||
</div>
|
||
|
||
<div class="col-3" id="status_change" style="text-align: right; position: relative;top: 56px; left: 291px;">
|
||
<!-- <button type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" onclick="openLeadTypeAskModal();">Add</button> -->
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="table-responsive">
|
||
<table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="tickets-table">
|
||
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th><div class="column-header">S.No </div></th>
|
||
<th><div class="column-header">Opportunity Type </div></th>
|
||
<th><div class="column-header">Issuer </div></th>
|
||
<th><div class="column-header">Client Type </div></th>
|
||
<th><div class="column-header">Client / Branch </div></th>
|
||
<th><div class="column-header">Entity Type </div></th>
|
||
<th><div class="column-header">Branch Name </div></th>
|
||
<th><div class="column-header">Branch Code </div></th>
|
||
<th><div class="column-header">Contact Person Name </div></th>
|
||
<th><div class="column-header">Contact Person Mobile </div></th>
|
||
<th><div class="column-header">Policy Type </div></th>
|
||
<th><div class="column-header">Status </div></th>
|
||
<th><div class="column-header">Action </div></th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<?php if(isset($lead_data_list)) { ?>
|
||
<?php foreach($lead_data_list as $index => $row){ ?>
|
||
<tr>
|
||
<td class="text-center">
|
||
<?php echo $index + 1; ?>
|
||
<?php if($row['demography_file_status'] == "failed") { ?>
|
||
<a href="<?= base_url('util/getMemberDataExcelFileErrors?lead_id=').$row['id'] ?>"
|
||
class="mdi mdi-information-outline text-danger"
|
||
style="cursor: pointer; font-size: 16px"
|
||
data-toggle="tooltip"
|
||
data-placement="top"
|
||
title="Click to view the Demography File Error data" target="_blank">
|
||
</a>
|
||
<?php } ?>
|
||
</td>
|
||
<td><?php echo $lead_type[$row['lead_type']] ?? '-'; ?></td>
|
||
<td><?php echo $issuer[$row['issuer']] ?? '-'; ?></td>
|
||
<td><?php echo $client_type[$row['client_type']] ?? '-'; ?></td>
|
||
<td><?php echo $row['client_type'] == 2 ? ($row['client_name'] ?? '-') : (($row['client_short_name'] ?? '-') . ' - ' . ($row['branch_name'] ?? '-')); ?></td>
|
||
<td><?php echo $row['entity_type'] ?? '-'; ?></td>
|
||
<td><?php echo $row['branch_name'] ?? '-'; ?></td>
|
||
<td><?php echo $row['branch_code'] ?? '-'; ?></td>
|
||
<td><?php echo $row['contact_person_name'] ?? '-'; ?></td>
|
||
<td><?php echo $row['contact_person_mobile'] ?? '-'; ?></td>
|
||
<td><?php echo $row['policy_type'] ?? '-'; ?></td>
|
||
<td><?php echo $lead_status[$row['status']] ?? '-'; ?></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"
|
||
data-boundary="window"> <i class="mdi mdi-dots-horizontal"></i>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item btnEdit" data-id="<?= $row['id']; ?>" data-ft="<?= $row['lead_form_type']; ?>" onclick="getLeadsDataForEdit('<?= htmlspecialchars($row['id'], ENT_QUOTES) ?>', '<?= htmlspecialchars($row['lead_form_type'], ENT_QUOTES) ?>')">
|
||
<i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
|
||
</a>
|
||
<a href="<?= base_url('/rfq/list/').$row['id'] . '/' . 1; ?>" class="dropdown-item btnEdit2" data-id="<?= $row['id']; ?>">
|
||
<i class="mdi mdi-note-text mr-2 text-muted font-18 vertical-middle"></i>RFQ
|
||
</a>
|
||
<?php if(!in_array($row['status'], ['queued', 'rfq_created', 'rfq_sent'])) { ?>
|
||
<?php if(in_array(get_role_id(), [1, 5, 2, 3]) || in_array(BUSINESS_SUPPORT_TEAM_ID, user_team()) ) { ?>
|
||
<a href="<?= base_url('/rfq/list/').$row['id'] . '/' . 2; ?>" class="dropdown-item btnEdit3" data-id="<?= $row['id']; ?>">
|
||
<i class="mdi mdi-note-text mr-2 text-muted font-18 vertical-middle"></i>QCR
|
||
</a>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
<a class="dropdown-item btnHistory font-color-black"
|
||
data-id="<?= $row['id']; ?>"
|
||
title="Click to view Mail History">
|
||
<i class="mdi mdi-history mr-2 text-muted font-18 vertical-middle"></i>Email History
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } else { ?>
|
||
<tr>
|
||
<td colspan="14" class="text-center">No data available</td>
|
||
</tr>
|
||
<?php } ?>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
|
||
<div class="modal fade" id="New_Lead_modal" 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="myCenterModalLabel">Select Opportunity Type</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
|
||
<div class="radio-option selected" onclick="selectOption(this, 'lead_eb')">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="lead_form_type" id="lead_eb" value="1" checked>
|
||
<label class="form-check-label" for="lead_eb">EB</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="radio-option" onclick="selectOption(this, 'lead_non_eb')">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="lead_form_type" id="lead_non_eb" value="2">
|
||
<label class="form-check-label" for="lead_non_eb">Non-EB</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||
<button type="button" class="btn btn-primary" onclick="submitToRedirectLeadNewUrl(this)">Submit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade " id="EmailModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered modal-xl" style="max-width: 1140px !important;">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Email History</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body history-container" style="padding:11px !important;">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
// New menu
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const table = document.getElementById("tickets-table");
|
||
|
||
function createCustomDropdown(row) {
|
||
const originalDropdown = row.querySelector('.dropdown-menu');
|
||
if (!originalDropdown) return null;
|
||
|
||
const customDropdown = document.createElement('div');
|
||
customDropdown.className = 'custom-dropdown-menu';
|
||
|
||
// Clone the items but remove their original click handlers
|
||
const items = originalDropdown.querySelectorAll('.dropdown-item');
|
||
items.forEach(item => {
|
||
const newItem = item.cloneNode(true);
|
||
// Preserve the attributes but remove the onclick
|
||
newItem.removeAttribute('onclick');
|
||
customDropdown.appendChild(newItem);
|
||
});
|
||
|
||
return customDropdown;
|
||
}
|
||
|
||
let activeDropdown = null;
|
||
|
||
table.querySelectorAll("tbody tr").forEach(row => {
|
||
const customDropdown = createCustomDropdown(row);
|
||
if (!customDropdown) return;
|
||
|
||
document.body.appendChild(customDropdown);
|
||
|
||
row.addEventListener("click", function(event) {
|
||
|
||
// 1. CRITICAL CHECK: Stop propagation if the click came from the dropdown toggle itself.
|
||
if (event.target.closest('.dropdown-toggle')) {
|
||
event.stopPropagation();
|
||
|
||
// **IMPORTANT:** Since you're using a custom script, you need to
|
||
// manually trigger the logic for your custom detached dropdown here.
|
||
// The code below should run when the dropdown toggle is clicked:
|
||
const originalDropdown = event.target.closest('.btn-group').querySelector('.dropdown-menu');
|
||
if (originalDropdown) {
|
||
|
||
// This is the code that opens your custom dropdown
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
}
|
||
|
||
const rect = event.target.getBoundingClientRect();
|
||
|
||
customDropdown.style.display = 'block';
|
||
customDropdown.style.position = 'fixed';
|
||
customDropdown.style.left = `${rect.left}px`;
|
||
customDropdown.style.top = `${rect.bottom + 5}px`;
|
||
|
||
activeDropdown = customDropdown;
|
||
}
|
||
|
||
return; // Exit the row listener early
|
||
}
|
||
|
||
// 2. Ignore clicks on the entire action column (your existing, good check)
|
||
if (event.target.closest('td:last-child')) {
|
||
return;
|
||
}
|
||
|
||
// ... rest of your row logic for general row clicks ...
|
||
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
}
|
||
|
||
const rect = event.target.getBoundingClientRect();
|
||
|
||
customDropdown.style.display = 'block';
|
||
customDropdown.style.position = 'fixed';
|
||
customDropdown.style.left = `${rect.left}px`;
|
||
customDropdown.style.top = `${rect.bottom + 5}px`;
|
||
|
||
activeDropdown = customDropdown;
|
||
event.stopPropagation(); // Only needed if there is a parent handler
|
||
});
|
||
|
||
// Handle clicks on dropdown items
|
||
customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
console.log("##############");
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
// Get the data-id and other attributes from the original button
|
||
const originalItem = row.querySelector(`.dropdown-item[data-id="${this.getAttribute('data-id')}"]`);
|
||
|
||
// For edit functionality
|
||
if (this.classList.contains('btnEdit')) {
|
||
const id = this.getAttribute('data-id');
|
||
const lead_form_type = this.getAttribute('data-ft');
|
||
console.log('second drop lead_form_type', lead_form_type)
|
||
if (id) {
|
||
getLeadsDataForEdit(id, lead_form_type);
|
||
}
|
||
}else if (this.classList.contains('btnHistory')) {
|
||
let lead_id = this.getAttribute('data-id');
|
||
if(lead_id){ console.log("******** Clicked from td lead_id-", lead_id); getLeadsDataForMailHistory(lead_id); }
|
||
else{ console.log("******** Clicked from td but i don`t have lead_id"); }
|
||
|
||
}
|
||
else{
|
||
const onclickAttr = this.getAttribute('onclick');
|
||
if (onclickAttr) {
|
||
eval(onclickAttr);
|
||
}
|
||
}
|
||
|
||
// For RFQ links
|
||
const href = this.getAttribute('href');
|
||
if (href && href !== '#' && !this.classList.contains('btnEdit')) {
|
||
window.location.href = href;
|
||
}
|
||
|
||
// Close the dropdown
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener("click", function() {
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
});
|
||
|
||
document.addEventListener("click", function(e) {
|
||
if (e.target.closest(".btnHistory")) {
|
||
let lead_id = e.target.closest(".btnHistory").dataset.id;
|
||
console.log("******** in triple dot id available - " + lead_id);
|
||
getLeadsDataForMailHistory(lead_id);
|
||
}
|
||
else{ console.log("******** in triple dot but id not available"); }
|
||
});
|
||
|
||
});
|
||
|
||
// Datatable document ready
|
||
$(document).ready(function() {
|
||
|
||
var ticketsTable = $('#tickets-table');
|
||
|
||
if (ticketsTable.length) {
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
// dom: "<'row'<'col-sm-7'f><'col-sm-5 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
|
||
dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
"<'row'<'col-sm-12'tr>>" +
|
||
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
||
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
||
buttons: [
|
||
{
|
||
text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom"> Add </span>',
|
||
className: 'btn app-btn-primary mr-2',
|
||
action: function(e, dt, node, config) {
|
||
openLeadTypeAskModal();
|
||
}
|
||
},
|
||
{
|
||
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>',
|
||
title: 'Opportunity-List',
|
||
className: 'app-btn-primary ',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: `
|
||
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
|
||
_INPUT_
|
||
<i class="mdi mdi-magnify datatable-search-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
|
||
<i class="mdi mdi-close-circle datatable-clear-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 10, // Set default number of rows per page (optional)
|
||
// ordering: false,
|
||
});
|
||
} else {
|
||
console.error("Table not found.");
|
||
}
|
||
});
|
||
|
||
function openLeadTypeAskModal(){
|
||
var myModal = new bootstrap.Modal(document.getElementById('New_Lead_modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function submitToRedirectLeadNewUrl(){
|
||
|
||
console.log('function called')
|
||
|
||
// let Lead_type = $('#openLeadTypeAskModal').val()
|
||
let Lead_type = $('input[name="lead_form_type"]:checked').val();
|
||
console.log('Lead_type ', Lead_type)
|
||
let url = '<?=base_url('/util/getLeadNonEB/')?>' + Lead_type + '/0';
|
||
console.log('url ', url)
|
||
window.location.href = url;
|
||
|
||
}
|
||
|
||
function getLeadsDataForEdit(lead_id, lead_form_type){
|
||
|
||
console.log('lead_id', lead_id);
|
||
console.log('lead_form_type', lead_form_type);
|
||
let actual_lead_id = 0; // Hardcoded to 0 since this is an edit operation
|
||
//Here After Edit URL: /type / actual_lead_id (0) / lead_id
|
||
let url = '<?=base_url('/util/getLeadNonEB/')?>' + lead_form_type + '/' + actual_lead_id + '/' + lead_id;
|
||
// old URL
|
||
// let url = '<?=base_url('/util/getLeadNonEB/')?>' + lead_form_type + '/' + lead_id
|
||
console.log('url ', url)
|
||
window.location.href = url;
|
||
|
||
}
|
||
|
||
function getLeadsDataForMailHistory(lead_id){
|
||
|
||
console.log("******** Inside Fnz :", lead_id);
|
||
let url = '<?= base_url('/util/getLeadEmailHistory/') ?>' + lead_id;
|
||
console.log("******** Fetching:", url);
|
||
|
||
fetch(url, {
|
||
method: "GET",
|
||
headers: { "Accept": "application/json" }
|
||
})
|
||
.then(response => response.json())
|
||
.then(response => {
|
||
let container = document.querySelector(".history-container");
|
||
container.innerHTML = "";
|
||
if (response.status === "success" && response.data.length > 0) {
|
||
console.log("******** 1" + response.status);
|
||
let table = `
|
||
<div class="table-responsive">
|
||
<table data-custom-table-css="table" id="historytable" class="table table-striped mb-0 nowrap" cellspacing="0" id="tickets-table">
|
||
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th><div class="column-header">S.No </div></th>
|
||
<th><div class="column-header">From Mail </div></th>
|
||
<th><div class="column-header">To Mail </div></th>
|
||
<th><div class="column-header">BCC </div></th>
|
||
<th><div class="column-header">CC </div></th>
|
||
<th><div class="column-header">Type </div></th>
|
||
<th><div class="column-header">Status </div></th>
|
||
<th><div class="column-header">Date/Time </div></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
response.data.forEach((row, index) => {
|
||
let formattedDate = "-";
|
||
let statusValue = "-";
|
||
if (row.received_message) {
|
||
if (row.received_message.toLowerCase().includes("error")) {
|
||
statusValue = "Failed";
|
||
} else {
|
||
statusValue = "Success";
|
||
}
|
||
}
|
||
if (row.created_at) {
|
||
let dt = new Date(row.created_at);
|
||
let dateStr = dt.toLocaleDateString("en-GB", {
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric"
|
||
});
|
||
let timeStr = dt.toLocaleTimeString("en-US", {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
hour12: true
|
||
}).toLowerCase();
|
||
formattedDate = `${dateStr} ${timeStr}`;
|
||
}
|
||
let fromMails = "-";
|
||
if (row.from_mail) {
|
||
fromMails = row.from_mail
|
||
.split(",") // split by comma
|
||
.map(m => m.trim().replace(/^"|"$/g, "")) // trim + remove quotes at start/end
|
||
.filter(m => m !== "") // remo
|
||
.join("<br>"); // join with line break
|
||
}
|
||
let toMails = "-";
|
||
if (row.mail) {
|
||
toMails = row.mail
|
||
.split(",")
|
||
.map(m => m.trim().replace(/^"|"$/g, ""))
|
||
.filter(m => m !== "")
|
||
.join("<br>");
|
||
}
|
||
let ccMails = "-";
|
||
if (row.cc && row.cc.trim() !== "") {
|
||
ccMails = row.cc
|
||
.split(",")
|
||
.map(m => m.trim().replace(/^"|"$/g, ""))
|
||
.filter(m => m !== "")
|
||
.join("<br>");
|
||
}
|
||
let bccMails = "-";
|
||
if (row.bcc && row.bcc.trim() !== "") {
|
||
bccMails = row.bcc
|
||
.split(",")
|
||
.map(m => m.trim().replace(/^"|"$/g, ""))
|
||
.filter(m => m !== "")
|
||
.join("<br>");
|
||
}
|
||
|
||
|
||
table += `
|
||
<tr>
|
||
<td style="white-space: nowrap !important;">${index + 1}</td>
|
||
<td style="white-space: nowrap !important;">${fromMails}</td>
|
||
<td style="white-space: nowrap !important;">${toMails}</td>
|
||
<td style="white-space: nowrap !important;">${bccMails ? bccMails : '-'}</td>
|
||
<td style="white-space: nowrap !important;">${ccMails ? ccMails : '-'}</td>
|
||
<td style="white-space: nowrap !important;">${row.mail_type ? row.mail_type.toUpperCase() : '-'}</td>
|
||
<td style="white-space: nowrap !important;">${statusValue ? statusValue.toUpperCase() : '-'}</td>
|
||
<td style="white-space: nowrap !important;">${formattedDate}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
table += `</tbody></table>`;
|
||
container.innerHTML = table;
|
||
// show modal (if using Bootstrap 5)
|
||
} else {
|
||
|
||
container.innerHTML = `
|
||
<div class="d-flex justify-content-center align-items-center" style="height: 50vh; width:100%;">
|
||
<p class="text-center font-color-black"><i>${response.message ?? "No History Available"}</i></p>
|
||
</div>
|
||
`;
|
||
}
|
||
// Show modal always
|
||
new bootstrap.Modal(document.getElementById("EmailModal")).show();
|
||
|
||
})
|
||
.catch(error => {
|
||
console.log("******** 3" + error);
|
||
document.querySelector(".history-container").innerHTML = `
|
||
<div class="d-flex justify-content-center align-items-center" style="height: 50vh; width:100%;">
|
||
<p class="text-center font-color-black"><i>No Data Found</i></p>
|
||
</div>
|
||
`;
|
||
let EmailModal = new bootstrap.Modal(document.getElementById("EmailModal"));
|
||
EmailModal.show();
|
||
console.error(error);
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
function selectOption(element, radioId) {
|
||
// Remove selected class from all options
|
||
document.querySelectorAll('.radio-option').forEach(option => {
|
||
option.classList.remove('selected');
|
||
});
|
||
|
||
// Add selected class to clicked option
|
||
element.classList.add('selected');
|
||
|
||
// Check the corresponding radio button
|
||
document.getElementById(radioId).checked = true;
|
||
}
|
||
|
||
// Add click event to radio inputs directly
|
||
document.querySelectorAll('input[name="lead_form_type"]').forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
// Remove selected class from all options
|
||
document.querySelectorAll('.radio-option').forEach(option => {
|
||
option.classList.remove('selected');
|
||
});
|
||
|
||
// Add selected class to parent of checked radio
|
||
this.closest('.radio-option').classList.add('selected');
|
||
});
|
||
});
|
||
|
||
</script>
|