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.
569 lines
20 KiB
569 lines
20 KiB
<!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>
|