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.
 
 
 
 
 

3483 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>
&nbsp;&nbsp;(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>
&nbsp;&nbsp;(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;;">
&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp; 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"];
Swal.fire({
title: 'Morning Slot Not Available',
text: 'The Morning slot is not available for the selected date range.',
icon: 'warning',
confirmButtonText: 'OK'
});
document.getElementById('endDateInput').value = "";
}
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>