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
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">×</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">×</span> -->
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close">×</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">×</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">×</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>
|