This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
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.

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