297 lines
No EOL
14 KiB
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;'>▪ $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;'>▪ $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>
|