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.
 
 

1235 lines
33 KiB

<!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">&times;</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">&times;</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 CAPTCHA
if (!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 Birth
if (!dod) {
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;
}
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>