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.

1731 lines
73 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/head-sm :: head}"></head>
  4. <style>
  5. .nav-tabs .nav-link.active {
  6. background: #1a73e8;
  7. color: #fff !important;
  8. border-color: #1a73e8;
  9. border-radius: 6px 6px 0 0;
  10. }
  11. .nav-tabs .nav-link {
  12. color: #444;
  13. font-weight: 500;
  14. cursor: pointer;
  15. }
  16. .tab-badge {
  17. background: #e8f0fe;
  18. color: #1a73e8;
  19. border-radius: 10px;
  20. padding: 1px 8px;
  21. font-size: 12px;
  22. font-weight: 700;
  23. margin-left: 4px;
  24. }
  25. .nav-tabs .nav-link.active .tab-badge {
  26. background: rgba(255, 255, 255, 0.25);
  27. color: #fff;
  28. }
  29. .table-responsive {
  30. overflow-x: auto;
  31. }
  32. .btn-sendmail {
  33. background: #1a73e8;
  34. color: #fff;
  35. border: none;
  36. border-radius: 4px;
  37. padding: 4px 12px;
  38. cursor: pointer;
  39. font-size: 12px;
  40. }
  41. .btn-sendmail:hover {
  42. background: #1558b0;
  43. }
  44. .btn-sendmail:disabled,
  45. .btn-sendmail[disabled] {
  46. background: #9ca3af;
  47. cursor: not-allowed;
  48. opacity: 0.65;
  49. }
  50. .btn-viewdetails {
  51. background: #f59e0b;
  52. color: #fff;
  53. border: none;
  54. border-radius: 4px;
  55. padding: 4px 12px;
  56. cursor: pointer;
  57. font-size: 12px;
  58. margin-right: 4px;
  59. }
  60. .btn-viewdetails:hover {
  61. background: #b45309;
  62. }
  63. .badge-cancelled {
  64. background: #dc2626;
  65. color: #fff;
  66. padding: 3px 8px;
  67. border-radius: 10px;
  68. font-size: 11px;
  69. }
  70. .badge-rejected {
  71. background: #7c3aed;
  72. color: #fff;
  73. padding: 3px 8px;
  74. border-radius: 10px;
  75. font-size: 11px;
  76. }
  77. .badge-approved {
  78. background: #16a34a;
  79. color: #fff;
  80. padding: 3px 8px;
  81. border-radius: 10px;
  82. font-size: 11px;
  83. }
  84. .badge-other {
  85. background: #64748b;
  86. color: #fff;
  87. padding: 3px 8px;
  88. border-radius: 10px;
  89. font-size: 11px;
  90. }
  91. .not-initiated {
  92. color: #dc2626;
  93. font-style: italic;
  94. font-size: 12px;
  95. }
  96. /* Draft mail preview */
  97. #draftMailBody {
  98. background: #f8fafc;
  99. border: 1px solid #cbd5e1;
  100. border-radius: 6px;
  101. padding: 16px;
  102. font-family: Arial, sans-serif;
  103. font-size: 14px;
  104. white-space: pre-wrap;
  105. line-height: 1.6;
  106. }
  107. .mail-header-row {
  108. margin-bottom: 6px;
  109. font-size: 13px;
  110. }
  111. .mail-header-row strong {
  112. display: inline-block;
  113. width: 50px;
  114. color: #475569;
  115. }
  116. /* DataTables UI layout enhancements */
  117. .dataTables_wrapper .dataTables_filter label {
  118. font-weight: 500;
  119. }
  120. .dataTables_wrapper .dataTables_filter input {
  121. margin-left: 0.5em;
  122. display: inline-block;
  123. width: auto;
  124. border: 1px solid #ced4da;
  125. border-radius: 4px;
  126. padding: 4px 8px;
  127. }
  128. .dataTables_wrapper .dt-buttons {
  129. margin-bottom: 8px;
  130. }
  131. .dataTables_wrapper .dt-buttons .btn {
  132. margin-right: 4px;
  133. }
  134. .dataTables_wrapper .dataTables_paginate .paginate_button {
  135. padding: 4px 10px;
  136. margin-left: 2px;
  137. border-radius: 4px;
  138. }
  139. .card-body table {
  140. width: 100% !important;
  141. }
  142. .table {
  143. width: 100% !important;
  144. }
  145. </style>
  146. <body>
  147. <!-- Page Container -->
  148. <div id="page-container"
  149. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  150. <!-- Side Overlay aside (right)-->
  151. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  152. <!-- END Side Overlay (right)-->
  153. <!-- Sidebar Nav-->
  154. <nav th:replace="~{fragments/nav-sm :: nav}"></nav>
  155. <!-- END Sidebar -->
  156. <!-- Header -->
  157. <header th:replace="~{fragments/header-sm :: header}"></header>
  158. <!-- END Header -->
  159. <!-- Main Container -->
  160. <main id="main-container">
  161. <div class="content">
  162. <div class="block block-rounded">
  163. <div class="block-header block-header-default">
  164. <h3 class="block-title">6 Months Old Transaction Details</h3>
  165. </div>
  166. <div class="block-content">
  167. <!-- ── TABS ───────────────────────────────────────────── -->
  168. <ul class="nav nav-tabs mb-0" id="sixMonthTab" role="tablist">
  169. <li class="nav-item" role="presentation">
  170. <a class="nav-link active" id="tab-sixmonth-lnk" data-target="#tab-sixmonth" role="tab"
  171. aria-controls="tab-sixmonth" aria-selected="true">
  172. 6 Month Old Bookings
  173. <span class="tab-badge"
  174. th:text="${sixMonthOldBookings != null ? #lists.size(sixMonthOldBookings) : 0}">0</span>
  175. </a>
  176. </li>
  177. <li class="nav-item" role="presentation">
  178. <a class="nav-link" id="tab-cancelled-lnk" data-target="#tab-cancelled" role="tab"
  179. aria-controls="tab-cancelled" aria-selected="false">
  180. Cancelled Bookings
  181. <span class="tab-badge"
  182. th:text="${cancelledBookings != null ? #lists.size(cancelledBookings) : 0}">0</span>
  183. </a>
  184. </li>
  185. <li class="nav-item" role="presentation">
  186. <a class="nav-link" id="tab-rejected-lnk" data-target="#tab-rejected" role="tab"
  187. aria-controls="tab-rejected" aria-selected="false">
  188. Rejected Bookings
  189. <span class="tab-badge"
  190. th:text="${rejectedBookings != null ? #lists.size(rejectedBookings) : 0}">0</span>
  191. </a>
  192. </li>
  193. <li class="nav-item" role="presentation">
  194. <a class="nav-link" id="tab-mailsent-lnk" data-target="#tab-mailsent" role="tab"
  195. aria-controls="tab-mailsent" aria-selected="false">
  196. Mail Sent Bookings
  197. <span class="tab-badge"
  198. th:text="${mailSentBookings != null ? #lists.size(mailSentBookings) : 0}">0</span>
  199. </a>
  200. </li>
  201. </ul>
  202. <div class="tab-content border border-top-0 p-3" id="sixMonthTabContent">
  203. <!-- ══════════════════════════════════════════════════
  204. TAB 1 – 6 Month Old Bookings (non-cancelled/rejected)
  205. ══════════════════════════════════════════════════ -->
  206. <div class="tab-pane fade show active" id="tab-sixmonth" role="tabpanel"
  207. aria-labelledby="tab-sixmonth-lnk">
  208. <div class="table-responsive">
  209. <table
  210. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  211. id="tbl-sixmonth">
  212. <thead class="thead-light">
  213. <tr>
  214. <th>S.No</th>
  215. <th>Zone</th>
  216. <th>Division</th>
  217. <th>Hall Name</th>
  218. <th>Booking Id</th>
  219. <th>Booking Date</th>
  220. <th>Event Date (Start – End)</th>
  221. <th>Settlement Raised Date</th>
  222. <th>Refund Amount (₹)</th>
  223. <th>Refund Status</th>
  224. <th>Booking Status</th>
  225. <th>Action</th>
  226. </tr>
  227. </thead>
  228. <tbody>
  229. <tr th:each="row, rowStat : ${sixMonthOldBookings}">
  230. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  231. <td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
  232. <td th:text="${row['division'] != null ? row['division'] : ''}"></td>
  233. <td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
  234. <td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
  235. </td>
  236. <td class="text-center"
  237. th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
  238. </td>
  239. <td class="text-center">
  240. <span
  241. th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
  242. <span> – </span>
  243. <span
  244. th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
  245. </td>
  246. <!-- Settlement Raised Date: N/A if no settlement -->
  247. <td class="text-center">
  248. <span th:if="${row['settlement_raised_date'] != null}"
  249. th:text="${row['settlement_raised_date']}"></span>
  250. <span th:if="${row['settlement_raised_date'] == null}"
  251. class="not-initiated">Settlement Not Initiated</span>
  252. </td>
  253. <!-- Refund Amount: from settlement.refunded_amount -->
  254. <td class="text-right">
  255. <span th:if="${row['refunded_amount'] != null}"
  256. th:text="${'₹ ' + row['refunded_amount']}"></span>
  257. <span th:if="${row['refunded_amount'] == null}"
  258. class="not-initiated">—</span>
  259. </td>
  260. <td class="text-center"
  261. th:text="${row['refund_status'] != null ? row['refund_status'] : ''}">
  262. </td>
  263. <td class="text-center">
  264. <span
  265. th:class="${row['booking_status'] == 'CANCELED' || row['booking_status'] == 'CANCELLED' ? 'badge-cancelled' : (row['booking_status'] == 'REJECTED' ? 'badge-rejected' : (row['booking_status'] == 'APPROVED' ? 'badge-approved' : 'badge-other'))}"
  266. th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
  267. </td>
  268. <td class="text-center">
  269. <!-- View Details: calls getSettlementList if settlement exists -->
  270. <button th:if="${row['settlement_id'] != null}"
  271. class="btn-viewdetails btn-view-settlement"
  272. th:data-settlement-id="${row['settlement_id']}">
  273. View Details
  274. </button><br>
  275. <span th:if="${row['settlement_id'] == null}"
  276. class="not-initiated d-block mb-1">Settlement Not
  277. Initiated</span></br>
  278. <!-- Send Mail: disabled when settlement_raised_date is null -->
  279. <!--<button class="btn-sendmail btn-open-mail"
  280. th:disabled="${row['settlement_raised_date'] == null || row['refunded_amount'] == 0.0}"
  281. th:title="${row['settlement_raised_date'] == null ?
  282. 'Send Mail is available only after settlement is raised' :
  283. (row['refunded_amount'] == 0.0 ?
  284. 'Send Mail is available only for refund minimum of 1 rupee(s).' :
  285. 'Send refund mail')}" th:data-booking-id="${row['booking_id']}"
  286. th:data-booking-status="${row['booking_status']}"
  287. th:data-transaction-id="${row['txansaction_id']}"
  288. th:data-tpsl-id="${row['tpsl_txn_id']}"
  289. th:data-transaction-date="${row['transaction_date']}"
  290. th:data-refund-amount="${row['refunded_amount'] != null ? row['refunded_amount'] : 0}">
  291. Send Mail
  292. </button>-->
  293. </td>
  294. <!-- Empty table state handled natively by DataTables -->
  295. </tbody>
  296. </table>
  297. </div>
  298. </div><!-- /tab-sixmonth -->
  299. <!-- ══════════════════════════════════════════════════
  300. TAB 2 – Cancelled Bookings
  301. Refund Amount = deposit_amount
  302. No Settlement Raised Date column
  303. ══════════════════════════════════════════════════ -->
  304. <div class="tab-pane fade" id="tab-cancelled" role="tabpanel"
  305. aria-labelledby="tab-cancelled-lnk">
  306. <div class="table-responsive">
  307. <table
  308. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  309. id="tbl-cancelled">
  310. <thead class="thead-light">
  311. <tr>
  312. <th>S.No</th>
  313. <th>Zone</th>
  314. <th>Division</th>
  315. <th>Hall Name</th>
  316. <th>Booking Id</th>
  317. <th>Booking Date</th>
  318. <th>Event Date (Start – End)</th>
  319. <th>Refund Amount (₹)</th>
  320. <th>Booking Status</th>
  321. <th>Action</th>
  322. </tr>
  323. </thead>
  324. <tbody>
  325. <tr th:each="row, rowStat : ${cancelledBookings}">
  326. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  327. <td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
  328. <td th:text="${row['division'] != null ? row['division'] : ''}"></td>
  329. <td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
  330. <td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
  331. </td>
  332. <td class="text-center"
  333. th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
  334. </td>
  335. <td class="text-center">
  336. <span
  337. th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
  338. <span> – </span>
  339. <span
  340. th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
  341. </td>
  342. <td class="text-right"
  343. th:text="${row['refund_amount'] != null ? '₹ ' + row['refund_amount'] : '—'}">
  344. </td>
  345. <td class="text-center">
  346. <span class="badge-cancelled"
  347. th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
  348. </td>
  349. <td class="text-center">
  350. <!-- View Details: Cancelled bookings hide EB & Settlement sections -->
  351. <button class="btn-viewdetails btn-view-booking-status"
  352. th:data-booking-id="${row['booking_id']}"
  353. th:data-booking-status="${row['booking_status']}">
  354. View Details
  355. </button><br><br>
  356. <!--<button class="btn-sendmail btn-open-mail"
  357. th:data-booking-id="${row['booking_id']}"
  358. th:data-booking-status="${row['booking_status']}"
  359. th:data-transaction-id="${row['txansaction_id']}"
  360. th:data-tpsl-id="${row['tpsl_txn_id']}"
  361. th:data-transaction-date="${row['transaction_date']}"
  362. th:data-refund-amount="${row['refund_amount'] != null ? row['refund_amount'] : 0}">
  363. Send Mail
  364. </button>-->
  365. </td>
  366. <!-- Empty table state handled natively by DataTables -->
  367. </tbody>
  368. </table>
  369. </div>
  370. </div><!-- /tab-cancelled -->
  371. <!-- ══════════════════════════════════════════════════
  372. TAB 3 – Rejected Bookings
  373. Refund Amount = amount_received (full amount)
  374. No Settlement Raised Date column
  375. ══════════════════════════════════════════════════ -->
  376. <div class="tab-pane fade" id="tab-rejected" role="tabpanel"
  377. aria-labelledby="tab-rejected-lnk">
  378. <div class="table-responsive">
  379. <table
  380. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  381. id="tbl-rejected">
  382. <thead class="thead-light">
  383. <tr>
  384. <th>S.No</th>
  385. <th>Zone</th>
  386. <th>Division</th>
  387. <th>Hall Name</th>
  388. <th>Booking Id</th>
  389. <th>Booking Date</th>
  390. <th>Event Date (Start – End)</th>
  391. <th>Refund Amount (₹)</th>
  392. <th>Booking Status</th>
  393. <th>Action</th>
  394. </tr>
  395. </thead>
  396. <tbody>
  397. <tr th:each="row, rowStat : ${rejectedBookings}">
  398. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  399. <td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
  400. <td th:text="${row['division'] != null ? row['division'] : ''}"></td>
  401. <td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
  402. <td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
  403. </td>
  404. <td class="text-center"
  405. th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
  406. </td>
  407. <td class="text-center">
  408. <span
  409. th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
  410. <span> – </span>
  411. <span
  412. th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
  413. </td>
  414. <td class="text-right"
  415. th:text="${row['refund_amount'] != null ? '₹ ' + row['refund_amount'] : '—'}">
  416. </td>
  417. <td class="text-center">
  418. <span class="badge-rejected"
  419. th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
  420. </td>
  421. <td class="text-center">
  422. <!-- View Details: Rejected bookings hide EB & Settlement sections -->
  423. <button class="btn-viewdetails btn-view-booking-status"
  424. th:data-booking-id="${row['booking_id']}"
  425. th:data-booking-status="${row['booking_status']}">
  426. View Details
  427. </button><br><br>
  428. <!--<button class="btn-sendmail btn-open-mail"
  429. th:data-booking-id="${row['booking_id']}"
  430. th:data-booking-status="${row['booking_status']}"
  431. th:data-transaction-id="${row['txansaction_id']}"
  432. th:data-tpsl-id="${row['tpsl_txn_id']}"
  433. th:data-transaction-date="${row['transaction_date']}"
  434. th:data-refund-amount="${row['refund_amount'] != null ? row['refund_amount'] : 0}">
  435. Send Mail
  436. </button>-->
  437. </td>
  438. <!-- Empty table state handled natively by DataTables -->
  439. </tbody>
  440. </table>
  441. </div>
  442. </div><!-- /tab-rejected -->
  443. <!-- ══════════════════════════════════════════════════
  444. TAB 4 – Mail Sent Bookings
  445. ══════════════════════════════════════════════════ -->
  446. <div class="tab-pane fade" id="tab-mailsent" role="tabpanel"
  447. aria-labelledby="tab-mailsent-lnk">
  448. <div class="table-responsive">
  449. <table
  450. class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
  451. id="tbl-mailsent">
  452. <thead class="thead-light">
  453. <tr>
  454. <th>S.No</th>
  455. <th>Zone</th>
  456. <th>Division</th>
  457. <th>Hall Name</th>
  458. <th>Booking Id</th>
  459. <th>Booking Date</th>
  460. <th>Event Date (Start – End)</th>
  461. <th>Booking Status</th>
  462. <th>Transaction ID</th>
  463. <th>TPSL ID</th>
  464. <th>Mail Sent Date</th>
  465. <th>Action</th>
  466. </tr>
  467. </thead>
  468. <tbody>
  469. <tr th:each="row, rowStat : ${mailSentBookings}">
  470. <td class="text-center" th:text="${rowStat.index + 1}"></td>
  471. <td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
  472. <td th:text="${row['division'] != null ? row['division'] : ''}"></td>
  473. <td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
  474. <td class="text-center"
  475. th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
  476. </td>
  477. <td class="text-center"
  478. th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
  479. </td>
  480. <td class="text-center">
  481. <span
  482. th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
  483. <span> – </span>
  484. <span
  485. th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
  486. </td>
  487. <td class="text-center">
  488. <span
  489. th:class="${row['booking_status'] == 'CANCELED' || row['booking_status'] == 'CANCELLED' ? 'badge-cancelled' : (row['booking_status'] == 'REJECTED' ? 'badge-rejected' : (row['booking_status'] == 'APPROVED' ? 'badge-approved' : 'badge-other'))}"
  490. th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
  491. </td>
  492. <td class="text-center"
  493. th:text="${row['txansaction_id'] != null ? row['txansaction_id'] : ''}">
  494. </td>
  495. <td class="text-center"
  496. th:text="${row['tpsl_txn_id'] != null ? row['tpsl_txn_id'] : ''}">
  497. </td>
  498. <td class="text-center"
  499. th:text="${row['mail_sent_date'] != null ? row['mail_sent_date'] : ''}">
  500. </td>
  501. <td class="text-center">
  502. <!-- View Details: route by booking_status (APPROVED→settlement modal, CANCELLED/REJECTED→booking modal) -->
  503. <button class="btn-viewdetails btn-view-mailsent"
  504. th:data-booking-id="${row['booking_id']}"
  505. th:data-booking-status="${row['booking_status']}"
  506. th:data-settlement-id="${row['settlement_id']}">
  507. View Details
  508. </button><br><br>
  509. <!-- Update Refund Details: opens refund update modal (calls /updateApprovedSettlementStatus) -->
  510. <!--<button class="btn-sendmail btn-update-refund"
  511. th:if="${row['booking_status'] != 'COMPLETED'}"
  512. th:data-booking-id="${row['booking_id']}"
  513. th:data-booking-status="${row['booking_status']}"
  514. th:data-settlement-id="${row['settlement_id']}">
  515. Update Refund Details
  516. </button>-->
  517. </td>
  518. <!-- Empty table state handled natively by DataTables -->
  519. </tbody>
  520. </table>
  521. </div>
  522. </div><!-- /tab-mailsent -->
  523. </div><!-- /tab-content -->
  524. </div><!-- /block-content -->
  525. </div><!-- /block -->
  526. </div><!-- /content -->
  527. </main>
  528. <!-- END Main Container -->
  529. <div class="modal fade backdrop" id="initiateSettlementForm" data-backdrop="static" tabindex="-1" role="dialog"
  530. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  531. <div class="modal-dialog modal-lg" role="document">
  532. <div class="modal-content">
  533. <form id="ownform">
  534. <div class="block block-rounded block-themed block-transparent mb-0">
  535. <div class="block-header bg-primary-dark">
  536. <h3 class="block-title" id="2mtitle">Settlement Information</h3>
  537. <div class="block-options">
  538. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  539. aria-label="Close">
  540. <i class="fa fa-fw fa-times"></i>
  541. </button>
  542. </div>
  543. </div>
  544. <div class="block-content row">
  545. <div class="col-md-12 col-lg-12 col-sm-12">
  546. <input type="hidden" class="form-control text-center" name="settlementid"
  547. id="settlementid" disabled />
  548. <div class="card-body">
  549. <table>
  550. <tr>
  551. <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
  552. </tr>
  553. <tr>
  554. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
  555. </th>
  556. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  557. id="td_userName"></td>
  558. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
  559. </th>
  560. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  561. id="td_mobileNumber"></td>
  562. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
  563. </th>
  564. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  565. id="td_usertype"></td>
  566. </tr>
  567. <tr>
  568. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
  569. </th>
  570. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  571. id="td_useraddress"></td>
  572. </tr>
  573. <input type="hidden" class="form-control text-center" name="bookingid"
  574. id="bookingid" disabled />
  575. <tr>
  576. <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
  577. </tr>
  578. <tr>
  579. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
  580. </th>
  581. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  582. id="td_hallName"></td>
  583. </tr>
  584. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
  585. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  586. id="td_halladdress"></td>
  587. </tr>
  588. <tr>
  589. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  590. Name:</th>
  591. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  592. id="td_caretakername"></td>
  593. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
  594. Mobile Number:</th>
  595. <td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  596. id="td_caretakermobileNumber"></td>
  597. </tr>
  598. </table>
  599. </div>
  600. </div>
  601. <div id="ebDetailsSection" class="col-md-12 col-lg-12 col-sm-12">
  602. <input type="hidden" class="form-control text-center" name="settlementid"
  603. id="settlementid" disabled />
  604. <div class="card-body">
  605. <table>
  606. <tr>
  607. <th colspan="4" style="background-color: #f2f2f2;">Booking
  608. Details (Booking Id:-<span id="booking_id"
  609. style="color:blue"></span>)</th>
  610. </tr>
  611. <tr>
  612. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
  613. </th>
  614. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  615. id="td_bookingDate"></td>
  616. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  617. Amount:</th>
  618. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  619. id="td_depositeAmount"></td>
  620. </tr>
  621. <tr>
  622. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
  623. </th>
  624. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  625. id="td_startDate"></td>
  626. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
  627. </th>
  628. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  629. id="td_hallAmount"></td>
  630. </tr>
  631. <tr>
  632. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
  633. Date:</th>
  634. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  635. id="td_endDate"></td>
  636. <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
  637. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  638. id="td_gst"></td>
  639. </tr>
  640. <tr>
  641. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
  642. </th>
  643. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  644. id="td_startingSlot"></td>
  645. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
  646. </th>
  647. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  648. id="td_totalAmount"></td>
  649. </tr>
  650. <tr>
  651. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
  652. </th>
  653. <td colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  654. id="td_endingSlot"></td>
  655. </tr>
  656. </table>
  657. </div>
  658. </div>
  659. <div class="col-md-12 col-lg-12 col-sm-12" id="ebDetailsSection">
  660. <div class="card-body">
  661. <table>
  662. <tr>
  663. <th colspan="6" style="background-color: #f2f2f2;">EB Details</th>
  664. </tr>
  665. <tr>
  666. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer
  667. Number:
  668. </th>
  669. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  670. id="td_EBNumber">
  671. </td>
  672. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
  673. Unit:
  674. </th>
  675. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  676. id="td_ebamountperunit"></td>
  677. <th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:
  678. </th>
  679. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  680. id="td_mfDtUnit"></td>
  681. </tr>
  682. <tr>
  683. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:
  684. </th>
  685. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  686. id="td_startingReading"></td>
  687. <th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
  688. </th>
  689. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  690. id="td_endingReading"></td>
  691. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
  692. </th>
  693. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  694. id="td_usedunit"></td>
  695. </tr>
  696. <tr>
  697. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  698. <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  699. id="td_electricityamount"></td>
  700. </tr>
  701. </table>
  702. </div>
  703. </div>
  704. <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
  705. <input type="hidden" class="form-control text-center" name="bookingid"
  706. id="bookingid" disabled />
  707. <div class="card-body">
  708. <table>
  709. <tr>
  710. <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
  711. Details</th>
  712. </tr>
  713. <tr>
  714. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  715. ID:</th>
  716. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  717. id="td_transactionId"></td>
  718. </tr>
  719. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
  720. </th>
  721. <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  722. id="td_payamountReceived"></td>
  723. </tr>
  724. <tr>
  725. <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
  726. Status:</th>
  727. <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
  728. id="td_paymentStatus"></td>
  729. </tr>
  730. </table>
  731. </div>
  732. </div>
  733. <div id="damageDetails" style="margin-bottom: -17px;"></div>
  734. <div id="amountRefundSection" class="col-md-12 col-lg-12 col-sm-12">
  735. <div class="card-body">
  736. <table>
  737. <tr>
  738. <th colspan="2" style="background-color: #f2f2f2;font-weight: normal">
  739. Amount to be Refunded</th>
  740. </tr>
  741. <tr>
  742. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
  743. Amount:</th>
  744. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  745. id="td_depositeamountforrefund">0</td>
  746. </tr>
  747. <tr>
  748. <th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
  749. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  750. id="td_ebAmount"></td>
  751. </tr>
  752. <tr>
  753. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage Amount:
  754. </th>
  755. <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
  756. id="td_damage"></td>
  757. </tr>
  758. <tr id="pendingcolumn">
  759. <th id="th_settel_label"
  760. style="padding: 0.45rem 0.45rem;font-weight: normal">Collected
  761. Amount:</th>
  762. <td class="fw-semibold amount-cell"
  763. style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">
  764. 0</td>
  765. </tr>
  766. <tr>
  767. <th style="padding: 0.45rem 0.45rem;font-weight: normal">Actual
  768. refundable Amount:</th>
  769. <td class="fw-semibold amount-cell"
  770. style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
  771. </td>
  772. </tr>
  773. </table>
  774. </div>
  775. </div>
  776. <!-- DD detail -->
  777. <div id="challonTableContainer"></div>
  778. <div id="ddTableContainer" style=" margin-top: -16px;"></div>
  779. </div>
  780. <div class="block-content block-content-full text-end bg-body" id="mbutton2">
  781. <button type="button" class="btn btn-sm btn-alt-secondary"
  782. data-bs-dismiss="modal">Close</button>
  783. <!--<button type="submit" class="btn btn-sm btn-primary">Reject</button>-->
  784. </div>
  785. </div>
  786. </form>
  787. </div>
  788. </div>
  789. </div>
  790. <div class="modal fade" id="updateRefundModal" data-backdrop="static" tabindex="-1" role="dialog"
  791. aria-labelledby="updateRefundModalLabel" aria-hidden="true">
  792. <div class="modal-dialog modal-md" role="document">
  793. <div class="modal-content">
  794. <div class="modal-header" style="background:#1a73e8; color:#fff;">
  795. <h5 class="modal-title" id="updateRefundModalLabel">
  796. <i class="fa fa-refresh mr-2"></i> Update Refund Details
  797. </h5>
  798. <button type="button" class="close text-black" onclick="$('#updateRefundModal').modal('hide')"
  799. aria-label="Close">
  800. <span aria-hidden="true">&times;</span>
  801. </button>
  802. </div>
  803. <div class="modal-body">
  804. <div class="mb-3">
  805. <span class="font-weight-bold"></span>
  806. <span id="ur_bookingId" style="color:#1a73e8; font-weight:bold;"></span>
  807. &nbsp;&nbsp;
  808. <span class="font-weight-bold">Booking Status: </span>
  809. <span id="ur_bookingStatus" class="badge badge-secondary"
  810. style="color:black; font-weight:bold;"></span>
  811. </div>
  812. <input type="hidden" id="ur_settlementId">
  813. <!-- Refund Status Selection -->
  814. <div class="form-group">
  815. <label for="ur_status"><strong>Refund Status <span
  816. class="text-danger">*</span></strong></label>
  817. <select class="form-control" id="ur_status">
  818. <option value="">-- Select Status --</option>
  819. <option value="COMPLETED">COMPLETED</option>
  820. <!-- <option value="CLOSED">CLOSED</option> -->
  821. </select>
  822. </div>
  823. <!-- Refund Date -->
  824. <div class="form-group">
  825. <label for="ur_refundDate">
  826. <strong>Refund Date <span class="text-danger">*</span></strong>
  827. </label>
  828. <input type="date" class="form-control" id="ur_refundDate" onkeydown="return false;"
  829. onpaste="return false;" autocomplete="off" onclick="this.showPicker();" required>
  830. </div>
  831. <!-- ARN Number -->
  832. <div class="form-group">
  833. <label for="ur_arnNumber"><strong>ARN Number <span
  834. class="text-danger">*</span></strong></label>
  835. <input type="text" class="form-control" id="ur_arnNumber" placeholder="Enter ARN Number..."
  836. maxlength="15" minlength="12" pattern="[0-9]{12,15}" inputmode="numeric"
  837. oninput="this.value = this.value.replace(/\D/g, '')" required>
  838. </div>
  839. <!-- Comments -->
  840. <div class="form-group">
  841. <label for="ur_comments"><strong>Comments <span
  842. class="text-danger">*</span></strong></label>
  843. <textarea class="form-control" id="ur_comments" rows="3"
  844. placeholder="Enter comments..."></textarea>
  845. </div>
  846. </div>
  847. <div class="modal-footer">
  848. <button type="button" class="btn btn-secondary" onclick="$('#updateRefundModal').modal('hide')">
  849. Cancel
  850. </button>
  851. <button type="button" class="btn btn-primary" id="btn-submit-refund"
  852. onclick="submitRefundUpdate()">
  853. Update Refund Status
  854. </button>
  855. </div>
  856. </div>
  857. </div>
  858. </div>
  859. <div class="modal fade" id="draftMailModal" data-backdrop="static" tabindex="-1" role="dialog"
  860. aria-labelledby="draftMailModalLabel" aria-hidden="true">
  861. <div class="modal-dialog modal-lg" role="document">
  862. <div class="modal-content">
  863. <div class="modal-header" style="background:#1a73e8; color:#fff;">
  864. <h5 class="modal-title" id="draftMailModalLabel">
  865. <i class="fa fa-envelope mr-2"></i> Draft Mail Preview
  866. </h5>
  867. <button type="button" class="close text-black" onclick="$('#draftMailModal').modal('hide')"
  868. aria-label="Close">
  869. <span aria-hidden="true">&times;</span>
  870. </button>
  871. </div>
  872. <div class="modal-body">
  873. <!-- Mail Header Fields -->
  874. <div class="mail-header-row"><strong>From:</strong>
  875. communityhallsupport@chennaicorporation.gov.in</div>
  876. <div class="mail-header-row">
  877. <strong>To:</strong>
  878. pgsupport@mail.in.worldline-solutions.com, ranjithkumar@federal.bank.in,
  879. megha.mattamana@federal.bank.in
  880. </div>
  881. <div class="mail-header-row">
  882. <strong>CC:</strong>
  883. arohqcc@gmail.com, it@chennaicorporation.gov.in
  884. </div>
  885. <div class="mail-header-row"><strong>Sub:</strong>Refund Status Update Request
  886. &ndash; Community Hall Booking</div>
  887. <hr class="my-2">
  888. <!-- Mail Body -->
  889. <div id="draftMailBody"></div>
  890. <!-- Hidden fields to carry data through to confirm step -->
  891. <input type="hidden" id="dm_bookingId">
  892. <input type="hidden" id="dm_bookingStatus">
  893. <input type="hidden" id="dm_transactionId">
  894. <input type="hidden" id="dm_tpslId">
  895. <input type="hidden" id="dm_transactionDate">
  896. <input type="hidden" id="dm_refundAmount">
  897. </div>
  898. <div class="modal-footer">
  899. <button type="button" class="btn btn-secondary" onclick="$('#draftMailModal').modal('hide')">
  900. Close
  901. </button>
  902. <button type="button" class="btn btn-primary" id="btn-confirm-mail" onclick="confirmMailSent()">
  903. Confirm &amp; Mark as Mail Sent
  904. </button>
  905. </div>
  906. </div>
  907. </div>
  908. </div>
  909. <!-- File Preview Modal (for settlement images) -->
  910. <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-hidden="true">
  911. <div class="modal-dialog modal-lg">
  912. <div class="modal-content">
  913. <div class="modal-header">
  914. <h5 class="modal-title">File Preview</h5>
  915. <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
  916. </div>
  917. <div class="modal-body">
  918. <embed id="filePreview" src="" width="100%" height="600px">
  919. </div>
  920. <div class="modal-footer">
  921. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  922. </div>
  923. </div>
  924. </div>
  925. </div>
  926. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  927. </div>
  928. <!-- END Page Container -->
  929. <div th:replace="~{fragments/resetpassword :: div}"></div>
  930. <script th:replace="~{fragments/loginscript :: script}"></script>
  931. <script th:inline="none">
  932. // ─────────────────────────────────────────────────────────────────────
  933. // DataTable initialisation & Tab Switch Handlers
  934. // ─────────────────────────────────────────────────────────────────────
  935. $(document).ready(function () {
  936. var dtButtons = [
  937. { extend: 'pageLength', className: 'btn btn-primary' },
  938. { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-primary' },
  939. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-primary' },
  940. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-primary' },
  941. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-primary' }
  942. ];
  943. var dtOpts = {
  944. dom: "<'row mb-3'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6 text-right'f>>" +
  945. "<'row'<'col-sm-12'tr>>" +
  946. "<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-right'p>>",
  947. buttons: dtButtons,
  948. columnDefs: [{ targets: 'no-sort', orderable: false }],
  949. lengthMenu: [[10, 25, 50, 100, 200, -1], ['10 rows', '25 rows', '50 rows', '100 rows', '200 rows', 'Show all']],
  950. responsive: true,
  951. searching: true,
  952. autoWidth: false,
  953. retrieve: true
  954. };
  955. // Initialize DataTables for all 4 tabs with full Bootstrap UI design layout
  956. $('#tbl-sixmonth').DataTable(dtOpts);
  957. $('#tbl-cancelled').DataTable(dtOpts);
  958. $('#tbl-rejected').DataTable(dtOpts);
  959. $('#tbl-mailsent').DataTable(dtOpts);
  960. // Direct tab switching in jQuery to prevent Bootstrap tab issues and base href routing
  961. $('#sixMonthTab a').on('click', function (e) {
  962. e.preventDefault();
  963. var target = $(this).attr('data-target') || $(this).attr('href');
  964. if (target) {
  965. $('#sixMonthTab a').removeClass('active');
  966. $(this).addClass('active');
  967. $('#sixMonthTabContent .tab-pane').removeClass('show active');
  968. $(target).addClass('show active');
  969. if ($.fn.dataTable) {
  970. $(target).find('table').each(function () {
  971. if ($.fn.dataTable.isDataTable(this)) {
  972. $(this).DataTable().columns.adjust().responsive.recalc();
  973. }
  974. });
  975. }
  976. }
  977. });
  978. // Delegated click handlers for Action buttons
  979. $(document).on('click', '.btn-view-settlement', function () {
  980. var settlementId = $(this).attr('data-settlement-id');
  981. if (settlementId) {
  982. viewSettlement(settlementId);
  983. }
  984. });
  985. // Tab 2 & 3: Cancelled/Rejected – view booking details (hides EB & Settlement sections)
  986. $(document).on('click', '.btn-view-booking-status', function () {
  987. var bookingId = $(this).attr('data-booking-id');
  988. var bookingStatus = $(this).attr('data-booking-status');
  989. if (bookingId) {
  990. viewBookingDetailsWithStatus(bookingId, bookingStatus);
  991. }
  992. });
  993. // Tab 4: Mail Sent – route View Details by booking status
  994. $(document).on('click', '.btn-view-mailsent', function () {
  995. var bookingId = $(this).attr('data-booking-id');
  996. var bookingStatus = $(this).attr('data-booking-status');
  997. var settlementId = $(this).attr('data-settlement-id');
  998. if (bookingStatus === 'APPROVED') {
  999. // APPROVED → show full settlement modal
  1000. if (settlementId) {
  1001. viewSettlement(settlementId);
  1002. } else {
  1003. viewBookingDetailsWithStatus(bookingId, bookingStatus);
  1004. }
  1005. } else {
  1006. // CANCELLED/REJECTED → booking modal hiding EB & Settlement
  1007. viewBookingDetailsWithStatus(bookingId, bookingStatus);
  1008. }
  1009. });
  1010. // Tab 4: Mail Sent – Update Refund Details button
  1011. $(document).on('click', '.btn-update-refund', function () {
  1012. var bookingId = $(this).attr('data-booking-id');
  1013. var bookingStatus = $(this).attr('data-booking-status');
  1014. var settlementId = $(this).attr('data-settlement-id');
  1015. var today = new Date().toISOString().split('T')[0];
  1016. document.getElementById('ur_refundDate').setAttribute('max', today);
  1017. openUpdateRefundModal(bookingId, bookingStatus, settlementId);
  1018. });
  1019. $(document).on('click', '.btn-open-mail', function () {
  1020. var bookingId = $(this).attr('data-booking-id');
  1021. var bookingStatus = $(this).attr('data-booking-status');
  1022. var transactionId = $(this).attr('data-transaction-id');
  1023. var tpslId = $(this).attr('data-tpsl-id');
  1024. var transactionDate = $(this).attr('data-transaction-date');
  1025. var refundAmount = $(this).attr('data-refund-amount');
  1026. openSendMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount);
  1027. });
  1028. });
  1029. function viewSettlement(settlementId) {
  1030. if (!settlementId || settlementId === 0) {
  1031. Swal.fire('Warning', 'Invalid Settlement ID.', 'warning');
  1032. return;
  1033. }
  1034. $.ajax({
  1035. type: 'GET',
  1036. url: '/communityhall/api/officer/getSettlementList',
  1037. data: { settlementsid: settlementId },
  1038. success: function (data) {
  1039. // populateSettlementModal(data);
  1040. showSettlementInfo(data, false);
  1041. showDamageDetails(data);
  1042. // settlementModal is not defined; the modal is initiateSettlementForm
  1043. },
  1044. error: function () {
  1045. Swal.fire('Error', 'Failed to fetch settlement details.', 'error');
  1046. }
  1047. });
  1048. }
  1049. // showSettlementInfo: populates the settlement/booking modal.
  1050. // hideEbAndSettlement = true → hides EB Details and Settlement Details (for Cancelled/Rejected).
  1051. function showSettlementInfo(list, hideEbAndSettlement) {
  1052. $('#initiateSettlementForm').modal({
  1053. backdrop: 'static',
  1054. keyboard: false
  1055. });
  1056. $('#initiateSettlementForm').modal('show');
  1057. // Safely set settlement ID (null for cancelled/rejected bookings)
  1058. if (list.settlement && list.settlement.settlementId) {
  1059. document.getElementById("settlementid").value = list.settlement.settlementId;
  1060. } else {
  1061. document.getElementById("settlementid").value = '';
  1062. }
  1063. document.getElementById("td_userName").innerHTML = list.users.name;
  1064. document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
  1065. document.getElementById("td_usertype").innerHTML = list.users.usertype;
  1066. var userDetails = list.users;
  1067. var userDetailsString =
  1068. userDetails.doorNo + ", " +
  1069. userDetails.street + ", " +
  1070. userDetails.area + ", " +
  1071. userDetails.location + " ,Chennai- " +
  1072. userDetails.pinCode;
  1073. document.getElementById("td_useraddress").innerHTML = userDetailsString;
  1074. document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
  1075. var hallDetails = list.hallDetails;
  1076. var hallDetailsString =
  1077. hallDetails.doorNo + ", " +
  1078. hallDetails.street + ", " +
  1079. hallDetails.area + ", " +
  1080. hallDetails.city + "- " +
  1081. hallDetails.pinCode;
  1082. document.getElementById("td_halladdress").innerHTML = hallDetailsString;
  1083. document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
  1084. document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
  1085. document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
  1086. document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  1087. document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
  1088. // Calculate GST and total amount
  1089. var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst / 100)).toFixed(2);
  1090. var totalAmount = parseFloat(list.amountReceived).toFixed(2);
  1091. document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
  1092. document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
  1093. document.getElementById("td_startDate").innerHTML = list.startDate;
  1094. document.getElementById("td_endDate").innerHTML = list.endDate;
  1095. document.getElementById("booking_id").innerHTML = list.bookingId;
  1096. function getTimeSlot(slotValue) {
  1097. var timeSlot;
  1098. var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
  1099. if (trimmedSlotValue === '1') {
  1100. timeSlot = 'Morning';
  1101. } else if (trimmedSlotValue === '2') {
  1102. timeSlot = 'Evening';
  1103. } else {
  1104. timeSlot = 'Unknown';
  1105. }
  1106. return timeSlot;
  1107. }
  1108. document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
  1109. document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
  1110. // EB Details fields – safe null access (cancelled/rejected bookings may have no ebDetails)
  1111. var hasEb = list.ebDetails != null;
  1112. document.getElementById("td_EBNumber").innerHTML = list.hallDetails ? list.hallDetails.ebNumber : 'N/A';
  1113. document.getElementById("td_startingReading").innerHTML = hasEb ? list.ebDetails.startingReading : 'N/A';
  1114. document.getElementById("td_endingReading").innerHTML = hasEb ? list.ebDetails.endingReading : 'N/A';
  1115. document.getElementById("td_usedunit").innerHTML = hasEb ? list.ebDetails.usedUnit : 'N/A';
  1116. document.getElementById("td_ebamountperunit").innerHTML = list.hallDetails ? '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2) : 'N/A';
  1117. document.getElementById("td_mfDtUnit").innerHTML = (list.hallDetails && list.hallDetails.mfDtUnit != null) ? '₹ ' + parseFloat(list.hallDetails.mfDtUnit).toFixed(2) : 'N/A';
  1118. document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
  1119. document.getElementById("td_electricityamount").innerHTML = hasEb ? '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2) : 'N/A';
  1120. document.getElementById("td_ebAmount").innerHTML = hasEb ? '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2) : 'N/A';
  1121. // Settlement damage – null safe
  1122. var hasSett = list.settlement != null;
  1123. document.getElementById("td_damage").innerHTML = hasSett ? '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2) : 'N/A';
  1124. document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
  1125. // Check if amountReceived is not null, otherwise set to "NA"
  1126. document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
  1127. // Check if paymentStatus is not null, otherwise set to "NA"
  1128. document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
  1129. // Hide or show EB Details and Settlement sections based on booking status
  1130. if (hideEbAndSettlement) {
  1131. // Use ID-based hide for the EB Details section and refund section
  1132. $('#ebDetailsSection').hide();
  1133. $('#amountRefundSection').hide();
  1134. $('#damageDetails').hide();
  1135. $('#challonTableContainer').hide();
  1136. $('#ddTableContainer').hide();
  1137. } else {
  1138. // Restore visibility for APPROVED bookings (full settlement view)
  1139. $('#ebDetailsSection').show();
  1140. $('#amountRefundSection').show();
  1141. $('#damageDetails').show();
  1142. var eb_amt = parseFloat(list.ebDetails ? list.ebDetails.ebAmount : 0).toFixed(2);
  1143. var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
  1144. var tem_total = (deposit_amt - eb_amt).toFixed(2);
  1145. $("#td_settel_amt").html(tem_total);
  1146. }
  1147. }
  1148. function showDamageDetails(data) {
  1149. var damageFieldContainer = $('#damageDetails');
  1150. damageFieldContainer.empty();
  1151. // Create a div for table responsiveness
  1152. var tableResponsiveDiv = $('<div>').addClass('table-responsive');
  1153. // Create table with similar classes and styles to the modal table
  1154. var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '97%', 'border-color': 'black', 'border-top-color': 'white' });
  1155. var thead = $('<thead>').addClass('thead-light');
  1156. var tbody = $('<tbody>');
  1157. // Create Damage Details header row
  1158. var headerRow = $('<tr>').appendTo(thead);
  1159. $('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
  1160. 'padding': '0.45rem 0.45rem',
  1161. 'background-color': '#f2f2f2',
  1162. 'font-weight': 'bold',
  1163. 'color': 'black',
  1164. }).appendTo(headerRow);
  1165. // Create table header row
  1166. var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1167. $('<th>').text('S.No').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1168. $('<th>').text('Asset Name').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1169. $('<th>').text('Damage Img').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1170. $('<th>').text('Cost').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1171. $('<th>').text('Qty').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1172. $('<th>').text('Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
  1173. var totalAmount = 0;
  1174. // Check if damageList is empty
  1175. if (data.damageList.length === 0) {
  1176. var row = $('<tr>').appendTo(tbody);
  1177. $('<td>').attr('colspan', '6').text('No Damaged Items').css({
  1178. 'padding': '0.45rem 0.45rem',
  1179. 'text-align': 'center',
  1180. 'font-weight': 'bold',
  1181. 'background-color': '#f2f2f2'
  1182. }).appendTo(row);
  1183. } else {
  1184. $.each(data.damageList, function (index, detail) {
  1185. var row = $('<tr>').appendTo(tbody);
  1186. $('<td>').text(index + 1).css({
  1187. 'padding': '0.45rem 0.45rem',
  1188. 'text-align': 'center'
  1189. }).appendTo(row);
  1190. $('<td>').text(detail.assetName).css({
  1191. 'padding': '0.45rem 0.45rem',
  1192. 'text-align': 'center'
  1193. }).appendTo(row);
  1194. // var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
  1195. // showDamageImage(detail.damageImageUrl);
  1196. // });
  1197. // $('<td>').css({
  1198. // 'padding': '0.45rem 0.45rem',
  1199. // 'text-align': 'center'
  1200. // }).append(viewLink).appendTo(row);
  1201. var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
  1202. $('<td>').text('₹ ' + assetamt).css({
  1203. 'padding': '0.45rem 0.45rem',
  1204. 'text-align': 'center'
  1205. }).appendTo(row);
  1206. $('<td>').text(detail.quantity).css({
  1207. 'padding': '0.45rem 0.45rem',
  1208. 'text-align': 'center'
  1209. }).appendTo(row);
  1210. var amount = detail.assetAmount;
  1211. totalAmount += amount;
  1212. $('<td>').text('₹ ' + amount.toFixed(2)).css({
  1213. 'padding': '0.45rem 0.45rem',
  1214. 'text-align': 'right'
  1215. }).appendTo(row);
  1216. });
  1217. // Add row for total amount
  1218. var totalRow = $('<tr>').appendTo(tbody);
  1219. $('<td>').attr('colspan', '5').text('Total Amount').css({
  1220. 'padding': '0.45rem 0.45rem',
  1221. 'font-weight': 'bold',
  1222. 'background-color': '#f2f2f2'
  1223. }).appendTo(totalRow);
  1224. $('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
  1225. 'padding': '0.45rem 0.45rem',
  1226. 'text-align': 'right'
  1227. }).appendTo(totalRow);
  1228. $("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
  1229. }
  1230. // Append the table elements to the container div
  1231. table.append(thead, tbody);
  1232. tableResponsiveDiv.append(table);
  1233. damageFieldContainer.append(tableResponsiveDiv);
  1234. var temp_total = parseFloat($("#td_settel_amt").html());
  1235. var settleAmount = temp_total - totalAmount;
  1236. //console.log("temp_total=",temp_total);
  1237. //console.log("totalAmount=",totalAmount);
  1238. if (settleAmount < 0) {
  1239. $("#td_settel_amt").html(0.00);
  1240. $("#pendingcolumn").show();
  1241. $("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
  1242. $("#td_pending_amt").css("color", "red");
  1243. } else {
  1244. $("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
  1245. $("#pendingcolumn").hide();
  1246. $("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
  1247. }
  1248. if (data.settlement.challonamount) {
  1249. // Show the table containing ddnumber and challan image
  1250. var challonTableContainer = $("#challonTableContainer"); // Assuming you have a div with this ID for the table
  1251. challonTableContainer.empty(); // Clear any existing content
  1252. challonTableContainer.show(); // Ensure the container is visible
  1253. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1254. // Create table with similar classes and styles to the modal table
  1255. var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '100%', 'border-color': 'black', 'border-top-color': 'white' });
  1256. var thead = $('<thead>').addClass('thead-light');
  1257. var tbody = $('<tbody>');
  1258. var headerRow = $('<tr>').appendTo(thead);
  1259. $('<th>').attr('colspan', '6').text('Challan Details').css({
  1260. 'padding': '0.45rem 0.45rem',
  1261. 'background-color': '#f2f2f2',
  1262. 'font-weight': 'bold',
  1263. 'color': 'black',
  1264. }).appendTo(headerRow);
  1265. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1266. //$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1267. //$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
  1268. $('<th>').text('Challan Number').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1269. $('<th>').text('Challan Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1270. $('<th>').text('Challan Image').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1271. var row = $('<tr>').appendTo(tbody);
  1272. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1273. //$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1274. $('<td>').text(data.settlement.challonnumber).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
  1275. $('<td>').text(data.settlement.challonamount).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
  1276. //$('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
  1277. // var challanImgLink = $('<a>').attr('href', 'javascript:void(0)').text('View Image').on('click', function () {
  1278. // showchallonimage(data.settlement.challon);
  1279. // });
  1280. // $('<td>').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).append(challanImgLink).appendTo(row);
  1281. table.append(thead, tbody);
  1282. challonTableContainer.append(table);
  1283. // Hide all buttons
  1284. $("#generatechallon").hide();
  1285. $("#uploadchallon").hide();
  1286. $("#approvebutton").prop("disabled", false);
  1287. } else {
  1288. // Hide the ddTableContainer if ddnumber is not present
  1289. $("#challonTableContainer").hide();
  1290. }
  1291. if (data.settlement.ddnumber) {
  1292. // Show the table containing ddnumber and challan image
  1293. var ddTableContainer = $("#ddTableContainer"); // Assuming you have a div with this ID for the table
  1294. ddTableContainer.empty(); // Clear any existing content
  1295. ddTableContainer.show(); // Ensure the container is visible
  1296. var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
  1297. // Create table with similar classes and styles to the modal table
  1298. var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '100%', 'border-color': 'black', 'border-top-color': 'white' });
  1299. var thead = $('<thead>').addClass('thead-light');
  1300. var tbody = $('<tbody>');
  1301. var headerRow = $('<tr>').appendTo(thead);
  1302. $('<th>').attr('colspan', '6').text('DD Details').css({
  1303. 'padding': '0.45rem 0.45rem',
  1304. 'background-color': '#f2f2f2',
  1305. 'font-weight': 'bold',
  1306. 'color': 'black',
  1307. }).appendTo(headerRow);
  1308. var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
  1309. $('<th>').text('DD Number').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1310. $('<th>').text('DD Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1311. $('<th>').text('DD Date').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
  1312. var row = $('<tr>').appendTo(tbody);
  1313. $('<td>').text(data.settlement.ddnumber).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
  1314. $('<td>').text(data.settlement.ddamount).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
  1315. $('<td>').text(data.settlement.dddate).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
  1316. table.append(thead, tbody);
  1317. ddTableContainer.append(table);
  1318. // Hide all buttons
  1319. $("#generatechallon").hide();
  1320. $("#uploadchallon").hide();
  1321. $("#approvebutton").prop("disabled", false);
  1322. } else {
  1323. // Hide the ddTableContainer if ddnumber is not present
  1324. $("#ddTableContainer").hide();
  1325. }
  1326. }
  1327. function populateSettlementModal(d) {
  1328. var html = '<div class="col-12">';
  1329. html += '<table class="table table-sm table-bordered">';
  1330. html += '<tr><th colspan="4" style="background:#f2f2f2;">User Details</th></tr>';
  1331. html += '<tr><th style="font-weight:normal">User Name:</th><td>' + (d.users ? d.users.name : '') + '</td>';
  1332. html += '<th style="font-weight:normal">Mobile No:</th><td>' + (d.users ? d.users.mobileNo : '') + '</td></tr>';
  1333. html += '<tr><th style="font-weight:normal">User Type:</th><td colspan="3">' + (d.users ? d.users.usertype : '') + '</td></tr>';
  1334. html += '<tr><th colspan="4" style="background:#f2f2f2;">Hall Details</th></tr>';
  1335. html += '<tr><th style="font-weight:normal">Hall Name:</th><td colspan="3">' + (d.hallDetails ? d.hallDetails.hallName : '') + '</td></tr>';
  1336. html += '<tr><th colspan="4" style="background:#f2f2f2;">Booking Details (ID: ' + d.bookingId + ')</th></tr>';
  1337. html += '<tr><th style="font-weight:normal">Booking Date:</th><td>' + d.bookingDate + '</td>';
  1338. html += '<th style="font-weight:normal">Deposit Amount:</th><td>₹ ' + parseFloat(d.depositAmount).toFixed(2) + '</td></tr>';
  1339. html += '<tr><th style="font-weight:normal">Start Date:</th><td>' + d.startDate + '</td>';
  1340. html += '<th style="font-weight:normal">End Date:</th><td>' + d.endDate + '</td></tr>';
  1341. // Settlement
  1342. if (d.settlement) {
  1343. html += '<tr><th colspan="4" style="background:#f2f2f2;">Settlement Details</th></tr>';
  1344. html += '<tr><th style="font-weight:normal">Refunded Amount:</th><td>₹ ' + parseFloat(d.settlement.refundedAmount || 0).toFixed(2) + '</td>';
  1345. html += '<th style="font-weight:normal">Damage Amount:</th><td>₹ ' + parseFloat(d.settlement.damageAmount || 0).toFixed(2) + '</td></tr>';
  1346. } else {
  1347. html += '<tr><td colspan="4" class="text-danger text-center font-italic">Settlement Not Initiated</td></tr>';
  1348. }
  1349. html += '</table></div>';
  1350. $('#settlementModalBody').html(html);
  1351. }
  1352. // viewBookingDetailsWithStatus: used by Cancelled, Rejected tabs and Mail Sent (non-APPROVED)
  1353. // When status is CANCELLED or REJECTED, hides EB Details and Settlement Details in the modal.
  1354. function viewBookingDetailsWithStatus(bookingId, bookingStatus) {
  1355. if (!bookingId || bookingId === 0) {
  1356. Swal.fire('Warning', 'Invalid Booking ID.', 'warning');
  1357. return;
  1358. }
  1359. var isCancelledOrRejected = (bookingStatus === 'CANCELLED' || bookingStatus === 'CANCELED' || bookingStatus === 'REJECTED');
  1360. $.ajax({
  1361. type: 'GET',
  1362. url: '/communityhall/api/officer/getBookingDetails',
  1363. data: { bookingsId: bookingId },
  1364. success: function (data) {
  1365. showSettlementInfo(data, isCancelledOrRejected);
  1366. $('#initiateSettlementForm').modal('show');
  1367. },
  1368. error: function () {
  1369. Swal.fire('Error', 'Failed to fetch booking details.', 'error');
  1370. }
  1371. });
  1372. }
  1373. // openUpdateRefundModal: opens the refund details update modal for Mail Sent tab.
  1374. // For APPROVED bookings → settlementId is used as identifier.
  1375. // For CANCELLED/REJECTED bookings → bookingId is used as identifier.
  1376. function openUpdateRefundModal(bookingId, bookingStatus, settlementId) {
  1377. var isApproved = (bookingStatus === 'APPROVED');
  1378. // For approved bookings, a settlementId is expected; warn but allow for cancelled/rejected.
  1379. if (isApproved && !settlementId) {
  1380. Swal.fire('Info', 'No settlement record found for this approved booking.', 'info');
  1381. return;
  1382. }
  1383. // Display ID info in modal header
  1384. var displayId = isApproved ? ('Settlement ID: ' + settlementId) : ('Booking ID: ' + bookingId);
  1385. document.getElementById('ur_bookingId').textContent = displayId;
  1386. document.getElementById('ur_bookingStatus').textContent = bookingStatus || '';
  1387. document.getElementById('ur_settlementId').value = settlementId || '';
  1388. // Store bookingId and bookingStatus for submit
  1389. document.getElementById('ur_bookingId').setAttribute('data-booking-id', bookingId || '');
  1390. document.getElementById('ur_bookingId').setAttribute('data-booking-status', bookingStatus || '');
  1391. document.getElementById('ur_status').value = '';
  1392. document.getElementById('ur_arnNumber').value = '';
  1393. document.getElementById('ur_comments').value = '';
  1394. $('#updateRefundModal').modal('show');
  1395. }
  1396. // submitRefundUpdate: posts to /updateRefundDetails with the correct ID depending on booking status
  1397. function submitRefundUpdate() {
  1398. var today = new Date().toISOString().split('T')[0];
  1399. var settlementId = document.getElementById('ur_settlementId').value;
  1400. var status = document.getElementById('ur_status').value;
  1401. var refundDate = document.getElementById('ur_refundDate').value;
  1402. var arnNumber = document.getElementById('ur_arnNumber').value.trim();
  1403. var comments = document.getElementById('ur_comments').value.trim();
  1404. var bookingId = document.getElementById('ur_bookingId').getAttribute('data-booking-id');
  1405. var bookingStatus = document.getElementById('ur_bookingId').getAttribute('data-booking-status');
  1406. if (!/^\d{12,15}$/.test(arnNumber)) {
  1407. alert("ARN Number must contain 12 to 15 digits.");
  1408. $('#ur_arnNumber').focus();
  1409. return false;
  1410. }
  1411. if (!status) {
  1412. Swal.fire('Validation', 'Please select a Refund Status.', 'warning');
  1413. return;
  1414. }
  1415. if (!refundDate) {
  1416. Swal.fire('Validation', 'Please select the Refund Date.', 'warning');
  1417. $('#ur_refundDate').focus();
  1418. return;
  1419. }
  1420. if (refundDate > today) {
  1421. Swal.fire('Validation', 'Refund Date cannot be a future date.', 'warning');
  1422. $('#ur_refundDate').focus();
  1423. return;
  1424. }
  1425. if (!arnNumber) {
  1426. Swal.fire('Validation', 'Please enter the ARN Number.', 'warning');
  1427. return;
  1428. }
  1429. if (!comments) {
  1430. Swal.fire('Validation', 'Please enter comments.', 'warning');
  1431. return;
  1432. }
  1433. var btn = document.getElementById('btn-submit-refund');
  1434. btn.disabled = true;
  1435. btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>Processing...';
  1436. $.ajax({
  1437. type: 'POST',
  1438. url: '/communityhall/headquarters/sixmonthold-transactions/updateRefundDetails',
  1439. data: {
  1440. bookingId: bookingId,
  1441. settlementId: settlementId || '',
  1442. bookingStatus: bookingStatus,
  1443. refundStatus: status,
  1444. refundDate: refundDate,
  1445. arnNumber: arnNumber,
  1446. comments: comments
  1447. },
  1448. success: function (resp) {
  1449. $('#updateRefundModal').modal('hide');
  1450. btn.disabled = false;
  1451. btn.innerHTML = '<i class="fa fa-check mr-1"></i>Update Refund Status';
  1452. if (resp.status === 'success') {
  1453. Swal.fire({
  1454. icon: 'success',
  1455. title: 'Refund Details Updated!',
  1456. text: 'Booking ID ' + bookingId + ' has been updated successfully.',
  1457. confirmButtonColor: '#1a73e8'
  1458. }).then(function () {
  1459. location.reload();
  1460. });
  1461. } else {
  1462. Swal.fire('Error', resp.message || 'An error occurred.', 'error');
  1463. }
  1464. },
  1465. error: function (xhr) {
  1466. btn.disabled = false;
  1467. btn.innerHTML = '<i class="fa fa-check mr-1"></i>Update Refund Status';
  1468. var errMsg = 'Failed to update refund details. Please try again.';
  1469. try {
  1470. var errResp = JSON.parse(xhr.responseText);
  1471. if (errResp && errResp.message) errMsg = errResp.message;
  1472. } catch (e) { }
  1473. Swal.fire('Error', errMsg, 'error');
  1474. }
  1475. });
  1476. }
  1477. function populateBookingModal(d) {
  1478. var html = '<div class="col-12">';
  1479. html += '<table class="table table-sm table-bordered">';
  1480. html += '<tr><th colspan="4" style="background:#f2f2f2;">User Details</th></tr>';
  1481. html += '<tr><th style="font-weight:normal">User Name:</th><td>' + (d.users ? d.users.name : '') + '</td>';
  1482. html += '<th style="font-weight:normal">Mobile No:</th><td>' + (d.users ? d.users.mobileNo : '') + '</td></tr>';
  1483. html += '<tr><th style="font-weight:normal">User Type:</th><td colspan="3">' + (d.users ? d.users.usertype : '') + '</td></tr>';
  1484. html += '<tr><th colspan="4" style="background:#f2f2f2;">Hall Details</th></tr>';
  1485. html += '<tr><th style="font-weight:normal">Hall Name:</th><td colspan="3">' + (d.hallDetails ? d.hallDetails.hallName : '') + '</td></tr>';
  1486. html += '<tr><th colspan="4" style="background:#f2f2f2;">Booking Details (ID: ' + d.bookingId + ')</th></tr>';
  1487. html += '<tr><th style="font-weight:normal">Booking Date:</th><td>' + d.bookingDate + '</td>';
  1488. html += '<th style="font-weight:normal">Booking Status:</th><td>' + d.bookingStatus + '</td></tr>';
  1489. html += '<tr><th style="font-weight:normal">Start Date:</th><td>' + d.startDate + '</td>';
  1490. html += '<th style="font-weight:normal">End Date:</th><td>' + d.endDate + '</td></tr>';
  1491. html += '<tr><th style="font-weight:normal">Deposit Amount:</th><td>₹ ' + parseFloat(d.depositAmount).toFixed(2) + '</td>';
  1492. html += '<th style="font-weight:normal">Total Amount:</th><td>₹ ' + parseFloat(d.amountReceived).toFixed(2) + '</td></tr>';
  1493. // Payment
  1494. if (d.payments) {
  1495. html += '<tr><th colspan="4" style="background:#f2f2f2;">Payment Details</th></tr>';
  1496. html += '<tr><th style="font-weight:normal">Transaction ID:</th><td colspan="3">' + d.payments.transactionId + '</td></tr>';
  1497. html += '<tr><th style="font-weight:normal">Amount Received:</th><td>₹ ' + d.payments.amountReceived + '</td>';
  1498. html += '<th style="font-weight:normal">Payment Status:</th><td>' + d.payments.paymentStatus + '</td></tr>';
  1499. }
  1500. html += '</table></div>';
  1501. $('#bookingModalBody').html(html);
  1502. }
  1503. // ─────────────────────────────────────────────────────────────────────
  1504. // Send Mail Flow
  1505. // ─────────────────────────────────────────────────────────────────────
  1506. function openSendMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount) {
  1507. Swal.fire({
  1508. title: 'Send Refund Mail?',
  1509. html: 'This will send a refund status request mail for Booking ID <strong>' + bookingId + '</strong>.<br>Do you want to proceed?',
  1510. icon: 'question',
  1511. showCancelButton: true,
  1512. confirmButtonText: 'Yes, Show Draft',
  1513. cancelButtonText: 'Cancel',
  1514. confirmButtonColor: '#1a73e8'
  1515. }).then(function (result) {
  1516. if (result.isConfirmed) {
  1517. showDraftMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount);
  1518. }
  1519. });
  1520. }
  1521. function showDraftMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount) {
  1522. document.getElementById('dm_bookingId').value = bookingId;
  1523. document.getElementById('dm_bookingStatus').value = bookingStatus;
  1524. document.getElementById('dm_transactionId').value = transactionId || '';
  1525. document.getElementById('dm_tpslId').value = tpslId || '';
  1526. document.getElementById('dm_transactionDate').value = transactionDate || '';
  1527. document.getElementById('dm_refundAmount').value = refundAmount || 0;
  1528. var amt = parseFloat(refundAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  1529. var body = 'Hi,<br><br>';
  1530. body += 'Kindly update refund status for the below mentioned transaction made for Community Hall Booking.<br><br>';
  1531. body += '<b>Transaction Details:</b><br><br>';
  1532. body += '&nbsp;&nbsp;Booking ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: ' + bookingId + '<br>';
  1533. // body += '&nbsp;&nbsp;Booking Status &nbsp;&nbsp;&nbsp;: ' + (bookingStatus || 'N/A') + '<br>';
  1534. body += '&nbsp;&nbsp;Transaction ID &nbsp;&nbsp;&nbsp;: ' + (transactionId || 'N/A') + '<br>';
  1535. body += '&nbsp;&nbsp;TPSL ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: ' + (tpslId || 'N/A') + '<br>';
  1536. body += '&nbsp;&nbsp;Transaction Date : ' + (transactionDate || 'N/A') + '<br>';
  1537. body += '&nbsp;&nbsp;<b>Refund Amount &nbsp;&nbsp;&nbsp;: ₹ ' + amt + '</b><br><br>';
  1538. body += 'If refund was not initiated, <b>kindly initiate the refund</b> and update refund status at the earliest. ';
  1539. body += 'Make sure that no duplicate refund was processed against this transaction.<br><br>';
  1540. body += 'Regards,<br>';
  1541. body += 'Community Hall Support<br>';
  1542. body += 'Greater Chennai Corporation';
  1543. document.getElementById('draftMailBody').innerHTML = body;
  1544. $('#draftMailModal').modal('show');
  1545. }
  1546. function confirmMailSent() {
  1547. var bookingId = document.getElementById('dm_bookingId').value;
  1548. var bookingStatus = document.getElementById('dm_bookingStatus').value;
  1549. var transactionId = document.getElementById('dm_transactionId').value;
  1550. var tpslId = document.getElementById('dm_tpslId').value;
  1551. var transactionDate = document.getElementById('dm_transactionDate').value;
  1552. var refundAmount = document.getElementById('dm_refundAmount').value;
  1553. var btn = document.getElementById('btn-confirm-mail');
  1554. btn.disabled = true;
  1555. btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>Processing...';
  1556. $.ajax({
  1557. type: 'POST',
  1558. url: '/communityhall/headquarters/sixmonthold-transactions/markMailSent',
  1559. data: {
  1560. bookingId: bookingId,
  1561. bookingStatus: bookingStatus,
  1562. transactionId: transactionId,
  1563. tpslId: tpslId,
  1564. transactionDate: transactionDate,
  1565. refundAmount: refundAmount
  1566. },
  1567. success: function (resp) {
  1568. $('#draftMailModal').modal('hide');
  1569. btn.disabled = false;
  1570. btn.innerHTML = '<i class="fa fa-check mr-1"></i>Confirm &amp; Mark as Mail Sent';
  1571. if (resp.status === 'success') {
  1572. Swal.fire({
  1573. icon: 'success',
  1574. title: 'Mail Processed!',
  1575. text: 'Booking ID ' + bookingId + ' has been marked as mail sent and moved to "Mail Sent Bookings" tab.',
  1576. confirmButtonColor: '#1a73e8'
  1577. }).then(function () {
  1578. location.reload();
  1579. });
  1580. } else {
  1581. Swal.fire('Error', resp.message || 'An error occurred.', 'error');
  1582. }
  1583. },
  1584. error: function () {
  1585. btn.disabled = false;
  1586. btn.innerHTML = '<i class="fa fa-check mr-1"></i>Confirm &amp; Mark as Mail Sent';
  1587. Swal.fire('Error', 'Failed to record mail. Please try again.', 'error');
  1588. }
  1589. });
  1590. }
  1591. </script>
  1592. </body>
  1593. </html>