web_php/hotel_booking/booking.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;">&bull; Unlimited access to the pools.</p>
<p style="font-size: 12px; margin-top: -5px;">&bull; Sauna service (include with room types or for a fee).</p>
<p style="font-size: 12px; margin-top: -10px;">&bull; 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>