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.
385 lines
14 KiB
385 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
|
|
|
<head th:replace="~{fragments/user-head :: head}">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<style>
|
|
/* Hide menu & footer when printing */
|
|
@media print {
|
|
.navbar, footer, .btn {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Desktop width control */
|
|
@media (min-width: 850px) {
|
|
.qr-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* ===== ALIGNMENT FIXES ===== */
|
|
.qr-container .card {
|
|
padding: 25px 30px !important;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
|
|
.qr-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-header img {
|
|
width: 45px;
|
|
display: block;
|
|
margin: 0 auto 8px auto;
|
|
}
|
|
|
|
.qr-header-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Header */
|
|
/*.qr-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}*/
|
|
|
|
.qr-header img {
|
|
width: 45px;
|
|
}
|
|
|
|
.qr-header-title {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Title */
|
|
.booking-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #15455D;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* QR */
|
|
.qr-image {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 15px 0 25px;
|
|
}
|
|
|
|
.qr-image img {
|
|
border: 4px solid #15455D;
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Section title */
|
|
.section-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #15455D;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Booking details */
|
|
.booking-details p {
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.booking-details span {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Note */
|
|
.note-box {
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
text-align: justify;
|
|
}
|
|
|
|
.note-box span {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ID Proof Rules */
|
|
.id-proof-box {
|
|
margin-top: 15px;
|
|
padding: 12px 15px;
|
|
border: 1px dashed #15455D;
|
|
border-radius: 8px;
|
|
background: #f8fbfd;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.id-proof-box h6 {
|
|
font-weight: bold;
|
|
color: #15455D;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.id-proof-box ul {
|
|
padding-left: 18px;
|
|
margin: 0;
|
|
}
|
|
|
|
.id-proof-box li {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<!-- Pre-loader -->
|
|
<div th:replace="~{fragments/preloader :: div}"></div>
|
|
|
|
<div id="pcoded" class="pcoded">
|
|
<div class="pcoded-container">
|
|
|
|
<nav th:replace="~{fragments/user-nav :: nav}"></nav>
|
|
|
|
<div class="pcoded-main-container">
|
|
<div class="pcoded-wrapper">
|
|
<div class="pcoded-content">
|
|
<div class="pcoded-inner-content">
|
|
<div class="main-body">
|
|
<div class="page-wrapper">
|
|
<div class="page-body" style="padding-top:5%;">
|
|
|
|
<div id="printArea" class="qr-container">
|
|
<div class="card shadow">
|
|
|
|
<!-- HEADER -->
|
|
<div class="qr-header">
|
|
<img th:src="@{/victoriapublichall/images/VPH-logo_main-EN 1.png}" alt="VPH logo" class="logo">
|
|
<div class="qr-header-title text-center">
|
|
Victorial Hall Booking
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TITLE -->
|
|
<h5 class="booking-title">Booking Completed</h5>
|
|
|
|
<!-- QR -->
|
|
<div class="qr-image">
|
|
<img id="qrCodeImage" alt="QR Code">
|
|
</div>
|
|
|
|
|
|
|
|
<!-- DETAILS TITLE -->
|
|
<h6 class="section-title mt-3">Booking Details</h6>
|
|
|
|
<th:block th:with="isBulk=${bookingDetails[0]['bulkRefId'] != null}">
|
|
|
|
<div class="row booking-details">
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Mobile No:
|
|
<span th:text="${bookingDetails[0]['mob_no']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Email Id:
|
|
<span th:text="${bookingDetails[0]['email']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Visit Date:
|
|
<span th:text="${bookingDetails[0]['visit_date']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- SINGLE BOOKING -->
|
|
<th:block th:if="${!isBulk}">
|
|
<div class="col-6 col-lg-3">
|
|
<p>Time:
|
|
<span th:text="${bookingDetails[0]['timing']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>AV Slot:
|
|
<span th:text="${bookingDetails[0]['avslottime']}"></span>
|
|
</p>
|
|
</div>
|
|
</th:block>
|
|
|
|
<!-- BULK BOOKING -->
|
|
<th:block th:if="${isBulk}">
|
|
<div class="col-12">
|
|
<p>Time Slots:
|
|
<span th:text="${bookingDetails[0]['timings']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<p>AV Slots:
|
|
<span th:text="${bookingDetails[0]['available_slots']}"></span>
|
|
</p>
|
|
</div>
|
|
</th:block>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Total People:
|
|
<span th:text="${bookingDetails[0]['no_of_people']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Adults:
|
|
<span th:text="${bookingDetails[0]['adult_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Children:
|
|
<span th:text="${bookingDetails[0]['child_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Foreigners:
|
|
<span th:text="${bookingDetails[0]['foreigner_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Senior Citizen:
|
|
<span th:text="${bookingDetails[0]['sc_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Students:
|
|
<span th:text="${bookingDetails[0]['students_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-6 col-lg-3">
|
|
<p>Physically Challenged:
|
|
<span th:text="${bookingDetails[0]['pc_count']}"></span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</th:block>
|
|
|
|
|
|
<!-- ID PROOF RULES -->
|
|
<div class="id-proof-box">
|
|
<h6>ID Proof Requirements</h6>
|
|
<ul>
|
|
<li><b>Adults / Senior Citizen / Children:</b> Aadhaar Card</li>
|
|
<li><b>Students:</b> Student Identity Card</li>
|
|
<li><b>Foreigners / NRI:</b> Passport</li>
|
|
</ul>
|
|
|
|
|
|
<div class="note-box">
|
|
<span>Note:</span>
|
|
All individuals visiting the hall must carry a valid ID proof for verification.
|
|
Failure to produce the ID proof may result in cancellation of the booking.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- NOTE -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<center class="">
|
|
<button class="btn btn-primary" onclick="downloadPDF()">
|
|
Download PDF
|
|
</button>
|
|
</center>
|
|
|
|
<center class="mt-2">
|
|
<button class="btn btn-success"
|
|
onclick="window.location.href='/victoriapublichall/home'">
|
|
Back to Home
|
|
</button>
|
|
</center>
|
|
|
|
<footer th:replace="~{fragments/footer :: footer}"></footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script th:replace="~{fragments/user-script :: script}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
function downloadPDF() {
|
|
|
|
const element = document.getElementById('printArea');
|
|
|
|
const opt = {
|
|
margin: 10,
|
|
filename: 'VPH_Booking_Details.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true },
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
|
|
html2pdf().set(opt).from(element).save();
|
|
}
|
|
|
|
|
|
|
|
function fetchQRCode(orderid) {
|
|
|
|
$.ajax({
|
|
|
|
url: '/victoriapublichall/bookingapi/generateQR?orderid=' + encodeURIComponent(orderid),
|
|
|
|
type: 'GET',
|
|
success: function (data) {
|
|
console.log("data......",data)
|
|
$('#qrCodeImage').attr('src', 'data:image/png;base64,' + data);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
const orderid = [[${bookingDetails[0]['order_id']}]];
|
|
console.log("Order ID:", orderid);
|
|
fetchQRCode(orderid);
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|