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.
1676 lines
56 KiB
1676 lines
56 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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sockjs-client"></script>
|
|
<!--<script src="https://cdn.jsdelivr.net/npm/stompjs"></script>-->
|
|
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.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-blue .ui-state-default {
|
|
background: blue !important;
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.highlight-lightpink .ui-state-default {
|
|
background: lightpink !important;
|
|
color: #FFF !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-blue a {
|
|
background-color: blue;
|
|
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-lightpink a,
|
|
input[type=button]:disabled {
|
|
background-color: lightpink;
|
|
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;
|
|
|
|
}
|
|
</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="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">
|
|
<input type="hidden" id="serverDate" th:value=${serverDate}>
|
|
<!--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 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>
|
|
<span style="margin-left:-2px;">Temporary 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 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">
|
|
|
|
<button type="button"
|
|
class="btn btn-primary details-btn"
|
|
id="hallrent" onclick="calculatehallrent()">
|
|
Calculate Hall Rent
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!--<!– Page body end –>-->
|
|
</div>
|
|
</div>
|
|
<!--<!– Main-body end –>-->
|
|
</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>
|
|
</div>
|
|
</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>
|
|
|
|
|
|
<script>
|
|
var hallIdDuplicate;
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const hallId = urlParams.get('hallId');
|
|
$(document).ready(function () {
|
|
if (hallId != null) {
|
|
getHallDetails(hallId);
|
|
hallIdDuplicate = hallId;
|
|
$("#selecthall").val(hallId);
|
|
}
|
|
});
|
|
|
|
|
|
var index = 0;
|
|
var hall;
|
|
|
|
// Initialize select2 with closeOnSelect option
|
|
$("#selecthall").select2({
|
|
closeOnSelect: true // Ensures dropdown closes on selecting an option
|
|
});
|
|
|
|
// Force close dropdown on change (fallback for any conflict)
|
|
$('#selecthall').on('change', function () {
|
|
$(this).select2('close');
|
|
});
|
|
|
|
$.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
|
|
// urlParams.set('hallId', selectedHallId);
|
|
hallIdDuplicate = selectedHallId;
|
|
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>');
|
|
$('#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);
|
|
//connectToWebSocket(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 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) {
|
|
console.log(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 connectToWebSocket(hall_id) {
|
|
//console.log("Connecting to WebSocket for hall_id:", hall_id);
|
|
const socket = new SockJS('/ws');
|
|
const stompClient = Stomp.over(socket);
|
|
|
|
stompClient.connect({}, function () {
|
|
//console.log("Connected to WebSocket");
|
|
|
|
// Subscribe to the topic specific to the hall_id
|
|
const topic = `/topic/bookingCalendar/${hall_id}`;
|
|
stompClient.subscribe(topic, function (message) {
|
|
try {
|
|
const response = JSON.parse(message.body); // Parse the response
|
|
processBookingData(response, hall_id); // Process and update the calendar
|
|
} catch (error) {
|
|
console.error("Failed to parse message body: ", error);
|
|
}
|
|
});
|
|
|
|
// Request initial data for the hall
|
|
requestBookingData(hall_id, stompClient);
|
|
}, function (error) {
|
|
// console.error("WebSocket connection failed: ", error);
|
|
});
|
|
}
|
|
|
|
function requestBookingData(hall_id, stompClient) {
|
|
//console.log("Requesting booking data for hall_id:", hall_id);
|
|
|
|
// Send hall_id as a JSON object
|
|
stompClient.send('/app/getPastData', {}, JSON.stringify({hall_id: hall_id}));
|
|
}
|
|
|
|
function processBookingData(response, hall_id) {
|
|
//console.log("Processing booking data for hall_id:", hall_id);
|
|
//console.log("Response: ", response);
|
|
|
|
window.bookingResponse = {};
|
|
if (response && Array.isArray(response)) {
|
|
$("#startDateInput").datepicker("destroy");
|
|
for (let i = 0; i < response.length; i++) {
|
|
const dateString = datepickerFormat(response[i].bdate);
|
|
window.bookingResponse[dateString] = [
|
|
response[i].morningSlot,
|
|
response[i].eveningSlot,
|
|
response[i].is_blocked,
|
|
response[i].temp_blocked,
|
|
];
|
|
}
|
|
|
|
initializeDatepickerWithColors(hall_id);
|
|
} else {
|
|
console.error("Invalid or empty response data.");
|
|
}
|
|
}*/
|
|
|
|
|
|
|
|
// Function to update the end date and slot availability
|
|
|
|
function initializeDatepickerWithColors(hallId) {
|
|
// Destroy existing datepicker to avoid duplicate initialization
|
|
$("#datepicker-container").datepicker("destroy");
|
|
|
|
const serverDate =new Date($("#serverDate").val() + "T00:00:00")
|
|
console.log("serverDate:", serverDate);
|
|
|
|
const maxDate = new Date(serverDate);
|
|
maxDate.setMonth(maxDate.getMonth() + 6);
|
|
console.log("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 = currentDate.getHours();
|
|
const currentDateString = currentDate.toISOString().split("T")[0];
|
|
|
|
$("#startPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#endPeriodDropdown").val(0).prop("disabled", false);
|
|
$("#numDaysCount").val('');
|
|
validateForm();
|
|
|
|
if (selectedDate === currentDateString && currentHours >= 6) {
|
|
$("#startPeriodDropdown").val(2).prop("disabled", true);
|
|
} else if (bookingStatus[0]) {
|
|
$("#startPeriodDropdown").val(2).prop("disabled", true);
|
|
} else if (bookingStatus[1]) {
|
|
$("#startPeriodDropdown").val(1).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 [false, "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}`;
|
|
}
|
|
|
|
function calculatehallrent() {
|
|
window.location.href = "/communityhall/hallAmountCalculation?hallId=" + hallIdDuplicate;
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|