<!-- Bootstrap core JS-->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
		<!-- Core theme JS-->
		<script src="js/scripts.js"></script>
		<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
		<!-- * *                               SB Forms JS                               * *-->
		<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
		<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
		<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
		<!-- 스크립트 부분 -->
		<script type="text/javascript"
			src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5aedc9bc48ee8cf5b21c312d3905ad16&libraries=services"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
		<!--자바 스크립트  -->
		<script>
		var geocoder = new kakao.maps.services.Geocoder();
		// 지도 표시
		var mapContainer = document.getElementById('map'); // 지도를 표시할 div
		var mapOption = {
			center : new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
			level : 7 // 지도의 확대 레벨
		};
		
		// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
		var map = new kakao.maps.Map(mapContainer, mapOption);
		
		if (navigator.geolocation) {
		    navigator.geolocation.getCurrentPosition(function(position) {
		      var lat = position.coords.latitude; // 위도
		      var lon = position.coords.longitude; // 경도

		      var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
		      var message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

		      // 마커와 인포윈도우를 표시합니다
		      displayMarker(locPosition, message);
		    });
		}
		// 병원 위치 정보 확인
		function getUserLocation() {
			  if (navigator.geolocation) {
			    navigator.geolocation.getCurrentPosition(function(position) {
			      var lat = position.coords.latitude; // 위도
			      var lon = position.coords.longitude; // 경도

			      var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
			      var message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

			      // 마커와 인포윈도우를 표시합니다
			      displayMarker(locPosition, message);

			      // 이제 lat과 lon을 사용할 수 있으므로 geocoder.coord2RegionCode와 console.log에서 사용할 수 있습니다
			      geocoder.coord2RegionCode(lon, lat, function(result, status) {
			        if (status === kakao.maps.services.Status.OK) {
			          var fullAddress = result[0].address_name;
			          console.log('전체 주소: ' + fullAddress);

			          // 여기에서 슬라이싱을 통해 원하는 부분의 주소를 얻어냅니다.
			          var slicedAddress = fullAddress.slice(0, 12); // 예: 주소의 처음 12글자 ex(경산북도 경산시 하양읍)
			          console.log('슬라이싱된 주소: ' + slicedAddress);

			          // 그리고 나서 이 주소를 API에 전달합니다.
			          $.ajax({
			            url: '/hbz/Hospital.do',  // 요청을 보낼 API의 URL을 적어주세요.
			            type: 'GET',
			            data: {address: slicedAddress},
			            dataType: 'html', // 서버로 보내는 데이터의 타입을 'json'으로 지정합니다
			            success: function(response) {
			              // 서버로부터 응답이 올 경우 실행할 함수
			              // 'response' 변수에는 서버로부터 받은 응답이 들어있습니다.
			              console.log(response);
			              $('body').html(response);
			              // 사용자 위치를 사용하는 코드를 여기에 위치시킵니다.
			              // 예: 위치에 따른 마커 표시 등
			            },
			            error: function(jqXHR, textStatus, errorThrown) {
			              console.log("AJAX 요청 실패: " + textStatus);
			              console.log("에러 내용: " + errorThrown);
			            }
			          });
			        }
			      });
			    });
			  } else {
			    // HTML5의 GeoLocation을 사용할 수 없을 때 처리
			    console.log('Geolocation을 지원하지 않는 브라우저입니다.');
			  }
			}

		// 현재위치 마커 및 정보 
		function displayMarker(locPosition, message) {
			var marker = new kakao.maps.Marker({
				map : map,
				position : locPosition
			});

			var iwContent = message;
			var iwRemoveable = true;

			var infowindow = new kakao.maps.InfoWindow({
				content : iwContent,
				removable : iwRemoveable
			});

			infowindow.open(map, marker);
			map.setCenter(locPosition);
		}
		
		// 위치 지역 마킹 찍는 함수
		var positions = [
	    <c:forEach var="hospital" items="${hospitalList}" varStatus="status">
	        {
	            title: '${hospital.yadmNm}',
	            ykiho: '${hospital.ykiho}',
	            latlng: new kakao.maps.LatLng(${hospital.YPos}, ${hospital.XPos})
	        },
	        <c:if test="${!status.last}"></c:if>
	    </c:forEach>
		];
		
		
		for (var i = 0; i < positions.length; i ++) {
		    // 마커 이미지의 이미지 크기 입니다
		    var imageSize = new kakao.maps.Size(24, 35); 
		    
		    var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
		    
		    // 마커 이미지를 생성합니다    
		    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
		    
		 // 마커를 생성합니다
		    var marker = new kakao.maps.Marker({
		        map: map, // 마커를 표시할 지도
		        position: positions[i].latlng, // 마커를 표시할 위치
		        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		        image : markerImage // 마커 이미지 
		    });

		    // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
		    var iwContent = positions[i].title;
		    var iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
		        
		    // 인포윈도우를 생성합니다
		    var infowindow = new kakao.maps.InfoWindow({
		        content : iwContent,
		        removable : iwRemoveable
		    });
		        
		    // 마커에 클릭이벤트를 등록합니다
		    kakao.maps.event.addListener(marker, 'click', (function(marker, infowindow, ykiho) {
		        return function() {
		            // 마커 위에 인포윈도우를 표시합니다
		            infowindow.open(map, marker);  
		            console.log(ykiho);
		            $.ajax({
		                url: '/hbz/HospitalInfo.do', // API 경로
		                type: 'GET', // 요청 방식
		                data: {
		                	ykiho: ykiho
		                },
		                success: function(data) {
		                	console.log(data);
		                	$('body').html(data);
		                },
		                error: function(error) {
		                	console.log("실패");
		                }
		            });
		        };
		    })(marker, infowindow, positions[i].ykiho));
		    
		    // 사용자의 위치를 API부분으로 옮긴다
		    var userPosition;
			
		    if (navigator.geolocation) {
		        navigator.geolocation.getCurrentPosition(function(position) {
		            userPosition = {
		                latitude: position.coords.latitude,
		                longitude: position.coords.longitude
		            };
		        });
		    }
		}
		</script>
		<script type="text/javascript">

            function closeModalAndScrollToSection() {
                // 모달들을 선택
                var modals = document.querySelectorAll(".hospital-modal");

                modals.forEach(function (modal) {
                    // 모달 인스턴스 가져오기
                    var modalInstance = bootstrap.Modal.getInstance(modal);

                    // 모달을 닫음
                    if (modalInstance) {
                        modalInstance.hide();
                    }

                    // 모달이 완전히 닫힌 후에 실행될 이벤트 리스너
                    modal.addEventListener('hidden.bs.modal', function onModalHidden() {
                        // 이 이벤트 리스너를 제거함으로써 다시는 실행되지 않음
                        modal.removeEventListener('hidden.bs.modal', onModalHidden);

                        const mapElement = document.getElementById('map');
                        if (mapElement) {
                            // 'map' 섹션의 시작 부분으로 스크롤
                            mapElement.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    });
                });
            }
        </script>