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

@section('css')
@endsection

@section('gnb', view('gnb', ['service'=>'academy']))

@section('subgnb', view('academy.gnb'))

@section('content')
<div class="container">
    <div class="path-wrapper">
        <div class="wrapper">
            <div class="page-title">오시는길</div>
            <dl class="path">
                <dt class="blind">path</dt>
                <dd>고객지원</dd>
                <dd>학원 안내</dd>
                <dd>오시는길</dd>
            </dl>
        </div>
    </div>
    <div class="company-wrapper">
        <div class="wrapper">
            <div id="company-slider">
                <div class="swiper" id="company-swiper">
                    <div class="company-button-prev"></div>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/01.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/02.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/03.png" />
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/04.png" />
                        </div>
                    </div>
                    <div class="company-button-next"></div>
                </div>
                <div class="company-thumb-wrapper">
                    <div thumbsSlider="" class="swiper" id="company-swiper-list">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/01.png" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/02.png" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/03.png" />
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ env('AWS_S3_IMG_URL') }}/academy/location/04.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <strong>아이엘츠 어학원</strong>
                <ul>
                    <li>
                        <dl>
                            <dt>문의</dt>
                            <dd>
                                전화 : 02-3444-8047<br>
                                카톡 : @edm아이엘츠
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>근무시간</dt>
                            <dd>주중 : 10:00 ~ 18:00</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>주소</dt>
                            <dd>도로명 : 서울 강남구 강남대로 84길 16 제이스타워 4~6F (06241)</dd>
                        </dl>
                    </li>
                </ul>
                <p class="noti">
                    상담 및 안내 데스크는 본 건물 6층에 있습니다.
                </p>
                <a class="btn-default" href="#none">무료 상담</a>
            </div>
        </div>
    </div>
    <div class="board-title">
        <div class="wrapper">
            <p>찾아오는 방법</p>
        </div>
    </div>
    <div class="map-wrapper">
        <div class="wrapper">
            <div class="map" id="map">
                <div id="branchMap" class="branch-map"></div>
            </div>
            <div class="map-info">
                <strong>
                    지하철 이용시
                </strong>
                <p>
                    강남역 2호선 1, 2번 출구 (도보 약 3분)<br>
                    강남역 신분당선 3번 출구 (도보 약 3분)
                </p>
                <strong>
                    버스 이용시
                </strong>
                <p>
                    신분당선 강남역(중) (22009, 22010) 정류장에서 도보 5분<br>
                    강남역, 역삼세무서 (23287), 삼성서초역삼세무서 (23396) 도보 3분
                </p>
                <strong>
                    자가용 이용시
                </strong>
                <p>
                    제이스타워 주차장 이용 (1시간 무료)<br>
                    * 상담 후 무료 주차권을 발급해 드립니다.<br>
                    * 주차장은 기계식 주차 시설입니다.
                </p>
            </div>
            <script type="text/javascript">
                var point = new naver.maps.LatLng(35.1554796035316, 129.05957683920144);
                var map = new naver.maps.Map('branchMap', {
                    center: point,
                    zoom: 16,
                    enableWheelZoom: true,
                    enableDragPan: true,
                    enableDblClickZoom: false,
                    mapMode: 0,
                    activateTrafficMap: false,
                    activateBicycleMap: false
                });
                new naver.maps.Marker({
                    title: 'ed:m유학센터 부산지사',
                    position: point
                }).setMap(map);
            </script>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function () {
        //
        var companySwiperList = new Swiper("#company-swiper-list", {
            spaceBetween: 10,
            slidesPerView: 4,
            // Navigation arrows
            navigation: {
                nextEl: '.company-button-next',
                prevEl: '.company-button-prev',
            }
        });
        var companySwiper = new Swiper("#company-swiper", {
            spaceBetween: 0,
            // navigation: {
            //     nextEl: ".swiper-button-next",
            //     prevEl: ".swiper-button-prev",
            // },
            thumbs: {
                swiper: companySwiperList,
            },
        });

    });
</script>
@endsection

@section('footer', view('footer'))