218 lines
No EOL
9.3 KiB
PHP
218 lines
No EOL
9.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Booking | Midtown Hotel</title>
|
|
<?php require('./components/link.php') ?>
|
|
<style>
|
|
.booking-hero{
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: #194141;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0px 3px 3px #BFCBCB;
|
|
}
|
|
.booking-title{
|
|
margin: 50px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-size: 22px;
|
|
color: #B0A695;
|
|
text-shadow: 1px 1px 2px #EAD8C0;
|
|
}
|
|
.custom-alert-t{
|
|
position:fixed;
|
|
top: 100px;
|
|
right: 25px;
|
|
z-index: 10000;
|
|
}
|
|
.btn-set{
|
|
background-color: #3C3633;
|
|
border: none;
|
|
color: white;
|
|
padding: 2px 4px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
}
|
|
.btn-set:hover{
|
|
background-color: #625e5b;
|
|
color: white;
|
|
transition: all 0.5s ease;
|
|
}
|
|
@media (max-width:765px){
|
|
.booking-hero{
|
|
height: 100px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="booking-hero">
|
|
<?php
|
|
require('./components/header.php');
|
|
|
|
$checkin_default = '';
|
|
$checkout_default = '';
|
|
$adult_default = '';
|
|
$children_default = '';
|
|
|
|
if(isset($_GET['check_availability'])){
|
|
$frm_data = filteration($_GET);
|
|
$checkin_default = $frm_data['checkin'];
|
|
$checkout_default = $frm_data['checkout'];
|
|
$adult_default = $frm_data['adult'];
|
|
$children_default = $frm_data['children'];
|
|
}
|
|
?>
|
|
</div>
|
|
<p class="booking-title">Rooms available</p>
|
|
<div class="container-xxl">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-12 mb-2">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow rounded">
|
|
<div class="container-fluid flex-lg-column align-items-stretch">
|
|
<p class="mt-2" style="font-weight: 600; font-size: 18px;">Filter By:</p>
|
|
<button class="navbar-toggler shadow-none border-none mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<i class="bi bi-sort-down"></i>
|
|
</button>
|
|
<div class="collapse navbar-collapse flex-column align-items-stretch" id="filterDropdown">
|
|
<!--room availability-->
|
|
<div class="border bg-white p-3 rounded mb-2">
|
|
<p class="mb-2 d-flex justify-content-between" style="font-weight: 600;">
|
|
<span>Availability</span>
|
|
<button class="btn-set d-none" id='check-filter-btn' onclick='check_filter_clear()'><i class='bx bx-reset'></i></button>
|
|
</p>
|
|
<label class="form-label" style="font-size: 14px;">Check-in</label>
|
|
<input type="date" onchange="check_filter()" class="form-control shadow-none mb-4" value="<?php echo $checkin_default ?>" id="checkin" style="font-size: 14px;"/>
|
|
<label class="form-label" style="font-size: 14px;">Check-out</label>
|
|
<input type="date" onchange="check_filter()" class="form-control shadow-none" value="<?php echo $checkout_default ?>" id="checkout" style="font-size: 14px;"/>
|
|
</div>
|
|
<!--guest-->
|
|
<div class="border bg-white p-3 rounded mb-2">
|
|
<p class="mb-2 d-flex justify-content-between" style="font-weight: 600;">
|
|
<span>Guest</span>
|
|
<button class="btn-set d-none" id='guest-filter-btn' onclick='guest_filter_clear()'><i class='bx bx-reset'></i></button>
|
|
</p>
|
|
<div class="d-flex gap-2">
|
|
<div class="mb-2" style="font-size: 14px;">
|
|
<label class="form-label">Adults</label>
|
|
<input type="number" value="<?php echo $adult_default ?>" id="adult" oninput="guest_filter()" class="form-control shadow-none" min="1"/>
|
|
</div>
|
|
<div class="mb-2" style="font-size: 14px;">
|
|
<label class="form-label">Children</label>
|
|
<input type="number" value="<?php echo $children_default ?>" id="children" oninput="guest_filter()" class="form-control shadow-none" min="1"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border bg-white p-3 rounded mb-2">
|
|
<p class="mb-2" style="font-weight: 600;">Useful Infomation</p>
|
|
<div class="mb-2">
|
|
<p style="font-size: 12px; line-height: 10px;">• Unlimited access to the pools.</p>
|
|
<p style="font-size: 12px; margin-top: -5px;">• Sauna service (include with room types or for a fee).</p>
|
|
<p style="font-size: 12px; margin-top: -10px;">• Massage service (include with room types or for a fee).</p>
|
|
</div>
|
|
<p class="mb-2" style="font-weight: 600;">Check-in/Check-out</p>
|
|
<div class="mb-2">
|
|
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-in:</span> 3:00 pm or anytime afterwards.</p>
|
|
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-out:</span> until 11:00 am.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="col-lg-9 col-md-12" id="room-data"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--footer-->
|
|
<?php require('./components/footer.php'); ?>
|
|
<?php require('./components/script.php') ?>
|
|
|
|
<script>
|
|
//fetch room
|
|
let room_data = document.getElementById('room-data');
|
|
//check-in & check-out filter
|
|
let checkin = document.getElementById('checkin');
|
|
let checkout = document.getElementById('checkout');
|
|
let check_filter_btn = document.getElementById('check-filter-btn');
|
|
//guest filter
|
|
let adult = document.getElementById('adult');
|
|
let children = document.getElementById('children');
|
|
let guest_filter_btn = document.getElementById('guest-filter-btn');
|
|
|
|
function loginToBook(status, room_id){
|
|
if(status){
|
|
window.location.href='confirm_booking.php?id='+room_id;
|
|
} else{
|
|
alert('error', 'Please login to reserve a room');
|
|
}
|
|
}
|
|
|
|
//fetch room
|
|
function fetch_room(){
|
|
let check_filter = JSON.stringify({
|
|
checkin: checkin.value,
|
|
checkout: checkout.value
|
|
});
|
|
|
|
let guest_filter = JSON.stringify({
|
|
adult: adult.value,
|
|
children: children.value
|
|
});
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "ajax/room.php?fetch_room&check_filter="+check_filter+"&guest_filter="+guest_filter, true);
|
|
|
|
xhr.onprogress = function(){
|
|
room_data.innerHTML = `
|
|
<div class="m-3">
|
|
<span class="spinner-border spinner-border-sm mx-2" role="status" aria-hidden="true" id="room_loading"></span>Loading...
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
xhr.onload = function(){
|
|
room_data.innerHTML = this.responseText;
|
|
}
|
|
xhr.send();
|
|
}
|
|
|
|
//check-in & check-out filter
|
|
function check_filter(){
|
|
if(checkin.value != '' && checkout.value != ''){
|
|
fetch_room()
|
|
check_filter_btn.classList.remove('d-none');
|
|
}
|
|
}
|
|
function check_filter_clear(){
|
|
checkin.value = '';
|
|
checkout.value ='';
|
|
check_filter_btn.classList.add('d-none');
|
|
fetch_room();
|
|
}
|
|
|
|
//guest filter
|
|
function guest_filter(){
|
|
if(adult.value > 0 || children.value > 0){
|
|
fetch_room();
|
|
guest_filter_btn.classList.remove('d-none');
|
|
}
|
|
}
|
|
function guest_filter_clear(){
|
|
adult.value = '';
|
|
children.value = '';
|
|
fetch_room();
|
|
guest_filter_btn.classList.add('d-none');
|
|
|
|
}
|
|
|
|
fetch_room();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|