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.

1521 lines
56 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}">
  4. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  5. <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
  6. </head>
  7. <style>
  8. .select2-container--default .select2-selection--multiple {
  9. padding-right: 30px;
  10. min-height: 38px;
  11. display: flex;
  12. flex-wrap: wrap;
  13. align-items: center;
  14. position: relative;
  15. background-image: none;
  16. }
  17. .select2-container--default .select2-selection--multiple::after {
  18. content: "";
  19. position: absolute;
  20. top: 50%;
  21. right: 8px;
  22. width: 14px;
  23. height: 14px;
  24. transform: translateY(-50%);
  25. 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>");
  26. background-repeat: no-repeat;
  27. background-size: contain;
  28. pointer-events: none;
  29. }
  30. </style>
  31. <body>
  32. <div class="wrapper">
  33. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  34. <div class="page-wrap">
  35. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  36. <div class="card">
  37. <div class="main-content" style="background-color: white;">
  38. <div class="container">
  39. <!-- Card 2: Other Details -->
  40. <div class="col-md-12">
  41. <div style="padding: 0px;margin-top:-58px;margin-left: -233px;">
  42. <div class="card-header"><b>
  43. Drinking Water</b>
  44. </div>
  45. <!-- Table Container for Displaying Saved Data -->
  46. <div id="drinkingWaterTableContainer" style="display: none; padding: 15px;">
  47. <table class="table table-bordered">
  48. <tbody>
  49. <tr>
  50. <th>Water Sources</th>
  51. <td id="view_water_sources"></td>
  52. <th>Water Supply Types</th>
  53. <td id="view_water_supply_types"></td>
  54. </tr>
  55. <tr>
  56. <th>Purifier Available</th>
  57. <td id="view_purifier"></td>
  58. <th>Purifier Capacity</th>
  59. <td id="view_purifier_capacity"></td>
  60. </tr>
  61. <tr>
  62. <th>Borewell Available</th>
  63. <td id="view_borewell"></td>
  64. <th>No. of Borewells</th>
  65. <td id="view_borewell_count"></td>
  66. </tr>
  67. <tr>
  68. <th>Storage Available</th>
  69. <td id="view_storage"></td>
  70. <th>Storage Types & Capacities</th>
  71. <td id="view_storage_details"></td>
  72. </tr>
  73. </tbody>
  74. </table>
  75. <div class="text-center">
  76. <button class="btn btn-primary" id="editDrinkingBtn">Update</button>
  77. </div>
  78. </div>
  79. <!-- Wrap starts here -->
  80. <div class="form-section">
  81. <!-- your existing form rows -->
  82. <div class="row" style="padding: 5px;">
  83. <div class="col-md-8 form-group">
  84. <label for="water_sources" class="form-label fw-bold">Source of Water <span
  85. class="text-danger">*</span></label>
  86. <div id="water_sources_container" class="row gx-4 gy-2"></div>
  87. </div>
  88. </div>
  89. <br>
  90. <div id="waterSupplyContainer" class="row" style="gap: 10px;"></div>
  91. <div class="row" style="padding: 5px;">
  92. <div class="col-md-4 form-group">
  93. <label>Water Purifying Facility Available <span
  94. class="text-danger">*</span></label>
  95. <div class="radio-group">
  96. <input type="radio" name="water_purifier_available" id="purifier_yes"
  97. value="1"> Yes
  98. <input type="radio" name="water_purifier_available" id="purifier_no"
  99. value="0"> No
  100. </div>
  101. </div>
  102. <div class="col-md-4 form-group" id="purifier_capacity_container"
  103. style="display: none;">
  104. <label for="purifier_capacity">Capacity Of Purifier (Liters) <span
  105. class="text-danger">*</span></label>
  106. <input type="text" id="purifier_capacity" name="purifier_capacity"
  107. class="form-control" placeholder="Enter Capacity Of Purifier" />
  108. </div>
  109. </div>
  110. <div class="row" style="padding: 5px;">
  111. <!-- <div class="col-md-4 form-group">
  112. <label>Borwell Status <span class="text-danger">*</span></label>
  113. <div class="radio-group">
  114. <input type="radio" name="borwell_status_available"
  115. id="borwell_status_yes" value="1"> Yes
  116. <input type="radio" name="borwell_status_available"
  117. id="borwell_status_no" value="0"> No
  118. </div>
  119. </div> -->
  120. <div class="col-md-4 form-group" id="borwell_status_container"
  121. style="display: none;">
  122. <label for="no_of_borwells">No.of Borewells <span
  123. class="text-danger">*</span></label>
  124. <input type="number" id="no_of_borwells" name="no_of_borwells"
  125. class="form-control" placeholder="Enter no Of Borwells" />
  126. </div>
  127. </div>
  128. <div class="row" style="padding: 5px;">
  129. <div class="col-md-4 form-group">
  130. <label>Storage Status <span class="text-danger">*</span></label>
  131. <div class="radio-group">
  132. <input type="radio" name="storage_status" id="storage_yes" value="1">
  133. Yes
  134. <input type="radio" name="storage_status" id="storage_no" value="0"> No
  135. </div>
  136. </div>
  137. </div>
  138. <div class="row" id="storage_type_container" style="display: none; padding: 5px;">
  139. <div class="col-md-4 form-group">
  140. <label for="storage_types" class="form-label fw-bold">Type of Storage for
  141. Drinking Water <span class="text-danger">*</span></label>
  142. <select id="storage_types" class="form-control" multiple="multiple"
  143. style="width: 100%;"></select>
  144. </div>
  145. </div>
  146. <div class="row" id="storage_capacity_container" style="padding: 5px;"></div>
  147. <div class="row" style="padding: 5px;">
  148. <div class="col-md-12 form-group">
  149. <div class="card-footer text-center">
  150. <button type="submit" class="btn btn-primary"
  151. id="drinkingWaterSubmitBtn"><i
  152. class="ik ik-save"></i>Submit</button>
  153. <button type="reset" class="btn btn-secondary mr-2" id="resetButton"><i
  154. class="ik ik-refresh-cw"></i>Reset</button>
  155. </div>
  156. </div>
  157. </div>
  158. <!-- Wrap ends here -->
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <!-- Modal (Editable Form) -->
  167. <div class="modal fade" id="drinkingWaterModal" tabindex="-1" aria-labelledby="drinkingWaterModalLabel"
  168. aria-hidden="true">
  169. <div class="modal-dialog modal-lg">
  170. <div class="modal-content">
  171. <div class="modal-header">
  172. <h5 class="modal-title">Update Drinking Water Details</h5>
  173. <button type="button" class="close" data-bs-dismiss="modal"
  174. aria-label="Close"><span aria-hidden="true">&times;</span></button>
  175. </div>
  176. <div class="modal-body">
  177. <form id="editDrinkingWaterForm">
  178. </form>
  179. </div>
  180. <div class="modal-footer">
  181. <button class="btn btn-primary" id="saveDrinkingwaterModalUpdate">Save Changes</button>
  182. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  188. <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
  189. <script>
  190. $(document).ready(function () {
  191. const urlParams = new URLSearchParams(window.location.search);
  192. const schoolId = urlParams.get("schoolId");
  193. document.getElementById('no_of_borwells').addEventListener('input', function () {
  194. this.value = this.value.replace(/[^0-9]/g, '');
  195. if (parseInt(this.value) < 0) {
  196. this.value = '';
  197. }
  198. });
  199. $('#storage_types').select2({
  200. placeholder: "Select Storage Type",
  201. minimumResultsForSearch: Infinity,
  202. closeOnSelect: false
  203. });
  204. $('#storage_types').on('select2:opening', function () {
  205. setTimeout(() => {
  206. $('.select2-search__field').prop('readonly', true);
  207. }, 0);
  208. });
  209. $(document).on('input', '#purifier_capacity', function () {
  210. let value = $(this).val();
  211. // Allow only digits and at most one decimal point
  212. let cleaned = value.replace(/[^0-9.]/g, ''); // Remove anything that's not digit or dot
  213. cleaned = cleaned.replace(/(\..*?)\..*/g, '$1'); // Allow only one dot
  214. $(this).val(cleaned);
  215. });
  216. loadWaterSources();
  217. function loadWaterSources() {
  218. $.ajax({
  219. url: '/gcc/api/gccschool/dropdown/getWaterSource',
  220. method: 'GET',
  221. success: function (response) {
  222. console.log(response.data);
  223. $('#water_sources_container').empty();
  224. if (response.status === "OK") {
  225. window.allWaterSources = response.data;
  226. response.data.forEach(item => {
  227. $('#water_sources_container').append(`
  228. <div class="col-auto">
  229. <div class="form-check form-check-inline me-3">
  230. <input class="form-check-input water-source-checkbox me-2 " type="checkbox" value="${item.source_water_id}" data-label="${item.water_type}" id="water_source_${item.source_water_id}">
  231. <label class="form-check-label" for="water_source_${item.source_water_id}" style="margin-bottom: 0;">${item.water_type}</label>
  232. </div>
  233. </div>
  234. `);
  235. });
  236. }
  237. }
  238. });
  239. }
  240. loadDrinkingWaterTable();
  241. function loadDrinkingWaterTable() {
  242. $.ajax({
  243. url: "/gcc/api/gccschool/schoolproperty/checkWaterDetails",
  244. method: "GET",
  245. cache: false,
  246. data: {school_id: schoolId},
  247. success: function (res) {
  248. console.log("Drinking Water API Response:", res);
  249. const d = res?.DrinkingWater || res[0]?.DrinkingWater;
  250. const sources = res?.WaterSource || res[0]?.WaterSource || [];
  251. const storage = res?.WaterStorage || res[0]?.WaterStorage || [];
  252. window.modalDrinkingData = {
  253. drinking_water_id: d.drinking_water_id, // ✅ Add this line
  254. purifier: d.is_purifier == 1 ? 'Yes' : 'No',
  255. purifier_capacity: d.purifier_capacity || '',
  256. borewell: d.is_borewell == 1 ? 'Yes' : 'No',
  257. borewell_count: d.borewell_count || '',
  258. storage: d.is_storage == 1 ? 'Yes' : 'No',
  259. storageDetails: storage.map(s => `${s.storage_type}: ${s.capacity} L`).join('<br>')
  260. };
  261. window.modalDrinkingRawResponse = res;
  262. if (d && Object.keys(d).length > 0) {
  263. $('#view_purifier').text(d.is_purifier == 1 ? 'Yes' : 'No');
  264. $('#view_purifier_capacity').text(d.purifier_capacity || '-');
  265. $('#view_borewell').text(d.is_borewell == 1 ? 'Yes' : 'No');
  266. $('#view_borewell_count').text(d.borewell_count || '-');
  267. $('#view_storage').text(d.is_storage == 1 ? 'Yes' : 'No');
  268. const sourceNames = sources.map(w => w.water_type).join(', ');
  269. const sourceTypes = sources.map(w => `${w.water_type}: ${w.supply_type}`).join('<br>');
  270. $('#view_water_sources').text(sourceNames || '-');
  271. $('#view_water_supply_types').html(sourceTypes || '-');
  272. if (d.is_storage == 1 && storage && storage.length > 0) {
  273. const storageText = storage.map(s => `${s.storage_type}: ${s.capacity} L`).join('<br>');
  274. $('#view_storage_details').html(storageText);
  275. } else {
  276. $('#view_storage_details').text('-');
  277. }
  278. $('#drinkingWaterTableContainer').show();
  279. $('.form-section').hide(); // ✅ Hides the entire form
  280. } else {
  281. $('#drinkingWaterTableContainer').hide();
  282. $('.form-section').show(); // ✅ Shows the form if no data
  283. }
  284. },
  285. error: function () {
  286. console.warn("No Drinking Water data found for school_id", schoolId);
  287. $('#drinkingWaterTableContainer').hide();
  288. $('#drinkingWaterSubmitBtn').closest('.row').show();
  289. }
  290. });
  291. }
  292. $(document).on('change', '#editDrinkingWaterForm input[name="water_purifier_available"]', function () {
  293. if ($('#editDrinkingWaterForm #purifier_yes').is(':checked')) {
  294. $('#editDrinkingWaterForm #purifier_capacity_container').show();
  295. } else {
  296. $('#editDrinkingWaterForm #purifier_capacity_container').hide();
  297. // $('#editDrinkingWaterForm #purifier_capacity').val('');
  298. }
  299. });
  300. $(document).on('change', '#editDrinkingWaterForm input[name="borwell_status_available"]', function () {
  301. if ($('#editDrinkingWaterForm #borwell_status_yes').is(':checked')) {
  302. $('#editDrinkingWaterForm #borwell_status_container').show();
  303. } else {
  304. $('#editDrinkingWaterForm #borwell_status_container').hide();
  305. // $('#editDrinkingWaterForm #no_of_borwells').val('');
  306. }
  307. });
  308. $('#editDrinkingBtn').click(function () {
  309. const d = window.modalDrinkingData;
  310. const res = window.modalDrinkingRawResponse;
  311. const allSources = window.allWaterSources || []; // cache this globally after loading dropdown
  312. const selectedSources = res?.WaterSource || res[0]?.WaterSource || [];
  313. if ($('#storage_types').hasClass('select2-hidden-accessible')) {
  314. $('#storage_types').select2('destroy');
  315. }
  316. // Clone and inject form
  317. const formHtml = $('.form-section').html();
  318. $('#editDrinkingWaterForm').html(formHtml);
  319. $('#editDrinkingWaterForm').find('.card-footer').remove();
  320. $('#editDrinkingWaterForm #storage_types').select2({
  321. placeholder: "Select Storage Types",
  322. allowClear: false,
  323. minimumResultsForSearch: Infinity,
  324. closeOnSelect: false
  325. }).on('select2:opening', function () {
  326. setTimeout(() => {
  327. $('.select2-search__field').prop('readonly', true);
  328. }, 0);
  329. });
  330. const waterSourceContainer = $('#editDrinkingWaterForm #water_sources_container');
  331. const waterSupplyContainer = $('#editDrinkingWaterForm #waterSupplyContainer');
  332. waterSourceContainer.empty();
  333. waterSupplyContainer.empty();
  334. // Build all checkboxes and pre-select only saved ones
  335. allSources.forEach(source => {
  336. const { source_water_id, water_type } = source;
  337. const isChecked = selectedSources.some(s => s.source_water_id == source_water_id);
  338. const selected = selectedSources.find(s => s.source_water_id == source_water_id);
  339. const supply_type = selected?.supply_type || "";
  340. // Add checkbox
  341. waterSourceContainer.append(`
  342. <div class="col-auto">
  343. <div class="form-check form-check-inline me-3">
  344. <input class="form-check-input water-source-checkbox me-2"
  345. type="checkbox"
  346. value="${source_water_id}"
  347. data-label="${water_type}"
  348. id="edit_water_source_${source_water_id}"
  349. ${isChecked ? 'checked' : ''}>
  350. <label class="form-check-label" for="edit_water_source_${source_water_id}" style="margin-bottom: 0;">${water_type}</label>
  351. </div>
  352. </div>
  353. `);
  354. // If it's selected, show the supply type radios
  355. if (isChecked) {
  356. waterSupplyContainer.append(`
  357. <div class="col-md-3 mb-3" id="edit-water-supply-${source_water_id}">
  358. <label class="fw-bold d-block mb-2">${water_type} Type Of Water Supply <span class="text-danger">*</span></label>
  359. <div class="d-flex gap-4">
  360. <div class="form-check form-check-inline">
  361. <input class="form-check-input" type="radio" name="water_supply_${source_water_id}" value="Continious" ${supply_type === 'Continious' ? 'checked' : ''}>
  362. <label class="form-check-label">Continious</label>
  363. </div>
  364. <div class="form-check form-check-inline">
  365. <input class="form-check-input" type="radio" name="water_supply_${source_water_id}" value="Intermittent" ${supply_type === 'Intermittent' ? 'checked' : ''}>
  366. <label class="form-check-label">Intermittent</label>
  367. </div>
  368. </div>
  369. </div>
  370. `);
  371. }
  372. });
  373. // Prefill purifier
  374. if (d.purifier === 'Yes') {
  375. $('#editDrinkingWaterForm #purifier_yes').prop('checked', true);
  376. $('#editDrinkingWaterForm #purifier_capacity_container').show();
  377. $('#editDrinkingWaterForm #purifier_capacity').val(d.purifier_capacity);
  378. } else {
  379. $('#editDrinkingWaterForm #purifier_no').prop('checked', true);
  380. $('#editDrinkingWaterForm #purifier_capacity_container').hide();
  381. }
  382. // Borewell
  383. if (d.borewell === 'Yes') {
  384. $('#editDrinkingWaterForm #borwell_status_yes').prop('checked', true);
  385. $('#editDrinkingWaterForm #borwell_status_container').show();
  386. $('#editDrinkingWaterForm #no_of_borwells').val(d.borewell_count);
  387. } else {
  388. $('#editDrinkingWaterForm #borwell_status_no').prop('checked', true);
  389. $('#editDrinkingWaterForm #borwell_status_container').hide();
  390. }
  391. // Storage
  392. if (d.storage === 'Yes') {
  393. $('#editDrinkingWaterForm #storage_yes').prop('checked', true);
  394. $('#editDrinkingWaterForm #storage_type_container').show();
  395. fetchStorageTypes(() => {
  396. const storage = res?.WaterStorage || res[0]?.WaterStorage || [];
  397. const selectedIds = [];
  398. storage.forEach(s => {
  399. const storageType = s.storage_type?.trim();
  400. $('#editDrinkingWaterForm #storage_types option').each(function () {
  401. if ($(this).text().trim() === storageType) {
  402. selectedIds.push($(this).val());
  403. }
  404. });
  405. });
  406. $('#editDrinkingWaterForm #storage_types').val(selectedIds).trigger('change');
  407. setTimeout(() => {
  408. storage.forEach(s => {
  409. const storageType = s.storage_type?.trim();
  410. const capacity = s.capacity;
  411. $('#editDrinkingWaterForm #storage_types option').each(function () {
  412. if ($(this).text().trim() === storageType) {
  413. const id = $(this).val();
  414. $(`#editDrinkingWaterForm #capacity_${id}`).val(capacity);
  415. }
  416. });
  417. });
  418. }, 500);
  419. }, '#editDrinkingWaterForm #storage_types');
  420. } else {
  421. $('#editDrinkingWaterForm #storage_no').prop('checked', true);
  422. $('#editDrinkingWaterForm #storage_type_container').hide();
  423. $('#editDrinkingWaterForm #storage_capacity_container').empty();
  424. }
  425. new bootstrap.Modal(document.getElementById('drinkingWaterModal')).show();
  426. });
  427. $('#saveDrinkingwaterModalUpdate').click(function () {
  428. const drinkingWaterId = window.modalDrinkingData?.drinking_water_id;
  429. const form = $('#editDrinkingWaterForm');
  430. const schoolId = new URLSearchParams(window.location.search).get("schoolId");
  431. // 👉 You MUST set this somewhere when loading the edit modal
  432. //const drinkingWaterId = window.modalDrinkingData?.drinking_water_id; // ✅ corrected
  433. let water = [], waterError = false;
  434. form.find('.water-source-checkbox:checked').each(function () {
  435. const id = $(this).val();
  436. const supplyType = form.find(`input[name="water_supply_${id}"]:checked`).val();
  437. if (!supplyType) waterError = true;
  438. water.push({
  439. water_supply_id: 0, // placeholder, handled in backend
  440. source_water_id: parseInt(id),
  441. supply_type: supplyType
  442. });
  443. });
  444. if (waterError || water.length === 0) {
  445. return Swal.fire("Info", "Select supply type for all selected water sources.", "info");
  446. }
  447. const purifierValue = form.find('input[name="water_purifier_available"]:checked').val();
  448. if (!purifierValue) return Swal.fire("Info", "Select purifier availability.", "info");
  449. const purifierCapacity = purifierValue === '1' ? form.find('#purifier_capacity').val() : null;
  450. /*if (purifierValue === '1' && !purifierCapacity) {
  451. return Swal.fire("Info", "Enter purifier capacity.", "info");
  452. }*/
  453. if (purifierValue === '1') {
  454. if (!purifierCapacity || purifierCapacity <= 0) {
  455. return Swal.fire("Info", !purifierCapacity ? "Enter purifier capacity." : "Purifier capacity must be greater than 0.", "info");
  456. }
  457. }
  458. const isBorewell = form.find('.water-source-checkbox[data-label="Borewell"]').is(':checked') ? '1' : '0';
  459. const borewellCount = isBorewell === '1' ? form.find('#no_of_borwells').val() : null;
  460. if (isBorewell === '1') {
  461. if (!borewellCount || borewellCount <= 0) {
  462. return Swal.fire("Info", !borewellCount ? "Enter number of borewells." : "Number of borewells must be greater than 0.", "info");
  463. }
  464. }
  465. const storageValue = form.find('input[name="storage_status"]:checked').val();
  466. let storage = [], storageError = false;
  467. if (!storageValue) return Swal.fire("Info", "Select storage status.", "info");
  468. if (storageValue === '1') {
  469. const selected = form.find('#storage_types').val() || [];
  470. if (selected.length === 0) {
  471. return Swal.fire("Info", "Select type of storage.", "info");
  472. }
  473. selected.forEach(id => {
  474. const cap = form.find(`#capacity_${id}`).val();
  475. if (!cap || isNaN(cap) || parseFloat(cap) <= 0) {
  476. storageError = true;
  477. } else {
  478. storage.push({
  479. water_storage_id: 0, // placeholder
  480. storage_water_id: parseInt(id),
  481. capacity: parseFloat(cap)
  482. });
  483. }
  484. });
  485. }
  486. if (storageError) {
  487. return Swal.fire("Info", "Enter valid capacity for all selected storage types.", "info");
  488. }
  489. const updatePayload = {
  490. is_purifier: purifierValue === '1',
  491. purifier_capacity: purifierCapacity ? parseFloat(purifierCapacity) : null,
  492. is_borewell: isBorewell === '1',
  493. borewell_count: borewellCount ? parseInt(borewellCount) : 0,
  494. is_storage: storageValue === '1',
  495. drinking_water_id: parseInt(drinkingWaterId), // ✅ will no longer be NaN or undefined
  496. school_id: parseInt(schoolId),
  497. supply: water,
  498. storage: storage
  499. };
  500. console.log("Update payload:", updatePayload);
  501. $.ajax({
  502. url: '/gcc/api/gccschool/schoolproperty/updateDrinkingWater',
  503. type: 'POST',
  504. contentType: 'application/json',
  505. data: JSON.stringify(updatePayload),
  506. success: function (response) {
  507. let result = response;
  508. // If response is a string like "Success", convert it to an object manually
  509. if (typeof response === "string" && response.toLowerCase().includes("success")) {
  510. result = { status: "OK" };
  511. }
  512. if (result.status === "OK") {
  513. Swal.fire({
  514. icon: "success",
  515. title: "Success",
  516. text: "Drinking water details updated successfully!",
  517. allowOutsideClick: false,
  518. allowEscapeKey: false,
  519. allowEnterKey: false,
  520. showConfirmButton: true
  521. }).then(() => {
  522. $('#drinkingWaterModal').modal('hide');
  523. location.reload();
  524. });
  525. } else {
  526. Swal.fire({
  527. icon: "error",
  528. title: "Submission Failed",
  529. text: result.message || "Please try again.",
  530. allowOutsideClick: false,
  531. allowEscapeKey: false,
  532. allowEnterKey: false,
  533. showConfirmButton: true
  534. });
  535. }
  536. },
  537. error: function (xhr) {
  538. let errorMessage = "Something went wrong";
  539. try {
  540. // Try parsing as JSON
  541. const json = JSON.parse(xhr.responseText);
  542. if (json.message) {
  543. errorMessage = json.message;
  544. } else {
  545. errorMessage = JSON.stringify(json); // fallback if no message
  546. }
  547. } catch (e) {
  548. // If it's HTML or plain text
  549. if (typeof xhr.responseText === 'string') {
  550. // Detect if it's HTML and avoid showing it
  551. if (xhr.responseText.trim().startsWith('<!DOCTYPE')) {
  552. errorMessage = "Internal server error. Please contact support.";
  553. } else {
  554. errorMessage = xhr.responseText;
  555. }
  556. }
  557. }
  558. Swal.fire({
  559. icon: "error",
  560. title: "Error",
  561. text: errorMessage
  562. });
  563. }
  564. });
  565. });
  566. $(document).on('change', '.water-source-checkbox', function () {
  567. const id = $(this).val();
  568. const label = $(this).data('label');
  569. const container = $('#waterSupplyContainer');
  570. if ($(this).is(':checked')) {
  571. // Add supply type section if not already added
  572. if ($(`#water-supply-${id}`).length === 0) {
  573. container.append(`
  574. <div class="col-md-3 mb-3" id="water-supply-${id}">
  575. <label class="fw-bold d-block mb-2">${label} Type Of Water Supply <span class="text-danger">*</span></label>
  576. <div class="d-flex gap-4">
  577. <div class="form-check form-check-inline">
  578. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Continious" id="supply_${id}_1">
  579. <label class="form-check-label" for="supply_${id}_1">Continious</label>
  580. </div>
  581. <div class="form-check form-check-inline">
  582. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Intermittent" id="supply_${id}_2">
  583. <label class="form-check-label" for="supply_${id}_2">Intermittent</label>
  584. </div>
  585. </div>
  586. </div>
  587. `);
  588. }
  589. // ✅ Show borewell input if Borewell is selected
  590. if (label.toLowerCase().trim() === "borewell") {
  591. $('#borwell_status_container').show();
  592. }
  593. } else {
  594. // Remove corresponding water supply section
  595. $(`#water-supply-${id}`).remove();
  596. // ✅ Hide and clear borewell field if Borewell is deselected
  597. if (label.toLowerCase().trim() === "borewell") {
  598. $('#borwell_status_container').hide();
  599. $('#no_of_borwells').val('');
  600. }
  601. }
  602. });
  603. const previousSupplySelections = {};
  604. $(document).on('change', '#editDrinkingWaterForm .water-source-checkbox', function () {
  605. const id = $(this).val();
  606. const label = $(this).data('label');
  607. const container = $('#editDrinkingWaterForm #waterSupplyContainer');
  608. if ($(this).is(':checked')) {
  609. // Restore previous supply type from memory (if any)
  610. const selectedValue = previousSupplySelections[id] || '';
  611. if ($(`#edit-water-supply-${id}`).length === 0) {
  612. container.append(`
  613. <div class="col-md-3 mb-3" id="edit-water-supply-${id}">
  614. <label class="fw-bold d-block mb-2">${label} Type Of Water Supply <span class="text-danger">*</span></label>
  615. <div class="d-flex gap-4">
  616. <div class="form-check form-check-inline">
  617. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Continious" id="edit_supply_${id}_1">
  618. <label class="form-check-label" for="edit_supply_${id}_1">Continious</label>
  619. </div>
  620. <div class="form-check form-check-inline">
  621. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Intermittent" id="edit_supply_${id}_2">
  622. <label class="form-check-label" for="edit_supply_${id}_2">Intermittent</label>
  623. </div>
  624. </div>
  625. </div>
  626. `);
  627. // Preselect if available
  628. if (selectedValue) {
  629. $(`input[name="water_supply_${id}"][value="${selectedValue}"]`).prop('checked', true);
  630. }
  631. }
  632. if (/bore\s*-?\s*well/i.test(label)) {
  633. $('#editDrinkingWaterForm #borwell_status_container').show();
  634. }
  635. } else {
  636. // Save the selected value before removing it
  637. const selected = $(`input[name="water_supply_${id}"]:checked`).val();
  638. if (selected) {
  639. previousSupplySelections[id] = selected;
  640. }
  641. $(`#edit-water-supply-${id}`).remove();
  642. if (/bore\s*-?\s*well/i.test(label)) {
  643. $('#editDrinkingWaterForm #borwell_status_container').hide();
  644. }
  645. }
  646. });
  647. /*$(document).on('change', '#editDrinkingWaterForm .water-source-checkbox', function () {
  648. const id = $(this).val();
  649. const label = $(this).data('label');
  650. const container = $('#editDrinkingWaterForm #waterSupplyContainer');
  651. if ($(this).is(':checked')) {
  652. if ($(`#edit-water-supply-${id}`).length === 0) {
  653. container.append(`
  654. <div class="col-md-3 mb-3" id="edit-water-supply-${id}">
  655. <label class="fw-bold d-block mb-2">${label} Type Of Water Supply <span class="text-danger">*</span></label>
  656. <div class="d-flex gap-4">
  657. <div class="form-check form-check-inline">
  658. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Continious" id="edit_supply_${id}_1">
  659. <label class="form-check-label" for="edit_supply_${id}_1">Continious</label>
  660. </div>
  661. <div class="form-check form-check-inline">
  662. <input class="form-check-input" type="radio" name="water_supply_${id}" value="Intermittent" id="edit_supply_${id}_2">
  663. <label class="form-check-label" for="edit_supply_${id}_2">Intermittent</label>
  664. </div>
  665. </div>
  666. </div>
  667. `);
  668. }
  669. // ✅ Show Borewell count field if label matches "Borewell"
  670. if (/bore\s*-?\s*well/i.test(label)) {
  671. $('#editDrinkingWaterForm #borwell_status_container').show();
  672. }
  673. } else {
  674. $(`#edit-water-supply-${id}`).remove();
  675. if (/bore\s*-?\s*well/i.test(label)) {
  676. $('#editDrinkingWaterForm #borwell_status_container').hide();
  677. //$('#editDrinkingWaterForm #no_of_borwells').val('');
  678. }
  679. }
  680. });*/
  681. $('input[name="water_purifier_available"]').change(function () {
  682. if ($('#purifier_yes').is(':checked')) {
  683. $('#purifier_capacity_container').show();
  684. } else {
  685. $('#purifier_capacity_container').hide();
  686. $('#purifier_capacity').val(''); // Clear input when "No" or nothing is selected
  687. }
  688. });
  689. $('input[name="borwell_status_available"]').change(function () {
  690. if ($('#borwell_status_yes').is(':checked')) {
  691. $('#borwell_status_container').show();
  692. } else {
  693. $('#borwell_status_container').hide();
  694. $('#no_of_borwells').val(''); // Clear input when "No" or nothing is selected
  695. }
  696. });
  697. $('input[name="storage_status"]').change(function () {
  698. if ($('#storage_yes').is(':checked')) {
  699. $('#storage_type_container').show();
  700. $('#storage_capacity_container').show();
  701. // ✅ If options already loaded, just trigger change
  702. if (storageTypesLoaded) {
  703. $('#storage_types').trigger('change');
  704. } else {
  705. // First time loading storage types if not yet loaded
  706. fetchStorageTypes(function () {
  707. $('#storage_types').trigger('change');
  708. storageTypesLoaded = true;
  709. }, '#storage_types');
  710. }
  711. } else {
  712. $('#storage_type_container').hide();
  713. $('#storage_capacity_container').hide().empty();
  714. $('#storage_types').val(null).trigger('change');
  715. }
  716. });
  717. /*$('input[name="storage_status"]').change(function () {
  718. if ($('#storage_yes').is(':checked')) {
  719. $('#storage_type_container').show();
  720. //fetchStorageTypes();
  721. fetchStorageTypes(null, '#storage_types');
  722. } else {
  723. $('#storage_type_container').hide();
  724. $('#storage_capacity_container').empty();
  725. }
  726. });*/
  727. /*$(document).on('change', '#editDrinkingWaterForm input[name="storage_status"]', function () {
  728. if ($('#editDrinkingWaterForm #storage_yes').is(':checked')) {
  729. $('#editDrinkingWaterForm #storage_type_container').show();
  730. fetchStorageTypes(null, '#editDrinkingWaterForm #storage_types');
  731. } else {
  732. $('#editDrinkingWaterForm #storage_type_container').hide();
  733. $('#editDrinkingWaterForm #storage_capacity_container').empty();
  734. }
  735. });*/
  736. let storageTypesLoaded = false;
  737. fetchStorageTypes(function () {
  738. console.log("Storage types loaded initially.");
  739. storageTypesLoaded = true;
  740. }, '#storage_types');
  741. /* $(document).on('change', '#editDrinkingWaterForm input[name="storage_status"]', function () {
  742. const res = window.modalDrinkingRawResponse;
  743. const storageData = res?.WaterStorage || res[0]?.WaterStorage || [];
  744. if ($('#editDrinkingWaterForm #storage_yes').is(':checked')) {
  745. $('#editDrinkingWaterForm #storage_type_container').show();
  746. $('#editDrinkingWaterForm #storage_capacity_container').show();
  747. $('#editDrinkingWaterForm #storage_types').html(''); // clear dropdown
  748. fetchStorageTypes(function () {
  749. const $dropdown = $('#editDrinkingWaterForm #storage_types');
  750. const selectedIds = [];
  751. storageData.forEach(s => {
  752. const storageType = s.storage_type?.trim();
  753. $dropdown.find('option').each(function () {
  754. if ($(this).text().trim() === storageType) {
  755. selectedIds.push($(this).val());
  756. }
  757. });
  758. });
  759. $dropdown.val(selectedIds).trigger('change');
  760. setTimeout(() => {
  761. storageData.forEach(s => {
  762. const storageType = s.storage_type?.trim();
  763. const capacity = s.capacity;
  764. $dropdown.find('option').each(function () {
  765. if ($(this).text().trim() === storageType) {
  766. const id = $(this).val();
  767. if (!$(`#capacity_group_${id}`).length) {
  768. $('#editDrinkingWaterForm #storage_capacity_container').append(`
  769. <div class="col-md-4 form-group" id="capacity_group_${id}">
  770. <label>${storageType} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  771. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" value="${capacity}" placeholder="Enter Capacity (Liters)" required>
  772. </div>
  773. `);
  774. } else {
  775. $(`#capacity_${id}`).val(capacity);
  776. }
  777. }
  778. });
  779. });
  780. }, 300);
  781. }, '#editDrinkingWaterForm #storage_types');
  782. } else {
  783. $('#editDrinkingWaterForm #storage_type_container').hide();
  784. $('#editDrinkingWaterForm #storage_capacity_container').hide().empty();
  785. $('#editDrinkingWaterForm #storage_types').val(null).trigger('change');
  786. }
  787. }); */
  788. // Inside your $(document).ready(function () { ... });
  789. $(document).on('change', '#editDrinkingWaterForm input[name="storage_status"]', function () {
  790. const res = window.modalDrinkingRawResponse;
  791. const storageData = res?.WaterStorage || res[0]?.WaterStorage || [];
  792. const $dropdown = $('#editDrinkingWaterForm #storage_types');
  793. const $capacityContainer = $('#editDrinkingWaterForm #storage_capacity_container');
  794. if ($('#editDrinkingWaterForm #storage_yes').is(':checked')) {
  795. $('#editDrinkingWaterForm #storage_type_container').show();
  796. $capacityContainer.show();
  797. fetchStorageTypes(function () {
  798. const selectedIds = [];
  799. storageData.forEach(s => {
  800. const storageType = s.storage_type?.trim();
  801. $dropdown.find('option').each(function () {
  802. if ($(this).text().trim() === storageType) {
  803. selectedIds.push($(this).val());
  804. }
  805. });
  806. });
  807. $dropdown.val(selectedIds).trigger('change');
  808. // Wait for dropdown to be populated, then fill values
  809. setTimeout(() => {
  810. storageData.forEach(s => {
  811. const storageType = s.storage_type?.trim();
  812. const capacity = s.capacity;
  813. $dropdown.find('option').each(function () {
  814. if ($(this).text().trim() === storageType) {
  815. const id = $(this).val();
  816. if (!$(`#editDrinkingWaterForm #capacity_group_${id}`).length) {
  817. $capacityContainer.append(`
  818. <div class="col-md-4 form-group" id="capacity_group_${id}">
  819. <label>${storageType} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  820. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" value="${capacity}" placeholder="Enter Capacity (Liters)" required>
  821. </div>
  822. `);
  823. } else {
  824. // Important: Don't overwrite user modified values
  825. const currentVal = $(`#capacity_${id}`).val();
  826. if (!currentVal || parseFloat(currentVal) <= 0) {
  827. $(`#capacity_${id}`).val(capacity);
  828. }
  829. }
  830. }
  831. });
  832. });
  833. }, 300);
  834. }, '#editDrinkingWaterForm #storage_types');
  835. } else {
  836. $('#editDrinkingWaterForm #storage_type_container').hide();
  837. $capacityContainer.hide();
  838. // ❗ DO NOT empty container here, preserve previous fields
  839. }
  840. });
  841. /* function fetchStorageTypes() {
  842. $.ajax({
  843. url: '/gcc/api/gccschool/dropdown/getWaterStorage',
  844. method: 'GET',
  845. success: function (response) {
  846. $('#storage_types').empty();
  847. if (response.status === "OK") {
  848. response.data.forEach(item => {
  849. $('#storage_types').append(`<option value="${item.storage_water_id}" data-label="${item.storage_type}">${item.storage_type}</option>`);
  850. });
  851. $('#storage_types').select2({placeholder: "Select Storage Types", allowClear: true});
  852. }
  853. }
  854. });
  855. }*/
  856. function fetchStorageTypes(callback, dropdownSelector = '#storage_types') {
  857. $.ajax({
  858. url: '/gcc/api/gccschool/dropdown/getWaterStorage',
  859. method: 'GET',
  860. success: function (response) {
  861. const $dropdown = $(dropdownSelector);
  862. $dropdown.empty(); // Clear previous options
  863. if (response.status === "OK" && Array.isArray(response.data)) {
  864. response.data.forEach(item => {
  865. $dropdown.append(`<option value="${item.storage_water_id}" data-label="${item.storage_type}">${item.storage_type}</option>`);
  866. });
  867. $dropdown.select2({
  868. placeholder: "Select Storage Types",
  869. allowClear: false,
  870. minimumResultsForSearch: Infinity,
  871. closeOnSelect: false
  872. });
  873. if (typeof callback === "function") {
  874. callback();
  875. }
  876. }
  877. },
  878. error: function () {
  879. console.error("Failed to fetch storage types.");
  880. if (typeof callback === "function") {
  881. callback();
  882. }
  883. }
  884. });
  885. }
  886. /*$('#storage_types').on('change', function () {
  887. $('#storage_capacity_container').empty();
  888. $('#storage_types option:selected').each(function () {
  889. const id = $(this).val();
  890. const label = $(this).data('label');
  891. $('#storage_capacity_container').append(`
  892. <div class="col-md-4 form-group" id="capacity_group_${id}">
  893. <label>${label} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  894. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" placeholder="Enter Capacity (Liters)" required>
  895. </div>`);
  896. });
  897. });*/
  898. $('#storage_types').on('change', function () {
  899. const selected = $(this).val() || [];
  900. const container = $('#storage_capacity_container');
  901. // Step 1: Remove any capacity group not in selected list
  902. container.find('.form-group').each(function () {
  903. const id = $(this).attr('id')?.replace('capacity_group_', '');
  904. if (!selected.includes(id)) {
  905. $(this).remove(); // ❌ Remove only unselected
  906. }
  907. });
  908. // Step 2: Add any newly selected items if not already present
  909. $(this).find('option:selected').each(function () {
  910. const id = $(this).val();
  911. const label = $(this).data('label');
  912. // Add only if it doesn't already exist
  913. if (!container.find(`#capacity_group_${id}`).length) {
  914. container.append(`
  915. <div class="col-md-4 form-group" id="capacity_group_${id}">
  916. <label>${label} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  917. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" placeholder="Enter Capacity (Liters)" required>
  918. </div>
  919. `);
  920. }
  921. });
  922. });
  923. $(document).on('change', '#editDrinkingWaterForm #storage_types', function () {
  924. const selected = $(this).val() || [];
  925. const container = $('#editDrinkingWaterForm #storage_capacity_container');
  926. // Remove capacity groups not in selected
  927. container.find('.form-group').each(function () {
  928. const id = $(this).attr('id')?.replace('capacity_group_', '');
  929. if (!selected.includes(id)) {
  930. $(this).remove();
  931. }
  932. });
  933. // Add new selected
  934. $(this).find('option:selected').each(function () {
  935. const id = $(this).val();
  936. const label = $(this).data('label');
  937. if (!container.find(`#capacity_group_${id}`).length) {
  938. container.append(`
  939. <div class="col-md-4 form-group" id="capacity_group_${id}">
  940. <label>${label} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  941. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" placeholder="Enter Capacity (Liters)" required>
  942. </div>
  943. `);
  944. }
  945. });
  946. });
  947. /*$(document).on('change', '#editDrinkingWaterForm #storage_types', function () {
  948. const selected = $(this).val() || [];
  949. const container = $('#editDrinkingWaterForm #storage_capacity_container');
  950. // Step 1: Remove capacity fields that are no longer selected
  951. container.find('.form-group').each(function () {
  952. const id = $(this).attr('id')?.replace('capacity_group_', '');
  953. if (!selected.includes(id)) {
  954. $(this).remove(); // ❌ Only remove what is unselected
  955. }
  956. });
  957. // Step 2: Add capacity fields for newly selected items
  958. $(this).find('option:selected').each(function () {
  959. const id = $(this).val();
  960. const label = $(this).data('label');
  961. if (!container.find(`#capacity_group_${id}`).length) {
  962. container.append(`
  963. <div class="col-md-4 form-group" id="capacity_group_${id}">
  964. <label>${label} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  965. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" placeholder="Enter Capacity (Liters)" required>
  966. </div>
  967. `);
  968. }
  969. });
  970. });
  971. $(document).on('change', '#editDrinkingWaterForm #storage_types', function () {
  972. const $container = $('#editDrinkingWaterForm #storage_capacity_container');
  973. $container.empty(); // clear previous
  974. $('#editDrinkingWaterForm #storage_types option:selected').each(function () {
  975. const id = $(this).val();
  976. const label = $(this).data('label');
  977. $container.append(`
  978. <div class="col-md-4 form-group" id="capacity_group_${id}">
  979. <label>${label} Capacity Of Storage (Liters) <span class="text-danger">*</span></label>
  980. <input type="number" class="form-control storage-capacity" id="capacity_${id}" name="capacity_${id}" placeholder="Enter Capacity (Liters)" required>
  981. </div>
  982. `);
  983. });
  984. });*/
  985. $('#resetButton').click(function () {
  986. $('input[type="text"], input[type="number"]').val('');
  987. $('input[type="radio"]').prop('checked', false);
  988. $('select').val(null).trigger('change');
  989. $('#purifier_capacity_container').hide();
  990. $('#borwell_status_container').hide();
  991. $('#storage_type_container').hide();
  992. $('#storage_capacity_container').empty();
  993. $('#waterSupplyContainer').empty();
  994. });
  995. $('#drinkingWaterSubmitBtn').click(function (e) {
  996. e.preventDefault();
  997. let water = [], waterError = false;
  998. $('.water-source-checkbox:checked').each(function () {
  999. const id = $(this).val();
  1000. const supplyType = $(`input[name="water_supply_${id}"]:checked`).val();
  1001. if (!supplyType) waterError = true;
  1002. water.push({source_water_id: parseInt(id), supply_type: supplyType});
  1003. });
  1004. /*if (waterError || water.length === 0) {
  1005. return Swal.fire({ icon: 'info', title: 'Info', text: 'Please select supply type for all selected water sources.' });
  1006. }
  1007. const isPurifier = $('input[name="water_purifier_available"]:checked').val();
  1008. if (!isPurifier) return Swal.fire({ icon: 'info', title: 'Info', text: 'Please select water purifier availability.' });
  1009. const purifierCapacity = isPurifier === '1' ? $('#purifier_capacity').val() : null;
  1010. if (isPurifier === '1' && !purifierCapacity) return Swal.fire({ icon: 'info', title: 'Info', text: 'Enter Capacity for Purifier.' });
  1011. const isBorewell = $('input[name="borwell_status_available"]:checked').val();
  1012. if (!isBorewell) return Swal.fire({ icon: 'info', title: 'Info', text: 'Please select Borewell Status.' });
  1013. const borewellCount = isBorewell === '1' ? $('#no_of_borwells').val() : null;
  1014. if (isBorewell === '1' && !borewellCount) return Swal.fire({ icon: 'info', title: 'Info', text: 'Enter No of Borewells.' });
  1015. const isStorage = $('input[name="storage_status"]:checked').val();
  1016. let storage = [], storageError = false;
  1017. if (isStorage === '1') {
  1018. const selected = $('#storage_types').val();
  1019. if (!selected.length) return Swal.fire({ icon: 'info', title: 'Info', text: 'Please select Type of Storage.' });
  1020. selected.forEach(id => {
  1021. const capacity = $(`#capacity_${id}`).val();
  1022. if (!capacity) storageError = true;
  1023. storage.push({ storage_water_id: parseInt(id), capacity: parseFloat(capacity) });
  1024. });
  1025. if (storageError) return Swal.fire({ icon: 'info', title: 'Info', text: 'Please enter capacity for all selected storage types.' });
  1026. }*/
  1027. if (waterError || water.length === 0) {
  1028. return Swal.fire({
  1029. icon: 'info',
  1030. title: 'Info',
  1031. text: 'Please select supply type for all selected water sources.',
  1032. allowOutsideClick: false,
  1033. allowEscapeKey: false,
  1034. allowEnterKey: false,
  1035. showConfirmButton: true
  1036. });
  1037. }
  1038. const isPurifier = $('input[name="water_purifier_available"]:checked').val();
  1039. if (!isPurifier) {
  1040. return Swal.fire({
  1041. icon: 'info',
  1042. title: 'Info',
  1043. text: 'Please select water purifier availability.',
  1044. allowOutsideClick: false,
  1045. allowEscapeKey: false,
  1046. allowEnterKey: false,
  1047. showConfirmButton: true
  1048. });
  1049. }
  1050. const purifierCapacity = isPurifier === '1' ? $('#purifier_capacity').val() : null;
  1051. /*if (isPurifier === '1' && !purifierCapacity && purifierCapacity <=0 ) {
  1052. return Swal.fire({
  1053. icon: 'info',
  1054. title: 'Info',
  1055. text: 'Enter Capacity for Purifier.',
  1056. allowOutsideClick: false,
  1057. allowEscapeKey: false,
  1058. allowEnterKey: false,
  1059. showConfirmButton: true
  1060. });
  1061. }*/
  1062. /*if (isPurifier === '1') {
  1063. if (!purifierCapacity || purifierCapacity <= 0) {
  1064. return Swal.fire({
  1065. icon: 'info',
  1066. title: 'Info',
  1067. text: 'Enter Capacity for Purifier and greater than 0.',
  1068. allowOutsideClick: false,
  1069. allowEscapeKey: false,
  1070. allowEnterKey: false,
  1071. showConfirmButton: true
  1072. });
  1073. }
  1074. }*/
  1075. if (isPurifier === '1') {
  1076. if (!purifierCapacity || purifierCapacity <= 0) {
  1077. return Swal.fire({
  1078. icon: 'info',
  1079. title: 'Info',
  1080. text: !purifierCapacity ? 'Enter Capacity for Purifier.' : 'Capacity for Purifier must be greater than 0.',
  1081. allowOutsideClick: false,
  1082. allowEscapeKey: false,
  1083. allowEnterKey: false,
  1084. showConfirmButton: true
  1085. });
  1086. }
  1087. }
  1088. /*if (purifierCapacity <=0 ) {
  1089. return Swal.fire({
  1090. icon: 'info',
  1091. title: 'Info',
  1092. text: ' Capacity for Purifier must be greater than 0.',
  1093. allowOutsideClick: false,
  1094. allowEscapeKey: false,
  1095. allowEnterKey: false,
  1096. showConfirmButton: true
  1097. });
  1098. }*/
  1099. const isBorewell = $('input[data-label="Borewell"]').is(':checked') ? '1' : '0';
  1100. if (!isBorewell) {
  1101. return Swal.fire({
  1102. icon: 'info',
  1103. title: 'Info',
  1104. text: 'Please select Borewell Status.',
  1105. allowOutsideClick: false,
  1106. allowEscapeKey: false,
  1107. allowEnterKey: false,
  1108. showConfirmButton: true
  1109. });
  1110. }
  1111. const borewellCount = isBorewell === '1' ? $('#no_of_borwells').val() : null;
  1112. if (isBorewell === '1') {
  1113. if (!borewellCount || borewellCount <= 0) {
  1114. return Swal.fire({
  1115. icon: 'info',
  1116. title: 'Info',
  1117. text: !borewellCount ? 'Enter No of Borewells.' : 'No of Borewells must be greater than 0.'
  1118. });
  1119. }
  1120. }
  1121. /* if (isBorewell === '1') {
  1122. if (!borewellCount || borewellCount <= 0) {
  1123. return Swal.fire({
  1124. icon: 'info',
  1125. title: 'Info',
  1126. text: 'Enter No of Borewells and greater than 0.',
  1127. allowOutsideClick: false,
  1128. allowEscapeKey: false,
  1129. allowEnterKey: false,
  1130. showConfirmButton: true
  1131. });
  1132. }
  1133. }*/
  1134. /* if (isBorewell === '1' && !borewellCount) {
  1135. return Swal.fire({
  1136. icon: 'info',
  1137. title: 'Info',
  1138. text: 'Enter No of Borewells.',
  1139. allowOutsideClick: false,
  1140. allowEscapeKey: false,
  1141. allowEnterKey: false,
  1142. showConfirmButton: true
  1143. });
  1144. }
  1145. if (borewellCount <=0 ) {
  1146. return Swal.fire({
  1147. icon: 'info',
  1148. title: 'Info',
  1149. text: ' Borewells must be greater than 0.',
  1150. allowOutsideClick: false,
  1151. allowEscapeKey: false,
  1152. allowEnterKey: false,
  1153. showConfirmButton: true
  1154. });
  1155. }*/
  1156. const isStorage = $('input[name="storage_status"]:checked').val();
  1157. let storage = [], storageError = false;
  1158. // Step 1: Check if Storage status is selected
  1159. if (!isStorage) {
  1160. return Swal.fire({
  1161. icon: 'info',
  1162. title: 'Info',
  1163. text: 'Please select Storage Status.',
  1164. allowOutsideClick: false,
  1165. allowEscapeKey: false,
  1166. allowEnterKey: false,
  1167. showConfirmButton: true
  1168. });
  1169. }
  1170. // Step 2: If "Yes", validate selected storage types and capacity
  1171. if (isStorage === '1') {
  1172. const selectedTypes = $('#storage_types').val();
  1173. if (!selectedTypes || selectedTypes.length === 0) {
  1174. return Swal.fire({
  1175. icon: 'info',
  1176. title: 'Info',
  1177. text: 'Please select Type of Storage.',
  1178. allowOutsideClick: false,
  1179. allowEscapeKey: false,
  1180. allowEnterKey: false,
  1181. showConfirmButton: true
  1182. });
  1183. }
  1184. selectedTypes.forEach(id => {
  1185. const capacity = $(`#capacity_${id}`).val();
  1186. if (!capacity || isNaN(capacity) || parseFloat(capacity) <= 0) {
  1187. storageError = true;
  1188. } else {
  1189. storage.push({
  1190. storage_water_id: parseInt(id),
  1191. capacity: parseFloat(capacity)
  1192. });
  1193. }
  1194. });
  1195. if (storageError ) {
  1196. return Swal.fire({
  1197. icon: 'info',
  1198. title: 'Info',
  1199. text: 'Please enter valid capacity for all selected storage types.',
  1200. allowOutsideClick: false,
  1201. allowEscapeKey: false,
  1202. allowEnterKey: false,
  1203. showConfirmButton: true
  1204. });
  1205. }
  1206. }
  1207. const requestData = {
  1208. school_id: schoolId,
  1209. water,
  1210. is_purifier: isPurifier,
  1211. purifier_capacity: purifierCapacity,
  1212. is_borewell: isBorewell,
  1213. borewell_count: borewellCount,
  1214. is_storage: isStorage,
  1215. storage
  1216. };
  1217. $.ajax({
  1218. url: '/gcc/api/gccschool/schoolproperty/saveDrinkingWater',
  1219. method: 'POST',
  1220. contentType: 'application/json',
  1221. data: JSON.stringify(requestData),
  1222. success: function (response) {
  1223. if (response.status === "OK") {
  1224. Swal.fire({icon: "success", title: "Success", text: "Drinking water details submitted successfully!"}).then(() => location.reload());
  1225. } else {
  1226. Swal.fire({icon: "error", title: "Submission Failed", text: response.message || "Please try again."});
  1227. }
  1228. },
  1229. error: function (xhr) {
  1230. let errorMessage = "An error occurred while submitting the form.";
  1231. try {
  1232. // If responseText is a valid JSON string
  1233. const response = JSON.parse(xhr.responseText);
  1234. if (response.message) {
  1235. errorMessage = response.message;
  1236. }
  1237. } catch (e) {
  1238. // fallback: responseText is not JSON, maybe plain text
  1239. if (xhr.responseText) {
  1240. errorMessage = xhr.responseText;
  1241. }
  1242. }
  1243. Swal.fire({
  1244. icon: "error",
  1245. title: "Error",
  1246. text: errorMessage // ✅ Make sure this is always a string
  1247. });
  1248. }
  1249. });
  1250. });
  1251. });
  1252. function resetDrinkingWaterFields() {
  1253. console.log("Reset button clicked - Drinking Water");
  1254. // Uncheck all radio buttons and checkboxes
  1255. $('input[type="radio"]').prop('checked', false);
  1256. $('input[type="checkbox"]').prop('checked', false);
  1257. // Clear input fields
  1258. $('#purifier_capacity').val('');
  1259. $('#no_of_borwells').val('');
  1260. // Hide dependent sections
  1261. $('#purifier_capacity_container').hide();
  1262. $('#borwell_status_container').hide();
  1263. $('#storage_type_container').hide();
  1264. // Reset multi-select dropdown
  1265. $('#storage_types').val(null).trigger('change');
  1266. // ✅ Keep checkboxes visible but hide extra fields that depend on them
  1267. $('#water_sources_container').show(); // Ensures checkboxes remain visible
  1268. // Hide and clear dependent section
  1269. $('#waterSupplyContainer').hide().empty(); // 👈 Hides + removes previous dynamic HTML
  1270. // Hide dependent section
  1271. }
  1272. // ✅ Add event listener to show dependent fields when checkbox is clicked
  1273. $(document).on('change', 'input[type="checkbox"]', function () {
  1274. if ($('input[type="checkbox"]:checked').length > 0) {
  1275. $('#waterSupplyContainer').show(); // Show if at least one checkbox is checked
  1276. } else {
  1277. $('#waterSupplyContainer').hide(); // Hide if no checkboxes are checked
  1278. }
  1279. });
  1280. // Event Listener for Reset Button (Drinking Water section)
  1281. $(document).on('click', '#resetButton', function (event) {
  1282. event.preventDefault();
  1283. resetDrinkingWaterFields();
  1284. });
  1285. // Event Listener for Reset Button (Drinking Water section)
  1286. </script>
  1287. </div>
  1288. </body>
  1289. </html>