web_php/hotel_booking/components/header.php

332 lines
No EOL
16 KiB
PHP

<?php
require('admin/components/db_config.php');
require('admin/components/utils.php');
$settings_q = "SELECT * FROM `settings` WHERE `sr_no`=?";
$values = [1];
$settings_r = mysqli_fetch_assoc(select($settings_q, $values, 'i'));
if($settings_r['shutdown']){
echo <<<data
<div class="text-center p-1" style="background-color: red; z-index: 100; color: white; font-weight: 600;">
Bookings are temporarily closed!
</div>
data;
}
?>
<!--Navbar section (bootstrap)-->
<div class="wrap w-100">
<div class="row align-items-center m-0 d-none d-md-flex sticky-top">
<div class="col-5 text-center rounded-pill" >
<ul class="d-flex list-unstyled justify-content-center m-0">
<li class="nav-item">
<a class="nav-link" href="../rooms.php">Rooms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../services.php">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../dining.php">Dining & Bar</a>
</li>
</ul>
</div>
<div class="col-2 bg-transparent px-3">
<a href="index.php" style="text-decoration: none;">
<img src="./images/logo-white.png" class="logo-img"/>
</a>
</div>
<div class="col-5 text-center rounded-pill">
<ul class="d-flex list-unstyled justify-content-center m-0">
<li class="nav-item">
<a class="nav-link" href="../about.php">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact.php">Contact</a>
</li>
<?php
if(isset($_SESSION['login']) && $_SESSION['login'] == true){
echo <<<data
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" style="outline: none; box-shadow: none;">
$_SESSION[userName]
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a href="profile.php" class="dropdown-item">Profile</a></li>
<li><a href="user_booking.php" class="dropdown-item">Booking</a></li>
<li><a href="logout.php" class="dropdown-item">Logout</a></li>
</ul>
</div>
data;
} else{
echo <<<data
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
</ul>
</div>
data;
}
?>
</ul>
</div>
</div>
<!--Navbar responsive (css)-->
<div>
<div class="nav-parent sticky-top">
<div class="nav-wrapper" style="margin-top: -20px;">
<div class="branding">
<img src="./images/logo-white.png" style="width: 120px; margin-left: -40px;"/>
</div>
<a class="burger" onclick="burgerButton()">
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
</div>
<div class="burger-links">
<ul>
<li class="nav-item">
<a href="../index.php" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="../rooms.php" class="nav-link">Rooms</a>
</li>
<li class="nav-item">
<a href="../services.php" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="../dining.php" class="nav-link">Dining & Bar</a>
</li>
<li class="nav-item">
<a href="../about.php" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="../contact.php" class="nav-link">Contact</a>
</li>
<?php
if(isset($_SESSION['login']) && $_SESSION['login'] == true){
echo <<<data
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" style="outline: none; box-shadow: none;">
$_SESSION[userName]
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a href="profile.php" class="dropdown-item" style="color: black;">Profile</a></li>
<li><a href="user_booking.php" class="dropdown-item" style="color: black;">Booking</a></li>
<li><a href="logout.php" class="dropdown-item" style="color: black;">Logout</a></li>
</ul>
</div>
data;
} else{
echo <<<data
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
</ul>
</div>
data;
}
?>
</ul>
</div>
</div>
</div>
<!--backdrop login-->
<div class="modal fade" id="loginBackdrop" 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="login-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;">Login</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Email</label>
<input type="text" name="email" required class="form-control shadow-none">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" name="password" required class="form-control shadow-none">
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-dark shadow-none d-block ">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!--backdrop register-->
<div class="modal fade" id="registerBackdrop" 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 = "register-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;">Register</h5>
</div>
<div class="container-fluid">
<div class="row">
<div class="mb-3 col-md-6">
<label>First Name</label>
<input type="text" name="firstname" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Last Name</label>
<input type="text" name="lastname" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Date of Birth</label>
<input type="date" name="birth" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-12">
<label>Address</label>
<textarea type="text" name="address" rows="3" class="form-control shadow-none" style="resize: none;" required></textarea>
</div>
<div class="mb-3 col-md-12">
<label>Email</label>
<input type="email" name="email" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Password</label>
<input type="password" name="password" class="form-control shadow-none" required/>
</div>
<div class="mb-5 col-md-6">
<label>Confirm Password</label>
<input type="password" name="cpassword" class="form-control shadow-none" required/>
</div>
</div>
</div>
<div class="mb-3 d-grid mx-3">
<button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
</div>
</form>
</div>
</div>
</div>
<script>
function alert(type, msg, position='body'){
let bs_class = (type == 'success') ? 'alert-success' : 'alert-danger';
let element = document.createElement('div');
element.innerHTML =
`<div class="d-flex justify-content-end align-items-start">
<div class="alert ${bs_class} alert-dismissible fade show" role="alert">
<strong class="me-3">${msg}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>`;
if(position == 'body'){
document.body.append(element);
element.classList.add('custom-alert-t');
} else{
document.getElementById(position).appendChild(element);
}
setTimeout(removeAlert, 3000)
}
function removeAlert(){
document.getElementsByClassName('alert')[0].remove();
}
let register_form = document.getElementById('register-form');
let login_form = document.getElementById('login-form');
/*=== register ===*/
register_form.addEventListener('submit', (e) => {
e.preventDefault();
let data = new FormData();
data.append('firstname', register_form.elements['firstname'].value);
data.append('lastname', register_form.elements['lastname'].value);
data.append('phone', register_form.elements['phone'].value);
data.append('birth', register_form.elements['birth'].value);
data.append('address', register_form.elements['address'].value);
data.append('email', register_form.elements['email'].value);
data.append('password', register_form.elements['password'].value);
data.append('cpassword', register_form.elements['cpassword'].value);
data.append('register', '');
var myModal = document.getElementById('registerBackdrop');
var modal = bootstrap.Modal.getInstance(myModal);
modal.hide();
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/login_register.php", true);
xhr.onload = function(){
if(this.responseText == 'pass_mismatch'){
alert('error', 'Wrong password, please try again!');
} else if(this.responseText == 'email_already'){
alert('error', 'This email is alerady registered!');
} else if(this.responseText == 'phone_already'){
alert('error', 'This phone number is alerady registered!');
} else if(this.responseText == 'mail_failed'){
alert('error', 'We cannot sent you an email confirmation');
} else if(this.responseText == 'ins_failed'){
alert('error', 'Registration error');
} else{
alert('success' , 'Registration successful. The confirmation is sent to your email.');
register_form.reset();
}
}
xhr.send(data);
});
/*=== login ===*/
login_form.addEventListener('submit', (e) => {
e.preventDefault();
let data = new FormData();
data.append('email', login_form.elements['email'].value);
data.append('password', login_form.elements['password'].value);
data.append('login', '');
var myModal = document.getElementById('loginBackdrop');
var modal = bootstrap.Modal.getInstance(myModal);
modal.hide();
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/login_register.php", true);
xhr.onload = function(){
if(this.responseText == 'inv_email'){
alert('error', 'Wrong credentials, please try again!');
} else if(this.responseText == 'not_verified'){
alert('error', 'Please verify your email');
} else if(this.responseText == 'inactive'){
alert('error', 'Your account is suspended, please try again later!');
} else if(this.responseText == 'invalid_pass'){
alert('error', 'Wrong credentials, please try again!');
} else{
let fileurl = window.location.href.split('/').pop().split('?').shift();
if(fileurl == 'booking.php'){
window.location = window.location.href;
} else{
window.location = window.location.pathname;
}
}
}
xhr.send(data);
});
</script>