@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 hongdae">
    <!-- 페이지타이틀 : 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>
                    <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>
                            <p class="exp-txt">{{ $branchInfo['description2'] }}</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><br>
                            고객님이 기대하고 목표하는 연수 및 학업을 성공적으로 마칠 수 있도록 홍대지사가
                            자세하고 꼼꼼하게 서포트 해 드리겠습니다.<br>
                        </em>
                    </p>
                    <p>
                        기대하고 꿈꾸는 성공적인 해외 유학 생활을 위해서는 한국에서부터 차근차근 준비하는 것이 필수입니다.<br class="pc-br">
                        풍부한 경험과 전문성을 갖고, 다양한 케이스를 진행해 본 저희 홍대지사의 전문 컨설턴트들이 여러분의 곁에 있습니다.<br class="pc-br">
                        현지생활에 잘 적응하고, 안전하게 학업 할 수 있도록 저희가 도와드리겠습니다.<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>
                        배너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호선 홍대입구역 하차 후 1번 출구에서 직진, 할리스커피 건물 5층
                                </p>
                            </div>
                            <div class="by-bus">
                                <h3 class="tit">버스 이용시</h3>
                                <p>[주변 버스 정류장]</p>
                                <p>
                                    홍대입구역 / 동교로사거리
                                </p>
                                <a href="{{ $branchInfo['map_url'] }}" target="_blank" class="btn-detail">자세히보기</a>
                            </div>
                            <div class="by-drive">
                                <h3 class="tit">자가용 이용시</h3>
                                <p>욱도빌딩 1층 및 지하 기계식 주차 이용 가능</p>
                                <p class="exp">
                                    * 지하 기계식 주차의 경우, SUV, 승합차, 밴 주차불가 <br>
                                    * 주차 공간이 협소하므로 가급적 대중교통을 이용해 주시기 바랍니다.
                                </p>
                            </div>
                        </div>

                        <div class="howto-come branchEng displayNone">
                            <div class="by-subway">
                                <h3 class="tit">BY SUBWAY</h3>
                                <p class="line2">[From Honggik Univ. Station]</p>
                                <p>1. Take the subway line 2 to 'Honggik Univ. Station', exit gate 1</p>
                                <p>2. Walk straight ahead about 20m, then you will see our office (Hana Bank Bldg.) on the right</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.556174, 126.922364);
    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