@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 sinchon">
        <!-- 페이지타이틀 : 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>
                                        <figure>
                                        <img src="{{$images->url}}" alt="ed:m유학센터 신촌지사 이미지" class="pageOnImgBlock">
                                            <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유학센터 신촌지사 이미지 리스트" class="pageOnImgBlock">
                                            <figcaption>{{$images->desc}}</figcaption>
                                        </figure>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <article class="info-wrap">
                        <h3 class="bransches-name">{{ $branchInfo['title'] }}</h3>
                        <p>당분간 강남본사에서 통합 운영합니다.</p>
                        <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">
                                <!-- pc/mobile 버튼 분기-->
                                @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>
                            ed:m유학센터 신촌지사의 풍부한 경험과 지식을 갖춘 전문 컨설턴트가 개개인에게 적합한 학원 및 학교를
                            선택하실 수 있도록 편안한 분위기 속에서 컨설팅을 도와 드리고 있습니다.<br class="pc-br">
                            여러분의 후회없는 성공적인 유학을 위해 함께 하겠습니다.<br class="pc-br">
                            신촌역 3번출구에서 도보 3분거리에 위치한 ed:m유학센터 신촌지사에서 체계적인 상담과 함께 여러분의
                            꿈을 계획해보세요.<br class="pc-br">
                            가장 안전하고 효과적인 어학연수, 유학의 길로 안내해 드리겠습니다.
                        </p>
                    </div>
                </div>
            </section>

            <!-- 풀 배너 영역 -->
            {{-- <div class="area-banner-slide">
                <div class="fix-wrap">
                    <ul class="slider-cont-full">
                        <li>
                            배너1
                        </li>
                        <li>
                            배너2
                        </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="line2">
                                        지하철 2호선 신촌역 하차 후, 3번 출구에서 100m 직진, 스타벅스 건물 11층
                                    </p>
                                </div>
                                <div class="by-bus">
                                    <h3 class="tit">버스 이용시</h3>
                                    <p>[주변 버스 정류장]</p>
                                    <p>
                                        연세로.문학의거리 / 연세로.스타광장 / 신촌전철역 / 연세로.명물거리 /
                                        구녹색극장 / 신촌오거리.2호선신촌역 / 신촌오거리.현대백화점 / 신촌역 /신촌전철역.그랜드마트 / 신촌역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 class="exp">
                                        * 주차 공간이 협소하므로 가급적 대중교통을 이용해 주시기 바랍니다.
                                    </p>
                                </div>
                            </div>

                            <div class="howto-come branchEng displayNone">
                                <div class="by-subway">
                                    <h3 class="tit">BY SUBWAY</h3>
                                    <p class="line2">[From Sinchon Station]</p>
                                    <p>1. Take the subway line 2 to 'Sinchon Station', exit gate 3</p>
                                    <p>2.  Walk straight ahead about 100m, then you will see our office (Starbucks Bldg.) on the right side</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.5565258, 126.937108);
        var map = new naver.maps.Map('branchMap', {
            center: point,
            zoom: 17,
            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