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.
1343 lines
68 KiB
1343 lines
68 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
|
|
|
<head th:replace="~{fragments/user-head :: head}"></head>
|
|
<header th:replace="~{user/razor-pay :: header}"></header>
|
|
|
|
<style>
|
|
.radio-button-group {
|
|
display: flex;
|
|
}
|
|
|
|
.radio-button-group input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.radio-button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
/* Adds space between buttons */
|
|
border: 1px solid #007bff;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
background-color: #f0f0f0;
|
|
color: #007bff;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.radio-button:hover {
|
|
background-color: #E29D25;
|
|
color: white;
|
|
}
|
|
|
|
.radio-button-group input[type="radio"]:checked+.radio-button {
|
|
background-color: #E29D25;
|
|
color: white;
|
|
}
|
|
|
|
.carousel-inner img {
|
|
height: 500px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.time-slot-box {
|
|
/*width: 100px;
|
|
height: 50px;*/
|
|
margin: 10px;
|
|
border: 2px solid green;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
background-color: #f0f0f0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-slot-box.booked {
|
|
border-color: red;
|
|
color: red;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.time-slot-box.available {
|
|
border-color: green;
|
|
color: green;
|
|
}
|
|
|
|
.time-slot-box input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.time-slot-box:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
#timeSlots {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.book-now-btn {
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
align-self: center;
|
|
/* Centers the button horizontally */
|
|
margin-bottom: 5px;
|
|
/* Pushes the button to the bottom of the .card */
|
|
}
|
|
|
|
.book-now-btn:hover {
|
|
background-color: #E29D25;
|
|
}
|
|
|
|
.reset-now-btn {
|
|
background-color: #868e96;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
align-self: center;
|
|
/* Centers the button horizontally */
|
|
margin-bottom: 5px;
|
|
/* Pushes the button to the bottom of the .card */
|
|
}
|
|
|
|
.reset-now-btn:hover {
|
|
background-color: #E29D25;
|
|
}
|
|
|
|
.btn-primary2 {
|
|
background-color: #FFF;
|
|
border-color: green;
|
|
color: gray;
|
|
cursor: pointer;
|
|
-webkit-transition: all ease-in 0.3s;
|
|
transition: all ease-in 0.3s;
|
|
}
|
|
|
|
.btn-primary2.active {
|
|
background-color: #E29D25 !important;
|
|
color: #FFF;
|
|
border-color: green !important;
|
|
}
|
|
|
|
.scrolling-text {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.scrolling-text span {
|
|
display: inline-block;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #E29D25;
|
|
will-change: transform;
|
|
animation: scroll-text 20s linear infinite;
|
|
}
|
|
|
|
.scrolling-text span:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes scroll-text {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- Pre-loader start -->
|
|
<div th:replace="~{fragments/preloader :: div}"></div>
|
|
<!-- Pre-loader end -->
|
|
<div id="pcoded" class="pcoded">
|
|
<div class="pcoded-container">
|
|
<!-- Menu header start -->
|
|
<nav th:replace="~{fragments/user-nav :: nav}"></nav>
|
|
<!-- Menu header end -->
|
|
<div class="pcoded-main-container">
|
|
<nav th:replace="~{fragments/user-navmenu :: nav}"></nav>
|
|
<div class="pcoded-content">
|
|
<div class="pcoded-inner-content">
|
|
<!-- Main-body start -->
|
|
<div class="main-body">
|
|
<div class="page-wrapper">
|
|
<div class="page-body" style="padding-top: 5%;">
|
|
<!-- Page-header start -->
|
|
<div class="page-header">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-8">
|
|
<div class="page-header-title">
|
|
<div class="d-inline">
|
|
<h4 style="font-weight:bold;">Book Desk Space</h4>
|
|
<!--<span class="address">Jeganathan street, Agaram, Chennai - 600082</span>-->
|
|
<span class="address" th:text="${buildingAddress}">Address not
|
|
available</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="page-header-breadcrumb">
|
|
<ul class="breadcrumb-title">
|
|
<li class="breadcrumb-item">
|
|
<a href="#"> <i class="feather icon-home"></i> </a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a href="#">Desk Space</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page-header end -->
|
|
|
|
<!--
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-6">
|
|
|
|
<div class="photo-text mt-3">
|
|
<h4 style="font-weight:bold;">Learning Centre</h4>
|
|
<div class="rating">
|
|
<span class="address">Jeganathan street, Agaram, Chennai - 600082</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<hr>
|
|
|
|
<div class="scrolling-text"><span>Loading announcement...</span></div>
|
|
|
|
<input type="hidden" id="buildingId" th:value="${buildingId}">
|
|
<input type="hidden" id="categoryId" th:value="${categoryId}">
|
|
<input type="hidden" id="subId" th:value="${subId}">
|
|
|
|
|
|
<div class="row" id="conferenceHallDiv" style="border-radius: 10px; margin:0px;">
|
|
<div class="col-lg-12 col-sm-12">
|
|
<div
|
|
style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
|
|
<form id="conferenceHallForm">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-sm-0" style="padding:0px;">
|
|
<!--photo grid start-->
|
|
<div id="carouselExampleIndicators" class="carousel slide"
|
|
data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
|
|
<li th:each="homeImg, iterStat : ${homeImg}"
|
|
class=""
|
|
th:classappend="${iterStat.index == 0} ? ' active'"
|
|
data-target="#carouselExampleIndicators"
|
|
th:data-slide-to="${iterStat.index}">
|
|
</li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
<div th:each="homeImg, iterStat : ${homeImg}"
|
|
class="carousel-item"
|
|
th:classappend="${iterStat.index == 0} ? ' active'">
|
|
<img style="border-radius:15px;"
|
|
class="d-block w-100"
|
|
th:src="${homeImg.imageurl}" width="100%"
|
|
alt="Slide Image">
|
|
</div>
|
|
<!-- <div class="carousel-caption">
|
|
Welcome to Desk Space
|
|
</div> -->
|
|
</div>
|
|
<a class="carousel-control-prev"
|
|
href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button"
|
|
data-slide="next">
|
|
<span class="carousel-control-next-icon"
|
|
aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<!-- Photo Grid End-->
|
|
</div>
|
|
<div
|
|
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
|
|
<!-- Enter Details -->
|
|
|
|
<!-- <h5 class="mb-3" style="color:#E29D25">Select Your Preference: <button id="backBtn" class="btn btn-sm btn-outline-primary">Back </button></h5> -->
|
|
<div
|
|
class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0" style="color:#E29D25">Select Your
|
|
Preference:</h5>
|
|
|
|
<button id="backBtn2" onclick="history.back()"
|
|
class="btn btn-primary">Back</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mb-3 row">
|
|
<label style="font-weight:bold;" for="numSeats"
|
|
class="col-sm-12 col-md-4 col-form-label"><strong>Number
|
|
of Seats :</strong></label>
|
|
<div class="col-sm-6 col-md-6">
|
|
<select class="form-control" id="numSeats">
|
|
<option value="1">1 Seat</option>
|
|
<option value="2">2 Seats</option>
|
|
<option value="3">3 Seats</option>
|
|
<option value="4">4 Seats</option>
|
|
<option value="5">5 Seats</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- <div class="mb-3 row">
|
|
<label style="font-weight:bold;" for="buildingname" class="col-sm-4 col-form-label text-end fw-semibold">
|
|
Building name:
|
|
</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" id="buildingname" class="form-control"
|
|
th:value="${buildingName}" readonly>
|
|
</div>
|
|
</div>-->
|
|
<div class="mb-3 row align-items-center">
|
|
<label for="buildingname"
|
|
class="col-sm-4 col-form-label text-end fw-semibold"
|
|
style="font-weight:bold;">
|
|
Location :
|
|
</label>
|
|
<div class="col-sm-6 d-flex align-items-center">
|
|
<input type="text" id="buildingname"
|
|
class="form-control" th:value="${buildingName}"
|
|
readonly> <br>
|
|
|
|
</div>
|
|
<button type="button" id="viewBuildingBtn"
|
|
class="btn btn-primary">Change</button>
|
|
</div>
|
|
|
|
|
|
<!-- Date Picker -->
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;" for="selectDate"
|
|
class="col-sm-4 col-form-label text-end">Select Date
|
|
:</label>
|
|
<div class="col-sm-6">
|
|
<!-- <input type="date" class="form-control" id="selectDate" onchange="loadTimeSlots()"> -->
|
|
<input class="form-control" id="selectDate"
|
|
type="text" placeholder="Select a date "
|
|
readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Slots -->
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;"
|
|
class="col-sm-4 col-form-label text-end">Seat
|
|
required for :</label>
|
|
<div class="col-sm-8">
|
|
<div id="seatfor" class="d-flex flex-wrap">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary2 me-2 mb-2"
|
|
style="margin: 5px;">
|
|
<input type="radio" name="booking_type"
|
|
id="halfDay" autocomplete="off"
|
|
value=""> Half Day
|
|
</label>
|
|
<label class="btn btn-primary2 me-2 mb-2"
|
|
style="margin: 5px;">
|
|
<input type="radio" name="booking_type"
|
|
id="fullDay" autocomplete="off"
|
|
value=""> Full Day
|
|
</label>
|
|
<label class="btn btn-primary2 mb-2"
|
|
style="margin: 5px;">
|
|
<input type="radio" name="booking_type"
|
|
id="month" autocomplete="off"
|
|
value=""> Month
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Slots -->
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;"
|
|
class="col-sm-4 col-form-label text-end">Available
|
|
Time Slot :</label>
|
|
<div class="col-sm-8">
|
|
<div id="timeSlots" class="d-flex flex-wrap">
|
|
<!-- Time slots will be generated here dynamically -->
|
|
</div>
|
|
<div id="seatAvailabilityMsg" style="margin-top:5px; font-size:13px; color:red;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected Time Slot
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Selected Time Slot</label>
|
|
<div class="col-sm-6">-->
|
|
<input type="hidden" id="selectedSlot" class="form-control"
|
|
readonly>
|
|
<!-- </div>
|
|
</div> -->
|
|
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;" for="selectType"
|
|
class="col-sm-4 col-form-label text-end">Select Type
|
|
:</label>
|
|
<div class="col-sm-6">
|
|
<select class="form-control" id="selectType">
|
|
<option value="Individual">Individual</option>
|
|
<option value="Corporate">Corporate</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;" for="personName"
|
|
class="col-sm-4 col-form-label text-end">Name
|
|
:</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control"
|
|
id="personName">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label style="font-weight:bold;" for="personPhone"
|
|
class="col-sm-4 col-form-label text-end">Mobile
|
|
Number :</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control"
|
|
id="personPhone"
|
|
placeholder="Enter mobile number"
|
|
pattern="^\d{10}$" maxlength="10" minlength="10"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Payable Amount -->
|
|
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-center">
|
|
<button type="button" style="width:100px;"
|
|
class="reset-now-btn mr-1"
|
|
onclick="resetForm()">Reset</button>
|
|
<button type="button" style="width:100px;"
|
|
class="book-now-btn" onclick="saveBooking()">Book
|
|
Now</button>
|
|
</div>
|
|
<div style="margin-top: 10px">
|
|
<center>
|
|
<!-- <h5 onclick="showTour(1,3);" class="scroll-link" style="font-size:14px;text-decoration: none; color:#1a73e8;font-weight: normal;cursor:pointer;">
|
|
<img src="/co-workspaceDocuments/360.png" width="200px" title="Click here to view Virtual Tour">
|
|
</h5> -->
|
|
</center>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-lg-2 col-sm-0"></div> -->
|
|
</div>
|
|
</form>
|
|
<!-- </div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="conferenceHallDiv2" style="border-radius: 10px; margin:0px;">
|
|
|
|
<div class="col-lg-12 col-sm-12">
|
|
<div style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">-->
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-sm-0" style="padding:0px;">
|
|
<h4 style="font-weight: bold;">Timing Details</h4>
|
|
<div class="row">
|
|
<!-- First Column -->
|
|
<div class="col-lg-6 col-sm-6">
|
|
<ul class="list-unstyled">
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/cal.png"
|
|
class="mr-1" width="25px;"> Available days:
|
|
S M T W T F S </li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/clo.png"
|
|
class="mr-1" width="25px;"> Available time :
|
|
09:00 AM to 09:00 PM</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h4 style="font-weight: bold;margin-bottom: 27px;">Amenities
|
|
</h4>
|
|
<div class="row">
|
|
<!-- First Column -->
|
|
<div class="col-lg-4 col-sm-4">
|
|
<ul class="list-unstyled">
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/1.png"
|
|
class="mr-1" width="15px;"> Wifi / Internet
|
|
</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/2.png"
|
|
class="mr-1" width="15px;"> 24/7 Security
|
|
</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/3.png"
|
|
class="mr-1" width="15px;"> Housekeeping
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Second Column -->
|
|
<div class="col-lg-4 col-sm-4">
|
|
<ul class="list-unstyled">
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/4.png"
|
|
class="mr-1" width="15px;"> Vehicle Parking
|
|
</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/5.png"
|
|
class="mr-1" width="15px;"> Reception</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/6.png"
|
|
class="mr-1" width="15px;"> Tea / Coffee
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Third Column -->
|
|
<div class="col-lg-4 col-sm-4">
|
|
<ul class="list-unstyled">
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/7.png"
|
|
class="mr-1" width="15px;"> Comfy
|
|
Workstations</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/8.png"
|
|
class="mr-1" width="15px;"> Air Conditioning
|
|
</li>
|
|
<li style="margin-bottom: 21px;"><img
|
|
src="/co-workspaceDocuments/icons/9.png"
|
|
class="mr-1" width="15px;"> Informal Collab
|
|
Area</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
|
|
<h4 style="font-weight: bold;">Muthalvar Padaippagam Location
|
|
</h4>
|
|
<div class="locationmap">
|
|
<iframe
|
|
th:src="'https://www.google.com/maps?q=' + ${latitude} + ',' + ${longitude} + '&hl=en&z=14&output=embed'"
|
|
width="100%" height="450" style="border:0;"
|
|
allowfullscreen loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade">
|
|
</iframe>
|
|
<!--- <iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3885.7981508771118!2d80.232587!3d13.111970000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTPCsDA2JzQzLjEiTiA4MMKwMTMnNTcuMyJF!5e0!3m2!1sen!2sin!4v1730288154721!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
|
|
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5919.7511602058585!2d80.22612333567244!3d13.112778597995147!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52644d2af36f2f%3A0xab9239a0f5506f51!2sChennai%20Corporation%20Office!5e1!3m2!1sen!2sin!4v1729756217765!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Main-body end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer th:replace="~{fragments/footer :: footer}"></footer>
|
|
</div>
|
|
<div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="visitTourModalLabel">Virtual Tour</h5>
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<iframe id="visitTourIframe" src=""
|
|
style="width: 100%; height: 500px; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- modal for confrim booking -->
|
|
<div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-md" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5>Review and confirm your booking details.</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Booking Type:</th>
|
|
<td>Desk Space</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Name:</th>
|
|
<td><span class="name"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Mobile:</th>
|
|
<td><span class="mnum"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Selected Date:</th>
|
|
<td><span class="date"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Selected Slot:</th>
|
|
<td><span class="slot"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Number of Seats:</th>
|
|
<td><span class="adultcount"></span></td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<th scope="row">Seat required for:</th>
|
|
<td><span class="seatfor"></span></td>
|
|
</tr> -->
|
|
<tr>
|
|
<th scope="row">Amount:</th>
|
|
<td><span class="amounttxt"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="modal-footer text-center">
|
|
<div style="text-align: center;" id="paynow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script th:replace="~{fragments/user-script :: script}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
//ak
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const viewBuildingBtn = document.getElementById('viewBuildingBtn');
|
|
|
|
if (viewBuildingBtn) {
|
|
viewBuildingBtn.addEventListener('click', () => {
|
|
window.location.href = '/muthalvarpadaippagam';
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
$(document).on('click', '#backBtn', function () {
|
|
//window.location.href = '/muthalvarpadaippagam/home';
|
|
});
|
|
|
|
|
|
fetch('/muthalvarpadaippagam/book/api/marquee')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const marqueeContainer = document.querySelector(".scrolling-text span");
|
|
if (marqueeContainer && data.content) {
|
|
marqueeContainer.textContent = data.content;
|
|
}
|
|
})
|
|
.catch(error => console.error("Failed to load marquee:", error));
|
|
|
|
//let catId=2;
|
|
//let subId =2;
|
|
//let buildId= 1;
|
|
|
|
|
|
// Extract query parameters from the URL
|
|
// const urlParams = new URLSearchParams(window.location.search);
|
|
// const catId = urlParams.get('categoryId');
|
|
// const buildId = urlParams.get('buildingId');
|
|
// let subId = urlParams.get('subId');
|
|
|
|
// console.log("Category ID:", catId);
|
|
// console.log("Building ID:", buildId);
|
|
// console.log("Sub ID:", subId);
|
|
|
|
// Optional: fallback if parameters missing
|
|
|
|
const buildId = document.getElementById("#buildingId")
|
|
const catId = document.getElementById("#categoryId")
|
|
let subId = document.getElementById("#subId")
|
|
|
|
console.log("Category ID:", catId);
|
|
console.log("Building ID:", buildId);
|
|
console.log("Sub ID:", subId);
|
|
|
|
|
|
|
|
|
|
let slots = [];
|
|
let timeSlots = [];
|
|
let selectedSeatType = 4; // default to 4 seater
|
|
let ratePerHour = 150; // default rate for 4 seater
|
|
const bookedSlots = ['9:00 AM', '6:00 PM', '8:00 PM']; // Sample booked slots, will show in red
|
|
|
|
// Load available time slots
|
|
// Global variable to store selected slots
|
|
let selectedSlots = [];
|
|
async function loadSlots(scid) {
|
|
timeSlots = []; // Clear previous slots
|
|
subId = scid;
|
|
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/muthalvarpadaippagam/api/getSlotBySid',
|
|
type: 'GET',
|
|
data: { scid: scid }
|
|
});
|
|
timeSlots = response; // Populate timeSlots after response
|
|
console.log("Slots loaded:", timeSlots);
|
|
} catch (error) {
|
|
console.error('Error loading slots:', error);
|
|
}
|
|
}
|
|
//ak dynamic
|
|
async function assignScidToStaticRadios() {
|
|
|
|
let catId = $('#categoryId').val();
|
|
|
|
try {
|
|
const response = await $.ajax({
|
|
url: '/muthalvarpadaippagam/api/getSubCategoryByCid',
|
|
type: 'GET',
|
|
data: { cid: catId }
|
|
});
|
|
|
|
response.forEach(function(item) {
|
|
|
|
if (item.display_name.toLowerCase().includes("half")) {
|
|
$('#halfDay').val(item.scid);
|
|
}
|
|
else if (item.display_name.toLowerCase().includes("full")) {
|
|
$('#fullDay').val(item.scid);
|
|
}
|
|
else if (item.display_name.toLowerCase().includes("month")) {
|
|
$('#month').val(item.scid);
|
|
}
|
|
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error("Error assigning scid:", error);
|
|
}
|
|
}
|
|
|
|
function loadTimeSlots(selectedDate) {
|
|
|
|
const timeSlotsDiv = document.getElementById('timeSlots');
|
|
timeSlotsDiv.innerHTML = ''; // Clear previous slots
|
|
|
|
const currentTime = new Date();
|
|
let endDate = currentTime;
|
|
let day = String(endDate.getDate()).padStart(2, '0');
|
|
let month = String(endDate.getMonth() + 1).padStart(2, '0');
|
|
let year = endDate.getFullYear();
|
|
toDate = year + "-" + month + "-" + day;
|
|
|
|
const hours = String(currentTime.getHours()).padStart(2, '0');
|
|
const minutes = String(currentTime.getMinutes()).padStart(2, '0');
|
|
const formattedTime = `${hours}:${minutes}`;
|
|
|
|
timeSlots.forEach(slot => {
|
|
|
|
if (selectedDate == toDate) {
|
|
if (slot.end_time > formattedTime) {
|
|
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
|
|
const slotDiv = `
|
|
<label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
|
|
<input type="radio" name="timeSlot" id="${slot.slotid}" value="${slot.slotid}"
|
|
${isBooked ? 'disabled' : ''} onclick="selectTimeSlot(this)">
|
|
${slot.name} <!-- Display time here -->
|
|
</label>`;
|
|
timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
|
|
}
|
|
}
|
|
else {
|
|
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
|
|
const slotDiv = `
|
|
<label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
|
|
<input type="radio" name="timeSlot" id="${slot.slotid}" value="${slot.slotid}"
|
|
${isBooked ? 'disabled' : ''} onclick="selectTimeSlot(this)">
|
|
${slot.name} <!-- Display time here -->
|
|
</label>`;
|
|
timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
|
|
}
|
|
});
|
|
}
|
|
$('#numSeats').change(function () {
|
|
|
|
document.getElementById('timeSlots').innerHTML = '';
|
|
document.getElementById('selectDate').value = '';
|
|
|
|
|
|
|
|
// clear availability text
|
|
$('#seatAvailabilityMsg').text('');
|
|
|
|
console.log("Slots reset because number of seats changed");
|
|
});
|
|
$('input[name="booking_type"]').change(function () {
|
|
|
|
// clear seat availability message
|
|
$('#seatAvailabilityMsg').text('');
|
|
|
|
// optional: reset selected slot
|
|
|
|
|
|
});
|
|
function selectTimeSlot(element) {
|
|
|
|
slots = [];
|
|
|
|
let slotId = element.value;
|
|
let bid = $('#buildingId').val();
|
|
let cid = $('#categoryId').val();
|
|
let scid = $('#subId').val();
|
|
let bDate = $('#selectDate').val();
|
|
let noOfPerson = $('#numSeats').val();
|
|
|
|
$.ajax({
|
|
url: '/muthalvarpadaippagam/book/api/checkAvailslots',
|
|
type: 'GET',
|
|
data: {
|
|
bid: bid,
|
|
cid: cid,
|
|
bDate: bDate,
|
|
scid: scid,
|
|
slotId: slotId
|
|
},
|
|
success: function (availableSeats) {
|
|
|
|
// show message below slots
|
|
$('#seatAvailabilityMsg').text("Available Seats : " + availableSeats);
|
|
|
|
if (availableSeats == 0) {
|
|
|
|
$('#seatAvailabilityMsg').text("Slot Full");
|
|
|
|
|
|
// show slot as selected
|
|
document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
|
|
slot.parentElement.style.backgroundColor = '';
|
|
slot.parentElement.style.color = '';
|
|
});
|
|
|
|
element.parentElement.style.backgroundColor = '#E29D25';
|
|
element.parentElement.style.color = '#FFF';
|
|
|
|
return;
|
|
}
|
|
|
|
if (parseInt(noOfPerson) > availableSeats) {
|
|
|
|
$('#seatAvailabilityMsg').text("Only " + availableSeats + " seats available");
|
|
|
|
// still store selected slot
|
|
document.getElementById('selectedSlot').value =
|
|
element.nextSibling.nodeValue.trim();
|
|
|
|
slots.push(slotId);
|
|
|
|
document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
|
|
slot.parentElement.style.backgroundColor = '';
|
|
slot.parentElement.style.color = '';
|
|
});
|
|
|
|
element.parentElement.style.backgroundColor = '#E29D25';
|
|
element.parentElement.style.color = '#FFF';
|
|
|
|
return;
|
|
}
|
|
document.getElementById('selectedSlot').value =
|
|
element.nextSibling.nodeValue.trim();
|
|
|
|
slots.push(slotId);
|
|
|
|
console.log("Selected slots:", slots);
|
|
|
|
// reset colors
|
|
document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
|
|
slot.parentElement.style.backgroundColor = '';
|
|
slot.parentElement.style.color = '';
|
|
});
|
|
|
|
if (element.checked) {
|
|
element.parentElement.style.backgroundColor = '#E29D25';
|
|
element.parentElement.style.color = '#FFF';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
//exisisting
|
|
|
|
/* function selectTimeSlot(element) {
|
|
slots = [];
|
|
document.getElementById('selectedSlot').value = element.nextSibling.nodeValue.trim(); // Get the displayed time
|
|
slots.push(element.value);
|
|
console.log("Selected slots:", slots);
|
|
|
|
// Reset background color for all time slot radio buttons
|
|
document.querySelectorAll('input[name="timeSlot"]').forEach(slot => {
|
|
slot.parentElement.style.backgroundColor = ''; // Reset background color
|
|
slot.parentElement.style.color = ''; // Reset background color
|
|
});
|
|
|
|
// Set background color to red for the selected radio button's parent element
|
|
if (element.checked) {
|
|
element.parentElement.style.backgroundColor = '#E29D25';
|
|
element.parentElement.style.color = '#FFF';
|
|
}
|
|
}*/
|
|
|
|
// Calculate Total Payable Amount
|
|
|
|
// Reset the form
|
|
function resetForm() {
|
|
document.getElementById('conferenceHallForm').reset(); // Reset the form fields
|
|
document.getElementById('timeSlots').innerHTML = ''; // Clear the time slots
|
|
document.getElementById('selectedSlot').value = ''; // Clear selected slot
|
|
document.getElementById('totalAmount').value = 'Rs. 0.00'; // Reset total amount
|
|
$('#seatAvailabilityMsg').text(''); // Clear seat availability message
|
|
}
|
|
|
|
// Booking Action
|
|
|
|
function validatePersonName() {
|
|
const personName = $('#personName').val();
|
|
const isValid = /^[a-zA-Z\s]+$/.test(personName); // Only letters and spaces
|
|
|
|
if (isValid && personName.trim() !== "") {
|
|
$('#personName').css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('#personName').css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function validateMobileNumber() {
|
|
const mobileNumber = $('#personPhone').val();
|
|
const isValid = /^\d{10}$/.test(mobileNumber); // Checks if it's exactly 10 digits
|
|
|
|
if (isValid) {
|
|
$('#personPhone').css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('#personPhone').css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
// Validate Select Date (yy-mm-dd format)
|
|
function validateSelectDate() {
|
|
const selectDate = $('#selectDate').val();
|
|
const isValid = /^\d{4}-\d{2}-\d{2}$/.test(selectDate); // Regex for yy-mm-dd format
|
|
|
|
if (isValid) {
|
|
$('#selectDate').css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('#selectDate').css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
// Validate Selected Slot (Radio Button)
|
|
function validateSelectedSlot() {
|
|
const selectedSlot = $('#selectedSlot').val(); // Checks if any radio button is selected
|
|
const isValid = !!selectedSlot;
|
|
|
|
if (isValid) {
|
|
$('input[name="selectedSlot"]').parent().css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('input[name="selectedSlot"]').parent().css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
// Validate Number of Seats (Dropdown)
|
|
function validateNumSeats() {
|
|
const numSeats = $('#numSeats').val();
|
|
const isValid = numSeats !== "default"; // Assumes 'default' is the value for unselected dropdown option
|
|
|
|
if (isValid) {
|
|
$('#numSeats').css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('#numSeats').css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function validateBookingType() {
|
|
const isBookingTypeSelected = $('input[name="booking_type"]:checked').length > 0;
|
|
const isValid = !!isBookingTypeSelected;
|
|
|
|
if (isValid) {
|
|
$('input[name="selectedSlot"]').parent().css('border-color', ''); // Clear any error styling
|
|
} else {
|
|
$('input[name="selectedSlot"]').parent().css('border-color', 'red'); // Highlight the field with error styling
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function saveBooking() {
|
|
let msg = $('#seatAvailabilityMsg').text();
|
|
|
|
if (msg.includes("Only")) {
|
|
// alert(msg);
|
|
swal.fire({
|
|
title: "Seat Availability",
|
|
text: msg,
|
|
icon: "warning",
|
|
button: "OK",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (msg.includes("Slot Full")) {
|
|
swal.fire({
|
|
title: "Slot Full",
|
|
text: "This slot is full. Please select another slot.",
|
|
icon: "error",
|
|
button: "OK",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// console.log(catId);
|
|
// console.log(buildId);
|
|
// console.log(subId);
|
|
//console.log(from_date);
|
|
//e.preventDefault(); // Prevent form submission for this example
|
|
|
|
const isMobileValid = validateMobileNumber();
|
|
const isNameValid = validatePersonName();
|
|
const isDateValid = validateSelectDate();
|
|
const isBookingTypeValid = validateBookingType();
|
|
const isSlotValid = validateSelectedSlot();
|
|
const isSeatsValid = validateNumSeats();
|
|
//alert(isMobileValid +" - "+ isNameValid +" - "+ isDateValid +" - "+ isSlotValid +" - "+ isSeatsValid );
|
|
if (isMobileValid && isNameValid && isDateValid && isBookingTypeValid && isSlotValid && isSeatsValid) {
|
|
// Proceed with form submission
|
|
//alert("Form is valid!");
|
|
} else {
|
|
// alert("Please correct the errors in the form.");
|
|
swal.fire({
|
|
title: "Form Validation",
|
|
text: "Please correct the errors in the form.",
|
|
icon: "error",
|
|
button: "OK",
|
|
});
|
|
return false;
|
|
}
|
|
|
|
// Populate the input values
|
|
let name = $('#personName').val();
|
|
let phone = $('#personPhone').val();
|
|
let fromDate = $('#selectDate').val(); // Ensure this is a different element
|
|
let subId = $('input[name="booking_type"]:checked').val();
|
|
//let subId = $('#subId').val();
|
|
let buildId = $('#buildingId').val();
|
|
let catId = $('#categoryId').val();
|
|
console.log(subId);
|
|
let toDate = fromDate; // Ensure this is a different element
|
|
if (subId == 4 || subId==12 || subId==24) {
|
|
//toDate = convertDateFormat(toDate);
|
|
let endDate = new Date(fromDate);
|
|
endDate.setDate(endDate.getDate() + 30);
|
|
let day = String(endDate.getDate()).padStart(2, '0');
|
|
let month = String(endDate.getMonth() + 1).padStart(2, '0');
|
|
let year = endDate.getFullYear();
|
|
|
|
toDate = year + "-" + month + "-" + day;
|
|
}
|
|
let selectedSlot = $('#selectedSlot').val();
|
|
let noOfPeople = $('#numSeats').val();
|
|
|
|
// Populate the span elements with the retrieved values
|
|
$('.name').text(name);
|
|
$('.mnum').text(phone);
|
|
$('.date').text(`${fromDate} to ${toDate}`);
|
|
$('.adultcount').text(noOfPeople);
|
|
$('.slot').text(selectedSlot);
|
|
$(".noOfPeoplecount").text(noOfPeople);
|
|
|
|
|
|
$.ajax({
|
|
url: '/muthalvarpadaippagam/book/api/saveInTemp',
|
|
type: 'POST',
|
|
data: {
|
|
catId: catId,
|
|
buildId: buildId,
|
|
subId: subId,
|
|
noOfPeople: noOfPeople, // Use dynamic value from the input
|
|
fromDate: fromDate,
|
|
toDate: toDate,
|
|
userName: name,
|
|
userMobile: phone,
|
|
slots: slots // Ensure this is defined and populated
|
|
},
|
|
success: function (response) {
|
|
//console.log("Akg Response:"+response);
|
|
if (response) {
|
|
let tempId = response.tempBookId;
|
|
$(".amount").text(response.amount);
|
|
let finalAmount = response.amount;
|
|
|
|
$(".amounttxt").text("Rs. " + finalAmount);
|
|
|
|
// Update the modal with a dynamic Pay Now button
|
|
$('#paynow').html(
|
|
'<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>' +
|
|
'<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>' +
|
|
''
|
|
);
|
|
|
|
// Open the modal
|
|
$('#ackModal').modal('show');
|
|
}
|
|
},
|
|
/*error: function (xhr, status, error) {
|
|
alert("Please select another slot. The selected slot is now full.");
|
|
console.log('Error sending data:', error);
|
|
console.log('Response text:', xhr.responseText); // Log response text for debugging
|
|
}*/
|
|
error: function (xhr) {
|
|
|
|
let msg = "Booking failed. Please try again.";
|
|
|
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
|
msg = xhr.responseJSON.message;
|
|
}
|
|
|
|
// alert(msg);
|
|
swal.fire({
|
|
title: "Booking Failed",
|
|
text: msg,
|
|
icon: "error",
|
|
button: "OK",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
//date valisdation
|
|
$(document).ready(function () {
|
|
$("#selectDate").datepicker({
|
|
minDate: 0, // Current date
|
|
maxDate: 60, // Next 60 days
|
|
dateFormat: 'yy-mm-dd'
|
|
//dateFormat: 'dd-mm-yy'
|
|
});
|
|
/* $(document).ready(function () {
|
|
|
|
$("#selectDate").attr("readonly", true); // prevent manual edit
|
|
|
|
$("#selectDate").datepicker({
|
|
minDate: 0,
|
|
maxDate: 60,
|
|
dateFormat: 'yy-mm-dd',
|
|
onSelect: function(dateText) {
|
|
$("#selectDate").val(dateText);
|
|
}
|
|
});
|
|
|
|
// Block typing and pasting
|
|
$("#selectDate").on("keydown paste", function(e){
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
|
|
// Allow opening datepicker on click
|
|
$("#selectDate").on("click", function () {
|
|
$(this).datepicker("show");
|
|
});*/
|
|
|
|
|
|
|
|
|
|
/* $("#selectDate").datepicker({
|
|
minDate: 0, // Prevent past dates
|
|
maxDate: 60, // Allow next 60 days
|
|
dateFormat: 'yy-mm-dd',
|
|
onSelect: function(dateText) {
|
|
$(this).attr("readonly", true); // Make the field read-only after selection
|
|
}
|
|
});
|
|
|
|
// Block manual typing or pasting
|
|
$("#selectDate").on("keydown paste", function(e){
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
|
|
// Allow reopening the datepicker on click even after readonly
|
|
$("#selectDate").on("click", function () {
|
|
$(this).datepicker("show");
|
|
});*/
|
|
|
|
// Function to load available time slots
|
|
|
|
//ak dynamic
|
|
assignScidToStaticRadios();
|
|
|
|
|
|
|
|
$('#selectDate').on('change', async function () {
|
|
//alert('Date changed');
|
|
// const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
|
|
// const scid = bookingType; // Retrieve scid dynamically if needed
|
|
const selectedRadio = document.querySelector('input[name="booking_type"]:checked');
|
|
$('#seatAvailabilityMsg').text('');
|
|
|
|
if (!selectedRadio || !selectedRadio.value) {
|
|
console.log("Invalid scid. Skipping slot load.");
|
|
return;
|
|
}
|
|
|
|
const scid = selectedRadio.value;
|
|
|
|
const selectedDate = $("#selectDate").val();
|
|
let catId = $('#categoryId').val();
|
|
|
|
console.log("cat")
|
|
console.log(catId);
|
|
|
|
|
|
console.log("sleted")
|
|
console.log(scid);
|
|
if (scid) {
|
|
await loadSlots(scid);
|
|
loadTimeSlots(selectedDate);
|
|
}
|
|
$('#selectedSlot').val('');
|
|
});
|
|
|
|
$('input[name="booking_type"]').on('change', async function () {
|
|
const selectedRadio = document.querySelector('input[name="booking_type"]:checked');
|
|
|
|
if (!selectedRadio || !selectedRadio.value) {
|
|
console.log("Invalid scid. Skipping slot load.");
|
|
return;
|
|
}
|
|
|
|
const scid = selectedRadio.value;
|
|
// const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
|
|
// const scid = bookingType; // Retrieve scid dynamically if needed
|
|
// const scid = $('#subId').val();
|
|
let catId = $('#categoryId').val();
|
|
console.log("cat12")
|
|
console.log(catId);
|
|
|
|
const selectedDate = $("#selectDate").val();
|
|
await loadSlots(scid);
|
|
loadTimeSlots(selectedDate);
|
|
$('#selectedSlot').val('');
|
|
});
|
|
});
|
|
|
|
document.getElementById('personPhone').addEventListener('input', function (e) {
|
|
const value = e.target.value;
|
|
// Allow only digits and limit to 10 characters
|
|
e.target.value = value.replace(/\D/g, '').slice(0, 10);
|
|
|
|
// Display an error message if necessary
|
|
if (value.length < 10 && value.length > 0) {
|
|
e.target.setCustomValidity("Please enter a 10-digit mobile number.");
|
|
} else {
|
|
e.target.setCustomValidity(""); // Clear any error message
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function showTour(buildingId, categoryId) {
|
|
console.log("Visit Tour Triggered - Bid:", buildingId, "Cid:", categoryId);
|
|
|
|
let url = "";
|
|
let modalId = "";
|
|
|
|
// Ensure categoryId is parsed correctly
|
|
categoryId = parseInt(categoryId);
|
|
|
|
// Determine the URL and modal ID based on the categoryId
|
|
if (categoryId === 1) {
|
|
url = "https://my.matterport.com/show/?m=gKmjwFBqnwa";
|
|
modalId = "visitTourModal";
|
|
} else if (categoryId === 3) {
|
|
url = "https://my.matterport.com/show/?m=2n8cHdtUfs8";
|
|
modalId = "visitTourModal";
|
|
} else {
|
|
// alert("No tour available for this category."); // Fallback for other cases
|
|
swal.fire({
|
|
title: "No Tour Available",
|
|
text: "No tour available for this category.",
|
|
icon: "info",
|
|
button: "OK",
|
|
});
|
|
return;
|
|
}
|
|
|
|
console.log("Resolved URL:", url, "Modal ID:", modalId);
|
|
|
|
// Dynamically set the iframe source
|
|
const iframeId = modalId === "visitTourModal" ? "visitTourIframe" : "visitTourIframe1";
|
|
document.getElementById(iframeId).src = url;
|
|
|
|
// Open the appropriate modal
|
|
const modalElement = document.getElementById(modalId);
|
|
const modalInstance = new bootstrap.Modal(modalElement);
|
|
modalInstance.show();
|
|
|
|
console.log("Modal Displayed:", modalId);
|
|
}
|
|
|
|
function showTourPopup1(link) {
|
|
const iframe = document.getElementById('visitTourIframe1');
|
|
iframe.src = link;
|
|
|
|
// Show the modal
|
|
const modal = new bootstrap.Modal(document.getElementById('visitTourModal1'));
|
|
modal.show();
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|