You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1807 lines
75 KiB

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>
.custom-width1 {
width: 140px; /* Adjust the width as needed */
}
.custom-width2 {
width: 200px; /* Adjust the width as needed */
}
.custom-width3 {
width: 100px;
}
table td {
text-align: center;
}
#campaignTable {
display: none;
}
.modal-body {
max-height: 70vh;
overflow-y: auto; /* Enables vertical scrolling */
overflow-x: hidden; /* Hides horizontal scrolling */
padding-right: 15px; /* Prevents content cutoff */
}
</style>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrapper">
<!-- header top menu Start -->
<header th:replace="~{fragments/modules/base/header :: header}"></header>
<!-- header top menu end -->
<div class="page-wrap">
<!--=============== Left Menu side Start ================-->
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<!--=============== Left side End ================-->
<div class="main-content">
<div class="container-fluid">
<div class="page-header mb-2">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="fas fa-headset bg-blue"></i>
<div class="d-inline">
<h5>Agent's Campaign</h5>
<span>1913 Agent's Campaign</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/gcc/index"><i
class="ik ik-home"></i></a></li>
<li class="breadcrumb-item" aria-current="page">1913
Campaign</li>
<li class="breadcrumb-item active" aria-current="page">Agents
Campaign</li>
</ol>
</nav>
</div>
</div>
</div>
<h4 class="h4 text-right text-mute" style="font-size: 12px;">
Auto refresh in <font id="refresh-countdown">00</font> seconds
</h4>
<div class="row">
<div class="col-md-12 mt-2">
<div class="card">
<div class="card-block">
<div class="page-header-title">
<h4 style="margin: 0; font-weight: bold;" class="text-center">
<span th:text="${agent_name}"></span>' s Campaign
</h4>
<div
class="mt-2 d-flex justify-content-between align-items-center">
<h5 style="margin: 0; font-weight: bold; font-style: italic;">Campaign
List</h5>
<button type="button" class="btn btn-primary" id="refresh">
<i class="ik ik-refresh-ccw"></i>Refresh
</button>
</div>
<hr>
</div>
<div>
<table id="Agenttask"
class="table table-striped table-bordered table-hover dataTable"
role="grid" style="width: 99%;">
<thead class="thead-dark">
<tr role="row">
<th class="text-center no-sort">S.No</th>
<th class="text-center">Category</th>
<th class="text-center">CampaignName</th>
<th class="text-center">Calls Assigned</th>
<th class="text-center">Calls Completed</th>
<th class="text-center">Calls Pending</th>
<!-- <th class="text-center">C Date</th> -->
</tr>
</thead>
<tbody>
<tr th:each="agentsCampaign, iterStat : ${agentsCampaigns}">
<td th:text="${iterStat.index + 1}" class="text-center"></td>
<!-- Serial number -->
<td th:text="${agentsCampaign['category_name']}"
class="text-center"></td>
<!-- Category name -->
<td th:text="${agentsCampaign['campaign_name']}"
class="text-center"></td>
<!-- Campaign name -->
<td th:text="${agentsCampaign['calls_assigned']}"
class="text-center"></td>
<td th:text="${agentsCampaign['complete_count']}"
class="text-center"></td>
<td th:text="${agentsCampaign['pending_count']}"
class="text-center"></td>
<!-- <td th:text="${agentsCampaign['created_date']}" class="text-center"></td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12" id="tablesforcalls" style="display: block;">
<div class="card">
<div class="card-block">
<div class="page-header-title">
<div class="col-md-12">
<div class="row">
<button id="primaryButton" class="btn btn-success">Non-Processed
Calls</button>
<button id="secondaryButton"
class="btn btn-secondary btn-custom ml-3">Processed
Calls</button>
</div>
</div>
<hr>
</div>
<div>
<div class="table-responsive" id="primaryTable"
style="display: block;">
<table id="AgentDatatable"
class="table table-bordered table-hover dataTable"
role="grid">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th class="text-center">Name</th>
<th class="text-center">MobileNumber</th>
<th class="text-center">ViewDetails</th>
<th class="text-center custom-width1">Callstatus</th>
<th class="text-center custom-width2">Remarks</th>
<th class="text-center">Submit</th>
</tr>
</thead>
<tbody>
<!-- Loop through the agentsCampaignsList -->
<th:block th:each="item, stat : ${agentsCampaignsList}">
<tr>
<td th:text="${stat.index + 1}"></td>
<!-- S.No (Index + 1) -->
<td class="text-center" th:text="${item.field_1}"></td>
<!-- Name -->
<td class="text-center" th:text="${item.field_2}"></td>
<!-- Address -->
<!-- View Details Button -->
<!-- <td class="text-center">
<button class="btn btn-primary">View</button>
</td>-->
<!-- View Details Button -->
<td class="text-center">
<button class="btn btn-primary view-details"
th:data-categoryid="${item.category_id}"
th:data-campaignid="${item.campaign_id}"
th:data-agentid="${item.agent_id}"
th:data-dataid="${item.data_id}" data-toggle="modal"
data-target="#campaignModal">View</button>
</td>
<!-- <td class="text-center">
<button class="btn btn-primary questionview-details"
th:data-categoryid="${item.category_id}"
th:data-cmpaignid="${item.campaign_id}"
th:data-agentid="${item.agent_id}"
th:data-dataid="${item.data_id}"
data-toggle="modal"
data-target="#questionCampaignView">
View
</button>
</td>-->
<!-- Action Dropdown -->
<td class="text-center"><select
class="form-control action-dropdown"
th:id="'callStatusDropdown-' + ${stat.index}"
name="action">
<option value="">Select Call Status</option>
</select></td>
<!-- <td class="text-center"><select
class="form-control form-control-sm action-select action-dropdown">
<option value="Select Call Status" selected>Select Call Status</option>
<option th:each="status : ${CampActions}"
th:value="${status.call_status}"
th:text="${status.call_status}"></option>
</select>
</td> -->
<!-- Remarks Textarea -->
<td class="text-center"><textarea
class="form-control" name="remarks" id="remarks"
th:text="${item.remarks}"></textarea></td>
<td class="text-center">
<button class="btn btn-primary submit-button submitid"
th:id="'submit-btn-' + ${stat.index}"
th:data-categoryid="${item.category_id}"
th:data-campaignid="${item.campaign_id}"
th:data-agentid="${item.agent_id}"
th:data-dataid="${item.data_id}"
th:onclick="|submitAction('${item.data_id}', '${stat.index}', '${item.agent_id}', '${item.campaign_id}')|">
Submit</button>
</td>
</tr>
</th:block>
</tbody>
</table>
</div>
</div>
<div class="table-responsive" id="secondaryTable"
style="display: none;">
<table id="AgentDatatable1"
class="table table-bordered table-hover dataTable"
role="grid">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th class="text-center">Name</th>
<th class="text-center">MobileNumber</th>
<th class="text-center">ViewDetails</th>
<th class="text-center custom-width1">Callstatus</th>
<th class="text-center custom-width2">Remarks</th>
</tr>
</thead>
<tbody>
<!-- Loop through the agentsCampaignsList -->
<th:block th:each="item, stat : ${agentsCampaignsList1}">
<tr>
<td th:text="${stat.index + 1}"></td>
<!-- S.No (Index + 1) -->
<td class="text-center" th:text="${item.field_1}"></td>
<!-- Name -->
<td class="text-center" th:text="${item.field_2}"></td>
<!-- Address -->
<td class="text-center">
<button class="btn btn-primary view-details1"
th:data-categoryid="${item.category_id}"
th:data-campaignid="${item.campaign_id}"
th:data-agentid="${item.agent_id}"
th:data-dataid="${item.data_id}" data-toggle="modal"
data-target="#campaignModal2">View</button>
</td>
<td th:text="${item.call_status}"></td>
<!-- Remarks Textarea -->
<td class="text-center"><textarea
class="form-control" name="remarks" id="remarks"
th:text="${item.remarks}" readonly></textarea></td>
</tr>
</th:block>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12" id="tablesforpendingcalls"
style="display: none;">
<div class="card">
<div class="card-block">
<div class="page-header-title">
<h5 style="margin: 0; font-weight: bold;">
<span id="campaign-names-display"
style="font-weight: bold; color: blue; margin-right: 5px;"></span>-
Further Calls List
</h5>
<hr>
</div>
<div>
<table id="Pendingtasktable"
class="table table-bordered table-hover dataTable"
role="grid">
<thead class="thead-dark">
<tr role="row">
<th>S.No</th>
<th class="text-center">Name</th>
<th class="text-center">Mobile number</th>
<th class="text-center">ViewDetails</th>
<th class="text-center custom-width1">Callstatus</th>
<th class="text-center custom-width2">Remarks</th>
<th class="text-center">Send Message</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
<!-- <div class="modal fade" id="CampaignView" tabindex="-1"
role="dialog" aria-labelledby="CampaignView"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Campaign Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="CampaignViewContent">Loading...</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="questionCampaignView" tabindex="-1"
role="dialog" aria-labelledby="CampaignView"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Campaign Details</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submitAnswers">Submit</button>
</div>
<div class="modal-body">
<div id="questionsCampaignView">Loading...</div>
</div>
</div>
</div>
</div> -->
<div class="modal fade" id="campaignModal" tabindex="-1" role="dialog"
aria-labelledby="campaignModalLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Details & Questions</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Section for Campaign Details -->
<div id="campaignDetails">
<h5>Details</h5>
<div id="CampaignViewContent">Loading...</div>
</div>
<hr>
<!-- Section for Questions and Answers -->
<div id="campaignQuestions">
<h5>Questions</h5>
<div id="questionsCampaignView">Loading...</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button" class="btn btn-primary" id="submitAnswers">Submit
Answers</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="campaignModal2" tabindex="-1" role="dialog"
aria-labelledby="campaignModalLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Details & Questions</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Section for Campaign Details -->
<div id="campaignDetails1">
<h5>Details</h5>
<div id="CampaignViewContent1">Loading...</div>
</div>
<hr>
<!-- Section for Questions and Answers -->
<div id="campaignQuestions1">
<h5>Questions</h5>
<div id="questionsCampaignView1">Loading...</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<!-- <button type="button" class="btn btn-primary" id="submitAnswers">Submit
Answers</button> -->
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script
src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script>
$(document).ready(function() {
$(".view-details1").click(function () {
let categoryId = $(this).data("categoryid");
let campaignId = $(this).data("campaignid");
let agentId = $(this).attr("data-agentid");
let dataId = $(this).attr("data-dataid");
console.log("Fetching details for categoryId:", categoryId);
console.log("Fetching questions for campaignId:", campaignId);
// Fetch campaign details
$.ajax({
url: "/gcc/api/agents/Campaignview",
type: "GET",
data: { categoryId, agentId, dataId },
success: function (response) {
console.log(response);
let modalContent = `<div class="container-fluid">
<table class="table table-bordered">
<tbody>`;
if (response.length > 0) {
let item = response[0];
let keys = Object.keys(item);
for (let i = 0; i < keys.length; i += 3) {
modalContent += `<tr>`;
// Loop through 3 items per row
for (let j = 0; j < 3; j++) {
if (i + j < keys.length) {
let key = keys[i + j];
let value = item[key] ? item[key] : "-";
/* modalContent += `
<th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
<td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${value}</td>`;
} */
let displayValue = (typeof value === "string" && value.startsWith("http"))
? `<a href="${value}" target="_blank" style="text-decoration: none; color: blue;">${value}</a>`
: value;
modalContent += `
<th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
<td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${displayValue}</td>`;
}
}
modalContent += `</tr>`;
}
} else {
modalContent += `<tr><td colspan="6" class="text-center">No data available</td></tr>`;
}
modalContent += `</tbody></table></div>`;
$("#CampaignViewContent1").html(modalContent);
},
error: function () {
$("#CampaignViewContent1").html("<p>Error fetching campaign details.</p>");
}
});
// Fetch related questions
$.ajax({
url: "/gcc/api/agents/questions",
type: "GET",
data: { categoryId, campaignId },
success: function (response) {
console.log(response);
renderQuestions1(response, campaignId, agentId, dataId);
},
error: function () {
$("#questionsCampaignView1").html("<p>Error fetching questions.</p>");
}
});
// Show modal after fetching details
$("#campaignModal1").modal("show");
});
$(".view-details").click(function () {
let categoryId = $(this).data("categoryid");
let campaignId = $(this).data("campaignid");
let agentId = $(this).attr("data-agentid");
let dataId = $(this).attr("data-dataid");
$("#submitAnswers").attr("data-categoryid", categoryId);
$("#submitAnswers").attr("data-campaignid", campaignId);
$("#submitAnswers").attr("data-agentid", agentId);
$("#submitAnswers").attr("data-dataid", dataId);
console.log("Fetching details for categoryId:", categoryId);
console.log("Fetching questions for campaignId:", campaignId);
// Fetch campaign details
$.ajax({
url: "/gcc/api/agents/Campaignview",
type: "GET",
data: { categoryId, agentId, dataId },
success: function (response) {
console.log(response);
let modalContent = `<div class="container-fluid">
<table class="table table-bordered">
<tbody>`;
if (response.length > 0) {
let item = response[0];
let keys = Object.keys(item);
for (let i = 0; i < keys.length; i += 3) {
modalContent += `<tr>`;
// Loop through 3 items per row
for (let j = 0; j < 3; j++) {
if (i + j < keys.length) {
let key = keys[i + j];
let value = item[key] ? item[key] : "-";
/* modalContent += `
<th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
<td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${value}</td>`;
} */
let displayValue = (typeof value === "string" && value.startsWith("http"))
? `<a href="${value}" target="_blank" style="text-decoration: none; color: blue;">${value}</a>`
: value;
modalContent += `
<th class="bg-light text-dark p-2 text-center">${key.replace(/_/g, " ")}</th>
<td style="word-wrap: break-word; white-space: normal; max-width: 200px;">${displayValue}</td>`;
}
}
modalContent += `</tr>`;
}
} else {
modalContent += `<tr><td colspan="6" class="text-center">No data available</td></tr>`;
}
modalContent += `</tbody></table></div>`;
$("#CampaignViewContent").html(modalContent);
},
error: function () {
$("#CampaignViewContent").html("<p>Error fetching campaign details.</p>");
}
});
// Fetch related questions
$.ajax({
url: "/gcc/api/agents/questions",
type: "GET",
data: { categoryId, campaignId },
success: function (response) {
console.log(response);
renderQuestions(response, campaignId, agentId, dataId);
},
error: function () {
$("#questionsCampaignView").html("<p>Error fetching questions.</p>");
}
});
// Show modal after fetching details
$("#campaignModal").modal("show");
});
function renderQuestions1(data, campaignId, agentId, dataId) {
let html = `<div class="container">`;
let allAnswered = true; // Track if all answers exist
data.forEach(question => {
let questionId = question.question_id;
let inputField = "";
// Fetch existing answer
$.ajax({
url: "/gcc/api/agents/fetchAnswer",
type: "GET",
data: { campaignId, agentId, questionId, dataId },
async: false, // Ensure answer is fetched before rendering
success: function (answerResponse) {
let existingAnswer = (answerResponse.length > 0) ? answerResponse[0].campaign_answer : null;
let isReadOnly = existingAnswer ? "readonly" : "";
inputField = generateInputField2(question, existingAnswer, isReadOnly);
// If any question does not have an answer, allow form submission
if (!existingAnswer) {
allAnswered = false;
}
}
});
html += `
<div class="row align-items-center mb-3">
<div class="col-md-8">
<label class="font-weight-bold">${question.questions}<span class="text-danger">*</span></label>
</div>
<div class="col-md-4">${inputField}</div>
</div>`;
});
html += `</div>`;
$("#questionsCampaignView1").html(html);
// Hide submit button if all questions have answers
/* if (allAnswered) {
$("#submitAnswers").hide();
} else {
$("#submitAnswers").show();
} */
}
function renderQuestions(data, campaignId, agentId, dataId) {
let html = `<div class="container">`;
let allAnswered = true; // Track if all answers exist
data.forEach(question => {
let questionId = question.question_id;
let inputField = "";
// Fetch existing answer
$.ajax({
url: "/gcc/api/agents/fetchAnswer",
type: "GET",
data: { campaignId, agentId, questionId, dataId },
async: false, // Ensure answer is fetched before rendering
success: function (answerResponse) {
let existingAnswer = (answerResponse.length > 0) ? answerResponse[0].campaign_answer : null;
let isReadOnly = existingAnswer ? "readonly" : "";
inputField = generateInputField(question, existingAnswer, isReadOnly);
// If any question does not have an answer, allow form submission
if (!existingAnswer) {
allAnswered = false;
}
}
});
html += `
<div class="row align-items-center mb-3">
<div class="col-md-8">
<label class="font-weight-bold">${question.questions}<span class="text-danger">*</span></label>
</div>
<div class="col-md-4">${inputField}</div>
</div>`;
});
html += `</div>`;
$("#questionsCampaignView").html(html);
// Hide submit button if all questions have answers
if (allAnswered) {
$("#submitAnswers").hide();
} else {
$("#submitAnswers").show();
}
}
function generateInputField2(question, existingAnswer, isReadOnly) {
let html = "";
if (question.answer_type_id == 1) { // Text Input
html = `<input type="text" class="form-control answer-input"
data-questionid="${question.question_id}"
value="${existingAnswer || ''}"
readonly
${isReadOnly}/>`;
}
else if (question.answer_type_id == 2) { // Radio Buttons
question.answers.forEach(ans => {
let checked = (existingAnswer === ans) ? "checked" : "disabled";
let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
html += `
<div class="form-check form-check-inline">
<input class="form-check-input answer-input" type="radio"
name="q_${question.question_id}" value="${ans}"
data-questionid="${question.question_id}"
${checked} ${isReadOnlyAttr}>
<label class="form-check-label">${ans}</label>
</div>`;
});
}
else if (question.answer_type_id == 3) { // Dropdown (Select)
let isDisabled = existingAnswer ? 'disabled' : 'disabled'; // Disable only when an answer exists
html = `<select class="form-control answer-input"
data-questionid="${question.question_id}" ${isDisabled}>
<option value="" disabled ${!existingAnswer ? "selected" : ""}>
Select an option
</option>`; // Show "Select an option" only if no answer exists
question.answers.forEach(ans => {
let selected = (existingAnswer === ans) ? "selected" : "";
html += `<option value="${ans}" ${selected}>${ans}</option>`;
});
html += `</select>`;
}
else if (question.answer_type_id == 4) { // Checkbox
question.answers.forEach(ans => {
let checked = (existingAnswer && existingAnswer.includes(ans)) ? "checked" : "disabled";
let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
html += `
<div class="form-check">
<input class="form-check-input answer-input" type="checkbox"
value="${ans}" data-questionid="${question.question_id}"
${checked} ${isReadOnlyAttr}>
<label class="form-check-label">${ans}</label>
</div>`;
});
}
return html;
}
function generateInputField(question, existingAnswer, isReadOnly) {
let html = "";
if (question.answer_type_id == 1) { // Text Input
html = `<input type="text" class="form-control answer-input"
data-questionid="${question.question_id}"
value="${existingAnswer || ''}"
${isReadOnly}/>`;
}
else if (question.answer_type_id == 2) { // Radio Buttons
question.answers.forEach(ans => {
let checked = (existingAnswer === ans) ? "checked" : "";
let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
html += `
<div class="form-check form-check-inline">
<input class="form-check-input answer-input" type="radio"
name="q_${question.question_id}" value="${ans}"
data-questionid="${question.question_id}"
${checked} ${isReadOnlyAttr}>
<label class="form-check-label">${ans}</label>
</div>`;
});
}
else if (question.answer_type_id == 3) { // Dropdown (Select)
let isDisabled = existingAnswer ? 'disabled' : ''; // Disable only when an answer exists
html = `<select class="form-control answer-input"
data-questionid="${question.question_id}" ${isDisabled}>
<option value="" disabled ${!existingAnswer ? "selected" : ""}>
Select an option
</option>`; // Show "Select an option" only if no answer exists
question.answers.forEach(ans => {
let selected = (existingAnswer === ans) ? "selected" : "";
html += `<option value="${ans}" ${selected}>${ans}</option>`;
});
html += `</select>`;
}
else if (question.answer_type_id == 4) { // Checkbox
question.answers.forEach(ans => {
let checked = (existingAnswer && existingAnswer.includes(ans)) ? "checked" : "";
let isReadOnlyAttr = existingAnswer ? 'onclick="return false;"' : ""; // Prevent change
html += `
<div class="form-check">
<input class="form-check-input answer-input" type="checkbox"
value="${ans}" data-questionid="${question.question_id}"
${checked} ${isReadOnlyAttr}>
<label class="form-check-label">${ans}</label>
</div>`;
});
}
return html;
}
// Submit only new answers
$("#submitAnswers").off('click').on('click', function () {
let answersArray = [];
let allAnswered = true; // Flag to check if all required fields are answered
let categoryId = $(this).attr("data-categoryid");
let campaignId = $(this).attr("data-campaignid");
let agentId = $(this).attr("data-agentid");
let dataId = $(this).attr("data-dataid");
let processedQuestions = new Set(); // To prevent duplicate question processing
$(".answer-input").each(function () {
let questionId = $(this).data("questionid");
let answerValue = null;
if (processedQuestions.has(questionId)) {
return; // Skip duplicate question IDs
}
if ($(this).is(":radio")) {
answerValue = $(`input[name="q_${questionId}"]:checked`).val();
} else if ($(this).is("select")) {
answerValue = $(this).val();
} else if ($(this).is(":checkbox")) {
answerValue = $(`input[data-questionid="${questionId}"]:checked`).map(function () {
return $(this).val();
}).get().join(", ");
} else {
answerValue = $(this).val();
}
if (!answerValue || answerValue.trim() === "") {
allAnswered = false;
//$(this).addClass("is-invalid");
} else {
$(this).removeClass("is-invalid");
processedQuestions.add(questionId);
answersArray.push({
campaign_id: campaignId,
data_id: dataId,
agent_id: agentId,
question_id: questionId,
campaign_answer: answerValue
});
}
});
if (!allAnswered) {
Swal.fire({
icon: "warning",
title: "Missing Fields!",
text: "Please fill in all required fields before submitting.",
confirmButtonText: "OK"
});
return;
}
console.log("Submitting Answers:", answersArray);
$('#submitAnswers').attr('disabled', true).text('Processing');
$.ajax({
url: "/gcc/api/agents/submitAnswers",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ answers: answersArray }),
success: function (response) {
$('#submitAnswers').attr('disabled', false).text('Submit Answers');
Swal.fire({
title: 'Success!',
text: response,
icon: 'success',
allowOutsideClick: false, // Disable clicking outside the modal to close it
allowEscapeKey: false, // Disable escape key to close the modal
allowEnterKey: false, // Disable enter key to close the modal
confirmButtonText: "OK"
}).then(() => {
$('#submitAnswers').attr('disabled', false).text('Submit Answers');
$('#campaignModal').modal('hide');
});
},
error: function (xhr) {
$('#submitAnswers').attr('disabled', false).text('Submit Answers');
let errorMessage = "";
if (xhr.responseText) {
errorMessage = xhr.responseText; // Use backend message if available
}
Swal.fire({
icon: "error",
title: "Submission Failed!",
text: errorMessage,
confirmButtonText: "OK"
});
}
});
});
let option_val = '';
$.ajax({
url: "/gcc/api/agents/callstatus",
type: "GET",
success: function (data) {
//dropdown.empty();
//dropdown.append('<option value="">Select Call Status</option>');
$.each(data, function (index, item) {
option_val = option_val + '<option value="' + item.id + '">' + item.call_status + '</option>';
//console.log(option_val);
});
add_data();
}
});
function add_data(){
$(".action-dropdown").each(function () {
//alert($(this));
let dropdown = $(this);
//if (!dropdown.find("option[value='']").length) {
dropdown.empty();
dropdown.append('<option value="">Select Call Status</option>');
dropdown.append(option_val);
// }
});
}
/* $(".action-dropdown").each(function () {
let dropdown = $(this);
$.ajax({
url: "/gcc/api/agents/callstatus",
type: "GET",
success: function (data) {
dropdown.empty();
dropdown.append('<option value="">Select Call Status</option>');
$.each(data, function (index, item) {
dropdown.append('<option value="' + item.id + '">' + item.call_status + '</option>');
});
}
});
}); */
/* function submitAction(dataId, index,agentId,campaignId) {
let row = $(`#submit-btn-${index}`).closest("tr");
// Get selected dropdown value and textarea value
let callStatus = row.find(".action-dropdown").val(); // Ensure you're getting the correct value
let remarks = row.find("textarea[name='remarks']").val() || "N/A";
console.log("sxdnx",remarks);
// Make an AJAX POST request to submit the data
$.ajax({
url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
data_id: dataId,
agent_id: agentId,
campaign_id:campaignId,
call_status: callStatus, // Use "call_status" as the key to match the controller parameter name
remarks: remarks
}),
success: function(response) {
console.log('Data Updated successfully:', response);
// Update the button and form fields after successful submission
Swal.fire({
title: 'Success!',
text: 'Data Updated successfully!',
icon: 'success',
timer: 2000,
showConfirmButton: false
})
let button = $(`#submit-btn-${index}`);
button.text('Submitted').removeClass('btn-primary').addClass('btn-primary').prop('disabled', true);
$(`#AgentDatatable tbody .action-dropdown[data-index="${index}"]`).prop('disabled', true);
$(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).prop('disabled', true);
},
error: function(xhr, status, error) {
console.error('Error submitting data:', error);
}
});
}*/
var buttons = [
{
extend: 'pageLength',
className: 'btn btn-warning'
},
{
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-secondary'
},
{
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-secondary'
},
{
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-secondary'
},
{
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-secondary'
}
];
$('#Agenttask').DataTable({
dom: 'Bftip',
columnDefs: [
{targets: 'no-sort', orderable: false}
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '20vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: buttons,
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false,
});
var table= $('#AgentDatatable').DataTable({
dom: 'Bftip',
columnDefs: [
{targets: 'no-sort', orderable: false}
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: buttons,
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: true,
});
table.on('draw', function () {
var pageInfo = table.page.info();
//console.log('User navigated to page: ' + (pageInfo.page + 1)); // Page numbers are zero-based
add_data();
});
$('#AgentDatatable1').DataTable({
dom: 'Bftip',
columnDefs: [
{targets: 'no-sort', orderable: false}
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: buttons,
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false,
});
});
$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
$('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
$('#primaryButton').click(function () {
$('#primaryTable').show();
$('#secondaryTable').hide();
$(this).addClass('btn-success').removeClass('btn-secondary');
$('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
$('#AgentDatatable').DataTable().columns.adjust().draw();
});
$('#secondaryButton').click(function () {
$('#primaryTable').hide();
$('#secondaryTable').show();
$(this).addClass('btn-success').removeClass('btn-secondary');
$('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
$('#AgentDatatable1').DataTable().columns.adjust().draw();
});
document.getElementById("refresh").addEventListener("click", function() {
location.reload(); // Reloads the current page
});
function submitAction(dataId, index, agentId, campaignId) {
let row = $(`#submit-btn-${index}`).closest("tr");
// Get selected dropdown value and textarea value
let callStatusDropdown = row.find(".action-dropdown"); // Get the dropdown element
let callStatus = callStatusDropdown.find("option:selected").text().trim(); // Get selected text
//let callStatus = callStatusDropdown.val();
let remarks = row.find("textarea[name='remarks']").val() || "N/A"; // Default to "N/A" if empty
console.log("Data ID:", dataId);
console.log("Agent ID:", agentId);
console.log("Campaign ID:", campaignId);
console.log("Call Status:", callStatus);
console.log("Remarks:", remarks);
if (!callStatus || callStatus === "Select Call Status") {
console.log("❌ Call status is required.");
Swal.fire({
title: 'Validation Error!',
text: 'Please select a Call Status before submitting.',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
if (remarks === "" || remarks === "N/A") {
console.log("❌ Remarks cannot be empty.");
Swal.fire({
title: 'Validation Error!',
text: 'Please enter remarks before submitting.',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
// If call status is not "INFORMATION GIVEN", submit immediately
if (callStatus !== "INFORMATION GIVEN") {
submitData(dataId, agentId, campaignId, callStatus, remarks, row, index);
return;
}
// If call status is "INFORMATION GIVEN", check database counts first
$.ajax({
url: `/gcc/api/agents/checkCounts?dataId=${dataId}&campaignId=${campaignId}`,
type: 'GET',
success: function(response) {
console.log("DB Count Check Response:", response);
if (response.length > 0) { // ✅ Ensure response contains data
let answersCount = response[0].answersCount || 0;
let questionsCount = response[0].questionsCount || 0;
console.log("Answers Count:", answersCount);
console.log("Questions Count:", questionsCount);
// ✅ If call status is NOT "INFORMATION GIVEN", allow submission directly
if (callStatus === "INFORMATION GIVEN" && questionsCount !== answersCount) {
console.log("❌ Counts do not match! Submission blocked.");
Swal.fire({
title: 'Incomplete!',
text: `You have answered only ${answersCount} out of ${questionsCount} required questions.`,
icon: 'error',
confirmButtonText: 'OK'
});
} else {
console.log("✅ Proceeding with submission.");
submitData(dataId, agentId, campaignId, callStatus, remarks, row, index);
}
} else {
console.log("❌ No count data received. Blocking submission.");
Swal.fire({
title: 'Error!',
text: 'Could not retrieve question counts. Please try again later.',
icon: 'error'
});
}
},
error: function(xhr, status, error) {
console.error('Error fetching count data:', error);
Swal.fire({
title: 'Error!',
text: 'Failed to check question counts. Please contact support.',
icon: 'error'
});
}
});
}
// Function to submit data
function submitData(dataId, agentId, campaignId, callStatus, remarks, row, index) {
$('.submitid').prop('disabled', true).text('Submitting');
$.ajax({
url: '/gcc/api/agents/savecall',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
data_id: dataId,
agent_id: agentId,
campaign_id: campaignId,
call_status: callStatus,
remarks: remarks
}),
success: function(response) {
$('.submitid').prop('disabled', false).text('Submit');
console.log('Data Updated successfully:', response);
Swal.fire({
title: 'Success!',
text: 'Data Updated successfully!',
icon: 'success',
allowOutsideClick: false, // Disable clicking outside the modal to close it
allowEscapeKey: false, // Disable escape key to close the modal
allowEnterKey: false, // Disable enter key to close the modal
showConfirmButton: true
}).then((result) => {
if (result.isConfirmed) {
//console.log("ok button clicked");
$('.submitid').prop('disabled', false).text('Submit');
const table = $('#AgentDatatable').DataTable();
// Remove the row from the table
table.row(row).remove().draw(false);
// Recalculate and update S.No column
table.rows().every(function(index) {
$(this.node()).find('td:first-child').text(index + 1);
});
table.draw(false);
}
});
},
error: function(xhr, status, error) {
console.error('Error submitting data:', error);
}
});
}
// Make an AJAX POST request to submit the data
//working
/* function submitAction(dataId, index,agentId,campaignId) {
// Get selected dropdown value and textarea value
let row = $(`#submit-btn-${index}`).closest("tr");
// Get selected dropdown value and textarea value
let callStatusDropdown = row.find(".action-dropdown"); // Ensure you're getting the correct value
let callStatus = callStatusDropdown.find("option:selected").text();
let remarks = row.find("textarea[name='remarks']").val() || "N/A";
console.log(dataId);
console.log(agentId);
console.log(campaignId);
console.log(callStatus);
console.log(remarks);
// Make an AJAX POST request to submit the data
$.ajax({
url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
data_id: dataId,
agent_id: agentId,
campaign_id:campaignId,
call_status: callStatus, // Use "call_status" as the key to match the controller parameter name
remarks: remarks
}),
success: function(response) {
console.log('Data Updated successfully:', response);
// Update the button and form fields after successful submission
Swal.fire({
title: 'Success!',
text: 'Data Updated successfully!',
icon: 'success',
timer: 2000,
showConfirmButton: true
}).then((result) => {
if (result.isConfirmed) {
console.log("ok button");
$('.submitid').prop('disabled', false).text('Submit');
const table = $('#AgentDatatable').DataTable();
// Remove the row
table.row($(row)).remove();
// Reorder S.No column
table.rows().every(function (index) {
const row = this.node();
$(row).find('td:first-child').text(index + 1); // Update S.No
});
// Redraw the table
table.draw(false);
}
});
},
error: function(xhr, status, error) {
console.error('Error submitting data:', error);
}
});
}*/
/* function PendingCampaignDetails(campaignId, callsPerAgent, agentId) {
console.log('Calling PendingCampaignDetails with:', {
callsPerAgent: callsPerAgent,
campaignId: campaignId,
agentId: agentId
});
$.ajax({
url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
type: 'GET',
success: function (response) {
console.log(response);
if (response) {
// Populate modal fields with data
//$('#campaign_id').val(response.campaign_id);
$('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
// Display the campaign name near the h5 element
$('#campaign-names-display').text(response.campaign_name); // Add text dynamically to the element
} else {
console.error('Error fetching campaign details:', error);
}
},
error: function (xhr, status, error) {
console.error('Error fetching campaign details:', error);
alert('An error occurred while fetching campaign details.');
}
});
// Get the card element by its ID (e.g., 'tablesforcalls')
var cardElement = document.getElementById('tablesforpendingcalls');
// Toggle the display property based on current state
if (cardElement.style.display === 'block') {
cardElement.style.display = 'none'; // Hide the card if it's currently displayed
} else {
cardElement.style.display = 'block'; // Show the card if it's hidden
}
$.ajax({
url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
type: 'GET', // GET request
contentType: 'application/json',
success: function(response) {
console.log('Campaign started successfully:', response);
// We are focusing on matching the agent_id since campaign_id is constant (24)
let dataIds = [];
response.forEach(function(item) {
console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
if (item.agent_id === agentId) {
dataIds = item.data_ids; // Get the corresponding data_ids
console.log('Match found. Data IDs:', dataIds);
}
});
if (dataIds.length > 0) {
console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
// Fetch the data for the matched data IDs
$.ajax({
url: '/gcc/api/agents/getPendingDataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
type: 'GET',
contentType: 'application/json',
success: function(response) {
console.log('Data retrieved successfully:', response);
// Initialize DataTable if not already done
let table = $('#Pendingtasktable').DataTable();
// Clear existing rows in the table
table.clear();
// Process and append the new data to the DataTable
let rows = [];
response.forEach(function(item, index) {
let row = [
index + 1, // S.No
item.id, // ID
item.name, // Name
item.address, // Address
item.dues, // Dues
item.cellnumber, // Mobile Number
`<div class="text-center">
<button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
</div>`,
// Dropdown for Action
`<div class="text-center">
<select class="form-control action-dropdown2" name="action" data-index="${index}">
<option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
<option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
<option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
<option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
<option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
<option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
</select>
</div>`,
// Textarea for Remarks (populate saved remarks)
`<div class="text-center">
<textarea class="form-control" name="remarks">${item.remarks ? item.remarks : ""}</textarea>
</div>`,
// WhatsApp Message Button
`<div class="text-center">
<button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
</div>`,
// Centered Button for Submit Action (Initially disabled)
`<div class="text-center">
<button class="btn btn-primary submit-button" id="submitt-btn-${index}" disabled onclick="editAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Update' : 'Update'}</button>
</div>`
];
rows.push(row);
});
// Append the rows to your table
$('#Pendingtasktable').DataTable().rows.add(rows).draw();
// Add event listener to each dropdown to enable/disable the button
$('.action-dropdown2').on('change', function() {
let selectedValue = $(this).val();
let index = $(this).data('index');
let button = $('#submitt-btn-' + index);
// Enable the button if a valid option is selected, otherwise keep it disabled
if (selectedValue === 'NONE') {
button.prop('disabled', true);
button.text('Update');
button.removeClass('btn-primary').addClass('btn-primary');
} else {
button.prop('disabled', false);
button.text('Update');
button.removeClass('btn-primary').addClass('btn-primary');
}
});
$('.action-dropdown2').on('change', function () {
let selectedValue = $(this).val(); // Dropdown value
let index = $(this).data('index'); // Index of the row
let button = $('#submit-btn-' + index); // The submit button
let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
// Function to check if the button should be enabled
function toggleButtonState() {
let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
if (selectedValue !== 'NONE' && remarksValue !== '') {
button.prop('disabled', false);
button.text('Update');
button.removeClass('btn-primary').addClass('btn-primary');
} else {
button.prop('disabled', true);
button.text('Update');
button.removeClass('btn-primary').addClass('btn-primary');
}
}
// Toggle button state based on the current conditions
toggleButtonState();
// Add an event listener to the remarks field to recheck conditions
remarksField.on('input', function () {
toggleButtonState();
});
});
},
error: function(xhr, status, error) {
console.error('Error retrieving data:', error);
}
});
}
else {
console.log('No matching data found for Agent ID ' + agentId);
}
},
error: function(xhr, status, error) {
console.error('Error starting campaign:', error);
}
});
initializeAgentsDataTable();
// Show the #tablesforcalls div
//document.getElementById('tablesforpendingcalls').style.display = 'block';
} */
/* function editAction(dataId, index,agentId,campaignId) {
// Get selected dropdown value and textarea value
let action = $('.action-dropdown2[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
let remarks = $(`#Pendingtasktable tbody textarea[name="remarks"]`).eq(index).val();
// Make an AJAX POST request to submit the data
$.ajax({
url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
data_id: dataId,
agent_id: agentId,
campaign_id:campaignId,
call_status: action, // Use "call_status" as the key to match the controller parameter name
remarks: remarks
}),
success: function(response) {
console.log('Data Updated successfully:', response);
// Update the button and form fields after successful submission
Swal.fire({
title: 'Success!',
text: 'Data Updated successfully!',
icon: 'success',
timer: 2000,
showConfirmButton: false
})
},
error: function(xhr, status, error) {
console.error('Error submitting data:', error);
}
});
} */
function initializeAgentsDataTable() {
if (!$.fn.DataTable.isDataTable('#AgentDatatable')) {
$('#AgentDatatable').DataTable({
dom: 'Bftip',
columnDefs: [{ targets: 'no-sort', orderable: false }],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '60vh',
fixedColumns: { left: 1, right: 1 },
buttons: [
{ extend: 'pageLength', className: 'btn btn-warning' },
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false
});
}
// Initialize the Pendingtasktable if it is not already initialized
if (!$.fn.DataTable.isDataTable('#Pendingtasktable')) {
$('#Pendingtasktable').DataTable({
dom: 'Bftip',
columnDefs: [{ targets: 'no-sort', orderable: false }],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '60vh',
fixedColumns: { left: 1, right: 1 },
buttons: [
{ extend: 'pageLength', className: 'btn btn-warning' },
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: true,
select: false,
processing: false
});
}
}
//view url for specific id details
function ViewDetails(url) {
if(url)
{
window.open( url,'_blank');
}
else
{ Swal.fire({
title: 'Error!',
text: 'NO Data Available!',
icon: 'error',
timer: 2000,
showConfirmButton: false
})
}
}
//whatsapp message function
/* function sendWhatsAppMessage(cellnumber, billNo, viewdetailsUrl) {
// Build the dynamic WhatsApp message URL
let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${cellnumber}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Greetings+from+Greater+Chennai+Corporation%2C%0A%0AProperty+Bill+No+${billNo}%0A%0ASkip+the+hassle+and+pay+your+property+tax+easily+on+WhatsApp.+It%E2%80%99s+quick%2C+stress-free%2C+and+just+a+few+taps+away%21+%F0%9F%93%B2%0A%0ASimply+click+the+button+below+to+view+your+payment+details+and+complete+your+payment+today%21+%F0%9F%92%B8&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1727080053%2Fang8tqjqdcxuqoeiuvjl.jpg&isTemplate=true&cta_button_url=${encodeURIComponent(viewdetailsUrl)}`;
// Send the WhatsApp message
$.ajax({
url: '/gcc/api/whatsapp/send-whatsapp-message', // Replace with your service path
type: 'POST',
data: { msgUrl: msgUrl },
success: function(response) {
console.log('WhatsApp message sent successfully', response);
//alert('WhatsApp message sent!');
Swal.fire({
title: 'Success!',
text: 'Message sent successfully!',
icon: 'success',
timer: 2000,
showConfirmButton: false
})
},
error: function(xhr, status, error) {
console.error('Error sending WhatsApp message:', error);
//alert('Failed to send WhatsApp message.');
Swal.fire({
title: 'Error!',
text: 'Message Not sent!',
icon: 'error',
timer: 2000,
showConfirmButton: false
})
}
});
} */
</script>
</body>
</html>