@extends("academy.layout", ['service' => 'academy'])

@section("academy-css")
    {!! resource('css/academy/sub.css') !!}
@endsection

@section("academy-content")
<div id="wrap" class="locationPage">
    <div class="max-width">
        <div class="pageTitle">
            <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
            <h1>찾아오시는 길</h1>
        </div>

        <article class="mapWrap">
            <div class="map" id="map">
                <div id="branchMap" class="branch-map" style="width: 100%; height: 100%;"></div>
                <div class="custom-controls">
                    <button id="zoom-default"><span class="el-hide">기본</span></button>
                    <button id="zoom-out"><span class="el-hide">축소</span></button>
                    <button id="zoom-in"><span class="el-hide">확대</span></button>
                </div>
            </div>

            <div class="infoWrap">
                <div class="box">
                    <p class="tit"><b>주소</b></p>
                    <p>06241) 서울특별시 강남구 강남대로84길 16, 4,5,6층 (역삼동, 제이스타워) (상담 및 안내 6F) </p>
                </div>
                <div class="box">
                    <p class="tit"><b>연락처</b></p>
                    <p><a href="tel:02-3444-8047" id="phone">02-3444-8047</a></p>
                </div>
                <div class="box">
                    <p class="tit"><b>근무시간</b></p>
                    <p>평일 9:30~17:30</p>
                </div>
                <div class="box">
                    <p class="tit"><b>찾아오시는 길</b></p>
                    <p>이디엠글로벌캠퍼스는 지하철 이용시 강남역 2호선 1, 2번 출구(도보 3분), 강남역 신분당선 3번 출구(도보 3분)에서 하차하시면 됩니다. 자가용 이용 시 제이스타워 주차 불가로 대중교통 이용을 부탁 드립니다.</p>
                </div>
            </div>
        </article>
    </div>
</div>



@include("common.popup.consult" )

@endsection

@section("academy-script")
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=8qqra6ajrr"></script>
    <script type="text/javascript">
        var mapOptions = {
            center: new naver.maps.LatLng(37.496700, 127.030064),
            zoom: 16,
            zoomControl: false,
            zoomControlOptions: {
                style: naver.maps.ZoomControlStyle.SMALL,
                position: naver.maps.Position.RIGHT_BOTTOM
            }
        };

        var map = new naver.maps.Map(document.getElementById('map'), mapOptions);

        var marker = new naver.maps.Marker({
            position: new naver.maps.LatLng(37.496700, 127.030064),
            map: map
        });

        // 커스텀 컨트롤 버튼
        document.getElementById("zoom-in").addEventListener("click", function () {
            map.setZoom(map.getZoom() + 1);
        });
        document.getElementById("zoom-out").addEventListener("click", function () {
            map.setZoom(map.getZoom() - 1);
        });
        document.getElementById("zoom-default").addEventListener("click", function () {
            map.setZoom(16);
			map.setCenter(new naver.maps.LatLng(37.496700, 127.030064));
        });

        // 지도 축적 안 보이게 처리
        const hideScaleControl = () => {
            const divs = document.querySelectorAll('#map div');
            for (const div of divs) {
                if (div.innerText.match(/^\d+(m|km)$/)) {
                    div.style.display = 'none';
                    break;
                }
            }
        };
        // 지도 로딩 후 감지해서 숨기기
        const scaleObserver = new MutationObserver(() => {
            hideScaleControl();
        });

        scaleObserver.observe(document.getElementById('map'), {
            childList: true,
            subtree: true
        });


        if (! isMobile()) {
            document.getElementById("phone").addEventListener("click", function(e) {
                e.preventDefault(); // 기본 동작 막기 (페이지 이동 안 함)
            });

        }
    </script>
@endsection