@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 daejeon">
    <!-- 페이지타이틀 : 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>
                        </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">
                        전문 유학 컨설턴트와 함께 안전하고 유익한 어학연수와 유학을 준비하시기를 바라겠습니다.<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="line-daejeon">
                                    지하철 1호선 유성온천역 하차 후, 7번 출구에서 충남대 방향으로 도보 10분
                                </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>대전지사 건물 지하주차장 이용 가능</p>
                                <p class="exp">
                                    * 주차장 주소: 대전광역시 유성구 대학로 86<br>
                                    * 주차 공간이 협소하므로 가급적 대중교통을 이용해 주시기 바랍니다.
                                </p>
                            </div>
                        </div>

                        <div class="howto-come branchEng displayNone">
                            <div class="by-subway">
                                <h3 class="tit">BY SUBWAY</h3>
                                <p class="line-daejeon">[From Yuseong Spa Station]</p>
                                <p>1. Take the subway line1 to 'Yuseong Spa Station', exit gate 7.</p>
                                <p>2. Walk straight ahead about 800m, then you will see our office (Focus Town Bldg.) on the right-hand 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(36.3610589, 127.344783);
    var map = new naver.maps.Map('branchMap', {
        center: point,
        zoom: 14,
        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