VictoriaPublicHall_visitbooking/target/classes/templates/user/qrpage.html

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