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.
3476 lines
164 KiB
3476 lines
164 KiB
<!DOCTYPE html>
|
|
|
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
|
|
|
<head th:replace="~{fragments/head :: head}"></head>
|
|
<script src="https://cdn.jsdelivr.net/npm/compressorjs@5.0.3/dist/compressor.js"></script>
|
|
<style>
|
|
.table-align {
|
|
width: 100%;
|
|
}
|
|
|
|
.td-align {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.td-align {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.center-table {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.highlight-greens .ui-state-default {
|
|
background: green !important;
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.highlight-yellow .ui-state-default {
|
|
background: yellow !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.highlight-violet .ui-state-default {
|
|
background: #a93da9 !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.highlight-pink .ui-state-default {
|
|
background: red !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.btn-square-md {
|
|
width: 16px !important;
|
|
max-width: 100% !important;
|
|
max-height: 50% !important;
|
|
height: 30px !important;
|
|
text-align: center;
|
|
padding: 0px;
|
|
font-size: 2px;
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
/* Example: reduce opacity to indicate disabled state */
|
|
}
|
|
|
|
.ui-datepicker {
|
|
width: 100%;
|
|
background-color: #333;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
background-color: #f0f0f0;
|
|
/* Light gray background for header */
|
|
border: none;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
font-size: 1.2em;
|
|
margin: 0;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-datepicker-calendar {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: white;
|
|
/* Text color for dates */
|
|
font-weight: bold;
|
|
/* Bold font for dates */
|
|
}
|
|
|
|
.ui-datepicker-calendar th,
|
|
.ui-datepicker-calendar td {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-datepicker-week-end {
|
|
color: yellow;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Style for the label */
|
|
.date-label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlight-current-date a {
|
|
background-color: green;
|
|
/* Current date highlight color */
|
|
color: white;
|
|
}
|
|
|
|
.highlight-greens a {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
|
|
.highlight-yellow a {
|
|
background-color: yellow;
|
|
color: black;
|
|
/* Change text color for visibility */
|
|
}
|
|
|
|
.highlight-pink a,
|
|
input[type=button]:disabled {
|
|
background-color: pink;
|
|
/* Pink highlight for disabled or booked dates */
|
|
color: white;
|
|
}
|
|
|
|
.highlight-orange a {
|
|
background-color: orange;
|
|
/* Orange highlight color */
|
|
color: white;
|
|
}
|
|
|
|
input[type=button]:disabled {
|
|
background: red;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#selecthall.select2-container--default .select2-selection--single {
|
|
height: 35px;
|
|
border: 1px solid #ddd;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: #444;
|
|
line-height: 28px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
#hallDetailsContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* Center items horizontally */
|
|
justify-content: center;
|
|
/* Center items vertically */
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* Style for the image */
|
|
#hallImagesCarousel {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.col-md-6 {
|
|
width: 50%;
|
|
padding: 0 10px;
|
|
/* Optional: Add padding to columns */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.col-md-6 {
|
|
width: 100%;
|
|
/* Full width on smaller screens */
|
|
}
|
|
}
|
|
|
|
#hallDetailsContainer p {
|
|
margin: 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
#hallDetailsContainer p:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* CSS styles for the amount details container */
|
|
#amountDetailsContainer {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
background-color: #fff;
|
|
}
|
|
|
|
#amountDetailsContainer h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#amountDetailsContainer div {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#amountDetailsContainer p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#amountDetailsContainer p span {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#amountDetailsContainer p:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* Style for the image container */
|
|
#hallImagesCarousel {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* Center content horizontally */
|
|
align-items: center;
|
|
/* Center content vertically */
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Style for the images inside the carousel */
|
|
.carousel-item img {
|
|
max-width: 100%;
|
|
/* Ensure image does not exceed container width */
|
|
min-height: 9%;
|
|
/* Maintain aspect ratio */
|
|
display: block;
|
|
/* Ensure image is block-level element */
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
/* Center the image horizontally */
|
|
}
|
|
|
|
.content-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.otp-input {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Ensures content within these classes is centered */
|
|
.modal-header,
|
|
.modal-body,
|
|
.modal-footer,
|
|
#resend-container {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Center content with Flexbox if needed */
|
|
.center-flex {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
/* Stack elements vertically */
|
|
}
|
|
|
|
/* Adjust the margin of the otp-input-box for better alignment */
|
|
.otp-input-box {
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
/* Centers the box horizontally */
|
|
align-items: center;
|
|
/* Align items in the center for flex containers */
|
|
width: 100%;
|
|
}
|
|
|
|
.center-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
/* Or set a specific height */
|
|
flex-direction: column;
|
|
/* Stack children vertically */
|
|
}
|
|
|
|
/* To ensure the form takes up the necessary width */
|
|
.form-group {
|
|
width: 100%;
|
|
/* Adjust based on your layout's needs */
|
|
}
|
|
|
|
/* Custom styles for the jQuery UI Dialog */
|
|
.custom-dialog .ui-dialog-content {
|
|
background-color: #fff;
|
|
color: #333;
|
|
padding: 20px;
|
|
}
|
|
|
|
.custom-dialog .ui-dialog-titlebar {
|
|
background: #007bff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.custom-dialog .ui-dialog-buttonpane {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
|
|
background-color: #007bff;
|
|
color: #ffffff;
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.custom-dialog a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.custom-dialog a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.date-box {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
text-align: center;
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#calendar {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* Style for date checkboxes */
|
|
.date-checkboxes {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
label {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.ui-datepicker-container {
|
|
width: 100%
|
|
}
|
|
|
|
.fixedcontainer {
|
|
width: 250%;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.ui-widget {
|
|
width: 40%
|
|
}
|
|
|
|
.ui-datepicker {
|
|
padding: 3px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
left: 29.1418px;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
background-color: #f0f0f0;
|
|
border: none;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
font-size: 1.2em;
|
|
margin: 0;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-datepicker-calendar {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
/* Bold font for dates */
|
|
}
|
|
|
|
.ui-datepicker-calendar th,
|
|
.ui-datepicker-calendar td {
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-datepicker-calendar .ui-state-default {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.ui-datepicker-week-end {
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-datepicker-calendar th span {
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.booking-form-container {
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
max-width: 960px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.booking-form-container label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.booking-form-container .form-control {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.booking-form-container .btn-primary {
|
|
background-color: #017bff;
|
|
}
|
|
|
|
.white-background {
|
|
background-color: white;
|
|
/* Set the background color as needed */
|
|
border: 1px solid #ccc;
|
|
/* Optional: Add border for better visualization */
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
/* Hide overflow content during animation */
|
|
position: relative;
|
|
}
|
|
|
|
.slide-left {
|
|
animation: slideLeft 0.5s ease both;
|
|
}
|
|
|
|
.slide-right {
|
|
animation: slideRight 0.5s ease both;
|
|
}
|
|
|
|
@keyframes slideLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slideRight {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply styles to the booking-section container */
|
|
.booking-section {
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
max-width: 960px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.booking-section label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.booking-section .form-control {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.booking-section .btn-primary {
|
|
background-color: #017bff;
|
|
}
|
|
|
|
/* Apply white background to the booking-section */
|
|
#reasonforbookingSection {
|
|
background-color: #ffffff;
|
|
/* White background color */
|
|
padding: 20px;
|
|
/* Optional: Add padding for spacing */
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.progressbar {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.progress-step {
|
|
width: 100%;
|
|
height: 9px;
|
|
background-color: #e0e0e0;
|
|
/* Light gray background */
|
|
border-radius: 10px;
|
|
/* Rounded corners */
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.progress-step-active {
|
|
background-color: #4caf50;
|
|
/* Green active step */
|
|
color: white;
|
|
/* White text color */
|
|
font-weight: bold;
|
|
/* Bold font for active step */
|
|
}
|
|
|
|
.progress {
|
|
width: 100%;
|
|
height: 10px;
|
|
background-color: #ddd;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-step::before {
|
|
content: attr(data-title);
|
|
display: block;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.form {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-step {
|
|
display: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-step-active {
|
|
display: block;
|
|
}
|
|
|
|
.btn-prev,
|
|
.btn-next {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
border: none;
|
|
background-color: #337ab7;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-prev {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Media Query for small screens */
|
|
@media (max-width: 768px) {
|
|
.progress-step::before {
|
|
display: none;
|
|
/* Hide step titles on small screens */
|
|
}
|
|
}
|
|
|
|
#container {
|
|
max-width: 1183px;
|
|
}
|
|
|
|
.step-container {
|
|
position: relative;
|
|
text-align: center;
|
|
transform: translateY(-60%);
|
|
}
|
|
|
|
.step-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 29px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
background-color: #016d6f;
|
|
color: white;
|
|
border: 2px solid #016d6f;
|
|
}
|
|
|
|
.step-circle.active {
|
|
background-color: #FFFFFF;
|
|
color: #016d6f;
|
|
}
|
|
|
|
.step-line {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 50px;
|
|
width: calc(100% - 100px);
|
|
height: 2px;
|
|
background-color: #FFFFFF;
|
|
/* Set the line color here */
|
|
z-index: -1;
|
|
}
|
|
|
|
#multi-step-form {
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.custom-container {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #CCCCCC;
|
|
overflow: auto;
|
|
}
|
|
|
|
.header {
|
|
z-index: 1000;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo-img {
|
|
height: 30px;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
.header h6 {
|
|
color: white;
|
|
text-align: center;
|
|
margin: 0;
|
|
line-height: 2.1;
|
|
}
|
|
|
|
.invoice-details h3 {
|
|
margin: 5px 0;
|
|
|
|
}
|
|
|
|
.invoice-details p {
|
|
margin: 5px 0;
|
|
/* Adjusted margin for <p> tags */
|
|
}
|
|
|
|
.total-section {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.step-content p {
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.error {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
font-size: 12px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
/* Style for small thumbnail images */
|
|
.thumbnail-img {
|
|
width: 44px;
|
|
/* Adjust the width as needed */
|
|
height: 35px;
|
|
/* Adjust the height as needed */
|
|
cursor: pointer;
|
|
/* Show cursor as pointer on hover */
|
|
margin-right: 10px;
|
|
/* Optional margin between images */
|
|
}
|
|
|
|
.large-image-container {
|
|
position: fixed;
|
|
top: 10%;
|
|
left: 34%;
|
|
width: 36%;
|
|
height: 72%;
|
|
background-color: slategrey;
|
|
z-index: 1050;
|
|
/* High z-index to ensure it's on top of other content */
|
|
padding: 25px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
/* Prevents scrollbars from iframe from appearing outside the container */
|
|
}
|
|
|
|
#largeImage {
|
|
max-width: 90%;
|
|
/* Limit maximum width of large image */
|
|
max-height: 90vh;
|
|
/* Limit maximum height of large image */
|
|
display: block;
|
|
/* Ensure it behaves as a block element */
|
|
margin: 0 auto;
|
|
/* Center horizontally */
|
|
}
|
|
|
|
.btn-square-md {
|
|
width: 72px !important;
|
|
max-width: 100% !important;
|
|
max-height: 50% !important;
|
|
height: 18px !important;
|
|
text-align: center;
|
|
padding: 0px;
|
|
font-size: 2px;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
z-index: 1051;
|
|
/* Ensure close button is above the iframe */
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Take full size of the container minus any paddings if necessary */
|
|
border: none;
|
|
}
|
|
|
|
#uploadedDocsList {
|
|
list-style-type: none;
|
|
/* Removes the bullet points */
|
|
padding: 0;
|
|
/* Removes padding */
|
|
margin: 0;
|
|
/* Removes margin */
|
|
}
|
|
|
|
#uploadedDocsList li {
|
|
margin-bottom: 10px;
|
|
text-wrap: balance;
|
|
/* Adds space between items */
|
|
}
|
|
|
|
#termsModal .table td,
|
|
#termsModal .table th {
|
|
padding: 0.5rem;
|
|
/* Reducing padding */
|
|
font-size: 0.8rem;
|
|
/* Smaller font size */
|
|
}
|
|
|
|
.table-wrap td {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.swal2-container {
|
|
z-index: 9999999999999 !important;
|
|
/* Adjust this value if needed */
|
|
}
|
|
|
|
#ui-datepicker-div {
|
|
width: 40%;
|
|
}
|
|
|
|
/* Media query for mobile screens */
|
|
@media (max-width: 768px) {
|
|
#ui-datepicker-div {
|
|
width: 72%;
|
|
}
|
|
}
|
|
|
|
.highlight-disabled {
|
|
cursor: default !important;
|
|
/* Default cursor for disabled dates */
|
|
}
|
|
|
|
.form-check-label {
|
|
padding-left: 0px
|
|
}
|
|
|
|
h5 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.table-bordered {
|
|
border: 1px solid black;
|
|
/* Set the border color to black */
|
|
}
|
|
|
|
.table-bordered td,
|
|
.table-bordered th {
|
|
border-color: black;
|
|
/* Ensure that all table cells and headers have a black border */
|
|
}
|
|
|
|
.sand-clock::before {
|
|
content: "\231B";
|
|
/* Unicode for hourglass icon */
|
|
display: inline-block;
|
|
animation: move 1.5s infinite;
|
|
font-size: 1.2em;
|
|
/* Adjust size as needed */
|
|
}
|
|
|
|
/* Animation keyframes */
|
|
@keyframes move {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.snackbar {
|
|
visibility: hidden;
|
|
min-width: 250px;
|
|
margin-left: -125px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
padding: 16px;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 50%;
|
|
bottom: 30px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.snackbar.show {
|
|
visibility: visible;
|
|
animation: fadeInOut 0.5s, fadeOut 0.5s 2.5s;
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
from {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.highlight-blue .ui-state-default {
|
|
background: blue !important;
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.highlight-blue a {
|
|
background-color: blue;
|
|
color: white;
|
|
|
|
}
|
|
|
|
/* css fror toast */
|
|
/* Toast styling */
|
|
#toast {
|
|
visibility: hidden;
|
|
min-width: 200px;
|
|
margin-left: -100px;
|
|
background: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 50%;
|
|
bottom: 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#toast.show {
|
|
visibility: visible;
|
|
animation: fadein 0.5s, fadeout 0.5s 2s;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
bottom: 10px;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
bottom: 10px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- Pre-loader start -->
|
|
<div class="theme-loader">
|
|
<div class="ball-scale">
|
|
<div class='contain'>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
<div class="ring">
|
|
<div class="frame"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pre-loader end -->
|
|
<div id="pcoded" class="pcoded">
|
|
<div class="pcoded-container">
|
|
<!-- Menu header end -->
|
|
<div class="pcoded-main-container">
|
|
<!-- Menu header start -->
|
|
<nav th:replace="~{fragments/nav-user :: nav}"></nav>
|
|
<!-- Menu header end -->
|
|
<div class="pcoded-main-container">
|
|
<nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
|
|
<div class="pcoded-wrapper">
|
|
<div class="pcoded-content">
|
|
<div class="pcoded-inner-content">
|
|
<div class="page-header m-t-20">
|
|
</div>
|
|
<!-- Page-header end -->
|
|
<!-- Page body start -->
|
|
<div class="page-body">
|
|
<div class="row">
|
|
<!--<div class="col-sm-12">-->
|
|
<!-- Register your self card start -->
|
|
<div>
|
|
<div id="container" class="container mt-5">
|
|
<div class="progress px-1" style="height: 3px;">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%;"
|
|
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
<div class="step-container d-flex justify-content-between">
|
|
<div class="step-circle" onclick="displayStep(1)">1</div>
|
|
<div class="step-circle" onclick="displayStep(2)">2</div>
|
|
<div class="step-circle" onclick="displayStep(3)">3</div>
|
|
<div class="step-circle" onclick="displayStep(4)">4</div>
|
|
</div>
|
|
<form action="javascript:saveBookingDetails()" id="booking"
|
|
method="post" enctype="multipart/form-data"
|
|
onsubmit="return handleSaveAndContinueStep3()">
|
|
<input type="hidden" id="serverDate" th:value=${serverDate}>
|
|
<div class="step step-1">
|
|
<h5>Step:1</h5>
|
|
<div class="container custom-container"
|
|
style="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;overflow-x: hidden;">
|
|
<!-- Updated inline styles -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-sm-6 col-md-6 col-lg-6">
|
|
<label class="form-check-label"
|
|
for="selecthall">Select Hall:</label>
|
|
|
|
<select id="selecthall" class="form-control"
|
|
name="hallId" required
|
|
onchange="toggleHallDetailsContainer()">
|
|
<option value="">Select a hall</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<!-- Main content row -->
|
|
<div id="hallDetailsContainer" style="display: none;">
|
|
<!-- Initially hidden -->
|
|
<div class="row">
|
|
<!-- Hall Images Carousel -->
|
|
<div class="col-md-6 col-lg-6 col-sm-6">
|
|
<h6>Hall Images:</h6>
|
|
<br>
|
|
<div id="hallImagesCarousel"
|
|
class="carousel slide" data-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img id="hallImage"
|
|
class="d-block w-100"
|
|
alt="Hall Image">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev"
|
|
href="#hallImagesCarousel" role="button"
|
|
data-slide="prev">
|
|
<span class="carousel-control-prev-icon"
|
|
aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next"
|
|
href="#hallImagesCarousel" role="button"
|
|
data-slide="next">
|
|
<span class="carousel-control-next-icon"
|
|
aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6 col-sm-6">
|
|
<div id="datepicker-container"
|
|
class="fixedcontainer"></div>
|
|
<div class="row">
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color:#008000;"></button>
|
|
<span style="margin-left: 21px;">Day<br>
|
|
(Available)</span>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: #ac2bac;"></button>
|
|
<span style="margin-left: 14px;">Morning
|
|
<br>
|
|
(Available)</span>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color:#FFEA00;"></button>
|
|
<span
|
|
style="margin-left: 14px;">Evening<br>
|
|
(Available)</span>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: red;"></button>
|
|
<span style="margin-left: 14px;">Not
|
|
Available</span>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: blue"></button>
|
|
<span style="margin-left: 14px;">Gcc
|
|
Blocked</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<!-- Hall Details -->
|
|
<div class="col-md-6 col-lg-6 col-sm-6">
|
|
<div id="hallDetails">
|
|
<br>
|
|
<h6><b>Hall Details:</b></h6>
|
|
<p>Zone: <span id="zone"></span></p>
|
|
<p>Address: <span id="address"></span></p>
|
|
<p>Landmark: <span id="landmark"></span></p>
|
|
<p>Total Area: <span
|
|
id="hallareainsqft"></span></p>
|
|
<p>Seating Capacity: <span
|
|
id="seatingCapacity"></span></p>
|
|
<p>Parking Capacity: <span
|
|
id="parkingCapacity"></span></p>
|
|
<input type="hidden" id="statichallId">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<!-- Amount Details -->
|
|
<div class="col-md-6 col-lg-6 col-sm-6">
|
|
<div id="amountDetails">
|
|
<br>
|
|
<h6><b>Amount Details:</b></h6>
|
|
<p>Security Deposit: Rs <span
|
|
id="rentAmount"></span></p>
|
|
<p>Full Day Rent: Rs <span
|
|
id="fullDayAmount"></span></p>
|
|
<p>Half Day Security Deposit: Rs <span
|
|
id="halfrentAmount"></span></p>
|
|
<p>Half Day Rent: Rs <span
|
|
id="halfDayAmount"></span></p>
|
|
<p>GST: <span id="gst"></span>%</p>
|
|
<p>EB for 1 Unit:* Rs <span
|
|
id="ebunit"></span></p>
|
|
<p>CareTaker Number: <span
|
|
id="caretakerNumber"></span></p>
|
|
<input type="hidden" id="depositAmount"
|
|
name="depositamount" value="100">
|
|
<input type="hidden" id="hallamount"
|
|
name="hallamount" value="100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row d-flex justify-content-center align-items-center">
|
|
<div
|
|
class="col-md-12 col-sm-12 col-lg-12 d-flex justify-content-center">
|
|
<!-- Center align the button -->
|
|
<button type="button"
|
|
class="btn btn-primary next-step"
|
|
id="bookandcontinue"
|
|
style="background-color: #016d6f; color: white;">
|
|
Book
|
|
& Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step step-2">
|
|
<!-- Step 2 form fields here -->
|
|
<h4 style="margin-left:10px">Step 2</h4>
|
|
<div class="container custom-container"
|
|
style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
|
|
<!-- Updated inline styles -->
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class=" row col-md-12 col-lg-12 col-sm-12">
|
|
<table
|
|
class="table table-bordered table-align center-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="td-align" style="word-wrap: break-word;
|
|
white-space: normal;"><strong>Hall
|
|
Name:</strong>
|
|
<span
|
|
id="hallNameDisplayStep2"></span>
|
|
</td>
|
|
<td class="td-align"><strong>Zone:
|
|
</strong>
|
|
<span id="zoneStep2"></span>
|
|
</td>
|
|
<td class="td-align">
|
|
<strong>Division: </strong>
|
|
<span id="divisionStep2"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color:#008000;"></button>
|
|
<p style="margin-left: -7px;">Day(Available)
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: #ac2bac;"></button>
|
|
<p style="margin-left: -7px;;">
|
|
Morning(Available)</p>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color:#FFEA00;"></button>
|
|
<p style="margin-left: -8px;">
|
|
Evening(Available)</p>
|
|
</div>
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: red;"></button>
|
|
<P style="margin-left: -4px;">
|
|
Not(Available)</P>
|
|
</div>
|
|
|
|
<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: blue"></button>
|
|
<p style="margin-left:-1px;">Gcc
|
|
Blocked</p>
|
|
</div>
|
|
|
|
<!--<div class="col col-lg-2 col-sm-2 col-md-2">
|
|
<button type="button"
|
|
class="btn btn-primary btn-square-md"
|
|
style="background-color: lightpink"></button>
|
|
<p style="margin-left: 6px;">Temporary
|
|
Blocked</p>
|
|
</div>-->
|
|
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label>Relationship of the Functionary:*</label>
|
|
<select id="relation" name="relation"
|
|
class="form-control"
|
|
onchange="validateForm()" required>
|
|
<option value="0">Select</option>
|
|
<option value="self">Self</option>
|
|
<option value="son">Son</option>
|
|
<option value="daughter">Daughter</option>
|
|
<option value="granddaughter">GrandDaughter
|
|
</option>
|
|
<option value="grandson">GrandSon</option>
|
|
<option value="sister">Sister</option>
|
|
<option value="brother">Brother</option>
|
|
</select>
|
|
</div>
|
|
<!--edit code-->
|
|
<input type="hidden" id="reasonMaxDates">
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label>Reason for
|
|
Booking:*</label>
|
|
<select type="text" class="form-control"
|
|
id="reasonforbooking" name="reasonId"
|
|
required>
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<!--end of edit code-->
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label for="startDateInput">Start Date:*</label>
|
|
<!-- Input field for start date -->
|
|
<input type="text" id="startDateInput"
|
|
name="startDate"
|
|
class="date-input form-control"
|
|
style="background-color:white" readonly
|
|
required>
|
|
</div>
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label for="endDateInput">End Date:*</label>
|
|
<select id="endDateInput" name="endDate"
|
|
class="form-control" disabled>
|
|
<option value="0">Select</option>
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<input type="hidden" id="numDaysCount" val=""
|
|
name="days">
|
|
<input type="hidden" id="noofdaysbetweenstartend"
|
|
val="" name="daysrange">
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
|
|
<label for="startPeriodDropdown">Start
|
|
Period:*</label>
|
|
|
|
<select id="startPeriodDropdown"
|
|
name="startingSlot" class="form-control"
|
|
required>
|
|
<option value="0">Select</option>
|
|
<option value="1">Morning (6:00
|
|
AM)
|
|
</option>
|
|
<option value="2">Afternoon (2:00
|
|
PM)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label>End
|
|
Period:*</label>
|
|
<select id="endPeriodDropdown" name="endingSlot"
|
|
class="form-control" required>
|
|
<option value="0">Select</option>
|
|
<option value="1">Afternoon (2:00
|
|
PM)
|
|
</option>
|
|
<option value="2">Evening (10:00
|
|
PM)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<label for="numDaysCountDisplay">Selected
|
|
Slots:</label>
|
|
<textarea type="text" id="numDaysCountDisplay"
|
|
class="form-control" readonly
|
|
style="background-color:white"></textarea>
|
|
</div>
|
|
<div class="col-sm-4 col-lg-6 col-md-4">
|
|
<h4>Booking Summary:</h4>
|
|
<p id="summary" val=""></p>
|
|
</div>
|
|
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div
|
|
class="col-md-12 col-lg-12 col-sm-12 text-center">
|
|
<!-- Center align the button -->
|
|
<button type="button"
|
|
class="btn btn-primary prev-step"
|
|
style="background-color: #016d6f; color: white;float: left;">
|
|
Previous
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-warning reset-step"
|
|
style=" background-color: orangered; color: white; margin: auto;">
|
|
Reset
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-primary next-step"
|
|
style="background-color: #016d6f; color: white; float: right;">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step step-3">
|
|
<!-- Step 3 form fields here -->
|
|
<h4 style=" margin-left: 10px;">Step 3</h4>
|
|
<div class="container custom-container"
|
|
style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
|
|
<div>
|
|
<div class="card-body">
|
|
<div class="col-md-12 col-sm-12 col-lg-12">
|
|
<table
|
|
class="table table-bordered table-align center-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="td-align" style="word-wrap: break-word;
|
|
white-space: normal;"><strong>Hall
|
|
Name:</strong><span
|
|
id="hallNameDisplayStep3"></span>
|
|
</td>
|
|
<td class="td-align"><strong>Zone:
|
|
</strong><span
|
|
id="zoneStep3"></span>
|
|
</td>
|
|
<td class="td-align">
|
|
<strong>Division:
|
|
</strong><span
|
|
id="divisionStep3"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-sm-4 col-lg-4 col-md-4">
|
|
<input type="hidden" id="userId" name="userId">
|
|
<label class="form-check-label"
|
|
for="uploadDocument">Upload Document for
|
|
Booking:*</label>
|
|
<input type="text" id="showReasonLabel" readonly
|
|
class="form-control"
|
|
style="background-color:white">
|
|
<!-- <div class="col-sm-4 col-lg-4 col-md-4">
|
|
<label class="form-check-label"
|
|
for="reasonforbooking">Reason for Booking:*</label>
|
|
<select type="text" class="form-control"
|
|
id="reasonforbooking" name="reasonId"
|
|
required>
|
|
</select>
|
|
</div> -->
|
|
</div>
|
|
<br>
|
|
<div id="reasonFieldsContainer">
|
|
</div>
|
|
<input type="hidden" name="bookingId" id="bookingId"
|
|
value="0">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-12 col-sm-12 text-center">
|
|
<!-- Center align the button -->
|
|
<button type="button"
|
|
class="btn btn-primary prev-step"
|
|
style="background-color: #016d6f; color: white; float: left;">
|
|
Previous
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-warning reset-step"
|
|
style="background-color: orangered; color: white; margin: auto;">
|
|
Reset
|
|
</button>
|
|
<button type="submit"
|
|
class="btn btn-primary next-step"
|
|
style="background-color: #016d6f; color: white; float: right;"
|
|
disabled>Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="step step-4">
|
|
<h4 style="margin-left:166px">Step 4</h4>
|
|
<div class="container custom-container">
|
|
<div class="header"
|
|
style="background-color: rgb(21,69,93); position: relative;">
|
|
<img src="media/images/logo-sm.png" alt="Logo"
|
|
style="position: absolute; left: 10px; top: 7px; height: 30px;">
|
|
<h6
|
|
style="color: white; text-align: center; line-height: 3.1;">
|
|
Payment Details for Confirmation
|
|
<span id="timer"
|
|
style="display: inline; float:right;margin-right:10px;">
|
|
<span class="sand-clock"></span>
|
|
<!-- Hourglass icon -->
|
|
<span id="timerText">Payment Closes in 15:00</span>
|
|
<!-- Timer text -->
|
|
</span>
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<table
|
|
class="table table-bordered center-table table-align">
|
|
<tbody>
|
|
<tr>
|
|
<td class="td-align"><strong>Full Name:</strong>
|
|
<span id="name_td"></span>
|
|
</td>
|
|
<td class="td-align">
|
|
<strong>Mobile Number:</strong> <span
|
|
id="mobileno_td"></span>
|
|
</td>
|
|
<td class="td-align"><strong>User Type:</strong>
|
|
<span id="usertype_td"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table
|
|
class="table table-bordered center-table table-align">
|
|
<tbody>
|
|
<tr>
|
|
<td class="td-align"><strong>Hall
|
|
Name:</strong></td>
|
|
<td class="td-align"
|
|
style="text-wrap:wrap;">
|
|
<span id="selecthall_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>No. of
|
|
Days:</strong>
|
|
</td>
|
|
<td class="td-align"><span
|
|
id="numDaysCount_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>Start
|
|
Date:</strong>
|
|
</td>
|
|
<td class="td-align"><span
|
|
id="startDateInput_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>End
|
|
Date:</strong></td>
|
|
<td class="td-align"><span
|
|
id="endDateInput_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>Starting Slot &
|
|
Ending Slot:</strong>
|
|
</td>
|
|
<td class="td-align"><span
|
|
id="startingslot_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>Uploaded
|
|
Documents:</strong></td>
|
|
<td class="td-align">
|
|
<!-- List to display uploaded docs with small images and names -->
|
|
<div id="uploadedDocsList"
|
|
class="uploaded-docs-list">
|
|
<!-- Each item in the list will have a small image and name -->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<div>
|
|
<div id="largeImageContainer"
|
|
class="large-image-container"
|
|
style="display: none;">
|
|
<button id="closeButton" type="button"
|
|
class="close-button">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<img id="largeImage" src=""
|
|
alt="Large Image">
|
|
</div>
|
|
</div>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table
|
|
class="table table-bordered center-table table-align">
|
|
<tbody>
|
|
<tr>
|
|
<td class="td-align"><strong>Reason for
|
|
Booking:</strong>
|
|
</td>
|
|
<td class="td-align"><span
|
|
id="reasonforbooking_td"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong> Hall
|
|
Amount:</strong>
|
|
</td>
|
|
<td><span id="actualhallAmount_td">Rs</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align">
|
|
<strong>Discount:</strong>
|
|
</td>
|
|
<td><span id="discount_td">0%</span>
|
|
</td>
|
|
</tr>
|
|
<tr id="additionalcharges" style="display:none">
|
|
<td class="td-align">
|
|
<strong>Rent Amount:</strong>
|
|
</td>
|
|
<td><span id="rentamount_td">0</span></td>
|
|
</tr>
|
|
<tr id="additionalcharges_tr"
|
|
style="display:none">
|
|
<td class="td-align">
|
|
<strong>Additional charges (Cleaning +
|
|
P.A.
|
|
System + E.B):</strong>
|
|
</td>
|
|
<td><span id="additionalcharges_td">0</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="td-align"><strong>Net
|
|
Amount:</strong>
|
|
</td>
|
|
<td><span id="hallAmount_td">Rs</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>GST
|
|
Amount:</strong></td>
|
|
<td><span id="gst_td">Rs</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>Deposit
|
|
Amount:</strong></td>
|
|
<td><span id="depositAmount_td">Rs</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="td-align"><strong>Total
|
|
Amount:</strong>
|
|
</td>
|
|
<td><span id="totalAmount_td">Rs</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<!-- Center align the button -->
|
|
<button type="button" class="btn btn-primary prev-step"
|
|
style="background-color: #016d6f; color: white;">
|
|
Previous
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div align="center">
|
|
<label data-toggle="tooltip" data-placement="top"
|
|
title="Click To View">
|
|
<input type="checkbox" id="checkin"
|
|
onchange="togglePaymentButton(this)" />
|
|
<a href="#" id="termsLink">I agree to the Terms and
|
|
Conditions</a>
|
|
</label>
|
|
<button type="button" id="confirmPaymentBtn"
|
|
class="btn btn-success" onclick="paymentStart()"
|
|
disabled>Confirm Payment
|
|
</button>
|
|
<input type="hidden" id="btnSubmit"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page body end -->
|
|
</div>
|
|
</div>
|
|
<!-- Main-body end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal HTML for Bootstrap 5 -->
|
|
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-content" style="height: 100vh;">
|
|
<iframe src="media/images/CC Rules & Regulations for Online _Tamil.pdf" width="100%"
|
|
height="600px"></iframe>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div th:replace="~{fragments/loginreg :: div}"></div>
|
|
<script th:replace="~{fragments/script :: script}"></script>
|
|
<script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
|
|
<script th:replace="~{fragments/PaymentScript :: script}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
|
|
|
|
<!-- Payment script end-->
|
|
<script>
|
|
let reasonMaxData = new Map(); // in beginning
|
|
let reasonLabelData = new Map();
|
|
let reasoncode = new Map();
|
|
|
|
document.getElementById('termsLink').addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
$('#termsModal').modal('show');
|
|
});
|
|
|
|
function togglePaymentButton(checkbox) {
|
|
document.getElementById('confirmPaymentBtn').disabled = !checkbox.checked;
|
|
}
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const hallId = urlParams.get('hallId');
|
|
$(document).ready(function () {
|
|
if (hallId != null) {
|
|
getHallDetails(hallId);
|
|
$("#selecthall").val(hallId);
|
|
}
|
|
});
|
|
var countdown; // Global variable to hold the interval
|
|
var totalTime = 15 * 60; // 15 minutes in seconds
|
|
// var totalTime = 1 * 60; // for testing
|
|
var timerElement = document.getElementById("timerText");
|
|
var confirmPaymentBtn = document.getElementById("confirmPaymentBtn");
|
|
var checkInCheckbox = document.getElementById("checkin");
|
|
var startTime; // Variable to hold the start timestamp
|
|
|
|
// Function to format time in MM:SS
|
|
function formatTime(seconds) {
|
|
var minutes = Math.floor(seconds / 60);
|
|
var seconds = seconds % 60;
|
|
return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
|
|
}
|
|
|
|
// Function to start or restart the timer
|
|
function startTimer() {
|
|
if (countdown) {
|
|
clearInterval(countdown); // Clear existing interval if any
|
|
}
|
|
|
|
// Record the start time in milliseconds
|
|
startTime = Date.now();
|
|
|
|
// Function to update the timer
|
|
function updateTimer() {
|
|
// Calculate the elapsed time in seconds
|
|
var elapsed = Math.floor((Date.now() - startTime) / 1000);
|
|
var timeLeft = totalTime - elapsed;
|
|
|
|
if (timeLeft <= 0) {
|
|
clearInterval(countdown);
|
|
confirmPaymentBtn.disabled = true; // Disable the Confirm Payment button when time is up
|
|
checkInCheckbox.disabled = true; // Disable the Check-in checkbox when time is up
|
|
timerElement.innerHTML = "Time expired"; // Optionally update the message
|
|
} else {
|
|
timerElement.innerHTML = "Payment Closes in " + formatTime(timeLeft);
|
|
confirmPaymentBtn.disabled = !checkInCheckbox.checked;
|
|
checkInCheckbox.disabled = false; // Keep checkbox enabled until time is up
|
|
}
|
|
}
|
|
|
|
// Display initial time
|
|
timerElement.innerHTML = "Payment Closes in " + formatTime(totalTime);
|
|
|
|
// Update the timer every second
|
|
countdown = setInterval(updateTimer, 1000); // 1 second interval
|
|
}
|
|
|
|
// Function to reset the timer
|
|
function resetTimer() {
|
|
startTime = Date.now(); // Reset the start time to now
|
|
startTimer();
|
|
}
|
|
|
|
var currentStep = 1;
|
|
var updateProgressBar;
|
|
var userId;
|
|
var bookingId;
|
|
let selectedHallName = '';
|
|
let selectedZone = '';
|
|
|
|
// Assume userLoggedIn is a variable indicating the user's login status
|
|
function toggleNextButton(step) {
|
|
var nextButton = document.querySelector('.step-' + step + ' .next-step');
|
|
var fields = document.querySelectorAll('.step-' + step + ' [required]');
|
|
var allFieldsFilled = true;
|
|
fields.forEach(function (field) {
|
|
if (!field.value) {
|
|
allFieldsFilled = false;
|
|
}
|
|
});
|
|
|
|
if (allFieldsFilled) {
|
|
nextButton.disabled = false; // Enable the button
|
|
} else {
|
|
nextButton.disabled = true; // Disable the buttonn
|
|
}
|
|
}
|
|
|
|
// Call the function for Step 1 when the page loads
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// toggleNextButton(1);
|
|
toggleNextButton(2);
|
|
toggleNextButton(3);
|
|
});
|
|
|
|
document.querySelectorAll('.step-2 [required]').forEach(function (field) {
|
|
field.addEventListener('input', function () {
|
|
toggleNextButton(2);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.step-3 [required]').forEach(function (field) {
|
|
field.addEventListener('input', function () {
|
|
toggleNextButton(3);
|
|
});
|
|
});
|
|
|
|
function handleSaveAndContinueStep3() {
|
|
if (isLogin) {
|
|
CheckBookingLimitation(function (isAllowed) {
|
|
if (isAllowed) {
|
|
saveBookingDetails();
|
|
}
|
|
});
|
|
} else {
|
|
showAlertForLogin();
|
|
}
|
|
return false;
|
|
}
|
|
|
|
|
|
// Function to show SweetAlert for login
|
|
function showAlertForLogin() {
|
|
Swal.fire({
|
|
title: 'Mobile Number Not Registered!',
|
|
text: 'Please log in to proceed.',
|
|
icon: 'info',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Login',
|
|
cancelButtonText: 'Cancel',
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$('#loginModal').modal('show');
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelector(".step-3 .next-step").addEventListener("click", function () {
|
|
displayStep(3);
|
|
});
|
|
|
|
function fetchReasonsAndPopulateDropdown() {
|
|
// Make an AJAX call to fetch all reasons
|
|
$.ajax({
|
|
url: '/communityhall/admin/api/getReasons',
|
|
type: 'GET',
|
|
dataType: 'json'
|
|
})
|
|
.done(function (data) {
|
|
const reasonDropdown = $('#reasonforbooking');
|
|
reasonDropdown.empty();
|
|
reasonDropdown.append($('<option selected value="0"></option>').text('Select a reason'));
|
|
|
|
// Populate the dropdown and store reason metadata
|
|
$.each(data, function (index, reason) {
|
|
reasonDropdown.append($('<option></option>').attr('value', reason.reasonId).text(reason.reason));
|
|
reasonMaxData.set(reason.reasonId, reason.maxdays);
|
|
reasonLabelData.set(reason.reasonId, reason.reason);
|
|
reasoncode.set(reason.reasonId, reason.reasoncode);
|
|
});
|
|
|
|
// Add change event listener to the dropdown
|
|
reasonDropdown.change(function () {
|
|
const selectedReasonId = $(this).val();
|
|
const selectedReasonCode = reasoncode.get(parseInt(selectedReasonId));
|
|
const selectedHallId = document.getElementById("statichallId").value; // Getting the selected hall ID
|
|
|
|
// Make another AJAX call to get hall details based on the selected hall ID
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/communityhall/user/api/gethalldetails/' + selectedHallId,
|
|
success: function (response) {
|
|
// console.log(response);
|
|
const isSGE = response.sge; // Fetch SGE status from the response
|
|
const isCGE = response.cge; // Fetch CGE status from the response
|
|
|
|
// Check for State Government Event (SGE)
|
|
if (selectedReasonCode === 'SGE' && !isSGE) {
|
|
// Show popup for State govt event
|
|
Swal.fire({
|
|
title: 'Government Event',
|
|
text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for state government events.',
|
|
icon: 'info',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed && !isSGE) {
|
|
window.location.href = '/communityhall/hallbookingform';
|
|
}
|
|
});
|
|
}
|
|
// Check for Central Government Event (CGE)
|
|
else if (selectedReasonCode === 'CGE' && !isCGE) {
|
|
// Show popup for Central govt event
|
|
Swal.fire({
|
|
title: 'Government Event',
|
|
text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for central government events.',
|
|
icon: 'info',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed && !isCGE) {
|
|
// Redirect only if hallId is not 3
|
|
window.location.href = '/communityhall/hallbookingform';
|
|
}
|
|
});
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching hall details:', error);
|
|
}
|
|
});
|
|
});
|
|
})
|
|
.fail(function (xhr, status, error) {
|
|
console.error('Error fetching reasons:', error);
|
|
});
|
|
}
|
|
|
|
var ch = 0;
|
|
|
|
function saveBookingDetails() {
|
|
//alert("saveBookingDetails call:-"+ch++);
|
|
$("#startPeriodDropdown").prop("disabled", false);
|
|
$("#endPeriodDropdown").prop("disabled", false);
|
|
var form = document.getElementById('booking');
|
|
var formData = new FormData(form);
|
|
// Debugging: Log each FormData entry
|
|
for (var pair of formData.entries()) {
|
|
//console.log(pair[0] + ', ', pair[1]);
|
|
}
|
|
$.ajax({
|
|
url: '/communityhall/user/api/saveTheRequest2',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (response) {
|
|
// console.log("response:--" + response.status);
|
|
|
|
if (response.status === 'slotOccupied') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Slot Occupied',
|
|
text: 'The selected slot is already occupied. Please choose a different slot.',
|
|
confirmButtonText: 'OK'
|
|
}).then(function () {
|
|
location.reload(); // Example: reload the page
|
|
});
|
|
} else if (response.status === 'pastdate') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Past Date',
|
|
text: 'Start date cannot be in the past',
|
|
confirmButtonText: 'OK'
|
|
}).then(function () {
|
|
location.reload();
|
|
});
|
|
} else if (response.status === 'futuredate') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Future Date',
|
|
text: 'Start date cannot be more than 6 months from today',
|
|
confirmButtonText: 'OK'
|
|
}).then(function () {
|
|
location.reload();
|
|
});
|
|
} else {
|
|
userId = response.userId;
|
|
bookingId = response.bookingId;
|
|
$("#bookingId").val(response.bookingId);
|
|
$("#userId").val(response.userId);
|
|
$("#selecthall_td").html(response.hallName);
|
|
$("#numDaysCount_td").html(response.NoOfDay);
|
|
$("#startDateInput_td").html(response.startDate);
|
|
$("#endDateInput_td").html(response.endDate);
|
|
$("#reasonforbooking_td").html(response.reason);
|
|
$("#hallAmount_td").html(response.hallAmount);
|
|
|
|
function getTimeOfDay(slot) {
|
|
if (slot === 1) {
|
|
return "Morning";
|
|
} else if (slot === 2) {
|
|
return "Evening";
|
|
} else {
|
|
return "Invalid slot";
|
|
}
|
|
}
|
|
|
|
$("#startingslot_td").html(getTimeOfDay(response.startingSlot) + " to " + getTimeOfDay(response.endingSlot));
|
|
/*$("#gst_td").html(response.gst);
|
|
$("#depositAmount_td").html(response.depositAmount);
|
|
$("#discount_td").html(response.discount + "%");
|
|
$("#actualhallAmount_td").html(response.actualhallamount);
|
|
$("#totalAmount_td").html(response.totalAmount);*/
|
|
$("#name_td").html(response.username);
|
|
$("#mobileno_td").html(response.mobileNo);
|
|
$("#usertype_td").html(response.userType);
|
|
/*if (response.reasoncode === 'SGE') {
|
|
document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
|
|
document.getElementById("additionalcharges_tr").style.display = 'table-row'
|
|
$("#additionalcharges_td").html(response.additionalcharges);
|
|
$("#rentamount_td").html(0);
|
|
$("#actualhallAmount_td").html(response.actualhallamount);
|
|
$("#hallAmount_td").html(response.additionalcharges);
|
|
$("#totalAmount_td").html(response.totalAmount);
|
|
} else {
|
|
document.getElementById("additionalcharges").style.display = 'none'; // Hide row
|
|
document.getElementById("additionalcharges_tr").style.display = 'none'; // Hide row
|
|
}*/
|
|
|
|
if (response.reasoncode === 'SGE') {
|
|
document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
|
|
document.getElementById("additionalcharges_tr").style.display = 'table-row'
|
|
$("#additionalcharges_td").html(response.additionalcharges);
|
|
$("#rentamount_td").html(0);
|
|
$("#actualhallAmount_td").html(response.actualhallamount);
|
|
$("#hallAmount_td").html(response.additionalcharges);
|
|
$("#totalAmount_td").html(response.totalAmount);
|
|
$("#hallAmount_td").html(response.hallAmount);
|
|
$("#gst_td").html(response.gst);
|
|
$("#depositAmount_td").html(response.depositAmount);
|
|
$("#discount_td").html(response.discount + "%");
|
|
|
|
} else if (response.reasoncode === 'CGE') {
|
|
document.getElementById("additionalcharges").style.display = 'table-row'; // Show row
|
|
document.getElementById("additionalcharges_tr").style.display = 'table-row'
|
|
$("#additionalcharges_td").html(response.additionalcharges);
|
|
$("#hallAmount_td").html(response.hallAmount)
|
|
$("#rentamount_td").html(response.rentAmount);
|
|
$("#actualhallAmount_td").html(response.actualhallamount);
|
|
$("#hallAmount_td").html(response.netAmount);
|
|
$("#gst_td").html(response.gstAmount);
|
|
$("#depositAmount_td").html(response.depositAmount);
|
|
$("#discount_td").html(response.discount + "%");
|
|
$("#totalAmount_td").html(response.totalAmount);
|
|
|
|
} else {
|
|
document.getElementById("additionalcharges").style.display = 'none'; // Hide row
|
|
document.getElementById("additionalcharges_tr").style.display = 'none'; // Hide row
|
|
$("#gst_td").html(response.gst);
|
|
$("#depositAmount_td").html(response.depositAmount);
|
|
$("#discount_td").html(response.discount + "%");
|
|
$("#actualhallAmount_td").html(response.actualhallamount);
|
|
$("#totalAmount_td").html(response.totalAmount);
|
|
}
|
|
displayDocumentDetails(response.uploadedDocs);
|
|
resetTimer();
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching hall names:', error);
|
|
}
|
|
});
|
|
$("#startPeriodDropdown").prop("disabled", true);
|
|
$("#endPeriodDropdown").prop("disabled", true);
|
|
}
|
|
|
|
|
|
function displayDocumentDetails(uploadedDocs) {
|
|
const uploadedDocsList = $("#uploadedDocsList");
|
|
uploadedDocsList.empty(); // Clear existing items
|
|
|
|
uploadedDocs.forEach(function (doc) {
|
|
const listItem = $('<li>');
|
|
const thumbnail = $('<img>').addClass('thumbnail-img');
|
|
|
|
// Function to truncate the document name
|
|
function truncateName(name, maxLength) {
|
|
if (name.length <= maxLength) {
|
|
return name;
|
|
}
|
|
|
|
const extIndex = name.lastIndexOf('.');
|
|
const ext = name.substring(extIndex);
|
|
const truncatedName = name.substring(0, maxLength - ext.length - 3) + '...' + ext;
|
|
return truncatedName;
|
|
}
|
|
|
|
const truncatedName = truncateName(doc.documentName, 10); // Adjust the maxLength as needed
|
|
|
|
if (doc.bookingDocUrl.endsWith('.pdf')) {
|
|
// Set the thumbnail to a default image for PDFs
|
|
const defaultPdfThumbnail = 'media/images/pdf.jpg'; // Replace with your default thumbnail image path
|
|
thumbnail.attr('src', defaultPdfThumbnail);
|
|
listItem.append(thumbnail).append(' ' + truncatedName);
|
|
|
|
thumbnail.on('click', function () {
|
|
// Create an iframe to display the PDF
|
|
const pdfViewer = $('<iframe>').attr({
|
|
src: doc.bookingDocUrl,
|
|
width: '100%',
|
|
height: '600px' // Adjust as needed
|
|
});
|
|
|
|
// Hide the image and show the PDF viewer
|
|
$('#largeImage').hide();
|
|
$('#largeImageContainer').find('iframe').remove();
|
|
$('#largeImageContainer').append(pdfViewer);
|
|
$('#largeImageContainer').show();
|
|
});
|
|
} else {
|
|
// For other document types, show the actual image as thumbnail
|
|
thumbnail.attr('src', doc.bookingDocUrl);
|
|
listItem.append(thumbnail).append(' ' + truncatedName);
|
|
|
|
thumbnail.on('click', function () {
|
|
$('#largeImageContainer iframe').remove();
|
|
$('#largeImage').attr('src', doc.bookingDocUrl).show();
|
|
$('#largeImageContainer').show();
|
|
});
|
|
}
|
|
|
|
uploadedDocsList.append(listItem);
|
|
});
|
|
}
|
|
|
|
|
|
$("#closeButton").on('click', function () {
|
|
$('#largeImageContainer').hide(); // Hide the large image container
|
|
$('#largeImage').attr('src', '').hide(); // Reset and hide image
|
|
$('#largeImageContainer iframe').remove(); // Remove iframe if present
|
|
});
|
|
|
|
function fetchReasonDocumentDetails(reasonId) {
|
|
$('#reasonMaxDates').val(reasonMaxData.get(reasonId));
|
|
$('#showReasonLabel').val(reasonLabelData.get(reasonId));
|
|
$.ajax({
|
|
url: '/communityhall/admin/api/getReasonDocumentDetails',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
data: { reasonId: reasonId }
|
|
})
|
|
.done(function (data) {
|
|
validateForm();
|
|
|
|
const reasonFieldsContainer = $('#reasonFieldsContainer');
|
|
reasonFieldsContainer.empty();
|
|
const rowDiv = $('<div class="row"></div>');
|
|
$.each(data, function (index, detail) {
|
|
if (detail.addTextField === true) {
|
|
const fieldDiv = $('<div class="col-sm-4 form-group"></div>');
|
|
const label = $('<label>' + detail.fieldName + ' *</label>');
|
|
const input = $('<input type="text" class="form-control" name="' + detail.fieldName + '" required>');
|
|
// Add event listener for input validation
|
|
input.on('input', function () {
|
|
// Replace any non-letter characters with an empty string
|
|
//this.value = this.value.replace(/[^a-zA-Z]/g, '');
|
|
});
|
|
|
|
fieldDiv.append(label);
|
|
fieldDiv.append(input);
|
|
rowDiv.append(fieldDiv);
|
|
}
|
|
|
|
if (detail.addDocumentField === true) {
|
|
const fieldDiv2 = $('<div class="col-sm-4 form-group"></div>');
|
|
const fileInput = $('<input type="file" class="form-control file-upload-field" id="upload" name="' + detail.docFieldName + '" required accept=".jpg, .jpeg, .pdf">');
|
|
fieldDiv2.append('<label>' + detail.docFieldName + '*</label>').append(fileInput);
|
|
rowDiv.append(fieldDiv2);
|
|
}
|
|
});
|
|
reasonFieldsContainer.append(rowDiv);
|
|
})
|
|
|
|
.fail(function (xhr, status, error) {
|
|
console.error('Error fetching reason document details:', error);
|
|
});
|
|
}
|
|
|
|
// Call the function to fetch reasons and populate the dropdown when the document is ready
|
|
$(document).ready(function () {
|
|
fetchReasonsAndPopulateDropdown();
|
|
$('#reasonforbooking').change(function () {
|
|
const selectedReasonId = parseInt($(this).val()); // Convert the value to an integer
|
|
fetchReasonDocumentDetails(selectedReasonId);
|
|
});
|
|
});
|
|
|
|
// Function to toggle hall details container and fetch hall details
|
|
function toggleHallDetailsContainer() {
|
|
var selectBox = document.getElementById("selecthall");
|
|
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
|
|
var hallDetailsContainer = document.getElementById("hallDetailsContainer");
|
|
if (selectedValue !== "") {
|
|
hallDetailsContainer.style.display = "block"; // Show hall details container if a hall is selected
|
|
// Get the selected hall ID
|
|
var hallId = selectBox.options[selectBox.selectedIndex].value;
|
|
getHallDetails(hallId); // Fetch hall details
|
|
// Other code for displaying selected details
|
|
} else {
|
|
hallDetailsContainer.style.display = "none"; // Hide hall details container if no hall is selected
|
|
// Clear the selected details in Step 2 and Step 3
|
|
$('#hallNameDisplayStep2').text('');
|
|
$('#hallNameDisplayStep3').text('');
|
|
$('#zoneStep2').text('');
|
|
$('#zoneStep3').text('');
|
|
$('#divisionStep2').text('');
|
|
$('#divisionStep3').text('');
|
|
|
|
// Clear other details if needed
|
|
}
|
|
}
|
|
|
|
function togglePaymentButton(checkbox) {
|
|
var confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
|
|
confirmPaymentBtn.disabled = !checkbox.checked;
|
|
}
|
|
|
|
// Update the displayStep function to pass hallName to Step 4
|
|
function displayStep(stepNumber) {
|
|
if (stepNumber >= 1 && stepNumber <= 4) {
|
|
if (validateStep(currentStep)) {
|
|
$(".step-" + currentStep).hide();
|
|
$(".step-" + stepNumber).show();
|
|
currentStep = stepNumber;
|
|
updateProgressBar();
|
|
|
|
// Populate hallName, zone, and division in Step 2 and Step 3
|
|
if (stepNumber === 2 || stepNumber === 3) {
|
|
$('#hallNameDisplayStep2').text(selectedHallName);
|
|
$('#hallNameDisplayStep3').text(selectedHallName);
|
|
$('#zoneStep2').text(zone);
|
|
$('#zoneStep3').text(zone);
|
|
$('#divisionStep2').text('');
|
|
$('#divisionStep3').text('');
|
|
|
|
$('#selecthall_td').text(selectedHallName);
|
|
}
|
|
|
|
// Handle displaying the SweetAlert in Step 3
|
|
} else {
|
|
//alert("Please fill in all required fields before proceeding.");
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function validateStep(stepNumber) {
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('.step').hide();
|
|
$('.step-1').show();
|
|
var currentStep = 1; // Assuming you have this variable defined somewhere in your code
|
|
|
|
// Function to validate step 3
|
|
function validateStep3() {
|
|
let isValid = true;
|
|
let selectedReason = $('#reasonforbooking').val();
|
|
// Check if a reason is selected
|
|
if (!selectedReason) {
|
|
isValid = false;
|
|
} else {
|
|
// Iterate through each input associated with the selected reason
|
|
$(`#reasonFieldsContainer .${selectedReason} input[type="text"], #reasonFieldsContainer .${selectedReason} input[type="file"]`).each(function () {
|
|
if ($(this).prop('required') && !$(this).val()) {
|
|
isValid = false;
|
|
return false; // Exit the loop early if any required field is empty
|
|
}
|
|
});
|
|
}
|
|
|
|
// Enable/disable the next button based on validation
|
|
$('.next-step').prop('disabled', !isValid);
|
|
}
|
|
|
|
// Event listener for reason dropdown change
|
|
$('#reasonforbooking').change(function () {
|
|
let selectedReason = $(this).val();
|
|
$("#startDateInput").val('');
|
|
$("#endDateInput").val(0);
|
|
$("#startPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#endPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#numDaysCount").val('');
|
|
$("#numDaysCountDisplay").val('');
|
|
$('#summary').html('');
|
|
// Show/hide fields based on selected reason
|
|
$('#reasonFieldsContainer').children().hide();
|
|
if (selectedReason) {
|
|
$(`#reasonFieldsContainer .${selectedReason}`).show();
|
|
}
|
|
// Validate the fields for the selected reason
|
|
validateStep3();
|
|
});
|
|
|
|
// Event listener for input changes within reason fields in Step 3
|
|
$('#reasonFieldsContainer').on('change', 'input, select', function () {
|
|
validateStep3();
|
|
});
|
|
|
|
$(".next-step").click(function () {
|
|
var valid = true;
|
|
|
|
// Validate all required text inputs and file fields in Step 3
|
|
if (currentStep === 3) {
|
|
$('.step-3 input[required], .step-3 select[required]').each(function () {
|
|
if ($(this).val() === '') {
|
|
$(this).addClass('error'); // Add error class
|
|
valid = false;
|
|
return false; // Break the loop
|
|
} else {
|
|
$(this).removeClass('error'); // Remove error class if valid
|
|
}
|
|
});
|
|
|
|
$('.step-3 input[type="file"][required]').each(function () {
|
|
if ($(this)[0].files.length === 0) {
|
|
$(this).addClass('error'); // Add error class
|
|
valid = false;
|
|
return false; // Break the loop
|
|
} else {
|
|
$(this).removeClass('error'); // Remove error class if valid
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!valid) {
|
|
return; // Stop if validation fails
|
|
}
|
|
|
|
if (currentStep < 4) {
|
|
$(".step-" + currentStep).fadeOut(500, function () {
|
|
if (currentStep === 3 && isLogin === false) {
|
|
$(".step-" + currentStep).fadeIn(500);
|
|
updateProgressBar();
|
|
return "";
|
|
} else {
|
|
currentStep++;
|
|
$(".step-" + currentStep).fadeIn(500);
|
|
updateProgressBar();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$(".prev-step").click(function () {
|
|
$('#bookandcontinue').prop('disabled', false);
|
|
if (currentStep > 1) {
|
|
$(".step-" + currentStep).fadeOut(500, function () {
|
|
currentStep--;
|
|
$(".step-" + currentStep).fadeIn(500);
|
|
|
|
updateProgressBar();
|
|
clearInterval(countdown);
|
|
});
|
|
}
|
|
});
|
|
$("#bookandcontinue").click(function () {
|
|
$('#startDateInput').val('');
|
|
$('#endDateInput').prop('disabled', true).val('0');
|
|
$('#startPeriodDropdown').val('0');
|
|
$('#endPeriodDropdown').val('0');
|
|
$('#numDaysCount').val(''); // Reset the number of days input
|
|
$('#numDaysCountDisplay').val('');
|
|
$('#summary').html('');
|
|
$('#relation').val('0');
|
|
$('#reasonforbooking').val(0);
|
|
});
|
|
|
|
$(".step-2 .reset-step").click(function () {
|
|
$('.step-2 input[type="text"], .step-2 select').val(function () {
|
|
return this.defaultValue;
|
|
});
|
|
|
|
$('.step-2 input[type="checkbox"], .step-2 input[type="radio"]').prop('checked', false);
|
|
$('#endDateInput').prop('disabled', true).val('0');
|
|
$('#startPeriodDropdown').val('0');
|
|
$('#endPeriodDropdown').val('0');
|
|
$('#numDaysCount').val(''); // Reset the number of days input
|
|
$('#numDaysCountDisplay').val('');
|
|
$('#summary').html('');
|
|
$('#relation').val('0');
|
|
$('#reasonforbooking').val(0);
|
|
$('.step-2 .error-message').hide();
|
|
toggleNextButton(2); // Ensure button state reflects field values after reset
|
|
});
|
|
|
|
$(".step-3 .reset-step").click(function () {
|
|
// Reset all input fields and select elements to their default values
|
|
$('.step-3 input[type="text"]:not(#showReasonLabel), .step-3 input[type="file"]').val(function () {
|
|
return this.defaultValue;
|
|
});
|
|
//$('.step-3 .error-message').hide();
|
|
//$('.step-3 .form-control').parent().hide();
|
|
//$('#reasonforbooking').parent().show();
|
|
validateStep3();
|
|
});
|
|
|
|
$(".step-2 .next-step").click(function () {
|
|
var reasonforbooking = $("#reasonforbooking").val();
|
|
if (reasonforbooking !== "0") {
|
|
$(".step-3 .next-step").prop("disabled", false);
|
|
} else {
|
|
$(".step-3 .next-step").prop("disabled", true);
|
|
}
|
|
;
|
|
var relationship = $("#relation").val();
|
|
if (relationship !== "0") {
|
|
$(".step-2 .next-step").prop("disabled", false);
|
|
} else {
|
|
$(".step-2 .next-step").prop("disabled", true);
|
|
}
|
|
;
|
|
});
|
|
|
|
$(".cancel-step").click(function () {
|
|
// Redirect to the cancel page or handle cancellation logic here
|
|
window.location.href = "/dashboard";
|
|
});
|
|
|
|
updateProgressBar = function () {
|
|
var progressPercentage = ((currentStep - 1) / 3) * 100;
|
|
$(".progress-bar").css("width", progressPercentage + "%");
|
|
};
|
|
|
|
// State variable to track compression status
|
|
let isCompressing = false;
|
|
|
|
// Attach the validation function to file input change event
|
|
$(document).on('change', '.file-upload-field', function () {
|
|
validateFile(this);
|
|
});
|
|
|
|
function validateFile(fileInput) {
|
|
const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
|
|
const file = fileInput.files[0];
|
|
const filePath = fileInput.value;
|
|
let errorMessage = '';
|
|
|
|
// Clear any previous error message
|
|
clearError(fileInput);
|
|
|
|
// Check for duplicate files
|
|
if (isDuplicateFile(file.name, fileInput)) {
|
|
errorMessage = 'This file has already been selected. Please choose a different file.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
return;
|
|
}
|
|
|
|
// Validate file type
|
|
if (!allowedExtensions.exec(filePath)) {
|
|
errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
}
|
|
// Handle image files separately
|
|
else if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
|
|
compressImage(file).then(compressedFile => {
|
|
const dataTransfer = new DataTransfer();
|
|
dataTransfer.items.add(compressedFile);
|
|
fileInput.files = dataTransfer.files;
|
|
|
|
// Validate file size after compression
|
|
validateFileSize(fileInput);
|
|
}).catch(error => {
|
|
errorMessage = 'Error compressing image.';
|
|
displayError(fileInput, errorMessage);
|
|
});
|
|
}
|
|
// Directly validate PDF file size
|
|
else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
|
|
errorMessage = 'PDF file size exceeds the 2MB limit.';
|
|
fileInput.value = ''; // Clear the file input
|
|
displayError(fileInput, errorMessage);
|
|
} else {
|
|
// console.log('File size is within limit:', file.size, 'bytes');
|
|
clearError(fileInput);
|
|
}
|
|
}
|
|
|
|
|
|
function isDuplicateFile(fileName, currentInput) {
|
|
const fileInputs = document.querySelectorAll('.file-upload-field');
|
|
for (let input of fileInputs) {
|
|
if (input !== currentInput && input.files.length > 0 && input.files[0].name === fileName) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function clearError(fileInput) {
|
|
const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
|
|
while (errorElements.length > 0) {
|
|
errorElements[0].remove();
|
|
}
|
|
}
|
|
|
|
// Function to compress image using canvas
|
|
function compressImage(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const maxSize = 2097152; // 2MB in bytes
|
|
let scale = 1;
|
|
if (file.size > maxSize) {
|
|
scale = Math.sqrt(maxSize / file.size);
|
|
}
|
|
canvas.width = img.width * scale;
|
|
canvas.height = img.height * scale;
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
|
// Convert canvas content to blob
|
|
canvas.toBlob(blob => {
|
|
resolve(new File([blob], file.name, {
|
|
type: 'image/jpeg',
|
|
lastModified: Date.now()
|
|
}));
|
|
}, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
|
|
};
|
|
img.src = event.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
// Function to validate file size after compression
|
|
function validateFileSize(fileInput) {
|
|
const file = fileInput.files[0];
|
|
if (file && file.size > 2097152) {
|
|
//console.log('File size is still greater than 2MB after compression.');
|
|
// Handle the situation where the file size is still greater than 2MB
|
|
displayError(fileInput, 'File size is still greater than 2MB after compression.');
|
|
fileInput.value = ''; // Clear the file input
|
|
} else {
|
|
//console.log('File size is within limit after compression.');
|
|
// Handle the situation where the file size is within the limit
|
|
}
|
|
}
|
|
|
|
// Function to display error messages
|
|
function displayError(fileInput, errorMessage) {
|
|
// Example implementation: show error message near the file input
|
|
let errorContainer = fileInput.nextElementSibling;
|
|
if (!errorContainer || !errorContainer.classList.contains('error-message')) {
|
|
errorContainer = document.createElement('div');
|
|
errorContainer.classList.add('error-message');
|
|
fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
|
|
}
|
|
errorContainer.textContent = errorMessage;
|
|
}
|
|
|
|
// Initial validation check for step 3
|
|
validateStep3();
|
|
|
|
// Log statement to ensure the button is being enabled
|
|
//console.log("Enabling the button...");
|
|
$('.step-1 .next-step').prop('disabled', false);
|
|
});
|
|
|
|
var index = 0;
|
|
var hall;
|
|
|
|
$(function () {
|
|
$("#selecthall").select2();
|
|
});
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/communityhall/user/api/gethallnames',
|
|
success: function (response) {
|
|
// Populate the dropdown options with the received hall names
|
|
var selectHallDropdown = $('#selecthall');
|
|
$.each(response, function (index, hall) {
|
|
if (hallId == hall.hallId) {
|
|
selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
|
|
selectHallDropdown.find('option[value="' + hall.hallId + '"]').prop('selected', true);
|
|
} else {
|
|
selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
|
|
}
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching hall names:', error);
|
|
}
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
$('#selecthall').change(function () {
|
|
var selectedHallId = $(this).val();
|
|
// Call the getHallDetails function with the selected hall ID
|
|
getHallDetails(selectedHallId);
|
|
});
|
|
});
|
|
|
|
// Function to retrieve hall details based on hallId
|
|
function getHallDetails(hallId) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/communityhall/user/api/gethalldetails/' + hallId,
|
|
success: function (response) {
|
|
// console.log(response);
|
|
// Display the container
|
|
$('#hallDetailsContainer').show();
|
|
|
|
// Set hall details
|
|
$('#zone').html('<strong>' + response.zone + '</strong> Division: <strong>' + response.division + '</strong>');
|
|
$('#address').html('<strong>' + response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode + '</strong>');
|
|
$('#landmark').html('<strong>' + response.landMark + '</strong>');
|
|
$('#seatingCapacity').html('<strong>' + response.seatingCapacity + '</strong>');
|
|
var parkingCapacity = response.parkingCapacity;
|
|
var parkingAvailability = parkingCapacity > 0 ? "Yes" : "No";
|
|
$('#parkingCapacity').html('<strong>' + parkingAvailability + '</strong>');
|
|
$('#caretakerNumber').html('<strong>' + response.hallInchargeMobno + '</strong>');
|
|
$('#rentAmount').html('<strong>' + response.depositAmount + '</strong>');
|
|
$('#gst').html('<strong>' + response.gst + '</strong>');
|
|
$('#fullDayAmount').html('<strong>' + response.fullDayRent + '</strong>');
|
|
$('#halfrentAmount').html('<strong>' + response.halfDepositAmount + '</strong>');
|
|
$('#halfDayAmount').html('<strong>' + response.halfDayRent + '</strong>');
|
|
$('#ebunit').html('<strong>' + response.ebCostPerUnit + '</strong>');
|
|
$('#statichallId').val(response.hallId);
|
|
|
|
// Set hall images
|
|
var carouselInner = $('#hallImagesCarousel .carousel-inner');
|
|
carouselInner.empty(); // Clear existing images
|
|
|
|
$.each(response.hallImagesList, function (index, image) {
|
|
var itemClass = (index === 0) ? 'carousel-item active' : 'carousel-item';
|
|
var img = $('<img>').addClass('d-block w-100').attr('src', image.hallImage).attr('alt', 'Hall Image');
|
|
var carouselItem = $('<div>').addClass(itemClass).append(img);
|
|
carouselInner.append(carouselItem);
|
|
});
|
|
|
|
// Clear existing floor details to prevent duplicates
|
|
$('#hallareainsqft').empty();
|
|
|
|
// Use a Set to store unique floor details
|
|
var uniqueFloorDetails = new Set();
|
|
|
|
$.each(response.floorDetailsList, function (index, hallarea) {
|
|
|
|
// Construct the text for each floor's details
|
|
var floorDetailText = hallarea.floor + " - " + hallarea.hallarea + " Sq.ft ,";
|
|
|
|
// Add to the Set if it's not a duplicate
|
|
if (!uniqueFloorDetails.has(floorDetailText)) {
|
|
uniqueFloorDetails.add(floorDetailText);
|
|
// Append the floor details to the target element
|
|
$('#hallareainsqft').append('<strong>' + floorDetailText + '</strong>');
|
|
}
|
|
});
|
|
|
|
// Initialize ViewerJS on the carousel after images are loaded
|
|
initializeViewerJS();
|
|
|
|
getBookingCalendar(hallId);
|
|
|
|
// Set hall details in Step 2 and Step 3
|
|
$('#hallNameDisplayStep2').text(response.hallName);
|
|
$('#hallNameDisplayStep3').text(response.hallName);
|
|
$('#zoneStep2').text(response.zone);
|
|
$('#zoneStep3').text(response.zone);
|
|
$('#divisionStep2').text(response.division);
|
|
$('#divisionStep3').text(response.division);
|
|
},
|
|
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching hall details:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function initializeViewerJS() {
|
|
// Ensure ViewerJS initialization after images are added to the DOM
|
|
var carouselInner = document.querySelector('#hallImagesCarousel .carousel-inner');
|
|
var floordetails = document.querySelector('#hallareainsqft');
|
|
|
|
// Destroy existing viewer instance if it exists
|
|
if (carouselInner.viewer) {
|
|
carouselInner.viewer.destroy();
|
|
}
|
|
if (floordetails.viewer) {
|
|
floordetails.viewer.destroy();
|
|
}
|
|
// Initialize ViewerJS
|
|
var viewer = new Viewer(carouselInner, {
|
|
inline: false,
|
|
viewed: function () {
|
|
viewer.zoomTo(0.5); // Adjust the zoom level here
|
|
},
|
|
toolbar: {
|
|
zoomIn: 4,
|
|
zoomOut: 4,
|
|
oneToOne: 4,
|
|
reset: 4,
|
|
prev: 4,
|
|
play: {
|
|
show: 4,
|
|
size: 'large',
|
|
},
|
|
|
|
next: 4,
|
|
rotateLeft: 4,
|
|
rotateRight: 4,
|
|
flipHorizontal: 4,
|
|
flipVertical: 4,
|
|
},
|
|
});
|
|
carouselInner.viewer = viewer;
|
|
}
|
|
|
|
function showBookingDetails() {
|
|
var bookingDetailsDiv = document.getElementById('bookingdetails');
|
|
// Toggle the display property (show/hide)
|
|
if (bookingDetailsDiv.style.display === 'none') {
|
|
bookingDetailsDiv.style.display = 'block';
|
|
} else {
|
|
bookingDetailsDiv.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function previewImage(event) {
|
|
const userphoto = event.target;
|
|
const preview = document.getElementById('preview');
|
|
const reader = new FileReader();
|
|
reader.onload = function () {
|
|
preview.src = reader.result;
|
|
};
|
|
reader.readAsDataURL(userphoto.files[0]);
|
|
}
|
|
|
|
function getBookingCalendar(hall_id) {
|
|
// Make an AJAX call to fetch booking data
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/communityhall/user/api/getPastData',
|
|
data: {
|
|
hall_id: hall_id
|
|
},
|
|
success: function (response) {
|
|
window.bookingResponse = {};
|
|
if (response && Array.isArray(response)) {
|
|
$("#startDateInput").datepicker("destroy");
|
|
for (var i = 0; i < response.length; i++) {
|
|
var dateString = datepickerFormat(response[i].bdate);
|
|
window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot, response[i].is_blocked];
|
|
}
|
|
|
|
initializeDatepickerWithColors(hall_id);
|
|
if (response.length == 0) {
|
|
initializeDatepickerWithColors(hall_id);
|
|
}
|
|
} else {
|
|
console.error('Invalid or empty response data.');
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error fetching hall details:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to update the end date and slot availability
|
|
function updateEndDate() {
|
|
var startDate = new Date(document.getElementById("startDateInput").value);
|
|
var formatStartDate = formatDate(startDate);
|
|
var endDateInput = document.getElementById("endDateInput");
|
|
endDateInput.innerHTML = '<option value="0">Select</option>';
|
|
endDateInput.disabled = true;
|
|
|
|
var maxdays = $('#reasonMaxDates').val();
|
|
// alert("maxdays:--- "+maxdays);
|
|
|
|
// Add options for next 7 days from the selected start date
|
|
for (var i = 0; i < maxdays; i++) {
|
|
var date = new Date(startDate);
|
|
date.setDate(startDate.getDate() + i);
|
|
var formattedDate = formatDate(date);
|
|
|
|
if (isNaN(date.getTime())) {
|
|
console.error("Invalid date:", date);
|
|
continue;
|
|
}
|
|
|
|
var bookingStatus = window.bookingResponse[formattedDate];
|
|
if (bookingStatus) {
|
|
if (bookingStatus[0] && bookingStatus[1]) {
|
|
//alert("slot fulled");
|
|
break;
|
|
} else if (bookingStatus[0]) {
|
|
if (formatStartDate == formattedDate) {
|
|
var option = document.createElement('option');
|
|
option.value = formattedDate;
|
|
option.text = formattedDate;
|
|
endDateInput.appendChild(option);
|
|
} else {
|
|
break;
|
|
}
|
|
} else if (bookingStatus[1]) {
|
|
var option = document.createElement('option');
|
|
option.value = formattedDate;
|
|
option.text = formattedDate;
|
|
endDateInput.appendChild(option);
|
|
break;
|
|
} else {
|
|
var option = document.createElement('option');
|
|
option.value = formattedDate;
|
|
option.text = formattedDate;
|
|
endDateInput.appendChild(option);
|
|
}
|
|
|
|
} else {
|
|
var option = document.createElement('option');
|
|
option.value = formattedDate;
|
|
option.text = formattedDate;
|
|
endDateInput.appendChild(option);
|
|
}
|
|
}
|
|
endDateInput.disabled = false;
|
|
}
|
|
|
|
// Utility function to format date as yyyy-mm-dd
|
|
function formatDate(date) {
|
|
var year = date.getFullYear();
|
|
var month = ("0" + (date.getMonth() + 1)).slice(-2);
|
|
var day = ("0" + date.getDate()).slice(-2);
|
|
return year + "-" + month + "-" + day;
|
|
}
|
|
|
|
// Function to calculate number of days based on start and end dates
|
|
// Function to calculate number of days based on start and end dates
|
|
function calculateNumDays() {
|
|
var startDateStr = document.getElementById("startDateInput").value;
|
|
var endDateStr = document.getElementById("endDateInput").value;
|
|
|
|
// Parse dates
|
|
var startDate = new Date(startDateStr);
|
|
var endDate = new Date(endDateStr);
|
|
|
|
// Check if dates are valid
|
|
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
|
|
console.error("Invalid date format.");
|
|
return;
|
|
}
|
|
|
|
// Calculate the difference in days
|
|
var timeDiff = endDate.getTime() - startDate.getTime();
|
|
var numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
|
// Adjust numDays to handle same-day selection
|
|
if (numDays === 0) {
|
|
numDays = 1; // Default to 1 day for same-day booking
|
|
} else if (numDays < 0) {
|
|
numDays = 0; // Handle case where end date is before start date
|
|
} else {
|
|
numDays += 1; // Add one day to include both start and end days
|
|
}
|
|
// Cap numDays between 1 and 7
|
|
numDays = Math.min(Math.max(numDays, 1), 7);
|
|
document.getElementById("numDaysCount").value = numDays;
|
|
// Recalculate days after slots if both dates are selected
|
|
if (startDateStr && endDateStr) {
|
|
calculatenoofdaysafterslots();
|
|
}
|
|
}
|
|
|
|
function getEndPeriodValue() {
|
|
const endPeriodDropdown = document.getElementById("endPeriodDropdown");
|
|
return endPeriodDropdown.disabled ? endPeriodDropdown.getAttribute("data-value") : endPeriodDropdown.value;
|
|
}
|
|
|
|
function setEndPeriodDataValue() {
|
|
const endPeriodDropdown = document.getElementById("endPeriodDropdown");
|
|
if (endPeriodDropdown.disabled) {
|
|
endPeriodDropdown.setAttribute("data-value", endPeriodDropdown.value);
|
|
}
|
|
}
|
|
|
|
function calculatenoofdaysafterslots() {
|
|
const startDateStr = document.getElementById("startDateInput").value;
|
|
const endDateStr = document.getElementById("endDateInput").value;
|
|
const startPeriod = parseInt(document.getElementById("startPeriodDropdown").value);
|
|
const endPeriod = parseInt(getEndPeriodValue()); // Use getEndPeriodValue here
|
|
|
|
const periodText = {
|
|
0: { text: "select", time: "" },
|
|
1: { text: "Morning", time: "6:00 AM" },
|
|
2: { text: "Afternoon", time: "2:00 PM" }
|
|
};
|
|
|
|
const endPeriodText = {
|
|
0: { text: "select", time: "" },
|
|
1: { text: "Afternoon", time: "2:00 PM" },
|
|
2: { text: "Evening", time: "10:00 PM" }
|
|
};
|
|
|
|
const startDate = new Date(startDateStr);
|
|
const endDate = new Date(endDateStr);
|
|
|
|
const timeDiff = endDate.getTime() - startDate.getTime();
|
|
let numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
|
|
|
if (numDays === 0 && startDate.toDateString() === endDate.toDateString()) {
|
|
if (startPeriod === 1 && endPeriod === 1) {
|
|
numDays = 0.5; // Morning to morning is half day
|
|
} else if (startPeriod === 2 && endPeriod === 2) {
|
|
numDays = 0.5; // Evening to evening is half day
|
|
} else if (startPeriod === 1 && endPeriod === 2) {
|
|
numDays = 1; // Morning to evening is one full day
|
|
} else {
|
|
numDays = 1; // Default to one full day for any other case
|
|
}
|
|
} else {
|
|
if (startPeriod === 1 && endPeriod === 1) {
|
|
numDays += 0.5; // Morning to morning adds half a day
|
|
} else if (startPeriod === 2 && endPeriod === 2) {
|
|
numDays += 0.5; // Evening to evening adds half a day
|
|
} else if (startPeriod === 1 && endPeriod === 2) {
|
|
numDays += 1; // Morning to evening adds one full day
|
|
} else if (startPeriod === 2 && endPeriod === 1) {
|
|
// If the period spans over two days, evening to morning should be counted as one full day
|
|
numDays -= 0;
|
|
} else {
|
|
numDays += 1; // Default case for any other scenario
|
|
}
|
|
}
|
|
|
|
//else if (startPeriod === "2" && endPeriod === "2") {
|
|
// amount = fullDayAmount * (numDays - 1) + halfDayAmount;
|
|
//}
|
|
numDays = Math.min(Math.max(numDays, 0), 7);
|
|
|
|
const startPeriodText = periodText[startPeriod].text + " (" + periodText[startPeriod].time + ")";
|
|
const endPeriodFullText = endPeriodText[endPeriod].text + " (" + endPeriodText[endPeriod].time + ")";
|
|
const numDaysText = `${startDateStr} (${startPeriodText}) to ${endDateStr} (${endPeriodFullText})`;
|
|
|
|
document.getElementById("numDaysCountDisplay").value = numDaysText;
|
|
document.getElementById("numDaysCount").value = numDays;
|
|
}
|
|
|
|
function showSummary() {
|
|
const startDate = new Date(document.getElementById("startDateInput").value);
|
|
const endDate = new Date(document.getElementById("endDateInput").value);
|
|
const startPeriod = document.getElementById("startPeriodDropdown").value;
|
|
const endPeriod = getEndPeriodValue(); // Use getEndPeriodValue here
|
|
|
|
const startPeriods = {
|
|
"1": "Morning 6:00 AM",
|
|
"2": "Afternoon 2:00 PM"
|
|
};
|
|
|
|
const endPeriods = {
|
|
"1": "Afternoon 2:00 PM",
|
|
"2": "Evening 10:00 PM"
|
|
};
|
|
const numofdaysrange = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
|
|
document.getElementById("noofdaysbetweenstartend").value = numofdaysrange;
|
|
const numDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
|
|
let summaryText = `You booked for ${numDays} day(s) with the following slots:\n`;
|
|
|
|
let currentDate = new Date(startDate);
|
|
|
|
while (currentDate <= endDate) {
|
|
const currentDay = currentDate.toISOString().split('T')[0];
|
|
let currentStartPeriod;
|
|
let currentEndPeriod;
|
|
|
|
if (currentDate.getTime() === startDate.getTime()) {
|
|
currentStartPeriod = startPeriod;
|
|
} else {
|
|
currentStartPeriod = "1"; // Default to Morning for subsequent days
|
|
}
|
|
|
|
if (currentDate.getTime() === endDate.getTime()) {
|
|
currentEndPeriod = endPeriod;
|
|
} else {
|
|
currentEndPeriod = "2"; // Default to Evening for all days except the last
|
|
}
|
|
|
|
summaryText += `${currentDay}: ${startPeriods[currentStartPeriod]} to ${endPeriods[currentEndPeriod]}\n`;
|
|
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
}
|
|
|
|
document.getElementById("summary").innerText = summaryText;
|
|
}
|
|
|
|
// Add event listeners to update the summary when dropdowns change
|
|
document.getElementById("startDateInput").addEventListener("change", function () {
|
|
calculatenoofdaysafterslots();
|
|
showSummary();
|
|
});
|
|
|
|
document.getElementById("endDateInput").addEventListener("change", function () {
|
|
calculatenoofdaysafterslots();
|
|
$("#endPeriodDropdown").val(0).prop("disabled", false);
|
|
$(".step-2 .next-step").prop("disabled", true);
|
|
|
|
const bookingStatus = window.bookingResponse[$("#endDateInput").val()];
|
|
if (bookingStatus) {
|
|
if (bookingStatus[0]) {
|
|
$("#endPeriodDropdown").val(2);
|
|
$("#endPeriodDropdown").prop("disabled", true);
|
|
setEndPeriodDataValue();
|
|
} else if (bookingStatus[1]) {
|
|
$("#endPeriodDropdown").val(1);
|
|
$("#endPeriodDropdown").prop("disabled", true);
|
|
setEndPeriodDataValue();
|
|
}
|
|
} else {
|
|
$("#endPeriodDropdown").prop("disabled", false);
|
|
}
|
|
|
|
calculatenoofdaysafterslots();
|
|
if ($("#endDateInput").val() == "0") {
|
|
$('#summary').html('');
|
|
} else {
|
|
showSummary();
|
|
}
|
|
|
|
});
|
|
|
|
document.getElementById("startPeriodDropdown").addEventListener("change", function () {
|
|
calculatenoofdaysafterslots();
|
|
showSummary();
|
|
});
|
|
|
|
document.getElementById("endPeriodDropdown").addEventListener("change", function () {
|
|
calculatenoofdaysafterslots();
|
|
showSummary();
|
|
});
|
|
|
|
function initializeDatepickerWithColors(hallId) {
|
|
// Destroy existing datepicker to avoid duplicate initialization
|
|
$("#datepicker-container").datepicker("destroy");
|
|
const serverDate = new Date($("#serverDate").val() + "T00:00:00")
|
|
|
|
const maxDate = new Date(serverDate);
|
|
maxDate.setMonth(maxDate.getMonth() + 6);
|
|
// console.log(" hall booking form Max Date: "+maxDate);
|
|
|
|
// Initialize the datepicker
|
|
$("#startDateInput,#datepicker-container").datepicker({
|
|
dateFormat: "yy-mm-dd",
|
|
minDate: serverDate,
|
|
maxDate: maxDate,
|
|
beforeShowDay: function (eDate) {
|
|
const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
|
|
const bookingStatus = window.bookingResponse[dateString] || {};
|
|
|
|
// const currentDate = new Date();
|
|
serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
|
|
eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
|
|
|
|
// Logic for other dates
|
|
if (eDate < serverDate) {
|
|
return [false, "highlight-disabled", "Slot not Available"];
|
|
}
|
|
|
|
const isToday = eDate.getTime() === serverDate.getTime();
|
|
const currentHour = new Date().getHours();
|
|
const isBefore6AM = currentHour < 6;
|
|
const isAfter2PM = currentHour >= 14;
|
|
|
|
// Block 3-day logic for specific event types
|
|
// const today = new Date();
|
|
const blockedDate = new Date(serverDate);
|
|
blockedDate.setDate(serverDate.getDate() + 2);
|
|
|
|
if (eDate <= blockedDate && window.isThreeDayBlock) {
|
|
return [false, "highlight-disabled", "Blocked due to event type"];
|
|
}
|
|
|
|
// Logic for today
|
|
if (isToday) {
|
|
if (isBefore6AM) {
|
|
// Before 6 AM: Allow full-day booking or adjust based on booking status
|
|
return handleBookingStatus(bookingStatus, "Full Day Available");
|
|
} else if (isAfter2PM) {
|
|
// After 2 PM: Block all bookings
|
|
return handleAfter2PM(bookingStatus);
|
|
} else {
|
|
// Between 6 AM and 2 PM: Check status and disable morning slots
|
|
return handleMorningSlots(bookingStatus);
|
|
}
|
|
}
|
|
|
|
return handleBookingStatus(bookingStatus, "Slot Available");
|
|
},
|
|
});
|
|
|
|
// Show datepicker when hall is selected
|
|
$('#selecthall').off('click').on('click', function () {
|
|
$('#datepicker-container').datepicker('show');
|
|
});
|
|
|
|
// Handle changes in the start date input
|
|
$("#startDateInput").on("change", function () {
|
|
const selectedDate = $(this).val();
|
|
const bookingStatus = window.bookingResponse[selectedDate] || {};
|
|
// const currentDate = new Date();
|
|
const currentHours = new Date().getHours();
|
|
const currentDateString = $("#serverDate").val();
|
|
|
|
$("#startPeriodDropdown option").prop("disabled", false); //newly added after server date changes
|
|
|
|
$("#startPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#endPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#numDaysCount").val('');
|
|
validateForm();
|
|
|
|
if ((selectedDate === currentDateString && currentHours >= 6) || bookingStatus[0]) {
|
|
$("#startPeriodDropdown option[value='1']").prop("disabled", true);
|
|
} else if (bookingStatus[1]) {
|
|
$("#startPeriodDropdown option[value='2']").prop("disabled", true);
|
|
}
|
|
updateEndDate(selectedDate);
|
|
});
|
|
|
|
// Event type change logic
|
|
$("#reasonforbooking").on("change", function () {
|
|
const selectedEventType = $(this).find("option:selected").text().trim();
|
|
window.isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(selectedEventType);
|
|
$("#datepicker-container").datepicker("refresh");
|
|
});
|
|
}
|
|
|
|
function handleBookingStatus(bookingStatus, defaultMessage) {
|
|
if (bookingStatus[2]) {
|
|
return [true, "highlight-blue disabled", "GCC Blocked"];
|
|
} /*else if (bookingStatus[3]) {
|
|
return [true, "highlight-lightpink disabled", "Temporary Blocked"];
|
|
} */ else if (bookingStatus[0] && bookingStatus[1]) {
|
|
return [true, "highlight-pink disabled", "Slot Occupied"];
|
|
} else if (bookingStatus[0] && !bookingStatus[1]) {
|
|
return [true, "highlight-yellow", "Evening Slot Available"];
|
|
} else if (!bookingStatus[0] && bookingStatus[1]) {
|
|
return [true, "highlight-violet", "Only Morning Slot Available"];
|
|
}
|
|
return [true, "highlight-greens", defaultMessage];
|
|
}
|
|
|
|
// Helper function: Handles logic after 2 PM
|
|
function handleAfter2PM(bookingStatus) {
|
|
if (bookingStatus[2]) {
|
|
return [true, "highlight-blue disabled", "GCC Blocked"];
|
|
} else if (bookingStatus[0] || bookingStatus[1]) {
|
|
return [true, "highlight-pink disabled", "Slot Occupied"];
|
|
}
|
|
return [false, "highlight-disabled", "Not Allowed to Book"];
|
|
}
|
|
|
|
// Helper function: Handles morning slots between 6 AM and 2 PM
|
|
function handleMorningSlots(bookingStatus) {
|
|
if (bookingStatus[2]) {
|
|
return [true, "highlight-blue disabled", "GCC Blocked"];
|
|
} else if (bookingStatus[0] && bookingStatus[1]) {
|
|
return [true, "highlight-pink disabled", "Slot Occupied"];
|
|
} else if (bookingStatus[0] && !bookingStatus[1]) {
|
|
return [true, "highlight-yellow", "Evening Slot Available"];
|
|
} else if (!bookingStatus[0] && bookingStatus[1]) {
|
|
return [false, "highlight-disabled", "Slot Occupied"];
|
|
}
|
|
return [true, "highlight-yellow", "Evening Slot Available"];
|
|
}
|
|
|
|
|
|
function datepickerFormat(dateString) {
|
|
var dateObject = new Date(dateString);
|
|
var year = dateObject.getFullYear();
|
|
var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
|
|
var day = dateObject.getDate().toString().padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
|
|
//snackbars
|
|
$("#reasonforbooking").on("click", function () {
|
|
var relationship = $("#relation").val();
|
|
if (relationship == 0) {
|
|
var relationField = $("#relation")[0];
|
|
relationField.setCustomValidity("Relationship for Booking is Missing. Please select.");
|
|
relationField.reportValidity();
|
|
return; // Exit early if relationship is not provided
|
|
} else {
|
|
$("#relation")[0].setCustomValidity(""); // Clear custom validity if valid
|
|
}
|
|
});
|
|
|
|
$("#relation").on("change", function () {
|
|
// Clear custom validity when a valid value is selected
|
|
this.setCustomValidity("");
|
|
});
|
|
|
|
$("#startDateInput").on("click", function () {
|
|
var reason = $("#reasonforbooking").val();
|
|
if (reason == 0) {
|
|
var reasonField = $("#reasonforbooking")[0];
|
|
reasonField.setCustomValidity("Reason for booking is missed. Please select a reason.");
|
|
reasonField.reportValidity();
|
|
return; // Exit early if reason is not provided
|
|
} else {
|
|
$("#reasonforbooking")[0].setCustomValidity(""); // Clear custom validity if valid
|
|
}
|
|
});
|
|
$("#endDateInput").on("click", function () {
|
|
var reason = $("#reasonforbooking").val();
|
|
var startDate = $("#startDateInput").val();
|
|
if (reason == 0) {
|
|
var reasonField = $("#reasonforbooking")[0];
|
|
reasonField.setCustomValidity("Reason for booking is missed. Please select a reason.");
|
|
reasonField.reportValidity();
|
|
return; // Exit early if reason is not provided
|
|
} else {
|
|
$("#reasonforbooking")[0].setCustomValidity(""); // Clear custom validity if valid
|
|
}
|
|
if (startDate == "") {
|
|
var startDate = $("#startDateInput")[0];
|
|
startDateInput.setCustomValidity("Start Date missed. Please select a Start Date.");
|
|
startDateInput.reportValidity();
|
|
return; // Exit early if reason is not provided
|
|
} else {
|
|
$("#startDateInput")[0].setCustomValidity(""); // Clear custom validity if valid
|
|
}
|
|
});
|
|
|
|
$("#reasonforbooking").on("change", function () {
|
|
// Clear custom validity when a valid value is selected
|
|
this.setCustomValidity("");
|
|
});
|
|
|
|
// Snackbar function
|
|
function showSnackbar(message) {
|
|
var snackbar = $("<div>")
|
|
.addClass("snackbar")
|
|
.text(message)
|
|
.appendTo("body");
|
|
|
|
// Add animation classes for showing and hiding
|
|
snackbar.addClass("show");
|
|
|
|
// Remove the snackbar after 3 seconds
|
|
setTimeout(function () {
|
|
snackbar.removeClass("show");
|
|
snackbar.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Update the event listeners to include date inputs
|
|
$("#endDateInput").on("change", function () {
|
|
var starting = $("#startPeriodDropdown").val();
|
|
var ending = $("#endPeriodDropdown").val();
|
|
var startDate = $("#startDateInput").val();
|
|
var endDate = $("#endDateInput").val();
|
|
|
|
// Call validateSlot with updated parameters
|
|
validateSlot(starting, ending, startDate, endDate);
|
|
validateForm();
|
|
});
|
|
|
|
// Event listener for changes in startPeriodDropdown
|
|
$("#startPeriodDropdown").on("change", function () {
|
|
var starting = $(this).val();
|
|
var ending = $("#endPeriodDropdown").val();
|
|
var startDate = $("#startDateInput").val();
|
|
var endDate = $("#endDateInput").val();
|
|
|
|
// Call validateSlot with updated parameters
|
|
validateSlot(starting, ending, startDate, endDate);
|
|
validateForm();
|
|
showSummary();
|
|
});
|
|
|
|
// Event listener for changes in endPeriodDropdown
|
|
$("#endPeriodDropdown").on("change", function () {
|
|
var starting = $("#startPeriodDropdown").val();
|
|
var ending = $(this).val();
|
|
var startDate = $("#startDateInput").val();
|
|
var endDate = $("#endDateInput").val();
|
|
validateSlot(starting, ending, startDate, endDate);
|
|
validateForm();
|
|
calculatenoofdaysafterslots();
|
|
showSummary();
|
|
});
|
|
|
|
function validateSlot(starting, ending, startDate, endDate) {
|
|
// Check if startDate is equal to endDate and starting is 2 and ending is 1
|
|
if (startDate === endDate && starting == 2 && ending == 1) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops!',
|
|
text: "The starting slot cannot be set to Evening if the ending slot is Morning when the dates are the same.",
|
|
}).then(() => {
|
|
// Reset endPeriodDropdown to 0
|
|
$("#endPeriodDropdown").val(0);
|
|
validateForm();
|
|
});
|
|
}
|
|
validateForm(); // Call validateForm to update form validation status
|
|
}
|
|
|
|
function validateForm() {
|
|
var startDate = $("#startDateInput").val();
|
|
var endDate = $("#endDateInput").val();
|
|
var startPeriod = $("#startPeriodDropdown").val();
|
|
var endPeriod = $("#endPeriodDropdown").val();
|
|
var reasonforbooking = $("#reasonforbooking").val();
|
|
var relationship = $("#relation").val();
|
|
if (startDate && endDate !== "0" && startPeriod !== "0" && endPeriod !== "0" && relationship !== "0" && reasonforbooking) {
|
|
$(".next-step").prop("disabled", false);
|
|
} else {
|
|
$(".next-step").prop("disabled", true);
|
|
}
|
|
}
|
|
|
|
// Confirm Payment button click event
|
|
$("#confirmPaymentBtn").on('click', function () {
|
|
// Disable the payment button
|
|
$('#confirmPaymentBtn').prop('disabled', true);
|
|
|
|
stopTimer();
|
|
|
|
});
|
|
|
|
function stopTimer() {
|
|
if (countdown) {
|
|
clearInterval(countdown);
|
|
countdown = null; // Clear the countdown reference
|
|
}
|
|
timerElement.innerHTML = "Timer Stopped"; // Optionally update the message
|
|
}
|
|
|
|
(function () {
|
|
|
|
function block(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
}
|
|
// Disable right‑click
|
|
window.addEventListener('contextmenu', block, true);
|
|
// 2) Disable drag (images/text) — optional
|
|
// window.addEventListener('dragstart', block, true);
|
|
|
|
|
|
// 3) Disable common DevTools / view‑source shortcuts
|
|
window.addEventListener('keydown', function (e) {
|
|
// Normalize: e.key is a string like 'F12' or 'I'; keyCode is a number (deprecated but useful for older browsers)
|
|
var key = e.key;
|
|
var code = e.keyCode || e.which;
|
|
|
|
// F12 (DevTools)
|
|
if (key === 'F12' || code === 123) return block(e);
|
|
|
|
// Ctrl+Shift+I/J/C (DevTools / Inspect / Console)
|
|
if (e.ctrlKey && e.shiftKey && (key === 'I' || key === 'J' || key === 'C' || code === 73 || code === 74 || code === 67)) return block(e);
|
|
|
|
// Ctrl+U (view source)
|
|
if (e.ctrlKey && (key === 'u' || key === 'U' || code === 85)) return block(e);
|
|
|
|
// Ctrl+S (save page)
|
|
if (e.ctrlKey && (key === 's' || key === 'S' || code === 83)) return block(e);
|
|
|
|
// Firefox specific shortcuts
|
|
// Ctrl+Shift+K opens Web Console
|
|
if (e.ctrlKey && e.shiftKey && (key === 'K' || code === 75)) return block(e);
|
|
// Ctrl+Shift+E opens Network Monitor
|
|
if (e.ctrlKey && e.shiftKey && (key === 'E' || code === 69)) return block(e);
|
|
}, true);
|
|
|
|
let threshold = 160;
|
|
setInterval(function () {
|
|
if (window.outerHeight - window.innerHeight > threshold ||
|
|
window.outerWidth - window.innerWidth > threshold) {
|
|
document.body.innerHTML = "<h1 style='color:red;text-align:center;margin-top:20%'>DevTools detected. Page disabled.</h1>";
|
|
}
|
|
}, 500);
|
|
})();
|
|
|
|
function showToast(msg) {
|
|
var toast = document.getElementById("toast");
|
|
toast.textContent = msg;
|
|
toast.className = "show";
|
|
setTimeout(function () {
|
|
toast.className = toast.className.replace("show", "");
|
|
}, 2500);
|
|
}
|
|
|
|
$(document).on("contextmenu",
|
|
"#ui-datepicker-div td, #ui-datepicker-div a, #ui-datepicker-div .ui-datepicker-title", function (e) {
|
|
e.preventDefault();
|
|
showToast("Right-click disabled");
|
|
return false;
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|