<?php

error_reporting(E_ALL);
ini_set('display_errors',1);

include("config/db.php");

$rooms = mysqli_query($conn,"
SELECT *
FROM rooms
WHERE status='active'
ORDER BY id ASC
");

?>
<!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">

<title>Stay & Events | Lalu Hotel</title>

<meta name="description"
content="Luxury Rooms, Dormitory, Banquet Hall, Wedding & Event Booking at Lalu Hotel Birpur Bihar">

<link rel="icon" href="img/logo.png">

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS -->

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/aos.css" rel="stylesheet">
<link href="css/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">

<style>

:root{
--gold:#c89b3c;
--dark:#111;
--light:#fafafa;
}

/* HERO */

#stayHero{

padding:90px 0;

background:
linear-gradient(
135deg,
#f8f8f8,
#ffffff
);
}

.hero-badge{

display:inline-block;

padding:10px 18px;

background:#fff5dd;

color:var(--gold);

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:20px;
}

.hero-title{

font-family:
'Playfair Display',
serif;

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;
}

.hero-title span{

color:var(--gold);
}

.hero-text{

font-size:18px;

color:#666;

margin-bottom:25px;
}

.hero-points{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:15px;

margin-bottom:30px;
}

.hero-points div{

font-weight:600;
}

.hero-points i{

color:var(--gold);

margin-right:8px;
}

.hero-btns{

display:flex;

gap:15px;

flex-wrap:wrap;
}

.hero-btn-main{

background:var(--gold);

color:#fff;

padding:14px 25px;

border-radius:12px;

font-weight:700;

text-decoration:none;
}

.hero-btn-main:hover{

color:#fff;
}

.hero-btn-outline{

border:2px solid var(--gold);

color:var(--gold);

padding:14px 25px;

border-radius:12px;

font-weight:700;

text-decoration:none;
}

.hero-image{

position:relative;
}

.hero-image img{

width:100%;

height:540px;

object-fit:cover;

border-radius:30px;
}

.hero-card{

position:absolute;

bottom:25px;
left:25px;

background:#fff;

padding:18px 22px;

border-radius:18px;

box-shadow:
0 15px 40px rgba(0,0,0,.12);
}

.hero-card h3{

margin:0;

font-size:30px;

font-weight:800;

color:var(--gold);
}

/* AVAILABILITY */

#availabilityBar{

margin-top:-30px;

padding-bottom:70px;
}

.availability-box{

background:#fff;

padding:30px;

border-radius:25px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.availability-box label{

font-weight:600;

margin-bottom:8px;
}

.availability-box .form-control{

height:54px;

border-radius:12px;
}

.check-btn{

width:100%;

height:54px;

border:none;

background:var(--gold);

color:#fff;

border-radius:12px;

font-weight:700;
}

.check-btn:hover{

background:#b8872f;
}

/* SECTION */

.section-title{

font-family:
'Playfair Display',
serif;

font-size:52px;

font-weight:800;
}

.section-title span{

color:var(--gold);
}

.section-sub{

max-width:700px;

margin:auto;

color:#666;
}

/* MOBILE */

@media(max-width:768px){

.hero-title{

font-size:42px;
}

.hero-image img{

height:320px;
}

.hero-points{

grid-template-columns:1fr;
}

.section-title{

font-size:34px;
}

}

</style>

</head>

<body>

<!-- TOPBAR -->

<div id="topbar">

<div class="container">

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">

<div class="top-contact d-flex flex-wrap">

<span>
<i class="fas fa-phone-alt"></i>
+91 7779876705
</span>

<span>
<i class="fas fa-map-marker-alt"></i>
Birpur, Bihar
</span>

</div>

<div class="tsoc">

<a href="#">
<i class="fab fa-facebook-f"></i>
</a>

<a href="#">
<i class="fab fa-instagram"></i>
</a>

<a href="https://wa.me/917779876705">
<i class="fab fa-whatsapp"></i>
</a>

</div>

</div>

</div>

</div>

<!-- NAVBAR -->

<nav class="navbar navbar-expand-lg" id="nav">

<div class="container">

<a class="navbar-brand" href="index.php">

<div class="blogo">

<img
src="img/logo.png"
alt="Lalu Hotel"
class="logo-img">

<div>

<div class="bname">

Lalu <span>Hotel</span>

</div>

<div class="bsub">

Pure Veg Restaurant • Stay & Events

</div>

</div>

</div>

</a>

<button
class="navbar-toggler border-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu">

<i class="fas fa-bars"></i>

</button>

<div
class="collapse navbar-collapse"
id="navmenu">

<ul class="navbar-nav mx-auto">

<li class="nav-item">
<a class="nav-link" href="index.php">
Home
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="about.php">
About Us
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="menu.php">
Menu
</a>
</li>

<li class="nav-item">
<a class="nav-link active"
href="stay-events.php">
Stay & Events
</a>
</li>

<li class="nav-item">
<a class="nav-link"
href="contact.php">
Contact Us
</a>
</li>

</ul>

<div>

<a
href="#availabilityBar"
class="nav-link nav-cta">

<i class="fas fa-bed me-1"></i>

Book Room

</a>

</div>

</div>

</div>

</nav>

<!-- HERO -->

<section id="stayHero">

<div class="container">

<div class="row align-items-center g-5">

<div class="col-lg-6">

<div class="hero-badge">

Luxury Stay & Events

</div>

<h1 class="hero-title">

Stay
<span>Comfortably</span>

Celebrate
<span>Grandly</span>

</h1>

<p class="hero-text">

Premium AC Rooms, Non AC Rooms,
Dormitory Stay, Wedding Hall,
Reception Hall and Event Facilities
at Lalu Hotel Birpur.

</p>

<div class="hero-points">

<div>
<i class="fas fa-bed"></i>
AC Rooms
</div>

<div>
<i class="fas fa-hotel"></i>
Non AC Rooms
</div>

<div>
<i class="fas fa-building"></i>
AC Dormitory
</div>

<div>
<i class="fas fa-ring"></i>
Wedding Venue
</div>

</div>

<div class="hero-btns">

<a href="#rooms" class="hero-btn-main">

Explore Rooms

</a>

<a href="#events" class="hero-btn-outline">

Plan Event

</a>

</div>

</div>

<div class="col-lg-6">

<div class="hero-image">

<img
src="img/rooms/ac-room.jpg"
alt="Lalu Hotel">

<div class="hero-card">

<h3>30+</h3>

Years Of Hospitality

</div>

</div>

</div>

</div>

</div>

</section>

<!-- AVAILABILITY -->

<section id="availabilityBar">

<div class="container">

<div class="availability-box">

<form id="availabilityForm">

<div class="row g-3 align-items-end">

<div class="col-lg-3">

<label>Check In</label>

<input
type="date"
class="form-control"
name="checkin"
required>

</div>

<div class="col-lg-3">

<label>Check Out</label>

<input
type="date"
class="form-control"
name="checkout"
required>

</div>

<div class="col-lg-2">

<label>Guests</label>

<input
type="number"
class="form-control"
name="guests"
value="1"
min="1"
required>

</div>

<div class="col-lg-2">

<label>Rooms</label>

<input
type="number"
class="form-control"
name="rooms"
value="1"
min="1"
required>

</div>

<div class="col-lg-2">

<button
type="submit"
class="check-btn">

Check Availability

</button>

</div>

</div>

</form>

<div id="availabilityResult"></div>

</div>

</div>

</section>
<!-- ================= ROOMS ================= -->

<section id="rooms" class="py-5">

<div class="container">

<div class="text-center mb-5">

<div class="hero-badge">

Luxury Accommodation

</div>

<h2 class="section-title">

Choose Your
<span>Stay</span>

</h2>

<p class="section-sub">

Select the perfect accommodation
for your family, guests and events.

</p>

</div>

<div class="row g-4">

<?php
while($room=mysqli_fetch_assoc($rooms))
{

$img = !empty($room['image'])
?
"img/rooms/".$room['image']
:
"img/logo.png";
?>

<div class="col-lg-4 col-md-6">

<div class="room-card">

<div class="room-img">

<img
src="<?php echo $img; ?>"
alt="<?php echo $room['room_name']; ?>">

</div>

<div class="room-content">

<div class="d-flex justify-content-between align-items-center mb-2">

<h4>

<?php echo $room['room_name']; ?>

</h4>

<span class="badge bg-success">

<?php echo $room['room_type']; ?>

</span>

</div>

<?php

if(
isset($room['room_category']) &&
$room['room_category']=="dormitory"
)
{
?>

<div class="room-price">

₹3000

<span>/ 5 Hours</span>

</div>

<div class="room-status text-success">

<i class="fas fa-check-circle"></i>

Available

</div>

<?php
}
else
{
?>

<div class="room-price">

₹<?php echo number_format($room['price']); ?>

<span>/ Night</span>

</div>

<div class="room-status">

<i class="fas fa-bed"></i>

<?php
echo isset($room['available_rooms'])
?
$room['available_rooms']
:
0;
?>

Rooms Available

</div>

<?php
}
?>

<p class="room-desc">

<?php

$desc = !empty($room['description'])
? $room['description']
: 'Comfortable stay with modern facilities.';

echo substr(
strip_tags($desc),
0,
120
);

?>

...

</p>

<div class="room-features">

<span>
<i class="fas fa-wifi"></i>
WiFi
</span>

<span>
<i class="fas fa-tv"></i>
TV
</span>

<span>
<i class="fas fa-concierge-bell"></i>
Service
</span>

</div>

<div class="room-buttons">

<button
class="btn-view"

data-id="<?php echo $room['id']; ?>"
data-name="<?php echo htmlspecialchars($room['room_name']); ?>"
data-image="<?php echo $img; ?>"
data-price="<?php echo $room['price']; ?>"
data-desc="<?php echo htmlspecialchars($room['description']); ?>">

View Details

</button>

<a
href="booking.php?room_id=<?php echo $room['id']; ?>"
class="btn-book">

Book Now

</a>

</div>

</div>

</div>

</div>

<?php
}
?>

</div>

</div>

</section>

<style>

.room-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

height:100%;

transition:.3s;
}

.room-card:hover{

transform:translateY(-8px);
}

.room-img{

height:260px;

overflow:hidden;
}

.room-img img{

width:100%;

height:100%;

object-fit:cover;
}

.room-content{

padding:25px;
}

.room-content h4{

font-weight:700;
}

.room-price{

font-family:
'Playfair Display',
serif;

font-size:38px;

font-weight:800;

color:#c89b3c;

margin:10px 0;
}

.room-price span{

font-size:14px;

font-family:
'Poppins',
sans-serif;

color:#666;
}

.room-status{

font-weight:600;

margin-bottom:12px;
}

.room-desc{

color:#666;

min-height:60px;
}

.room-features{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:20px;
}

.room-features span{

background:#f6f6f6;

padding:8px 12px;

border-radius:50px;

font-size:13px;
}

.room-features i{

color:#c89b3c;
}

.room-buttons{

display:flex;

gap:10px;
}

.btn-view{

flex:1;

height:48px;

border:none;

border-radius:12px;

background:#f2f2f2;

font-weight:600;
}

.btn-book{

flex:1;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:#c89b3c;

color:#fff;

text-decoration:none;

border-radius:12px;

font-weight:700;
}

.btn-book:hover{

color:#fff;
}

</style>
<!-- ================= ROOM DETAILS MODAL ================= -->

<div
class="modal fade"
id="roomModal"
tabindex="-1">

<div class="modal-dialog modal-xl modal-dialog-centered">

<div class="modal-content border-0">

<div class="modal-body p-0">

<div class="row g-0">

<div class="col-lg-6">

<img
id="modalRoomImage"
src=""
class="modal-room-image"
alt="Room">

</div>

<div class="col-lg-6">

<div class="modal-room-content">

<div class="d-flex justify-content-between align-items-center">

<div>

<h2 id="modalRoomName"></h2>

<span
id="modalRoomType"
class="badge bg-success">
</span>

</div>

<button
type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>

</div>

<div
id="modalRoomPrice"
class="modal-room-price">

₹0

</div>

<div
id="modalAvailability"
class="room-availability">

Available

</div>

<hr>

<h5 class="mb-3">

Room Facilities

</h5>

<div class="modal-features">

<div>
<i class="fas fa-wifi"></i>
Free WiFi
</div>

<div>
<i class="fas fa-tv"></i>
Smart TV
</div>

<div>
<i class="fas fa-bed"></i>
Comfortable Bed
</div>

<div>
<i class="fas fa-concierge-bell"></i>
Room Service
</div>

<div>
<i class="fas fa-bath"></i>
Attached Bathroom
</div>

<div>
<i class="fas fa-shield-alt"></i>
Safe Stay
</div>

</div>

<hr>

<h5>

Description

</h5>

<p id="modalRoomDesc">

Room Description

</p>

<div class="mt-4">

<a
id="modalBookBtn"
href="#"
class="modal-book-btn">

Book Now

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

.modal-room-image{

width:100%;

height:100%;

min-height:600px;

object-fit:cover;
}

.modal-room-content{

padding:35px;
}

.modal-room-price{

font-family:
'Playfair Display',
serif;

font-size:42px;

font-weight:800;

color:#c89b3c;

margin:15px 0;
}

.room-availability{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#e8f8ee;

color:#198754;

font-weight:600;

margin-bottom:15px;
}

.modal-features{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:15px;

margin:20px 0;
}

.modal-features i{

color:#c89b3c;

margin-right:8px;
}

.modal-book-btn{

display:inline-block;

padding:14px 28px;

background:#c89b3c;

color:#fff;

text-decoration:none;

border-radius:12px;

font-weight:700;
}

.modal-book-btn:hover{

color:#fff;
}

@media(max-width:768px){

.modal-room-image{

min-height:260px;
}

.modal-features{

grid-template-columns:1fr;
}

}

</style>

<script>

document.addEventListener(
'DOMContentLoaded',
function(){

document
.querySelectorAll('.btn-view')
.forEach(function(btn){

btn.addEventListener(
'click',
function(){

const roomId =
this.dataset.id;

const roomName =
this.dataset.name;

const roomImage =
this.dataset.image;

const roomPrice =
this.dataset.price;

const roomDesc =
this.dataset.desc;

document
.getElementById('modalRoomName')
.innerText = roomName;

document
.getElementById('modalRoomImage')
.src = roomImage;

document
.getElementById('modalRoomDesc')
.innerText = roomDesc;

document
.getElementById('modalRoomPrice')
.innerHTML =
'₹'+roomPrice;

document
.getElementById('modalBookBtn')
.href =
'booking.php?room_id='+
roomId;

const modal =
new bootstrap.Modal(
document.getElementById(
'roomModal'
)
);

modal.show();

});
});

});

</script>
<!-- ================= EVENTS ================= -->

<section id="events" class="py-5 bg-light">

<div class="container">

<div class="text-center mb-5">

<div class="hero-badge">

Special Celebrations

</div>

<h2 class="section-title">

Events &
<span>Celebrations</span>

</h2>

<p class="section-sub">

Create unforgettable memories at
Lalu Hotel with premium event facilities.

</p>

</div>

<div class="row g-4">

<!-- WEDDING -->

<div class="col-lg-3 col-md-6">

<div class="event-card">

<div class="event-icon">

💍

</div>

<h4>Wedding</h4>

<p>

Elegant wedding arrangements,
guest stay and catering services.

</p>

</div>

</div>

<!-- BIRTHDAY -->

<div class="col-lg-3 col-md-6">

<div class="event-card">

<div class="event-icon">

🎂

</div>

<h4>Birthday</h4>

<p>

Celebrate your birthday with
friends and family in style.

</p>

</div>

</div>

<!-- RECEPTION -->

<div class="col-lg-3 col-md-6">

<div class="event-card">

<div class="event-icon">

🥂

</div>

<h4>Reception</h4>

<p>

Beautiful reception venue with
comfortable guest arrangements.

</p>

</div>

</div>

<!-- CORPORATE -->

<div class="col-lg-3 col-md-6">

<div class="event-card">

<div class="event-icon">

🏢

</div>

<h4>Corporate</h4>

<p>

Meetings, conferences and
professional gatherings.

</p>

</div>

</div>

</div>

</div>

</section>

<!-- ================= EVENT ENQUIRY ================= -->

<section class="py-5">

<div class="container">

<div class="row justify-content-center">

<div class="col-lg-9">

<div class="event-form-box">

<div class="text-center mb-4">

<h2 class="section-title">

Plan Your
<span>Event</span>

</h2>

<p class="section-sub">

Fill out the form and our team
will contact you shortly.

</p>

</div>

<form id="eventForm">


<div class="row g-3">

<div class="col-md-6">

<label>

Full Name *

</label>

<input
type="text"
name="name"
class="form-control"
required>

</div>

<div class="col-md-6">

<label>

Phone Number *

</label>

<input
type="tel"
name="phone"
class="form-control"
required>

</div>

<div class="col-md-6">

<label>

Email Address

</label>

<input
type="email"
name="email"
class="form-control">

</div>

<div class="col-md-6">

<label>

Event Type *

</label>

<select
name="event_type"
id="eventType"
class="form-control"
required>

<option value="">
Select Event
</option>

<option value="Wedding">
Wedding
</option>

<option value="Birthday">
Birthday
</option>

<option value="Reception">
Reception
</option>

<option value="Corporate">
Corporate
</option>

<option value="Anniversary">
Anniversary
</option>

<option value="Other">
Other
</option>

</select>
<div
class="mt-3"
id="otherEventBox"
style="display:none;">

<label>

Please Specify Event *

</label>

<input
type="text"
name="other_event"
id="otherEvent"
class="form-control">

</div>
</div>

<div class="col-md-6">

<label>

Expected Guests *

</label>

<input
type="number"
name="guests"
class="form-control"
required>

</div>

<div class="col-md-6">

<label>

Event Date *

</label>

<input
type="date"
name="event_date"
class="form-control"
required>

</div>

<div class="col-12">

<label>

Special Requirements

</label>

<textarea
name="message"
rows="5"
class="form-control"></textarea>

</div>

<div class="col-12 text-center">

<button
type="submit"
class="event-submit-btn">

Submit Enquiry

</button>

</div>

</div>

</form>

<div id="eventMsg"></div>

</div>

</div>

</div>

</div>

</section>

<style>

/* EVENTS */

.event-card{

background:#fff;

padding:35px 25px;

border-radius:25px;

text-align:center;

height:100%;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

transition:.3s;
}

.event-card:hover{

transform:translateY(-8px);
}

.event-icon{

font-size:52px;

margin-bottom:18px;
}

.event-card h4{

font-weight:700;

margin-bottom:12px;
}

.event-card p{

color:#666;
}

/* EVENT FORM */

.event-form-box{

background:#fff;

padding:40px;

border-radius:30px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.event-form-box label{

font-weight:600;

margin-bottom:8px;
}

.event-form-box .form-control{

height:54px;

border-radius:12px;
}

.event-form-box textarea{

height:auto !important;
}

.event-submit-btn{

border:none;

background:#c89b3c;

color:#fff;

padding:15px 35px;

border-radius:12px;

font-weight:700;
}

.event-submit-btn:hover{

background:#b8872f;
}

</style>
<!-- ================= TRACK BOOKING ================= -->

<section id="trackBooking" class="py-5">

<div class="container">

<div class="row justify-content-center">

<div class="col-lg-8">

<div class="track-box">

<div class="text-center mb-4">

<div class="hero-badge">

Booking Services

</div>

<h2 class="section-title">

Track Your
<span>Booking</span>

</h2>

<p class="section-sub">

Enter your booking code to check
booking status.

</p>

</div>

<form action="track-booking.php" method="get">

<div class="row g-3">

<div class="col-md-8">

<input
type="text"
name="booking_code"
class="form-control track-input"
placeholder="Enter Booking Code"
required>

</div>

<div class="col-md-4">

<button
type="submit"
class="track-btn">

Track Booking

</button>

</div>

</div>

</form>

<div class="text-center mt-3">

<a
href="#"
id="forgotBookingBtn"
class="forgot-link">

Forgot Booking Code?

</a>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- ================= FORGOT BOOKING POPUP ================= -->

<div
class="modal fade"
id="forgotBookingModal"
tabindex="-1">

<div class="modal-dialog modal-dialog-centered">

<div class="modal-content">

<div class="modal-body p-4">

<div class="d-flex justify-content-between align-items-center mb-3">

<h4>

Recover Booking

</h4>

<button
type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>

</div>

<form action="recover-booking.php" method="post">

<div class="mb-3">

<label>

Phone Number *

</label>

<input
type="tel"
name="phone"
class="form-control"
placeholder="+91 "
pattern="[0-9]{10}"
maxlength="10"
required>

<small class="text-muted">
Enter the same phone number used during booking.
</small>

</div>

<button
type="submit"
class="track-btn w-100">

Find Booking

</button>

</form>

</div>

</div>

</div>

</div>

<style>

.track-box{

background:#fff;

padding:45px;

border-radius:30px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.track-input{

height:60px;

border-radius:14px;
}

.track-btn{

width:100%;

height:60px;

border:none;

background:#c89b3c;

color:#fff;

font-weight:700;

border-radius:14px;
}

.track-btn:hover{

background:#b8872f;
}

.forgot-link{

font-size:14px;

text-decoration:none;

color:#666;
}

.forgot-link:hover{

color:#c89b3c;
}

</style>

<!-- ================= FOOTER ================= -->

<footer>
   <div class="container">

      <div class="row g-5">

         <div class="col-lg-4">

            <div class="fnm">
               Lalu<span>Hotel</span>
            </div>

            <p class="fdesc">
               For over 30 years, Lalu Hotel has been serving guests with delicious pure vegetarian food, comfortable stays, banquet facilities and warm hospitality.
            </p>

         </div>

         <div class="col-lg-4">

            <div class="ftit">
               Contact
            </div>

            <p>
               Birpur, Bihar
            </p>

            <p>
               +91 7779876705
            </p>

            <p>
               laluhotel01@gmail.com
            </p>

         </div>

         <div class="col-lg-4">

            <div class="ftit">
               Services
            </div>

            <p>AC Rooms</p>
            <p>Non AC Rooms</p>
            <p>Dormitory</p>
            <p>Wedding Hall</p>

         </div>

      </div>

   </div>

   <div class="fbot">

      <div class="container">

         <p class="text-center m-0">

            © 2026 Lalu Hotel. All Rights Reserved.

         </p>

      </div>

   </div>

</footer>

<!-- JS -->

<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/aos.js"></script>

<script>

AOS.init();

const forgotBtn =
document.getElementById(
'forgotBookingBtn'
);

if(forgotBtn){

forgotBtn.addEventListener(
'click',
function(e){

e.preventDefault();

new bootstrap.Modal(
document.getElementById(
'forgotBookingModal'
)
).show();

});

}

</script>
<script>

$("#eventForm").submit(function(e){

e.preventDefault();

$.ajax({

url:"ajax/event-enquiry.php",

type:"POST",

data:$(this).serialize(),

success:function(response){

if(response=="success")
{

$("#eventMsg").html(

'<div class="alert alert-success mt-3">' +
'<h5 class="mb-2">🎉 Thank You!</h5>' +
'Your event enquiry has been submitted successfully.<br>' +
'Our team will contact you soon to assist with your event planning and provide the best possible arrangements.' +
'</div>'

);

$("#eventForm")[0].reset();

}
else
{

$("#eventMsg").html(

'<div class="alert alert-danger mt-3">Something Went Wrong</div>'

);

}

}

});

});

</script>
<script>

$("#eventType").change(function(){

if($(this).val()=="Other")
{
$("#otherEventBox").show();

$("#otherEvent").prop(
"required",
true
);
}
else
{
$("#otherEventBox").hide();

$("#otherEvent").prop(
"required",
false
);
}

});

</script>
<script>

$("#availabilityForm").submit(function(e){

e.preventDefault();

$("#availabilityResult").html(
'<div class="text-center p-4">Checking Availability...</div>'
);

$.ajax({

url:"ajax/check-availability.php",

type:"POST",

data:$(this).serialize(),

success:function(response){

$("#availabilityResult").html(response);

}

});

});

</script>
</body>
</html>