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.

829 lines
24 KiB

6 days ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/user-head :: head}"></head>
  4. <style>
  5. .navbar-logo{
  6. width:100% !important;
  7. }
  8. :root {
  9. --accent: #12363b;
  10. --muted: #6b6b6b;
  11. --card-bg: #ffffff;
  12. --slot-radius: 10px;
  13. --green-start: #16a34a;
  14. --green-end: #09905a;
  15. }
  16. body {
  17. font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  18. min-height: 100vh;
  19. background-attachment: fixed;
  20. background-repeat: no-repeat;
  21. background-size: cover;
  22. -webkit-font-smoothing: antialiased;
  23. min-height: 100vh;
  24. display: flex;
  25. flex-direction: column;
  26. }
  27. label {
  28. color: black;
  29. }
  30. /* Smooth horizontal scroll on mobile */
  31. @media (max-width: 768px) {
  32. .dataTables_wrapper {
  33. overflow-x: auto;
  34. }
  35. table.dataTable {
  36. width: 100% !important;
  37. white-space: nowrap;
  38. }
  39. }
  40. /* time slots container */
  41. .time-grid {
  42. display: grid;
  43. grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  44. gap: 12px;
  45. }
  46. .time-box {
  47. border: 2px solid #dee2e6;
  48. padding: 12px;
  49. border-radius: 10px;
  50. background: #fff;
  51. }
  52. .time-box.disabled {
  53. opacity: 0.5;
  54. pointer-events: none;
  55. }
  56. /* av slots style*/
  57. /* AV SLOT GRID */
  58. .av-grid {
  59. display: grid;
  60. grid-template-columns: repeat(3, 1fr); /* 3 per row */
  61. gap: 16px;
  62. }
  63. @media (max-width: 992px) {
  64. .av-grid {
  65. grid-template-columns: repeat(2, 1fr);
  66. }
  67. }
  68. @media (max-width: 576px) {
  69. .av-grid {
  70. grid-template-columns: 1fr;
  71. }
  72. }
  73. /* AV SLOT CARD */
  74. .av-card {
  75. border: 2px solid #28a745;
  76. border-radius: 12px;
  77. padding: 14px 16px;
  78. display: flex;
  79. justify-content: space-between;
  80. align-items: center;
  81. background: #fff;
  82. }
  83. .av-card.full {
  84. border-color: #dc3545;
  85. background: #fff5f5;
  86. }
  87. .av-time {
  88. font-weight: 600;
  89. font-size: 15px;
  90. }
  91. .av-seats {
  92. font-size: 13px;
  93. color: #6c757d;
  94. }
  95. .av-check input {
  96. width: 20px;
  97. height: 20px;
  98. }
  99. /* ===== Allocated Time Slot Card ===== */
  100. .allocated-time-card {
  101. background: #f1f3f5;
  102. border-radius: 14px;
  103. padding: 18px 20px;
  104. border: 1px solid #e0e0e0;
  105. margin-bottom: 15px;
  106. max-width: 380px;
  107. }
  108. .allocated-time-range {
  109. font-size: 18px;
  110. font-weight: 600;
  111. color: #6c757d;
  112. }
  113. .allocated-time-count {
  114. margin-top: 8px;
  115. font-size: 16px;
  116. font-weight: 500;
  117. color: #28a745;
  118. }
  119. /* ===== Allocated AV Slot Card ===== */
  120. .allocated-av-card {
  121. border: 2px solid #dc3545;
  122. border-radius: 14px;
  123. padding: 16px 18px;
  124. background: #fff5f5;
  125. margin-bottom: 15px;
  126. }
  127. .allocated-av-title {
  128. font-size: 16px;
  129. font-weight: 600;
  130. color: #343a40;
  131. }
  132. .allocated-av-count {
  133. font-size: 14px;
  134. margin-top: 6px;
  135. color: #6c757d;
  136. }
  137. </style>
  138. <body>
  139. <div th:replace="~{fragments/preloader :: div}"></div>
  140. <div id="pcoded" class="pcoded">
  141. <div class="pcoded-container">
  142. <!-- TOP NAV -->
  143. <nav th:replace="~{fragments/nav-admin :: nav}"></nav>
  144. <nav th:replace="~{fragments/nav-adminmenu :: nav}"></nav>
  145. <div class="pcoded-main-container">
  146. <div class="pcoded-wrapper">
  147. <div class="pcoded-content">
  148. <div class="pcoded-inner-content">
  149. <br><br>
  150. <div class="container mt-4">
  151. <div class="card shadow">
  152. <!-- HEADER -->
  153. <div class="card-header bg-dark text-white ">
  154. <h4 class="text-white text-center mb-0">Completed List</h4>
  155. </div>
  156. <!-- BODY -->
  157. <div class="card-body">
  158. <div class="table-responsive">
  159. <table class="table table-bordered table-striped align-middle text-center" id="bookingTable"
  160. style="width:100%">
  161. <thead class="table-dark">
  162. <tr>
  163. <th class="text-center">S.No</th>
  164. <th class="text-center">Ref ID</th>
  165. <th class="text-center">Category</th>
  166. <th class="text-center">Mobile No</th>
  167. <th class="text-center">Prefer Date</th>
  168. <th class="text-center">Visit Date</th>
  169. <th class="text-center">No of People</th>
  170. <th class="text-center">Payment Status</th>
  171. <th class="text-center">Action</th>
  172. </tr>
  173. </thead>
  174. <tbody></tbody>
  175. </table>
  176. </div>
  177. </div>
  178. <!-- FOOTER -->
  179. <div class="card-footer text-center">
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. <div class="modal fade" id="viewModal" tabindex="-1">
  190. <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
  191. <div class="modal-content">
  192. <div class="modal-header bg-dark text-white">
  193. <h5 class="modal-title">Bulk Booking Details</h5>
  194. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  195. </div>
  196. <div class="modal-body">
  197. <!-- hidden values -->
  198. <input type="hidden" id="v_idproofid" name="v_idproofid">
  199. <input type="hidden" id="v_userinput" name="v_userinput">
  200. <!-- BOOKING DETAILS -->
  201. <div class="row mb-2">
  202. <div class="col-md-4"><strong>Reference ID:</strong> <span id="v_refid"></span></div>
  203. <div class="col-md-4"><strong>Name:</strong> <span id="v_name"></span></div>
  204. <div class="col-md-4"><strong>Contact:</strong> <span id="v_userinput_text"></span></div>
  205. </div>
  206. <div class="row mb-2">
  207. <div class="col-md-4"><strong>Preferred Date:</strong> <span id="v_date"></span></div>
  208. <div class="col-md-4"><strong>Category:</strong> <span id="v_category"></span></div>
  209. <div class="col-md-4"><strong>No. of People:</strong> <span id="v_people"></span></div>
  210. </div>
  211. <div class="row mb-2">
  212. <div class="col-md-4"><strong>ID Proof:</strong> <span id="v_idproof"></span></div>
  213. <div class="col-md-4"><strong>ID Details:</strong> <span id="v_id_details"></span></div>
  214. <div class="col-md-4"><strong>Total Amount:</strong> <span id="v_amount"></span></div>
  215. </div>
  216. <div class="row mb-2">
  217. <div class="col-md-4"><strong>Institution:</strong> <span id="v_institution"></span></div>
  218. <div class="col-md-4"><strong>Organization:</strong> <span id="v_organization"></span></div>
  219. </div>
  220. <hr>
  221. <div class="row">
  222. <div class="col-md-8">
  223. <h6 class="fw-bold mt-3 d-none" id="timeSlotTitle">Allocated Time Slot</h6>
  224. <div id="timeSlotContainer" class="time-grid mb-4"></div>
  225. <h6 class="fw-bold d-none" id="avSlotTitle">Allocated AV Slots</h6>
  226. <div id="avSlotContainer" class="av-grid"></div>
  227. </div>
  228. </div>
  229. <div class="text-center mt-4">
  230. <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <script th:replace="~{fragments/user-script :: script}"></script>
  237. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  238. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  239. <!-- DataTables -->
  240. <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
  241. <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
  242. <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  243. <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
  244. <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
  245. <!-- DataTable Buttons -->
  246. <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
  247. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
  248. <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  249. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  250. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
  251. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
  252. <!-- SweetAlert -->
  253. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  254. <script>
  255. <!-- global variables -->
  256. let totalPeople = 0;
  257. let timeSlotAllocated = 0;
  258. let allAVSlots = [];
  259. let currentBookingReadOnly = false;
  260. let currentRefId = null;
  261. $(document).ready(function () {
  262. $('#bookingTable').DataTable({
  263. ajax: {
  264. url: '/victoriapublichall/bookingapi/getcompletedlist',
  265. type: 'GET',
  266. dataSrc: ''
  267. },
  268. columns: [
  269. {
  270. data: null,
  271. render: function (data, type, row, meta) {
  272. return meta.row + 1;
  273. }
  274. },
  275. {data: 'ref_id'},
  276. {data: 'category'},
  277. {
  278. data: 'mob_no',
  279. defaultContent: '-'
  280. },
  281. {
  282. data: 'prefer_visit_date',
  283. render: function (data) {
  284. return data ? data : '-';
  285. }
  286. },
  287. {data: 'latest_visit_date'},
  288. {data: 'no_of_people'},
  289. {data: 'payment_status'},
  290. {
  291. data: 'ref_id',
  292. render: function (data, type, row) {
  293. return `<button class="btn btn-info btn-sm" onclick="viewDetails('${data}')">View</button>`;
  294. }
  295. }
  296. ],
  297. responsive: true,
  298. destroy: true,
  299. pageLength: 10,
  300. lengthMenu: [10, 25, 50, 100]
  301. });
  302. });
  303. function viewDetails(refId) {
  304. $.ajax({
  305. url: "/victoriapublichall/bookingapi/getrequestbyrefid",
  306. type: "GET",
  307. data: {refId: refId},
  308. success: function (response) {
  309. let booking = response.booking;
  310. console.log("booking", booking)
  311. let visitors = response.visitorBreakup;
  312. currentRefId = booking.ref_id;
  313. currentBookingReadOnly = false;
  314. // BOOKING DETAILS
  315. $("#v_refid").text(booking.ref_id || "-");
  316. $("#v_name").text(booking.name || "-");
  317. $("#v_mobile").text(booking.mob_no || "-");
  318. $("#v_category").text(booking.category || "-");
  319. $("#v_date").text(booking.prefer_visit_date || "-");
  320. $("#v_people").text(booking.no_of_people || "-");
  321. $("#v_idproof").text(booking.id_name || "-");
  322. $("#v_id_details").text(booking.id_proof_number || "-");
  323. $("#v_institution").text(booking.institution_name || "-");
  324. $("#v_organization").text(booking.organization_name || "-");
  325. $("#v_amount").text(booking.total_amount || "-")
  326. // hidden
  327. $("#v_idproofid").text(booking.idproodid);
  328. $("#v_userinput_text").text(booking.mob_no || booking.email);
  329. // VISITOR BREAKUP
  330. let tbody = $("#visitorBreakupBody");
  331. tbody.empty();
  332. if (!visitors || visitors.length === 0) {
  333. tbody.append(`
  334. <tr>
  335. <td colspan="5">No visitor breakup data available</td>
  336. </tr>
  337. `);
  338. } else {
  339. visitors.forEach((row, index) => {
  340. let people = row.no_of_people || 0;
  341. let amount = row.amount || 0;
  342. let total = row.total_amount || 0;
  343. totalPeople += people;
  344. tbody.append(`
  345. <tr>
  346. <td>${index + 1}</td>
  347. <td>${row.user_type}</td>
  348. <td>${people}</td>
  349. <td>₹${amount}</td>
  350. <td>₹${total}</td>
  351. </tr>
  352. `);
  353. });
  354. }
  355. totalPeople = Number(booking.no_of_people || 0);
  356. timeSlotAllocated = 0;
  357. $("#totalCapacity").val(`0 / ${totalPeople}`);
  358. $("#timeSlotContainer").empty();
  359. $("#avSlotContainer").empty();
  360. // Always load allocation for completed page
  361. currentBookingReadOnly = true;
  362. $("#submitBtn").hide();
  363. $("#searchdate").prop("disabled", true);
  364. loadAdminAllocation(booking.ref_id);
  365. $("#viewModal").modal("show");
  366. },
  367. error: function () {
  368. Swal.fire("Error", "Unable to load booking details", "error");
  369. }
  370. });
  371. }
  372. // clear the fields while closing the modal
  373. $('#viewModal').on('hidden.bs.modal', function () {
  374. // 🔹 Reset globals
  375. totalPeople = 0;
  376. timeSlotAllocated = 0;
  377. currentBookingReadOnly = false;
  378. currentRefId = null;
  379. allAVSlots = [];
  380. $("#v_refid, #v_name, #v_mobile, #v_category, #v_date").text("");
  381. $("#v_people, #v_idproof, #v_id_details").text("");
  382. $("#v_institution, #v_organization, #v_amount").text("");
  383. $("#visitorBreakupBody").empty();
  384. $("#timeSlotContainer").empty();
  385. $("#avSlotContainer").empty();
  386. $("#timeSlotTitle, #avSlotTitle").addClass("d-none");
  387. // 🔹 Reset message panel
  388. $("#allocationMessage").addClass("d-none").html("");
  389. // 🔹 Reset date & capacity
  390. $("#searchdate").val("").prop("disabled", false);
  391. $("#totalCapacity").val("0 / 0");
  392. $("#submitBtn").show().prop("disabled", true);
  393. });
  394. $(document).on("change", ".slot-check", function () {
  395. timeSlotAllocated = 0;
  396. let remaining = totalPeople;
  397. $(".allocation-text").text("");
  398. $(".slot-check:checked").each(function () {
  399. if (remaining <= 0) return;
  400. const available = Number($(this).data("available"));
  401. const allocated = Math.min(available, remaining);
  402. remaining -= allocated;
  403. timeSlotAllocated += allocated;
  404. $(this).closest(".time-box")
  405. .find(".allocation-text")
  406. .text(`Allocated: ${allocated}`)
  407. .data("allocated", allocated);
  408. });
  409. $("#totalCapacity").val(`${timeSlotAllocated} / ${totalPeople}`);
  410. if (timeSlotAllocated === totalPeople) {
  411. $(".slot-check").each(function () {
  412. if (!this.checked) {
  413. $(this).prop("disabled", true);
  414. }
  415. });
  416. } else {
  417. // Enable again if allocation reduced
  418. $(".slot-check").prop("disabled", false);
  419. }
  420. renderSelectedAVSlots();
  421. validateSubmitState();
  422. });
  423. function loadAllAVSlots(visitDate) {
  424. $.get("/victoriapublichall/bookingapi/getTimeSlotDetailsbydate",
  425. { visitDate },
  426. function (data) {
  427. allAVSlots = data || [];
  428. }
  429. );
  430. }
  431. function renderSelectedAVSlots() {
  432. const selectedTimeIds = $(".slot-check:checked")
  433. .map(function () {
  434. return Number($(this).data("time-id"));
  435. })
  436. .get();
  437. if (selectedTimeIds.length === 0) {
  438. $("#avSlotContainer").html(
  439. "<p class='text-warning'>Select time slots to allocate AV</p>"
  440. );
  441. return;
  442. }
  443. let html = "";
  444. selectedTimeIds.forEach(timeId => {
  445. // get allocated people for THIS timeId
  446. const allocationText = $(`.slot-check[data-time-id="${timeId}"]`)
  447. .closest(".time-box")
  448. .find(".allocation-text")
  449. .text();
  450. const allocatedForTime = allocationText
  451. ? Number(allocationText.replace(/\D/g, ''))
  452. : 0;
  453. if (allocatedForTime <= 0) return;
  454. // AV slots ONLY for this timeId
  455. const avSlotsForTime = allAVSlots.filter(av =>
  456. av.time_id === timeId
  457. );
  458. html += renderAVSlotsPerTime(
  459. timeId,
  460. allocatedForTime,
  461. avSlotsForTime
  462. );
  463. });
  464. $("#avSlotContainer").html(html);
  465. if (currentBookingReadOnly) {
  466. $(".slot-check").prop("disabled", true);
  467. $(".av-checkbox").prop("disabled", true);
  468. }
  469. validateSubmitState();
  470. }
  471. function renderAVSlotsPerTime(timeId, peopleForTime, avSlots) {
  472. let remaining = peopleForTime;
  473. let html = "";
  474. avSlots.forEach(slot => {
  475. if (remaining <= 0 || slot.availCap <= 0) return;
  476. const allocated = Math.min(slot.availCap, remaining);
  477. remaining -= allocated;
  478. html += `
  479. <div class="av-card" data-time-id="${timeId}">
  480. <div>
  481. <div class="av-time">
  482. ${slot.timing} (${slot.language})
  483. </div>
  484. <div class="av-seats">
  485. Capacity: ${slot.availCap} | Allocated: <b>${allocated}</b>
  486. </div>
  487. </div>
  488. <div class="av-check">
  489. <input type="checkbox"
  490. checked
  491. disabled
  492. class="av-checkbox"
  493. data-slot-id="${slot.slot_id}">
  494. </div>
  495. </div>`;
  496. });
  497. return html;
  498. }
  499. // validation of submit button
  500. function validateSubmitState() {
  501. if (currentBookingReadOnly) {
  502. $("#submitBtn").prop("disabled", true);
  503. return;
  504. }
  505. const visitDate = $("#searchdate").val();
  506. const selectedTimeCount = $(".slot-check:checked").length;
  507. const avCount = $(".av-card").length;
  508. let allocated = 0;
  509. $(".allocation-text").each(function () {
  510. const txt = $(this).text();
  511. if (txt.includes("Allocated")) {
  512. allocated += Number(txt.replace(/\D/g, ''));
  513. }
  514. });
  515. const isValid =
  516. visitDate &&
  517. selectedTimeCount > 0 &&
  518. avCount > 0 &&
  519. allocated === totalPeople;
  520. $("#submitBtn").prop("disabled", !isValid);
  521. }
  522. function loadAdminAllocation(bulkRefId) {
  523. $.get("/victoriapublichall/bookingapi/getBulkAllocation",
  524. { bulkRefId },
  525. function (res) {
  526. if (!res.allocated) {
  527. // No allocation yet → admin can allocate
  528. $("#searchdate").prop("disabled", false);
  529. $("#submitBtn").prop("disabled", true);
  530. $("#allocationMessage").addClass("d-none");
  531. $("#timeSlotTitle, #avSlotTitle").addClass("d-none");
  532. return;
  533. }
  534. $("#timeSlotTitle").removeClass("d-none");
  535. $("#avSlotTitle").removeClass("d-none");
  536. $("#submitBtn").hide();
  537. $("#timeSlotContainer").empty();
  538. $("#avSlotContainer").empty();
  539. let totalAllocated = 0;
  540. res.timeSlots.forEach(time => {
  541. totalAllocated += time.people;
  542. // TIME SLOT BOX
  543. $("#timeSlotContainer").append(`
  544. <div class="allocated-time-card">
  545. <div class="allocated-time-range">
  546. ${time.timeRange}
  547. </div>
  548. <div class="allocated-time-count">
  549. Allocated: ${time.people}
  550. </div>
  551. </div>
  552. `);
  553. // AV SLOTS
  554. time.avSlots.forEach(av => {
  555. $("#avSlotContainer").append(`
  556. <div class="allocated-av-card">
  557. <div class="allocated-av-title">
  558. ${av.time} (${av.language})
  559. </div>
  560. <div class="allocated-av-count">
  561. Allocated: ${av.people}
  562. </div>
  563. </div>
  564. `);
  565. });
  566. });
  567. $("#totalCapacity").val(`${totalAllocated} / ${totalPeople}`);
  568. $("#allocationMessage")
  569. .removeClass("d-none")
  570. .html(`
  571. <h6 class="fw-bold mb-2">Allocation Status</h6>
  572. <p class="mb-1">
  573. This request (<b>${bulkRefId}</b>) has already been allocated.
  574. </p>
  575. <p class="mb-0 text-danger">
  576. Waiting for payment confirmation.
  577. </p>
  578. `);
  579. }
  580. );
  581. }
  582. // goback function
  583. function goBack() {
  584. $("#viewModal").modal("hide");
  585. currentBookingReadOnly = false;
  586. currentRefId = null;
  587. $("#timeSlotContainer").empty();
  588. $("#avSlotContainer").empty();
  589. $("#timeSlotTitle, #avSlotTitle").addClass("d-none");
  590. $("#searchdate")
  591. .val("")
  592. .prop("disabled", false);
  593. $("#totalCapacity").val(`0 / 0`);
  594. $(".slot-check, .av-checkbox").prop("disabled", false);
  595. }
  596. </script>
  597. </body>
  598. </html>