web_php/hotel_booking/admin/new_booking.php

156 lines
No EOL
6 KiB
PHP

<?php
require('components/utils.php');
require('components/db_config.php');
adminLogin();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard-new booking | Midtown Hotel</title>
<?php require('components/link.php') ?>
<style>
.custom-alert-t{
position:fixed;
top: 100px;
right: 25px;
z-index: 10000;
}
</style>
</head>
<body>
<?php require('components/sidebar.php')?>
<div class="container-fluid" id="dashboard-body">
<div class="row">
<div class="col-lg-10 ms-auto p-4 overflow-hidden">
<h4 class="mb-4">New Bookings</h4>
<div class="card mb-4">
<div class="card-body">
<div class="mb-4 text-end">
<input type="text" oninput="get_booking(this.value)" class="form-control w-25 ms-auto shadow-none" placeholder="Search">
</div>
<div class="table-responsive">
<table class="table table-hover border">
<thead>
<tr style="background-color: #D3D3D3;">
<th scope="col">#</th>
<th scope="col">User Detail</th>
<th scope="col">Order Number</th>
<th scope="col">Room Detail</th>
<th scope="col">Booking Detail</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="table_data">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Room Number-->
<div class="modal fade" id="room-number" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="room_number_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Room Number</h5>
</div>
<div class="modal-body">
<div class="mb-2">
<label class="form-label" style="font-weight: 600;">Room Number</label>
<input type="text" name="room_no" class="form-control shadow-none" required/>
</div>
<span style="color: red; font-size: 14px;">Room number will be assigned only when a customer make a payment at the hotel reception desk.</span>
<input type="hidden" name="booking_id">
</div>
<div class="modal-footer">
<button type="reset" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn-third">Submit</button>
</div>
</div>
</form>
</div>
</div>
<?php require('components/script.php') ?>
<script>
let room_number_form = document.getElementById('room_number_form');
function get_booking(search=''){
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/new_booking.php", true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
document.getElementById('table_data').innerHTML = this.responseText;
}
xhr.send('get_booking&search='+search);
}
function room_number(id){
room_number_form.elements['booking_id'].value = id;
}
room_number_form.addEventListener('submit', function(e) {
e. preventDefault();
let data = new FormData();
data.append('room_no', room_number_form.elements['room_no'].value);
data.append('booking_id', room_number_form.elements['booking_id'].value);
data.append('room_number', '');
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/new_booking.php", true);
xhr.onload = function(){
console.log(this.responseText);
var myModal = document.getElementById('room-number');
var modal = bootstrap.Modal.getInstance(myModal);
modal.hide()
if(this.responseText == 1){
alert('success', 'Room number is assigned.');
room_number_form.reset();
get_booking();
} else{
alert('error', 'Fail to assign room number at this time, please try again later!');
}
}
xhr.send(data);
});
function cancel_booking(id){
if(confirm("Are you sure you want to cancel this booking?")){
let data = new FormData();
data.append('booking_id', id);
data.append('cancel_booking', '');
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/new_booking.php", true)
xhr.onload = function(){
if(this.responseText == 1){
alert('success', 'This booking was successfully cancel!');
get_booking();
} else{
alert('error', 'Fail to cancel this booking');
}
}
xhr.send(data);
}
}
window.onload = function(){
get_booking();
}
</script>
</body>
</html>