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.
 
 
 
 
 

1261 lines
49 KiB

<!DOCTYPE html>
<html lang="en">
<head th:replace="~{fragments/user-head :: head}"></head>
<style>
.navbar-logo {
width: 100% !important;
}
body {
background: #f7f9fb;
font-family: Arial, sans-serif;
}
.filter-box {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
margin-bottom: 25px;
}
.btn-custom {
background: #043B55;
color: white;
font-weight: bold;
border-radius: 10px;
}
.btn-custom:hover {
background: #022b3d;
}
table.dataTable thead th {
background-color: #343a40 !important;
color: white !important;
}
.btn-custom {
background: #043B55 !important;
color: #fff !important;
font-weight: bold;
}
thead.thead-dark th {
background-color: #343a40 !important;
color: white !important;
}
</style>
<body>
<div th:replace="~{fragments/preloader :: div}"></div>
<div id="pcoded" class="pcoded">
<div class="pcoded-container">
<!-- TOP NAV -->
<nav th:replace="~{fragments/nav-admin :: nav}"></nav>
<nav th:replace="~{fragments/nav-adminmenu :: nav}"></nav>
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<br><br>
<div class="container-fluid mt-5 px-4">
<!-- Page Heading -->
<h3 class="text-center font-weight-bold mb-4">
Victoria Public Hall Reports
</h3>
<div class="filter-box">
<h5 class="text-center font-weight-bold mb-3">
Report Filters
</h5>
<div class="row">
<!-- From Date -->
<div class="col-md-3">
<label>From Date</label>
<input type="date" id="fromDate" class="form-control">
</div>
<!-- To Date -->
<div class="col-md-3">
<label>To Date</label>
<input type="date" id="toDate" class="form-control">
</div>
<!-- Dropdown -->
<div class="col-md-4">
<label>Select Report</label>
<select id="reportType" class="form-control">
<option value="hallBooking">
Hall Booking Details
</option>
<option value="visitorDetails" selected>
Victoria Hall Visitor Details
</option>
<option value="bookingDetails">
Victoria Hall Booking Details
</option>
<option value="hallEvent">
Hall Event Report
</option>
<option value="bulkBooking">
Bulk Booking Details
</option>
</select>
</div>
<!-- Apply Button -->
<div class="col-md-2 d-flex align-items-end">
<button id="filterBtn" class="btn btn-custom w-100">
Apply
</button>
</div>
</div>
</div>
<div id="hallBookingSection" class="card shadow-sm" style="display:none;">
<div class="card-body">
<h5 class="text-center font-weight-bold mb-3">
Hall Booking Report Results
</h5>
<!-- <div class="d-flex justify-content-end mb-3">
<div id="exportButtons"></div>
</div>-->
<div id="exportButtons"></div>
<div class="table-responsive">
<table id="hallTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Hall Name</th>
<th>User Name</th>
<th>Booking Date</th>
<th>Status</th>
<th>Event Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="visitorSection" class="card shadow-sm">
<div class="card-body">
<h5 class="text-center font-weight-bold mb-3">
Date Wise Visits Summary
</h5>
<!-- <div class="d-flex justify-content-end mb-3">
<div id="totalVisitsExport"></div>
</div>-->
<div id="totalVisitsExport"></div>
<div class="table-responsive">
<table id="totalVisitsTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Date</th>
<th>Total Booking Count</th>
<th>Total Visitors</th>
<th>Actual Visitors</th>
<th>Visiting %</th>
<th>Rejected</th>
<th>Not Visited</th>
<th>Adult</th>
<th>Children</th>
<th>Senior</th>
<th>Students</th>
<th>Foreigner</th>
<th>Physically Challenged</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="eventSection" class="card shadow-sm" style="display:none;">
<div class="card-body">
<h5 class="text-center font-weight-bold mb-3">
Hall Event Report Results
</h5>
<!-- <div class="d-flex justify-content-end mb-3">
<div id="eventExport"></div>
</div>-->
<div id="eventExport"></div>
<div class="table-responsive">
<table id="eventTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Event Date</th>
<th>Event Name</th>
<th>Category</th>
<th>Type</th>
<th>Amount</th>
<th>Max Capacity</th>
<th>Total Registrations</th>
<th>Total Tickets Sold</th>
<th>Amount Received</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="bulkBookingSection" class="card shadow-sm" style="display:none;">
<div class="card-body">
<h5 class="text-center font-weight-bold mb-3">
Bulk Booking Summary Report
</h5>
<!-- <div class="d-flex justify-content-end mb-3">
<div id="bulkExport"></div>
</div>-->
<div id="bulkExport"></div>
<div class="table-responsive">
<table id="bulkTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Prefer Visit Date</th>
<th>Ref ID</th>
<th>Name of Organization</th>
<th>Payment Status</th>
<th>Total Visitors</th>
<th>Adult</th>
<th>Children</th>
<th>Senior</th>
<th>Students</th>
<th>Foreigner</th>
<th>Physically Challenged</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="bookingSection" class="card shadow-sm" style="display:none;">
<div class="card-body">
<h5 class="text-center font-weight-bold mb-3">
Datewise Booking Summary
</h5>
<!-- <div class="d-flex justify-content-end mb-3">
<div id="totalBookedExport"></div>
</div> -->
<div id="totalBookedExport"></div>
<table id="totalBookedTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Date</th>
<th>Total Booking Count</th>
<th>Total Visitors</th>
<th>Adult</th>
<th>Children</th>
<th>Senior Citizen</th>
<th>Students</th>
<th>Foreigner</th>
<th>Physically Challenged</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="bookingDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Booking Details - <span id="modalBookingDate"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="bookingModalExport" class="mb-2"></div>
<table class="table table-bordered" id="bookingDetailTable">
<thead class="table-primary">
<tr>
<th>Ref ID</th>
<th>Mobile</th>
<th>Email</th>
<th>Visit Date</th>
<th>No. of People</th>
<th>Amount Paid</th>
<th>ID Card</th>
<th>Time</th>
<th>Slot</th>
<th>Language</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="visitordetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Visitor Details - <span id="modalVisitdetailsDate"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="visitordeatailsModalExport" class="mb-2"></div>
<table class="table table-bordered" id="visitordeatailsDetailTable">
<thead class="table-primary">
<tr>
<th>Ref ID</th>
<th>Mobile</th>
<th>Email</th>
<th>Visit Date</th>
<th>Booking Date</th>
<th>No. of People</th>
<th>Amount Paid</th>
<th>ID Card</th>
<th>Time</th>
<th>Slot</th>
<th>Language</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- ===========================
EVENT DETAILS MODAL
=========================== -->
<div class="modal fade" id="eventDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Event Registration Details - <span id="modalEventName"></span> -<span
id="modalEventDate"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="eventModalExport" class="mb-2"></div>
<table class="table table-bordered" id="eventDetailTable">
<thead class="table-primary">
<tr>
<th>Mobile No</th>
<th>No. of People</th>
<th>Total Amount</th>
<th>Payment Status</th>
<th>Booking Flag</th>
<th>Event Timing</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="bulkBookingModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Bulk Booking Details - Ref ID:
<span id="bulkRefIdTitle"></span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<table class="table table-bordered" id="bulkDetailTable">
<thead class="table-primary">
<tr>
<th>Ref ID</th>
<th>Payment Status</th>
<th>No. of People</th>
<th>Mobile</th>
<th>Email</th>
<th>Timing</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ===========================
SCRIPTS
============================ -->
<!-- jQuery -->
<script th:replace="~{fragments/user-script :: script}"></script>
<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.addEventListener("DOMContentLoaded", function () {
let fromDate = document.getElementById("fromDate");
let toDate = document.getElementById("toDate");
let reportType = document.getElementById("reportType");
let filterBtn = document.getElementById("filterBtn");
function setYesterdayDates() {
let yesterday = new Date();
yesterday.setDate(yesterday.getDate() );
let yDate = yesterday.toISOString().split("T")[0];
fromDate.value = yDate;
toDate.value = yDate;
// Restrict future selection
let today = new Date().toISOString().split("T")[0];
fromDate.max = today;
toDate.max = today;
}
// ✅ Bulk Booking → Today to +30 Days
function setBulkBookingDates() {
let todayObj = new Date();
let from = todayObj.toISOString().split("T")[0];
let future = new Date();
future.setDate(todayObj.getDate() + 30);
let to = future.toISOString().split("T")[0];
fromDate.value = from;
toDate.value = to;
// Allow future dates ONLY for bulk booking
toDate.max = to;
}
/*reportType.addEventListener("change", function () {
if (reportType.value === "bulkBooking") {
// Bulk Booking → Today + 30 Days
setBulkBookingDates();
} else {
// Other Reports → Yesterday Default
setYesterdayDates();
}
});*/
// If user changes FROM date → clear TO date
fromDate.addEventListener("change", function () {
if (fromDate.value !== "") {
// ✅ Restrict To Date: cannot select before From Date
toDate.min = fromDate.value;
toDate.value = "";
}
});
// If user changes TO date → clear FROM date
// Default Yesterday Load
setYesterdayDates();
// Default Report Selection
reportType.value = "visitorDetails";
// Hide All Sections Initially
$("#hallBookingSection").hide();
$("#bookingSection").hide();
$("#eventSection").hide();
$("#bulkBookingSection").hide();
// Show Visitor Section Default
$("#visitorSection").show();
// Auto Load Visitor Summary
loadTotalVisitsSummary(fromDate.value, toDate.value);
filterBtn.addEventListener("click", function () {
let fromVal = fromDate.value;
let toVal = toDate.value;
let selectedReport = reportType.value;
// Validation
if (!fromVal || !toVal) {
Swal.fire("Warning", "Please select both dates!", "warning");
return;
}
if (toVal < fromVal) {
Swal.fire("Warning", "To Date cannot be earlier than From Date!", "warning");
return;
}
// Hide All Sections First
$("#hallBookingSection").hide();
$("#visitorSection").hide();
$("#bookingSection").hide();
$("#eventSection").hide();
$("#bulkBookingSection").hide();
if (selectedReport === "hallBooking") {
$("#hallBookingSection").show();
loadHallBookings(fromVal, toVal);
}
else if (selectedReport === "visitorDetails") {
$("#visitorSection").show();
loadTotalVisitsSummary(fromVal, toVal);
}
else if (selectedReport === "bookingDetails") {
$("#bookingSection").show();
loadTotalBookedSummary(fromVal, toVal);
}
else if (selectedReport === "hallEvent") {
$("#eventSection").show();
loadHallEventReport(fromVal, toVal);
}
else if (selectedReport === "bulkBooking") {
$("#bulkBookingSection").show();
loadBulkBookingSummary(fromVal, toVal);
}
});
});
function loadBulkBookingSummary(fromDate, toDate) {
if ($.fn.DataTable.isDataTable('#bulkTable')) {
$('#bulkTable').DataTable().clear().destroy();
$("#bulkExport").empty();
}
$("#bulkTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/bulk-booking-summary",
method: "GET",
data: { fromDate, toDate },
success: function (data) {
if (!data || data.length === 0) {
$("#bulkTable tbody").append(`
<tr>
<td colspan="11" class="text-center text-danger">
No Bulk Bookings Found
</td>
</tr>
`);
return;
}
$.each(data, function (i, r) {
$("#bulkTable tbody").append(`
<tr>
<td data-order="${r.prefer_visit_date}">
${formatDate(r.prefer_visit_date)}
</td>
<td>${r.ref_id}</td>
<td>${r.booked_by}</td>
<td>${r.payment_status}</td>
<td class="text-right">
<a href="javascript:void(0)"
class="fw-bold text-primary"
onclick="openBulkBookingModal('${r.ref_id}')">
${r.TotalCount}
</a>
</td>
<td class="text-right">${r.Adult}</td>
<td class="text-right">${r.Children}</td>
<td class="text-right">${r.SeniorCitizen}</td>
<td class="text-right">${r.Students}</td>
<td class="text-right">${r.Foreigner}</td>
<td class="text-right">${r.PhysicallyChallenged}</td>
</tr>
`);
});
$('#bulkTable').DataTable({
paging: true,
searching: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Bulk Booking Summary' },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Bulk Booking Summary' }
]
}).buttons().container().appendTo("#bulkExport");
}
});
}
function openBulkBookingModal(refId) {
$("#bulkRefIdTitle").text(refId);
loadBulkBookingDetails(refId);
$("#bulkBookingModal").modal("show");
}
function loadBulkBookingDetails(refId) {
if ($.fn.DataTable.isDataTable('#bulkDetailTable')) {
$('#bulkDetailTable').DataTable().clear().destroy();
}
$("#bulkDetailTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/bulk-booking-details",
method: "GET",
data: { refId: refId },
success: function (data) {
$.each(data, function (i, r) {
$("#bulkDetailTable tbody").append(`
<tr>
<td>${r.ref_id}</td>
<td>${r.payment_status}</td>
<td class="text-right">${r.no_of_people}</td>
<td>${r.mob_no || "-"}</td>
<td>${r.email || "-"}</td>
<td>${r.timing}</td>
</tr>
`);
});
$('#bulkDetailTable').DataTable({
paging: true,
searching: true
});
}
});
}
function loadHallBookings(fromDate, toDate) {
if ($.fn.DataTable.isDataTable('#hallTable')) {
$('#hallTable').DataTable().clear().destroy();
$("#exportButtons").empty();
}
$("#hallTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/hall-bookings-dashboardreport",
method: "GET",
data: { fromDate, toDate },
success: function (data) {
if (!data || data.length === 0) {
$("#hallTable tbody").append(`
<tr>
<td colspan="5" class="text-center text-danger">
No records found
</td>
</tr>
`);
return;
}
$.each(data, function (i, r) {
$("#hallTable tbody").append(`
<tr>
<td>${r.hall_name}</td>
<td>${r.userName}</td>
<td>${r.bookingDate}</td>
<td>${r.bookingstatus}</td>
<td>${r.eventDate}</td>
</tr>
`);
});
setTimeout(() => {
$('#hallTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
text: 'Download Excel',
title: 'Hall Bookings Report'
},
{
extend: 'pdfHtml5',
text: 'Download PDF',
orientation: 'landscape',
title: 'Hall Bookings Report'
}
]
}).buttons().container().appendTo("#exportButtons");
}, 200);
},
error: function () {
Swal.fire("Error", "Failed to load Hall Booking Report!", "error");
}
});
}
function loadTotalVisitsSummary(fromDate, toDate) {
if ($.fn.DataTable.isDataTable('#totalVisitsTable')) {
$('#totalVisitsTable').DataTable().clear().destroy();
$("#totalVisitsExport").empty();
}
$("#totalVisitsTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/total-visits-summary",
method: "GET",
data: { fromDate, toDate },
success: function (data) {
if (!data || data.length === 0) {
$("#totalVisitsTable tbody").append(`
<tr>
<td colspan="13" class="text-center text-danger">
No visitor summary found
</td>
</tr>
`);
return;
}
$.each(data, function (i, r) {
let percentage = ((r.accepted_people / r.TotalCount) * 100).toFixed(2);
$("#totalVisitsTable tbody").append(`
<tr>
<td data-order="${r.bookingDate}">
${formatDate(r.bookingDate)}
</td>
<td class="text-right">
<a href="javascript:void(0)"
class="fw-bold text-primary"
onclick="openVisitorBreakupModal('${r.bookingDate}')">
${r.totalBookingCount}
</a>
</td>
<td class="text-right">${r.TotalCount}</td>
<td class="text-right">${r.accepted_people}</td>
<td class="text-right"><b>${percentage}%</b></td>
<td class="text-right">${r.rejected_people}</td>
<td class="text-right">${r.NotVisitedCount}</td>
<td class="text-right">${r.Adult}</td>
<td class="text-right">${r.Children}</td>
<td class="text-right">${r.SeniorCitizen}</td>
<td class="text-right">${r.Students}</td>
<td class="text-right">${r.Foreigner}</td>
<td class="text-right">${r.PhysicallyChallenged}</td>
</tr>
`);
});
$('#totalVisitsTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Visits Summary' },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Visits Summary' }
]
}).buttons().container().appendTo('#totalVisitsExport');
},
error: function () {
Swal.fire("Error", "Failed to load Visitor Summary!", "error");
}
});
}
function loadHallEventReport(fromDate, toDate) {
console.log(fromDate);
if ($.fn.DataTable.isDataTable('#eventTable')) {
$('#eventTable').DataTable().clear().destroy();
$("#eventExport").empty();
}
$("#eventTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/hall-event-report",
method: "GET",
data: { fromDate, toDate },
success: function (data) {
console.log(data);
if (!data || data.length === 0) {
$("#eventTable tbody").append(`
<tr>
<td colspan="10" class="text-center text-danger">
No events found
</td>
</tr>
`);
return;
}
$.each(data, function (i, r) {
$("#eventTable tbody").append(`
<tr>
<td data-order="${r.event_date}">
${formatDate(r.event_date)}
</td>
<td>
<a href="javascript:void(0)"
class="fw-bold text-primary"
onclick="openEventDetailsModal('${r.event_id}','${r.event_name}','${formatDate(r.event_date)}')">
${r.event_name}
</a>
</td>
<td>${r.event_category}</td>
<td>${r.event_type}</td>
<td class="text-right">${r.amount}</td>
<td class="text-right">${r.max_capacity}</td>
<td class="text-right">${r.total_registrations}</td>
<td class="text-right">${r.total_people ?? '-'}</td>
<td class="text-right">${r.Amountreceived ?? '-'}</td>
</tr>
`);
});
$('#eventTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Hall Event Report' },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Hall Event Report' }
]
}).buttons().container().appendTo("#eventExport");
}
});
}
function openEventDetailsModal(eventId, eventName, eventDate) {
$("#modalEventName").text(eventName);
$("#modalEventDate").text(eventDate);
loadEventRegistrations(eventId);
$("#eventDetailsModal").modal("show");
}
function loadEventRegistrations(eventId) {
if ($.fn.DataTable.isDataTable('#eventDetailTable')) {
$('#eventDetailTable').DataTable().clear().destroy();
$("#eventModalExport").empty();
}
$("#eventDetailTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/event-registration-details",
method: "GET",
data: { eventId: eventId },
success: function (data) {
$.each(data, function (i, r) {
$("#eventDetailTable tbody").append(`
<tr>
<td>${r.mob_no}</td>
<td class="text-right">${r.no_of_people}</td>
<td class="text-right">${r.total_amount}</td>
<td>${r.payment_status}</td>
<td>${r.booking_flag}</td>
<td>${r.event_timing}</td>
</tr>
`);
});
$('#eventDetailTable').DataTable({
paging: true,
searching: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Event Registrations' },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Event Registrations' }
]
}).buttons().container().appendTo("#eventModalExport");
}
});
}
function openVisitorBreakupModal(date) {
$("#modalVisitdetailsDate").text(formatDate(date));
loadVisitorDetailsByDate(date);
$("#visitordetailsModal").modal("show");
}
function loadVisitorDetailsByDate(visitDate) {
if ($.fn.DataTable.isDataTable('#visitordeatailsDetailTable')) {
$('#visitordeatailsDetailTable').DataTable().clear().destroy();
$("#visitordeatailsModalExport").empty();
}
$("#visitordeatailsDetailTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/visitor-details-by-dates",
method: "GET",
data: { visitDate: visitDate }, // ✅ date passed here
success: function (data) {
$('#pageLoader').hide();
$.each(data, function (i, r) {
$("#visitordeatailsDetailTable tbody").append(`
<tr>
<td>${r.ref_id}</td>
<td>${r.mob_no ?? '-'}</td>
<td>${r.email ?? '-'}</td>
<!-- <td>${r.visitDate}</td>-->
<td class="nowrap">${formatDate(r.visitDate)}</td>
<td class="nowrap">${formatDate(r.bookingDate)}</td>
<td class="text-right">${r.no_of_people}</td>
<td class="text-right">${r.amountPaid}</td>
<!-- <td>${r.IdCardNumber}</td>-->
<td>${r.IdCardNumber && r.IdCardNumber.trim() !== '' ? r.IdCardNumber : '-'}</td>
<td class="nowrap">${r.time}</td>
<td class="nowrap">${r.slot}</td>
<td>${r.language}</td>
</tr>
`);
});
$('#visitordeatailsDetailTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Visitor Details - ' + formatDate(visitDate) },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Visitor Details - ' + formatDate(visitDate) }
]
}).buttons().container().appendTo('#visitordeatailsModalExport');
}
});
}
function loadTotalBookedSummary(fromDate, toDate) {
if ($.fn.DataTable.isDataTable('#totalBookedTable')) {
$('#totalBookedTable').DataTable().clear().destroy();
$("#totalBookedExport").empty();
}
$("#totalBookedTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/total-booked-summary",
method: "GET",
data: { fromDate, toDate },
success: function (data) {
if (!data || data.length === 0) {
$("#totalBookedTable tbody").append(`
<tr>
<td colspan="9" class="text-center text-danger">
No booking summary found
</td>
</tr>
`);
return;
}
$.each(data, function (i, r) {
$("#totalBookedTable tbody").append(`
<tr>
<td data-order="${r.bookingDate}">
${formatDate(r.bookingDate)}
</td>
<td class="text-right">
<a href="javascript:void(0)"
class="fw-bold text-primary"
onclick="openBookingDetailsModal('${r.bookingDate}')">
${r.totalBookingCount}
</a>
</td>
<td class="text-right">${r.TotalCount}</td>
<td class="text-right">${r.Adult}</td>
<td class="text-right">${r.Children}</td>
<td class="text-right">${r.SeniorCitizen}</td>
<td class="text-right">${r.Students}</td>
<td class="text-right">${r.Foreigner}</td>
<td class="text-right">${r.PhysicallyChallenged}</td>
</tr>
`);
});
$('#totalBookedTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Booking Summary' },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Booking Summary' }
]
}).buttons().container().appendTo('#totalBookedExport');
},
error: function () {
Swal.fire("Error", "Failed to load Booking Summary!", "error");
}
});
}
function openBookingDetailsModal(date) {
$("#modalBookingDate").text(formatDate(date));
loadBookingDetailsByDate(date);
$("#bookingDetailsModal").modal("show");
}
function loadBookingDetailsByDate(visitDate) {
if ($.fn.DataTable.isDataTable('#bookingDetailTable')) {
$('#bookingDetailTable').DataTable().clear().destroy();
$("#bookingModalExport").empty();
}
$("#bookingDetailTable tbody").empty();
$.ajax({
url: "/victoriapublichall/reportapi/booking-details-by-dates",
method: "GET",
data: { visitDate: visitDate },
success: function (data) {
$.each(data, function (i, r) {
$("#bookingDetailTable tbody").append(`
<tr>
<td>${r.ref_id}</td>
<td>${r.mob_no ?? '-'}</td>
<td>${r.email ?? '-'}</td>
<td>${formatDate(r.visitDate)}</td>
<td class="text-right">${r.no_of_people}</td>
<td class="text-right">${r.amountPaid}</td>
<td>${r.IdCardNumber || '-'}</td>
<td>${r.time}</td>
<td>${r.slot}</td>
<td>${r.language}</td>
</tr>
`);
});
$('#bookingDetailTable').DataTable({
paging: true,
searching: true,
ordering: true,
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', text: 'Download Excel', title: 'Booking Details - ' + formatDate(visitDate) },
{ extend: 'pdfHtml5', text: 'Download PDF', orientation: 'landscape', title: 'Booking Details - ' + formatDate(visitDate) }
]
}).buttons().container().appendTo('#bookingModalExport');
}
});
}
function formatDate(dateStr) {
let d = new Date(dateStr);
return d.toLocaleDateString("en-GB");
}
</script>
</body>
</html>