web_php/hotel_booking/confirm_booking.php

297 lines
No EOL
14 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 confirmation | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
input[type=number]{
-moz-appearance: textfield;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
.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;
}
.room-book-img{
width: 100%;
height: 550px;
object-fit: cover;
}
.room-title{
font-size: 20px;
text-transform: uppercase;
}
.btn-third{
background-color: #194141;
border: none;
color: white;
padding: 6px 12px;
text-align: center;
font-size: 14px;
border-radius: 3px;
}
@media (max-width:765px){
.booking-hero{
height: 100px;
}
}
@media (max-width:580px){
.room-book-img{
height: 350px;
}
}
@media (max-width:450px){
.room-title{
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="booking-hero">
<?php require('./components/header.php') ?>
</div>
<?php
if(!isset($_GET['id']) || $settings_r['shutdown'] == true){
redirect('booking.php');
} else if(!(isset($_SESSION['login']) && $_SESSION['login'] == true)){
redirect('booking.php');
}
$data = filteration($_GET);
$room_res = select("SELECT * FROM `rooms` WHERE `id`=? AND `status`=? AND `removed`=?", [$data['id'], 1, 0], 'iii');
if(mysqli_num_rows($room_res) == 0){
redirect('booking.php');
}
$room_data = mysqli_fetch_assoc($room_res);
$_SESSION['room'] = [
"id" => $room_data['id'],
"name" => $room_data['name'],
"price" => $room_data['price'],
"payment" => null,
"available" => false,
];
$user_res = select("SELECT * FROM `user_creds` WHERE `id`=? LIMIT 1", [$_SESSION['uerID']], "i");
$user_data = mysqli_fetch_assoc($user_res);
//get accommodation & additional accommodation
$accom_q = mysqli_query($con, "SELECT a.name FROM `accommodation` a INNER JOIN `room_accommodation` raccom ON a.id = raccom.accommodation_id WHERE raccom.room_id = '$room_data[id]'");
$accommodation_data = "";
while($accom_row = mysqli_fetch_assoc($accom_q)){
$accommodation_data .="<p style='font-size: 14px;'>&#9642; $accom_row[name]</p>";
}
//get additional accommodation data from database
$addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
$additionalAccom_data = "";
while($addi_row = mysqli_fetch_assoc($addi_q)){
$additionalAccom_data .="<p style='font-size: 14px;'>&#9642; $addi_row[name]</p>";
}
?>
<div class="container">
<div class="row">
<div class="col-12 mt-5 mb-4">
<h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;">Booking confirmation<h4>
</div>
<div class="col-lg-7 col-md-12">
<div class="card mb-4 border-0 shadow-sm">
<div class="card-body">
<form action="reserved.php" method="post" id="booking_form">
<h5>Booking Detail</h5>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Name</label>
<input name="firstname" type="text" value="<?php echo $user_data['firstname']?>" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Name</label>
<input name="lastname" type="text" value="<?php echo $user_data['lastname']?>" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Phone Number</label>
<input name="phone" type="number" value="<?php echo $user_data['phone']?>" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Email</label>
<input name="email" type="email" value="<?php echo $user_data['email']?>" class="form-control shadow-none" required>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Address</label>
<textarea name="address" type="text" rows="2" class="form-control shadow-none" style="resize: none;" required><?php echo $user_data['address']?></textarea>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Check-in</label>
<input name="checkin" onchange="check_availability()" type="date" class="form-control shadow-none" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Check-out</label>
<input name="checkout" onchange="check_availability()" type="date" class="form-control shadow-none" required>
</div>
<div class="col-md-12 mt-4 mb-3" >
<div id="info_loader" class="spinner-border text-secondary mb-3 d-none" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mb-3 text-danger" id="reserve_info">Please provide check-in and check-out date</p>
<button name="reserve_now" class="btn-third" style="width: 100%; text-transform: uppercase;" disabled>Reserve now</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-5 col-md-12">
<div id="roomCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<?php
//get cover image
$room_cover = ROOM_IMG_PATH."logo.png";
$cover_q = mysqli_query($con, "SELECT * FROM `room_images` WHERE `room_id`='$room_data[id]'");
if(mysqli_num_rows($cover_q) > 0){
$active_class = 'active';
while($cover_res = mysqli_fetch_assoc($cover_q)){
echo "
<div class='carousel-item $active_class'>
<img src='".ROOM_IMG_PATH.$cover_res['image']."' class='d-block w-100 room-book-img' alt='room'>
</div>
";
$active_class = '';
}
} else{
echo "
<div class='carousel-item active'>
<img src='$room_cover' class='d-block w-100' alt='room'>
</div>
";
}
?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#roomCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#roomCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-lg-7 col-md-12"></div>
<div class="col-lg-5 col-md-12">
<div class="card mb-4 border">
<div class="card-body">
<?php
echo <<< data
<div style="display: flex; justify-content: space-between; align-items: center; font-weight: 600;">
<p class="room-title">$room_data[name] <span style="font-size: 16px; text-transform: none;" >($room_data[area] sq.ft.)</span></p>
<p style="font-size: 16px;">$$room_data[price]/night</p>
</div>
<div class="my-4 mx-2">
<p style="font-weight: 600;">Room Detail</p>
<div style="font-size: 14px;">$room_data[detail]</div>
</div>
<div class="my-4 mx-2">
<p style="font-weight: 600;">Accommodation</p>
<div>$accommodation_data</div>
</div>
<div class="my-4 mx-2">
<p style="font-weight: 600;">Additional Accommodation</p>
<div>$additionalAccom_data</div>
</div>
data;
?>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
<script>
let booking_form = document.getElementById('booking_form');
let info_loader = document.getElementById('info_loader');
let reserve_info = document.getElementById('reserve_info');
function check_availability(){
let checkin_val = booking_form.elements['checkin'].value;
let checkout_val = booking_form.elements['checkout'].value;
booking_form.elements['reserve_now'].setAttribute('disabled', true);
if(checkin_val !='' && checkout_val !=''){
reserve_info.classList.add('d-none');
reserve_info.classList.replace('text-dark', 'text-danger');
info_loader.classList.remove('d-none');
let data = new FormData();
data.append('check_availability', '');
data.append('check_in', checkin_val);
data.append('check_out', checkout_val);
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/confirmBooking.php", true);
xhr.onload = function(){
let data = JSON.parse(this.responseText);
if(data.status == 'check_in_out_equal'){
reserve_info.innerText = "No options matching your search, please make sure your check-in and check-out date is not the same!";
} else if(data.status == 'check_out_earlier'){
reserve_info.innerText = "No options matching your search, please check your check-out date";
} else if(data.status == 'check_in_earlier'){
reserve_info.innerText = "No options matching your search, please check your check-in date";
} else if(data.status == 'unavailable'){
reserve_info.innerText = "We are sorry, this room is not available at this time.";
} else{
reserve_info.innerHTML = `
<div style='width: 200px; display: flex; flex-direction: row; justify-content: space-between; font-size: 14px;'><p style="font-weight: 600;">Number of days</p> <p> ${+data.days}</p></div>
<div style='width: 200px; display: flex; flex-direction: row; justify-content: space-between; font-size: 14px;'><p style="font-weight: 600;">Total amount</p> <p>$${+data.payment}</p></div>
`;
reserve_info.classList.replace('text-danger', 'text-dark');
booking_form.elements['reserve_now'].removeAttribute('disabled');
}
reserve_info.classList.remove('d-none');
info_loader.classList.add('d-none');
}
xhr.send(data);
}
}
</script>
</body>
</html>