worked for coworkpace project based on build id
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

853 lines
27 KiB

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="~{fragments/user-head :: head}">
<!-- DataTables CSS -->
<link rel="stylesheet"
href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<style>
.otp-input-box {
/*display: flex;
justify-content: space-between;*/
width: 100%;
}
.otp-input {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 16px;
margin-right: 10px;
}
/* Align the DataTables search box to the right */
.dataTables_filter {
text-align: right;
}
/* Ensure the table container has responsive behavior */
.table-container {
width: 100%;
overflow-x: auto;
/* Allows horizontal scroll when needed */
}
/* Ensure the table adjusts with screen size */
.table {
width: 100%;
table-layout: auto;
/* Adjust column width based on content */
}
/* Make the table scrollable on smaller devices */
@media ( max-width : 768px) {
.table {
font-size: 12px;
/* Reduce font size for smaller devices */
}
.btn-sm {
font-size: 10px;
/* Adjust button size */
}
th, td {
white-space: nowrap;
/* Prevent wrapping of text in cells */
}
}
.input-group-text {
background-color: #ffffff; /* Match input background color */
border: none; /* Remove border from icon area */
border-right: 1px solid #ced4da; /* Add right border to match input */
color: #007bff; /* Icon color */
font-size: 1.5rem; /* Adjust icon size */
padding-left: 10px; /* Adjust padding to position icon */
padding-right: 10px;
}
.modal-xl-custom {
max-width: 95%; /* or any size you prefer */
}
#mobileNo {
border-left: none; /* Remove left border to merge with icon */
font-size: 1rem; /* Adjust font size */
height: 40px; /* Set input height for better alignment */
}
.input-group {
border: 1px solid #ced4da; /* Outer border to unify icon and input */
border-radius: 5px; /* Rounded corners */
overflow: hidden; /* Ensure seamless appearance */
}
</style>
<body>
<!-- Pre-loader start -->
<div th:replace="~{fragments/preloader :: div}"></div>
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<div class="pcoded-container">
<!-- Menu header start -->
<nav th:replace="~{fragments/user-nav :: nav}"></nav>
<!-- Menu header end -->
<div class="pcoded-main-container">
<nav th:replace="~{fragments/user-navmenu :: nav}"></nav>
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<!-- Main-body start -->
<div class="main-body">
<div class="page-wrapper">
<div class="page-body" style="padding-top: 5%;">
<!-- Page-header start -->
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<div class="d-inline">
<h4>My Bookings</h4>
<span>Manage and Track all your bookings.</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="page-header-breadcrumb">
<ul class="breadcrumb-title">
<li class="breadcrumb-item"><a href="home"> <i
class="feather icon-home"></i>
</a></li>
<li class="breadcrumb-item"><a href="#!">Booking
Details</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- otp form -->
<div class="container my-4" id="mobilenumberotp">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 col-sm-12">
<!-- Card Start -->
<div class="card shadow-sm rounded p-4">
<div class="text-center mb-3">
<i class="bi bi-alarm" style="font-size: 2rem;"></i>
<h5 class="mt-2 mb-0">OTP Verification</h5>
</div>
<!-- Mobile Number Input -->
<div class="form-group text-center">
<label for="mobileNo" class="font-weight-bold">Mobile Number</label>
<div class="input-group justify-content-center" style="max-width: 300px; margin: 0 auto;">
<div class="input-group-prepend">
<span class="input-group-text" id="mobile-addon">
<i class="fa fa-mobile-alt"></i>
</span>
</div>
<input type="text" id="mobileNo" name="mobileNo" class="form-control"
placeholder="Enter 10-digit number" maxlength="10" minlength="10"
aria-describedby="mobile-addon">
</div>
</div>
<!-- Send OTP Button -->
<div class="text-center mt-3">
<button class="btn btn-primary" id="sendOtpButton">
<i class="fa fa-mobile-phone"></i> Send OTP
</button>
</div>
<!-- OTP Input -->
<div class="form-group text-center mt-4" id="otpSection" style="display: none;">
<label for="otp" class="font-weight-bold">Enter OTP</label>
<input type="text" id="otp" class="form-control mx-auto text-center" style="max-width: 200px;"
placeholder="Enter OTP" maxlength="6">
<button class="btn btn-success mt-3" id="verifyOtpButton">
<i class="fa fa-check-circle"></i> Verify OTP
</button>
</div>
</div>
<!-- Card End -->
</div>
</div>
</div>
<!-- Page-header end -->
<div class="row" >
<i class="bi bi-alarm" style="font-size: 2rem;"></i>
<div class="col-sm-12 col-lg-12">
<!-- Zero config.table start -->
<div class="card" id="datatablecard" style="display:none;">
<div>
<i class="bi bi-card-list" style="font-size: 2rem;"></i></div>
<div class="card-block" >
<div class="card-table table-container mt-2"
id="nameinclusiontable">
<table id="nameinclusion" class="table table-bordered ">
<thead style="background-color: #195970; color: white;">
<tr role="row">
<th>S.No</th>
<th>Booking ID</th>
<th>Building</th>
<th>Type</th>
<th>Duration</th>
<th>Date</th>
<th>Check In</th>
<th>Check Out</th>
<th>No of Seat</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody id="bookingHistoryBody">
<!-- <tr th:each="list, i : ${bookinghistorylist}">
<td th:text="${i.count}">0</td>
<td th:text="${list.booking_id}"></td>
<td th:text="${list.buildingname}"></td>
<td th:text="${list.type_name}"></td>
<td th:text="${list.duration}"></td>
<td th:text="${list.from_date + ' / ' + list.to_date}"></td>
<td th:text="${list.checkin}"></td>
<td th:text="${list.checkout}"></td>
<td th:text="${list.no_of_person}"></td>
<td th:text="${list.amount}"></td>
<td><span th:text="${list.status}"
th:classappend="${list.status == 'Completed' ? 'badge bg-success' : 'badge bg-warning'}"
th:onclick="'openBookingDetails(' + ${list.booking_id} + ')'"
style="cursor: pointer;"> </span> <span
th:text="view"
th:classappend="${list.status == 'Completed' ? 'badge bg-success' : 'badge bg-warning'}"
th:onclick="'openBookingDetails(' + ${list.booking_id} + ')'"
style="cursor: pointer;">
</span> -->
<!-- <span class="open-booking-modal"
style="font-size: 1.2rem; margin-left: 8px; cursor: pointer;"
th:attr="data-booking-id=${list.booking_id},
data-mobile=${list.mobile},
data-username=${list.user_name}">
📋
</span> -->
<!-- <span style="font-size: 1.2rem; margin-left: 8px; cursor: pointer;"
th:onclick="'showBookingModal(' + ${list.booking_id} + ', \'' + ${list.mobile} + '\', \'' + ${list.user_name} + '\')'">
📋
</span> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Zero config.table end -->
</div>
</div>
</div>
</div>
</div>
<!-- Main-body end -->
</div>
</div>
</div>
<!--<footer th:replace="~{fragments/footer :: footer}"></footer>-->
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div id="myModal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="qrIframe" width="100%" height="400px"></iframe>
</div>
</div>
<div class="modal fade" id="bookingDetailsModal" tabindex="-2"
role="dialog" aria-labelledby="myModalLabel" data-bs-backdrop="static"
aria-hidden="true">
<!-- <div class="modal-dialog modal-lg"
role="document">-->
<div class="modal-dialog modal-xl-custom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5>Booking details</h5>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="close_modal('#bookingDetailsModal')"><span aria-hidden="true">&times;</span> -->
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<iframe id="bookingDetailsIframe" src="" width="100%" height="500px" style="border: none;"></iframe>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn book-now-btn" data-dismiss="modal"
style="margin-right: 10px;"
onclick="close_modal('#bookingDetailsModal')">Close</button>
</div>
</div>
</div>
</div>
<!--OTP 2 start-->
<div class="modal fade" id="otpForm" tabindex="-1" role="dialog"
aria-labelledby="otpFormLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="#" th:action="@{/otpForm}" th:object="${otpForm}"
method="post" onsubmit="return verifyOtp();">
<div class="modal-header">
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP
Login</h6>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"
style="color: black; border: white; background-color: white;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!--end modal-header-->
<div class="modal-body">
<div class="row ">
<div class="mb-3" style="text-align: center;">
<img src="/co-workspaceDocuments/otp.png" width="50%"
alt="Mobileotp">
</div>
</div>
<!--end row-->
<div class="row d-flex justify-content-center align-items-center">
<div class="mb-0">
<h4>OTP Verification</h4>
<p class="text-mute">
Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
</p>
<p class="text-danger" id="otperror"></p>
</div>
</div>
<!--end row-->
<div class="row d-flex justify-content-center align-items-center">
<div class="mb-3 ">
<div class="otp-input-box">
<input type="text" maxlength="1" class="otp-input" id="otp1"
required /> <input type="text" maxlength="1"
class="otp-input" id="otp2" required /> <input type="text"
maxlength="1" class="otp-input" id="otp3" required /> <input
type="text" maxlength="1" class="otp-input" id="otp4" required />
<input type="text" maxlength="1" class="otp-input" id="otp5"
required />
</div>
</div>
</div>
<!--end row-->
<div class="row d-flex justify-content-center align-items-center">
<div class="mb-3">
<div id="resend-containers">
<p class="mb-0">Didn't receive OTP?</p>
<p class="mb-0 text-info" id="resendlink"></p>
</div>
</div>
</div>
<!--end row-->
</div>
<!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-sm" id="but">Verify
OTP</button>
</div>
<!--end modal-footer-->
</form>
</div>
<!--end modal-content-->
</div>
<!--end modal-dialog-->
</div>
<div class="modal fade" id="complaintDetailsModal" tabindex="-1" aria-labelledby="bookingDetailsLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bookingDetailsLabel">Complaint Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<form>
<input id="modalBookingId" class="form-control-plaintext" type="hidden">
<div class="mb-3">
<label for="modalMobile" class="form-label"><strong>Mobile Number:</strong></label>
<input type="text" id="modalMobile" class="form-control" readonly>
</div>
<div class="mb-3">
<label for="modalName" class="form-label"><strong>Enter your name:</strong></label>
<input type="text" id="modalName" class="form-control" readonly>
</div>
<div class="mb-3">
<label for="remarks" class="form-label"><strong>Remarks:</strong></label>
<textarea id="remarks" class="form-control" placeholder="Enter your remarks" rows="3"></textarea>
</div>
<div class="mb-3" id="uploadedImageContainer" style="display: none;">
<label class="form-label"><strong>Uploaded Image:</strong></label><br>
<img id="uploadedImage" src="" alt="Uploaded Image" style="max-width: 100%; height: auto; border: 1px solid #ccc; padding: 5px;">
</div>
<div class="mb-3" id="fileUpload">
<label for="fileUpload" class="form-label"><strong>Upload file:</strong></label>
<input type="file" id="fileUpload" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-sm" id="submitform">Submit</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--OTP 2 End-->
<script th:replace="~{fragments/user-script :: script}"></script>
<!-- DataTables JS -->
<script
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script
src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(
function() {
//$('#nameinclusion').DataTable();
document.getElementById('mobileNo').addEventListener(
'input', function(e) {
// Remove all characters except digits
this.value = this.value.replace(/[^0-9]/g, '');
});
});
function showBookingModal(bookingId, mobile, user_name) {
// Set form values
document.getElementById("modalBookingId").value = bookingId;
document.getElementById("modalMobile").value = mobile;
document.getElementById("modalName").value = user_name;
// Reset form
$('#remarks').val('');
$('#fileUpload').val('');
$('#remarks').prop('readonly', false);
$('#fileUpload').prop('disabled', false);
$('#submitform').show();
$('#uploadedImageContainer').hide(); // hide image container
// Fetch complaint details if already submitted
$.ajax({
url: '/muthalvarpadaippagam/book/api/getComplaint',
type: 'GET',
data: { bookingId: bookingId },
success: function (data) {
if (data && data.remarks) {
$('#remarks').val(data.remarks).prop('readonly', true);
$('#submitform').hide();
$('#fileUpload').hide();
// Show uploaded image
if (data.upload_photo_url) {
const fullUrl = `${window.location.origin}${data.upload_photo_url}`;
$('#uploadedImage').attr('src', fullUrl);
$('#uploadedImageContainer').show();
}
}
},
error: function () {
console.log("No previous complaint found or error occurred.");
}
});
// Show the modal
$('#complaintDetailsModal').modal('show');
}
/* function showBookingModal(bookingId,mobile,user_name) {
// Set the booking ID into the modal content
document.getElementById("modalBookingId").value = bookingId;
document.getElementById("modalMobile").value= mobile;
document.getElementById("modalName").value= user_name;
// You can also dynamically load more booking data via AJAX here
// Clear previous form fields
$('#remarks').val('');
$('#fileUpload').val('');
$('#remarks').prop('readonly', false);
$('#fileUpload').prop('disabled', false);
$('#submitform').show();
// Show the modal
//var myModal = new bootstrap.Modal(document.getElementById('complaintDetailsModal'));
//myModal.show();
//Check if complaint already exists
$.ajax({
url: '/muthalvarpadaippagam/book/api/getComplaint', // your GET API
type: 'GET',
data: { bookingId: bookingId },
success: function (data) {
if (data && data.remarks) {
// Complaint already submitted, populate fields in read-only mode
$('#remarks').val(data.remarks).prop('readonly', true);
$('#submitform').hide(); // hide submit button
$('#fileUpload').prop('disabled', true);
}
},
error: function () {
console.log("No previous complaint found or error occurred.");
}
});
// Show the modal
$('#complaintDetailsModal').modal('show');
} */
document.querySelectorAll('.open-booking-modal').forEach(span => {
span.addEventListener('click', function () {
const bookingId = this.dataset.bookingId;
const mobile = this.dataset.mobile;
const userName = this.dataset.username; // camelCase here
console.log(userName);
console.log(mobile);
showBookingModal(bookingId, mobile, userName);
});
});
$(document)
.ready(
function() {
// Event listener for Send OTP button
$('#sendOtpButton')
.click(
function() {
// Get the entered mobile number
const mobileNumber = $(
'#mobileNo').val();
// Basic check to ensure mobile number is entered
if (mobileNumber.length === 10) {
// Display the mobile number in the OTP modal
$("#mobilenotxt").html(
mobileNumber);
$
.ajax({
type : "GET",
url : '/muthalvarpadaippagam/book/api/sendOTP',
data : {
'mobileNo' : mobileNumber,
'purpose' : 'New User'
}, // Pass mobile number and purpose
dataType : 'json',
success : function(
response) {
if (response === "Error: This number is not registered.") {
// Show an alert if the number is not registered
alert("This number is not registered.");
} else if (response !== "Error") {
// Open OTP Modal
$(
'#otpForm')
.modal(
{
backdrop : 'static',
keyboard : false
});
$(
'#otpForm')
.modal(
'show');
// Start countdown for resend OTP
var timeleft = 60;
var resendTimeout;
var countdown = $("#countdown");
// Display countdown
$(
"#resend-link")
.html(
'Please wait..<span id="countdown">60</span>s');
resendTimeout = setInterval(
function() {
timeleft--;
countdown
.text(timeleft);
// When countdown finishes, enable Resend OTP link
if (timeleft <= 0) {
clearInterval(resendTimeout);
$(
"#resend-link")
.html(
'<a href="#" id="resend-link" class="text-info" onclick="return sendOTP();">Resend OTP</a>');
}
},
1000);
} else {
alert("OTP not sent. Please try again.");
}
},
error : function() {
alert("No Data found!. This number is not registered.");
}
});
} else {
alert("Please enter a valid 10-digit mobile number.");
}
});
});
// For OTP input box
$('.otp-input').on('keyup', function(e) {
var $this = $(this);
if ($this.val().length === 1) {
$this.next('.otp-input').focus();
}
if ($this.val().length === 0) {
$this.prev('.otp-input').focus();
}
});
//verify otp
function verifyOtp() {
var otpInputs = $('.otp-input');
var otpValue = '';
otpInputs.each(function() {
otpValue += $(this).val();
});
$.ajax({
type : "GET",
url : '/muthalvarpadaippagam/book/api/verifyOTP',
data : {
'otp' : otpValue
},
dataType : 'json',
success : function(response) {
if (response.status === "Success") {
console.log("OTP is Verified!!!");
//location.reload();
$('#otpForm').modal('hide');
$('#datatablecard').show();
$('#mobilenumberotp').hide();
// Proceeds to save form or next action
loadBookingHistoryTable();
} else {
$("#otperror").html("OTP is Incorrect!!!");
}
},
error : function() {
console.log("Error during OTP verification.");
$("#otperror").html("Something went wrong. Please try again.");
}
});
return false;
}
function loadBookingHistoryTable() {
$.get("/muthalvarpadaippagam/book/api/bookinghistory", function (data) {
const tbody = $('#bookingHistoryBody');
tbody.empty();
if (!Array.isArray(data) || data.length === 0) {
tbody.append(`<tr><td colspan="11" class="text-center">No booking history found.</td></tr>`);
} else {
data.forEach((item, index) => {
const row = `<tr>
<td>${index + 1}</td>
<td>${item.booking_id || ''}</td>
<td>${item.buildingname || ''}</td>
<td>${item.type_name || ''}</td>
<td>${item.duration || ''}</td>
<td>${item.from_date || ''} / ${item.to_date || ''}</td>
<td>${item.checkin || ''}</td>
<td>${item.checkout || ''}</td>
<td>${item.no_of_person || ''}</td>
<td>${item.amount || ''}</td>
<td>
<span class="badge ${item.status === 'Completed' ? 'bg-success' : 'bg-warning'}"
style="cursor:pointer"
onclick="openBookingDetails('${item.booking_id}')">
${item.status || 'N/A'}
</span>
<!-- View badge -->
<!-- View badge (always says "view") -->
<span class="badge bg-primary"
style="cursor:pointer"
onclick="openBookingDetails('${item.booking_id}')">
view
</span>
</td>
</tr>`;
tbody.append(row);
});
}
// Reinitialize or initialize the DataTable
if ($.fn.DataTable.isDataTable('#nameinclusion')) {
$('#nameinclusion').DataTable().destroy();
}
$('#nameinclusion').DataTable({
responsive: true
});
});
}
function openBookingDetails(bookingId) {
const iframe = document.getElementById('bookingDetailsIframe');
iframe.src = `/muthalvarpadaippagam/bookingQRCode?booking_id=${bookingId}`;
$('#bookingDetailsModal').modal('show');
}
function close_modal(modalid) {
$(modalid).modal('hide');
}
$('#otpForm').on('hidden.bs.modal', function () {
// Clear all OTP input fields
$('.otp-input').val('');
$('#mobileNo').val('');
});
/* $('#submitform').click(function (e) {
e.preventDefault(); // Prevent default form submission if inside a form
// Gather form values
const bookingId = $('#modalBookingId').val();
const mobile = $('#modalMobile').val();
const userName = $('#modalName').val();
const remarks = $('#remarks').val();
const file = $('#fileUpload')[0].files[0]; // Get the first selected file
// Debug log (optional)
console.log("Booking ID:", bookingId);
console.log("Mobile:", mobile);
console.log("User Name:", userName);
console.log("Remarks:", remarks);
console.log("File:", file);
// Optional: Validation
if (!remarks) {
alert("Please enter remarks.");
return;
}
// Example: Send data to server via AJAX (FormData used for file)
const formData = new FormData();
formData.append("bookingId", bookingId);
formData.append("mobileNumber", mobile);
formData.append("userName", userName);
formData.append("remarks", remarks);
if (file) {
formData.append("uploadPhotoUrl", file);
}
$.ajax({
url: '/muthalvarpadaippagam/book/api/add',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
alert("Submitted successfully!");
$('#complaintDetailsModal').modal('hide');
// Optionally refresh the page or update table
// Clear fields after successful submission
$('#remarks').val('');
$('#fileUpload').val('');
},
error: function (xhr, status, error) {
console.error("Submission error:", error);
alert("There was a problem submitting the form.");
}
});
}); */
</script>
</body>
</html>