communityhallv22/target/classes/templates/user/communityHallList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="~{fragments/head :: head}"></head>

<!--<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"/>-->
<link rel="stylesheet" type="text/css" href="css\leaflet.css">

<style>
	/* Hide button and div2 on small screens */
	#map {
		width: 100%;
		height: 1000px;
		/* Set a height for the map */
		display: none;
		/* Hide initially */
	}

	@media only screen and (max-width: 768px) {
		#toggleButton {
			display: none;
		}

		#div2 {
			display: none;
		}

		.table-container {
			height: 300px;
			/* Adjust height as needed */
			overflow-y: auto;
		}
	}

	/* Optional CSS styling */
	.thumbnail {
		cursor: pointer;
	}

	.modal-dialog {
		margin: 30px auto;
	}

	.carousel-item img {
		width: 100%;
		height: auto;
	}

	.carousel-image {
		max-height: 300px;
		/* Adjust height as needed */
		width: auto;
		margin: 0 auto;
		/* Center the image horizontally */
	}


	/* Custom CSS to change the color of carousel controls */
	.carousel-control-prev,
	.carousel-control-next {
		color: black;
	}

	#enteredDetails {
		display: none
	}

	.card {
		max-height: 75%;
	}

	.container {
		display: flex;
		justify-content: flex-end;
		/* Align children to the right */
	}

	.align-right {
		text-align: right;
	}

	.table-responsive-md {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.table {
		table-layout: auto;
		width: 100%;
		word-wrap: break-word;
	}

	.table td {
		word-wrap: break-word;
		white-space: normal;
	}

	.swal2-container {
		z-index: 9999999999999 !important;
		/* Adjust this value if needed */
	}

	.border-primary {
		border-left: white;
	}
</style>

<body>
	<!-- Pre-loader start -->
	<div class="theme-loader">
		<div class="ball-scale">
			<div class='contain'>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
				<div class="ring">
					<div class="frame"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- Pre-loader end -->
	<div id="pcoded" class="pcoded">

		<div class="pcoded-container">
			<!-- Menu header start -->
			<nav th:replace="~{fragments/nav-user :: nav}"></nav>

			<!-- Menu header end -->
			<div class="pcoded-main-container">
				<nav th:replace="~{fragments/nav-usermenu :: nav}"></nav>
				<div class="pcoded-wrapper">
					<div class="pcoded-content">
						<div class="pcoded-inner-content">
							<!-- Main-body start -->
							<div class="main-body">
								<div class="page-wrapper">
									<!-- Page-header start -->
									<div class="page-header m-t-20">
									</div>
									<!-- Page-header end -->
									<!-- Page body start -->
									<div class="page-body">
										<div class="card">
											<div class="card-header">
												<a href="#" id="termsLink">Click here to view Terms and Conditions</a> |
												<a href="#" id="listLink">Click here to view List of Community Centers</a>
											</div>
											<div class="card-body">
												<div id="termsContent" style="display: none;">
													<!-- Terms and Conditions content -->
													<h4>Rules and Regulations</h4>
													<iframe src="media/images/CC Rules & Regulations for Online _Tamil.pdf"
															width="100%" height="600px"></iframe>
												</div>

												<div id="listContent" style="display: none;">
													<h4>List of Community Centers</h4>
													<iframe src="media/images/Community_Centers_list.pdf"
														width="100%" height="600px"></iframe>
												</div>
												<div id="map" style="display:none">
												</div>


											</div>


										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- MOdel for Map-->
	<div class="modal fade" id="hallDetailsModal" tabindex="-1" aria-labelledby="hallDetailsModalLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="hallDetailsModalLabel">Hall Details</h5>
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div id="modalContent"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary booknow">Book Now</button>
				</div>
			</div>
		</div>
	</div><!-- end of Model Map-->
	<!-- Login Modal-->
	<!--<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>-->
	<!--<script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>-->
	<script type="text/javascript" src="js\leaflet.js"></script>
	<div th:replace="~{fragments/loginreg :: div}"></div>
	<script th:replace="~{fragments/script :: script}"></script>
	<script th:replace="~{fragments/logRegiOtpScript :: script}"></script>
	<script>
		document.addEventListener("DOMContentLoaded", function () {
			const termsLink = document.getElementById("termsLink");
			const listLink = document.getElementById("listLink");
			const termsContent = document.getElementById("termsContent");
			const listContent = document.getElementById("listContent");
			const listmap = document.getElementById("maplink");
			const mapcontent = document.getElementById("map");

			// Show terms content and hide list content
			termsLink.addEventListener("click", function (event) {
				event.preventDefault();
				termsContent.style.display = "block";
				listContent.style.display = "none";
				mapcontent.style.display = "none";
			});

			// Show list content and hide terms content
			listLink.addEventListener("click", function (event) {
				event.preventDefault();
				termsContent.style.display = "none";
				listContent.style.display = "block";
				mapcontent.style.display = "none";
			});
			listmap.addEventListener("click", function (event) {
				event.preventDefault();
				showMap()
				termsContent.style.display = "none";
				listContent.style.display = "none";
			});

			// Initially hide list content
			listContent.style.display = "none";
		});
		var map;
		var mapInitialized = false;

		// Define custom icon using Font Awesome
		var customIcon = L.divIcon({
			html: '<i class="fa fa-map-pin" style="color:red;font-size:15px" title="Click here"></i>',
			iconSize: [32, 32],
			className: 'custom-icon'
		});

		function showMap() {
			var mapElement = document.getElementById("map");
			mapElement.style.display = 'block';
			//console.log('Map container made visible');

			if (!mapInitialized) {
				mapInitialized = true;
				//console.log('Initializing map after delay');
				setTimeout(mapInit, 100); // Delay to ensure the map container is rendered
			}

			// Call anotherFunction after the map is shown
			anotherFunction();
		}

		function mapInit() {
			//console.log('Initializing map');
			map = L.map('map').setView([14.57199865451665, 85.67084692525447], 4);

			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				attribution: 'Map data © OpenStreetMap contributors',
				maxZoom: 19
			}).addTo(map);

			fetchHallCoordinates();
		}

		function fetchHallCoordinates() {
			//console.log('Fetching hall coordinates');
			$.ajax({
				url: '/communityhall/user/api/getallhallcoordinates',
				type: 'GET',
				success: function (data) {
					//console.log('Data fetched successfully:', data);

					if (data.length === 0) {
						console.warn('No data returned from the API');
						return;
					}

					map.setView([parseFloat(data[0].latitude), parseFloat(data[0].longitude)], 10);

					data.forEach(function (coord) {
						//console.log('Processing coordinate:', coord);

						var marker = L.marker([parseFloat(coord.latitude), parseFloat(coord.longitude)], {icon: customIcon}).addTo(map);

						var hallImages = coord.hallImage;
						// Generate modal content with Bootstrap card and grid
						var hallImageHtml = '';
						if (hallImages && Array.isArray(hallImages) && hallImages.length > 0) {
							hallImageHtml += '<div class="image-container">';
							hallImages.forEach(function (image) {
								// Add a class to the image to specify fixed size
								hallImageHtml += '<img src="' + image.hallImage + '" class="img-fluid fixed-size-image" alt="Hall Image">';
							});
							hallImageHtml += '</div>';
						}



						var modalContent = '<div class="card border-primary">' +
							hallImageHtml +
							'<div class="card-body bg-light" style="text-align:left">' +
							'<p class="card-text">Hall Name: <strong>' + coord.hallName + '</strong></p>' +
							'<div class="row mb-2" >' +
							'<div class="col-12">' +
							'<p class="card-text">Address: <strong> ' + coord.doorNo + ',' + coord.area + ',' + coord.street + ',' + coord.landMark + '</strong></p>' +
							'</div>' +
							'</div>' +
							'<div class="row mb-2">' +
							'<div class="col-6">' +
							'<p class="card-text">Seating Capacity: <strong> ' + coord.seatingCapacity + '</strong></p>' +
							'</div>' +
							'<div class="col-6">' +
							'<p class="card-text">Parking Capacity: <strong> ' + coord.parkingCapacity + '</strong></p>' +
							'</div>' +
							'</div>' +
							'<div class="row mb-2">' +
							'<div class="col-6">' +
							'<p class="card-text">Deposit Amount: <strong> Rs. ' + coord.depositAmount + '</strong></p>' +
							'</div>' +
							'<div class="col-6">' +
							'<p class="card-text">Full Day Rent: <strong> Rs. ' + coord.fullDayRent + '</strong></p>' +
							'</div>' +
							'</div>' +
							'<div class="row mb-2">' +
							'<div class="col-6">' +
							'<p class="card-text">Half Day Rent: <strong> Rs. ' + coord.halfDayRent + '</strong></p>' +
							'</div>' +
							'</div>' +
							'</div>' +
							'</div>';


						marker.on('click', function () {
							$('#modalContent').html(modalContent);
							$('#hallDetailsModal').modal('show');

							// Add event listener to "Book Now" button in modal
							$('#hallDetailsModal').on('click', '.booknow', function () {
								redirectToPage(coord.hallId); // Pass hallId to redirectToPage function
							});
						});



						// Add hover event to show tooltip
						marker.on('mouseover', function (e) {
							var tooltip = L.tooltip({
								permanent: false,
								direction: 'top',
								className: 'custom-tooltip'
							})
								.setContent('Click here')
								.setLatLng(e.latlng);
							marker.bindTooltip(tooltip).openTooltip();
						});

						marker.on('mouseout', function () {
							marker.closeTooltip();
						});
					});
				},
				error: function (xhr, status, error) {
					console.error('Error fetching locations:', error);
				}
			});
		}

		function redirectToPage(hallId) {
			window.location.href = '/hallbookingform?hallId=' + hallId;
		}

		function anotherFunction() {
			//console.log('Another function called');
		}
	</script>


</body>

</html>