@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 gangnam2">
        <!-- 페이지타이틀 : 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">
                                @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>
                                세계로 뻗는 첫 발걸음에 따뜻한 친구가 되어 드리겠습니다.
                            </em>
                        </p>
                        <p>
                            ed:m유학센터  강남본사는 고객의 꿈을 찾아드리는 안내자가 되어드린다는 모토로 친절한 컨설팅을 제공해 드리고 있습니다.<br class="pc-br">
                            나만의 꿈, 멋진 직장, 자기계발, 해외 인턴십을 위해 해외에서 학업을 희망하고 계신가요?<br class="pc-br">
                            어느 곳에서나 들을 수 있는 상담이 아닌 '나에게 딱 맞는' 맞춤형 상담을 받고 싶으신가요?<br class="pc-br">
                            누구보다 반짝이는 여러분의 꿈을 향한 여정에 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">
                                        강남역 6번 출구 (도보 약2분)
                                    </p>
                                    <p class="line-new">
                                        강남역 6번 출구 (도보 약2분)
                                    </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">
                                        * 상담 후 무료주차권을 발급해 드립니다.
                                    </p>
                                </div>
                            </div>

                            <div class="howto-come branchEng displayNone">
                                <div class="by-subway">
                                    <h3 class="tit">BY SUBWAY</h3>

                                    <p>Line 2 Gangnam Station or Shinbundang Line Gangnam Station,Exit 6 <br>
                                        Walk about 2 minute on foot</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.495811, 127.027549);
        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