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.
1234 lines
33 KiB
1234 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 - Death</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">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Death certificate card -->
|
|
|
|
<div class="card" id="death-card">
|
|
<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 timeout;
|
|
|
|
function resetTimeout() {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
// Optionally check if session is still active via an API
|
|
window.location.href = "/crs/loginpage";
|
|
}, 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/deathlogout",
|
|
method: "GET",
|
|
success: function () {
|
|
localStorage.clear(); // Clear frontend storage
|
|
window.location.href = "/crs/death"; // 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>
|
|
|
|
|