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

<!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>