|
|
<!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;}</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="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;"> Auot 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 Pending</th> <th class="text-center">Calls Completed</th> <th class="text-center">Follow ups</th> <th class="text-center " >Start Calls</th> <th class="text-center " >Further Calls</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['pending_count']}" class="text-center"></td> <td th:text="${agentsCampaign['complete_count']}" class="text-center"></td> <td th:text="${agentsCampaign['followup_count']}" class="text-center"></td> <td class="text-center"> <!-- Add your action button --> <button type="button" class="btn btn-primary" th:onclick="'viewCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'"> view </button> </td> <td class="text-center"> <button type="button" class="btn btn-info" th:onclick="'PendingCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'"> view </button> </td> </tr> </tbody>
<tfoot 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 Pending</th> <th class="text-center">Calls Completed</th> <th class="text-center">Follow ups</th> <th class="text-center " >Start Calls</th> <th class="text-center " >Further Calls</th> </tr> </tfoot> </table> </div> </div> </div> </div> <div class="col-md-12" id="tablesforcalls" 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-name-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Calls List</h5><hr> </div> <div> <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="custom-width3">ID</th> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Balance Amount</th> <th class="text-center">Mobile number</th> <th class="text-center">ViewDetails</th> <th class="text-center custom-width1">Action</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> <tfoot class="thead-dark"> <tr role="row"> <th >S.No</th> <th class="custom-width3">ID</th> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Balance Amount</th> <th class="text-center">Mobile number</th> <th class="text-center">ViewDetails</th> <th class="text-center custom-width1">Action</th> <th class="text-center custom-width2">Remarks</th> <th class="text-center">Send Message</th> <th class="text-center"> Status</th> </tr> </tfoot> </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="custom-width3">ID</th> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Balance Amount</th> <th class="text-center">Mobile number</th> <th class="text-center">ViewDetails</th> <th class="text-center custom-width1">Action</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> <tfoot class="thead-dark"> <tr role="row"> <th>S.No</th> <th class="custom-width3">ID</th> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Balance Amount</th> <th class="text-center">Mobile number</th> <th class="text-center">ViewDetails</th> <th class="text-center custom-width1">Action</th> <th class="text-center custom-width2">Remarks</th> <th class="text-center">Send Message</th> <th class="text-center"> Status</th> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </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() {
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: '30vh', fixedColumns: { left: 1, right: 1 }, buttons: buttons, fixedHeader: true, autoWidth: true, responsive: true, searching: true, select: false, processing: false, }); }); document.getElementById("refresh").addEventListener("click", function() { location.reload(); // Reloads the current page }); function viewCampaignDetails(campaignId, callsPerAgent, agentId) { console.log('Calling viewCampaignDetails with:', { callsPerAgent: callsPerAgent, campaignId: campaignId, // this is 24, constant agentId: agentId // this will change }); $.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-name-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('tablesforcalls');
// 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/getdataByIds?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 = $('#AgentDatatable').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-dropdown" name="action" data-index="${index}" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}> <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.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>${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="submit-btn-${index}" disabled onclick="submitAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Submit' : 'Submit'}</button> </div>` ]; rows.push(row); }); // Append the rows to your table $('#AgentDatatable').DataTable().rows.add(rows).draw(); $('.action-dropdown').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('Submit'); button.removeClass('btn-primary').addClass('btn-primary'); } else { button.prop('disabled', true); button.text('Submit'); 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('tablesforcalls').style.display = 'block'; }
function submitAction(dataId, index,agentId,campaignId) { // Get selected dropdown value and textarea value let action = $('.action-dropdown[data-index="' + index + '"]').val(); // Ensure you're getting the correct value let remarks = $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).val() || "N/A";
// 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 }) 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); } }); } 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>
|