|
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GCC - Birth </title><!-- Links to Bootstrap CSS and JS, jQuery, and SweetAlert --><!-- Bootstrap CSS --><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap Icons CDN in <head> if not already --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- <link th:href="@{/styles/birthanddeath.css}" rel="stylesheet" /> -->
</head>
<style>
.form-check { display: flex; align-items: center; margin-bottom: 10px;}
.form-check-input { transform: scale(1.5);}
/*checkbox style*/label { color: black;}
/* Header Styling */.header { background-color: #1d495a; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; color: white; font-family: Arial, sans-serif; /* position: fixed ; top: 0; width: 100%; z-index: 1000; */}
.header .logo { display: flex; align-items: center;}
.header .logo img { height: 60px;}
.header .center-text { position: absolute; /* Centered text */ left: 50%; transform: translateX(-50%); text-align: center; font-size: 24px;}
.header .menu-btn { background-color: transparent; border: none; font-size: 24px; color: white;}
.header .menu-btn:hover { /* text-decoration: underline; */ color: #ccc;}
/* Menu Dropdown */.menu-dropdown { position: relative; margin-top: 10px; background-color: #1d495a; padding: 10px 20px; display: none; flex-direction: column; width: 100%;}
.menu-dropdown a { color: white; margin-bottom: 5px; text-decoration: none;}
.menu-dropdown a:hover { text-decoration: underline;}
.menu-dropdown { right: 0; left: 0; z-index: 1000; /* Add z-index to bring the menu above other elements */}
/* Mobile Specific Styling */@media ( max-width : 768px) { .header { display: flex; justify-content: space-between; align-items: center; } .center-text { font-size: 18px !important; flex-grow: 1; text-align: center; } .menu-dropdown { right: 0; left: 0; z-index: 1000; /* Add z-index to bring the menu above other elements */ }}
@media (max-width: 768px) { .user-info { flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
.user-name-wrapper { font-size: 12px; padding: 3px 10px; }
#logoutBtn { font-size: 8px; padding: 4px 5px; }
.user-name-text { font-size: 13px; }}
/* Ensure content is not hidden behind the fixed navbar */body { margin: 0; /* margin-top: 90px; Adjust based on your header height */}
.req { color: red;}
/* otp*/.otp-input-box { display: flex; justify-content: center; gap: 10px; /* Adjust spacing between the inputs */}
.otp-input { width: 50px; /* Width for a square input */ height: 50px; /* Height for a square input */ font-size: 24px; /* Make the digits larger */ text-align: center; /* Center the digit inside the box */ border: 1px solid #ccc; /* Optional: add a border */ border-radius: 5px; /* Optional: rounded corners */ outline: none; /* Remove default focus outline */ transition: border-color 0.3s ease;}
.otp-input:focus { border-color: #007bff; /* Change border color on focus */}
/* otp*/
/*send otp styles*/.input-group .form-control { border-right: 0; /* Remove right border of the input to blend with the button */}
.input-group-append .btn { border-left: 0; /* Remove left border of the button */}
.bottom-container { margin-bottom: 50px; /* Adjust as needed */}
/* datatables styles css*/.dataTables_filter { float: right; text-align: right;}
.dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 3px; padding: 4px 10px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #f8f9fa; color: #007bff !important; cursor: pointer;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color: #007bff; color: white !important; border: 1px solid #007bff;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: #e2e6ea; border-color: #adb5bd;}
.dataTables_wrapper .dataTables_paginate { text-align: right !important;}
/* Navigation Bar */
.nav-link.active { color: white; background-color: #007bff; border-radius: 5px; padding: 5px 10px; font-weight: bold;}
.nav-bar { background-color: #EBF1FA; padding: 0.5rem 1rem; margin-top: 10px; text-align: center; border-radius: 1ex; }
.nav-list { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 2rem; border-radius: 1ex; cursor: pointer;}
.nav-link { text-decoration: none; color: #006680; font-weight: 500; padding: 0.5rem 1rem; border-radius: 5px; transition: background-color 0.3s ease;}
.nav-link:hover,.nav-link.active { background-color: #006680; color: #fff;}
/* captcha style css */
.captcha-box { font-family: 'Courier New', monospace; font-size: 24px; letter-spacing: 4px; font-weight: bold; background: #f2f2f2; border: 1px dashed #aaa; padding: 10px 15px; user-select: none; pointer-events: none; /* disables copy */ text-decoration: line-through; color: #333; transform: rotate(-1deg); }
#entered-captcha { user-select: none; }
#entered-captcha::placeholder { font-style: italic; }
#entered-captcha, #generated-captcha { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ user-select: none; } .is-invalid { border: 1px solid red;} /* Decrease top margin for the container */.container.mt-4, .container.mt-5 { margin-top: 10px !important; /* Adjust this value as needed */}
.user-info { position: absolute; top: 20px; right: 71px; font-weight: bold; color: #333; display: flex; flex-direction: row; align-items: center; gap: 26px; flex-wrap: wrap;}
.user-name-wrapper { cursor: pointer; color: #fff; font-weight: 500; padding: 7px 15px; border-radius: 3px; background-color: #7b9ab8; display: inline-flex; align-items: center; font-size: 1rem;}
.user-name-wrapper:hover { color: #1b1e21;}
.user-name-active { /* background-color: #e7f1ff; */ color: #0a58ca;}
#userNameWrapper { display: flex; align-items: center; gap: 10px;}
@media (max-width: 768px) { .mobile-username { /* display: block; */ font-size: 0.9rem; } .header .center-text{ margin-bottom:39px; }
.mobile-logout { display: block; }
/* Hide desktop user-info on mobile */ .user-info { display: none !important; }
#logoutBtnMobile { font-size: 0.9rem; width: auto; margin-top: 5px; }}
@media (min-width: 769px) { .mobile-username, .mobile-logout { display: block; } .header .center-text{ transform: translateX(-80%); /* left:47%; */ }}
</style>
<body style="background-color: #ebf1fa;">
<!-- Header Start--> <header> <div class="header d-flex justify-content-between align-items-center"> <!-- Left: Logo --> <div class="logo"> <a href="https://chennaicorporation.gov.in/gcc/"> <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo"> </a> </div>
<!-- Center: Text --> <div class="center-text">GREATER CHENNAI CORPORATION</div> <!-- Mobile Username (below logo) --><!-- Mobile Username (below logo) --><div class="mobile-username d-md-none text-start mt-2 ms-2"> <span class="user-name-wrapper" title="Click to logout" style="margin-top: 58px; margin-left: 36px;"> <i class="bi bi-person-circle me-1" style="color:#364d65"></i> <span id="loggedUserNameMobile" class="user-name-text"></span> </span></div>
<!-- Desktop User Info (hidden on mobile) --><div class="user-info d-md-flex align-items-center"> <span class="user-name-wrapper" title="Click to logout"> <i class="bi bi-person-circle me-1" style="color:#364d65"></i> <span id="loggedUserNameDesktop" class="user-name-text"></span> </span> <div id="userNameWrapper" class="ms-2 p-1 rounded"> <button id="logoutBtn" class="btn btn-sm btn-danger" style="font-weight:6px;">LOG OUT</button> </div></div>
<!-- Home Icon + Logout button (mobile logout under icon) --><div class="center"> <a href="https://chennaicorporation.gov.in/gcc/"> <i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8; margin-left: 21px;"></i> </a> <!-- Mobile Logout --> <div class="mobile-logout d-md-none text-center mt-1"> <button id="logoutBtnMobile" class="btn btn-sm btn-danger" style="font-weight:6px;">LOG OUT</button> </div></div>
</div>
<div class="navhead"> <!-- Navigation Bar --> <nav class="nav-bar"> <ul class="nav-list"> <li><a id="birth-link" class="nav-link active">Birth</a></li> <!-- <li><a id="death-link" class="nav-link">Death</a></li> -->
</ul> </nav> </div>
</header> <!-- Header End-->
<main class="container mt-4" > <div class="container mt-5"> <div class="card" id="birth-card" style="display: block;"> <div class="card-header bg-dark text-white"> <h5>Birth Certificate:-</h5> </div> <div class="card-body"> <h6> <strong>Birth Certificate Details :-</strong> </h6> <hr />
<div class="container mt-5">
<!-- Row 1:Register No and Name --> <div class="row mb-3">
<div class="col-md-5"> <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text" id="regno" class="form-control" placeholder="Enter Register number"> </div>
<div class="col-md-5"> <label class="form-label" for="name">Child Name </label> <input type="text" class="form-control" placeholder="Enter Child Name here" id="childname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"> </div>
</div>
<!-- Row 2: D.O.B and Gender --> <div class="row mb-3"> <div class="col-md-5"> <label class="form-label" for="name">Date of Birth<span class="text-danger">*</span></label> <input type="DATE" class="form-control" placeholder="Enter Door Number" id="dateofbirth" onclick="this.showPicker()" required> </div> <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label> <div class="d-flex align-items-center gap-3"> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="gender" id="birthGenderMale" value="Male" required> <label class="form-check-label" for="birthGenderMale">Male</label> </div> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="gender" id="birthGenderFemale" value="Female" required> <label class="form-check-label" for="birthGenderFemale">Female</label> </div> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="gender" id="birthGenderTrans" value="Transgender" required> <label class="form-check-label" for="birthGenderTrans">Transgender</label> </div> </div> </div>
</div>
<!-- Row 3: Parents Details --> <div class="row mb-3"> <div class="col-md-5"> <label class="form-label" for="name">Name of Father</label> <input type="text" class="form-control" placeholder="Enter the Father Name" id="fathername"> </div> <div class="col-md-5"> <label class="form-label" for="name">Name of Mother</span></label> <input type="text" class="form-control" placeholder="Enter the Mother Name" id="mothername"> </div> <div class="col-md-5 mt-3"> <label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label> <div class="d-flex align-items-center"> <div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div> <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('birth')">↻</button> </div> <input type="text" id="birth-captcha-input" class="form-control mt-2" placeholder="Enter Captcha" onpaste="return false" oncopy="return false" oncut="return false" /> </div>
</div>
</div> <div class="text-center "> <button type="button" class="btn btn-success" onclick="fetchBirthData()">Submit</button>
<!-- <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button> --> </div>
</div> </div>
<!-- Death certificate card --> <div class="card" id="death-card" style="display: none;"> <div class="card-header bg-dark text-white"> <h5>Death Certificate:-</h5> </div> <div class="card-body" > <h6> <strong>Death Certificate Details :-</strong> </h6> <hr />
<div class="container mt-5">
<!-- Row 1:Register No and Name --> <div class="row mb-3">
<div class="col-md-5"> <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text" class="form-control" placeholder="Enter Register number"> </div>
<div class="col-md-5"> <label class="form-label" for="name">Person Name </label> <input type="text" class="form-control" placeholder="Enter Person Name here" id="personname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"> </div>
</div>
<!-- Row 2: D.O.B and Gender --> <div class="row mb-3"> <div class="col-md-5"> <label class="form-label" for="name">Date of Death<span class="text-danger">*</span></label> <input type="DATE" class="form-control" placeholder="Select Date" id="dateofdeath" onclick="this.showPicker()" required> </div> <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label> <div class="d-flex align-items-center gap-3"> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="deathgender" id="deathGenderMale" value="Male" required> <label class="form-check-label" for="deathGenderMale">Male</label> </div> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="deathgender" id="deathGenderFemale" value="Female" required> <label class="form-check-label" for="deathGenderFemale">Female</label> </div> <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="deathgender" id="deathGenderTrans" value="Transgender" required> <label class="form-check-label" for="deathGenderTrans">Transgender</label> </div> </div> </div>
</div>
<!-- Row 3: Parents Details --> <div class="row mb-3"> <div class="col-md-5"> <label class="form-label" for="name">Name of Father</label> <input type="text" class="form-control" placeholder="Enter the Father Name" id="deathfathername"> </div> <div class="col-md-5"> <label class="form-label" for="name">Name of Mother</label> <input type="text" class="form-control" placeholder="Enter the Mother Name" id="deathmothername"> </div> <div class="col-md-5 mt-3"> <label for="death-captcha-input">Enter Captcha <span class="text-danger">*</span></label> <div class="d-flex align-items-center"> <div id="death-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div> <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('death')">↻</button> </div> <input type="text" id="death-captcha-input" class="form-control mt-2" placeholder="Enter Captcha" onpaste="return false" oncopy="return false" oncut="return false" /> </div>
</div>
</div> <div class="text-center "> <button type="button" class="btn btn-success" onclick="fetchDeathData()">Submit</button>
<!-- <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button> --> </div>
</div> </div> <br>
</div>
</main> <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> <div style="position: relative; top: 50%; transform: translateY(-50%);"> <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> <span class="sr-only">Loading...</span> </div> <!-- Add the 'Please wait' text below the spinner --> <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> </div> </div>
<!-- Bootstrap Modal --><div class="modal fade" id="birthModal" tabindex="-1" aria-labelledby="birthModalLabel" data-bs-backdrop="static" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="birthModalLabel">Birth Certificate Details</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button> </div> <div class="modal-body" id="birthModalBody"> <!-- Table will be injected here --> </div> </div> </div></div>
<!-- Bootstrap Modal --><div class="modal fade" id="deathModal" tabindex="-1" aria-labelledby="deathModalLabel" data-bs-backdrop="static" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="deathModalLabel">Death Certificate Details</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button> </div> <div class="modal-body" id="deathModalBody"> <!-- Table will be injected here --> </div> </div> </div></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script><script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<!-- Your custom script
<script th:src="@{/script/birthanddeath.js}"></script> --> <script>
// Redirect after 60 seconds (1 minute) of inactivity let timeoutDuration = 10 * 60 * 1000; // 60 seconds//let timeoutDuration = 1 * 60 * 1000; // 1 minute = 60,000 ms
let timeout;
function resetTimeout() { clearTimeout(timeout); timeout = setTimeout(() => { // Optionally check if session is still active via an API window.location.href = "/crs/birthloginpage"; }, timeoutDuration); }
// Reset timeout on user interaction ['click', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(evt => { document.addEventListener(evt, resetTimeout, false); });
// Start timer initially resetTimeout();
$(document).ready(function () {
$('#birthModal, #deathModal').on('hidden.bs.modal', function () { window.location.reload(); });});
$(document).ready(function () { function resetFields(cardId) { // Clear all input fields inside the given card $(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val(''); $(`#${cardId} input[type="radio"]`).prop('checked', false); }
$('#birth-link').on('click', function () { resetFields('birth-card'); });
$('#death-link').on('click', function () { resetFields('death-card'); });});
document.addEventListener("DOMContentLoaded", function () { const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format document.getElementById("dateofbirth").setAttribute("max", today); document.getElementById("dateofdeath").setAttribute("max", today);});
document.addEventListener("DOMContentLoaded", function () { const userName = localStorage.getItem("userName"); //console.log("userName ",userName); if (userName) { // Mobile const mobileName = document.getElementById("loggedUserNameMobile"); const mobileWrapper = document.querySelector(".mobile-username .user-name-wrapper");
if (mobileName) mobileName.textContent = userName; if (mobileWrapper) mobileWrapper.title = "Logged in as " + userName;
// Desktop const desktopName = document.getElementById("loggedUserNameDesktop"); const desktopNameCopy = document.getElementById("loggedUserNameCopy"); const desktopWrapper = document.querySelector(".user-info .user-name-wrapper");
if (desktopName) desktopName.textContent = userName; if (desktopNameCopy) desktopNameCopy.textContent = userName; if (desktopWrapper) desktopWrapper.title = "Logged in as " + userName; }
$('#logoutBtn,#logoutBtnMobile').click(function () {
Swal.fire({ title: "Are you sure?", text: "Do you really want to logout?", icon: "warning", showCancelButton: true, confirmButtonColor: "#d33", cancelButtonColor: "#3085d6", confirmButtonText: "Yes, logout", cancelButtonText: "Cancel" }).then((result) => { if (result.isConfirmed) { $.ajax({ url: "/crs/birthlogout", method: "GET", success: function () { localStorage.clear(); // Clear frontend storage window.location.href = "/crs/birth"; // Redirect to login page }, error: function () { Swal.fire("Error", "Logout failed. Try again.", "error"); } }); } }); });});
const links = document.querySelectorAll('.nav-link'); links.forEach(link => { if (window.location.href.includes(link.getAttribute('href'))) { link.classList.add('active'); } });
/* card display script */document.addEventListener("DOMContentLoaded", function () {const birthLink = document.getElementById("birth-link");const deathLink = document.getElementById("death-link");const birthCard = document.getElementById("birth-card");const deathCard = document.getElementById("death-card");
function showCard(selectedLink, selectedCard, otherLink, otherCard) { selectedCard.style.display = "block"; otherCard.style.display = "none"; selectedLink.classList.add("active"); otherLink.classList.remove("active");}
birthLink.addEventListener("click", function () { showCard(birthLink, birthCard, deathLink, deathCard);});
deathLink.addEventListener("click", function () { showCard(deathLink, deathCard, birthLink, birthCard);});});//////////////////////////////////////////////
function generateCaptcha(type) { const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; let captcha = ""; for (let i = 0; i < 6; i++) { captcha += chars.charAt(Math.floor(Math.random() * chars.length)); }
const targetId = `${type}-captcha`; // FIXED: match HTML ID const element = document.getElementById(targetId); if (element) { element.textContent = captcha;
// Styling for obscurity element.style.fontSize = "18px"; element.style.letterSpacing = "3px"; element.style.fontWeight = "bold"; element.style.backgroundColor = "#f0f0f0"; element.style.border = "1px solid #ccc"; element.style.padding = "5px"; element.style.userSelect = "none"; }}
function validateCaptcha(type) { const generated = document.getElementById(`${type}-captcha`).textContent.trim(); const entered = document.getElementById(`${type}-captcha-input`).value.trim();
if (!entered) { Swal.fire({ icon: 'warning', title: 'CAPTCHA Required', text: 'Please enter the CAPTCHA before submitting.' }); //inputField.focus(); return false; } if (generated !== entered) { Swal.fire({ icon: 'error', title: 'Invalid CAPTCHA', text: 'The entered CAPTCHA is incorrect. Please try again.' }); generateCaptcha(type); return false; }
return true;}
document.addEventListener("DOMContentLoaded", function () { generateCaptcha("birth"); generateCaptcha("death");});
function fetchBirthData() {
const dob = document.getElementById('dateofbirth').value;const gender = document.querySelector('input[name="gender"]:checked')?.value;const captchaInput = document.getElementById('birth-captcha-input');
//console.log("gender:", gender);
// Validate Date of Birth if (!dob) { Swal.fire({ icon: 'warning', title: 'Missing Date of Birth', text: 'Please enter your Date of Birth.' }); return; }
// Validate Gender if (!gender) { Swal.fire({ icon: 'warning', title: 'Missing Gender Selection', text: 'Please select a gender.' }); return; }
// CAPTCHA validation first// Validate CAPTCHAif (!validateCaptcha('birth')) { //captchaInput.classList.add('is-invalid'); //captchaInput.focus(); return;} else { captchaInput.classList.remove('is-invalid');}
const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy//console.log("dob:", formattedDob);$('#pageLoader').show();
$.ajax({ url: '/crs/api/birth-details', method: 'GET', data: { dob: formattedDob, sex: gender.charAt(0).toUpperCase() }, success: function (response) { $('#pageLoader').hide();
if (response && response.BIRTH && response.BIRTH.length > 0) { console.log("birthdetails:",response); let html = ` <table id="birthDataTable" class="table table-bordered table-striped"> <thead> <tr> <th>S.No</th> <th>Reg No</th> <th>Child Name</th> <th>Father</th> <th>Mother</th> <th>DOB</th> <th>Certificate Link</th> </tr> </thead> <tbody>`;
response.BIRTH.forEach((row, index) => { html += `<tr> <td>${index + 1}</td> <td>${row.REGNO}</td> <td>${row.CHILDNAME}</td> <td>${row.FATHERNAME}</td> <td>${row.MOTHERNAME}</td> <td>${row.DOB}</td> <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank" onclick="saveCertificateLog('${row.REGNO}', '${row.DOB}', '${row.ENGLISHURL}', 'Birth')">View</a>` : 'N/A'}</td> </tr>`; });
html += `</tbody></table>`; $('#birthModalBody').html(html);
setTimeout(() => { $('#birthDataTable').DataTable({ responsive: true, pagingType: "full_numbers", // Buttons for pagination language: { search: "🔍 Search: ", emptyTable: "No records found", paginate: { previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>", next: "<button class='btn btn-outline-primary btn-sm'>Next</button>" } }, columnDefs: [ { orderable: false, targets: 0 } // Disable sorting on S.No ] }); }, 100); } else { $('#birthModalBody').html('<p class="text-danger">No birth records found.</p>'); }
const modal = new bootstrap.Modal(document.getElementById('birthModal')); modal.show(); }, error: function (xhr) { $('#pageLoader').hide(); let message = "Something went wrong."; if (xhr.responseJSON && xhr.responseJSON.message) { message = xhr.responseJSON.message; } alert("Error: " + message); }});
}
function fetchDeathData() {const dod = document.getElementById('dateofdeath').value;const gender = document.querySelector('input[name="deathgender"]:checked')?.value;const captchaInput = document.getElementById('death-captcha-input');
// console.log("gender:", gender);
// Validate Date of Birthif (!dod) { Swal.fire({ icon: 'warning', title: 'Missing Date of Birth', text: 'Please enter your Date of Birth.' }); return;}
// Validate Genderif (!gender) { Swal.fire({ icon: 'warning', title: 'Missing Gender Selection', text: 'Please select a gender.' }); return;}
if (!validateCaptcha('death')) { //captchaInput.classList.add('is-invalid'); //captchaInput.focus(); return;} else { captchaInput.classList.remove('is-invalid');}
const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
// console.log("dod:", formattedDod);$('#pageLoader').show();
$.ajax({ url: '/crs/api/death-details', method: 'GET', data: { dod: formattedDod, sex: gender.charAt(0).toUpperCase() }, success: function (response) { $('#pageLoader').hide();
if (response && response.DEATH && response.DEATH.length > 0) { let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' + '<th>S.No</th><th>Reg No</th><th>Person Name</th>' + '<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
response.DEATH.forEach((row ,index) => { html += `<tr> <td>${index + 1}</td> <td>${row.REGNO}</td> <td>${row.DEATHPERSONNAME}</td> <td>${row.FATHERNAME}</td> <td>${row.MOTHERNAME}</td> <td>${row.DOD}</td> <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank" onclick="saveCertificateLog('${row.REGNO}', '${row.DOD}', '${row.ENGLISHURL}', 'Death')">View</a>` : 'N/A'}</td> </tr>`; });
html += '</tbody></table>'; $('#deathModalBody').html(html); // Delay initialization to ensure DOM is ready setTimeout(() => { $('#deathDataTable').DataTable({ responsive: true, pagingType: "full_numbers", // Buttons for pagination language: { search: "🔍 Search: ", emptyTable: "No records found", paginate: { previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>", next: "<button class='btn btn-outline-primary btn-sm'>Next</button>" } }, columnDefs: [ { orderable: false, targets: 0 } // Disable sorting on S.No ] }); }, 100); } else { $('#deathModalBody').html('<p class="text-danger">No deathrecords found.</p>'); }
const modal = new bootstrap.Modal(document.getElementById('deathModal')); modal.show(); }, error: function (xhr) { $('#pageLoader').hide(); let message = "Something went wrong."; if (xhr.responseJSON && xhr.responseJSON.message) { message = xhr.responseJSON.message; } alert("Error: " + message); }});
}
function saveCertificateLog(regNo, eventDate, url, service){$.ajax({ url: '/crs/api/saveCertificateLogs', type: 'POST', data: { regNo: regNo, eventDate: eventDate, Url: url, service: service }, success: function() { //console.log('View logged successfully'); }, error: function(xhr, status, error) { console.error('Logging failed:', error); }});}
</script>
</body>
</html>
|