gccoffice_education_project/frontend/school/dashboard.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>
	body {
		background-color: #f8f9fa;
	}

	.header {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.table {
		border: 1px solid #dee2e6;
	}

	.table th,
	.table td {
		border: 1px solid #dee2e6;
		padding: 10px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-top: 20px;
		border-bottom: 2px solid #007bff;
		padding-bottom: 5px;
	}

	.form-group {
		margin-top: 15px;
	}

	.radio-group {
		display: flex;
		gap: 20px;
		margin-top: 10px;
	}

	/* 🆕 Added Styles for Better Layout */
	.card {
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		background-color: white;
	}

	.card .row {
		margin-top: 10px;
	}

	.card .col-md-3 {
		margin-bottom: 15px;
	}

	.form-control {
		border-radius: 5px;
	}

	/* 🆕 Centering the Filter Button */
	.text-center {
		text-align: center;
	}
</style>

<body>
	<div class="wrapper">
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<div class="page-wrap">
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>

			<div class="main-content">
				<div class="container">
					<div class="header">School Module - Dashboard</div>

					<hr style="border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px;">

					<!-- Card 1: School Information -->
					<div class="col-md-12">
						<div class="card">
							<div class="row">
								<div class="col-md-3">
									<label>Search with UDISE Number</label>
									<select class="form-control" id="udiseDropdown">
									   <option value="">Select UDISE Number</option>
									</select>
								</div>
								<div class="col-md-3">
									<label>Category</label>
									<select class="form-control" id="categoryDropdown">
										<option value="">Select Category</option>
									</select>
								</div>
								<div class="col-md-3">
									<label>Zone</label>
									<select class="form-control" id="zoneDropdown">
										<option value="">Select Zone</option>
									</select>
								</div>
								<div class="col-md-3">
									<label>Ward</label>
									<select class="form-control" id="wardDropdown">
										<option value="">Select Ward</option>
									</select>
								</div>
							</div> <!-- Row End -->

							<!-- Centered Filter Button -->
							<div class="row mt-3">
								<div class="col-12 text-center">
									<button id="filterButton" class="btn btn-primary " style="background-color: #0D587B;">Filter</button>
								<button id="resetButton" class="btn btn-secondary">Reset</button>
								</div>
							</div>

						</div> <!-- Card End -->
					</div> <!-- Col-md-12 End -->

					<!-- 🆕 DataTable -->
					<div class="card">
						<div class="table-responsive">
							<input type="hidden" id="loggedUserId" th:value="${user_id}">

							<table id="schoolTable" class="table table-bordered table-striped">
								<thead class="thead-dark">
									<tr>
										<th>S.No</th>
										<th>UDISE Number</th>
										<th>Name</th>
										<th>Category</th>
										<th>Zone</th>
										<th>Ward</th>
										<th>Address</th>
									</tr>
								</thead>
								<tbody id="schoolTableBody">
									<!-- Rows will be populated by JS -->
								</tbody>
							</table>
						</div>
					</div> <!-- DataTable Card End -->


				</div> <!-- Container End -->
			</div> <!-- Main Content End -->

			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
		</div>

		<script th:replace="~{fragments/modules/base/script :: script}"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
		<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
		<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>

		<!-- 🆕 DataTable Initialization Script -->
		<script>
			$(document).ready(function () {
				$('#schoolTable').DataTable({
				    paging: true,
				    responsive: false,
				    searching: true,
				    select: false,
				    processing: false,
				    ordering: true,
				    info: true,
				    language: {
				        zeroRecords: "No schools found for this user.",
				        emptyTable: "No data available in table"
				    }
				});
			});
			
			function loadDropdown(userId, type, dropdownId, placeholderText) {
				$.ajax({
					url: "/gcc/api/gccschool/dropdown/getAllDropdownValues",
					method: "GET",
					data: { user_id: userId, type: type },
					success: function (response) {
						console.log(`Dropdown (${type}) response:`, response);
						let dropdown = $(`#${dropdownId}`);
						dropdown.empty().append(`<option value="">${placeholderText}</option>`);

						if (response[0].Message === "Success" && response[0].Data.length > 0) {
							response[0].Data.forEach(item => {
								dropdown.append(`<option value="${item}">${item}</option>`);
							});
						}
					},
					error: function () {
						alert(`Failed to load ${type} dropdown`);
					}
				});
			}


			$('#filterButton').click(function () {
			    const userId = $('#loggedUserId').val();
			    const udise = $('#udiseDropdown').val();
			    const category = $('#categoryDropdown').val();
			    const zone = $('#zoneDropdown').val();
			    const ward = $('#wardDropdown').val();

			    $.ajax({
			        url: '/gcc/api/gccschool/schoolproperty/filterSchools',
			        method: 'GET',
			        data: {
			            user_id: userId,
			            udise: udise,
			            category: category,
			            zone: zone,
			            ward: ward
			        },
			        success: function (response) {
			            const table = $('#schoolTable').DataTable();
			            table.clear();

			            if (response.length > 0 && response[0].Message === "Success" && response[0].Data.length > 0) {
			                let schoolList = response[0].Data;

			                schoolList.forEach((school, index) => {
			                    table.row.add([
			                        index + 1,
			                        school.udise || '',
			                        school.school_name || '',
			                        school.category || '',
			                        school.zone || '',
			                        school.division || '',
			                        school.address || ''
			                    ]);
			                });
			            }

			            table.draw(); // Draw table whether data exists or not
			        },
			        error: function () {
			            alert("Error fetching filtered school data.");
			        }
			    });
			});


			$('#filterButton').click(function () {
			    filterSchools(); // Call the function on button click
			});



			function loadSchoolsForUser(userId) {
				$.ajax({
					url: "/gcc/api/gccschool/schoolproperty/getLoginDetails",
					method: "GET",
					data: { user_id: userId },
					success: function (response) {
						if (response.length > 0 && response[0].Message === "Success") {
							let schoolList = response[0].Data;

							// Destroy and reinitialize the DataTable with createdRow
							if ($.fn.DataTable.isDataTable('#schoolTable')) {
								$('#schoolTable').DataTable().destroy();
							}

							const table = $('#schoolTable').DataTable({
								createdRow: function (row, data, dataIndex) {
									$(row).attr("onclick", `redirectToDetails(${schoolList[dataIndex].id})`);
								}
							});

							table.clear();

							schoolList.forEach((school, index) => {
								table.row.add([
									index + 1,
									school.udise || '',
									school.school_name || '',
									school.category || '',
									school.zone || '',
									school.division || '',
									school.address || ''
								]);
							});

							table.draw();
						} else {
							alert("No schools found for this user.");
						}
					},
					error: function () {
						alert("Failed to load schools.");
					}
				});
			}

			// ⏬ Call this on page load with the logged-in user's ID
			$(document).ready(function () {
			    const userId = $('#loggedUserId').val();
			    loadSchoolsForUser(userId);
			    loadDropdown(userId, 'udise', 'udiseDropdown', 'Select UDISE Number');
			    loadDropdown(userId, 'category', 'categoryDropdown', 'Select Category');
			    loadDropdown(userId, 'zone', 'zoneDropdown', 'Select Zone');
			    loadDropdown(userId, 'ward', 'wardDropdown', 'Select Ward');

			   // $('#schoolTable').DataTable();
			});

			function redirectToDetails(schoolId) {
				window.location.href = "/gcc/school/otherdetails?schoolId=" + schoolId;
			}
			$('#resetButton').click(function () {
			    location.reload(); // This will reload the entire page
			});


		</script>
</body>

</html>