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.

814 lines
28 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <title>Playground Details</title>
  5. <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
  7. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8. <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  10. <style>
  11. .radio-group {
  12. display: flex;
  13. gap: 20px;
  14. margin-top: 10px;
  15. }
  16. body {
  17. background-color: #f8f9fa;
  18. }
  19. /* Remove background image from the container itself */
  20. .select2-container--default .select2-selection--multiple {
  21. padding-right: 30px;
  22. min-height: 38px;
  23. display: flex;
  24. flex-wrap: wrap;
  25. align-items: center;
  26. position: relative; /* important for the ::after */
  27. background-image: none;
  28. }
  29. /* Add the dropdown arrow via a pseudo-element */
  30. .select2-container--default .select2-selection--multiple::after {
  31. content: "";
  32. position: absolute;
  33. top: 50%;
  34. right: 8px;
  35. width: 14px;
  36. height: 14px;
  37. transform: translateY(-50%);
  38. background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  39. background-repeat: no-repeat;
  40. background-size: contain;
  41. pointer-events: none;
  42. }
  43. /* Each selected tag */
  44. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  45. display: flex;
  46. align-items: center;
  47. justify-content: space-between;
  48. padding: 5px 10px;
  49. margin: 4px 4px 0 0;
  50. background-color: #f5f5f5;
  51. border: 1px solid #ccc;
  52. border-radius: 4px;
  53. font-size: 13px;
  54. line-height: 1.4;
  55. max-width: 100%;
  56. white-space: nowrap;
  57. overflow: hidden;
  58. text-overflow: ellipsis;
  59. }
  60. /* The text inside the tag */
  61. .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  62. overflow: hidden;
  63. text-overflow: ellipsis;
  64. white-space: nowrap;
  65. flex: 1;
  66. margin-right: 8px;
  67. }
  68. /* The "X" close icon */
  69. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  70. position: static;
  71. transform: none;
  72. color: #333;
  73. font-size: 14px;
  74. font-weight: bold;
  75. cursor: pointer;
  76. background: transparent;
  77. border: none;
  78. line-height: 1;
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <div class="container mt-4">
  84. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  85. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  86. <form id="playgroundForm">
  87. <div class="card p-3">
  88. <div class="card-header">
  89. <b>Playground</b>
  90. </div>
  91. <div class="row mt-3">
  92. <div class="col-md-6 form-group">
  93. <label>Presence of Playground <span style="color: red;">*</span></label>
  94. <div class="radio-group">
  95. <input type="radio" name="hasPlayground" value="Yes"> Yes
  96. <input type="radio" name="hasPlayground" value="No"> No
  97. </div>
  98. </div>
  99. <div class="col-md-6 form-group" id="playgroundAreaGroup" style="display: none;">
  100. <label>Area of Playground (Sq. ft) <span style="color: red;">*</span></label>
  101. <input type="number" class="form-control" id="playground_area" min="0">
  102. </div>
  103. </div>
  104. <div class="row mt-3">
  105. <div class="col-md-6 form-group">
  106. <label>Presence of Court <span style="color: red;">*</span></label>
  107. <div class="radio-group">
  108. <input type="radio" name="hasCourt" value="Yes"> Yes
  109. <input type="radio" name="hasCourt" value="No"> No
  110. </div>
  111. </div>
  112. <!-- <div class="col-md-6 form-group" id="courtTypeGroup" style="display: none;">
  113. <label>Type of Court <span class="text-danger">*</span></label>
  114. <div class="custom-select-wrapper">
  115. <select id="court_type" class="form-control custom-select-style" multiple="multiple">
  116. Options will be added dynamically here
  117. </select>
  118. <i class="bi bi-caret-down-fill dropdown-icon"></i>
  119. </div>
  120. </div> -->
  121. <div class="col-md-6 form-group" id="courtTypeGroup" style="display: none;">
  122. <label>Type of Court <span style="color: red;">*</span></label>
  123. <select id="court_type" class="form-control " multiple > </select>
  124. </div>
  125. </div>
  126. <div class="row mt-3">
  127. <div class="col-md-6 form-group">
  128. <label>Inventory Items <span style="color: red;">*</span></label>
  129. <select id="inventory" class="form-control" multiple></select>
  130. </div>
  131. </div>
  132. <div class="card-footer text-center">
  133. <button type="submit" class="btn btn-primary">
  134. <i class="ik ik-save"></i> Submit
  135. </button>
  136. <button type="button" class="btn btn-secondary" id="resetBtn">
  137. <i class="ik ik-refresh-cw"></i> Reset
  138. </button>
  139. </div>
  140. </div>
  141. </form>
  142. </div>
  143. <div class="modal fade" id="editPlaygroundModal" tabindex="-1" aria-labelledby="editPlaygroundModalLabel" aria-hidden="true">
  144. <div class="modal-dialog modal-lg">
  145. <div class="modal-content">
  146. <form id="playgroundEditForm">
  147. <div class="modal-header">
  148. <h5 class="modal-title" id="editPlaygroundModalLabel">Playground Details</h5>
  149. <button type="button" class="close" data-bs-dismiss="modal"
  150. aria-label="Close"><span aria-hidden="true">&times;</span></button>
  151. </div>
  152. <div class="modal-body">
  153. <div class="row mt-3">
  154. <div class="col-md-6 form-group">
  155. <label>Presence of Playground <span style="color: red;">*</span></label>
  156. <div class="radio-group">
  157. <input type="radio" name="modalhasPlayground" value="Yes"> Yes
  158. <input type="radio" name="modalhasPlayground" value="No"> No
  159. </div>
  160. </div>
  161. <div class="col-md-6 form-group" id="modalplaygroundAreaGroup" style="display: none;">
  162. <label>Area of Playground (Sq. ft) <span style="color: red;">*</span></label>
  163. <input type="number" class="form-control" id="modalplayground_area" min="0">
  164. </div>
  165. </div>
  166. <div class="row mt-3">
  167. <div class="col-md-6 form-group">
  168. <label>Presence of Court <span style="color: red;">*</span></label>
  169. <div class="radio-group">
  170. <input type="radio" name="modalhasCourt" value="Yes"> Yes
  171. <input type="radio" name="modalhasCourt" value="No"> No
  172. </div>
  173. </div>
  174. <div class="col-md-6 form-group" id="modalcourtTypeGroup" style="display: none;">
  175. <label>Type of Court <span style="color: red;">*</span></label>
  176. <select id="modalcourt_type" class="form-control" multiple="multiple"></select>
  177. </div>
  178. </div>
  179. <div class="row mt-3">
  180. <div class="col-md-6 form-group">
  181. <label>Inventory Items <span style="color: red;">*</span></label>
  182. <select id="modalinventory" class="form-control" multiple="multiple"></select>
  183. </div>
  184. </div>
  185. </div>
  186. <div class="modal-footer">
  187. <button type="submit" class="btn btn-primary">
  188. <i class="ik ik-save"></i> Submit
  189. </button>
  190. </div>
  191. </form>
  192. </div>
  193. </div>
  194. </div>
  195. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  196. <script>
  197. $(document).ready(function () {
  198. const urlParams = new URLSearchParams(window.location.search);
  199. const schoolId = urlParams.get("schoolId");
  200. document.getElementById('playground_area').addEventListener('input', function () {
  201. this.value = this.value.replace(/[^0-9]/g, '');
  202. if (parseInt(this.value) < 0) {
  203. this.value = '';
  204. }
  205. });
  206. console.log("Playground form JS ready.");
  207. /*$('#court_type, #inventory').select2({width: '100%'});
  208. // Load dropdown data
  209. $.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
  210. const $court = $('#court_type').empty();
  211. $court.append('<option value="">Select Type of court </option>');
  212. response.data.forEach(item => {
  213. $court.append(`<option value="${item.court_id}">${item.court_type}</option>`);
  214. });
  215. });*/
  216. $.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
  217. const $court = $('#court_type');
  218. $court.empty(); // Clear existing options
  219. response.data.forEach(item => {
  220. $court.append(`<option value="${item.court_id}">${item.court_type}</option>`);
  221. });
  222. // Destroy any previous select2 instance if reinitializing
  223. if ($court.hasClass("select2-hidden-accessible")) {
  224. $court.select2('destroy');
  225. }
  226. $court.select2({
  227. placeholder: "Select Type of Court",
  228. width: '100%',
  229. minimumResultsForSearch: Infinity, // disables typing/search box
  230. closeOnSelect: false // allow multiple selection
  231. });
  232. });
  233. $('#court_type').on('select2:opening', function() {
  234. setTimeout(() => {
  235. $('.select2-search__field').prop('readonly', true); // disable typing
  236. }, 0);
  237. });
  238. $.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
  239. const $equip = $('#inventory').empty();
  240. $equip.append('<option value="">Select Inventory Items </option>');
  241. response.data.forEach(item => {
  242. $equip.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
  243. });
  244. $equip.select2({
  245. placeholder: "Select Inventory Items",
  246. width: '100%',
  247. multiple: true,
  248. minimumResultsForSearch: Infinity, // disables search typing
  249. closeOnSelect: false
  250. });
  251. // Optional: disable typing in the input
  252. $equip.on('select2:opening', function() {
  253. setTimeout(() => {
  254. $('.select2-search__field').prop('readonly', true);
  255. }, 0);
  256. });
  257. });
  258. // Populate modal court types
  259. /*$.get('/gcc/api/gccschool/dropdown/getCourtData', function (response) {
  260. const $modalCourt = $('#modalcourt_type').empty();
  261. response.data.forEach(item => {
  262. $modalCourt.append(`<option value="${item.court_id}">${item.court_type}</option>`);
  263. });
  264. $modalCourt.select2({
  265. placeholder: "Select Type of Court",
  266. width: '100%',
  267. closeOnSelect: false,
  268. minimumResultsForSearch: Infinity
  269. });
  270. $modalCourt.on('select2:opening', function () {
  271. setTimeout(() => {
  272. $('.select2-search__field').prop('readonly', true);
  273. }, 0);
  274. });
  275. });
  276. // Populate modal inventory items
  277. $.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
  278. const $modalInventory = $('#modalinventory').empty();
  279. response.data.forEach(item => {
  280. $modalInventory.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
  281. });
  282. $modalInventory.select2({
  283. placeholder: "Select Inventory Items",
  284. width: '100%',
  285. closeOnSelect: false,
  286. minimumResultsForSearch: Infinity
  287. });
  288. $modalInventory.on('select2:opening', function () {
  289. setTimeout(() => {
  290. $('.select2-search__field').prop('readonly', true);
  291. }, 0);
  292. });
  293. });*/
  294. // Toggle Playground Area based on radio button selection
  295. $('input[name="modalhasPlayground"]').on('change', function () {
  296. if ($(this).val() === 'Yes') {
  297. $('#modalplaygroundAreaGroup').show();
  298. } else {
  299. $('#modalplaygroundAreaGroup').hide();
  300. //$('#modalplayground_area').val(''); // optional: clear input
  301. }
  302. });
  303. // Toggle Court Type section based on radio button selection
  304. $('input[name="modalhasCourt"]').on('change', function () {
  305. if ($(this).val() === 'Yes') {
  306. $('#modalcourtTypeGroup').show();
  307. } else {
  308. $('#modalcourtTypeGroup').hide();
  309. //$('#modalcourt_type').val(null).trigger('change'); // ✅ Correct // optional: clear selected items
  310. }
  311. });
  312. /*$.get('/gcc/api/gccschool/dropdown/getEquipmentData', function (response) {
  313. const $equip = $('#inventory').empty();
  314. $equip.append('<option value="">Select Inventory Items </option>');
  315. response.data.forEach(item => {
  316. $equip.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
  317. });
  318. });*/
  319. $.get('/gcc/api/gccschool/schoolproperty/checkPlaygroundDetails', { school_id: schoolId }, function (response) {
  320. const data = response && response[0];
  321. const pg = data?.playgroundDetails;
  322. // Show form if no data or if critical values are missing
  323. if (!pg || Object.keys(pg).length === 0 || pg.is_playground === undefined || pg.is_court === undefined) {
  324. $('#playgroundForm').show();
  325. return;
  326. }
  327. // Construct comma-separated court and equipment lists
  328. let courtList = data.CourtDetails?.map(cd => cd.court_type).join(", ") || "—";
  329. let equipmentList = data.EquipmentDetails?.map(ed => ed.equipment_type).join(", ") || "—";
  330. const table = `
  331. <div class="col-md-12">
  332. <div class="card shadow-sm">
  333. <div class="card-body" id="playgroundTableWrapper">
  334. <h5 class="mb-0"> Playground Details</h5>
  335. <div class="table-responsive">
  336. <table class="table table-bordered">
  337. <tr><th>Playground Present</th><td>${pg.is_playground ? 'Yes' : 'No'}</td></tr>
  338. <tr><th>Playground Area</th><td>${pg.playground_area ?? '—'}</td></tr>
  339. <tr><th>Court Present</th><td>${pg.is_court ? 'Yes' : 'No'}</td></tr>
  340. <tr><th>Type of Court</th><td>${courtList}</td></tr>
  341. <tr><th>Inventory Items</th><td>${equipmentList}</td></tr>
  342. </table>
  343. </div>
  344. <div class="text-center mt-3">
  345. <button id="editPlaygroundBtn" class="btn btn-primary px-4">Update</button>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. `;
  351. $('.container.mt-4').prepend(table);
  352. $('#playgroundForm').hide();
  353. // Enable Edit mode: fill form and show
  354. /*$(document).on('click', '#editPlaygroundBtn', function () {
  355. // Populate fields
  356. $(`input[name="modalhasPlayground"][value="${pg.is_playground ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
  357. $('#modalplayground_area').val(pg.playground_area);
  358. $(`input[name="modalhasCourt"][value="${pg.is_court ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
  359. const courtIds = data.CourtDetails?.map(cd => cd.court_id?.toString()) || [];
  360. const equipIds = data.EquipmentDetails?.map(ed => ed.equipment_detais_id?.toString()) || [];
  361. setTimeout(() => {
  362. $('#modalcourt_type').val(courtIds).trigger('change');
  363. $('#modalinventory').val(equipIds).trigger('change');
  364. }, 200);
  365. const courtIds = data.CourtDetails?.map(cd => cd.Courts_detais_id?.toString()) || [];
  366. const equipIds = data.EquipmentDetails?.map(ed => ed.equipment_detais_id?.toString()) || [];
  367. setTimeout(() => {
  368. $('#modalcourt_type').val(courtIds).trigger('change');
  369. $('#modalinventory').val(equipIds).trigger('change');
  370. }, 200);
  371. $('button[type="submit"]').html('Save changes');
  372. console.log(courtIds);
  373. // Show modal
  374. const editModal = new bootstrap.Modal(document.getElementById('editPlaygroundModal'));
  375. editModal.show();
  376. });*/
  377. $(document).on('click', '#editPlaygroundBtn', function () {
  378. window.modalDrinkingRawResponse = data;
  379. // Store playground ID for use during update
  380. $('#editPlaygroundModal').data('playground_id', pg.playground_id);
  381. // Pre-select radio values and playground area
  382. $(`input[name="modalhasPlayground"][value="${pg.is_playground ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
  383. $('#modalplayground_area').val(pg.playground_area);
  384. $(`input[name="modalhasCourt"][value="${pg.is_court ? 'Yes' : 'No'}"]`).prop('checked', true).trigger('change');
  385. const $modalCourt = $('#modalcourt_type');
  386. const $modalInventory = $('#modalinventory');
  387. // Preload detail row IDs and selection IDs
  388. const courtData = data.CourtDetails?.map(cd => ({
  389. Courts_detais_id: cd.Courts_detais_id, // ✅ correct DB ID
  390. court_id: cd.court_id.toString() // ✅ select2 expects string
  391. })) || [];
  392. const equipmentData = data.EquipmentDetails?.map(ed => ({
  393. equipment_detais_id: ed.equipment_detais_id, // ✅ correct DB ID
  394. equipment_id: ed.equipment_id.toString()
  395. })) || [];
  396. // Extract just the selected IDs to set values in select2
  397. const courtIds = courtData.map(cd => cd.court_id);
  398. const equipIds = equipmentData.map(ed => ed.equipment_id);
  399. console.log("Preselected Court IDs:", courtIds);
  400. console.log("Preselected Equipment IDs:", equipIds);
  401. // Fetch dropdown options and then trigger modal
  402. Promise.all([
  403. $.get('/gcc/api/gccschool/dropdown/getCourtData'),
  404. $.get('/gcc/api/gccschool/dropdown/getEquipmentData')
  405. ]).then(([courtResponse, equipResponse]) => {
  406. // COURT
  407. $modalCourt.empty();
  408. courtResponse.data.forEach(item => {
  409. $modalCourt.append(`<option value="${item.court_id}">${item.court_type}</option>`);
  410. });
  411. $modalCourt.select2({
  412. placeholder: "Select Type of Court",
  413. width: '100%',
  414. closeOnSelect: false,
  415. minimumResultsForSearch: Infinity
  416. });
  417. // INVENTORY
  418. $modalInventory.empty();
  419. equipResponse.data.forEach(item => {
  420. $modalInventory.append(`<option value="${item.equipment_id}">${item.equipment_type}</option>`);
  421. });
  422. $modalInventory.select2({
  423. placeholder: "Select Inventory Items",
  424. width: '100%',
  425. closeOnSelect: false,
  426. minimumResultsForSearch: Infinity
  427. });
  428. // Set preselected values after a slight delay
  429. setTimeout(() => {
  430. $modalCourt.val(courtIds).trigger('change');
  431. $modalInventory.val(equipIds).trigger('change');
  432. }, 150);
  433. // Store full detail info for use in form submission (you can also use hidden inputs if needed)
  434. $('#editPlaygroundModal').data('courtDetailData', courtData);
  435. $('#editPlaygroundModal').data('equipDetailData', equipmentData);
  436. // Show the modal
  437. setTimeout(() => {
  438. const editModal = new bootstrap.Modal(document.getElementById('editPlaygroundModal'));
  439. editModal.show();
  440. }, 300);
  441. });
  442. });
  443. });
  444. $('input[name="hasPlayground"]').change(function () {
  445. if ($(this).val() === 'Yes') {
  446. $('#playgroundAreaGroup').show();
  447. } else {
  448. $('#playgroundAreaGroup').hide();
  449. $('#playground_area').val(''); // Clear the input when "No" is selected
  450. }
  451. });
  452. $('input[name="hasCourt"]').change(function () {
  453. if ($(this).val() === 'Yes') {
  454. $('#courtTypeGroup').show();
  455. } else {
  456. $('#courtTypeGroup').hide();
  457. $('#court_type').val(null).trigger('change'); // Clears dropdown
  458. }
  459. });
  460. $('#playgroundForm').on('submit', function (e) {
  461. e.preventDefault();
  462. console.log("Submit triggered");
  463. const hasPlayground = $('input[name="hasPlayground"]:checked').val();
  464. const hasCourt = $('input[name="hasCourt"]:checked').val();
  465. const playgroundArea = $('#playground_area').val();
  466. const courtTypes = $('#court_type').val();
  467. const equipmentList = $('#inventory').val();
  468. //const schoolId = 1;
  469. /*if (!hasPlayground) return Swal.fire('Validation Error', 'Select presence of playground.', 'warning');
  470. if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 0))
  471. return Swal.fire('Validation Error', 'Enter valid playground area.', 'warning');
  472. if (!hasCourt) return Swal.fire('Validation Error', 'Select presence of court.', 'warning');
  473. if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0))
  474. return Swal.fire('Validation Error', 'Select at least one court type.', 'warning');
  475. if (!equipmentList || equipmentList.length === 0)
  476. return Swal.fire('Validation Error', 'Select at least one inventory item.', 'warning');*/
  477. if (!hasPlayground) {
  478. return Swal.fire({
  479. title: 'Validation Error',
  480. text: 'Select presence of playground.',
  481. icon: 'warning',
  482. allowOutsideClick: false,
  483. allowEscapeKey: false,
  484. allowEnterKey: false,
  485. showConfirmButton: true
  486. });
  487. }
  488. if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 100)) {
  489. return Swal.fire({
  490. title: 'Validation Error',
  491. text: 'playground area must be numbers greater than 100.',
  492. icon: 'warning',
  493. allowOutsideClick: false,
  494. allowEscapeKey: false,
  495. allowEnterKey: false,
  496. showConfirmButton: true
  497. });
  498. }
  499. if (!hasCourt) {
  500. return Swal.fire({
  501. title: 'Validation Error',
  502. text: 'Select presence of court.',
  503. icon: 'warning',
  504. allowOutsideClick: false,
  505. allowEscapeKey: false,
  506. allowEnterKey: false,
  507. showConfirmButton: true
  508. });
  509. }
  510. if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0)) {
  511. return Swal.fire({
  512. title: 'Validation Error',
  513. text: 'Select at least one court type.',
  514. icon: 'warning',
  515. allowOutsideClick: false,
  516. allowEscapeKey: false,
  517. allowEnterKey: false,
  518. showConfirmButton: true
  519. });
  520. }
  521. if (!equipmentList || equipmentList.length === 0) {
  522. return Swal.fire({
  523. title: 'Validation Error',
  524. text: 'Select at least one inventory item.',
  525. icon: 'warning',
  526. allowOutsideClick: false,
  527. allowEscapeKey: false,
  528. allowEnterKey: false,
  529. showConfirmButton: true
  530. });
  531. }
  532. const payload = {
  533. is_playground: hasPlayground === 'Yes',
  534. playground_area: hasPlayground === 'Yes' ? parseFloat(playgroundArea) : 0,
  535. is_court: hasCourt === 'Yes',
  536. courtid: courtTypes,
  537. equipmentid: equipmentList,
  538. school_id: schoolId,
  539. };
  540. console.log("Payload:", payload);
  541. $.ajax({
  542. url: '/gcc/api/gccschool/schoolproperty/savePlayground',
  543. method: 'POST',
  544. contentType: 'application/json',
  545. data: JSON.stringify(payload),
  546. success: function (response) {
  547. Swal.fire({
  548. title: 'Success',
  549. text: 'Playground saved successfully!',
  550. icon: 'success',
  551. allowOutsideClick: false,
  552. allowEscapeKey: false,
  553. allowEnterKey: false,
  554. showConfirmButton: true
  555. }).then(() => location.reload());
  556. },
  557. error: function (xhr) {
  558. console.error("Error:", xhr);
  559. Swal.fire({
  560. title: 'Error',
  561. text: 'Failed to save playground details.',
  562. icon: 'error',
  563. allowOutsideClick: false,
  564. allowEscapeKey: false,
  565. allowEnterKey: false,
  566. showConfirmButton: true
  567. });
  568. }
  569. });
  570. });
  571. $('#playgroundEditForm').on('submit', function (e) {
  572. e.preventDefault();
  573. const hasPlayground = $('input[name="modalhasPlayground"]:checked').val();
  574. const hasCourt = $('input[name="modalhasCourt"]:checked').val();
  575. const playgroundArea = $('#modalplayground_area').val();
  576. const courtTypes = $('#modalcourt_type').val(); // court_id[]
  577. const equipmentList = $('#modalinventory').val(); // equipment_id[]
  578. const playgroundId = $('#editPlaygroundModal').data('playground_id');
  579. if (!hasPlayground) return Swal.fire('Validation Error', 'Select presence of playground.', 'warning');
  580. if (hasPlayground === 'Yes' && (!playgroundArea || parseFloat(playgroundArea) < 100))
  581. return Swal.fire('Validation Error', 'playground area must be numbers greater than 100.', 'warning');
  582. if (!hasCourt) return Swal.fire('Validation Error', 'Select presence of court.', 'warning');
  583. if (hasCourt === 'Yes' && (!courtTypes || courtTypes.length === 0))
  584. return Swal.fire('Validation Error', 'Select at least one court type.', 'warning');
  585. if (!equipmentList || equipmentList.length === 0)
  586. return Swal.fire('Validation Error', 'Select at least one inventory item.', 'warning');
  587. // ✅ Extract preloaded backend data (used to get *_detais_id)
  588. const courtData = courtTypes.map(id => {
  589. const match = window.modalDrinkingRawResponse?.CourtDetails?.find(c => c.court_id == id);
  590. return {
  591. court_id: parseInt(id),
  592. Courts_detais_id: match?.Courts_detais_id || 0
  593. };
  594. });
  595. const equipmentData = equipmentList.map(id => {
  596. const match = window.modalDrinkingRawResponse?.EquipmentDetails?.find(e => e.equipment_id == id);
  597. return {
  598. equipment_id: parseInt(id),
  599. equipment_detais_id: match?.equipment_detais_id || 0
  600. };
  601. });
  602. const payload = {
  603. is_playground: hasPlayground === 'Yes',
  604. playground_area: hasPlayground === 'Yes' ? parseFloat(playgroundArea) : 0,
  605. is_court: hasCourt === 'Yes',
  606. school_id: parseInt(new URLSearchParams(window.location.search).get("schoolId")),
  607. playground_id: parseInt(playgroundId),
  608. equipments: equipmentData,
  609. courts: courtData
  610. };
  611. console.log("✅ Final Playground Update Payload:", payload);
  612. $.ajax({
  613. url: '/gcc/api/gccschool/schoolproperty/updatePlayground',
  614. method: 'POST',
  615. contentType: 'application/json',
  616. data: JSON.stringify(payload),
  617. success: function (res) {
  618. if (res.status === "OK") {
  619. // Swal.fire('Success', res.message || 'Playground updated!', 'success').then(() => location.reload());
  620. Swal.fire({
  621. title: 'Success',
  622. text: res.message || 'Playground updated!',
  623. icon: 'success',
  624. allowOutsideClick: false,
  625. allowEscapeKey: false,
  626. allowEnterKey: false,
  627. showConfirmButton: true
  628. }).then(() => location.reload());
  629. } else {
  630. // Swal.fire('Error', res.message || 'Update failed.', 'error');
  631. Swal.fire({
  632. title: 'Error',
  633. text: res.message || 'Update failed.',
  634. icon: 'error',
  635. allowOutsideClick: false,
  636. allowEscapeKey: false,
  637. allowEnterKey: false,
  638. showConfirmButton: true
  639. });
  640. }
  641. },
  642. error: function (xhr) {
  643. console.error("XHR Error:", xhr);
  644. let msg = xhr.responseText || "Unknown error occurred";
  645. Swal.fire('Error', msg, 'error');
  646. }
  647. });
  648. });
  649. function resetFacilityFields() {
  650. console.log("Reset button clicked - Facilities");
  651. // Uncheck all radio buttons
  652. $('input[type="radio"]').prop('checked', false);
  653. // Clear input fields
  654. $('#playground_area').val('');
  655. // Clear multi-select dropdowns
  656. $('#court_type').val(null).trigger('change');
  657. $('#inventory').val(null).trigger('change');
  658. // Hide conditional sections
  659. $('#playgroundAreaGroup').hide();
  660. $('#courtTypeGroup').hide();
  661. }
  662. // Event Listener for Reset Button
  663. $(document).on('click', '#resetBtn', function (event) {
  664. event.preventDefault();
  665. resetFacilityFields();
  666. });
  667. });
  668. </script>
  669. </body>
  670. </html>