295 lines
No EOL
13 KiB
PHP
295 lines
No EOL
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Booking | 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;
|
|
}
|
|
.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;
|
|
border-radius: 3px;
|
|
}
|
|
.booking-order{
|
|
font-size: 14px;
|
|
}
|
|
.custom-alert{
|
|
position:fixed;
|
|
top: 100px;
|
|
right: 25px;
|
|
z-index: 10000;
|
|
}
|
|
@media (max-width:765px){
|
|
.booking-hero{
|
|
height: 100px;
|
|
}
|
|
.booking-body, .booking-head{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@media (max-width:580px){
|
|
.room-book-img{
|
|
height: 350px;
|
|
}
|
|
}
|
|
@media (max-width:450px){
|
|
.room-title{
|
|
font-size: 16px;
|
|
}
|
|
.booking-body{
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="booking-hero">
|
|
<?php
|
|
require('./components/header.php') ;
|
|
if(!(isset($_SESSION['login']) && $_SESSION['login'] == true)){
|
|
redirect('index.php');
|
|
}
|
|
?>
|
|
</div>
|
|
<?php
|
|
if(isset($_GET['cancel_status'])){
|
|
alert('success', 'Booking cancelled');
|
|
} else if(isset($_GET['review_status'])){
|
|
alert('success', 'Thank you for your review!');
|
|
}
|
|
?>
|
|
<div class="container mb-5">
|
|
<div class="row">
|
|
<div class="col-12 mt-5 mb-4">
|
|
<h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;">Booking<h4>
|
|
</div>
|
|
<?php
|
|
$query = "SELECT bo.*, bd.* FROM `booking_order` bo INNER JOIN `booking_detail` bd ON bo.booking_id = bd.booking_id
|
|
WHERE ((bo.booking_status ='pending') OR (bo.booking_status ='cancel')) AND (bo.user_id=?) ORDER BY bo.booking_id DESC";
|
|
|
|
$result = select($query, [$_SESSION['uerID']], 'i');
|
|
|
|
echo <<< data
|
|
<div class='table-responsive col-12'>
|
|
<table class="table">
|
|
<thead>
|
|
<tr class='bg-light booking-head'>
|
|
<th scope="col" style='width: 20%;'>Date</th>
|
|
<th scope="col" style='width: 30%;'>Order ID</th>
|
|
<th scope="col" style='width: 10%;'>Status</th>
|
|
<th scope="col" style='width: 40%;'>Action</th>
|
|
</tr>
|
|
</thead>
|
|
</table></div>
|
|
data;
|
|
|
|
while($data = mysqli_fetch_assoc($result)){
|
|
$date = date("F j, Y", strtotime($data['datentime']));
|
|
$checkin = date("M-d-Y", strtotime($data['check_in']));
|
|
$checkout = date("M-d-Y", strtotime($data['check_out']));
|
|
$status_bg = "";
|
|
$btn = "";
|
|
|
|
if($data['booking_status'] == 'pending' && $data['arrival'] == 0){
|
|
$status_bg = "bg-warning";
|
|
$status = 'Pending';
|
|
$btn = "
|
|
<button onclick='cancel_booking($data[booking_id])' type='button' class='badge btn-minor' style='font-weight: 600;'>Cancel</button>
|
|
";
|
|
} else if($data['booking_status'] == 'cancel' && $data['arrival'] == 0){
|
|
$status_bg = "bg-danger";
|
|
$status = 'Cancelled';
|
|
} else if($data['booking_status'] == 'pending' && $data['arrival'] ==1){
|
|
$status_bg = "bg-success";
|
|
$status = 'Booked';
|
|
$btn = "
|
|
<a href='generate_invoice.php?gen_pdf&id=$data[booking_id]' class='badge btn-minor' ><i class='bx bx-download'></i></a>
|
|
";
|
|
if($data['review'] == 0){
|
|
$btn .= "<button type='button' onclick='review_room($data[booking_id], $data[room_id])' class='badge btn-main' style='font-weight: 600;' data-bs-toggle='modal' data-bs-target='#reviewBackdrop'>Review</button>";
|
|
}
|
|
}
|
|
echo <<< data
|
|
<div class='table-responsive col-12'>
|
|
<table class="table">
|
|
<tbody'>
|
|
<tr class='booking-body'>
|
|
<td style='width: 20%;'>$date</td>
|
|
<td style='width: 30%;'>$data[order_id]</td>
|
|
<td style='width: 10%;'><span class='badge $status_bg'>$status</span></td>
|
|
<td style='width: 40%;'>$btn</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
data;
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="reviewBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="review-form">
|
|
<div class="modal-header" style="border: none;">
|
|
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h5 class="text-center" style="font-size: 22px;">Review</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label" style='font-weight: 600;'>Room</label>
|
|
<select class="form-select shadow-none" style='font-size: 14px;' name='room_review' required>
|
|
<option value="5">Excellent</option>
|
|
<option value="4">Very Good</option>
|
|
<option value="3">Good</option>
|
|
<option value="5">Fair</option>
|
|
<option value="1">Poor</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" style='font-weight: 600;'>Cleanliness</label>
|
|
<select class="form-select shadow-none" style='font-size: 14px;' name='clean_review' required>
|
|
<option value="5">Excellent</option>
|
|
<option value="4">Very Good</option>
|
|
<option value="3">Good</option>
|
|
<option value="5">Fair</option>
|
|
<option value="1">Poor</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" style='font-weight: 600;'>Staff Friendliness</label>
|
|
<select class="form-select shadow-none" style='font-size: 14px;' name='staff_review' required>
|
|
<option value="5">Excellent</option>
|
|
<option value="4">Very Good</option>
|
|
<option value="3">Good</option>
|
|
<option value="5">Fair</option>
|
|
<option value="1">Poor</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" style='font-weight: 600;'>Service</label>
|
|
<select class="form-select shadow-none" style='font-size: 14px;' name='service_review' required>
|
|
<option value="5">Excellent</option>
|
|
<option value="4">Very Good</option>
|
|
<option value="3">Good</option>
|
|
<option value="5">Fair</option>
|
|
<option value="1">Poor</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" style='font-weight: 600;'>Comment</label>
|
|
<textarea type="text" name="review" rows="3" class="form-control shadow-none" style="resize: none;" required></textarea>
|
|
</div>
|
|
|
|
<input type="hidden" name="booking_id">
|
|
<input type="hidden" name="room_id">
|
|
|
|
<div class="mb-3 d-grid">
|
|
<button type="submit" class="btn btn-dark shadow-none d-block ">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--footer-->
|
|
<?php require('./components/footer.php'); ?>
|
|
<?php require('./components/script.php') ?>
|
|
<script>
|
|
function cancel_booking(id){
|
|
if(confirm('Are you sure you want to cancel this booking?')){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/cancel_booking.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
window.location.href="user_booking.php?cancel_status=true"
|
|
} else{
|
|
alert('error', 'Fail to cancel this booking, please try again later!')
|
|
}
|
|
}
|
|
xhr.send('cancel_booking&id='+id);
|
|
}
|
|
}
|
|
|
|
let review_form = document.getElementById('review-form');
|
|
|
|
function review_room(bookingID, roomID){
|
|
review_form.elements['booking_id'].value = bookingID;
|
|
review_form.elements['room_id'].value = roomID;
|
|
}
|
|
|
|
review_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
let data = new FormData();
|
|
data.append('review_form', '');
|
|
data.append('room_review', review_form.elements['room_review'].value);
|
|
data.append('clean_review', review_form.elements['clean_review'].value);
|
|
data.append('staff_review', review_form.elements['staff_review'].value);
|
|
data.append('service_review', review_form.elements['service_review'].value);
|
|
data.append('review', review_form.elements['review'].value);
|
|
data.append('booking_id', review_form.elements['booking_id'].value);
|
|
data.append('room_id', review_form.elements['room_id'].value);
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/review_room.php", true);
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
window.location.href = 'user_booking.php?review_status=true';
|
|
} else{
|
|
var myModal = document.getElementById('reviewBackdrop');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide();
|
|
|
|
alert('error', 'Something went wrong, please try again later');
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|