@extends('layouts.default', [
    'activatedNavItem' => 'EDM',
])

@push('head')
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=8qqra6ajrr"></script>
@endpush

@section('content')
<article class="container brand-branches domestic jongro">
    <!-- 페이지타이틀 : full-bg -->
    <div class="area-pages-top parallax-bg">
        <h1 class="page-title">{{$branchInfo['title']}}</h1>
    </div>

    <!-- 지사안내 -->
    <article class="area-edm-branches" data-tab="tab-wrap">
        <div class="sm-branches-content">
            <section class="sm-bh-tabs-con">
                <div class="img-wrap">
                    <div class="slider">
                        <ul>
                            @foreach ($branchInfo['images'] as $images)
                                <li class="pageOnImgBlock">
                                    <figure>
                                    <img src="{{$images->url}}" alt="ed:m유학센터 종로지사 이미지">
                                        <figcaption>{{$images->desc}}</figcaption>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                        <div class="paging-number"></div>
                    </div>
                    <div class="pager">
                        <!-- [D]: slider의 ul 내용과 동일합니다. -->
                        <ul>
                            @foreach ($branchInfo['images'] as $images)
                                <li class="pageOnImgBlock">
                                    <figure>
                                    <img src="{{$images->url}}" alt="ed:m유학센터 종로지사 이미지 리스트">
                                        <figcaption>{{$images->desc}}</figcaption>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <article class="info-wrap">
                    <h3 class="bransches-name">{{ $branchInfo['title'] }}</h3>
                    <div class="bransches-info">
                        <div class="list-wrap">
                            <dl>
                                <dt>연락처</dt>
                                <dd>전화: {{ $branchInfo['tel'] }}</dd>
                                <dd>팩스: {{ $branchInfo['fax'] }}</dd>
                            </dl>
                            <dl>
                                <dt>근무시간</dt>
                                <dd>
                                    <p class="bullet">{{ $branchInfo['time'] }}</p>
                                    {{-- <p class="bullet">
                                        {{ $branchInfo['time2'] }}<br>
                                        <span class="exp-txt">*평일 야간상담 사전 예약 시 가능</span>
                                    </p> --}}
                                </dd>
                            </dl>
                            <dl>
                                <dt>주소</dt>
                                <dd>
                                    도로명: {{ $branchInfo['address_new'] }}
                                </dd>
                                <dd>
                                    지번: {{ $branchInfo['address'] }}
                                </dd>
                                <dd>
                                    우편번호: {{ $branchInfo['postal_code'] }}
                                </dd>
                            </dl>
                        </div>
                        <div class="button-wrap">
                            @if(getUserAgent() == 'pc')
                                <a href="{{ route('inquiry.qna.index') }}" class="button dark half">실시간Q&A</a>
                            @else
                                <a href="tel:{{ $branchInfo['tel'] }}" class="button dark half">무료전화상담</a>
                            @endif
                            <a href="{{ route('inquiry.consultation.create') }}" class="button color half">무료간편상담</a>
                        </div>
                        <div class="exp-box">
                            <p class="exp-txt">{{ $branchInfo['description1'] }}</p>
                        </div>
                    </div>
                </article>
            </section>
        </div>
    </article>

    <div class="area-brand-content">
        <!-- 앵커영역 -->
        <div class="area-branches-anchor">
            <a href="#branches-greeting" data-type="scroll-btn2">지사소개</a>
            <a href="#branches-location" data-type="scroll-btn2">찾아오시는길</a>
            <a href="#branches-photo" class="pc-menu" data-type="scroll-btn2">지사전경</a>
            <a href="#branches-review" data-type="scroll-btn2">감사해요edm<i class="ui-kit-new"></i> </a>
        </div>

        <!-- 지사소개 -->
        <section class="branches-greeting" id="branches-greeting">
            <div class="flex-wrap">
                <div class="branches-title-wrap">
                    <h2 class="branches-title">지사소개</h2>
                </div>
                <div class="context">
                    <p>
                        <em>
                            안녕하세요. ed:m유학센터 종로지사입니다.<br>
                            다양한 경험 및 전문 지식을 갖춘 컨설턴트를 통해, 성공적인 어학연수와 유학의 첫 걸음을 내딛는데 도움이 되는 안내자가 되겠습니다.
                        </em>
                    </p>
                    <p>
                        유학과 어학연수는 어느 곳에서 시작하는지에 따라 성공이 좌우됩니다.<br class="pc-br">
                        ed:m유학센터 종로지사는 학생이 원하는 방향을 함께 찾고, 꿈과 도전 그리고 성장을 이룰 수 있도록 각 분야의 최고의 전문 컨설턴트들이 함께 도와 드립니다.<br class="pc-br">
                        국내 최고의 전문성과 노하우를 자랑하는 ed:m유학센터 종로지사와 함께 시작하세요.
                    </p>
                </div>
            </div>
        </section>

        <!-- 풀 배너 영역 -->
        {{-- <div class="area-banner-slide">
            <div class="fix-wrap">
                <ul class="slider-cont-full">
                    <li>
                        <img src="https://s3.ap-northeast-2.amazonaws.com/uploadimg.edmedu.com/edm/edmuhak/contents/groups/1/categories/1/202004131120_d183ef746e27616246c739fd6cd39bb0.jpg" alt="edm아트유학 코로나19 방역대책 자세히보기">
                    </li>
                    <li>
                        <img src="https://s3.ap-northeast-2.amazonaws.com/uploadimg.edmedu.com/edm/edmuhak/contents/groups/1/categories/1/202004131120_d183ef746e27616246c739fd6cd39bb0.jpg" alt="edm아트유학 코로나19 방역대책 자세히보기">
                    </li>
                    <li>
                        배너3
                    </li>
                </ul>
            </div>
        </div> --}}

        <!-- 팝업-->
        <div class="area-layer-popup popup-sample">
            <div class="popup-container small-popup">
                <!--
                <div class="popup-title">
                    <p class="heading-text">타이틀</p>
                </div>-->
                <div class="popup-content">
                    <p>주소가 복사되었습니다.</p>

                    <p>원하는 곳에 붙여넣기(Ctrl+V)해주세요.</p>
                </div>

                <div class="popup-close-x">
                    <i class="ui-layout-close">팝업닫기</i>
                </div>
            </div>
        </div>


        <!-- 찾아오시는길 -->
        <section class="branches-location" id="branches-location">
            <div class="flex-wrap">
                <div class="branches-title-wrap">
                    <h2 class="branches-title">찾아오시는길</h2>
                    <p class="add-func">
                        <button class="btn-en branchKor">
                            <span class="branchEng">IN ENGLISH</span>
                            <span class="branchKor displayNone">IN KOREAN</span>
                        </button>
                        <button class="btn-share">
                            주소공유
                        </button>
                        <button class="btn-large">
                            <a href="{{ $branchInfo['map_url'] }}" target="_blank">크게보기</a>
                        </button>

                        <!-- 지도 복사 url hidden처리되어 있으면 클립보드 복사가 안되기 때문에 안보이게 처리 -->
                        <input class="branchmap-url" id="map-url" type="text" value="{{ $branchInfo['map_url'] }}" readonly>
                    </p>
                </div>
                <div class="column">
                    <div class="col2 map-wrap">
                        <div class="map-data">
                            <div class="map" id="map">
                                <div id="branchMap" class="branch-map"></div>
                            </div>
                        </div>
                        <div class="map-info">
                            <p class="address branchKor">{{ $branchInfo['address_new'] }}</p>
                            <p class="address branchEng displayNone">{{ $branchInfo['address_eng'] }}</p>
                            <p class="tel">{{ $branchInfo['tel'] }}</p>
                        </div>
                    </div>
                    <div class="col2">
                        <div class="howto-come branchKor">
                            <div class="by-subway">
                                <h3 class="tit">지하철 이용시</h3>
                                <p class="line1">
                                    1호선 종각역 4번 출구 → 직진 후 미샤에서 우회전 → 청계천 나오기 직전 오른편 계원빌딩 11층
                                </p>
                            </div>
                            <div class="by-bus">
                                <h3 class="tit">버스 이용시</h3>
                                <p>[주변 버스 정류장]</p>
                                <p>
                                    청계1가.광교 / 청계2가.삼일교 / 종로2가 / 종각역YMCA / 청계2가교차로 / 종각역
                                </p>
                                <a href="{{ $branchInfo['map_url'] }}" target="_blank" class="btn-detail">자세히보기</a>
                            </div>
                            <div class="by-drive">
                                <h3 class="tit">자가용 이용시</h3>
                                <p>계원빌딩 주차장 이용</p>
                                <p>- 평일: 09:00 ~ 22:00</p>
                                <p>- 토요일: 10:00 ~ 18:00</p>
                                <p class="exp">
                                    * 상담 후, 무료주차권을 발급해 드립니다.<br>
                                    * 주차 공간이 협소하므로 가급적 대중교통을 이용해 주시기 바랍니다.
                                </p>
                            </div>
                        </div>

                        <div class="howto-come branchEng displayNone">
                            <div class="by-subway">
                                <h3 class="tit">BY SUBWAY</h3>
                                <p class="line1">[From Jonggak Station]</p>
                                <p>1. Take the subway line 1 to 'Jonggak Station', exit gate 4</p>
                                <p>2. Walk straight ahead along this street and turn right in front of Missha beauty shop.</p>
                                <p>3. Walk straight ahead about 50m before Cheonggyecheon, then you will see our office (11F Kyewon bldg.) on the right-hand side at the end of the block.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 지사전경 -->
        <section class="branches-photo" id="branches-photo">
            <div class="flex-wrap area-edm-branches">
                <div class="branches-title-wrap">
                    <h2 class="branches-title">지사전경</h2>
                </div>
                <!-- [D]: 국내는 지사안내의 슬라이드와 동일 -->
                <div class="img-wrap">
                    <div class="slider">
                        <ul>
                            @foreach ($branchInfo['images'] as $images)
                                <li>
                                    <figure>
                                    <img src="{{$images->url}}" alt="ed:m유학센터 종로지사 전경 슬라이더">
                                        <figcaption>{{$images->desc}}</figcaption>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                        <div class="paging-number"></div>
                    </div>
                    <div class="pager">
                        <!-- [D]: slider의 ul 내용과 동일합니다. -->
                        <ul>
                            @foreach ($branchInfo['images'] as $images)
                                <li>
                                    <figure>
                                    <img src="{{$images->url}}" alt="ed:m유학센터 종로지사 전경 슬라이더 리스트">
                                        <figcaption>{{$images->desc}}</figcaption>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 감사해요edm -->
        <section id="branches-review" class="review-container">
            @include('edm.branch.thanksEdm', ['surveyList' => $surveyList])
        </section>
    </div>
</article>
<script type="text/javascript" src="/js//branch/common.js"></script>
<script type="text/javascript" src="/js/branch/domestic.js"></script>
<script type="text/javascript">
    var point = new naver.maps.LatLng(37.568785, 126.985497);
    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>
@endsection