|
|
<!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>
|