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