|
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking Acknowledgement</title> <!-- Links to Bootstrap CSS and JS, jQuery, and SweetAlert --> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style> label { color: black; }
/* Header Styling */ .header { background-color: #1d495a; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; color: white; font-family: Arial, sans-serif;
}
.header .logo { display: flex; align-items: center; }
.header .logo img { height: 60px; }
.header .center-text { position: absolute; /* Centered text */ left: 50%; transform: translateX(-50%); text-align: center; font-size: 24px; }
.header .menu-btn { background-color: transparent; border: none; font-size: 24px; color: white; }
.header .menu-btn:hover { /* text-decoration: underline; */ color: #ccc; }
/* Menu Dropdown */ .menu-dropdown { position: relative; margin-top: 10px; background-color: #1d495a; padding: 10px 20px; display: none; flex-direction: column; width: 100%; }
.menu-dropdown a { color: white; margin-bottom: 5px; text-decoration: none; }
.menu-dropdown a:hover { text-decoration: underline; }
.menu-dropdown { right: 0; left: 0; z-index: 1000; /* Add z-index to bring the menu above other elements */ }
/* Mobile Specific Styling */ @media (max-width : 768px) { .header { display: flex; justify-content: space-between; align-items: center; }
.center-text { font-size: 18px !important; flex-grow: 1; text-align: center; }
.menu-dropdown { right: 0; left: 0; z-index: 1000; /* Add z-index to bring the menu above other elements */ } }
/* Ensure content is not hidden behind the fixed navbar */ body { margin: 0; /* margin-top: 90px; Adjust based on your header height */ }
/* Smooth horizontal scroll on mobile */ @media (max-width: 768px) { .dataTables_wrapper { overflow-x: auto; }
table.dataTable { width: 100% !important; white-space: nowrap; } } </style></head>
<body class="bg-light">
<!-- Header Start--> <header> <div class="header d-flex justify-content-between align-items-center"> <!-- Left: Logo --> <div class="logo"> <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo"> </div>
<!-- Center: Text --> <div class="center-text">VICTORIA PUBLIC HALL</div>
<!-- Right: Button for Menu -
<div class="menu"> <button class="menu-btn" onclick="toggleMenu()"> ☰ Unicode for hamburger menu icon </button> </div> --> </div>
</header> <!-- Header End-->
<div class="container my-4"> <div class="card shadow">
<!-- HEADER --> <div class="card-header bg-success text-white text-center"> <h5 class="mb-0">Bulk Booking Acknowledgement</h5> <small>Reference ID: <span id="refId"></span></small> </div>
<!-- BODY --> <div class="card-body">
<h6 class="text-center mb-3">Your Previous Bulk Bookings</h6>
<div class="table-responsive"> <table class="table table-bordered table-striped align-middle text-center" id="bookingTable" style="width:100%"> <thead class="table-dark"> <tr> <th class="text-center">S.No</th> <th class="text-center">Ref ID</th> <th class="text-center">Prefer Date</th> <th class="text-center">ContactDetails</th> <th class="text-center">Category</th> <th class="text-center">No. of People</th> <th class="text-center">ID Proof</th> <th class="text-center">Total Amount (₹)</th> <th class="text-center">Booked On</th> <th class="text-center">Action</th> </tr> </thead> <tbody></tbody> </table> </div>
</div>
<!-- FOOTER --> <div class="card-footer text-center"> <button class="btn btn-primary me-2" onclick="window.print()">Print</button> <button class="btn btn-secondary" onclick="goHome()">Home</button> </div>
</div> </div>
<div class="modal fade" id="viewModal" tabindex="-1"> <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content">
<div class="modal-header text-white" style="background-color:#1d495a;"> <h5 class="modal-title">Booking Details</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button> </div>
<div class="modal-body"> <div class="row mb-2"> <div class="col-md-6"><strong>Name:</strong> <span id="m_name"></span></div> <div class="col-md-6"><strong>Contact:</strong> <span id="m_contact"></span></div> </div>
<div class="row mb-2"> <div class="col-md-6"><strong>Visit Date:</strong> <span id="m_visit"></span></div> <div class="col-md-6"><strong>Category:</strong> <span id="m_category"></span></div> </div>
<hr>
<h6>Visitor Breakup</h6> <table class="table table-sm table-bordered"> <thead class="table-secondary"> <tr> <th>User Type</th> <th>No. of People</th> <th>Amount</th> </tr> </thead> <tbody id="m_visitors"></tbody> </table>
<div class="d-flex justify-content-between"> <strong>Total People:</strong> <span id="m_totalPeople"></span> </div> <div class="d-flex justify-content-between"> <strong>Total Amount:</strong> ₹<span id="m_totalAmount"> ₹</span> </div>
<div class="alert alert-warning text-center mb-0"> <strong>Your request has been submitted successfully.</strong><br> <span class="small"> <strong>Payment is pending.</strong> Currently your application is under review by the competent authority. The status update and payment link will be shared shortly. </span> </div>
<div class="card mt-3"> <div class="card-header bg-dark text-white"> <h6 class="mb-0">Disclaimer</h6> </div>
<div class="card-body">
<!-- Disclaimer Content --> <ul class="small text-muted mb-3"> <li> Submission of this application shall be treated as a <strong>request only</strong> and shall not be considered as confirmation of booking. </li> <li> The preferred visit date indicated is <strong>subject to availability</strong> and verification by the Competent Authority. </li> <li> In the event of non-availability of the preferred date, the Competent Authority reserves the right to allot an <strong>alternate visit date</strong>. </li> <li> The final visit date shall be communicated to the applicant upon approval. </li> <li> The booking shall be deemed confirmed only upon <strong>administrative approval and successful payment confirmation</strong>, wherever applicable. </li> <li> Payment shall be made within <strong>24 hours</strong> from the date and time of approval, failing which the request shall be liable for <strong>automatic cancellation</strong> without further notice. </li> </ul>
<hr>
</div> </div>
</div>
</div> </div> </div>
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 5 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables --> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<!-- DataTable Buttons --> <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<!-- SweetAlert --> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function () {
const refId = new URLSearchParams(window.location.search).get("refId");
if (!refId) { Swal.fire("Error", "Invalid Reference ID", "error"); return; }
$("#refId").text(refId);
$.get("/victoriapublichall/bookingapi/getAcknowledgement", { refId: refId }, function (res) {
const tbody = $("#bookingTable tbody"); // DEFINE FIRST tbody.empty(); if (res.status !== "success" || !res.bookings || res.status === "error") {
tbody.append(` <tr> <td colspan="10" class="text-center text-muted fw-semibold"> No bookings found for this reference ID </td> </tr> `);
// Destroy existing DataTable if any if ($.fn.DataTable.isDataTable("#bookingTable")) { $("#bookingTable").DataTable().clear().destroy(); }
// Init DataTable (minimal, no buttons) $("#bookingTable").DataTable({ paging: false, searching: false, info: false, ordering: false });
return; // stop further processing }
res.bookings.forEach(b => {
const idProof = b.id_proof_name ? `${b.id_proof_name} - ${b.id_proof_number}` : "—";
// store FULL booking object on row const row = $(` <tr> <td></td> <!-- S.No (auto-filled) --> <td>${b.ref_id}</td> <td>${b.visit_date}</td> <td>${res.contact}</td> <td>${b.category}</td> <td class="text-center">${b.no_of_people}</td> <td>${idProof}</td> <td class="text-end">${b.total_amount}</td> <td>${b.booked_on}</td> <td> <button class="btn btn-sm btn-info viewBtn mt-2">View</button> <button class="btn btn-sm btn-danger cancelBtn mt-2">Cancel</button> </td> </tr> `);
row.data("booking", b); row.data("contact", res.contact);
tbody.append(row); });
if ($.fn.DataTable.isDataTable("#bookingTable")) { $("#bookingTable").DataTable().clear().destroy(); }
const table = $("#bookingTable").DataTable({ scrollX: true, // horizontal scroll responsive: false, // disable column collapsing pageLength: 5, ordering: false, dom: 'Bfrtip', buttons: [ { extend: 'excelHtml5', title: 'Victoria Public Hall - Bulk Booking Acknowledgement', exportOptions: { columns: ':visible:not(:last-child)' // exclude Action column } }, { extend: 'pdfHtml5', title: 'Victoria Public Hall - Bulk Booking Acknowledgement', orientation: 'landscape', pageSize: 'A4', exportOptions: { columns: ':visible:not(:last-child)' // exclude Action column } } ], columnDefs: [ { targets: 0, // S.No column orderable: false, searchable: false, className: "text-center" } ] });
/* Auto increment S.No */ table.on('order.dt search.dt draw.dt', function () { table.column(0, { search: 'applied', order: 'applied' }) .nodes() .each(function (cell, i) { cell.innerHTML = i + 1; }); }).draw();
}
);
$(document).on("click", ".viewBtn", function () {
const row = $(this).closest("tr"); const booking = row.data("booking"); const contact = row.data("contact");
// Basic details $("#m_name").text(booking.name); $("#m_contact").text(contact); $("#m_visit").text(booking.visit_date); $("#m_category").text(booking.category); $("#m_totalPeople").text(booking.no_of_people); $("#m_totalAmount").text(booking.total_amount);
// Visitor breakup const tbody = $("#m_visitors"); tbody.empty();
if (!booking.visitorBreakup || booking.visitorBreakup.length === 0) { tbody.append(` <tr> <td colspan="3" class="text-center text-muted"> Visitor breakup not available </td> </tr> `); } else { booking.visitorBreakup.forEach(v => { tbody.append(` <tr> <td>${v.user_type}</td> <td class="text-center">${v.count}</td> <td class="text-center"><h9>Per Person: ${v.amount}</h9></td> </tr> `); }); }
new bootstrap.Modal("#viewModal").show(); });
});
function goHome() { window.location.href = "/victoriapublichall"; }
// cancel the request
$(document).on("click", ".cancelBtn", function () {
const row = $(this).closest("tr"); const booking = row.data("booking"); const refId = booking.ref_id;
Swal.fire({ title: "Cancel Booking?", text: "Are you Cancel the Request", icon: "warning", showCancelButton: true, confirmButtonText: "Yes, Cancel", cancelButtonText: "No" }).then((result) => { if (result.isConfirmed) {
$.ajax({ url: "/victoriapublichall/bookingapi/cancelBulkRequest", type: "POST", data: { refId: refId }, success: function (res) {
if (res.status === "SUCCESS") { Swal.fire({ title: "Cancelled", text: res.message, icon: "success" }).then(() => { window.location.href = "/victoriapublichall/register"; });
} else { Swal.fire("Warning", res.message, "warning"); } }, error: function () { Swal.fire("Error", "Unable to cancel request", "error"); } }); } }); });
</script>
</body>
</html>
|
